/* ==========================================================================
   Flow Theme - MudBlazor Compatible Color Palette
   ========================================================================== */

/* ==========================================================================
   Light Theme (Default)
   ========================================================================== */
:root,
[data-theme="light"],
.flow-theme-light {
  /* Primary */
  --flow-primary: #594AE2;
  --flow-primary-text: #FFFFFF;
  --flow-primary-darken: #3C2BB0;
  --flow-primary-lighten: #7B6FE8;

  /* Secondary */
  --flow-secondary: #FF4081;
  --flow-secondary-text: #FFFFFF;
  --flow-secondary-darken: #C60055;
  --flow-secondary-lighten: #FF79A8;

  /* Tertiary */
  --flow-tertiary: #1EC8A5;
  --flow-tertiary-text: #FFFFFF;
  --flow-tertiary-darken: #14A085;
  --flow-tertiary-lighten: #4DD8BC;

  /* Info */
  --flow-info: #2196F3;
  --flow-info-text: #FFFFFF;
  --flow-info-darken: #0B79D0;
  --flow-info-lighten: #64B5F6;

  /* Success */
  --flow-success: #00C853;
  --flow-success-text: #FFFFFF;
  --flow-success-darken: #009624;
  --flow-success-lighten: #5EFC82;

  /* Warning */
  --flow-warning: #FF9800;
  --flow-warning-text: #FFFFFF;
  --flow-warning-darken: #C66900;
  --flow-warning-lighten: #FFB74D;

  /* Error */
  --flow-error: #F44336;
  --flow-error-text: #FFFFFF;
  --flow-error-darken: #C62828;
  --flow-error-lighten: #EF5350;

  /* Dark */
  --flow-dark: #424242;
  --flow-dark-text: #FFFFFF;
  --flow-dark-darken: #1B1B1B;
  --flow-dark-lighten: #6D6D6D;

  /* Surface & Background */
  --flow-surface: #FFFFFF;
  --flow-background: #FFFFFF;
  --flow-background-gray: #F5F5F5;

  /* Text */
  --flow-text-primary: #424242;
  --flow-text-secondary: rgba(0, 0, 0, 0.54);
  --flow-text-disabled: rgba(0, 0, 0, 0.38);

  /* Action */
  --flow-action-default: rgba(0, 0, 0, 0.54);
  --flow-action-disabled: rgba(0, 0, 0, 0.26);
  --flow-action-disabled-background: rgba(0, 0, 0, 0.12);

  /* Lines & Dividers */
  --flow-lines-default: rgba(0, 0, 0, 0.12);
  --flow-divider: rgba(0, 0, 0, 0.12);

  /* Overlay */
  --flow-overlay-light: rgba(255, 255, 255, 0.5);
  --flow-overlay-dark: rgba(0, 0, 0, 0.5);

  /* State layers */
  --flow-state-hover: 0.04;
  --flow-state-focus: 0.12;
  --flow-state-pressed: 0.12;
  --flow-state-dragged: 0.08;
  --flow-state-disabled: 0.12;
  --flow-state-disabled-content: 0.38;

  /* Hover backgrounds */
  --flow-action-default-hover: rgba(0, 0, 0, 0.04);
  --flow-primary-hover: rgba(89, 74, 226, 0.08);
  --flow-secondary-hover: rgba(255, 64, 129, 0.08);
  --flow-tertiary-hover: rgba(30, 200, 165, 0.08);
  --flow-info-hover: rgba(33, 150, 243, 0.08);
  --flow-success-hover: rgba(0, 200, 83, 0.08);
  --flow-warning-hover: rgba(255, 152, 0, 0.08);
  --flow-error-hover: rgba(244, 67, 54, 0.08);
  --flow-dark-hover: rgba(66, 66, 66, 0.08);

  /* Elevation shadows */
  --flow-elevation-0: none;
  --flow-elevation-1: 0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);
  --flow-elevation-2: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
  --flow-elevation-4: 0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12);
  --flow-elevation-8: 0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12);

  /* Default border radius */
  --flow-default-borderradius: 4px;
}

/* ==========================================================================
   Dark Theme
   ========================================================================== */
[data-theme="dark"],
.flow-theme-dark {
  /* Primary */
  --flow-primary: #776BE7;
  --flow-primary-text: #FFFFFF;
  --flow-primary-darken: #5A4FBA;
  --flow-primary-lighten: #9A91ED;

  /* Secondary */
  --flow-secondary: #FF4081;
  --flow-secondary-text: #FFFFFF;
  --flow-secondary-darken: #C60055;
  --flow-secondary-lighten: #FF79A8;

  /* Tertiary */
  --flow-tertiary: #1EC8A5;
  --flow-tertiary-text: #FFFFFF;
  --flow-tertiary-darken: #14A085;
  --flow-tertiary-lighten: #4DD8BC;

  /* Info */
  --flow-info: #3299FF;
  --flow-info-text: #FFFFFF;
  --flow-info-darken: #0070E0;
  --flow-info-lighten: #66B2FF;

  /* Success */
  --flow-success: #0BBA83;
  --flow-success-text: #FFFFFF;
  --flow-success-darken: #088F64;
  --flow-success-lighten: #3DD1A1;

  /* Warning */
  --flow-warning: #FFA800;
  --flow-warning-text: #FFFFFF;
  --flow-warning-darken: #CC8600;
  --flow-warning-lighten: #FFBF40;

  /* Error */
  --flow-error: #F64E62;
  --flow-error-text: #FFFFFF;
  --flow-error-darken: #D32F42;
  --flow-error-lighten: #F87A8A;

  /* Dark */
  --flow-dark: #27272F;
  --flow-dark-text: #FFFFFF;
  --flow-dark-darken: #1A1A1F;
  --flow-dark-lighten: #3D3D47;

  /* Surface & Background */
  --flow-surface: #373740;
  --flow-background: #32333D;
  --flow-background-gray: #27272F;

  /* Text */
  --flow-text-primary: rgba(255, 255, 255, 0.70);
  --flow-text-secondary: rgba(255, 255, 255, 0.50);
  --flow-text-disabled: rgba(255, 255, 255, 0.20);

  /* Action */
  --flow-action-default: #ADADB1;
  --flow-action-disabled: rgba(255, 255, 255, 0.26);
  --flow-action-disabled-background: rgba(255, 255, 255, 0.12);

  /* Lines & Dividers */
  --flow-lines-default: rgba(255, 255, 255, 0.12);
  --flow-divider: rgba(255, 255, 255, 0.12);

  /* Overlay */
  --flow-overlay-light: rgba(255, 255, 255, 0.5);
  --flow-overlay-dark: rgba(0, 0, 0, 0.5);

  /* Hover backgrounds */
  --flow-action-default-hover: rgba(255, 255, 255, 0.08);
  --flow-primary-hover: rgba(119, 107, 231, 0.16);
  --flow-secondary-hover: rgba(255, 64, 129, 0.16);
  --flow-tertiary-hover: rgba(30, 200, 165, 0.16);
  --flow-info-hover: rgba(50, 153, 255, 0.16);
  --flow-success-hover: rgba(11, 186, 131, 0.16);
  --flow-warning-hover: rgba(255, 168, 0, 0.16);
  --flow-error-hover: rgba(246, 78, 98, 0.16);
  --flow-dark-hover: rgba(39, 39, 47, 0.16);

  /* Elevation shadows */
  --flow-elevation-0: none;
  --flow-elevation-1: 0px 2px 1px -1px rgba(0,0,0,0.4), 0px 1px 1px 0px rgba(0,0,0,0.28), 0px 1px 3px 0px rgba(0,0,0,0.24);
  --flow-elevation-2: 0px 3px 1px -2px rgba(0,0,0,0.4), 0px 2px 2px 0px rgba(0,0,0,0.28), 0px 1px 5px 0px rgba(0,0,0,0.24);
  --flow-elevation-4: 0px 2px 4px -1px rgba(0,0,0,0.4), 0px 4px 5px 0px rgba(0,0,0,0.28), 0px 1px 10px 0px rgba(0,0,0,0.24);
  --flow-elevation-8: 0px 5px 5px -3px rgba(0,0,0,0.4), 0px 8px 10px 1px rgba(0,0,0,0.28), 0px 3px 14px 2px rgba(0,0,0,0.24);

  /* Default border radius */
  --flow-default-borderradius: 4px;
}

