/* Шрифт Nunito подключается в index.html (preconnect). */

/* Non-theme tokens */
:root {
  --color-surface: rgba(255, 255, 255, 0.88);
  --color-surface-solid: #ffffff;
  --color-border: rgba(59, 55, 59, 0.2);
  --color-error: #dc2626;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  --font-family: 'Nunito', sans-serif;
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.08);

  --menu-active-color: #ffffff;
  --menu-inactive-color: rgba(255, 255, 255, 0.6);
  --duration-icon: 1s;

  /* Telegram chrome + device safe area (updated via JS) */
  --tg-safe-top: env(safe-area-inset-top, 0px);
  --tg-safe-bottom: env(safe-area-inset-bottom, 0px);
  --tg-safe-left: env(safe-area-inset-left, 0px);
  --tg-safe-right: env(safe-area-inset-right, 0px);
  --tg-content-safe-top: 0px;
  --tg-content-safe-bottom: 0px;
  --app-content-padding-top: calc(var(--tg-content-safe-top) + var(--tg-safe-top) + var(--space-2));
  --app-content-padding-bottom: calc(var(--tg-content-safe-bottom) + var(--tg-safe-bottom) + var(--space-2));
  /* Горизонтальные отступы вкладок и нижний зазор под меню */
  --page-horizontal-padding: max(5%, var(--space-4));
  --tab-menu-clearance: calc(72px + var(--tg-safe-bottom, 0px) + var(--tg-content-safe-bottom, 0px));
}

html.theme-1 {
  --main-bg-color: #DDDBDE;
  --main-bg-color-dark: #CAD4DF;
  --secondary-bg-color: #CAD4DF;
  --secondary-text-color: #3B373B;
  --text-color: #3B373B;
  --color-bg: #DDDBDE;
  --color-bg-muted: #CAD4DF;
  --color-on-surface: #3B373B;
  --color-on-surface-muted: #3B373B;
  --color-primary: #3B373B;
  --color-on-primary: #CAD4DF;
  --color-accent: #3B373B;
}

html.theme-2 {
  --main-bg-color: #E4E4FF;
  --main-bg-color-dark: #D4D4F5;
  --secondary-bg-color: #E4E4FF;
  --secondary-text-color: #4F4DCC;
  --text-color: #4F4DCC;
  --color-bg: #E4E4FF;
  --color-bg-muted: #D4D4F5;
  --color-on-surface: #4F4DCC;
  --color-on-surface-muted: #4F4DCC;
  --color-primary: #4F4DCC;
  --color-on-primary: #E4E4FF;
  --color-accent: #6260FF;
}

html.theme-3 {
  --main-bg-color: #9FE870;
  --main-bg-color-dark: #8BD45C;
  --secondary-bg-color: #9FE870;
  --secondary-text-color: #2D5016;
  --text-color: #163300;
  --color-bg: #9FE870;
  --color-bg-muted: #8BD45C;
  --color-on-surface: #163300;
  --color-on-surface-muted: #2D5016;
  --color-primary: #163300;
  --color-on-primary: #9FE870;
  --color-accent: #163300;
}

html.theme-4 {
  --main-bg-color: #BDD9D7;
  --main-bg-color-dark: #A8C5C3;
  --secondary-bg-color: #BDD9D7;
  --secondary-text-color: #025A66;
  --text-color: #03363D;
  --color-bg: #BDD9D7;
  --color-bg-muted: #A8C5C3;
  --color-on-surface: #03363D;
  --color-on-surface-muted: #025A66;
  --color-primary: #03363D;
  --color-on-primary: #BDD9D7;
  --color-accent: #03363D;
}

html.theme-5 {
  --main-bg-color: #FBEAEB;
  --main-bg-color-dark: #E7D6D7;
  --secondary-bg-color: #FBEAEB;
  --secondary-text-color: #263A88;
  --text-color: #3447AA;
  --color-bg: #FBEAEB;
  --color-bg-muted: #E7D6D7;
  --color-on-surface: #3447AA;
  --color-on-surface-muted: #263A88;
  --color-primary: #3447AA;
  --color-on-primary: #FBEAEB;
  --color-accent: #3447AA;
}

html.theme-6 {
  --main-bg-color: #FCDB32;
  --main-bg-color-dark: #E2C52D;
  --secondary-bg-color: #FCDB32;
  --secondary-text-color: #2A3555;
  --text-color: #141D38;
  --color-bg: #FCDB32;
  --color-bg-muted: #E2C52D;
  --color-on-surface: #141D38;
  --color-on-surface-muted: #2A3555;
  --color-primary: #141D38;
  --color-on-primary: #FCDB32;
  --color-accent: #141D38;
}

html.theme-7 {
  --main-bg-color: #34E0A1;
  --main-bg-color-dark: #2DCB90;
  --secondary-bg-color: #34E0A1;
  --secondary-text-color: #333333;
  --text-color: #000000;
  --color-bg: #34E0A1;
  --color-bg-muted: #2DCB90;
  --color-on-surface: #000000;
  --color-on-surface-muted: #333333;
  --color-primary: #000000;
  --color-on-primary: #34E0A1;
  --color-accent: #000000;
}

body {
  margin: 0;
  font-family: var(--font-family);
  background-color: var(--color-bg);
  color: var(--color-on-surface);
}

#root,
.app-container,
.content-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--color-bg, var(--main-bg-color));
}

.app-viewport {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: var(--app-content-padding-top);
  padding-bottom: var(--app-content-padding-bottom);
  padding-left: max(var(--tg-safe-left), var(--space-4));
  padding-right: max(var(--tg-safe-right), var(--space-4));
  box-sizing: border-box;
}

.app-viewport--flush-horizontal {
  padding-left: 0;
  padding-right: 0;
}

.app-viewport--tab-page {
  padding-top: 0;
}

.app-tab-header {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(1.5vh + var(--tg-content-safe-top, 0px) + 2.25rem);
  padding: calc(1.5vh + var(--tg-content-safe-top, 0px)) max(var(--space-4, 16px), var(--tg-safe-right, 0px)) 0 max(var(--space-4, 16px), var(--tg-safe-left, 0px));
  margin: 0;
  box-sizing: border-box;
  background: var(--color-bg, var(--main-bg-color));
  z-index: 30;
}

.app-tab-header__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-on-surface, var(--text-color));
  font-family: var(--font-family, 'Nunito', sans-serif);
  text-align: center;
  line-height: 1.2;
}

html.theme-1 .menu__item.active,
html.theme-2 .menu__item.active,
html.theme-3 .menu__item.active,
html.theme-4 .menu__item.active,
html.theme-5 .menu__item.active,
html.theme-6 .menu__item.active,
html.theme-7 .menu__item.active {
    color: var(--menu-active-color);
}

html.theme-1 .menu__item:not(.active),
html.theme-2 .menu__item:not(.active),
html.theme-3 .menu__item:not(.active),
html.theme-4 .menu__item:not(.active),
html.theme-5 .menu__item:not(.active),
html.theme-6 .menu__item:not(.active),
html.theme-7 .menu__item:not(.active) {
    color: var(--menu-inactive-color);
}

html {
    box-sizing: border-box ;
    --duration: .45s ;
    --cubic: cubic-bezier(0.4, 0, 0.2, 1) ;
    --color-1: #d5dadd ;
    --color-2: #51d5c2 ;
}

html *,
html *::before,
html *::after {
    box-sizing: inherit ;
}

body.tg-webapp {
    overflow-x: hidden;
}

#root {
    width: 100%;
    min-height: 100vh;
}

.content-container {
    color: var(--color-on-surface, var(--text-color));
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
}

.tab-panels-container {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    position: relative;
}

.tab-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 0;
    padding-bottom: var(--tab-menu-clearance, calc(72px + var(--tg-safe-bottom, 0px)));
    box-sizing: border-box;
}

/* Одна зона прокрутки на вкладке задач — без «двойного» свайпа и обрезки у меню */
.tab-panel:has(> .task-list) {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}
.tab-panel:not(.tab-panel-hidden) {
    z-index: 1;
}
.tab-panel.tab-panel-hidden {
    visibility: hidden;
    pointer-events: none;
}

.block {
    height: calc(100vh / 2); /* Высота блока равна половине видимой области */
    box-sizing: border-box; /* Учитываем отступы в расчете высоты */
}

.container {
    display: flex; /* Используем флексбокс для расположения блоков */
    flex-direction: column; /* Располагаем блоки по вертикали */
    height: 100vh; /* Полная высота видимой области */
}

.row {
    display: flex; /* Используем флексбокс для расположения блоков в строке */
    width: 100%; /* Полная ширина */
}

.menu {
    margin: 0;
    width: 100%;
    height: 10vh;
    min-height: 56px;
    display: flex;
    user-select: none;
    position: fixed;
    bottom: var(--tg-content-safe-bottom);
    left: 0;
    right: 0;
    z-index: 1000;
    padding-bottom: var(--tg-safe-bottom);
    box-sizing: content-box;
    align-items: center;
    justify-content: center;
    gap: 4em;
    padding-left: 2em;
    padding-right: 2em;
    box-sizing: border-box;
    background-color: var(--text-color);
    -webkit-tap-highlight-color: transparent;
    border-radius: 3.5em 3.5em 0em 0em;
    padding-bottom: 2vh;
    pointer-events: auto;
}


@media (max-width: 42.625em) {
  .menu {
    font-size: .55em;
  }
}

/* У исполнителя 4 пункта (без «+») — чуть больше расстояние между иконками */
.menu--executor {
  gap: 5.5em;
}

@media (max-width: 42.625em) {
  .menu--executor {
    gap: 4.75em;
  }
}

.menu__item {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    flex: 0 0 auto;
    width: 3em;
    min-width: 3em;
    max-width: 3em;
    display: flex;
    cursor: pointer;
    overflow: visible;
    padding-top: 0.5em;
    position: relative;
    align-items: center;
    color: var(--menu-inactive-color, var(--main-bg-color));
    justify-content: center;
    box-sizing: border-box;
    pointer-events: auto;
    transition: color 0.25s ease;
}

.menu__item::before,
.menu__item::after {
    display: none !important;
    content: none !important;
}

.menu__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size: 1.05em;
    stroke: currentColor;
    transform: scale(1);
    transition: transform 0.25s ease;
}

.menu__item.active .menu__icon {
    transform: scale(1.15);
}

.menu__item.active {
    color: var(--menu-active-color, var(--secondary-text-color));
}

/* Центральная кнопка + */
.menu__item--create {
    flex-grow: 1.2 !important;
    background: var(--secondary-bg-color) !important;
    color: var(--text-color) !important;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
    width: 2.8em;
    height: 2.8em;
    min-width: 2.8em;
    min-height: 2.8em;
    margin: 0 0.2em;
    padding: 0 !important;
    align-self: center;
    font-size: 1.8em;
    font-weight: bold;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background 0.2s ease;
}
.menu__item--create:hover {
    transform: scale(1.1);
}
.menu__item--create:active {
    transform: scale(0.95);
}
.menu__item--create::after {
    display: none !important;
}
.menu__create-icon {
    font-size: 1.2em;
    line-height: 1;
}

/* Стили иконок меню */
.menu .icon {
    fill: none; 
    width: 2.5em;
    height: 2.5em;
    min-width: 2.5em;
    max-width: 2.5em;
    flex-shrink: 0;
    display: block;
    stroke-width: 15;
    stroke-miterlimit: 10;
}

.menu .icon #tasks-lines path {
    stroke-width: 13;
}

/* Анимации иконок при активации — движение внутри иконки, без сдвига влево/вправо */
.menu__item.active #home-anm {
    animation: home var(--duration-icon);
}
@keyframes home {
    25% { transform: translate3d(0, -.8em, 0); }
    50% { transform: translate3d(0, .5em, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

.menu__item.active #tasks-anm {
    animation: tasks-board var(--duration-icon);
}
.menu__item.active #tasks-clip {
    animation: tasks-clip var(--duration-icon);
}
.menu__item.active #tasks-lines path {
    stroke-dasharray: 56;
    animation: tasks-line calc(var(--duration-icon) / 1.2);
}
.menu__item.active #tasks-lines path:nth-child(2) {
    animation-delay: 0.1s;
}
.menu__item.active #tasks-lines path:nth-child(3) {
    animation-delay: 0.2s;
}
@keyframes tasks-board {
    25% { transform: translate3d(0, -0.55em, 0); }
    50% { transform: translate3d(0, 0.35em, 0); }
    100% { transform: translate3d(0, 0, 0); }
}
@keyframes tasks-clip {
    30% { transform: translate3d(0, -0.65em, 0); }
    100% { transform: translate3d(0, 0, 0); }
}
@keyframes tasks-line {
    0% { stroke-dashoffset: 56; opacity: 0.35; }
    60% { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 1; }
}

.menu__item.active #period-anm {
    transform-origin: center 100%;
    animation: period var(--duration-icon);
}
.menu__item.active #period-cir {
    transform-origin: center;
    animation: period-cir var(--duration-icon);
}
.menu__item.active #period-line path {
    stroke-dasharray: 66;
    animation: period-line calc(var(--duration-icon) / 2.5) reverse;
}
@keyframes period {
    35% { transform: scaleY(.85); }
    60%, 70% { transform: scaleY(1.2); }
    100% { transform: scaleY(1); }
}
@keyframes period-cir {
    0% { opacity: 0; }
    35% { opacity: 1; transform: translate3d(15%, -55%, 0); }
    60% { opacity: 0; transform: translate3d(-8%, -50%, 0); }
}
@keyframes period-line {
    100% { stroke-dashoffset: 66; }
}