/* Auto dark theme based on system preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.flow-theme-light) {
    /* Primary */
    --flow-primary: #776BE7;
    --flow-primary-text: #FFFFFF;
    --flow-primary-darken: #5A4FBA;
    --flow-primary-lighten: #9A91ED;

    /* Secondary */
    --flow-secondary: #FF4081;
    --flow-secondary-text: #FFFFFF;
    --flow-secondary-darken: #C60055;
    --flow-secondary-lighten: #FF79A8;

    /* Tertiary */
    --flow-tertiary: #1EC8A5;
    --flow-tertiary-text: #FFFFFF;
    --flow-tertiary-darken: #14A085;
    --flow-tertiary-lighten: #4DD8BC;

    /* Info */
    --flow-info: #3299FF;
    --flow-info-text: #FFFFFF;
    --flow-info-darken: #0070E0;
    --flow-info-lighten: #66B2FF;

    /* Success */
    --flow-success: #0BBA83;
    --flow-success-text: #FFFFFF;
    --flow-success-darken: #088F64;
    --flow-success-lighten: #3DD1A1;

    /* Warning */
    --flow-warning: #FFA800;
    --flow-warning-text: #FFFFFF;
    --flow-warning-darken: #CC8600;
    --flow-warning-lighten: #FFBF40;

    /* Error */
    --flow-error: #F64E62;
    --flow-error-text: #FFFFFF;
    --flow-error-darken: #D32F42;
    --flow-error-lighten: #F87A8A;

    /* Dark */
    --flow-dark: #27272F;
    --flow-dark-text: #FFFFFF;
    --flow-dark-darken: #1A1A1F;
    --flow-dark-lighten: #3D3D47;

    /* Surface & Background */
    --flow-surface: #373740;
    --flow-background: #32333D;
    --flow-background-gray: #27272F;

    /* Text */
    --flow-text-primary: rgba(255, 255, 255, 0.70);
    --flow-text-secondary: rgba(255, 255, 255, 0.50);
    --flow-text-disabled: rgba(255, 255, 255, 0.20);

    /* Action */
    --flow-action-default: #ADADB1;
    --flow-action-disabled: rgba(255, 255, 255, 0.26);
    --flow-action-disabled-background: rgba(255, 255, 255, 0.12);

    /* Lines & Dividers */
    --flow-lines-default: rgba(255, 255, 255, 0.12);
    --flow-divider: rgba(255, 255, 255, 0.12);

    /* Overlay */
    --flow-overlay-light: rgba(255, 255, 255, 0.5);
    --flow-overlay-dark: rgba(0, 0, 0, 0.5);

    /* Hover backgrounds */
    --flow-action-default-hover: rgba(255, 255, 255, 0.08);
    --flow-primary-hover: rgba(119, 107, 231, 0.16);
    --flow-secondary-hover: rgba(255, 64, 129, 0.16);
    --flow-tertiary-hover: rgba(30, 200, 165, 0.16);
    --flow-info-hover: rgba(50, 153, 255, 0.16);
    --flow-success-hover: rgba(11, 186, 131, 0.16);
    --flow-warning-hover: rgba(255, 168, 0, 0.16);
    --flow-error-hover: rgba(246, 78, 98, 0.16);
    --flow-dark-hover: rgba(39, 39, 47, 0.16);

    /* Elevation shadows */
    --flow-elevation-0: none;
    --flow-elevation-1: 0px 2px 1px -1px rgba(0,0,0,0.4), 0px 1px 1px 0px rgba(0,0,0,0.28), 0px 1px 3px 0px rgba(0,0,0,0.24);
    --flow-elevation-2: 0px 3px 1px -2px rgba(0,0,0,0.4), 0px 2px 2px 0px rgba(0,0,0,0.28), 0px 1px 5px 0px rgba(0,0,0,0.24);
    --flow-elevation-4: 0px 2px 4px -1px rgba(0,0,0,0.4), 0px 4px 5px 0px rgba(0,0,0,0.28), 0px 1px 10px 0px rgba(0,0,0,0.24);
    --flow-elevation-8: 0px 5px 5px -3px rgba(0,0,0,0.4), 0px 8px 10px 1px rgba(0,0,0,0.28), 0px 3px 14px 2px rgba(0,0,0,0.24);

    /* Default border radius */
    --flow-default-borderradius: 4px;
  }
}
/* ==========================================================================
   Flow Grid System - 24-колоночная CSS Grid система
   ========================================================================== */

/* CSS Custom Properties для настройки grid */
:root {
  --flow-columns: 24;
  --flow-gutter-x: 1rem;
  --flow-gutter-y: 0;
  --flow-gutter: var(--flow-gutter-x);
}

/* ==========================================================================
   Container - Контейнер с ограничением ширины
   ========================================================================== */

.flow-container {
  width: 100%;
  margin-inline: auto;
  padding-inline: calc(var(--flow-gutter-x) * 0.5);
}

.flow-container-fluid {
  width: 100%;
  max-width: 100%;
  padding-inline: calc(var(--flow-gutter-x) * 0.5);
}

/* Контейнер с фиксированной максимальной шириной (стиль MudBlazor) */
.flow-container-sm { max-width: 600px; }
.flow-container-md { max-width: 960px; }
.flow-container-lg { max-width: 1280px; }
.flow-container-xl { max-width: 1920px; }
.flow-container-xxl { max-width: 2560px; }

/* ==========================================================================
   Responsive Container - Адаптивный контейнер
   Меняет max-width в зависимости от размера экрана
   ========================================================================== */

.flow-container-responsive {
  width: 100%;
  margin-inline: auto;
  padding-inline: calc(var(--flow-gutter-x) * 0.5);
  max-width: 100%;
}

@media (min-width: 600px) {
  .flow-container-responsive { max-width: 600px; }
}

@media (min-width: 960px) {
  .flow-container-responsive { max-width: 960px; }
}

@media (min-width: 1280px) {
  .flow-container-responsive { max-width: 1280px; }
}

@media (min-width: 1920px) {
  .flow-container-responsive { max-width: 1920px; }
}

@media (min-width: 2560px) {
  .flow-container-responsive { max-width: 2560px; }
}

/* ==========================================================================
   Breakpoint Containers - Контейнеры с брейкпоинтом
   100% ширина до брейкпоинта, затем фиксированная
   ========================================================================== */

/* Fluid до sm, затем фиксированная ширина */
.flow-container-sm-up {
  width: 100%;
  margin-inline: auto;
  padding-inline: calc(var(--flow-gutter-x) * 0.5);
}

@media (min-width: 600px) {
  .flow-container-sm-up { max-width: 600px; }
}

@media (min-width: 960px) {
  .flow-container-sm-up { max-width: 960px; }
}

@media (min-width: 1280px) {
  .flow-container-sm-up { max-width: 1280px; }
}

@media (min-width: 1920px) {
  .flow-container-sm-up { max-width: 1920px; }
}

@media (min-width: 2560px) {
  .flow-container-sm-up { max-width: 2560px; }
}

/* Fluid до md, затем фиксированная ширина */
.flow-container-md-up {
  width: 100%;
  margin-inline: auto;
  padding-inline: calc(var(--flow-gutter-x) * 0.5);
}

@media (min-width: 960px) {
  .flow-container-md-up { max-width: 960px; }
}

@media (min-width: 1280px) {
  .flow-container-md-up { max-width: 1280px; }
}

@media (min-width: 1920px) {
  .flow-container-md-up { max-width: 1920px; }
}

@media (min-width: 2560px) {
  .flow-container-md-up { max-width: 2560px; }
}

/* Fluid до lg, затем фиксированная ширина */
.flow-container-lg-up {
  width: 100%;
  margin-inline: auto;
  padding-inline: calc(var(--flow-gutter-x) * 0.5);
}

@media (min-width: 1280px) {
  .flow-container-lg-up { max-width: 1280px; }
}

@media (min-width: 1920px) {
  .flow-container-lg-up { max-width: 1920px; }
}

@media (min-width: 2560px) {
  .flow-container-lg-up { max-width: 2560px; }
}

/* Fluid до xl, затем фиксированная ширина */
.flow-container-xl-up {
  width: 100%;
  margin-inline: auto;
  padding-inline: calc(var(--flow-gutter-x) * 0.5);
}

@media (min-width: 1920px) {
  .flow-container-xl-up { max-width: 1920px; }
}

@media (min-width: 2560px) {
  .flow-container-xl-up { max-width: 2560px; }
}

/* Fluid до xxl, затем фиксированная ширина */
.flow-container-xxl-up {
  width: 100%;
  margin-inline: auto;
  padding-inline: calc(var(--flow-gutter-x) * 0.5);
}

@media (min-width: 2560px) {
  .flow-container-xxl-up { max-width: 2560px; }
}

/* ==========================================================================
   Row - Строка Grid
   ========================================================================== */

.flow-row {
  display: grid;
  grid-template-columns: repeat(var(--flow-columns), 1fr);
  gap: var(--flow-gutter-y) var(--flow-gutter-x);
}

/* Row без отступов */
.flow-row-no-gutters {
  --flow-gutter-x: 0;
  --flow-gutter-y: 0;
}

/* ==========================================================================
   Gutter утилиты
   ========================================================================== */

/* Gutter X (горизонтальный) */
.flow-gx-0 { --flow-gutter-x: 0; }
.flow-gx-1 { --flow-gutter-x: 0.25rem; }
.flow-gx-2 { --flow-gutter-x: 0.5rem; }
.flow-gx-3 { --flow-gutter-x: 1rem; }
.flow-gx-4 { --flow-gutter-x: 1.5rem; }
.flow-gx-5 { --flow-gutter-x: 2rem; }
.flow-gx-6 { --flow-gutter-x: 3rem; }

/* Gutter Y (вертикальный) */
.flow-gy-0 { --flow-gutter-y: 0; }
.flow-gy-1 { --flow-gutter-y: 0.25rem; }
.flow-gy-2 { --flow-gutter-y: 0.5rem; }
.flow-gy-3 { --flow-gutter-y: 1rem; }
.flow-gy-4 { --flow-gutter-y: 1.5rem; }
.flow-gy-5 { --flow-gutter-y: 2rem; }
.flow-gy-6 { --flow-gutter-y: 3rem; }

/* Gutter (оба направления) */
.flow-g-0 { --flow-gutter-x: 0; --flow-gutter-y: 0; }
.flow-g-1 { --flow-gutter-x: 0.25rem; --flow-gutter-y: 0.25rem; }
.flow-g-2 { --flow-gutter-x: 0.5rem; --flow-gutter-y: 0.5rem; }
.flow-g-3 { --flow-gutter-x: 1rem; --flow-gutter-y: 1rem; }
.flow-g-4 { --flow-gutter-x: 1.5rem; --flow-gutter-y: 1.5rem; }
.flow-g-5 { --flow-gutter-x: 2rem; --flow-gutter-y: 2rem; }
.flow-g-6 { --flow-gutter-x: 3rem; --flow-gutter-y: 3rem; }

/* ==========================================================================
   Column - Колонка Grid
   ========================================================================== */

/* Базовый класс колонки */
.flow-col {
  grid-column: span var(--flow-columns) / span var(--flow-columns);
  min-width: 0;
}

/* Auto-width колонка */
.flow-col-auto {
  grid-column: auto;
}