.menu__item.active #settings-anm {
    transform-box: fill-box;
    transform-origin: center;
    animation: settings-anm calc(var(--duration-icon) / 1.5);
}
@keyframes settings-anm {
    0% { transform: rotate(-60deg); }
    50% { transform: rotate(60deg); }
    100% { transform: rotate(-60deg); }
}

.ptr-indicator {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: var(--ptr-pull, 0);
  margin-bottom: calc(-1 * var(--ptr-pull, 0));
  overflow: visible;
  pointer-events: none;
}

.ptr-indicator--pulling {
  transition: none;
}

.ptr-indicator:not(.ptr-indicator--pulling) {
  transition: height 0.2s ease;
}

.ptr-indicator__spinner {
  width: 24px;
  height: 24px;
  margin-bottom: 6px;
  border: 2.5px solid var(--secondary-bg-color, rgba(0, 0, 0, 0.12));
  border-top-color: var(--text-color, #3b373b);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.6) rotate(0deg);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.ptr-indicator--ready .ptr-indicator__spinner,
.ptr-indicator--refreshing .ptr-indicator__spinner {
  opacity: 1;
  transform: scale(1);
}

.ptr-indicator--refreshing .ptr-indicator__spinner {
  animation: ptr-spin 0.7s linear infinite;
}

@keyframes ptr-spin {
  to { transform: scale(1) rotate(360deg); }
}

.profile-container {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  height: 100vh;
  text-align: center;
  margin-top: 5vh;
}

.profile-name {
  font-size: 1.5em;
  margin-bottom: 0vh;
  color: var(--text-color);
}

.profile-position {
  margin-top: 1vh;
  font-size: 1.25em;
  color: var(--text-color);
}
:root {
    --select-border: #777;
    --select-arrow: var(--select-border);
    --button-bg: #283593;
    --button-color: #ffffff;
}

.back {
    background-color: var(--button-bg);
    color: var(--button-color);
    border: none;
    padding: 4vw; /* Заменил фиксированные значения на процентные */
    border-radius: 5vw;
    cursor: pointer;
    font-size: 5vw;
    width: 40%;
    font-weight: bold;
    display: grid;
}

.header {
    position: fixed;
    top: var(--app-content-padding-top);
    right: max(2.5vw, var(--tg-safe-right));
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 10px;
    z-index: 100;
}

.user-avatar {
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s;
    border: 3px solid var(--text-color);
    object-fit: cover;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.user-avatar:hover {
    transform: scale(1.1);
}

.container {
    margin-top: 5vh;
    padding: 5vw;
    text-align: center;
    width: 93.3vw; /* примерно соответствует 350px */
}

.task-group {
    margin-bottom: 5vh;
    width: 90%;
    margin: 0 auto;
}

.task-group h4 {
    text-align: center;
    margin-bottom: 2.5vh;
    font-size: 5vw;
}

svg {
    height: 1em;
}

.welcome-text {
    color: var(--text-color);
    font-weight: bold;
    font-size: 1.35rem;
    padding-left: 4vw;
    padding-right: 13vw;
}

.user-avatars {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.team-name {
    font-weight: bold;
    margin: 0 0 1vh;
}

.team-members {
    margin-left: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.team-member-avatar {
    width: 12vw;
    height: 12vw;
    min-width: 32px;
    min-height: 32px;
    border-radius: 50%;
    margin-left: -4vw;
    border: 0.75vw solid var(--secondary-bg-color, var(--main-bg-color));
    background-color: var(--secondary-bg-color, var(--main-bg-color));
    object-fit: cover;
    flex-shrink: 0;
}

.team-member-avatar:first-child {
    margin-left: 0;
}

.home-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.home-content {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding-bottom: calc(88px + var(--tg-safe-bottom, 0px) + var(--tg-content-safe-bottom, 0px));
}

.widgets-container {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 2.5vh, 20px);
    width: 100%;
}

.tasks-container {
    padding-left: var(--page-horizontal-padding, max(5%, 16px));
    padding-right: var(--page-horizontal-padding, max(5%, 16px));
    box-sizing: border-box;
}

.team {
    display: flex;
    align-items: center;
    gap: 4vw;
    position: relative;
    background-color: var(--text-color);
    color: var(--secondary-bg-color);
    border-radius: 6.5vw;
    padding: 2vh 10vw 2vh 6vw;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.team:hover {
    transform: translateY(-2px);
    box-shadow: 0px 8px 14px rgba(0, 0, 0, 0.22);
}

.team:hover .team-chevron {
    transform: translateY(-50%) translateX(3px);
}

.team:active {
    transform: translateY(0);
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
}

.team-chevron {
    transition: transform 0.2s ease;
    position: absolute;
    right: 4vw;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    color: var(--secondary-bg-color);
    opacity: 0.85;
    pointer-events: none;
}

.team-photo {
    width: 14vw;
    height: 14vw;
    min-width: 48px;
    min-height: 48px;
    border-radius: 12px;
    border: 0.75vw solid var(--secondary-bg-color, var(--main-bg-color));
    background-color: var(--main-bg-color-dark, var(--main-bg-color));
    object-fit: cover;
    box-sizing: border-box;
    flex-shrink: 0;
}

.team-info {
    flex: 1;
    min-width: 0;
}

.home-invite-card {
    margin-top: 0;
}

.home-invite-icon {
    width: 14vw;
    height: 14vw;
    min-width: 48px;
    min-height: 48px;
    border-radius: 12px;
    border: 0.75vw solid var(--secondary-bg-color, var(--main-bg-color));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.home-invite-subtitle {
    margin: 4px 0 0;
    font-size: 0.85rem;
    opacity: 0.85;
    line-height: 1.3;
}

.modal-invite-view {
    padding: 12px 16px 24px;
    overflow-y: auto;
    max-height: 85vh;
}

.modal-content--invite {
    width: min(92vw, 420px);
}

.modal-invite-title {
    margin: 0 0 16px;
    font-size: 1.35rem;
    font-weight: 800;
    text-align: center;
    color: var(--text-color);
}

.calendar-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    padding: var(--space-3, 12px) 0 0;
    width: 100%;
    box-sizing: border-box;
}

.calendar-button {
    background-color: var(--text-color);
    color: var(--secondary-bg-color);
    border: none;
    border-radius: 3.25vw;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: 0;
    flex-shrink: 0;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.picked-period {
    color: var(--text-color);
    margin: 0;
    padding: 0;
    flex: 1;
    min-width: 0;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
}

.calendar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1100;
    text-align: left;
}

.hidden {
    display: none;
}

.calendar {
    position: relative;
    z-index: 2;
    background-color: var(--secondary-bg-color);
}  

.hidden {
    display: none;
}

#calendar-inner-container {
    z-index: 101;
    padding: 0;
}

.filters {
    margin-bottom: 20px;
}

.filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    width: 100%;
}

#date-range-display, #selected-members-display {
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    flex-shrink: 0; 
    vertical-align: middle;
}

#open-calendar-btn {
    padding: 10px 20px;
    cursor: pointer;
    border: 2px solid black;
    border-radius: 25px;
    width: 100%;
}

#open-calendar-btn img {
    width: 24px;
    height: 24px;
    object-fit: contain; /* Масштабирование иконки без потери пропорций */
    vertical-align: middle;
}

#open-member-select-btn {
    padding: 10px 20px;
    cursor: pointer;
    border: 2px solid black;
    border-radius: 25px;
    width: 100%;
}

#open-member-select-btn img {
    width: 24px;
    height: 24px;
    object-fit: contain; /* Масштабирование иконки без потери пропорций */
    vertical-align: middle;
}

.calendar-overlay .calendar,
#calendar-inner-container .calendar {
    margin: 0;
}

.calendar {
    background-color: #f8f7fa;
    color: #333;
    width: 360px;
    padding: 15px;
    box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    overflow: hidden;
}

.calendar--nav {
    margin: -15px -15px 15px;
    padding: 0 15px;
    color: var(--secondary-bg-color);
    height: 70px;
    position: relative;
    background-color: var(--text-color);
}

.calendar--nav a {
    position: absolute;
    cursor: pointer;
    left: 10px;
    font-size: 32px;
    line-height: 1;
    top: 16px;
    width: 30px;
    text-align: center;
    display: inline-block;
    color: var(--secondary-bg-color);
    -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.calendar--nav a:hover {
    color: #fff;
}

.calendar--nav a:last-child {
    left: auto;
    right: 10px;
}

.calendar--nav h1 {
    margin: 0;
    position: absolute;
    left: 40px;
    right: 40px;
    text-align: center;
    cursor: pointer;
    font-weight: 400;
    font-size: 30px;
    line-height: 66px;
    -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.calendar--nav small {
    font-weight: 300;
    font-size: 60%;
}

.calendar--days {
    font-size: 0;
}

.calendar--days span {
    width: 14.28571%;
    display: inline-block;
    text-align: center;
    -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    cursor: pointer;
    margin: 8px 0;
    line-height: 34px;
    position: relative;
    font-size: 16px;
}

.calendar--days span.label {
    text-transform: uppercase;
    font-weight: 700;
    color: #333;
    font-size: 14px;
    cursor: initial;
}

.calendar--days span.active {
    font-weight: 700;
    background-color: rgba(182, 112, 244, 0.05);
    border-radius: 12px;
}

.calendar--days span.muted {
    color: rgba(0, 0, 0, 0.3);
}

.calendar--days span.selected {
    background-color: var(--text-color);
    color: var(--secondary-bg-color);
    border-radius: 12px;
}

.calendar--days span.between {
    border-radius: 0;
}

.calendar--days span.start, .calendar--days span.between, .calendar--days span.end {
    background-color: var(--text-color);
    color: var(--secondary-bg-color);
}

.calendar--days span.start {
    border-radius: 12px 0 0 12px;
}

.calendar--days span.end {
    border-radius: 0 12px 12px 0;
}

.calendar--days span.start.end {
    border-radius: 12px;
}

.calendar--days span.between:nth-child(7n):after, .calendar--days span.start:nth-child(7n):after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    background-color: var(--text-color);
    width: 20px;
}

.calendar--days span.between:nth-child(7n+1):after, .calendar--days span.end:nth-child(7n+1):after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    background-color: var(--text-color);
    width: 20px;
}

.calendar--days span.start.end:after {
    display: none;
}

.apply-btn {
    margin: 15px -15px -15px;
    padding: 0 15px;
    background-color: var(--text-color);
    color: var(--secondary-bg-color);
    height: 70px;
    position: relative;
    width: 110%;
    font-size: 20px;
    border: 0px;
    font-weight: bold;
    cursor: pointer;
}

.grid-container {
    padding-top: 3vh;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* 7 рядов: высокая = 4, компактная = 3 (соотношение 4:3) */
    grid-template-rows: repeat(7, minmax(0, 1fr));
    gap: clamp(10px, 3vw, 16px);
    width: 100%;
    min-height: clamp(280px, 78vw, 420px);
    box-sizing: border-box;
}

.left-top, .right-top, .left-bottom, .right-bottom {
    position: relative;
    background-color: var(--text-color);
    border-radius: clamp(16px, 6.5vw, 28px);
    color: var(--secondary-bg-color);
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0.65rem 0.5rem;
    box-sizing: border-box;
    cursor: pointer;
}

.left-top {
    grid-column: 1;
    grid-row: 1 / 5;
}

.right-top {
    grid-column: 2;
    grid-row: 1 / 4;
}

.left-bottom {
    grid-column: 1;
    grid-row: 5 / 8;
}

.right-bottom {
    grid-column: 2;
    grid-row: 4 / 8;
}

/* Понятная кликабельность виджетов */
.left-top:hover, .right-top:hover, .left-bottom:hover, .right-bottom:hover {
    transform: translateY(-2px);
    box-shadow: 0px 8px 14px rgba(0, 0, 0, 0.22);
}

.left-top:active, .right-top:active, .left-bottom:active, .right-bottom:active {
    transform: translateY(0);
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
}

.left-top:focus-visible, .right-top:focus-visible,
.left-bottom:focus-visible, .right-bottom:focus-visible,
.team:focus-visible {
    outline: 3px solid var(--secondary-bg-color);
    outline-offset: 2px;
}

/* Пустой (некликабельный) виджет выглядит неактивным */
.widget--empty {
    cursor: default;
    opacity: 0.55;
}

.widget--empty:hover {
    transform: none;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}

.active-tasks-count, .created-tasks-count, .outdated-tasks-count, .validation-tasks-count, .completed-tasks-count {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    font-size: clamp(1.5rem, 7vw, 2.25rem);
    font-weight: bold;
    margin: 0;
    padding: 0;
    line-height: 1;
}

.active-tasks, .created-tasks, .outdated-tasks, .validation-tasks, .completed-tasks {
    position: absolute;
    top: calc(50% + clamp(14px, 4.5vw, 24px));
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 12px);
    text-align: center;
    font-size: clamp(0.7rem, 2.8vw, 0.9rem);
    line-height: 1.2;
    margin: 0;
}
  