/* Генерация колонок 1-24 */
.flow-col-1 { grid-column: span 1 / span 1; }
.flow-col-2 { grid-column: span 2 / span 2; }
.flow-col-3 { grid-column: span 3 / span 3; }
.flow-col-4 { grid-column: span 4 / span 4; }
.flow-col-5 { grid-column: span 5 / span 5; }
.flow-col-6 { grid-column: span 6 / span 6; }
.flow-col-7 { grid-column: span 7 / span 7; }
.flow-col-8 { grid-column: span 8 / span 8; }
.flow-col-9 { grid-column: span 9 / span 9; }
.flow-col-10 { grid-column: span 10 / span 10; }
.flow-col-11 { grid-column: span 11 / span 11; }
.flow-col-12 { grid-column: span 12 / span 12; }
.flow-col-13 { grid-column: span 13 / span 13; }
.flow-col-14 { grid-column: span 14 / span 14; }
.flow-col-15 { grid-column: span 15 / span 15; }
.flow-col-16 { grid-column: span 16 / span 16; }
.flow-col-17 { grid-column: span 17 / span 17; }
.flow-col-18 { grid-column: span 18 / span 18; }
.flow-col-19 { grid-column: span 19 / span 19; }
.flow-col-20 { grid-column: span 20 / span 20; }
.flow-col-21 { grid-column: span 21 / span 21; }
.flow-col-22 { grid-column: span 22 / span 22; }
.flow-col-23 { grid-column: span 23 / span 23; }
.flow-col-24 { grid-column: span 24 / span 24; }

/* ==========================================================================
   Offset утилиты
   ========================================================================== */

.flow-offset-0 { grid-column-start: 1; }
.flow-offset-1 { grid-column-start: 2; }
.flow-offset-2 { grid-column-start: 3; }
.flow-offset-3 { grid-column-start: 4; }
.flow-offset-4 { grid-column-start: 5; }
.flow-offset-5 { grid-column-start: 6; }
.flow-offset-6 { grid-column-start: 7; }
.flow-offset-7 { grid-column-start: 8; }
.flow-offset-8 { grid-column-start: 9; }
.flow-offset-9 { grid-column-start: 10; }
.flow-offset-10 { grid-column-start: 11; }
.flow-offset-11 { grid-column-start: 12; }
.flow-offset-12 { grid-column-start: 13; }
.flow-offset-13 { grid-column-start: 14; }
.flow-offset-14 { grid-column-start: 15; }
.flow-offset-15 { grid-column-start: 16; }
.flow-offset-16 { grid-column-start: 17; }
.flow-offset-17 { grid-column-start: 18; }
.flow-offset-18 { grid-column-start: 19; }
.flow-offset-19 { grid-column-start: 20; }
.flow-offset-20 { grid-column-start: 21; }
.flow-offset-21 { grid-column-start: 22; }
.flow-offset-22 { grid-column-start: 23; }
.flow-offset-23 { grid-column-start: 24; }

/* ==========================================================================
   Order утилиты
   ========================================================================== */

.flow-order-first { order: -1; }
.flow-order-last { order: 25; }
.flow-order-0 { order: 0; }
.flow-order-1 { order: 1; }
.flow-order-2 { order: 2; }
.flow-order-3 { order: 3; }
.flow-order-4 { order: 4; }
.flow-order-5 { order: 5; }
.flow-order-6 { order: 6; }
.flow-order-7 { order: 7; }
.flow-order-8 { order: 8; }
.flow-order-9 { order: 9; }
.flow-order-10 { order: 10; }
.flow-order-11 { order: 11; }
.flow-order-12 { order: 12; }

/* ==========================================================================
   Align Self утилиты (вертикальное выравнивание элемента)
   ========================================================================== */

.flow-align-self-auto { align-self: auto; }
.flow-align-self-start { align-self: start; }
.flow-align-self-end { align-self: end; }
.flow-align-self-center { align-self: center; }
.flow-align-self-baseline { align-self: baseline; }
.flow-align-self-stretch { align-self: stretch; }

/* ==========================================================================
   Justify Self утилиты (горизонтальное выравнивание элемента)
   ========================================================================== */

.flow-justify-self-auto { justify-self: auto; }
.flow-justify-self-start { justify-self: start; }
.flow-justify-self-end { justify-self: end; }
.flow-justify-self-center { justify-self: center; }
.flow-justify-self-stretch { justify-self: stretch; }

/* ==========================================================================
   Align Items утилиты (вертикальное выравнивание всех элементов в строке)
   ========================================================================== */

.flow-align-items-start { align-items: start; }
.flow-align-items-end { align-items: end; }
.flow-align-items-center { align-items: center; }
.flow-align-items-baseline { align-items: baseline; }
.flow-align-items-stretch { align-items: stretch; }

/* ==========================================================================
   Justify Items утилиты (горизонтальное выравнивание всех элементов в строке)
   ========================================================================== */

.flow-justify-items-start { justify-items: start; }
.flow-justify-items-end { justify-items: end; }
.flow-justify-items-center { justify-items: center; }
.flow-justify-items-stretch { justify-items: stretch; }

/* ==========================================================================
   Align Content утилиты (выравнивание содержимого контейнера)
   ========================================================================== */

.flow-align-content-start { align-content: start; }
.flow-align-content-end { align-content: end; }
.flow-align-content-center { align-content: center; }
.flow-align-content-between { align-content: space-between; }
.flow-align-content-around { align-content: space-around; }
.flow-align-content-evenly { align-content: space-evenly; }
.flow-align-content-stretch { align-content: stretch; }

/* ==========================================================================
   Justify Content утилиты (горизонтальное распределение)
   ========================================================================== */

.flow-justify-content-start { justify-content: start; }
.flow-justify-content-end { justify-content: end; }
.flow-justify-content-center { justify-content: center; }
.flow-justify-content-between { justify-content: space-between; }
.flow-justify-content-around { justify-content: space-around; }
.flow-justify-content-evenly { justify-content: space-evenly; }

/* ==========================================================================
   Responsive Breakpoints (MudBlazor style)
   ========================================================================== */

/* Small devices (≥600px) */
@media (min-width: 600px) {
  .flow-grid-sm { max-width: 600px; }
  
  .flow-col-sm { grid-column: span var(--flow-columns) / span var(--flow-columns); }
  .flow-col-sm-auto { grid-column: auto; }
  .flow-col-sm-1 { grid-column: span 1 / span 1; }
  .flow-col-sm-2 { grid-column: span 2 / span 2; }
  .flow-col-sm-3 { grid-column: span 3 / span 3; }
  .flow-col-sm-4 { grid-column: span 4 / span 4; }
  .flow-col-sm-5 { grid-column: span 5 / span 5; }
  .flow-col-sm-6 { grid-column: span 6 / span 6; }
  .flow-col-sm-7 { grid-column: span 7 / span 7; }
  .flow-col-sm-8 { grid-column: span 8 / span 8; }
  .flow-col-sm-9 { grid-column: span 9 / span 9; }
  .flow-col-sm-10 { grid-column: span 10 / span 10; }
  .flow-col-sm-11 { grid-column: span 11 / span 11; }
  .flow-col-sm-12 { grid-column: span 12 / span 12; }
  .flow-col-sm-13 { grid-column: span 13 / span 13; }
  .flow-col-sm-14 { grid-column: span 14 / span 14; }
  .flow-col-sm-15 { grid-column: span 15 / span 15; }
  .flow-col-sm-16 { grid-column: span 16 / span 16; }
  .flow-col-sm-17 { grid-column: span 17 / span 17; }
  .flow-col-sm-18 { grid-column: span 18 / span 18; }
  .flow-col-sm-19 { grid-column: span 19 / span 19; }
  .flow-col-sm-20 { grid-column: span 20 / span 20; }
  .flow-col-sm-21 { grid-column: span 21 / span 21; }
  .flow-col-sm-22 { grid-column: span 22 / span 22; }
  .flow-col-sm-23 { grid-column: span 23 / span 23; }
  .flow-col-sm-24 { grid-column: span 24 / span 24; }

  .flow-offset-sm-0 { grid-column-start: 1; }
  .flow-offset-sm-1 { grid-column-start: 2; }
  .flow-offset-sm-2 { grid-column-start: 3; }
  .flow-offset-sm-3 { grid-column-start: 4; }
  .flow-offset-sm-4 { grid-column-start: 5; }
  .flow-offset-sm-5 { grid-column-start: 6; }
  .flow-offset-sm-6 { grid-column-start: 7; }
  .flow-offset-sm-7 { grid-column-start: 8; }
  .flow-offset-sm-8 { grid-column-start: 9; }
  .flow-offset-sm-9 { grid-column-start: 10; }
  .flow-offset-sm-10 { grid-column-start: 11; }
  .flow-offset-sm-11 { grid-column-start: 12; }
  .flow-offset-sm-12 { grid-column-start: 13; }

  .flow-order-sm-first { order: -1; }
  .flow-order-sm-last { order: 25; }
  .flow-order-sm-0 { order: 0; }
  .flow-order-sm-1 { order: 1; }
  .flow-order-sm-2 { order: 2; }
  .flow-order-sm-3 { order: 3; }
  .flow-order-sm-4 { order: 4; }
  .flow-order-sm-5 { order: 5; }

  .flow-align-self-sm-auto { align-self: auto; }
  .flow-align-self-sm-start { align-self: start; }
  .flow-align-self-sm-end { align-self: end; }
  .flow-align-self-sm-center { align-self: center; }
  .flow-align-self-sm-baseline { align-self: baseline; }
  .flow-align-self-sm-stretch { align-self: stretch; }

  .flow-gx-sm-0 { --flow-gutter-x: 0; }
  .flow-gx-sm-1 { --flow-gutter-x: 0.25rem; }
  .flow-gx-sm-2 { --flow-gutter-x: 0.5rem; }
  .flow-gx-sm-3 { --flow-gutter-x: 1rem; }
  .flow-gx-sm-4 { --flow-gutter-x: 1.5rem; }
  .flow-gx-sm-5 { --flow-gutter-x: 2rem; }

  .flow-gy-sm-0 { --flow-gutter-y: 0; }
  .flow-gy-sm-1 { --flow-gutter-y: 0.25rem; }
  .flow-gy-sm-2 { --flow-gutter-y: 0.5rem; }
  .flow-gy-sm-3 { --flow-gutter-y: 1rem; }
  .flow-gy-sm-4 { --flow-gutter-y: 1.5rem; }
  .flow-gy-sm-5 { --flow-gutter-y: 2rem; }
}

/* Medium devices (≥960px) */
@media (min-width: 960px) {
  .flow-grid-md { max-width: 960px; }
  
  .flow-col-md { grid-column: span var(--flow-columns) / span var(--flow-columns); }
  .flow-col-md-auto { grid-column: auto; }
  .flow-col-md-1 { grid-column: span 1 / span 1; }
  .flow-col-md-2 { grid-column: span 2 / span 2; }
  .flow-col-md-3 { grid-column: span 3 / span 3; }
  .flow-col-md-4 { grid-column: span 4 / span 4; }
  .flow-col-md-5 { grid-column: span 5 / span 5; }
  .flow-col-md-6 { grid-column: span 6 / span 6; }
  .flow-col-md-7 { grid-column: span 7 / span 7; }
  .flow-col-md-8 { grid-column: span 8 / span 8; }
  .flow-col-md-9 { grid-column: span 9 / span 9; }
  .flow-col-md-10 { grid-column: span 10 / span 10; }
  .flow-col-md-11 { grid-column: span 11 / span 11; }
  .flow-col-md-12 { grid-column: span 12 / span 12; }
  .flow-col-md-13 { grid-column: span 13 / span 13; }
  .flow-col-md-14 { grid-column: span 14 / span 14; }
  .flow-col-md-15 { grid-column: span 15 / span 15; }
  .flow-col-md-16 { grid-column: span 16 / span 16; }
  .flow-col-md-17 { grid-column: span 17 / span 17; }
  .flow-col-md-18 { grid-column: span 18 / span 18; }
  .flow-col-md-19 { grid-column: span 19 / span 19; }
  .flow-col-md-20 { grid-column: span 20 / span 20; }
  .flow-col-md-21 { grid-column: span 21 / span 21; }
  .flow-col-md-22 { grid-column: span 22 / span 22; }
  .flow-col-md-23 { grid-column: span 23 / span 23; }
  .flow-col-md-24 { grid-column: span 24 / span 24; }

  .flow-offset-md-0 { grid-column-start: 1; }
  .flow-offset-md-1 { grid-column-start: 2; }
  .flow-offset-md-2 { grid-column-start: 3; }
  .flow-offset-md-3 { grid-column-start: 4; }
  .flow-offset-md-4 { grid-column-start: 5; }
  .flow-offset-md-5 { grid-column-start: 6; }
  .flow-offset-md-6 { grid-column-start: 7; }
  .flow-offset-md-7 { grid-column-start: 8; }
  .flow-offset-md-8 { grid-column-start: 9; }
  .flow-offset-md-9 { grid-column-start: 10; }
  .flow-offset-md-10 { grid-column-start: 11; }
  .flow-offset-md-11 { grid-column-start: 12; }
  .flow-offset-md-12 { grid-column-start: 13; }

  .flow-order-md-first { order: -1; }
  .flow-order-md-last { order: 25; }
  .flow-order-md-0 { order: 0; }
  .flow-order-md-1 { order: 1; }
  .flow-order-md-2 { order: 2; }
  .flow-order-md-3 { order: 3; }
  .flow-order-md-4 { order: 4; }
  .flow-order-md-5 { order: 5; }

  .flow-align-self-md-auto { align-self: auto; }
  .flow-align-self-md-start { align-self: start; }
  .flow-align-self-md-end { align-self: end; }
  .flow-align-self-md-center { align-self: center; }
  .flow-align-self-md-baseline { align-self: baseline; }
  .flow-align-self-md-stretch { align-self: stretch; }

  .flow-gx-md-0 { --flow-gutter-x: 0; }
  .flow-gx-md-1 { --flow-gutter-x: 0.25rem; }
  .flow-gx-md-2 { --flow-gutter-x: 0.5rem; }
  .flow-gx-md-3 { --flow-gutter-x: 1rem; }
  .flow-gx-md-4 { --flow-gutter-x: 1.5rem; }
  .flow-gx-md-5 { --flow-gutter-x: 2rem; }

  .flow-gy-md-0 { --flow-gutter-y: 0; }
  .flow-gy-md-1 { --flow-gutter-y: 0.25rem; }
  .flow-gy-md-2 { --flow-gutter-y: 0.5rem; }
  .flow-gy-md-3 { --flow-gutter-y: 1rem; }
  .flow-gy-md-4 { --flow-gutter-y: 1.5rem; }
  .flow-gy-md-5 { --flow-gutter-y: 2rem; }
}

/* Large devices (≥1280px) */
@media (min-width: 1280px) {
  .flow-grid-lg { max-width: 1280px; }
  
  .flow-col-lg { grid-column: span var(--flow-columns) / span var(--flow-columns); }
  .flow-col-lg-auto { grid-column: auto; }
  .flow-col-lg-1 { grid-column: span 1 / span 1; }
  .flow-col-lg-2 { grid-column: span 2 / span 2; }
  .flow-col-lg-3 { grid-column: span 3 / span 3; }
  .flow-col-lg-4 { grid-column: span 4 / span 4; }
  .flow-col-lg-5 { grid-column: span 5 / span 5; }
  .flow-col-lg-6 { grid-column: span 6 / span 6; }
  .flow-col-lg-7 { grid-column: span 7 / span 7; }
  .flow-col-lg-8 { grid-column: span 8 / span 8; }
  .flow-col-lg-9 { grid-column: span 9 / span 9; }
  .flow-col-lg-10 { grid-column: span 10 / span 10; }
  .flow-col-lg-11 { grid-column: span 11 / span 11; }
  .flow-col-lg-12 { grid-column: span 12 / span 12; }
  .flow-col-lg-13 { grid-column: span 13 / span 13; }
  .flow-col-lg-14 { grid-column: span 14 / span 14; }
  .flow-col-lg-15 { grid-column: span 15 / span 15; }
  .flow-col-lg-16 { grid-column: span 16 / span 16; }
  .flow-col-lg-17 { grid-column: span 17 / span 17; }
  .flow-col-lg-18 { grid-column: span 18 / span 18; }
  .flow-col-lg-19 { grid-column: span 19 / span 19; }
  .flow-col-lg-20 { grid-column: span 20 / span 20; }
  .flow-col-lg-21 { grid-column: span 21 / span 21; }
  .flow-col-lg-22 { grid-column: span 22 / span 22; }
  .flow-col-lg-23 { grid-column: span 23 / span 23; }
  .flow-col-lg-24 { grid-column: span 24 / span 24; }

  .flow-offset-lg-0 { grid-column-start: 1; }
  .flow-offset-lg-1 { grid-column-start: 2; }
  .flow-offset-lg-2 { grid-column-start: 3; }
  .flow-offset-lg-3 { grid-column-start: 4; }
  .flow-offset-lg-4 { grid-column-start: 5; }
  .flow-offset-lg-5 { grid-column-start: 6; }
  .flow-offset-lg-6 { grid-column-start: 7; }
  .flow-offset-lg-7 { grid-column-start: 8; }
  .flow-offset-lg-8 { grid-column-start: 9; }
  .flow-offset-lg-9 { grid-column-start: 10; }
  .flow-offset-lg-10 { grid-column-start: 11; }
  .flow-offset-lg-11 { grid-column-start: 12; }
  .flow-offset-lg-12 { grid-column-start: 13; }

  .flow-order-lg-first { order: -1; }
  .flow-order-lg-last { order: 25; }
  .flow-order-lg-0 { order: 0; }
  .flow-order-lg-1 { order: 1; }
  .flow-order-lg-2 { order: 2; }
  .flow-order-lg-3 { order: 3; }
  .flow-order-lg-4 { order: 4; }
  .flow-order-lg-5 { order: 5; }

  .flow-align-self-lg-auto { align-self: auto; }
  .flow-align-self-lg-start { align-self: start; }
  .flow-align-self-lg-end { align-self: end; }
  .flow-align-self-lg-center { align-self: center; }
  .flow-align-self-lg-baseline { align-self: baseline; }
  .flow-align-self-lg-stretch { align-self: stretch; }

  .flow-gx-lg-0 { --flow-gutter-x: 0; }
  .flow-gx-lg-1 { --flow-gutter-x: 0.25rem; }
  .flow-gx-lg-2 { --flow-gutter-x: 0.5rem; }
  .flow-gx-lg-3 { --flow-gutter-x: 1rem; }
  .flow-gx-lg-4 { --flow-gutter-x: 1.5rem; }
  .flow-gx-lg-5 { --flow-gutter-x: 2rem; }

  .flow-gy-lg-0 { --flow-gutter-y: 0; }
  .flow-gy-lg-1 { --flow-gutter-y: 0.25rem; }
  .flow-gy-lg-2 { --flow-gutter-y: 0.5rem; }
  .flow-gy-lg-3 { --flow-gutter-y: 1rem; }
  .flow-gy-lg-4 { --flow-gutter-y: 1.5rem; }
  .flow-gy-lg-5 { --flow-gutter-y: 2rem; }
}