.tasks-list {
    max-height: 100%;
    overflow-y: auto;
    margin-top: 20px;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content,
.app-modal-content {
    background: var(--main-bg-color);
    border-radius: 25px 25px 0 0;
    width: 100%;
    max-width: 100%;
    position: absolute;
    height: 95%;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: var(--app-content-padding-top);
    padding-left: 0;
    padding-right: 0;
    padding-bottom: calc(var(--space-4, 16px) + var(--tg-safe-bottom, 0px));
    box-sizing: border-box;
}

.modal-scroll-body,
.modal-tasks-list,
.modal-report-overview {
    width: 100%;
    box-sizing: border-box;
    padding-left: max(var(--space-4, 16px), var(--tg-safe-left, 0px));
    padding-right: max(var(--space-4, 16px), var(--tg-safe-right, 0px));
}

.modal-content--task-form,
.modal-content--filters,
.modal-content--team,
.modal-content--report {
    padding-left: 0;
    padding-right: 0;
}

.modal-content--task-form {
    height: 92%;
    max-height: var(--tg-viewport-stable-height, 100dvh);
    display: flex;
    flex-direction: column;
    padding-top: 0;
    overflow: hidden;
}

.modal-content--task-form .task-create-form {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.modal-content--task-form .task-form-step-header {
    flex-shrink: 0;
    margin: 0 0 12px;
    padding: calc(1.5vh + var(--tg-content-safe-top, 0px)) 8px 0;
    min-height: calc(1.5vh + var(--tg-content-safe-top, 0px) + 2.25rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.modal-content--task-form .task-form-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 5vw 12px;
    box-sizing: border-box;
}

/* Единые горизонтальные отступы всех блоков формы (как у блока загрузки фото) */
.modal-content--task-form .task-form-body > * {
    width: 100%;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.modal-content--task-form .task-title,
.modal-content--task-form .task-description {
    padding-left: 0;
    padding-right: 0;
}

.modal-content--task-form .control-button-container {
    position: static;
    flex-shrink: 0;
    width: 100%;
    margin-top: auto;
    padding: 12px 10px calc(12px + var(--tg-safe-bottom, 0px));
    box-sizing: border-box;
    background: var(--main-bg-color);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
}

body.tg-webapp .modal-overlay {
    height: var(--tg-viewport-stable-height, 100%);
    max-height: var(--tg-viewport-stable-height, 100dvh);
}

.modal-content {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.28) transparent;
}

.modal-content::-webkit-scrollbar {
    width: 6px;
}

.modal-content::-webkit-scrollbar-track {
    background: transparent;
}

.modal-content::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background-color: rgba(0, 0, 0, 0.28);
}

.modal-close {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 2vh;
    right: 3vw;
    border: none;
    font-size: 2em;
    cursor: pointer;
    background-color: var(--text-color);
    color: var(--secondary-bg-color);
    border-radius: 50%;
    width: 48px;
    aspect-ratio: 1 / 1;
    z-index: 1;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    padding: 0;
    line-height: 0;
    font-family: inherit;
}

.modal-tasks-content {
    background: white;
    border-radius: 25px 25px 0 0;
    width: 100%;
    max-width: 100%;
    position: absolute;
    color: black;
    height: 95%;
    bottom: 0;
    padding-top: 0vh;
    padding-right: 1vh;
    padding-left: 1vh;
}

.modal-tasks-list {
    overflow: visible;
    max-height: none;
}

.modal-list-title {
    margin: 0 0 14px;
    font-family: 'Nunito';
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-color);
    text-align: center;
}

.modal-task-item {
    background-color: var(--main-bg-color);
    border-radius: 2.5vw;
    padding: 2.5vw;
    margin: 0 0 2.5vh;
    box-shadow: 0 0 1.5vw rgba(0, 0, 0, 0.4);
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 4px solid var(--text-color);
}

.modal-task-item:first-child {
    margin-top: 1vh;
}

.modal-task-title {
    font-size: 1.5em;
    text-align: center;
    margin-bottom: 0vh;
    margin-top: 1vh;
    color: var(--text-color);
}

.modal-task-description {
    font-size: 0.9em;
    text-align: left;
    margin-bottom: 1vh;
    margin-top: 1vh;
    color: var(--text-color);
}

.modal-task-divider {
    background-color: var(--text-color);
    border-radius: 20px;
    height: 0.35vh;
}

.modal-task-footer {
    display: flex;
    justify-content: space-between;
    font-size: 0.8em;
}

.modal-task-assigned-to, .modal-task-due-date {
    color: var(--secondary-text-color);
    margin-bottom: 0vh;
    margin-top: 2vh;
}

.modal-team-list {
    padding: 0 max(var(--space-4, 16px), var(--tg-safe-right, 0px)) 10vh
            max(var(--space-4, 16px), var(--tg-safe-left, 0px));
    box-sizing: border-box;
    width: 100%;
}
  
.team-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.modal-team-hero {
    text-align: center;
    margin-bottom: 20px;
    padding: 0 12px;
}

.modal-team-photo-center {
    width: 88px;
    height: 88px;
    border-radius: 16px;
    object-fit: cover;
    display: block;
    margin: 0 auto 14px;
    border: 3px solid var(--secondary-bg-color);
}

.modal-team-name-center {
    color: var(--text-color);
    margin: 0 0 8px;
    font-size: 1.25rem;
    font-weight: 800;
    text-align: center;
    line-height: 1.25;
    padding: 0 8px;
}

.modal-team-description-center {
    color: var(--secondary-text-color, #666);
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.4;
    text-align: center;
    padding: 0 12px;
}

.modal-team-members-header {
    color: var(--secondary-text-color);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 4px 10px;
}

.modal-team-empty {
    color: var(--secondary-text-color);
    text-align: center;
    margin: 24px 0;
    font-size: 0.95rem;
}

.team-member-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 16px;
    background-color: rgba(0, 0, 0, 0.04);
    background-color: color-mix(in srgb, var(--text-color) 7%, transparent);
}

.member-avatar {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    object-fit: cover;
    background-color: var(--secondary-bg-color);
    border: 2px solid rgba(0, 0, 0, 0.08);
    border: 2px solid color-mix(in srgb, var(--text-color) 12%, transparent);
    padding: 4px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.member-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.member-name {
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.2;
}

.member-position {
    font-size: 0.85rem;
    color: var(--secondary-text-color);
    margin: 2px 0 0;
}

.invite-new-members {
    bottom: 0;
    left: 0;
    position: fixed;
    width: 100%;
    height: 9vh;
    border-radius: 5vh 5vh 0 0;
    border: 0px;
    background-color: var(--text-color);
    color: var(--secondary-bg-color);
    font-family: 'Nunito';
    font-size: 1.15em;
}

.invite-code-back {
    position: absolute;
    top: 2vh;
    left: 3vw;
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 1rem;
    cursor: pointer;
    font-family: 'Nunito';
    padding: 0;
}

.invite-code-label {
    color: var(--text-color);
    font-size: 1.5rem;
    text-align: center;
    margin-top: 2.5vh;
    margin-bottom: 0vh;
}

.invite-code-description {
    color: var(--secondary-text-color);
    font-size: 1rem;
    margin-top: 1.5vh;
    margin-left: 5vw;
    margin-right: 5vw;
    text-indent: 3vw;
    width: 90%;
}

.invite-code-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 0 auto;
    margin-top: 5vh;
}

.invite-code-input {
    height: 7vh;
    border: 3px solid var(--text-color);
    border-radius: 2vh;
    font-size: 1rem;
    width: 60vw;
    font-family: 'Nunito';
    color: var(--text-color);
    text-align: center;
}

.copy-button {
    position: absolute;
    right: 0vh;
    top: 50%;
    transform: translateY(-50%);
    background: var(--text-color);
    border: none;
    cursor: pointer;
    height: 100%;
    border-radius: 0 2vh 2vh 0;
    padding-left: 1.5vh;
    padding-right: 1.5vh;
}

.copy-button svg {
    width: 3vh;
    height: 3vh;
    color: var(--main-bg-color);
}

.modal-back-button {
    position: absolute;
    top: 2vh;
    left: 3vw;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    background-color: var(--text-color);
    color: var(--secondary-bg-color);
    border-radius: 50%;
    width: 11vw;
    height: 11vw;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.back-icon-completion {
    font-size: 0.6em;
}

.task-image-container {
    position: relative;
    width: 100%;
    height: 45vh;
}

.task-main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    border-radius: 25px 25px 0px 0px;
}

.task-title-without-photo-overlay {
    margin-top: 3.5vh;
    font-size: 1.3em;
    color: var(--text-color);
    text-align: center;
}

.task-title-text {
    margin: 0px;
}

.task-title-overlay {
    position: absolute;
    bottom: 2vh;
    left: 2vh;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 1vh 3vw;
    border-radius: 15px;
    font-size: 1.25em;
    text-align: left;
}

.modal-task-description {
    text-align: left;
    margin-bottom: 1vh;
    margin-top: 3vh;
    color: var(--text-color);
    margin-left: 3vh;
    font-size: 1em;
    max-height: 21vh;
    overflow-y: auto;
    padding-right: 1.5vh;
    margin-right: 1.5vh;
    box-sizing: content-box;
}

.task-assigned {
    display: flex;
    align-items: center;
    margin-top: 1vh;
    margin-left: 3vh;
}

.task-assigned-avatar {
    width: 7vh;
    height: 7vh;
    border-radius: 50%;
    margin-right: 3vw;
}

.task-deadline {
    margin-top: 4vh;
    font-size: 1em;
    margin-left: 3vh;
    text-align: left;
}

.completion-mode {
    text-align: center;
}

.decline-task, .accept-task, .decline-report-task, .send-report-task {
    bottom: 1vh;
    position: fixed;
    width: calc(50% - 1.5vh);
    height: 9vh;
    border-radius: 3vh 3vh 3vh 3vh;
    border: 0px;
    background-color: var(--text-color);
    color: var(--secondary-bg-color);
    font-family: 'Nunito';
    font-size: 1.15em;
}

.decline-task, .decline-report-task {
    left: 1vh;
}

.accept-task, .send-report-task {
    right: 1vh;
}

.review-description-block {
    text-align: left;
    margin-left: 2.5vw;
}

.review-description {
    font-size: 1.25em;
    color: var(--text-color);
    margin-top: 4vh;
    margin-bottom: 1vh;
}

.review-description-text {
    margin-top: 2vh;
}

.reason-text {
    font-size: 1.5em;
    color: var(--text-color);
    margin-top: 2.75vh;
}

.completion-button {
    bottom: 0;
    left: 0;
    position: fixed;
    width: 100%;
    height: 9vh;
    border-radius: 5vh 5vh 0 0;
    border: 0px;
    background-color: var(--text-color);
    color: var(--secondary-bg-color);
    font-family: 'Nunito';
    font-size: 1.15em;
}

.enter-description-text-completion {
    font-size: 1.3em;
    color: var(--text-color);
}

.enter-description-completion {
    width: 90vw;
    height: 10vh;
    max-height: 50vh;
    margin-top: 2vh;
    border: 2px solid var(--text-color);
    border-radius: 2vh;
    font-family: 'Nunito';
    padding: 2vw;
}

.back-button-completion {
    position: absolute;
    top: 2vh;
    left: 3vw;
    border: none;
    cursor: pointer;
    background-color: var(--text-color);
    color: var(--secondary-bg-color);
    border-radius: 50%; /* Сделать кнопку круглой */
    width: 11vw;
    height: 11vw;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Тень для эстетики */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.back-icon-completion {
    font-size: 0.6em;
}

.send-completion {
    bottom: 0;
    left: 0;
    position: fixed;
    width: 100%;
    height: 9vh;
    border-radius: 5vh 5vh 0 0;
    border: 0px;
    background-color: var(--text-color);
    color: var(--secondary-bg-color);
    font-family: 'Nunito';
    font-size: 1.15em;
}

.lightbox-portal,
.lightbox-container {
    z-index: 10001 !important;
}
.lightbox-container {
    background-color: rgba(0, 0, 0, 0.8);
}

.lightbox-footer {
    position: absolute;
    bottom: 5vh; /* Отступ от нижнего края */
    left: 50%;
    transform: translateX(-50%);
    color: white; /* Цвет текста */
    font-size: 1em; /* Размер шрифта */
    background: rgba(0, 0, 0, 0.5); /* Полупрозрачный фон */
    padding: 1vw 1vh;
    border-radius: 5px; /* Закругление углов */
    font-family: 'Nunito';
}

.reject-task {
    text-align: center;
}

.reason-text {
    font-size: 1.5em;
    color: var(--text-color);
    margin-top: 2.75vh;
}

.description-moderation-task {
    width: 95vw;
    border-radius: 15px;
    padding: 2vw;
    height: 12vh;
    font-family: 'Nunito';
    border: 2px solid var(--text-color);
}

/* Toast-уведомления */
.toast-message {
    position: fixed;
    bottom: 20vh;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    padding: 12px 20px;
    background: var(--text-color, #3B373B);
    color: var(--main-bg-color, #DDDBDE);
    border-radius: 12px;
    font-size: 0.95rem;
    font-family: 'Nunito', sans-serif;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 100002;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
}

.toast-message--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.task-list {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.tasks-page-header {
    align-items: flex-start;
    min-height: calc(6vh + var(--tg-content-safe-top, 0px) + 44px + 8px);
    padding-bottom: 8px;
}

.tasks-page-header .app-tab-header__title {
    width: 100%;
    /* Как на «Отчёт»/«Настройки»: вертикальный центр в полосе 2.25rem */
    margin-top: calc((2.25rem - 1.2em) / 2);
}

.tasks-page-header .filter-tasks {
    top: calc(6vh + var(--tg-content-safe-top, 0px));
    transform: none;
}

.content {
    flex: 1;
    width: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scroll-padding-bottom: calc(88px + var(--tg-safe-bottom, 0px) + var(--tg-content-safe-bottom, 0px));
    padding-bottom: calc(88px + var(--tg-safe-bottom, 0px) + var(--tg-content-safe-bottom, 0px));
}

.create-new-task {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    position: fixed;
    top: 2.5vh;
    right: 2.5vw;
    border-radius: 24px;
    min-width: 48px;
    height: 48px;
    padding: 0 14px;
    background-color: var(--text-color);
    color: var(--secondary-bg-color);
    border: none;
    cursor: pointer;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    font-family: 'Nunito', inherit;
}

.create-new-task-icon {
    font-size: 1.5em;
    line-height: 1;
}

.create-new-task-label {
    font-size: 0.95rem;
    font-weight: 600;
}

.filter-tasks {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    right: max(12px, var(--tg-safe-right, 0px));
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background-color: var(--text-color);
    color: var(--secondary-bg-color);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    padding: 0;
    line-height: 0;
    font-family: inherit;
    z-index: 31;
}

.filter-tasks svg {
    width: 60%;
    height: 60%;
}

.filter-tasks__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background-color: var(--main-bg-color);
    color: var(--text-color);
    border: 2px solid var(--text-color);
    font-size: 11px;
    font-weight: 800;
    font-family: 'Nunito';
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    line-height: 1;
}

.modal-content--filters {
    padding-top: 0;
    display: flex;
    flex-direction: column;
    height: 92%;
    max-height: var(--tg-viewport-stable-height, 100dvh);
    overflow: hidden;
}

.filters-block {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    height: 100%;
    padding: 0;
}

.filters-page-header {
    flex-shrink: 0;
    margin-bottom: 8px;
}

.filters-block__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 5vw 12px;
    box-sizing: border-box;
}

.filter-section {
    margin-bottom: 22px;
}

.filter-section__label {
    margin: 0 0 10px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--secondary-text-color);
    font-family: 'Nunito';
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-chips--sub {
    margin-top: 8px;
}

.filter-chip {
    padding: 9px 14px;
    border-radius: 999px;
    border: 2px solid var(--text-color);
    background-color: transparent;
    color: var(--text-color);
    font-family: 'Nunito';
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.filter-chip:active {
    transform: scale(0.96);
}

.filter-chip--active {
    background-color: var(--text-color);
    color: var(--main-bg-color);
}

.filter-executors {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 2px 8px;
    scrollbar-width: none;
}

.filter-executors::-webkit-scrollbar {
    display: none;
}

.filter-executor {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 64px;
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: 'Nunito';
    color: var(--secondary-text-color);
}

.filter-executor__avatar,
.filter-executor__all {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid transparent;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}

.filter-executor__all {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: color-mix(in srgb, var(--text-color) 12%, transparent);
    color: var(--text-color);
    font-weight: 800;
    font-size: 0.95rem;
}

.filter-executor .filter-executor__name {
    font-size: 0.75rem;
    max-width: 64px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* У кнопки "Все" подпись дублируется кружком — прячем текстовую */
.filter-executor:first-child .filter-executor__name {
    display: none;
}

.filter-executor--active {
    color: var(--text-color);
    font-weight: 700;
}

.filter-executor--active .filter-executor__avatar,
.filter-executor--active .filter-executor__all {
    border-color: var(--text-color);
}

.filters-footer {
    flex-shrink: 0;
    display: flex;
    gap: 10px;
    padding: 12px 5vw calc(12px + var(--tg-safe-bottom, 0px));
    box-sizing: border-box;
    background: var(--color-bg, var(--main-bg-color));
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.filters-reset {
    flex: 0 0 38%;
    border-radius: 14px;
    border: 2px solid var(--text-color);
    background-color: transparent;
    color: var(--text-color);
    font-family: 'Nunito';
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
}

.filters-reset:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

@supports(-webkit-appearance: none) or (-moz-appearance: none) {
    input[type='checkbox'],
    input[type='radio'] {
      --active: var(--text-color);
      --active-inner: var(--main-bg-color);
      --focus: 2px rgba(39, 94, 254, .3);
      --border: var(--text-color);
      --border-hover: var(--text-color);
      --background: var(--main-bg-color);
      --disabled: #F6F8FF;
      --disabled-inner: #E1E6F9;
      -webkit-appearance: none;
      -moz-appearance: none;
      height: 4vh; /* Увеличиваем размер чекбокса */
      width: 4vh; /* Увеличиваем размер чекбокса */
      outline: none;
      display: inline-block;
      vertical-align: top;
      position: relative;
      margin: 0;
      cursor: pointer;
      border: 1px solid var(--bc, var(--border));
      background: var(--b, var(--background));
      transition: background .3s, border-color .3s, box-shadow .2s;

      &:after {
        content: '';
        display: block;
        left: 50%; /* Сдвигаем влево на 50% */
        top: 50%; /* Сдвигаем вверх на 50% */
        position: absolute;
        width: 10px; /* Увеличиваем ширину галочки */
        height: 15px; /* Увеличиваем высоту галочки */
        transition: transform var(--d-t, .3s) var(--d-t-e, ease), opacity var(--d-o, .2s);
        transform: translate(-50%, -63%) rotate(40deg);
      }

      &:checked {
        --b: var(--active);
        --bc: var(--active);
        --d-o: .3s;
        --d-t: .6s;
        --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
        &:after {
          /* Логика отображения галочки при проверке */
          opacity: 1; /* Показываем галочку */
        }
      }

      &:disabled {
        --b: var(--disabled);
        cursor: not-allowed;
        opacity: .9;
        &:checked {
          --b: var(--disabled-inner);
          --bc: var(--border);
        }
        & + label {
          cursor: not-allowed;
        }
      }

      &:hover {
        &:not(:checked) {
          &:not(:disabled) {
            --bc: var(--border-hover);
          }
        }
      }

      &:focus {
        box-shadow: 0 0 0 var(--focus);
      }

      &:not(.switch) {
        width: 4vh; /* Увеличиваем ширину чекбокса */
        height: 4vh; /* Увеличиваем высоту чекбокса */
        &:after {
          opacity: var(--o, 0);
        }
        &:checked {
          --o: 1;
        }
      }

      & + label {
        font-size: 14px;
        line-height: 21px;
        display: inline-block;
        vertical-align: top;
        cursor: pointer;
        margin-left: 4px;
      }
    }
    input[type='checkbox'] {
      &:not(.switch) {
        border-radius: 7px;
        &:after {
          /* Сохраните этот блок, чтобы настроить стиль галочки, если потребуется */
          left: 50%; /* Центрируем по горизонтали */
          top: 50%; /* Центрируем по вертикали */
          width: 10px; /* Увеличиваем ширину галочки */
          height: 15px; /* Увеличиваем высоту галочки */
          border: 2px solid var(--active-inner);
          border-top: 0;
          border-left: 0;
        }
        &:checked {
          --r: 43deg; /* Угол поворота галочки */
        }
      }
      &.switch {
        width: 38px;
        border-radius: 11px;
        &:after {
          left: 2px;
          top: 2px;
          border-radius: 50%;
          width: 15px;
          height: 15px;
          background: var(--ab, var(--border));
          transform: translateX(var(--x, 0));
        }
        &:checked {
          --ab: var(--active-inner);
          --x: 17px;
        }
        &:disabled {
          &:not(:checked) {
            &:after {
              opacity: .6;
            }
          }
        }
      }
    }
    input[type='radio'] {
      border-radius: 50%;
      &:after {
        width: 19px;
        height: 19px;
        border-radius: 50%;
        background: var(--active-inner);
        opacity: 0;
        transform: scale(var(--s, .7));
      }
      &:checked {
        --s: .5;
      }
    }
}

.checkbox-not-complete,
.checkbox-complete {
    display: flex;
    align-items: center; /* Центрирование по вертикали */
}
 
label.checkbox-not-complete {
    margin-bottom: 0;
}

.checkbox-not-complete input[type='checkbox'],
.checkbox-complete input[type='checkbox'] {
    margin-right: 1vh; /* Отступ между галочкой и текстом */
}

.filters-footer .apply-filters {
    flex: 1;
    min-height: 52px;
    border-radius: 14px;
    border: 0;
    background-color: var(--text-color);
    color: var(--main-bg-color);
    font-family: 'Nunito';
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
}

.task-item {
    background-color: var(--main-bg-color);
    border-radius: 2.5vw;
    padding: 2.5vw;
    margin-top: 3vh;
    box-shadow: 0 0 1.5vw rgba(0,0,0,0.1);
    cursor: pointer;
    color: black;
    margin-left: 5vw;
    margin-right: 5vw;
    border: 4px solid var(--text-color);
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}


.task-item:last-child {
    margin-bottom: 2vh;
}
  
.task-images img:hover {
    transform: scale(1.1);
}

.lightbox-footer {
    position: absolute;
    bottom: 5vh; /* Отступ от нижнего края */
    left: 50%;
    transform: translateX(-50%);
    color: white; /* Цвет текста */
    font-size: 1em; /* Размер шрифта */
    background: rgba(0, 0, 0, 0.5); /* Полупрозрачный фон */
    padding: 1vw 1vh;
    border-radius: 5px; /* Закругление углов */
    font-family: 'Nunito';
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.lightbox-portal,
.lightbox-container {
    z-index: 10001 !important;
}
.lightbox-container {
    background-color: rgba(0, 0, 0, 0.8);
}

.modal-content {
    background: var(--main-bg-color);
    border-radius: 25px 25px 0 0;
    width: 100%;
    max-width: 100%;
    position: absolute;
    height: 95%;
    bottom: 0;
}

.modal-content {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.28) transparent;
}

.modal-content::-webkit-scrollbar {
    width: 6px;
}

.modal-content::-webkit-scrollbar-track {
    background: transparent;
}

.modal-content::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background-color: rgba(0, 0, 0, 0.28);
}

.modal-close {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 2vh;
    right: 3vw;
    border: none;
    font-size: 2em;
    cursor: pointer;
    background-color: var(--text-color);
    color: var(--secondary-bg-color);
    border-radius: 50%;
    width: 48px;
    aspect-ratio: 1 / 1;
    z-index: 1;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    padding: 0;
    line-height: 0;
    font-family: inherit;
}
  
.tasks-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
    color: var(--secondary-text-color);
}

.tasks-loading-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--secondary-bg-color);
    border-top-color: var(--text-color);
    border-radius: 50%;
    animation: task-image-spin 0.8s linear infinite;
    margin-bottom: 12px;
}

.tasks-error {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-color);
}

.tasks-retry-btn {
    margin-top: 12px;
    padding: 8px 20px;
    border: 2px solid var(--text-color);
    border-radius: 8px;
    background: transparent;
    color: var(--text-color);
    font-family: 'Nunito', sans-serif;
    cursor: pointer;
}

/* ===== Детальная модалка задачи (админ) ===== */
.modal-content--task-detail {
    padding-top: 0;
}

.task-detail-media {
    position: relative;
    width: 100%;
    height: 42vh;
    border-radius: 25px 25px 0 0;
    overflow: hidden;
}

.task-detail-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.32s ease;
    touch-action: pan-y;
}