/* Extra large devices (≥1920px) */
@media (min-width: 1920px) {
  .flow-grid-xl { max-width: 1920px; }
  
  .flow-col-xl { grid-column: span var(--flow-columns) / span var(--flow-columns); }
  .flow-col-xl-auto { grid-column: auto; }
  .flow-col-xl-1 { grid-column: span 1 / span 1; }
  .flow-col-xl-2 { grid-column: span 2 / span 2; }
  .flow-col-xl-3 { grid-column: span 3 / span 3; }
  .flow-col-xl-4 { grid-column: span 4 / span 4; }
  .flow-col-xl-5 { grid-column: span 5 / span 5; }
  .flow-col-xl-6 { grid-column: span 6 / span 6; }
  .flow-col-xl-7 { grid-column: span 7 / span 7; }
  .flow-col-xl-8 { grid-column: span 8 / span 8; }
  .flow-col-xl-9 { grid-column: span 9 / span 9; }
  .flow-col-xl-10 { grid-column: span 10 / span 10; }
  .flow-col-xl-11 { grid-column: span 11 / span 11; }
  .flow-col-xl-12 { grid-column: span 12 / span 12; }
  .flow-col-xl-13 { grid-column: span 13 / span 13; }
  .flow-col-xl-14 { grid-column: span 14 / span 14; }
  .flow-col-xl-15 { grid-column: span 15 / span 15; }
  .flow-col-xl-16 { grid-column: span 16 / span 16; }
  .flow-col-xl-17 { grid-column: span 17 / span 17; }
  .flow-col-xl-18 { grid-column: span 18 / span 18; }
  .flow-col-xl-19 { grid-column: span 19 / span 19; }
  .flow-col-xl-20 { grid-column: span 20 / span 20; }
  .flow-col-xl-21 { grid-column: span 21 / span 21; }
  .flow-col-xl-22 { grid-column: span 22 / span 22; }
  .flow-col-xl-23 { grid-column: span 23 / span 23; }
  .flow-col-xl-24 { grid-column: span 24 / span 24; }

  .flow-offset-xl-0 { grid-column-start: 1; }
  .flow-offset-xl-1 { grid-column-start: 2; }
  .flow-offset-xl-2 { grid-column-start: 3; }
  .flow-offset-xl-3 { grid-column-start: 4; }
  .flow-offset-xl-4 { grid-column-start: 5; }
  .flow-offset-xl-5 { grid-column-start: 6; }
  .flow-offset-xl-6 { grid-column-start: 7; }
  .flow-offset-xl-7 { grid-column-start: 8; }
  .flow-offset-xl-8 { grid-column-start: 9; }
  .flow-offset-xl-9 { grid-column-start: 10; }
  .flow-offset-xl-10 { grid-column-start: 11; }
  .flow-offset-xl-11 { grid-column-start: 12; }
  .flow-offset-xl-12 { grid-column-start: 13; }

  .flow-order-xl-first { order: -1; }
  .flow-order-xl-last { order: 25; }
  .flow-order-xl-0 { order: 0; }
  .flow-order-xl-1 { order: 1; }
  .flow-order-xl-2 { order: 2; }
  .flow-order-xl-3 { order: 3; }
  .flow-order-xl-4 { order: 4; }
  .flow-order-xl-5 { order: 5; }

  .flow-align-self-xl-auto { align-self: auto; }
  .flow-align-self-xl-start { align-self: start; }
  .flow-align-self-xl-end { align-self: end; }
  .flow-align-self-xl-center { align-self: center; }
  .flow-align-self-xl-baseline { align-self: baseline; }
  .flow-align-self-xl-stretch { align-self: stretch; }

  .flow-gx-xl-0 { --flow-gutter-x: 0; }
  .flow-gx-xl-1 { --flow-gutter-x: 0.25rem; }
  .flow-gx-xl-2 { --flow-gutter-x: 0.5rem; }
  .flow-gx-xl-3 { --flow-gutter-x: 1rem; }
  .flow-gx-xl-4 { --flow-gutter-x: 1.5rem; }
  .flow-gx-xl-5 { --flow-gutter-x: 2rem; }

  .flow-gy-xl-0 { --flow-gutter-y: 0; }
  .flow-gy-xl-1 { --flow-gutter-y: 0.25rem; }
  .flow-gy-xl-2 { --flow-gutter-y: 0.5rem; }
  .flow-gy-xl-3 { --flow-gutter-y: 1rem; }
  .flow-gy-xl-4 { --flow-gutter-y: 1.5rem; }
  .flow-gy-xl-5 { --flow-gutter-y: 2rem; }
}

/* Extra extra large devices (≥2560px) */
@media (min-width: 2560px) {
  .flow-grid-xxl { max-width: 2560px; }
  
  .flow-col-xxl { grid-column: span var(--flow-columns) / span var(--flow-columns); }
  .flow-col-xxl-auto { grid-column: auto; }
  .flow-col-xxl-1 { grid-column: span 1 / span 1; }
  .flow-col-xxl-2 { grid-column: span 2 / span 2; }
  .flow-col-xxl-3 { grid-column: span 3 / span 3; }
  .flow-col-xxl-4 { grid-column: span 4 / span 4; }
  .flow-col-xxl-5 { grid-column: span 5 / span 5; }
  .flow-col-xxl-6 { grid-column: span 6 / span 6; }
  .flow-col-xxl-7 { grid-column: span 7 / span 7; }
  .flow-col-xxl-8 { grid-column: span 8 / span 8; }
  .flow-col-xxl-9 { grid-column: span 9 / span 9; }
  .flow-col-xxl-10 { grid-column: span 10 / span 10; }
  .flow-col-xxl-11 { grid-column: span 11 / span 11; }
  .flow-col-xxl-12 { grid-column: span 12 / span 12; }
  .flow-col-xxl-13 { grid-column: span 13 / span 13; }
  .flow-col-xxl-14 { grid-column: span 14 / span 14; }
  .flow-col-xxl-15 { grid-column: span 15 / span 15; }
  .flow-col-xxl-16 { grid-column: span 16 / span 16; }
  .flow-col-xxl-17 { grid-column: span 17 / span 17; }
  .flow-col-xxl-18 { grid-column: span 18 / span 18; }
  .flow-col-xxl-19 { grid-column: span 19 / span 19; }
  .flow-col-xxl-20 { grid-column: span 20 / span 20; }
  .flow-col-xxl-21 { grid-column: span 21 / span 21; }
  .flow-col-xxl-22 { grid-column: span 22 / span 22; }
  .flow-col-xxl-23 { grid-column: span 23 / span 23; }
  .flow-col-xxl-24 { grid-column: span 24 / span 24; }

  .flow-offset-xxl-0 { grid-column-start: 1; }
  .flow-offset-xxl-1 { grid-column-start: 2; }
  .flow-offset-xxl-2 { grid-column-start: 3; }
  .flow-offset-xxl-3 { grid-column-start: 4; }
  .flow-offset-xxl-4 { grid-column-start: 5; }
  .flow-offset-xxl-5 { grid-column-start: 6; }
  .flow-offset-xxl-6 { grid-column-start: 7; }
  .flow-offset-xxl-7 { grid-column-start: 8; }
  .flow-offset-xxl-8 { grid-column-start: 9; }
  .flow-offset-xxl-9 { grid-column-start: 10; }
  .flow-offset-xxl-10 { grid-column-start: 11; }
  .flow-offset-xxl-11 { grid-column-start: 12; }
  .flow-offset-xxl-12 { grid-column-start: 13; }

  .flow-order-xxl-first { order: -1; }
  .flow-order-xxl-last { order: 25; }
  .flow-order-xxl-0 { order: 0; }
  .flow-order-xxl-1 { order: 1; }
  .flow-order-xxl-2 { order: 2; }
  .flow-order-xxl-3 { order: 3; }
  .flow-order-xxl-4 { order: 4; }
  .flow-order-xxl-5 { order: 5; }

  .flow-align-self-xxl-auto { align-self: auto; }
  .flow-align-self-xxl-start { align-self: start; }
  .flow-align-self-xxl-end { align-self: end; }
  .flow-align-self-xxl-center { align-self: center; }
  .flow-align-self-xxl-baseline { align-self: baseline; }
  .flow-align-self-xxl-stretch { align-self: stretch; }

  .flow-gx-xxl-0 { --flow-gutter-x: 0; }
  .flow-gx-xxl-1 { --flow-gutter-x: 0.25rem; }
  .flow-gx-xxl-2 { --flow-gutter-x: 0.5rem; }
  .flow-gx-xxl-3 { --flow-gutter-x: 1rem; }
  .flow-gx-xxl-4 { --flow-gutter-x: 1.5rem; }
  .flow-gx-xxl-5 { --flow-gutter-x: 2rem; }

  .flow-gy-xxl-0 { --flow-gutter-y: 0; }
  .flow-gy-xxl-1 { --flow-gutter-y: 0.25rem; }
  .flow-gy-xxl-2 { --flow-gutter-y: 0.5rem; }
  .flow-gy-xxl-3 { --flow-gutter-y: 1rem; }
  .flow-gy-xxl-4 { --flow-gutter-y: 1.5rem; }
  .flow-gy-xxl-5 { --flow-gutter-y: 2rem; }
}

/* ==========================================================================
   Display утилиты для скрытия колонок
   ========================================================================== */

.flow-d-none { display: none !important; }
.flow-d-block { display: block !important; }
.flow-d-grid { display: grid !important; }

@media (min-width: 600px) {
  .flow-d-sm-none { display: none !important; }
  .flow-d-sm-block { display: block !important; }
  .flow-d-sm-grid { display: grid !important; }
}

@media (min-width: 960px) {
  .flow-d-md-none { display: none !important; }
  .flow-d-md-block { display: block !important; }
  .flow-d-md-grid { display: grid !important; }
}

@media (min-width: 1280px) {
  .flow-d-lg-none { display: none !important; }
  .flow-d-lg-block { display: block !important; }
  .flow-d-lg-grid { display: grid !important; }
}