.task-detail-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
}

.task-detail-slide .task-image-loader-wrap {
    width: 100%;
    height: 100%;
}

.task-detail-media .task-main-image {
    border-radius: 0;
    -webkit-user-drag: none;
    user-select: none;
}

.task-detail-photo-count {
    position: absolute;
    top: 2vh;
    right: 3vw;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-family: 'Nunito';
    font-size: 0.9rem;
    font-weight: 700;
    z-index: 2;
}

.task-detail-dots {
    position: absolute;
    bottom: 1.4vh;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 2;
}

.task-detail-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: width 0.2s ease, background 0.2s ease;
}

.task-detail-dot.is-active {
    width: 18px;
    border-radius: 999px;
    background: #fff;
}

.task-detail-title-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 6vh 4vw 2.4vh;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
    z-index: 1;
}

.task-detail-title {
    margin: 0;
    color: #fff;
    font-family: 'Nunito';
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: left;
}

.task-detail-title--plain {
    color: var(--text-color);
}

.task-detail-header-plain {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 8vh 5vw 0;
}

.task-detail-icon-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.task-detail-media .task-detail-icon-actions {
    position: absolute;
    top: 2vh;
    left: 3vw;
    z-index: 3;
}

.task-detail-icon-btn {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease, background 0.15s ease;
}

.task-detail-header-plain .task-detail-icon-btn {
    background: color-mix(in srgb, var(--text-color) 12%, transparent);
    color: var(--text-color);
    box-shadow: none;
}

.task-detail-icon-btn:active {
    transform: scale(0.92);
}

.task-detail-icon-btn--danger {
    background: rgba(229, 72, 77, 0.92);
    color: #fff;
}

.task-detail-header-plain .task-detail-icon-btn--danger {
    background: rgba(229, 72, 77, 0.14);
    color: #e5484d;
}

.task-detail-icon-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.task-detail-label {
    display: block;
    font-family: 'Nunito';
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--secondary-text-color);
    margin-bottom: 4px;
}

.task-detail-text {
    margin: 0;
    font-family: 'Nunito';
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-color);
    text-align: left;
    white-space: pre-wrap;
    word-break: break-word;
}

.task-detail-section .task-detail-text {
    max-height: 22vh;
    overflow-y: auto;
}

.task-detail-meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.task-detail-meta__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--text-color) 6%, transparent);
}

.task-detail-meta__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.task-detail-meta__icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--text-color) 10%, transparent);
    color: var(--text-color);
    font-size: 1.05rem;
    flex-shrink: 0;
}

.task-detail-meta__info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.task-detail-meta__info .task-detail-label {
    margin-bottom: 2px;
}

.task-detail-meta__value {
    font-family: 'Nunito';
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-color);
    text-align: left;
}

.task-detail-review {
    padding: 12px 14px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--text-color) 6%, transparent);
}

.task-detail-review .task-detail-text {
    font-style: italic;
}

.task-image-container {
    position: relative;
    width: 100%;
    height: 45vh;
}

.task-image-loader-wrap {
    position: relative;
    width: 100%;
    height: 100%;
}

.task-image-loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--secondary-bg-color);
    border-radius: 25px 25px 0 0;
    z-index: 1;
}

.task-image-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--secondary-bg-color);
    border-top-color: var(--text-color);
    border-radius: 50%;
    animation: task-image-spin 0.8s linear infinite;
}

@keyframes task-image-spin {
    to { transform: rotate(360deg); }
}
  
.task-main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    border-radius: 25px 25px 0px 0px;
}

.task-title-without-photo-overlay {
    margin-top: 3.5vh;
    font-size: 1.3em;
    color: var(--text-color);
}

.task-title-overlay {
    position: absolute;
    bottom: 2vh;
    left: 2vh;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 1vh 3vw;
    border-radius: 15px;
    font-size: 1.25em;
    text-align: left;
}

.task-title-text {
    margin: 0px;
}
  
.task-assigned {
    display: flex;
    align-items: center;
    margin-top: -2vh;
    margin-left: 2.5vw;
    margin-bottom: 0vh;
}
  
.task-assigned-avatar {
    width: 7vh;
    height: 7vh;
    border-radius: 50%;
    margin-right: 3vw;
}

.task-assigned-text {
    font-size: 1.25em;
    color: var(--text-color);
}
  
.task-deadline {
    font-size: 1em;
    margin-left: 2.5vw;
    text-align: left;
}

.task-deadline-text {
    margin-top: 0px;
}

.form__group {
  position: relative;
  padding: 15px 0 0;
  width: 100%;
}

.form__group textarea {
    width: 100%;
    border: none;
    border-bottom: 2px solid var(--secondary-text-color);
    outline: none;
    font-size: 1.3rem;
    color: black;
    padding: 7px 0;
    background: transparent;
    transition: border-color 0.2s;
    resize: none; /* Отключите изменение размера, если нужно */
}
  
.form__field:focus {
    border-width: 3px;
    border-image: linear-gradient(to right, var(--secondary-text-color), var(--text-color));
    border-image-slice: 1;
}

.modal-content--task-form,
.modal-content--task-form .task-create-form {
  touch-action: manipulation;
}

.modal-content--task-form .form__field,
.modal-content--task-form input,
.modal-content--task-form textarea,
.modal-content--task-form select {
  font-size: 16px !important;
}

.task-form-step-header {
  text-align: center;
}

.task-form-step-title {
  margin: 0 0 6px;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-color);
  font-family: 'Nunito', sans-serif;
}

.task-form-step-hint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--secondary-text-color);
  line-height: 1.35;
}

.form__field {
  font-family: inherit;
  width: 100%;
  border: 0;
  border-bottom: 2px solid var(--secondary-text-color); /* Измените на нужный цвет */
  outline: 0;
  font-size: 16px;
  color: var(--text-color); /* Цвет текста */
  padding: 7px 0;
  background: transparent;
  transition: border-color 0.2s;

  &::placeholder {
    color: transparent; /* Скрыть текст в плейсхолдере */
  }

  &:placeholder-shown ~ .form__label {
    font-size: 1.3rem;
    cursor: text;
    top: 20px; /* Расположение метки при отсутствии текста */
  }
}

.form__label {
  position: absolute;
  top: 0;
  display: block;
  transition: 0.2s;
  font-size: 1rem;
  color: var(--secondary-text-color); /* Цвет метки */
}

.form__field:focus {
  ~ .form__label {
    position: absolute;
    top: -10px; /* Поднимите метку выше при фокусе */
    display: block;
    transition: 0.2s;
    font-size: 1rem;
    color: var(--text-color); /* Цвет метки при фокусе */
    font-weight: 700;    
  }
  padding-bottom: 6px;  
  font-weight: 700;
  border-width: 3px; /* Толщина границы при фокусе */
  border-image: linear-gradient(to right, var(--secondary-text-color), var(--text-color)); /* Градиент границы */
  border-image-slice: 1;
}

/* Сброс стиля для обязательных полей */
.form__field {
  &:required,
  &:invalid { 
    box-shadow: none; 
  }
}

.error-message {
    color: red;
    margin-bottom: 1em;
}

select {
    -webkit-appearance: none; /* Убираем стандартный стиль на macOS и iOS */
    -moz-appearance: none; /* Убираем стандартный стиль на Firefox */
    appearance: none;
}

.select-field {
    -webkit-appearance: none; /* Убираем стандартный стиль для WebKit */
    -moz-appearance: none; /* Убираем стандартный стиль для Firefox */
    appearance: none; /* Убираем стандартный стиль для других браузеров */
    width: 100%;
    border: none;
    border-bottom: 2px solid var(--secondary-text-color);
    outline: none;
    font-size: 1.3rem;
    color: black;
    background: transparent;
    padding: 7px 0 7px 0; /* Установите отступы */
    transition: border-color 0.2s;
    cursor: pointer; /* Указатель при наведении */
}
  
.select-field:focus {
    border-width: 3px;
    border-image: linear-gradient(to right, var(--secondary-text-color), var(--text-color));
    border-image-slice: 1;
}
  

.select-arrow {
    content: '▼'; /* Стрелка для выпадающего списка */
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none; /* Игнорировать события мыши для стрелки */
}

.task-form {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 20px;
}

.task-form .step {
    margin-bottom: 20px;
}

.task-form input[type="text"],
.task-form textarea {
    width: 100%;
    padding: 10px;
    border: 2px solid #007bff; /* Цвет границы */
    border-radius: 5px; /* Скругление углов */
    font-size: 16px; /* Размер шрифта */
}

.task-form input[type="text"]:focus,
.task-form textarea:focus {
    border-color: #0056b3; /* Цвет границы при фокусе */
    outline: none; /* Убираем обводку по умолчанию */
}

.task-form button {
    padding: 10px 15px;
    background-color: var(--color-primary, var(--text-color));
    color: var(--color-on-primary, var(--secondary-bg-color));
    border: none;
    border-radius: 5px; /* Скругление углов */
    font-size: 16px; /* Размер шрифта */
    cursor: pointer;
}

.task-form button:hover {
    background-color: #0056b3; /* Цвет фона кнопки при наведении */
}

.date-time-container {
    display: flex; /* Используем Flexbox */
    justify-content: space-between; /* Распределяем пространство между элементами */
    align-items: center; /* Выравниваем элементы по вертикали */
    gap: 10px;
    margin: 16px auto;
    width: 100%;
    max-width: 360px;
    box-sizing: border-box;
}

.calendar, /* Убедитесь, что у ваших компонентов есть соответствующие классы или используйте селекторы */
.time-picker {
    flex: 1; /* Задаем, чтобы каждый компонент занимал равное пространство */
    margin-right: 10px; /* Отступ между компонентами, можете изменить значение по необходимости */
}

.date-picker-button {
    flex: 1;
    min-width: 0;
    padding: 12px;
    border: 2px solid var(--text-color);
    border-radius: 12px;
    background-color: var(--main-bg-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 1rem;
    font-family: 'Nunito';
    color: var(--text-color);
    box-sizing: border-box;
}
  
.date-picker-button svg {
    width: 20px; /* Устанавливаем ширину иконки */
    height: 20px; /* Устанавливаем высоту иконки */
    fill: currentColor; /* Используем текущий цвет текста */
    color: var(--text-color);
}

.time-picker {
    margin-right: 0; /* Убираем отступ у последнего компонента */
}

.time-picker-button {
    flex: 1;
    min-width: 0;
    padding: 12px;
    border: 2px solid var(--text-color);
    border-radius: 12px;
    background-color: var(--main-bg-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 1rem;
    font-family: 'Nunito';
    color: var(--text-color);
    box-sizing: border-box;
}
  
.time-picker-button svg {
    width: 20px; /* Устанавливаем ширину иконки */
    height: 20px; /* Устанавливаем высоту иконки */
    fill: currentColor; /* Используем текущий цвет текста */
    color: var(--text-color);
}

/* Медиа-запросы для адаптивности */
@media (max-width: 768px) {
    .task-form {
        padding: 15px;
    }

    .task-form input[type="text"],
    .task-form textarea {
        font-size: 14px; /* Уменьшение размера шрифта на мобильных устройствах */
    }

    .task-form button {
        font-size: 14px; /* Уменьшение размера шрифта на мобильных устройствах */
    }
}

@media (max-width: 480px) {
    .task-form {
        padding: 10px;
    }

    .task-form input[type="text"],
    .task-form textarea {
        font-size: 12px; /* Ещё большее уменьшение размера шрифта на маленьких экранах */
    }

    .task-form button {
        font-size: 12px; /* Ещё большее уменьшение размера шрифта на маленьких экранах */
    }
}

ul {
    padding-top: 1vh;
    width: 100%;
    margin: 0;
    padding-left: 0;
}

.back-button, .forward-button {
    font-size: 32px;
    color: rgba(255, 255, 255, 0.4);
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: none;
}

.section-title {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--text-color);
    margin: 20px 0 10px;
    text-align: center;
}

.back-button-completion {
    position: absolute;
    top: 2vh;
    left: 3vw;
    border: none;
    cursor: pointer;
    background-color: var(--text-color);
    color: var(--secondary-bg-color);
    border-radius: 50%; /* Сделать кнопку круглой */
    width: 11vw;
    height: 11vw;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Тень для эстетики */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
  
.modal-back-button .back-icon-completion,
.back-button-completion .back-icon-completion {
    font-size: 1.5rem;
}

.enter-description-text-completion {
    font-size: 1.3em;
    color: var(--text-color);
}

.enter-description-completion {
    width: 90vw;
    height: 10vh;
    max-height: 50vh;
    margin-top: 2vh;
    border: 2px solid var(--text-color);
    border-radius: 2vh;
    font-family: 'Nunito';
    padding: 2vw;
}

.send-completion {
    bottom: 0;
    left: 0;
    position: fixed;
    width: 100%;
    height: 9vh;
    border-radius: 5vh 5vh 0 0;
    border: 0px;
    background-color: var(--text-color);
    color: var(--secondary-bg-color);
    font-family: 'Nunito';
    font-size: 1.15em;
}
  
.image-upload-placeholder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 200px;
    border: 2px dashed #ccc;
    border-radius: 10px;
    cursor: pointer;
}
  
.plus-icon {
    font-size: 40px;
    color: #666;
}
  
.upload-text {
    margin-top: 10px;
    color: #666;
    font-size: 16px;
}
  
.image-preview-wrapper {
    display: flex;
    align-items: center;
    overflow-x: auto;
}
  
.image-scroll-container {
    display: flex;
    gap: 10px;
    overflow-x: scroll;
}
  
.image-preview {
    width: 100px;
    height: 100px;
    border-radius: 5px;
    cursor: pointer;
    object-fit: cover;
}

.form-step-label {
    font-size: 1rem;
    color: var(--text-color);
    margin: 0 0 12px 0;
    padding: 0;
    font-family: 'Nunito';
}

.image-upload-container {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

.task-form-optional-label {
    margin: 4px 0 8px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--secondary-text-color);
    font-family: 'Nunito';
}

.image-upload-dropzone {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 140px;
    padding: 20px 16px;
    margin-bottom: 16px;
    border: 2px dashed var(--secondary-text-color);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    font-family: inherit;
    color: var(--text-color);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.image-upload-dropzone:active {
    background: rgba(255, 255, 255, 0.55);
    border-color: var(--text-color);
}

.image-upload-dropzone-icon {
    font-size: 2rem;
    opacity: 0.85;
}

.image-upload-dropzone-title {
    font-size: 1rem;
    font-weight: 800;
}

.image-upload-dropzone-hint {
    font-size: 0.8rem;
    color: var(--secondary-text-color);
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    overflow-y: auto;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    height: 50vh;
    margin-top: 0;
}
  
.image-item-wrapper {
    position: relative;
}

.image-item {
    position: relative;
    cursor: pointer;
}

.image-delete-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    z-index: 10;
}

.image-delete-btn:hover {
    background: rgba(200, 0, 0, 0.8);
}

.image-delete-btn:active {
    transform: scale(0.95);
}

.image-preview {
    width: 100%; /* Ширина изображения равна ширине контейнера */
    height: auto; /* Автоматическая высота для сохранения пропорций */
    border-radius: 5px; /* Закругление углов изображений */
}

.control-button-container {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 10px 5vw;
    box-sizing: border-box;
}
  
.prev-step, .next-step, .create-task {
    flex: 1;
    padding: 10px;
    border: 3px solid var(--text-color);
    border-radius: 5px;
    background-color: var(--text-color);
    cursor: pointer;
    color: var(--main-bg-color);
    font-size: 1.1em;
    font-weight: bold;
    font-family: 'Nunito';
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.create-task:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}
  
  /* Убираем отступ у последней кнопки */
.next-step {
    margin-right: 0; /* Убираем отступ у последней кнопки */
}
  
  /* Отключаем стили для кнопок в случае их отключения */
.prev-step:disabled, .next-step:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.time--nav {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    margin-top: 2vh;
    margin-bottom: 2vh;
}

.time-selector {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 10px;
}

.time-selector h1 {
    margin: 10px 0;
    font-size: 48px;
}

.time-selector a {
    cursor: pointer;
    font-size: 20px;
    user-select: none;
}

.time-step-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 36px;
    padding: 0;
    margin: 0;
    background-color: var(--text-color);
    color: var(--main-bg-color);
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.time-step-btn svg {
    width: 18px;
    height: 18px;
    color: inherit;
}

.fa, .fas {
    font-size: 18px;
    background-color: var(--text-color);
    color: var(--main-bg-color);
    width: 15vw;
    border-radius: 20%;
    border: 0px;
    height: 4vh;
    line-height: 4vh;
}

.task-success {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 0 8vw;
    text-align: center;
    color: var(--text-color);
    background: var(--color-bg, var(--main-bg-color));
}

.task-success__icon {
    font-size: 64px;
    color: var(--text-color);
    animation: task-success-pop 0.35s ease;
}

@keyframes task-success-pop {
    0% { transform: scale(0.4); opacity: 0; }
    70% { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); }
}