@media (min-width: 1920px) {
  .flow-d-xl-none { display: none !important; }
  .flow-d-xl-block { display: block !important; }
  .flow-d-xl-grid { display: grid !important; }
}

@media (min-width: 2560px) {
  .flow-d-xxl-none { display: none !important; }
  .flow-d-xxl-block { display: block !important; }
  .flow-d-xxl-grid { display: grid !important; }
}
/* ==========================================================================
   FlowIcon - Компонент иконки
   ========================================================================== */

.flow-icon {
  --flow-icon-size: 20px;
  --flow-icon-color: var(--flow-action-default, rgba(0, 0, 0, 0.54));
  
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--flow-icon-size);
  height: var(--flow-icon-size);
  font-size: var(--flow-icon-size);
  line-height: 1;
  flex-shrink: 0;
  vertical-align: middle;
  color: var(--flow-icon-color);
}

.flow-icon-svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.flow-icon i {
  font-size: inherit;
  line-height: inherit;
}

/* Размеры иконок */
.flow-icon-xs { --flow-icon-size: 16px; }
.flow-icon-sm { --flow-icon-size: 20px; }
.flow-icon-md { --flow-icon-size: 24px; }
.flow-icon-lg { --flow-icon-size: 36px; }
.flow-icon-xl { --flow-icon-size: 48px; }

/* Цвета иконок (MudBlazor palette) */
.flow-icon-color-default { color: var(--flow-action-default); }
.flow-icon-color-inherit { color: inherit; }
.flow-icon-color-primary { color: var(--flow-primary); }
.flow-icon-color-secondary { color: var(--flow-secondary); }
.flow-icon-color-tertiary { color: var(--flow-tertiary); }
.flow-icon-color-info { color: var(--flow-info); }
.flow-icon-color-success { color: var(--flow-success); }
.flow-icon-color-warning { color: var(--flow-warning); }
.flow-icon-color-error { color: var(--flow-error); }
.flow-icon-color-dark { color: var(--flow-dark); }
.flow-icon-color-transparent { color: transparent; }
.flow-icon-color-surface { color: var(--flow-surface); }

/* ==========================================================================
   FlowIconButton - Кнопка с иконкой (MD3 Expressive)
   ========================================================================== */

.flow-icon-button {
  /* CSS переменные для размеров */
  --flow-icon-button-size: 40px;
  --flow-icon-button-radius: 50%;
  --flow-icon-button-radius-pressed: 8px;
  
  /* Цвета по умолчанию (Standard) */
  --flow-icon-button-bg: transparent;
  --flow-icon-button-color: var(--flow-action-default);
  --flow-icon-button-border: transparent;
  --flow-icon-button-hover-bg: var(--flow-action-default);
  --flow-icon-button-focus-bg: var(--flow-action-default);
  --flow-icon-button-pressed-bg: var(--flow-action-default);
  
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--flow-icon-button-size);
  height: var(--flow-icon-button-size);
  min-width: var(--flow-icon-button-size);
  min-height: var(--flow-icon-button-size);
  padding: 0;
  margin: 0;
  border: 1px solid var(--flow-icon-button-border);
  border-radius: var(--flow-icon-button-radius);
  background-color: var(--flow-icon-button-bg);
  color: var(--flow-icon-button-color);
  cursor: pointer;
  outline: none;
  overflow: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: 
    background-color 200ms cubic-bezier(0.2, 0, 0, 1),
    border-radius 200ms cubic-bezier(0.2, 0, 0, 1),
    transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* State layer для hover/focus/pressed эффектов */
.flow-icon-button-state-layer {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--flow-icon-button-state-color, currentColor);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1);
}

.flow-icon-button-icon {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   Размеры кнопок (MD3 Expressive)
   ========================================================================== */

.flow-icon-button-xs {
  --flow-icon-button-size: 32px;
  --flow-icon-button-radius-pressed: 8px;
}

.flow-icon-button-sm {
  --flow-icon-button-size: 40px;
  --flow-icon-button-radius-pressed: 8px;
}

.flow-icon-button-md {
  --flow-icon-button-size: 48px;
  --flow-icon-button-radius-pressed: 12px;
}

.flow-icon-button-lg {
  --flow-icon-button-size: 56px;
  --flow-icon-button-radius-pressed: 16px;
}

.flow-icon-button-xl {
  --flow-icon-button-size: 96px;
  --flow-icon-button-radius-pressed: 16px;
}

/* ==========================================================================
   Формы кнопок (MD3 Expressive)
   ========================================================================== */

.flow-icon-button-round {
  --flow-icon-button-radius: 50%;
}

.flow-icon-button-square {
  --flow-icon-button-radius: 10px !important;
}

.flow-icon-button-square.flow-icon-button-xs,
.flow-icon-button-square.flow-icon-button-sm {
  --flow-icon-button-radius: 12px;
}

.flow-icon-button-square.flow-icon-button-md {
  --flow-icon-button-radius: 16px;
}

.flow-icon-button-square.flow-icon-button-lg,
.flow-icon-button-square.flow-icon-button-xl {
  --flow-icon-button-radius: 28px;
}

/* Rectangle форма */
.flow-icon-button-rectangle {
  --flow-icon-button-radius: 8px !important;
}

.flow-icon-button-rectangle.flow-icon-button-xs,
.flow-icon-button-rectangle.flow-icon-button-sm {
  --flow-icon-button-radius: 6px !important;
}

.flow-icon-button-rectangle.flow-icon-button-md {
  --flow-icon-button-radius: 8px !important;
}

.flow-icon-button-rectangle.flow-icon-button-lg,
.flow-icon-button-rectangle.flow-icon-button-xl {
  --flow-icon-button-radius: 12px !important;
}

/* ==========================================================================
   Варианты кнопок - Standard
   ========================================================================== */

.flow-icon-button-standard {
  --flow-icon-button-bg: transparent;
  --flow-icon-button-color: var(--flow-action-default);
  --flow-icon-button-border: transparent;
  --flow-icon-button-state-color: var(--flow-action-default);
}

.flow-icon-button-standard:hover:not(.flow-icon-button-disabled) {
  --flow-icon-button-color: var(--flow-text-primary);
}

.flow-icon-button-standard.flow-icon-button-selected {
  --flow-icon-button-color: var(--flow-primary);
  --flow-icon-button-state-color: var(--flow-primary);
}

.flow-icon-button-standard.flow-icon-button-selected:hover:not(.flow-icon-button-disabled) {
  --flow-icon-button-color: var(--flow-primary);
}

/* ==========================================================================
   Варианты кнопок - Filled
   ========================================================================== */

.flow-icon-button-filled {
  --flow-icon-button-bg: var(--flow-primary);
  --flow-icon-button-color: var(--flow-primary-text);
  --flow-icon-button-border: transparent;
  --flow-icon-button-state-color: var(--flow-primary-text);
}

.flow-icon-button-filled:hover:not(.flow-icon-button-disabled) {
  --flow-icon-button-bg: var(--flow-primary-darken);
}

.flow-icon-button-filled.flow-icon-button-toggle:not(.flow-icon-button-selected) {
  --flow-icon-button-bg: var(--flow-background-gray);
  --flow-icon-button-color: var(--flow-primary);
  --flow-icon-button-state-color: var(--flow-primary);
}

.flow-icon-button-filled.flow-icon-button-toggle:not(.flow-icon-button-selected):hover:not(.flow-icon-button-disabled) {
  --flow-icon-button-bg: var(--flow-lines-default);
}

.flow-icon-button-filled.flow-icon-button-selected {
  --flow-icon-button-bg: var(--flow-primary);
  --flow-icon-button-color: var(--flow-primary-text);
  --flow-icon-button-state-color: var(--flow-primary-text);
}

.flow-icon-button-filled.flow-icon-button-selected:hover:not(.flow-icon-button-disabled) {
  --flow-icon-button-bg: var(--flow-primary-darken);
}

/* ==========================================================================
   Варианты кнопок - Tonal
   ========================================================================== */

.flow-icon-button-tonal {
  --flow-icon-button-bg: var(--flow-primary-lighten);
  --flow-icon-button-color: var(--flow-primary-text);
  --flow-icon-button-border: transparent;
  --flow-icon-button-state-color: var(--flow-primary-text);
}

.flow-icon-button-tonal:hover:not(.flow-icon-button-disabled) {
  --flow-icon-button-bg: var(--flow-primary);
}

.flow-icon-button-tonal.flow-icon-button-toggle:not(.flow-icon-button-selected) {
  --flow-icon-button-bg: var(--flow-background-gray);
  --flow-icon-button-color: var(--flow-action-default);
  --flow-icon-button-state-color: var(--flow-action-default);
}

.flow-icon-button-tonal.flow-icon-button-toggle:not(.flow-icon-button-selected):hover:not(.flow-icon-button-disabled) {
  --flow-icon-button-bg: var(--flow-lines-default);
}

.flow-icon-button-tonal.flow-icon-button-selected {
  --flow-icon-button-bg: var(--flow-primary-lighten);
  --flow-icon-button-color: var(--flow-primary-text);
  --flow-icon-button-state-color: var(--flow-primary-text);
}

.flow-icon-button-tonal.flow-icon-button-selected:hover:not(.flow-icon-button-disabled) {
  --flow-icon-button-bg: var(--flow-primary);
}

/* ==========================================================================
   Варианты кнопок - Outlined
   ========================================================================== */

.flow-icon-button-outlined {
  --flow-icon-button-bg: transparent;
  --flow-icon-button-color: var(--flow-action-default);
  --flow-icon-button-border: var(--flow-lines-default);
  --flow-icon-button-state-color: var(--flow-action-default);
}

.flow-icon-button-outlined:hover:not(.flow-icon-button-disabled) {
  --flow-icon-button-bg: var(--flow-background-gray);
  --flow-icon-button-color: var(--flow-text-primary);
}

.flow-icon-button-outlined.flow-icon-button-selected {
  --flow-icon-button-bg: var(--flow-dark);
  --flow-icon-button-color: var(--flow-dark-text);
  --flow-icon-button-border: transparent;
  --flow-icon-button-state-color: var(--flow-dark-text);
}

.flow-icon-button-outlined.flow-icon-button-selected:hover:not(.flow-icon-button-disabled) {
  --flow-icon-button-bg: var(--flow-dark-darken);
}

/* ==========================================================================
   Варианты кнопок - Text
   ========================================================================== */

.flow-icon-button-text {
  --flow-icon-button-bg: transparent;
  --flow-icon-button-color: var(--flow-action-default);
  --flow-icon-button-border: transparent;
  --flow-icon-button-state-color: var(--flow-action-default);
}

.flow-icon-button-text:hover:not(.flow-icon-button-disabled) {
  --flow-icon-button-color: var(--flow-text-primary);
}

.flow-icon-button-text.flow-icon-button-selected {
  --flow-icon-button-color: var(--flow-primary);
  --flow-icon-button-state-color: var(--flow-primary);
}

/* ==========================================================================
   Состояния кнопок
   ========================================================================== */

/* Hover state */
.flow-icon-button:hover:not(.flow-icon-button-disabled) .flow-icon-button-state-layer {
  opacity: var(--flow-state-hover, 0.08);
}

/* Focus state */
.flow-icon-button:focus-visible:not(.flow-icon-button-disabled) .flow-icon-button-state-layer {
  opacity: var(--flow-state-focus, 0.10);
}

/* Pressed state - Scale bounce эффект */
.flow-icon-button:active:not(.flow-icon-button-disabled) {
  transform: scale(0.85);
  transition: transform 100ms cubic-bezier(0.4, 0, 0.2, 1);
}

.flow-icon-button:active:not(.flow-icon-button-disabled) .flow-icon-button-state-layer {
  opacity: var(--flow-state-pressed, 0.12);
}

/* Disabled state */
.flow-icon-button-disabled {
  cursor: not-allowed;
  opacity: var(--flow-state-disabled-content, 0.38);
}

.flow-icon-button-disabled .flow-icon-button-state-layer {
  display: none;
}

.flow-icon-button-filled.flow-icon-button-disabled,
.flow-icon-button-tonal.flow-icon-button-disabled {
  opacity: 1;
  background-color: var(--flow-action-disabled-background);
  color: var(--flow-action-disabled);
}

.flow-icon-button-outlined.flow-icon-button-disabled {
  border-color: var(--flow-action-disabled-background);
  color: var(--flow-action-disabled);
}

.flow-icon-button-standard.flow-icon-button-disabled {
  color: var(--flow-action-disabled);
}

/* ==========================================================================
   Цвета кнопок (Standard вариант)
   ========================================================================== */

/* Primary */
.flow-icon-button-standard.flow-icon-button-color-primary {
  --flow-icon-button-color: var(--flow-primary);
  --flow-icon-button-state-color: var(--flow-primary);
}

.flow-icon-button-standard.flow-icon-button-color-primary:hover:not(.flow-icon-button-disabled) {
  --flow-icon-button-color: var(--flow-primary);
}

/* Secondary */
.flow-icon-button-standard.flow-icon-button-color-secondary {
  --flow-icon-button-color: var(--flow-secondary);
  --flow-icon-button-state-color: var(--flow-secondary);
}

.flow-icon-button-standard.flow-icon-button-color-secondary:hover:not(.flow-icon-button-disabled) {
  --flow-icon-button-color: var(--flow-secondary);
}

/* Tertiary */
.flow-icon-button-standard.flow-icon-button-color-tertiary {
  --flow-icon-button-color: var(--flow-tertiary);
  --flow-icon-button-state-color: var(--flow-tertiary);
}

.flow-icon-button-standard.flow-icon-button-color-tertiary:hover:not(.flow-icon-button-disabled) {
  --flow-icon-button-color: var(--flow-tertiary);
}

/* Info */
.flow-icon-button-standard.flow-icon-button-color-info {
  --flow-icon-button-color: var(--flow-info);
  --flow-icon-button-state-color: var(--flow-info);
}

.flow-icon-button-standard.flow-icon-button-color-info:hover:not(.flow-icon-button-disabled) {
  --flow-icon-button-color: var(--flow-info);
}

/* Success */
.flow-icon-button-standard.flow-icon-button-color-success {
  --flow-icon-button-color: var(--flow-success);
  --flow-icon-button-state-color: var(--flow-success);
}

.flow-icon-button-standard.flow-icon-button-color-success:hover:not(.flow-icon-button-disabled) {
  --flow-icon-button-color: var(--flow-success);
}

/* Warning */
.flow-icon-button-standard.flow-icon-button-color-warning {
  --flow-icon-button-color: var(--flow-warning);
  --flow-icon-button-state-color: var(--flow-warning);
}

.flow-icon-button-standard.flow-icon-button-color-warning:hover:not(.flow-icon-button-disabled) {
  --flow-icon-button-color: var(--flow-warning);
}

/* Error */
.flow-icon-button-standard.flow-icon-button-color-error {
  --flow-icon-button-color: var(--flow-error);
  --flow-icon-button-state-color: var(--flow-error);
}

.flow-icon-button-standard.flow-icon-button-color-error:hover:not(.flow-icon-button-disabled) {
  --flow-icon-button-color: var(--flow-error);
}

/* Dark */
.flow-icon-button-standard.flow-icon-button-color-dark {
  --flow-icon-button-color: var(--flow-dark);
  --flow-icon-button-state-color: var(--flow-dark);
}

.flow-icon-button-standard.flow-icon-button-color-dark:hover:not(.flow-icon-button-disabled) {
  --flow-icon-button-color: var(--flow-dark);
}

/* ==========================================================================
   Цвета кнопок (Filled вариант)
   ========================================================================== */

/* Primary - по умолчанию для Filled */

/* Secondary */
.flow-icon-button-filled.flow-icon-button-color-secondary {
  --flow-icon-button-bg: var(--flow-secondary);
  --flow-icon-button-color: var(--flow-secondary-text);
  --flow-icon-button-state-color: var(--flow-secondary-text);
}

.flow-icon-button-filled.flow-icon-button-color-secondary:hover:not(.flow-icon-button-disabled) {
  --flow-icon-button-bg: var(--flow-secondary-darken);
}

/* Tertiary */
.flow-icon-button-filled.flow-icon-button-color-tertiary {
  --flow-icon-button-bg: var(--flow-tertiary);
  --flow-icon-button-color: var(--flow-tertiary-text);
  --flow-icon-button-state-color: var(--flow-tertiary-text);
}

.flow-icon-button-filled.flow-icon-button-color-tertiary:hover:not(.flow-icon-button-disabled) {
  --flow-icon-button-bg: var(--flow-tertiary-darken);
}

/* Info */
.flow-icon-button-filled.flow-icon-button-color-info {
  --flow-icon-button-bg: var(--flow-info);
  --flow-icon-button-color: var(--flow-info-text);
  --flow-icon-button-state-color: var(--flow-info-text);
}

.flow-icon-button-filled.flow-icon-button-color-info:hover:not(.flow-icon-button-disabled) {
  --flow-icon-button-bg: var(--flow-info-darken);
}

/* Success */
.flow-icon-button-filled.flow-icon-button-color-success {
  --flow-icon-button-bg: var(--flow-success);
  --flow-icon-button-color: var(--flow-success-text);
  --flow-icon-button-state-color: var(--flow-success-text);
}

.flow-icon-button-filled.flow-icon-button-color-success:hover:not(.flow-icon-button-disabled) {
  --flow-icon-button-bg: var(--flow-success-darken);
}

/* Warning */
.flow-icon-button-filled.flow-icon-button-color-warning {
  --flow-icon-button-bg: var(--flow-warning);
  --flow-icon-button-color: var(--flow-warning-text);
  --flow-icon-button-state-color: var(--flow-warning-text);
}

.flow-icon-button-filled.flow-icon-button-color-warning:hover:not(.flow-icon-button-disabled) {
  --flow-icon-button-bg: var(--flow-warning-darken);
}

/* Error */
.flow-icon-button-filled.flow-icon-button-color-error {
  --flow-icon-button-bg: var(--flow-error);
  --flow-icon-button-color: var(--flow-error-text);
  --flow-icon-button-state-color: var(--flow-error-text);
}

.flow-icon-button-filled.flow-icon-button-color-error:hover:not(.flow-icon-button-disabled) {
  --flow-icon-button-bg: var(--flow-error-darken);
}

/* Dark */
.flow-icon-button-filled.flow-icon-button-color-dark {
  --flow-icon-button-bg: var(--flow-dark);
  --flow-icon-button-color: var(--flow-dark-text);
  --flow-icon-button-state-color: var(--flow-dark-text);
}

.flow-icon-button-filled.flow-icon-button-color-dark:hover:not(.flow-icon-button-disabled) {
  --flow-icon-button-bg: var(--flow-dark-darken);
}

/* ==========================================================================
   Цвета кнопок (Tonal вариант)
   ========================================================================== */

/* Primary */
.flow-icon-button-tonal.flow-icon-button-color-primary {
  --flow-icon-button-bg: var(--flow-primary-lighten);
  --flow-icon-button-color: var(--flow-primary-text);
  --flow-icon-button-state-color: var(--flow-primary-text);
}

.flow-icon-button-tonal.flow-icon-button-color-primary:hover:not(.flow-icon-button-disabled) {
  --flow-icon-button-bg: var(--flow-primary);
}

/* Tertiary */
.flow-icon-button-tonal.flow-icon-button-color-tertiary {
  --flow-icon-button-bg: var(--flow-tertiary-lighten);
  --flow-icon-button-color: var(--flow-tertiary-text);
  --flow-icon-button-state-color: var(--flow-tertiary-text);
}

.flow-icon-button-tonal.flow-icon-button-color-tertiary:hover:not(.flow-icon-button-disabled) {
  --flow-icon-button-bg: var(--flow-tertiary);
}

/* Info */
.flow-icon-button-tonal.flow-icon-button-color-info {
  --flow-icon-button-bg: var(--flow-info-lighten);
  --flow-icon-button-color: var(--flow-info-text);
  --flow-icon-button-state-color: var(--flow-info-text);
}

.flow-icon-button-tonal.flow-icon-button-color-info:hover:not(.flow-icon-button-disabled) {
  --flow-icon-button-bg: var(--flow-info);
}

/* Success */
.flow-icon-button-tonal.flow-icon-button-color-success {
  --flow-icon-button-bg: var(--flow-success-lighten);
  --flow-icon-button-color: var(--flow-success-text);
  --flow-icon-button-state-color: var(--flow-success-text);
}

.flow-icon-button-tonal.flow-icon-button-color-success:hover:not(.flow-icon-button-disabled) {
  --flow-icon-button-bg: var(--flow-success);
}

/* Warning */
.flow-icon-button-tonal.flow-icon-button-color-warning {
  --flow-icon-button-bg: var(--flow-warning-lighten);
  --flow-icon-button-color: var(--flow-warning-text);
  --flow-icon-button-state-color: var(--flow-warning-text);
}

.flow-icon-button-tonal.flow-icon-button-color-warning:hover:not(.flow-icon-button-disabled) {
  --flow-icon-button-bg: var(--flow-warning);
}

/* Error */
.flow-icon-button-tonal.flow-icon-button-color-error {
  --flow-icon-button-bg: var(--flow-error-lighten);
  --flow-icon-button-color: var(--flow-error-text);
  --flow-icon-button-state-color: var(--flow-error-text);
}

.flow-icon-button-tonal.flow-icon-button-color-error:hover:not(.flow-icon-button-disabled) {
  --flow-icon-button-bg: var(--flow-error);
}

/* ==========================================================================
   Цвета кнопок (Outlined вариант)
   ========================================================================== */

/* Primary */
.flow-icon-button-outlined.flow-icon-button-color-primary {
  --flow-icon-button-color: var(--flow-primary);
  --flow-icon-button-border: var(--flow-primary);
  --flow-icon-button-state-color: var(--flow-primary);
}

/* Secondary */
.flow-icon-button-outlined.flow-icon-button-color-secondary {
  --flow-icon-button-color: var(--flow-secondary);
  --flow-icon-button-border: var(--flow-secondary);
  --flow-icon-button-state-color: var(--flow-secondary);
}

/* Tertiary */
.flow-icon-button-outlined.flow-icon-button-color-tertiary {
  --flow-icon-button-color: var(--flow-tertiary);
  --flow-icon-button-border: var(--flow-tertiary);
  --flow-icon-button-state-color: var(--flow-tertiary);
}

/* Info */
.flow-icon-button-outlined.flow-icon-button-color-info {
  --flow-icon-button-color: var(--flow-info);
  --flow-icon-button-border: var(--flow-info);
  --flow-icon-button-state-color: var(--flow-info);
}

/* Success */
.flow-icon-button-outlined.flow-icon-button-color-success {
  --flow-icon-button-color: var(--flow-success);
  --flow-icon-button-border: var(--flow-success);
  --flow-icon-button-state-color: var(--flow-success);
}

/* Warning */
.flow-icon-button-outlined.flow-icon-button-color-warning {
  --flow-icon-button-color: var(--flow-warning);
  --flow-icon-button-border: var(--flow-warning);
  --flow-icon-button-state-color: var(--flow-warning);
}

/* Error */
.flow-icon-button-outlined.flow-icon-button-color-error {
  --flow-icon-button-color: var(--flow-error);
  --flow-icon-button-border: var(--flow-error);
  --flow-icon-button-state-color: var(--flow-error);
}

/* Dark */
.flow-icon-button-outlined.flow-icon-button-color-dark {
  --flow-icon-button-color: var(--flow-dark);
  --flow-icon-button-border: var(--flow-dark);
  --flow-icon-button-state-color: var(--flow-dark);
}

/* ==========================================================================
   Toggle кнопки - смена формы при selected (MD3 Expressive)
   ========================================================================== */

.flow-icon-button-toggle.flow-icon-button-round.flow-icon-button-selected {
  --flow-icon-button-radius: var(--flow-icon-button-radius-pressed);
}

.flow-icon-button-toggle.flow-icon-button-square.flow-icon-button-selected {
  --flow-icon-button-radius: 50%;
}

/* ==========================================================================
   Ripple эффект (опционально)
   ========================================================================== */

.flow-icon-button::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle, currentColor 10%, transparent 10%);
  transform: scale(10);
  opacity: 0;
  transition: transform 0.5s, opacity 0.3s;
  pointer-events: none;
}