.task-success__text {
    font-size: 1.6rem;
    font-weight: 800;
    font-family: 'Nunito';
}

.task-success__progress {
    width: min(240px, 70%);
    height: 6px;
    border-radius: 999px;
    background-color: rgba(0, 0, 0, 0.1);
    background-color: color-mix(in srgb, var(--text-color) 15%, transparent);
    overflow: hidden;
}

.task-success__progress-fill {
    height: 100%;
    background-color: var(--text-color);
    border-radius: 999px;
    transition: width 0.1s linear;
}

.success-message {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: var(--text-color);
    font-size: 24px;
    font-weight: 600;
}
  
.success-message .icon {
    font-size: 48px;
    margin-bottom: 10px;
    color: var(--text-color);
}

.progress-bar {
    width: 100%;
    height: 5px;
    background-color: #e0e0e0;
    border-radius: 5px;
    margin-top: 10px;
    position: relative;
    overflow: hidden;
}
  
.progress-fill {
    height: 100%;
    background-color: #51d5c2;
    width: 0; /* Начинаем с 0 */
    transition: width 0.1s linear;
}
  
.task-title {
    font-size: 1.5em;
    text-align: center;
    margin-bottom: 0;
    margin-top: 1vh;
    color: var(--text-color);
    padding-left: 4vw;
    padding-right: 8vw;
    width: 100%;
    font-family: 'Nunito';
}

.task-description {
  font-size: 0.9em;
  text-align: left;
  margin-bottom: 2.5vh;
  margin-top: 4vh;
  color: var(--text-color);
  padding-left: 4vw;
  padding-right: 8vw;
  width: 100%;
}

/* Описание задачи — шрифт меньше заголовка, полная обводка со всех сторон */
.form__group.task-description textarea {
  font-size: 0.9rem !important;
  min-height: 5.5em;
  border: 2px solid var(--secondary-text-color) !important;
  border-radius: 8px;
  padding: 10px 12px;
  resize: vertical;
  outline: none;
}

.form__group.task-description textarea:focus {
  border: 2px solid var(--text-color) !important;
  border-image: none !important;
}

/* Метка «Описание задачи» — всегда сверху блока, без анимации перетекания */
.form__group.task-description {
  padding-top: 0;
}

.form__group.task-description .form__label {
  position: static;
  display: block;
  margin-bottom: 8px;
  font-size: 0.95rem;
  color: var(--secondary-text-color);
  font-family: 'Nunito';
  transition: none;
}

.modal-task-detail {
    overflow-y: auto;
    padding: 18px 5vw 16vh;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.modal-task-description {
    text-align: left;
    margin-top: 3vh;
    color: var(--text-color);
    margin-left: 2.5vw;
    font-size: 1em;
    max-height: 21vh;
    overflow-y: auto;
    padding-right: 1.5vh;
    margin-right: 2.5vh;
    box-sizing: content-box;
}

.modal-task-description::-webkit-scrollbar {
    width: 8px;
}

.modal-task-description::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
}

.modal-task-description::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

.modal-task-description::-webkit-scrollbar-track {
    background-color: transparent;
}

.task-description-text {
    margin-top: 0vh;
}

.task-divider {
    background-color: var(--text-color);
    border-radius: 20px;
    height: 0.35vh;
}

.task-footer {
    display: flex;
    justify-content: space-between;
    font-size: 0.8em;
}

.task-assigned-to, .task-due-date {
    color: var(--secondary-text-color);
    margin-bottom: 0vh;
    margin-top: 2vh;
}

.checkboxes-block {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.calendar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1100;
    text-align: left;
}

.hidden {
    display: none;
}

.calendar {
    position: relative;
    z-index: 2;
    background-color: var(--secondary-bg-color);
}  

.hidden {
    display: none;
}

#calendar-inner-container {
    z-index: 101;
    padding: 0;
}

.filters {
    margin-bottom: 20px;
}

.filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    width: 100%;
}

#date-range-display, #selected-members-display {
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    flex-shrink: 0; 
    vertical-align: middle;
}

#open-calendar-btn {
    padding: 10px 20px;
    cursor: pointer;
    border: 2px solid black;
    border-radius: 25px;
    width: 100%;
}

#open-calendar-btn img {
    width: 24px;
    height: 24px;
    object-fit: contain; /* Масштабирование иконки без потери пропорций */
    vertical-align: middle;
}

#open-member-select-btn {
    padding: 10px 20px;
    cursor: pointer;
    border: 2px solid black;
    border-radius: 25px;
    width: 100%;
}

#open-member-select-btn img {
    width: 24px;
    height: 24px;
    object-fit: contain; /* Масштабирование иконки без потери пропорций */
    vertical-align: middle;
}

.calendar-overlay .calendar,
#calendar-inner-container .calendar {
    margin: 0;
}

.calendar {
    background-color: #f8f7fa;
    color: #333;
    width: 360px;
    padding: 15px;
    box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    overflow: hidden;
}

.calendar--nav {
    margin: -15px -15px 15px;
    padding: 0 15px;
    color: var(--secondary-bg-color);
    height: 70px;
    position: relative;
    background-color: var(--text-color);
}

.calendar--nav a {
    position: absolute;
    cursor: pointer;
    left: 10px;
    font-size: 32px;
    line-height: 1;
    top: 16px;
    width: 30px;
    text-align: center;
    display: inline-block;
    color: var(--secondary-bg-color);
    -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.calendar--nav a:hover {
    color: #fff;
}

.calendar--nav a:last-child {
    left: auto;
    right: 10px;
}

.calendar--nav h1 {
    margin: 0;
    position: absolute;
    left: 40px;
    right: 40px;
    text-align: center;
    cursor: pointer;
    font-weight: 400;
    font-size: 30px;
    line-height: 66px;
    -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.calendar--nav small {
    font-weight: 300;
    font-size: 60%;
}

.calendar--days {
    font-size: 0;
}

.calendar--days span {
    width: 14.28571%;
    display: inline-block;
    text-align: center;
    -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    cursor: pointer;
    margin: 8px 0;
    line-height: 34px;
    position: relative;
    font-size: 16px;
}

.calendar--days span.label {
    text-transform: uppercase;
    font-weight: 700;
    color: #333;
    font-size: 14px;
    cursor: initial;
}

.calendar--days span.active {
    font-weight: 700;
    background-color: rgba(182, 112, 244, 0.05);
    border-radius: 12px;
}

.calendar--days span.muted {
    color: rgba(0, 0, 0, 0.3);
}

.calendar--days span.selected {
    background-color: var(--text-color);
    color: var(--secondary-bg-color);
    border-radius: 12px;
}

.calendar--days span.between {
    border-radius: 0;
}

.calendar--days span.start, .calendar--days span.between, .calendar--days span.end {
    background-color: var(--text-color);
    color: var(--secondary-bg-color);
}

.calendar--days span.start {
    border-radius: 12px 0 0 12px;
}

.calendar--days span.end {
    border-radius: 0 12px 12px 0;
}

.calendar--days span.start.end {
    border-radius: 12px;
}

.calendar--days span.between:nth-child(7n):after, .calendar--days span.start:nth-child(7n):after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    background-color: var(--text-color);
    width: 20px;
}

.calendar--days span.between:nth-child(7n+1):after, .calendar--days span.end:nth-child(7n+1):after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    background-color: var(--text-color);
    width: 20px;
}

.calendar--days span.start.end:after {
    display: none;
}

.apply-btn {
    margin: 15px -15px -15px;
    padding: 0 15px;
    background-color: var(--text-color);
    color: var(--secondary-bg-color);
    height: 70px;
    position: relative;
    width: 110%;
    font-size: 20px;
    border: 0px;
    font-weight: bold;
    cursor: pointer;
    bottom: 0;
}

.no-tasks {
    margin-top: 5vh;
    font-size: 1.2rem;
}

.completion-button {
    bottom: 0;
    left: 0;
    position: fixed;
    width: 100%;
    height: 9vh;
    border-radius: 5vh 5vh 0 0;
    border: 0px;
    background-color: var(--text-color);
    color: var(--secondary-bg-color);
    font-family: 'Nunito';
    font-size: 1.15em;
}

.description-moderation-task {
    width: 95vw;
    border-radius: 15px;
    padding: 2vw;
    height: 12vh;
    font-family: 'Nunito';
    border: 2px solid var(--text-color);
}

.decline-task, .accept-task, .decline-report-task, .send-report-task {
    bottom: 1vh;
    position: fixed;
    width: calc(50% - 1.5vh);
    height: 9vh;
    border-radius: 3vh 3vh 3vh 3vh;
    border: 0px;
    background-color: var(--text-color);
    color: var(--secondary-bg-color);
    font-family: 'Nunito';
    font-size: 1.15em;
}

.decline-task, .decline-report-task {
    left: 1vh;
}

.accept-task, .send-report-task {
    right: 1vh;
}

.review-description-block {
    text-align: left;
    margin-left: 2.5vw;
}

.review-description {
    font-size: 1.25em;
    color: var(--text-color);
    margin-top: 4vh;
    margin-bottom: 1vh;
}

.review-description-text {
    margin-top: 2vh;
}

.modal-back-button {
    position: absolute;
    top: 2vh;
    left: 3vw;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    background-color: var(--text-color);
    color: var(--secondary-bg-color);
    border-radius: 25px;
    width: 11vw;
    height: 11vw;
    z-index: 1;
    line-height: 0.75em;
}

.reason-text {
    font-size: 1.5em;
    color: var(--text-color);
    margin-top: 2.75vh;
}

/* ===== Дружелюбное пустое состояние ===== */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12vh 8vw;
    text-align: center;
    color: var(--text-color);
}
.empty-state__icon {
    width: 84px;
    height: 84px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background: var(--secondary-bg-color);
    color: var(--secondary-text-color);
    margin-bottom: 4px;
}
.empty-state__title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
}
.empty-state__hint {
    font-size: 0.95rem;
    color: var(--secondary-text-color);
    margin: 0;
    max-width: 36ch;
    line-height: 1.4;
}
.empty-state__action {
    margin-top: 10px;
    padding: 12px 22px;
    border: none;
    border-radius: 14px;
    background: var(--accent-color, var(--text-color));
    color: var(--accent-contrast-color, var(--main-bg-color));
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    min-height: 44px;
}
.empty-state__action:active {
    transform: scale(0.98);
}

/* ===== Скелетоны загрузки ===== */
.skeleton-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 8px 5vw;
}
.skeleton-card {
    border-radius: 16px;
    padding: 16px;
    background: var(--secondary-bg-color);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.skeleton-line,
.skeleton-avatar {
    background: linear-gradient(
        90deg,
        rgba(127, 127, 127, 0.12) 25%,
        rgba(127, 127, 127, 0.22) 37%,
        rgba(127, 127, 127, 0.12) 63%
    );
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.4s ease infinite;
    border-radius: 8px;
}
.skeleton-line--title { height: 16px; width: 60%; }
.skeleton-line--text { height: 12px; width: 90%; }
.skeleton-line--meta { height: 12px; width: 40%; }
.skeleton-row { display: flex; align-items: center; gap: 10px; }
.skeleton-avatar { width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto; }
@keyframes skeleton-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ===== Экран ошибки (ErrorBoundary) ===== */
.app-error-screen {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8vw;
    text-align: center;
    color: var(--text-color);
    background: var(--main-bg-color);
}
.app-error-emoji { font-size: 3rem; }
.app-error-title { font-size: 1.3rem; font-weight: 800; margin: 0; }
.app-error-text {
    font-size: 1rem;
    color: var(--secondary-text-color);
    margin: 0;
    max-width: 40ch;
    line-height: 1.4;
}
.app-error-btn {
    margin-top: 12px;
    padding: 12px 26px;
    border: none;
    border-radius: 14px;
    background: var(--accent-color, var(--text-color));
    color: var(--accent-contrast-color, var(--main-bg-color));
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    min-height: 44px;
}

/* ===== Доступность ===== */
/* Видимый фокус для клавиатурной навигации. */
.empty-state__action:focus-visible,
.app-error-btn:focus-visible,
.tasks-retry-btn:focus-visible {
    outline: 3px solid var(--accent-color, var(--text-color));
    outline-offset: 2px;
}

/* Уважаем системную настройку «уменьшить движение». */
@media (prefers-reduced-motion: reduce) {
    .skeleton-line,
    .skeleton-avatar,
    .loader-spinner,
    .task-image-spinner {
        animation: none !important;
    }
    * {
        scroll-behavior: auto !important;
    }
}
.report-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    min-height: 100%;
    box-sizing: border-box;
    padding-left: var(--page-horizontal-padding, max(5%, 16px));
    padding-right: var(--page-horizontal-padding, max(5%, 16px));
    padding-bottom: var(--space-4, 16px);
}

.report-page-header {
    margin-bottom: var(--space-3, 12px);
}

.report-period-presets {
    display: flex;
    gap: var(--space-2, 8px);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 0 var(--space-3, 12px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.report-period-presets::-webkit-scrollbar {
    display: none;
}

.report-preset-chip {
    flex-shrink: 0;
    padding: 8px 14px;
    border-radius: 999px;
    border: 2px solid var(--text-color);
    background-color: transparent;
    color: var(--text-color);
    font-family: 'Nunito';
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.report-preset-chip:active {
    transform: scale(0.96);
}

.report-preset-chip--active {
    background-color: var(--text-color);
    color: var(--main-bg-color);
}

.report-calendar-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-3, 12px);
    padding: 0 0 var(--space-4, 16px);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.report-calendar-button {
    background-color: var(--text-color);
    color: var(--secondary-bg-color);
    border: none;
    border-radius: 3.25vw;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: 0;
    flex-shrink: 0;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}

.report-picked-period {
    flex: 1;
    min-width: 0;
}

.report-picked-period {
    color: var(--text-color);
    margin: 0;
}

.report-choose-parameters {
    width: 100%;
    padding: 0;
    margin-bottom: var(--space-3, 12px);
}

.report-container .report-select {
    width: 100%;
    margin-bottom: var(--space-3, 12px);
}

ul {
    padding-top: 1vh;
    width: 100%;
    margin: 0;
    padding-left: 0;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: var(--main-bg-color);
    border-radius: 25px 25px 0 0;
    width: 100%;
    max-width: 100%;
    position: absolute;
    height: 95%;
    bottom: 0;
}

.modal-content.modal-content--report {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: var(--app-content-padding-top);
    padding-left: 0;
    padding-right: 0;
    padding-bottom: calc(var(--space-4, 16px) + var(--tg-safe-bottom, 0px));
    box-sizing: border-box;
}

.modal-report-overview {
    display: flex;
    flex-direction: column;
    gap: 2.5vh;
    width: 100%;
    box-sizing: border-box;
}

.modal-report-section {
    width: 100%;
    box-sizing: border-box;
}

.modal-report-section .modal-title {
    margin-top: 0;
}

.modal-report-task-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

.modal-content {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.28) transparent;
}

.modal-content::-webkit-scrollbar {
    width: 6px;
}

.modal-content::-webkit-scrollbar-track {
    background: transparent;
}

.modal-content::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background-color: rgba(0, 0, 0, 0.28);
}

.modal-close {
    position: absolute;
    top: 2vh;
    right: 3vw;
    border: none;
    font-size: 2.2em;
    cursor: pointer;
    background-color: var(--text-color);
    color: var(--secondary-bg-color);
    border-radius: 25px;
    width: 11vw;
    height: 11vw;
    z-index: 1;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.modal-back-button {
    position: absolute;
    top: 2vh;
    left: 3vw;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    background-color: var(--text-color);
    color: var(--secondary-bg-color);
    border-radius: 50%;
    width: 11vw;
    height: 11vw;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.back-icon-completion {
    font-size: 0.6em;
}

.modal-title {
    text-align: center;
    color: var(--text-color);
    font-size: 1.3rem;
    margin-top: 2.5vh;
}

.modal-task-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
    width: 100%;
}

.modal-task-details {
    background-color: var(--main-bg-color);
    padding: 2.5vw;
    margin-bottom: 0;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    border: 3px solid var(--text-color);
    width: 100%;
    box-sizing: border-box;
}

.modal-task-title {
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    color: var(--text-color);
    margin-bottom: 2vh;
    margin-top: 2vh;
}

.modal-task-description {
    font-size: 0.9em;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--text-color);
}

.task-divider {
    background-color: var(--text-color);
    border-radius: 20px;
    height: 0.35vh;
}

.modal-task-dates {
    display: flex;
    flex-direction: column;
    font-size: 0.8em;
    color: var(--text-color);
    margin-top: 1vh;
    margin-bottom: 3vh;
    gap: 0.5vh;
}

.modal-task-create-date,
.modal-task-deadline-date {
    display: block;
    margin: 0;
}

.modal-task-status {
    font-size: 0.9em;
    font-weight: bold;
    color: var(--text-color);
    text-align: center;
    margin-top: 1vh;
}

.completed-date {
    color: var(--text-color);
    font-size: 0.9em;
    font-weight: normal;
    margin-left: 1vw;
}


.modal-graphs {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.modal-graphs-subtitle {
    font-size: 1.1rem;
    text-align: center;
    color: var(--text-color);
    margin-bottom: 2vh;
    font-weight: bold;
}

.modal-week-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
    width: 100%;
}

.modal-week-nav__label {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--text-color);
}

.recharts-wrapper {
    margin-left: 0;
    width: 100% !important;
}

.recharts-legend-wrapper {
    margin-left: 0;
    bottom: -1vh;
}

/* Кастомный тултип графика */
.chart-tooltip {
    background-color: var(--main-bg-color);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
    font-family: 'Nunito';
    min-width: 120px;
}

.chart-tooltip__date {
    margin: 0 0 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-color);
}

.chart-tooltip__row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-color);
    margin-top: 4px;
}

.chart-tooltip__dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

.chart-tooltip__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chart-tooltip__value {
    font-weight: 700;
}

/* Кастомная легенда графика */
.chart-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 16px;
    margin-top: 12px;
    width: 100%;
}

.chart-legend__item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.chart-legend__dot {
    width: 12px;
    height: 12px;
    border-radius: 4px;
    flex-shrink: 0;
}

.chart-legend__label {
    font-family: 'Nunito';
    font-size: 0.85rem;
    color: var(--secondary-text-color);
}

.previous-week-navigation-button, .next-week-navigation-button {
    color: var(--main-bg-color);
    background-color: var(--text-color);
    font-family: 'Nunito';
    font-size: 2rem;
    height: 8vh;
    width: 7vh;
    border-radius: 15px;
    border: 0;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    line-height: 7vh;
}

.previous-week-navigation-button,
.next-week-navigation-button {
    margin: 0;
}
.settings-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
    box-sizing: border-box;
    padding-left: var(--page-horizontal-padding, max(5%, 16px));
    padding-right: var(--page-horizontal-padding, max(5%, 16px));
    padding-bottom: var(--space-4, 16px);
}

.settings-page-header {
    margin-bottom: var(--space-2, 8px);
}

.settings-section {
    margin: var(--space-4, 16px) 0 0;
    background: var(--main-bg-color);
    border: 2px solid var(--text-color);
    border-radius: 12px;
    color: var(--text-color);
    overflow: hidden;
}

.settings-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 16px;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left;
    font-family: 'Nunito', sans-serif;
}

.settings-section-header-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding-right: 12px;
}

.settings-section-title {
    font-size: 1.05rem;
    font-weight: 700;
}

.settings-section-subtitle {
    font-size: 0.85rem;
    color: var(--secondary-text-color);
    font-weight: 400;
}

.settings-section-chevron {
    flex-shrink: 0;
    font-size: 0.85rem;
    transition: transform 0.2s ease;
}

.settings-section--open .settings-section-chevron {
    transform: rotate(180deg);
}

.settings-section-body {
    padding: 0 16px 16px;
    border-top: 1px solid var(--secondary-text-color);
    padding-top: 16px;
}

.settings-team-block {
    margin: var(--space-6, 24px) 0;
    padding: 16px;
    background: var(--main-bg-color);
    border: 2px solid var(--text-color);
    border-radius: 12px;
    color: var(--text-color);
}

.settings-profile-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}

.settings-profile-info {
    min-width: 0;
    text-align: left;
}

.settings-profile-name {
    margin: 0 0 4px;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-color);
}

.settings-profile-position {
    margin: 0 0 6px;
    font-size: 0.9rem;
    color: var(--secondary-text-color);
}

.settings-profile-hint {
    margin: 0;
    font-size: 0.8rem;
    color: var(--secondary-text-color);
    line-height: 1.35;
}

.settings-user-photo-wrap {
    position: relative;
    width: 72px;
    height: 72px;
    min-width: 72px;
    min-height: 72px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--text-color);
    cursor: pointer;
    flex-shrink: 0;
}

.settings-user-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.settings-user-photo-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.settings-user-photo-overlay svg {
    width: 1.2em;
    height: 1.2em;
}

.settings-user-photo-wrap:hover .settings-user-photo-overlay,
.settings-user-photo-wrap:focus-visible .settings-user-photo-overlay {
    opacity: 1;
}

.settings-team-photo-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.settings-team-photo-wrap {
    position: relative;
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    max-width: 56px;
    max-height: 56px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid var(--text-color);
    cursor: pointer;
    flex-shrink: 0;
}

.settings-team-photo {
    display: block;
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    max-width: 56px;
    max-height: 56px;
    object-fit: cover;
}

.settings-team-photo-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.settings-team-photo-overlay svg {
    width: 1.2em;
    height: 1.2em;
}

.settings-team-photo-wrap:hover .settings-team-photo-overlay {
    opacity: 1;
}

.settings-delete-photo {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid var(--text-color);
    border-radius: 8px;
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-delete-photo:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.settings-timezone-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.95rem;
    color: var(--text-color);
}

.settings-timezone-select {
    cursor: pointer;
}

.settings-team-input {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    margin-bottom: 12px;
    border: 2px solid var(--text-color);
    border-radius: 8px;
    font-size: 1rem;
    font-family: 'Nunito';
    background: var(--main-bg-color);
    color: var(--text-color);
    box-sizing: border-box;
}

.settings-team-textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border: 2px solid var(--text-color);
    border-radius: 8px;
    font-size: 1rem;
    font-family: 'Nunito';
    background: var(--main-bg-color);
    color: var(--text-color);
    resize: vertical;
    min-height: 72px;
    box-sizing: border-box;
}

.settings-save-team {
    padding: 10px 20px;
    border: 2px solid var(--text-color);
    border-radius: 8px;
    background: var(--text-color);
    color: var(--main-bg-color);
    font-size: 0.95rem;
    font-family: 'Nunito';
    font-weight: 600;
    cursor: pointer;
}

.settings-save-team:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.settings-invite-block {
    margin: 0 0 var(--space-6, 24px);
    padding: 16px;
    background: var(--main-bg-color);
    border: 2px solid var(--text-color);
    border-radius: 12px;
    color: var(--text-color);
}

.settings-block-label {
    font-size: 1.1rem;
    font-weight: bold;
    margin: 0 0 8px;
}

.settings-block-description {
    font-size: 0.9rem;
    color: var(--secondary-text-color);
    margin: 0 0 12px;
}

.settings-code-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-code-input {
    flex: 1;
    height: 44px;
    padding: 0 12px;
    border: 2px solid var(--text-color);
    border-radius: 8px;
    font-size: 1rem;
    font-family: 'Nunito';
    background: var(--main-bg-color);
    color: var(--text-color);
}

.settings-copy-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid var(--text-color);
    border-radius: 8px;
    background: var(--text-color);
    color: var(--main-bg-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-copy-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.settings-refresh-code {
    margin-top: 12px;
    padding: 8px 16px;
    border: 2px solid var(--text-color);
    border-radius: 8px;
    background: transparent;
    color: var(--text-color);
    font-size: 0.95rem;
    font-family: 'Nunito';
    cursor: pointer;
}

.settings-retry-code {
    margin-top: 8px;
    padding: 8px 16px;
    border: 2px solid var(--text-color);
    border-radius: 8px;
    background: transparent;
    color: var(--text-color);
    font-size: 0.95rem;
    font-family: 'Nunito';
    cursor: pointer;
}

.settings-switch-team-wrap {
    margin: var(--space-6, 24px) 0 0;
}

.settings-switch-team {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--text-color);
    border-radius: 12px;
    background: transparent;
    color: var(--text-color);
    font-size: 0.95rem;
    font-family: 'Nunito';
    font-weight: 700;
    cursor: pointer;
}

.settings-invite-hint {
    margin: 12px 0 0;
    font-size: 0.82rem;
    color: var(--secondary-text-color);
    line-height: 1.4;
}

.settings-code-loading,
.settings-code-error {
    margin: 0;
    font-size: 0.95rem;
}

.settings-code-error {
    color: #c0392b;
}

.themes-container {
    padding: 0;
}

.themes-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.theme-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.2s;
    position: relative; /* Обязательно для позиционирования псевдоэлемента */
}

.theme-item--active:after {
    content: "✓";
    position: absolute;
    top: -0.6rem;
    right: -0.6rem;
    height: 1.6rem;
    width: 1.6rem;
    background: var(--text-color);
    border-radius: 999px;
    color: var(--main-bg-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.theme-item:hover {
    transform: scale(1.05);
}

.color-blocks {
    display: flex;
    margin-bottom: 2vh;
}

.color-block {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--text-color);
}

.color-block:not(:first-child) {
    margin-left: -4vw;
}

.theme-name {
    font-size: 14px;
    margin-top: 2vh;
    margin-bottom: 2vh;
    font-weight: bold;
    text-align: center;
}
.teams-list-page {
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, var(--color-bg, var(--main-bg-color)) 0%, var(--secondary-bg-color) 100%);
  font-family: var(--font-family, 'Nunito', sans-serif);
  padding: var(--app-content-padding-top) var(--page-horizontal-padding, max(5%, 16px)) var(--tg-safe-bottom, 0px);
  color: var(--color-on-surface, var(--text-color));
  box-sizing: border-box;
  overflow: hidden;
}

.teams-list-loading {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4, 16px);
  color: var(--secondary-text-color, #64748b);
}
.teams-list-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--secondary-bg-color, #e2e8f0);
  border-top-color: var(--text-color, #3b82f6);
  border-radius: 50%;
  animation: teams-list-spin 0.8s linear infinite;
}
@keyframes teams-list-spin {
  to { transform: rotate(360deg); }
}