.flow-icon-button:active::after {
  transform: scale(0);
  opacity: 0.1;
  transition: 0s;
}

/* ==========================================================================
   Target size для доступности (MD3 требование)
   ========================================================================== */

.flow-icon-button-xs::before,
.flow-icon-button-sm::before {
  content: '';
  position: absolute;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
}
/* ==========================================================================
   FlowTooltip - Компонент тултипа
   ========================================================================== */

.flow-tooltip-container {
  position: relative;
  display: inline-flex;
}

.flow-tooltip-trigger {
  display: inline-flex;
}

/* ==========================================================================
   Тултип
   ========================================================================== */

.flow-tooltip {
  --flow-tooltip-bg: var(--flow-dark, #424242);
  --flow-tooltip-color: var(--flow-dark-text, #FFFFFF);
  --flow-tooltip-padding-x: 12px;
  --flow-tooltip-padding-y: 6px;
  --flow-tooltip-radius: 4px;
  --flow-tooltip-font-size: 0.75rem;
  --flow-tooltip-line-height: 1.4;
  --flow-tooltip-max-width: 300px;
  --flow-tooltip-offset: 4px;
  --flow-tooltip-arrow-size: 6px;
  --flow-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

  position: absolute;
  z-index: 1500;
  display: flex;
  align-items: center;
  padding: var(--flow-tooltip-padding-y) var(--flow-tooltip-padding-x);
  max-width: var(--flow-tooltip-max-width);
  background-color: var(--flow-tooltip-bg);
  color: var(--flow-tooltip-color);
  font-size: var(--flow-tooltip-font-size);
  line-height: var(--flow-tooltip-line-height);
  border-radius: var(--flow-tooltip-radius);
  box-shadow: var(--flow-tooltip-shadow);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}

.flow-tooltip-content {
  display: block;
}

/* Перенос слов (опционально) */
.flow-tooltip-wrap {
  white-space: normal;
  word-wrap: break-word;
}

/* ==========================================================================
   Позиции тултипа
   ========================================================================== */

/* Top */
.flow-tooltip-top,
.flow-tooltip-center {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: var(--flow-tooltip-offset);
  transform-origin: center bottom;
  animation: flow-tooltip-fade-in-top 150ms ease-out forwards;
}

.flow-tooltip-top.flow-tooltip-with-arrow,
.flow-tooltip-center.flow-tooltip-with-arrow {
  margin-bottom: calc(var(--flow-tooltip-offset) + var(--flow-tooltip-arrow-size));
}

/* Bottom */
.flow-tooltip-bottom {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: var(--flow-tooltip-offset);
  transform-origin: center top;
  animation: flow-tooltip-fade-in-bottom 150ms ease-out forwards;
}

.flow-tooltip-bottom.flow-tooltip-with-arrow {
  margin-top: calc(var(--flow-tooltip-offset) + var(--flow-tooltip-arrow-size));
}

/* Left */
.flow-tooltip-left {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: var(--flow-tooltip-offset);
  transform-origin: right center;
  animation: flow-tooltip-fade-in-left 150ms ease-out forwards;
}

.flow-tooltip-left.flow-tooltip-with-arrow {
  margin-right: calc(var(--flow-tooltip-offset) + var(--flow-tooltip-arrow-size));
}

/* Right */
.flow-tooltip-right {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: var(--flow-tooltip-offset);
  transform-origin: left center;
  animation: flow-tooltip-fade-in-right 150ms ease-out forwards;
}

.flow-tooltip-right.flow-tooltip-with-arrow {
  margin-left: calc(var(--flow-tooltip-offset) + var(--flow-tooltip-arrow-size));
}

/* ==========================================================================
   Стрелочка
   ========================================================================== */

.flow-tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border: var(--flow-tooltip-arrow-size) solid transparent;
}

/* Arrow для Top */
/* Arrow для Top и Center */
.flow-tooltip-top .flow-tooltip-arrow,
.flow-tooltip-center .flow-tooltip-arrow {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-top-color: var(--flow-tooltip-bg);
  border-bottom: none;
}

/* Arrow для Bottom */
.flow-tooltip-bottom .flow-tooltip-arrow {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: var(--flow-tooltip-bg);
  border-top: none;
}

/* Arrow для Left */
.flow-tooltip-left .flow-tooltip-arrow {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-left-color: var(--flow-tooltip-bg);
  border-right: none;
}

/* Arrow для Right */
.flow-tooltip-right .flow-tooltip-arrow {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-right-color: var(--flow-tooltip-bg);
  border-left: none;
}

/* ==========================================================================
   Анимации тултипа
   ========================================================================== */

@keyframes flow-tooltip-fade-in-top {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes flow-tooltip-fade-in-bottom {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes flow-tooltip-fade-in-left {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(4px);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

@keyframes flow-tooltip-fade-in-right {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}