.teams-list-header {
  flex-shrink: 0;
  padding: var(--space-2, 8px) 0 var(--space-4, 16px);
  text-align: center;
}
.teams-list-logo {
  display: block;
  width: min(200px, 62vw);
  height: auto;
  margin: 0 auto;
}
.teams-list-title {
  margin: 0;
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 800;
  color: var(--text-color);
  letter-spacing: -0.02em;
}
.teams-list-subtitle {
  margin: var(--space-2, 8px) 0 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--secondary-text-color);
}

.teams-list-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: var(--space-2, 8px) 0;
}

.teams-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-4, 16px);
  max-width: 400px;
  margin: 0 auto;
  padding-bottom: var(--space-2, 8px);
}

.teams-list-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-5, 20px) var(--space-3, 12px);
  background: rgba(255, 255, 255, 0.85);
  border: 2px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-lg, 16px);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  font-family: inherit;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.teams-list-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border-color: var(--secondary-text-color, rgba(59, 130, 246, 0.3));
}
.teams-list-card:active {
  transform: translateY(0);
}

.teams-list-card-avatar-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}
.teams-list-card-avatar {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg, 16px);
  object-fit: cover;
  background: var(--secondary-bg-color);
}
.teams-list-card-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  background: var(--text-color);
  color: var(--main-bg-color);
  border-radius: 6px;
  text-transform: uppercase;
}
.teams-list-card-name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-color);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Панель кнопок — в потоке flex, не fixed (без двойных отступов) */
.teams-list-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  padding: var(--space-4, 16px) 0 var(--space-2, 8px);
  box-sizing: border-box;
}

.teams-list-actions-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  max-width: 320px;
  margin: 0 auto;
  width: 100%;
}

.teams-list-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  border-radius: var(--radius-md, 12px);
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.teams-list-btn:active {
  transform: scale(0.98);
}

.teams-list-btn--primary {
  background: var(--text-color);
  color: var(--main-bg-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.teams-list-btn--primary:hover {
  opacity: 0.92;
}

.teams-list-btn--secondary {
  background: transparent;
  color: var(--text-color);
  border: 2px solid var(--text-color);
}
.teams-list-btn--secondary:hover {
  background: rgba(0, 0, 0, 0.04);
}

.teams-list-btn-icon {
  font-size: 1.4rem;
  line-height: 1;
  font-weight: 800;
}

.welcome-page {
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: var(--app-content-padding-top);
    padding-bottom: var(--app-content-padding-bottom);
    padding-left: max(4vw, var(--tg-safe-left));
    padding-right: max(4vw, var(--tg-safe-right));
    box-sizing: border-box;
    background: linear-gradient(135deg, var(--color-bg, var(--main-bg-color)), var(--secondary-bg-color));
    background-size: 200% 200%;
    animation: gradientAnimation 6s ease infinite;
    font-family: var(--font-family, 'Nunito');
}

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

@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

#root {
    width: 100%;
    z-index: 1;
    top: 0;
    position: absolute;
    font-family: 'Nunito';
}

.type-js {
    display: inline-block;
    position: relative;
    padding-left: 4vw;
    height: 7vh;
}

.text-js {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--text-color);
}

.cursor {
    display: inline-block;
    position: absolute;
    height: 90%;
    top: 30%;
    right: -5px;
    width: 2px;
    background-color: var(--text-color);
    animation: flash 0.5s step-start infinite;
}

.cursor.hidden {
    visibility: hidden;
}

@keyframes flash {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes blink-caret {
    0%, 50% {
        border-color: var(--text-color);
    }
    100% {
        border-color: transparent;
    }
}

.welcome-slogan {
    padding-left: 4vw;
    margin-top: 1vh;
    color: var(--text-color);
    font-size: 1.1em;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.5s ease-out 1.5s forwards;
}

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

.admin-description {
    color: var(--text-color);
    width: 95vw;
    font-size: 1.1em;
}

.executor-description {
    color: var(--text-color);
    width: 95vw;
    font-size: 1.1em;
}

.choose {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: var(--space-6, 24px);
}

.button-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 4vh;
}

.button-description {
    font-size: 1.2em;
    color: var(--text-color);
    margin-bottom: 1vh;
    text-align: center;
}

.create-team-button, .join-exist-team {
    background-color: var(--text-color);
    border-radius: 6.5vw;
    color: var(--secondary-bg-color);
    width: 95vw;
    height: 10vh;
    font-size: 1.3em;
    font-family: 'Nunito';
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease, background-color 0.3s ease;
    border: 2px solid var(--text-color);
}

.arrow {
    padding-top: 0.5vh;
    font-family: inherit;
    font-size: 1.5em;
    margin-left: 0.5em;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
}
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--main-bg-color); /* Фон загрузочного экрана */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  z-index: 9999; /* Убедитесь, что загрузочный экран поверх всего */
}

.loading-logo {
  position: relative;
  z-index: 1;
  width: min(220px, 72vw);
  height: auto;
  margin-bottom: 20px;
  animation: fadeIn 3s ease-in-out;
}

.loading-text {
  position: relative;
  font-family: 'Nunito';
  font-size: 3em;
  font-weight: bold;
  z-index: 1; /* Поверх иконок */
  color: var(--text-color);
  margin-bottom: 20px;
  animation: fadeIn 3s ease-in-out;
}

.loading-icon {
    position: absolute;
    font-size: 2em;
    color: var(--text-color);
    animation: rotate 20s linear infinite, pulse 3s ease-in-out infinite; /* Пульсация длится 3 секунды */
    opacity: 0.3; /* Больше прозрачности */
}

/* Анимация пульсации */
@keyframes pulse {
    0% {
      transform: scale(1);
      opacity: 0.3;
    }
    30% {
      transform: scale(1.2);
      opacity: 0.6;
    }
    100% {
      transform: scale(1);
      opacity: 0.3;
    }
  }

/* Анимация вращения иконок */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Анимация появления текста */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Дополнительные медиазапросы для адаптивности */
@media (max-width: 768px) {
  .loading-logo {
    width: min(180px, 68vw);
  }

  .loading-text {
    font-size: 2em;
  }

  .loading-icon {
    font-size: 1.25em;
  }
}

@media (max-width: 480px) {
  .loading-text {
    font-size: 2em;
  }

  .loading-icon {
    font-size: 1.25em;
  }
}

.onboarding-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-top: var(--app-content-padding-top);
  padding-bottom: calc(var(--app-content-padding-bottom) + var(--space-6));
  padding-left: max(var(--tg-safe-left), var(--space-4));
  padding-right: max(var(--tg-safe-right), var(--space-4));
  box-sizing: border-box;
  background: linear-gradient(
    165deg,
    var(--color-bg) 0%,
    var(--secondary-bg-color) 100%
  );
  font-family: var(--font-family);
  color: var(--color-on-surface);
}

.onboarding-page__inner {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.onboarding-steps {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-on-surface-muted);
}

.onboarding-steps__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
}

.onboarding-steps__dot--active {
  background: var(--color-primary);
  width: 20px;
}

.onboarding-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-6) var(--space-5);
  flex: 1;
}

.onboarding-title {
  margin: 0 0 var(--space-2);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-on-surface);
}

.onboarding-subtitle {
  margin: 0 0 var(--space-5);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-on-surface-muted);
}

.onboarding-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.onboarding-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: left;
}

.onboarding-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-on-surface);
}

.onboarding-input {
  width: 100%;
  padding: 14px var(--space-4);
  border-radius: var(--radius-md);
  border: 2px solid var(--color-border);
  background: var(--color-surface-solid);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-on-surface);
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}

.onboarding-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.onboarding-input--pill {
  border-radius: var(--radius-pill);
  text-align: center;
}

.onboarding-input[readonly] {
  background: var(--color-bg-muted);
  opacity: 0.9;
}

.onboarding-input--error {
  border-color: var(--color-error);
}

.onboarding-btn-primary {
  width: 100%;
  min-height: 52px;
  margin-top: var(--space-2);
  padding: 14px var(--space-4);
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.onboarding-btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.onboarding-footer {
  margin-top: auto;
  padding-top: var(--space-5);
}

.onboarding-error {
  color: var(--color-error);
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0;
}

.onboarding-photo-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.onboarding-photo-wrap {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 3px solid var(--color-primary);
  cursor: pointer;
  background: var(--secondary-bg-color);
}

.onboarding-photo-wrap--round {
  border-radius: var(--radius-pill);
}

.onboarding-photo-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.onboarding-photo-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 1.75rem;
  font-weight: 800;
  opacity: 0;
  transition: opacity 0.2s;
}

.onboarding-photo-wrap:hover .onboarding-photo-overlay,
.onboarding-photo-wrap:focus-within .onboarding-photo-overlay {
  opacity: 1;
}

.onboarding-photo-hint {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-on-surface-muted);
}

.onboarding-role-badge {
  display: inline-block;
  padding: 10px var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-bg-muted);
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
}

/* Fallback «Назад» только вне Telegram */
.onboarding-fallback-back {
  align-self: flex-start;
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: none;
  background: transparent;
  color: var(--color-on-surface);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}

.onboarding-fallback-back:active {
  opacity: 0.7;
}

.superadmin-page {
  min-height: 100vh;
  padding: var(--page-horizontal-padding);
  padding-bottom: calc(var(--tab-menu-clearance) + 16px);
  background: var(--main-bg-color);
  color: var(--text-color);
  font-family: Nunito, sans-serif;
}

.superadmin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.superadmin-title {
  font-size: 1.4rem;
  font-weight: 800;
  margin: 0;
}

.superadmin-back {
  border: 2px solid var(--text-color);
  background: transparent;
  color: var(--text-color);
  border-radius: 10px;
  padding: 8px 14px;
  cursor: pointer;
  font-family: inherit;
}

.superadmin-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.superadmin-stat-card {
  border: 2px solid var(--text-color);
  border-radius: 12px;
  padding: 12px;
  background: var(--secondary-bg-color);
}

.superadmin-stat-value {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
}

.superadmin-stat-label {
  font-size: 0.85rem;
  opacity: 0.85;
  margin-top: 4px;
}

.superadmin-section {
  border: 2px solid var(--text-color);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 16px;
  background: var(--main-bg-color);
}

.superadmin-section-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 12px;
}

.superadmin-hint {
  font-size: 0.9rem;
  opacity: 0.85;
  margin: 0 0 12px;
  line-height: 1.4;
}

.superadmin-form-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.superadmin-input,
.superadmin-select {
  width: 100%;
  height: 42px;
  border: 2px solid var(--text-color);
  border-radius: 8px;
  padding: 0 12px;
  background: var(--main-bg-color);
  color: var(--text-color);
  font-family: inherit;
  box-sizing: border-box;
}

.superadmin-btn {
  border: 2px solid var(--text-color);
  border-radius: 10px;
  padding: 10px 14px;
  background: var(--text-color);
  color: var(--main-bg-color);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
}

.superadmin-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.superadmin-btn--ghost {
  background: transparent;
  color: var(--text-color);
}

.superadmin-table-wrap {
  overflow-x: auto;
}

.superadmin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.superadmin-table th,
.superadmin-table td {
  border-bottom: 1px solid color-mix(in srgb, var(--text-color) 25%, transparent);
  padding: 8px 6px;
  text-align: left;
  vertical-align: top;
}

.superadmin-table th {
  font-weight: 700;
}

.superadmin-link-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

.superadmin-link-input {
  flex: 1;
  min-width: 0;
  height: 38px;
  border: 2px solid var(--text-color);
  border-radius: 8px;
  padding: 0 10px;
  font-size: 0.8rem;
  background: var(--secondary-bg-color);
  color: var(--text-color);
}

.superadmin-source-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.superadmin-source-list li {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--text-color) 15%, transparent);
}

.superadmin-error {
  color: #c0392b;
  font-size: 0.9rem;
}

.superadmin-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  border: 1px solid var(--text-color);
}

.superadmin-badge--off {
  opacity: 0.55;
}

.team-invite-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 8px 0 12px;
}

.team-invite-panel--settings {
  padding: 0;
  gap: 16px;
}

.team-invite-panel__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.team-invite-panel__label {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-color);
  text-align: left;
}

.team-invite-panel__hint {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--secondary-text-color);
  text-align: left;
}

.team-invite-panel__row {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
}

.team-invite-panel__input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 14px;
  border: 3px solid var(--text-color);
  border-right: none;
  border-radius: 14px 0 0 14px;
  font-family: Nunito, sans-serif;
  font-size: 0.95rem;
  color: var(--text-color);
  background: var(--main-bg-color);
}

.team-invite-panel__row--link .team-invite-panel__input {
  font-size: 0.78rem;
}

.team-invite-panel__copy {
  width: 52px;
  flex-shrink: 0;
  border: 3px solid var(--text-color);
  border-radius: 0 14px 14px 0;
  background: var(--text-color);
  color: var(--main-bg-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-invite-panel__copy:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.team-invite-panel__copy svg {
  width: 18px;
  height: 18px;
}

.team-invite-panel__loading,
.team-invite-panel__error {
  margin: 0;
  text-align: center;
  color: var(--text-color);
}

.team-invite-panel__error {
  color: #c0392b;
}

.team-invite-panel__retry {
  margin-top: 8px;
  padding: 8px 16px;
  border: 2px solid var(--text-color);
  border-radius: 10px;
  background: transparent;
  color: var(--text-color);
  font-family: Nunito, sans-serif;
  cursor: pointer;
}