/* ===== ТЕМА/БАЗА ===== */
:root{
  --bg:#07090c; --card:#0d1116; --glass1:rgba(255,255,255,.04); --glass2:rgba(255,255,255,.02);
  --fg:#eef0f3; --muted:#aab0b6; --line:#1c222a; --red:#c0392b; --green:#1ECD97; --blue:#63c7ff;
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --panelW: 380px;
  --green2:#1ECD97; --grayl:#4e586e; --grayb:#282D2E; --yelow:#CAA410; --violet:#7061cf;
  --lpanelW: 380px; /* left projects panel width */
}
*{box-sizing:border-box}
html, body { height: 100%; overflow: hidden; }
body{
  margin:0; font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--fg);
  background: radial-gradient(1200px 700px at 50% -10%, #102033 0%, #0b0f15 60%, #07090c 100%);
  background-repeat:no-repeat; background-attachment:fixed; background-size:cover;
  position:relative;
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.12; mix-blend-mode:overlay;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.55"/></svg>');
  background-size:160px 160px; background-repeat:repeat;
}
/* Резервируем место под панели, когда они открыты (см. JS, классы .left-open/.right-open) */

.c-foot {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
}

.c-foot > div:first-child {
  flex: 1;
}
.c-foot > div:last-child {
  margin-left: auto;
  display: flex;
  gap: 6px;
  align-items: center;
}
.reply-form {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  width: 100%;
  align-items: center;
}

.reply-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  background: rgba(20,28,38,0.9); /* тёмный фон, можно подобрать под твой стиль */
  color: #e8edf4;                  /* светлый текст */
  border: 0.6px solid var(--line);   /* твой цвет бордера */
  border-radius: 8px;
  font-size: 0.7em;
  outline: none;
  transition: border-color 0.1s, background 0.2s;
}

.reply-input:focus {
  border-color: #6c7885;         /* подсветка при фокусе */
  background: rgba(30,42,58,1);  /* чуть светлее при фокусе */
}

/* REPLY & SEND */
.btn-reply, .btn-reply-send {
  background: none !important;
  border: none !important;
  color: #63c7ff;
  padding: 0 10px;
  border-radius: 0 !important;
  cursor: pointer;
  font-size: 1em;
  box-shadow: none !important;
}

.btn-reply:hover, .btn-reply-send:hover {
  text-decoration: underline;
  background: none !important;
  border: none !important;
}

.btn-reply:focus, .btn-reply-send:focus {
  outline: none !important;
}
.hidden{display:none!important}

/* footer: same logic */
.site-footer{
  display: none; /* как у вас было */
}
.footer-logo img{
  width:140px;           /* было 200px */
  height:auto;
  display:block;
  margin:0 auto;
}
.footer-grid{
  display:grid;
  grid-template-columns: auto 1fr auto; /* середина растягивается */
  align-items:center;
  gap:12px;
}
.footer-middle{
  display:flex;
  justify-content:center;   /* соц-сети по центру своей колонки */
  justify-self:center;      /* колонка по центру всей сетки */
}
.footer-right{
  display:flex;
  align-items:center;
  gap:14px;
  justify-content:flex-end; /* содержимое в колонке вправо */
  justify-self:end;         /* колонка прижата к правому краю футера */
}

/* ===== ЛЕЙАУТ ===== */
/* center container — no forced right margin */
.wrap{
  margin: 0 auto;
}
/* === Auth state layout toggles === */
.logoBox{ 
  display:none;                /* по умолчанию прячем логотип */
  place-content:center; 
  place-items:center;
}
.logoBox img{
  max-width: 220px;
  height: auto;
  opacity: 1;
}


/* Авторизованное состояние: центр — тёмная панель на всю высоту, без скруглений */
body.authed .wrap{
  background: #0b0f15;       /* сплошной тёмный */
  border-radius: 0;          /* без скруглений сверху/снизу */
  padding: 0;                /* если нужно, можно обнулять внутренние отступы */
}

/* Показываем логотип только после входа */
body.authed .logoBox{
  display: grid;
}

.card{
padding:18px;
}
.card-container {
  display: flex;
  justify-content: center;   /* горизонтальное центрирование */
  align-items: center;       /* вертикальное центрирование */
}
.login-card{
  background:linear-gradient(180deg,var(--glass1),var(--glass2));
  border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow);
  backdrop-filter:saturate(140%) blur(8px); padding:18px;
 width: 620px;
text-align: center;
  justify-content: center;
  align-items: center;

}
.title{font-weight:700;font-size:36px;letter-spacing:.3px;margin:6px 0 10px}
.titleSm{font-weight:700;font-size:18px}
.sub{color:var(--muted); margin-bottom:12px}

/* ===== КНОПКИ ===== */

/* SEND TO EDITS */

.toedits-btn {
  position: relative;
  display: flex;
  align-items: center;      /* Центрируем по вертикали */
  justify-content: center;  /* Центрируем по горизонтали */
  background: #2B2D2F;
  min-width: 180px;
  height: 40px;
  border-radius: 5px;
  cursor: pointer;
  overflow: hidden;
}

.toedits-text {
  font-family: 'Montserrat', poppins, sans-serif;
  font-size: 0.7rem;
   text-transform: uppercase; 
 color: #71DFBE;
  text-align: center;
  flex: 1 1 auto;          /* Растягиваем по ширине */
  z-index: 2;
}
/* --- ХОВЕР --- */
.toedits-btn:hover .toedits-text {
  color: #fff;
  text-shadow: 0 0 6px #71DFBE, 0 0 2px #fff;
}
/* Если хочешь фон кнопки тоже менять: */
.toedits-btn:hover {
  background: #189370;
}
.progress-bar {
  position: absolute;
  height: 10px;
  width: 0;
  right: 0;
  top: 50%;
  left: 50%;
  border-radius: 200px;
  transform: translateY(-50%) translateX(-50%);
  background: #71DFBE;
}

svg {
  width: 30px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
  left: 50%;
  right: 0;
}

.check {
  fill: none;
  stroke: #1D1F20;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* === Button width utilities === */

/*.btn{background:transparent;color:#fff;border:1px solid var(--red);border-radius:5px;padding:10px 16px;cursor:pointer;transition:.2s}
.btn:hover{transform:translateY(-1px)}*/
.btn-ghost{background:transparent;border:1px solid var(--line);border-radius:5px;padding:8px 14px;color:#fff;cursor:pointer}
.btn-logout{
  background:transparent;border:1px solid var(--red);color:#fff;border-radius:5px;padding:8px 16px;cursor:pointer;transition:.2s;
  box-shadow:0 0 12px rgba(190, 2, 2, 0.6);
}
.btn-logout:hover{background:rgba(190,2,2,0.12);box-shadow:0 0 20px rgba(190, 2, 2, 0.9)}

/*.btn {
  all: unset;
  display:inline-block;
  padding:8px 14px;
  border-radius:6px;
  border:none;  
  font-size:12px;
  line-height: var(--btn-h, auto);
  --line-height:80px;
  cursor:pointer;
  font-weight:600;
  background:linear-gradient(45deg, #9747FF, #4218b8); color:#fff;

  &:hover,
  &:focus {
    color: #fff;
    outline: 0;
filter: brightness(.95); box-shadow: 0 6px 22px color-mix(in srgb, var(--violet) 36%, transparent);   
}}
*/
.btn{
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--cool) 82%, white 0%),
    color-mix(in srgb, var(--cool) 70%, #000 0%));
  color:#FFF;
  border: none;
  border-radius: 6px;
  padding: 12px 18px;
  font-weight: 600;
  box-shadow: 0 4px 18px color-mix(in srgb, var(--cool) 30%, transparent);
  transition: transform .08s ease, filter .15s ease, box-shadow .2s ease;
  cursor: pointer;
}
.btn:hover{ filter: brightness(.95); box-shadow: 0 6px 22px color-mix(in srgb, var(--cool) 36%, transparent); }
.btn:active{ transform: translateY(1px) scale(.995); }
/* базовая кнопка получает управляемую ширину через кастомные переменные */
.btn{
  inline-size: var(--btn-w, auto);      /* ширина */
  min-inline-size: var(--btn-min, auto);/* мин-ширина */
  max-inline-size: var(--btn-max, none);/* макс-ширина */
}
/* Размеры .btn управляются переменными */
.btn{
  /* ширина — как у тебя */
  inline-size: var(--btn-w, auto);
  min-inline-size: var(--btn-min, auto);
  max-inline-size: var(--btn-max, none);

  /* ВЫСОТА: два способа */
  block-size: var(--btn-h, auto);        /* фикс-высота, если задана */
  min-block-size: var(--btn-min-h, auto);/* мин-высота (удобно для “не ниже 40px”) */

  /* Отступы: по умолчанию как у тебя (12/18), но через переменные */
  padding-block: var(--btn-py, 12px);
  padding-inline: var(--btn-px, 18px);

  /* Центровка контента (и иконки, и текста) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap, 8px);

  line-height: 1.1; /* без влияния на высоту, читабельно */
}
.btn-clean{
  background: rgba(255,255,255,.06);
  color: #E8EDF4;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  padding: 12px 18px;
  transition: background .15s ease, border-color .15s ease;
  cursor: pointer;
}
.btn-clean{
  /* ширина — как у тебя */
  inline-size: var(--btn-w, auto);
  min-inline-size: var(--btn-min, auto);
  max-inline-size: var(--btn-max, none);

  /* ВЫСОТА: два способа */
  block-size: var(--btn-h, auto);        /* фикс-высота, если задана */
  min-block-size: var(--btn-min-h, auto);/* мин-высота (удобно для “не ниже 40px”) */

  /* Отступы: по умолчанию как у тебя (12/18), но через переменные */
  padding-block: var(--btn-py, 12px);
  padding-inline: var(--btn-px, 18px);

  /* Центровка контента (и иконки, и текста) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap, 8px);

  line-height: 1.1; /* без влияния на высоту, читабельно */
}
.btn-clean:hover{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }
/* ЖЁСТКАЯ ВЫСОТА — без вертикальных паддингов */
.btn--h-28 { --btn-h: 28px; --btn-py: 0; }
.btn--h-32 { --btn-h: 32px; --btn-py: 0; }
.btn--h-36 { --btn-h: 36px; --btn-py: 0; }
.btn--h-40 { --btn-h: 40px; --btn-py: 0; }
.btn--h-46 { --btn-h: 46px; --btn-py: 0; }
.btn--h-56 { --btn-h: 56px; --btn-py: 0; }

/* МИН-ВЫСОТА — растёт от контента, но не ниже N */
.btn--minh-36 { --btn-min-h: 36px; }
.btn--minh-40 { --btn-min-h: 40px; }
.btn--minh-46 { --btn-min-h: 46px; }

/* Паддинги вручную (если хочешь только подложить “подушку”) */
.btn--py-8  { --btn-py: 8px; }
.btn--py-12 { --btn-py: 12px; } /* дефолт */
.btn--py-16 { --btn-py: 16px; }
.btn--px-12 { --btn-px: 12px; }
.btn--px-18 { --btn-px: 18px; } /* дефолт */
.btn--px-24 { --btn-px: 24px; }

/* готовые модификаторы на все случаи */
.btn--w-100 { --btn-w: 100px; }
.btn--w-120 { --btn-w: 120px; }
.btn--w-140 { --btn-w: 140px; }
.btn--w-160 { --btn-w: 160px; }
.btn--min-120 { --btn-min: 120px; }      /* тянется по контенту, но не меньше 120px */
.btn--fit  { --btn-w: fit-content; }     /* ровно по контенту */
.btn--full { --btn-w: 100%; }            /* на всю строку */
.btn--h-20 { --btn-w: 20px; }
.btn--h-35 { --btn-w: 35px; }
.btn--h-46 { --btn-w: 46px; }
/* если нужна ровная сетка одинаковой ширины для нескольких кнопок */
.btn-row{
  display: grid; 
  grid-template-columns: repeat(var(--btn-cols,2), 1fr);
  gap: 10px;
}
.btn-row .btn{ --btn-w: auto; width: 100%; } /* внутри сетки кнопки растягиваются по ячейке */

.fourth {
  // background: $yellow;
  border-color: var(--red);
  color: #fff;
  background: {
    image: linear-gradient(45deg, #c0392b 50%, transparent 50%);
    position: 100%;
    size: 100%;
  }
  transition: background 300ms ease-in-out;
  
  &:hover {
    background-position: 0;
  }
}
/* ===== ИКОНКА-КНОПКА universal ===== */
.iconBtn {
  background: transparent;
  border: none;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  color: #dbe2ea;
  font-size: 1em;
  font-weight: 400;
  box-shadow: none;
  transition: background 0.18s, color 0.18s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.iconBtn:hover {
  background: rgba(255,255,255,0.05);
  color: #fff;
}
.iconBtn:active {
  background: rgba(190,2,2,0.09);
}
/* Кнопки-иконки */
button.panelToggleBtn{
  appearance:none;background:transparent;color:#fff;border:1px solid var(--line);border-radius:5px;padding:8px 12px;font:inherit;cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
button.panelToggleBtn:hover{background:rgba(255,255,255,.03);border-color:#2a3441;box-shadow:0 0 10px rgba(255,255,255,.05) inset;transform:translateY(-1px)}
button.panelToggleBtn:active{transform:translateY(0)}

button.btn-del-reply, button.btn-del, button.btn-resolve, button.btn-emoji, button.btn-edit, button.btn-edit-reply, button.btn-save, button.btn-cancel{
  appearance:none;background:transparent;border:none;box-shadow:none;padding:6px 10px;border-radius:8px;cursor:pointer;color:#dbe2ea;
}
button.btn-del-reply:hover, button.btn-del:hover, button.btn-resolve:hover, button.btn-emoji:hover, button.btn-edit:hover, button.btn-save:hover, button.btn-cancel:hover{
  background:rgba(255,255,255,.05);
}
button.btn-resolve.active{ color: var(--green); }

.stage.current {
background: rgba(255, 255, 255, .04);
}
/* ===== ШАПКА ПРОЕКТА ===== */
.projHead{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px}
.projLeft{min-width:0}
.deadlineBox{display:grid;grid-auto-flow:column;align-items:center;gap:8px}
.deadLabel{opacity:.8}
.deadRO{opacity:.9}
.deadInput{display:none;background:#0b0f15;color:#fff;border:1px solid var(--line);border-radius:10px;padding:6px 10px}
.deadSave{display:none;padding:6px 10px;border-radius:10px}
.deadLeft{color:var(--muted);font-size:12px}

/* ===== СТАДИИ ===== */
.stages{display:grid;gap:12px}
.stage{display:grid;gap:4px;padding:14px 18px 14px 42px;border:0px solid var(--line);border-radius:8px;background: rgba(255, 255, 255, .02);position:relative}
.stage::before{content:"";position:absolute;left:18px;top:22px;width:12px;height:12px;border-radius:50%;background:#6b7280;box-shadow:0 0 0 2px rgba(255,255,255,1) inset}
.stage.active {
}
/* Кликабельная шапка карточки драфта — показываем "руку" */
.stage.stage-video .stage-left,
.stage.stage-video .stage-title,
.stage.stage-video .stage-meta {
  cursor: pointer;
}
/* Ховер-подсветка и центральная надпись (без blur).
   Срабатывает везде, КРОМЕ зоны иконок справа (.stage-actions).
   При наведении НЕ на иконки — подсветка покрывает ВСЮ карточку, в т.ч. под иконками. */

.stage.stage-video {
  position: relative;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease, background-color .18s ease;
}

/* Подсветка: только если НЕ ховерим .stage-actions */
.stage.stage-video:not(.is-active):hover:not(:has(.stage-actions:hover)) {
  box-shadow: 0 8px 22px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.08);
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.12);
}

/* Светлая вуаль + текст по центру (без blur), накрывает всю карточку */
.stage.stage-video:not(.is-active):hover:not(:has(.stage-actions:hover))::after {
  content: "CLICK TO VIEW";
  position: absolute;
  inset: 0;                     /* покрываем всю карточку, в т.ч. под иконками */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;         /* не мешаем клику по иконкам */
  color: rgba(255,255,255,.95);
  font-weight: 600;
  letter-spacing: .06em;
  font-size: 12px;
  text-transform: uppercase;

  /* лёгкое осветление без blur */
  background: rgba(255,255,255,.04);
  opacity: 0;
  animation: stageHoverHint .18s forwards;
}

/* Для активной карточки подсказку не показываем */
.stage.stage-video.is-active:hover::after {
  content: none;
}

@keyframes stageHoverHint {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.stage.active::before{background:#20ff63;box-shadow:0 0 16px rgba(32,255,99,.55)}
.stage .name{font-weight:700}
.stage .note{color:var(--muted);font-size:13px}

/* ===== ПЛЕЕР ===== */
.playerWrap{background:#000;border:1px solid var(--line);border-radius:0px;overflow:hidden;position:relative;}
.playerWrap video {
  width: 100%;
  display: block;
}
.playerWrap .controls {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.fullwidth-player {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#player {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 0px;
  background: #000;
}
.stage.stage-video .playerWrap {
  margin-left: -42px;
  margin-right: 0px;
margin-top:10px;
  width: calc(100% + 60px);
}
.playerWrap .controls {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  padding: 10px;
  background: #0d1116;
  border-top: 1px solid var(--line);
}

.player-center-controls {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex: 1 1 auto;
}

.timeLabel {
  font-size: 13px;
  color: #cdd6de;
  min-width: 120px;
  text-align: left;
  margin-right: 12px;
}

.player-volume-block {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
  justify-content: flex-end;
  margin-left: 12px;
}
.playerWrap video{width:100%;display:block}
.controls{display:flex;align-items:center;gap:10px;padding:10px;background:#0d1116;border-top:1px solid var(--line)}
.btnSm{background:#121821;border:1px solid #223040;color:#dfe6ee;border-radius:10px;padding:6px 10px;cursor:pointer
 width: 36px;
  min-width: 36px;}
.btnSm:hover{background:#1a2431}
.progress{position:relative;flex:1;height:8px;background:#141b24;border:1px solid var(--line);border-radius:999px;cursor:pointer;box-shadow:none}
.bar{height:100%;background:linear-gradient(90deg, rgba(190,2,2,1), rgba(190,2,2,.75));width:0;border-radius:999px;box-shadow:0 0 18px rgba(190,2,2,.65)}
.tip{position:absolute;bottom:14px;left:0;transform:translateX(-50%);background:rgba(14,20,28,.85);color:#e9eef3;padding:6px 8px;border-radius:8px;font-size:12px;white-space:nowrap;pointer-events:none;display:none;box-shadow:0 10px 28px rgba(0,0,0,.45);backdrop-filter:blur(6px) saturate(130%)}
.commentPopup{position:absolute;left:50%;bottom:56px;transform:translateX(-50%);display:inline-block;max-width:60%;max-height:120px;overflow:auto;padding:8px 12px;background:rgba(14,20,28,.55);color:#e9eef3;border:none;border-radius:10px;box-shadow:0 12px 36px rgba(0,0,0,.45);backdrop-filter:blur(10px) saturate(130%);text-align:center;pointer-events:none;font-size:14px;line-height:1.35}
.commentPopup .hms{color:#63c7ff;margin-right:6px}
.marker{position:absolute;top:-2px;width:2px;height:14px}
.marker::after{content:"";position:absolute;left:50%;transform:translateX(-50%);top:-8px;border-left:4px solid transparent;border-right:4px solid transparent}
.marker.client{background: var(--yelow);} .marker.client::after{border-top:6px solid var(--yelow);}
.marker.editor{background:var(--green);} .marker.editor::after{border-top:6px solid var(--green);}
.marker.admin{background:var(--violet);} .marker.admin::after{border-top:6px solid var(--violet);}
.timeLabel{font-size:13px;color:#cdd6de ; width: 130px;   max-width: 180px;}
#vol{accent-color: var(--green);height:6px;cursor:default; borger:0;}
#vol:focus,
#vol:hover {
  accent-color: var(--green); /* Оставляем тот же цвет */
}

/* Left Projects panel — слева, под тулбаром, в цвет тулбара */
#projectsPanel{
  position:fixed;
  left:0;               /* слева */
  top: var(--topbarH);
  height: calc(100vh - var(--topbarH));
  width: var(--lpanelW);
  display:flex;
  flex-direction:column;

  /* Цвет как у .topbar: rgba(10, 15, 25, 0.75) */
  background: rgba(10, 15, 25, 1.0);
  border-right:4px solid rgba(7,10,22,1);
  transform:translateX(-100%);  /* спрятана влево по умолчанию */
  opacity:0;
  transition:transform .28s ease, opacity .28s ease;

  z-index:55; /* topbar у тебя z-index:100, так что панель ниже по стеку и не перекроет его */
}
#projectsPanel .panelBody{ flex:1; overflow:auto; }
#projectsPanel.open{
  transform:translateX(0);
  opacity:1;
}
#projectsPanel .panelHead{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;border-bottom:1px solid var(--line)
}
#projectsPanel .panelBody{
  flex:1;overflow:auto;padding:14px 12px;display:flex;flex-direction:column;gap:12px
}

/* reserve space ONLY when the right comments panel is open */

/* Мобильный режим — как было, можно оставить */
@media (max-width: 980px){
  #projectsPanel{
    left:0; right:0; width:100%;
    top:auto; height:50vh; bottom:0;
    transform: translateY(100%);
  }
  #projectsPanel.open{ transform: translateY(0); }
  body.with-projects-panel .wrap{ margin-left: 0; }
}

/* Toolbar */
.proj-toolbar{ display:grid; grid-template-columns: 1fr auto; gap:8px; }
.proj-toolbar .input{ background:#0b0f15; color:#fff; border:1px solid var(--line); border-radius:10px; padding:8px 10px; }
.proj-toolbar select{ background:#0b0f15; color:#fff; border:1px solid var(--line); border-radius:10px; padding:8px 10px; }

/* Left Projects panel: one-column layout inside */
#projectsPanel .proj-flex{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#projectsPanel .folders-col{
  order: 1;
}
#projectsPanel .projects-col{
  order: 2;
  min-width: 0;
}
#projectsPanel .folder-sep{
  height: 1px;
  background: var(--line);
  margin: 8px 0;
}

/* Projects list */
.projects-col{ min-width:0; }
.projects-list{ display:grid; gap:8px; }
.project-row{
display:grid; grid-template-columns: 1fr auto; gap:8px; align-items:center;
padding:10px 12px; border:0px solid var(--line); border-radius:12px; background:rgba(255,255,255,.02);
}
.project-title{ font-weight:600; }
.project-sub{ color:var(--muted); font-size:12px; }
.project-actions{ display:flex; gap:8px; align-items:center; }
.project-actions .btn-ghost{ padding:6px 10px; }
.project-move{ background:#0b0f15; color:#fff; border:1px solid var(--line); border-radius:8px; padding:6px 8px; }


/* Папки и проекты теперь в одной колонке */
#foldersList, #projList {
  margin-top: 12px;
}
.folder-item, .project-row {
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s;
}
.folder-item:hover, .project-row:hover {
  background: rgba(255,255,255,0.05);
}
.folder-item.active {
  background: rgba(255,255,255,0.1);
  font-weight: 600;
}
/* Folders list icons and layout */
#projectsPanel .folder-item{
  display:flex; align-items:center; gap:6px;
  padding:8px 10px; border-radius:8px; cursor:pointer;
  color:#cfd3da; border:1px solid transparent;
}
#projectsPanel .folder-item:hover{ background:rgba(255,255,255,.05); color:#fff; }
#projectsPanel .folder-item.active{ background: color:#fff; border-color:var(--line); }

#projectsPanel .folder-item .folder-arrow{ font-size:22px; line-height:1; }
#projectsPanel .folder-item .folder-ico{ font-size:16px; line-height:1; color: var(--cool); }
#projectsPanel .folder-item .folder-title{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Drag-over highlight */
#projectsPanel .folder-item.droptarget{
  outline:1px dashed var(--blue);
  background: rgba(99,199,255,0.12);
}
/* Когда список проектов вставлен прямо под папкой */
#projList.nested-under-folder {
  margin-left: 10px;             /* небольшой отступ от иконок папки */
  padding-left: 8px;
  border-left: 0px dashed var(--grayl);
}

/* Между соседними папками и вложенным списком — чуть воздуха */
#projectsPanel .folder-item + #projList.nested-under-folder {
  margin-top: 6px;
  margin-bottom: 10px;
}

/* ===== КОММЕНТЫ ===== */
#commentArea{display:grid;gap:12px}
.stick{position:sticky;top:10px;z-index:2}
.textarea{width:100%;background:#0b0f15;color:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;resize:none;height:3.2em;line-height:1.6em}
.textarea:focus{border:1px solid var(--red);outline:none}
.metaRow{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.toggle-time{cursor:pointer;margin-left:12px;font-size:26px;display:inline-flex;align-items:center;gap:8px}
.toggle-time.active{color:var(--red)} .toggle-time .label{font-size:13px;color:var(--red)}
.roleLabel{font-weight:700} .roleLabel.client{color:var(--yelow)} .roleLabel.editor{color:var(--green)} .roleLabel.producer{color:var(--violet);}
.lockNote{color:var(--muted);font-size:12px}

/* ===== ПРАВАЯ ПАНЕЛЬ ===== */
#commentsPanel{
  position:fixed;
  right: 0;
  top: var(--topbarH);
  height: calc(100vh - var(--topbarH));
  width: var(--rpanelW);
  display:flex; flex-direction:column;
 /*  background:linear-gradient(180deg,var(--glass1),var(--glass2)); */
  background: rgba(10, 15, 25, 1.0);
  border-left:4px solid rgba(7,10,22,1);
  transform:translateX(100%); opacity:0; transition:transform .28s ease, opacity .28s ease; z-index:55;
}
#commentsPanel.open{ transform:translateX(0); opacity:1; }
#commentsPanel .panelHead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
#commentsPanel .panelBody{flex:1;overflow:auto;padding:14px 16px;display:grid;gap:8px}
/* чтобы абсолютный поповер якорился к прокручиваемой области */
#commentsPanel .panelBody { position: relative; }

.comment {
  min-height: 40px;
  height: auto !important;
  max-height: none !important;
  width: 100%;
  max-width: 100%;
  border-radius: 12px;
  background: rgba(255, 255, 255, .02);
  padding: 12px 14px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s, border-color .2s, background .2s;
  cursor: default;
  word-break: break-word;
  overflow-wrap: anywhere;
  overflow: hidden; /* ВАЖНО: ограничить overflow */
margin-bottom: 10px; 
}
.c-body, .c-text* {
  display: block;
  width: 100%;
  max-width: 100%;
/*  white-space: pre-wrap;      /* сохраняет переносы строк и переносит длинные */
 /*  word-break: break-word;    /* перенос длинных слов */
/*  overflow-wrap: break-word; /* перенос для любых длинных последовательностей */
  box-sizing: border-box;
  overflow: hidden;          /* ограничить overflow чтобы не выходил за пределы */
}

#commentsList {
  display: block;
  width: 100%;
}
.c-foot {
  margin-bottom: 0;
}

.c-replies {
  margin-top: 8px;
}

.comment.active{  background:rgba(255, 255, 255, .05);; box-shadow: 0 0 0 0px rgba(108,120,133,0.38); }
.c-head{display:flex;align-items:center;justify-content:space-between;gap:8px;  margin-bottom: 14px;}
.c-left{display:flex;align-items:center;gap:10px}
.rolePlain{font-weight:700;font-size:14px;line-height:1}
.rolePlain.client{color:var(--yelow);} .rolePlain.editor{color:var(--green)} .rolePlain.producer{color:var(--violet);}
.c-ago{color:var(--muted);font-size:12px}
.c-num{color:var(--muted);font-weight:100;font-size:12px}

.c-body{display:block;}
.tc-pill{
  display:inline-block;margin-right:2px;
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-weight:200;font-size:12px;padding:2px 6px;background:rgba(255,255,255,.06);border:none;border-radius:0;color:#d0d6db;vertical-align:top;cursor:default;
}
.c-text{display:inline;color:#e8edf4;font-size:13px;line-height:1.5;white-space:normal;word-wrap:break-word}

/* Ответы */
.reply {
  margin-top: 6px;
  padding-left: 10px;
  border-left: 1px solid #444;
  width: 100%;
  box-sizing: border-box;
}
.replyHead{display:flex;gap:8px;align-items:center;}
.replyText{font-size:13px; color:#e8edf4; margin-top:4px;}

/* Ревью-кнопки */
.reviewActions {
  display: flex;
  gap: 18px;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
/* Модалки */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:60; }
.modal{position:relative;background:linear-gradient(180deg,var(--glass1),var(--glass2));border:1px solid var(--line);border-radius:16px;padding:18px;min-width:360px;max-width:90vw;backdrop-filter:blur(10px) saturate(130%);box-shadow:var(--shadow)}
.modal h3{margin:0 0 10px}
.modal .row{gap:8px}
.err{margin-top:10px;font-size:13px;color:var(--red)}
.muted{color:var(--muted)}
/* === Стеклянный крестик для модалок === */
.btn-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-close::before,
.btn-close::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 2px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 1px;
  transition: background 0.2s ease;
}

.btn-close::before {
  transform: rotate(45deg);
}
.btn-close::after {
  transform: rotate(-45deg);
}

.btn-close:hover {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.15);
}

.btn-close:hover::before,
.btn-close:hover::after {
  background: #fff;
}

/* Тултип “Created …” */
.agoTip{
  position:fixed; z-index:1000; background:#0e1420; color:#e9edf6; border:1px solid #2a3441;
  padding:8px 12px; border-radius:10px; font-size:13px; white-space:nowrap;
  box-shadow:0 10px 24px rgba(0,0,0,.45); pointer-events:none;
  max-width: 280px;
  min-width: 180px;
  white-space: normal;
  word-wrap: break-word;
}

/* Эмодзи-пикер */
.emojiPicker{
  position:fixed; z-index:1001; background:#0e1420; border:1px solid #2a3441; border-radius:12px; padding:8px; box-shadow:0 12px 36px rgba(0,0,0,.45);
}
.emojiRow{display:flex;gap:6px;flex-wrap:wrap;max-width:240px}
.emojiBtn{
  font-size:20px; line-height:1; background:transparent; border:none; cursor:pointer; padding:6px; border-radius:8px;
}
.emoji-pop .emoji-pick {
  font-size: 18px;
  padding: 5px 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s;
}
.emoji-pop .emoji-pick:hover {
  background: rgba(255,255,255,0.10);
}
.emojiBtn:hover{ background:rgba(255,255,255,.08); }
.emojiClear{margin-left:auto;font-size:14px;opacity:.8}
/* красная первая цифра, если n>2 */
.rev-num.over { color: var(--red); font-weight: 700; }
/*Кнопки СОГЛАСОВАТЬ */
.review-actions{
  display:flex; gap:10px; align-items:center; margin:10px 0 0;
}
.stage .over { color: var(--red); font-weight: 700; }

.ios-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  margin-right: 10px;
}
.ios-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.ios-switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ccc;
  transition: .3s;
  border-radius: 20px;
}
.ios-switch .slider:before {
  position: absolute;
  content: "";
  height: 19px;
  width: 19px;
  left: 2.5px;
  bottom: 2.5px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.ios-switch input:checked + .slider {
  background-color: #34c759;
}
.ios-switch input:checked + .slider:before {
  transform: translateX(18px);
}
.ios-switch .label-text {
  margin-left: 62px;
  font-size: 0.7em;
  vertical-align: middle;
  color: #fff;
  font-family: inherit;
  position: absolute;
  top: 4px;
}
.stage-comments-list {
  border-radius: 16px;
  margin: 0 0 12px 0;
  padding: 18px 20px 18px 20px;
  color: #fff;
  font-size: 0.95em;
 font-weight:300;
  max-height: 220px;
  overflow-y: auto;
}

.stage-comment-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  font-size: 1em;
}
.stage-comment-row:last-child { border-bottom: none; }

.comment-role.client { color: #fff; font-weight:700; }
.comment-role.editor { color: #84ff84; font-weight:700;}
.comment-role.producer, .comment-role.admin { color: #DAA520; font-weight:700;}
.comment-timecode {
  background: rgba(151,71,255,0.18);
  color: #9747FF;
  border-radius: 6px;
  font-size: 0.92em;
  padding: 2px 10px;
  margin-right: 8px;
  letter-spacing: 1px;
}
.comment-text { flex: 1; color: #fff; font-weight: 400; word-break: break-word; }
.comment-date { color: #e6e6ee; font-size: 0.92em; margin-left: 8px; white-space: nowrap; opacity: 0.7; }
.stage-comment-reply {
  margin-left: 36px;
  padding-left: 50px;
  border-left: 2px solid #63c7ff;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92em;
  color: #fff;
  opacity: 0.89;
  margin-top: 4px;
}
.expandable-stage {
  cursor: pointer; /* это и есть палец */
  transition: background 0.2s;
}
.stage-comment-reply .comment-role.client { color: #fff; }
.stage-comment-reply .comment-role.editor { color: #84ff84; }
.stage-comment-reply .comment-role.producer, .stage-comment-reply .comment-role.admin { color: #DAA520; }
/* 	КНОПКА ПОКАЗАТЬ КОММЕНТАРИИ */
.click-hint {
  color: var(--green);
  font-size: 0.65em;
  opacity: 0.70;
  padding-left: 24px;
  font-weight: 500;
  user-select: none;
}
/* 	Кнопка УДАЛИТЬ ЭТАП	*/
.stage-delete-btn {
  background: none;
  border: none;
  color: #ff3c3c;
  font-size: 18px;
  cursor: pointer;
  margin-left: 10px;
  transition: color 0.15s;
}
.stage-delete-btn:hover {
  color: #d90000;
}
.container {
 justify-content: center;   /* горизонтальное центрирование */
  align-items: center;       /* вертикальное центрирование */

  width: 600px;
  text-align: center;
}
.login-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
}

#project {
  width: 170px;
  height: 40px;
  border-radius: 12px;
  border: 1.5px solid #bbb;
  padding: 0 16px;
  font-size: 15px;
}

#login-btn {
  outline: none;
  height: 40px;
  width: 130px;
  border-radius: 5px;
  background: #fff;
  border: 2px solid #1ECD97;
  color: #1ECD97;
  letter-spacing: 1px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
}
#login-btn:hover {
  color: white;
  background: #1ECD97;
}
#login-btn:active {
  letter-spacing: 2px;
}
#login-btn::after {
  content: "OPEN";
  display: block;
  font-size: 12px;
}
#login-btn.onclic {
  width: 40px !important;
  border-color: #bbbbbb;
  border-width: 3px;
  font-size: 0;
  border-radius: 40px;
  border-left-color: #1ECD97;
  animation: rotating 2s 0.25s linear infinite;
}
#login-btn.onclic::after {
  content: "";
}
#login-btn.validate {
  font-size: 13px;
  color: white;
  background: #1ECD97;
}
#login-btn.validate::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 18px;
  height: 18px;
  display: block;
 background: url('data:image/svg+xml;utf8,<svg fill="white" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M6.6 13.2l-4.8-4.8 1.4-1.4 3.4 3.4 6.6-6.6 1.4 1.4z"/></svg>') no-repeat center center;
 
  background-size: 18px 18px;
}
#logoutBtn.btn, .btn#logoutBtn {
  all: unset;
}
input.error {
  border-color: #e54e4e;
  box-shadow: 0 0 0 2px #e54e4e44;
}
@keyframes rotating {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ADMIN POPAP */
.project-settings-modal {
  min-width: 380px;
  max-width: 600;
}
.project-settings-modal .row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.project-settings-modal input,
.project-settings-modal textarea,
.project-settings-modal select {
  background: #0b0f15;
  color: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px 10px;
  font-size: 1em;
  margin-bottom: 4px;
}
.project-settings-modal textarea {
  min-width: 220px;
  min-height: 44px;
}
.admin-only { opacity: 0.9; }

/* Адаптив */
@media (max-width: 980px){
  #commentsPanel{top:auto;bottom:0;left:0;right:0;width:100%;height:50vh;border-top:1px solid var(--line)}
  .wrap{margin-right:0}
.wrap{margin-right:0; padding-right:0;} 
.site-footer{margin-right:0} /* <- добавить эту строку */
.footer-grid{ grid-template-columns: 1fr; }
.footer-middle{ justify-self:center; }
.footer-right{ justify-content:center; justify-self:center; }
.footer-logo img{ width:120px; }

}

/* LOG OUT BUTTON */

.logout-btn {
  display:block;
  background-color: #c0392b;
  min-width: 110px;
  height: 40px;
  line-height: 40px;
  margin: auto;
  color: #fff;
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  cursor: pointer;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0 0 20px 0 rgba(0,0,0,.3);
  transition: all 0.25s cubic-bezier(0.310, -0.105, 0.430, 1.400);
  
  span,
  .icon {
    display: block;
    height: 100%;
    text-align: center;
    position: absolute;
    top: 0;
  }
  
  span {
    width: 72%;
    line-height: inherit;
    font-size: 12px;
    text-transform: uppercase;
    left: 0;
    transition:  all 0.25s cubic-bezier(0.310, -0.105, 0.430, 1.400);
    
    &:after {
      content: '';
      background-color: #a53125;
      width: 2px;
      height: 70%;
      position: absolute;
      top: 15%;
      right: -1px;
    }
  }
  
  .icon {
    width: 28%;
    right: 0;
    transition: all 0.25s cubic-bezier(0.310, -0.105, 0.430, 1.400);
    
    .fa {
      font-size: 14px;
      vertical-align: middle;
      transition: all 0.25s cubic-bezier(0.310, -0.105, 0.430, 1.400), height 0.25s ease;
    }
    
    .fa-remove {
      height: 16px;
    }
    
    .fa-check {
      display: none;
    }
  }
  
  &.success,
  &:hover {
    
    span {
      left: -72%;
      opacity: 0;
    }
    
    .icon {
      width: 100%;
      
      .fa {
        font-size: 20px;
      }
    }
  }
  
  &.success {
    background-color: #27ae60;
    
    .icon {
      
      .fa-remove {
        display: none;
      }
      
      .fa-check {
        display: inline-block;
      }
    }
  }
  
  &:hover {
    opacity: .9;
    
    .icon .fa-remove {
      height: 20px;
    }
  }
  
  &:active {
    opacity: 1;
  }
}


/* === Frame-style reply panel === */
.comment { position: relative; }

/* растягиваем панель ровно до краёв .comment (учитываем padding и radius карточки) */
.reply-composer-wrap{
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .28s ease, opacity .18s ease;

  /* у тебя у .comment: padding: 12px 14px; border-radius: 12px; */
  margin-left: -14px;
  margin-right: -14px;
  margin-bottom: -12px;

  background: #0f1320;
  border-top: 1px solid rgba(255,255,255,.08);
  border-radius: 0 0 12px 12px;   /* как у карточки */
}
.reply-composer-wrap.open{ opacity:1; max-height: 320px; }

.reply-composer{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 14px 14px;        /* те же внутренние отступы, что у карточки */
}

/* верхняя строка — textarea на всю ширину, без рамок */
.reply-editor textarea{
  width: 100%;
  min-height: 72px;
  resize: none;
  overflow: hidden;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #e8edf4;
  font-size: 14px;
  line-height: 1.5;
  padding: 0;
  margin: 0;
}

/* нижняя полоса: слева иконки, справа кнопки */
.reply-footer{ display:flex; align-items:center; gap:10px; }
.reply-icons{ display:flex; gap:8px; }
.reply-icons .iconBtn{
  width:32px; height:32px; display:grid; place-items:center;
  border:none; border-radius:8px; background:#1a1f33; color:#c8cbea; cursor:pointer;
  transition: background .15s, color .15s;
}
.reply-icons .iconBtn:hover{ background:#222a44; color:#fff; }

.spacer{ flex:1; }

.reply-actions{ display:flex; gap:8px; white-space:nowrap; }

/* КНОПКИ: Cancel — серая, Send — фиолетовая (без влияния глобального .btn) */
.reply-actions .btn-cancel,
.reply-actions .btn-send{
  all: unset;
  display:inline-block;
  padding:8px 14px;
  border-radius:5px;
  font-size:13px;
  line-height:1;
  cursor:pointer;
  font-weight:600;
}
.reply-actions .btn-cancel{
  background:#22263a; color:#e8edf4;
}
.reply-actions .btn-cancel:hover{ background:#2b3048; }

.reply-actions .btn-send{
  background:linear-gradient(45deg, #00ffa9, #0d4dff); color:#fff;
}
.reply-actions .btn-send:hover{ filter: brightness(0.9); }

/* === Static background glows (no animation) ===
   - Warm glow at the top center
   - Cold glow along the bottom, full width
   - Replaces previous animated aurora to improve performance on large Windows screens
*/
.aurora-bg{
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, #0b0f17 0%, #0e1522 100%);
  overflow: hidden;
}
/* Warm top-centered glow */
.aurora-bg::before{
  content: "";
  position: absolute;
  top: -15vh;
  left: 50%;
  transform: translateX(-50%);
  width: 120vmin;
  height: 120vmin;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .8;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(circle at 50% 50%,
    rgba(255,202,103,0.55) 0%,
    rgba(255,202,103,0.32) 40%,
    rgba(255,202,103,0.12) 70%,
    rgba(255,202,103,0.00) 85%
  );
}
/* Cold bottom band glow */
.aurora-bg::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -25vh;
  height: 55vh;               /* makes it span full width horizontally */
  filter: blur(80px);
  opacity: .75;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(60% 120% at 50% 0%,
    rgba(10,204,172,0.45) 0%,
    rgba(10,204,172,0.25) 45%,
    rgba(10,204,172,0.10) 75%,
    rgba(10,204,172,0.00) 100%
  );
}
@media (max-width: 768px){
  .aurora-bg::before{ width: 100vmin; height: 100vmin; filter: blur(80px); }
  .aurora-bg::after{  height: 48vh;   filter: blur(70px); }
}

/* === Верхняя фиксированная панель === */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  z-index: 100;
  background: rgba(10, 15, 25, 1);
  border-bottom: 4px solid rgba(7,10,22,1);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 20px;
  font-family: 'Montserrat', sans-serif;
}

.nav-logo {
  font-weight: 600;
  font-size: 18px;
  color: #fff;
  text-decoration: none;
}

.nav-links {
  display: inline-flex;
  gap: 20px;
  margin-left: 30px;
}
.nav-links a {
  color: #cfd3da;
  text-decoration: none;
  font-size: 14px;
  transition: color .2s;
}
.nav-links a:hover { color: #fff; }

.profile-menu {
  position: relative;
}
.profile-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
}
.profile-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Выпадающее меню */
.profile-dropdown {
  position: absolute;
  top: 48px;
  right: 0;
  min-width: 160px;
  background: rgba(14, 18, 28, 0.95);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  padding: 6px 0;
  display: none;
  flex-direction: column;
  backdrop-filter: blur(10px);
}
.profile-dropdown a {
  color: #cfd3da;
  text-decoration: none;
  font-size: 14px;
  padding: 8px 14px;
  transition: background .2s, color .2s;
}
.profile-dropdown a:hover {
  background: rgba(255,255,255,0.05);
  color: #fff;
}

/* Отступ контента под бар */
body { padding-top: 50px; }


/* === стеклянная карточка + локальные блики по углам === */
/* === Стеклянные модалки с фирменными бликами (FFCA67 / 0ACCAC) === */

.glass-card {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* общий световой слой */
.glass-card::before,
.glass-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  transition: opacity .25s ease;
  mix-blend-mode: screen;
}

/* мягкая «линза» */
.glass-card::before {
  filter: blur(14px);
  opacity: .8;
}

/* точечный хайлайт + полоски */
.glass-card::after {
  opacity: .9;
  filter: blur(10px);
}

/* ——— углы бликов ——— */

/* ЛЕВЫЙ ВЕРХ (тёплый FFCA67) */
.glint-tl.glass-card::before {
  background: conic-gradient(from 220deg at 18px 18px,
    rgba(255,202,103,0.32),
    rgba(255,202,103,0.0) 70deg);
}
.glint-tl.glass-card::after {
  background:
    radial-gradient(130px 130px at 22px 22px,
      rgba(255,202,103,0.45) 0%,
      rgba(255,202,103,0.25) 26%,
      rgba(255,202,103,0.1) 48%,
      rgba(255,202,103,0) 70%),
    linear-gradient(to bottom,
      rgba(255,202,103,0.25),
      rgba(255,202,103,0) 120px) left top / 2px 60% no-repeat,
    linear-gradient(to right,
      rgba(255,202,103,0.25),
      rgba(255,202,103,0) 160px) left top / 45% 2px no-repeat;
}

/* ПРАВЫЙ ВЕРХ (бирюзовый 0ACCAC) */
.glint-tr.glass-card::before {
  background: conic-gradient(from 320deg at calc(100% - 18px) 18px,
    rgba(10,204,172,0.30),
    rgba(10,204,172,0.0) 70deg);
}
.glint-tr.glass-card::after {
  background:
    radial-gradient(130px 130px at calc(100% - 22px) 22px,
      rgba(10,204,172,0.45) 0%,
      rgba(10,204,172,0.25) 26%,
      rgba(10,204,172,0.1) 48%,
      rgba(10,204,172,0) 70%),
    linear-gradient(to bottom,
      rgba(10,204,172,0.25),
      rgba(10,204,172,0) 120px) right top / 2px 60% no-repeat,
    linear-gradient(to left,
      rgba(10,204,172,0.25),
      rgba(10,204,172,0) 160px) right top / 45% 2px no-repeat;
}

/* ЛЕВЫЙ НИЗ (тёплый FFCA67) */
.glint-bl.glass-card::before {
  background: conic-gradient(from 130deg at 18px calc(100% - 18px),
    rgba(255,202,103,0.3),
    rgba(255,202,103,0.0) 70deg);
}
.glint-bl.glass-card::after {
  background:
    radial-gradient(130px 130px at 22px calc(100% - 22px),
      rgba(255,202,103,0.45) 0%,
      rgba(255,202,103,0.25) 26%,
      rgba(255,202,103,0.1) 48%,
      rgba(255,202,103,0) 70%),
    linear-gradient(to top,
      rgba(255,202,103,0.25),
      rgba(255,202,103,0) 120px) left bottom / 2px 60% no-repeat,
    linear-gradient(to right,
      rgba(255,202,103,0.25),
      rgba(255,202,103,0) 160px) left bottom / 45% 2px no-repeat;
}

/* ПРАВЫЙ НИЗ (бирюзовый 0ACCAC) */
.glint-br.glass-card::before {
  background: conic-gradient(from 40deg at calc(100% - 18px) calc(100% - 18px),
    rgba(10,204,172,0.3),
    rgba(10,204,172,0.0) 70deg);
}
.glint-br.glass-card::after {
  background:
    radial-gradient(130px 130px at calc(100% - 22px) calc(100% - 22px),
      rgba(10,204,172,0.45) 0%,
      rgba(10,204,172,0.25) 26%,
      rgba(10,204,172,0.1) 48%,
      rgba(10,204,172,0) 70%),
    linear-gradient(to top,
      rgba(10,204,172,0.25),
      rgba(10,204,172,0) 120px) right bottom / 2px 60% no-repeat,
    linear-gradient(to left,
      rgba(10,204,172,0.25),
      rgba(10,204,172,0) 160px) right bottom / 45% 2px no-repeat;
}

/* лёгкое дыхание света */
.glass-card.animate-glint::before,
.glass-card.animate-glint::after {
  animation: glintFloat 10s ease-in-out infinite alternate;
}
@keyframes glintFloat {
  0%   { transform: translate(0,0); opacity: 0.9; }
  100% { transform: translate(-2px,1px); opacity: 0.8; }
}

/* === Glass modal: тёплый слева (#FFCA67), бирюзовый справа (#0ACCAC) === */
:root{
  --glass-bg: rgba(18,24,33,.45);
  --glass-stroke: rgba(255,255,255,.06);
  --glass-shadow: 0 10px 40px rgba(0,0,0,.35);
  --warm: #FFCA67;
  --cool: #0ACCAC;
}

.glass-modal{
  position: relative;
  -webkit-backdrop-filter: blur(14px);
background: rgba(10, 15, 25, 1); 
 border-radius: 18px;
  box-shadow: var(--glass-shadow);
  overflow: hidden; /* важно для бликов */
}


/* Внутренний разделитель (как тонкая линия под заголовком) */
.glass-modal .modal-header{
  padding: 18px 22px 14px;
  position: relative;
}
.glass-modal .modal-header::after{
  content:""; position:absolute; left:0; right:0; bottom:100; height:1px;
  background: linear-gradient(to right,
    rgba(255,255,255,.05), rgba(255,255,255,.02) 40%, transparent 70%);
}

/* Кнопки внизу — в стиле референса */
.glass-modal .modal-footer{
  display:flex; gap:12px; padding:18px 22px 22px;

}
.btn-primary{
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--cool) 82%, white 0%),
    color-mix(in srgb, var(--cool) 70%, #000 0%));
  color:#FFF;
  border: none;
  border-radius: 6px;
  padding: 12px 18px;
  font-weight: 600;
  box-shadow: 0 4px 18px color-mix(in srgb, var(--cool) 30%, transparent);
  transition: transform .08s ease, filter .15s ease, box-shadow .2s ease;
}
.btn-primary:hover{ filter: brightness(.95); box-shadow: 0 6px 22px color-mix(in srgb, var(--cool) 36%, transparent); }
.btn-primary:active{ transform: translateY(1px) scale(.995); }

.btn-ghost{
  background: rgba(255,255,255,.06);
  color: #E8EDF4;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 12px 18px;
  transition: background .15s ease, border-color .15s ease;
}
.btn-ghost:hover{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }


/* === Стеклянные селекты и инпуты с лейблом === */
/* === CLEAN GLASS INPUTS & SELECTS === */

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: inherit;
  position: relative;
}

/* лейбл внутри поля */
.form-field label {
  position: absolute;
  top: 8px;
  left: 14px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
  pointer-events: none;
  transition: all 0.2s ease;
}

/* общее для инпутов и селектов */
.form-field select,
.form-field input[type="text"],
.form-field input[type="number"] {
  width: 100%;
  height: 46px;
  padding: 20px 40px 10px 14px; /* верх под label, справа под иконку */
  font-size: 16px;
  font-weight: 500;
  color: rgba(255,255,255,0.95);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  border: none;
  border-radius: 14px;
  outline: none;
  appearance: none;
  transition: background 0.2s ease;
}

/* hover / focus */
.form-field select:hover,
.form-field input:hover {
  background: rgba(255, 255, 255, 0.12);
}
.form-field select:focus,
.form-field input:focus {
  background: rgba(255, 255, 255, 0.14);
}

/* стрелка для select */
.form-field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.8)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px 14px;
  cursor: pointer;
}

/* карандаш для инпута */
.form-field input[type="text"],
.form-field input[type="number"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.8)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20h9'/><path d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px 14px;
}

/* number без стрелочек */
.form-field input[type="number"]::-webkit-inner-spin-button,
.form-field input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.form-field input[type="number"] {
  -moz-appearance: textfield;
}

/* фиксированная ширина, если нужно */
.form-field.narrow select,
.form-field.narrow input {
  width: 300px;
  min-width: 300px;
}




/* === FIRSTCUT GLASS SELECT (чистый, без бордеров/теней) === */
.fcg-label{
  position:absolute;top:8px;left:14px;font-size:10px;
  color:rgba(255,255,255,.65);pointer-events:none
}
.fcg-value{display:inline-block;margin-top:4px}


/* ИКОНКИ ВНУТРИ SELECT */
.fcg-select { position: relative; width:200px; min-width:100px; }

/* кнопка-триггер — без фоновых SVG, место под иконку справа */
.fcg-trigger{
  width:100%;
  padding:20px 34px 10px 14px;
  position: relative;
  padding-right: 36px; /* место под иконку */
  background: rgba(255,255,255,.10);
  border: none; border-radius: 8px; outline: 0;
  height: 46px; width: 100%; text-align: left;
  font-size: 14px; font-weight: 500; color: rgba(255,255,255,.95);
  backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%);
  transition: background .15s ease, border-radius .15s ease;
}
.fcg-trigger:hover{ background: rgba(255,255,255,.14); }

/* сама иконка (Remix) — ставим её в разметку как <i> */
.fcg-ico{
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  font-size: 18px; line-height: 1;
  font-weight: 300;
  color: rgba(255,255,255,.45);
  pointer-events: none;
}

/* при открытии — сглаженный шов с выпадающим списком */
.fcg-select.open .fcg-trigger{ border-bottom-left-radius:0; border-bottom-right-radius:0; }

/* РОТАЦИЯ ТОЛЬКО ЕСЛИ НУЖНО: добавляй класс .fcg--rotates на .fcg-select */
.fcg-select.fcg--rotates.open .fcg-ico{ transform: translateY(-50%) rotate(180deg); }

/* Выпадающий список (как было, плюс overflow скрывает углы при hover) */
.fcg-list{
  position:absolute; left:0; right:0; top:calc(100% - 1px);
  display:none; margin:0; padding:0; list-style:none; overflow: hidden;
  background: rgba(255,255,255,.10);
  border:none; border-top-left-radius:0; border-top-right-radius:0;
  border-bottom-left-radius:10px; border-bottom-right-radius:10px;
  backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%);
}
.fcg-select.open .fcg-list{ display:block; }

/* Пункты — плоские, во всю ширину, без скруглений */
.fcg-list li{
  padding:12px 14px; margin:0; width:100%; box-sizing:border-box;
  color:rgba(255,255,255,.95); cursor:pointer; background:transparent;
  transition: background .12s ease;  font-size: 14px; font-weight: 500; 
}
.fcg-list li+li{ border-top:1px solid rgba(255,255,255,.08); }
.fcg-list li:hover{ background: rgba(255,255,255,.12); }

/* Если поле БЕЗ иконки — убираем правый отступ */
.fcg-select.no-ico .fcg-trigger{ padding-right:14px; }


/* === Independent center + reserved space for side panels === */
:root{
  --contentMax: 1190px;
  --lpanelW: 380px;   /* left panel width */
  --rpanelW: 380px;   /* right panel width */
  --topbarH: 56px;
}

/* reserve space on BODY when panels are open (no overlay) */
body.with-left-panel  { padding-left:  var(--lpanelW); }
body.with-right-panel { padding-right: var(--rpanelW); }

/* fixed side panels live in the reserved area */

/* center container always centered; width from 100% (body padding already applied) */
.wrap{
  max-width: 1190px;  /* можно оставить как ограничение, если не хочешь растягивать бесконечно */
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

/* both panels open — nothing special to do; body has both paddings, so center remains centered */

/* small screens: allow overlay behavior (optional) */
@media (max-width: 1024px){
  body.with-left-panel, body.with-right-panel { padding-left: 0; padding-right: 0; }
  .wrap{ max-width: 100%; }
}



/* === Dark sheet only when user is authenticated === */
body.authed .wrap{
  background: rgba(10, 15, 25, 1.0);
  border-radius:0;                  /* без скруглений сверху/снизу */
  min-height:calc(100vh - 56px);    /* во всю высоту под топбаром */
  padding-bottom:40px;
}

/* До входа простыню не показываем, логотип скрыт */
body:not(.authed) .wrap{ background:none; box-shadow:none; }
body:not(.authed) .logoBox{ display:none; }

/* После входа логотип виден и уже центрируется текущим .logoBox */
body.authed .logoBox{ display:flex; }
/* Убрать внутренний паддинг справа, когда открыта правая панель */
body.with-comments-panel .wrap{
  padding-right: 0;
}

/* ===== Scroll only inside .wrap, body fixed-height ===== */
html, body { height: 100%; overflow: hidden; } /* выключаем скролл у body */

/* .wrap — собственный вертикальный скролл справа */
.wrap{
  /* размеры */
  height: calc(100vh - var(--topbarH, 56px));
  overflow-y: auto;                /* << вместо scroll */
  overflow-x: hidden;
  box-sizing: border-box;

  /* если раньше были боковые паддинги — верни нужные */
  /* padding: 0 24px 24px 24px; */
  
  /* стабильная полоса скролла, чтобы контент не прыгал */
  scrollbar-gutter: stable;
}

/* Стилизуем скролл .wrap (WebKit) */
.wrap::-webkit-scrollbar{
  width: 10px;                    /* толщина полосы внутри wrap */
}
.wrap::-webkit-scrollbar-track{
  background: rgba(255,255,255,0.04);
  border-left: 1px solid rgba(255,255,255,0.06);
}
.wrap::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.22);
  border-radius: 10px;
  border: 2px solid rgba(0,0,0,0);           /* тонкая дуга */
  background-clip: padding-box;
}
.wrap::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,0.30);
}

/* Стилизуем скролл .wrap (Firefox) */
.wrap{
  scrollbar-width: thin;                         /* тонкая полоса */
  scrollbar-color: rgba(255,255,255,0.30) rgba(255,255,255,0.08);
}

/* ===== Sticky header INSIDE .wrap ===== */
/* обёртка верхнего блока внутри wrap */
.wrap-header{
  position: sticky;
  top: 0;                               /* прилипает к верху .wrap, не окна */
  z-index: 5;                           /* поверх контента, но под панелями */
  
  /* фон под шапкой, чтобы контент не «просвечивал» при прокрутке */
  background: rgba(11, 15, 24, 0.92);
  backdrop-filter: saturate(130%) blur(6px);
  -webkit-backdrop-filter: saturate(130%) blur(6px);

  /* внутренние отступы шапки */
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* если логотип идёт первой строкой — центрируем его красиво */
.wrap-header .logoBox{
  display: grid;
  place-items: center;
  padding-bottom: 10px;
}

/* чтобы остальной контент шёл ниже */
.wrap-body{
  /* если нужно — верни свои отступы внутри основного тела */
  padding: 16px 20px 24px 20px;
}

/* ===== Боковые панели — собственный скролл (если ещё не сделано) ===== */
#projectsPanel, #commentsPanel{
  position: fixed;
  top: var(--topbarH, 56px);
  bottom: 0;
  display: flex;
  flex-direction: column;
}
#projectsPanel .panelBody,
#commentsPanel .panelBody{
  overflow: auto;                 /* << вместо scroll, чтобы не было «зазора» */
  scrollbar-gutter: stable;
}

/* Высота зоны логотипа после входа (можно подогнать) */
body.authed .logoBox{
  position: sticky;
  top: 0;
  z-index: 6;
  /* задаём «реальную» высоту, чтобы ниже лежащая .projHead знала отступ */
  min-height: var(--logoH);
/*  background: rgba(10, 15, 25, 1.0);*/
  display: grid;
  place-items: center;
}

/* Сама шапка проекта фиксируется сразу под логотипом */
body.authed .projHead{
/* background: rgba(10, 15, 25, 1.0); */
 position: sticky;
  top: var(--logoH, 0px);  /* при наличии логотипа — под ним */
  z-index: 5;
  padding: 12px 0;
  margin: 0;               /* чтобы не «дышала» при прилипаниях */
  /* тонкая разделяющая линия снизу для читабельности */
}

/* До входа (авторизация/регистрация) логотип не «липнет» и не нужен тёмный фон */
body:not(.authed) .logoBox{ position: static; background: transparent; min-height: 0; }

/* центр — собственная прокрутка справа, body не скроллится */
html, body { height: 100%; overflow: hidden; }
.wrap{
  height: calc(100vh - var(--topbarH, 56px));
  overflow-y: auto;      /* скролл здесь */
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  /* если были боковые паддинги/резервы под панели — оставь свои */
}

/* ЕДИНЫЙ липкий контейнер: и логотип, и шапка проекта */
.wrap-header{
  position: sticky;
  top: 0;                /* фиксируем относительно внутреннего скролла .wrap */
  z-index: 5;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Внутренние отступы шапки (единые для лого и заголовка) */
.wrap-header .logoBox{
  display: grid;
  place-items: center;
  padding: 12px 16px 8px;
}
.wrap-header .projHead{
  padding: 8px 16px 12px; /* название/клиент/дедлайн/кнопки */
}

/* НИЖЕ — тело страницы, которое скроллится */
.wrap-body{
  padding: 16px;         /* подгони под свой макет */
}

/* ОТМЕНА старых sticky, если ставили раньше на .logoBox/.projHead */
.logoBox{ position: static; }
.projHead{ position: static; }


/* === Make only the area below the header scroll === */

/* 1) .wrap — контейнер без скролла, растягивается от topbar до низа */
html, body { height: 100%; overflow: hidden; }
:root{ --topbarH: 56px; } /* если у тебя другая высота — подстрой или синхронизируй из JS */

.wrap{
  height: calc(100vh - var(--topbarH));
  display: flex;
  flex-direction: column;
  overflow: hidden;           /* ВАЖНО: не скроллим .wrap */
  /* оставь свои max-width/margin/padding как есть, если нужно */
}

/* 2) Единая шапка (logo + projHead) остаётся sticky (по желанию) и НЕ скроллится */
.wrap-header{
  position: sticky;
  top: 0;
  z-index: 5;
background: rgba(10, 15, 25, 1.0);
  /* padding/border — на твой вкус */
}

/* 3) .wrap-body — именно она скроллится и занимает остальное пространство */
.wrap-body{
  flex: 1 1 auto;             /* занять весь остаток вертикали под шапкой */
  min-height: 0;              /* ВАЖНО для корректной работы overflow в flex-контейнере */
  overflow: auto;             /* прокрутка теперь только здесь */
  scrollbar-gutter: stable;

  /* Стилизация скролла под UI */
}
.wrap-body::-webkit-scrollbar { width: 10px; }
.wrap-body::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.04);
  border-left: 1px solid rgba(255,255,255,0.06);
}
.wrap-body::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.22);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.wrap-body::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.30); }
.wrap-body{ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.30) rgba(255,255,255,0.08); }
/* === Panels: structure & scroll === */
:root{ --topbarH: 56px; } /* если уже есть — оставь своё значение */

#projectsPanel,
#commentsPanel{
  position: fixed;
  top: var(--topbarH);
  bottom: 0;
  width: var(--lpanelW, 380px); /* у правой можно переопределить ниже */
  display: flex;
  flex-direction: column;
  overflow: hidden;                 /* ВНЕ панелей не скроллим */
}

/* правая ширина, если отличается */
#commentsPanel{ width: var(--panelW, 380px); }

/* Внутри панели — «шапка» (если есть) и «тело», которое скроллится */
#projectsPanel .panelBody,
#commentsPanel .panelBody{
  flex: 1 1 auto;
  min-height: 0;                    /* Критично для overflow в flex-контейнере */
  overflow-y: auto;                 /* СКРОЛЛ ЗДЕСЬ */
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

/* === Scrollbar style (как у .wrap) — WebKit */
#projectsPanel .panelBody::-webkit-scrollbar,
#commentsPanel .panelBody::-webkit-scrollbar{
  width: 10px;
}
#projectsPanel .panelBody::-webkit-scrollbar-track,
#commentsPanel .panelBody::-webkit-scrollbar-track{
  background: rgba(255,255,255,0.04);
  border-left: 1px solid rgba(255,255,255,0.06);
}
#projectsPanel .panelBody::-webkit-scrollbar-thumb,
#commentsPanel .panelBody::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.22);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
#projectsPanel .panelBody::-webkit-scrollbar-thumb:hover,
#commentsPanel .panelBody::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,0.30);
}

/* === Scrollbar style — Firefox */
#projectsPanel .panelBody,
#commentsPanel .panelBody{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.30) rgba(255,255,255,0.08);
}

/* ОТМЕНЯЕМ возможные «глобальные скрывашки» скролла для панелей */
#projectsPanel .panelBody::-webkit-scrollbar,
#commentsPanel .panelBody::-webkit-scrollbar{
  display: initial !important; /* если где-то стоит display:none */
}
#projectsPanel .panelBody,
#commentsPanel .panelBody{
  scrollbar-width: thin !important; /* перебиваем scrollbar-width: none */
}

/* === Unified input style (drop-in) ===========================
   Use on: <input>, <select>, <textarea>
   Example: <input class="fc-input">
   ----------------------------------------------------------- */
.fc-input{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: var(--fc-h, 46px);
  padding: var(--fc-py, 12px) var(--fc-px-r, 14px) var(--fc-py, 12px) var(--fc-px-l, 14px);
  border: none;
  border-radius: var(--fc-radius, 8px);
  color: rgba(255,255,255,.95);
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  box-shadow: none;
  outline: none;
  font: inherit;
  transition: background .15s ease, box-shadow .15s ease;
  z-index: 1;
}

.fc-input::placeholder{ color: rgba(255,255,255,.45); }

/* Hover / Focus */
.fc-input:hover{ background: rgba(255,255,255,.14); }
.fc-input:focus{
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

/* Disabled / Readonly */
.fc-input[disabled],
.fc-input[readonly]{ opacity:.6; cursor:not-allowed; }

/* Error state */
.fc-input.is-invalid{
  box-shadow: inset 0 0 0 1px rgba(255,80,80,.5);
}

/* Number arrows off */
.fc-input[type="number"]::-webkit-outer-spin-button,
.fc-input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance: none; margin:0; }
.fc-input[type="number"]{ -moz-appearance: textfield; }

/* Select arrow (нативный select) */
select.fc-input{
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' \
stroke='rgba(255,255,255,0.85)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px 14px;
  padding-right: calc(var(--fc-px-r,14px) + 18px); /* место под стрелку */
}

/* Textarea (высота и поведение) */
textarea.fc-input{
  min-height: 92px;
  resize: vertical;
  line-height: 1.4;
}

/* Optional: compact / large sizes */
.fc-input--sm{ --fc-h: 36px; --fc-radius: 12px; --fc-py: 8px; }
.fc-input--lg{ --fc-h: 56px; --fc-radius: 16px; --fc-py: 14px; }

/* Optional right-icons (без обёрток): модификаторы с фоновыми иконками */
.fc-input--search{
  --fc-px-r: 36px;
  background-image:
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' \
stroke='rgba(255,255,255,0.85)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
}

.fc-input--edit{
  --fc-px-r: 36px;
  background-image:
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' \
stroke='rgba(255,255,255,0.85)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M12 20h9'/><path d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
}

/* Если где-то были старые правила, делающие инпуты прозрачнее/с рамками — перебьём: */
.proj-toolbar input.fc-input,
.modal input.fc-input,
.modal select.fc-input,
.modal textarea.fc-input{
  background: rgba(255,255,255,.10);
  border: none;
}
/* Обёртка под иконки */
.fc-input-wrap{ isolate: isolate;  position:relative; display:block; }

/* Иконка справа */
.fc-input-wrap .fc-input__icon{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  font-size:18px; line-height:1; color:rgba(255,255,255,.45); pointer-events:none;
}
/* Иконка слева */
.fc-input-wrap .fc-input__icon--l{
  left:12px; right:auto;
}
.fc-input__icon--l{
  font-weight: 300;
z-index: 3; 
}
/* Когда иконка справа — даём место вводу */
.fc-input--has-ricon{ --fc-px-r: 36px; }
/* Когда иконка слева — даём место слева */
.fc-input--has-licon{ --fc-px-l: 36px; }

/* По желанию: вращать стрелку при раскрытии (для кнопок/селектов) */
.fc-rotates[aria-expanded="true"] .fc-input__icon{ transform:translateY(-50%) rotate(180deg); }

/* Center value when there's NO label inside the fcg-select */
.fcg-select:not(:has(> label)) .fcg-trigger{
  position: relative;
}
.fcg-select:not(:has(> label)) .fcg-value{
  position: absolute;
  top: 35%;
  margin: 0;               /* на всякий */
}
/* Fallback: add .fcg--nolabel to the wrapper */
.fcg-select.fcg--nolabel .fcg-value{
  margin: 0;
}


/* ===== Members screen layout ===== */
.members-split{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap:14px;
}
.members-col, .roles-col{
  background: rgba(255,255,255,.02);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  min-height: 380px;
}

/* Member row */
.member-row{
  display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap:10px;
  padding:8px 10px; border:1px solid var(--line); border-radius:10px;
  background: rgba(255,255,255,.02); margin-bottom:8px;
  cursor: grab;
}
.member-row:active{ cursor: grabbing; }
.member-name{ font-weight:600; }
.member-sub{ color:var(--muted); font-size:12px; }
.member-chats{ display:flex; gap:6px; color:#9cc; }
.member-chats .ri-whatsapp-fill{ color:#25D366; }
.member-chats .ri-telegram-fill{ color:#24A1DE; }

/* Color dot (label) */
.dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.dot.red{ background:#c0392b; }
.dot.orange{ background:#e67e22; }
.dot.yellow{ background:#f1c40f; }
.dot.green{ background:#27ae60; }
.dot.blue   { background:#2980b9; }
.dot.purple { background:#8e44ad; }

/* Roles list */
.roles-list .role-row{
  padding:8px 10px; border:1px solid var(--line); border-radius:10px;
  background: rgba(255,255,255,.02); margin-bottom:8px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.roles-list .role-row .count{ color:var(--muted); font-size:12px; }
.roles-list .role-row.droptarget{
  outline:1px dashed var(--blue); background: rgba(99,199,255,0.12);
}

/* simple inputs (reuse) */
.fc-input-wrap{ position:relative; }
.fc-input{ width:100%; background:#0b0f15; color:#fff; border:1px solid var(--line); border-radius:10px; padding:8px 12px; }
.fc-input--has-licon{ padding-left:36px; }
.fc-input__icon{ position:absolute; left:10px; top:50%; transform:translateY(-50%); color:#8aa; }

/* Responsive */
@media (max-width: 980px){
  .members-split{ grid-template-columns: 1fr; }
}
/* === Comments panel visibility contract === */
#commentsPanel { display: none; }
#commentsPanel.open { display: flex !important; }

/* Если у тебя сдвиг центра завязан на правую панель — делаем по флагу right-open */
body.right-open .with-right-panel-shift { margin-right: var(--rpanelW, 360px); }
body:not(.right-open) .with-right-panel-shift { margin-right: 0 !important; }


/* ===== Project Settings: macOS-like label dots ===== */
#settingsLabelDots { user-select: none; }

#settingsLabelDots .ps-cap{
  font-size: 12px;
  line-height: 1;
  color: var(--muted, #8b8b8b);
  margin-right: 2px;
}

/* === Label dots: общий стиль для settings / member-list / member-modal === */
.ps-dots{
  display: flex;
  align-items: center;
  gap: 8px;
}

.ps-dot{
  width: 14px;
  height: 14px;
  border-radius: 50%;
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  line-height: 0;
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative; /* для ::after */
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease, opacity .14s ease;
  will-change: transform;
}

.ps-dot:hover{ transform: scale(1.14); }

.ps-dot.is-active{
  transform: scale(1.18);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.85),
    0 0 0 0px rgba(255,255,255,0.18);
}

/* “+” по центру при ховере */
.ps-dot::after{
  content: '+';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity .12s ease, transform .12s ease;
  pointer-events: none;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 0 2px rgba(0,0,0,0.35);
}
.ps-dot:hover::after{ opacity: .95; transform: scale(1); }

/* None — контур без заливки и менее заметный плюс */
.ps-none{
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.35);
}
.ps-none::after{
  color: rgba(255,255,255,0.7);
  text-shadow: none;
}

/* Focus */
.ps-dot:focus, .ps-dot:focus-visible{ outline: none; }

/* Цвета */
.ps-red    { background: #e74c3c; }
.ps-yellow { background: #f1c40f; }
.ps-green  { background: #2ecc71; }
.ps-blue   { background: #3498db; }   /* добавлен общий синий */
.ps-purple { background: #9b59b6; }   /* добавлен общий фиолетовый */
.ps-orange { background: #e67e22; }   /* чтобы совпадало с точкой .dot.orange */

/* === Comments panel visibility (single source of truth) === */
#commentsPanel { display: none; }
#commentsPanel.open { display: flex !important; }



/* roles toolbar + строки ролей */
.roles-list .role-row { display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; }
.roles-list .role-row.active { background: rgba(255,255,255,.06); border-radius:12px; }
.roles-list .role-row .role-actions { display:flex; align-items:center; gap:8px; }
.roles-list .count { display:flex; align-items:center; gap:6px; }

/* ==== Members header: перенос чипсов вправо и выравнивание по центру ==== */
#members-screen .members-col .members-header{
  display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;
}

/* ==== Roles: All members как карточка роли ==== */
#rolesList .roles-toolbar { margin-bottom:8px; }
#rolesList .roles-toolbar .role-row.all { width:100%; }


/* --- Invite Modal --- */
.icon-btn { display:inline-flex; align-items:center; gap:.35rem; padding:.6rem .6rem; border:0; background:var(--glass,rgba(255,255,255,.06)); border-radius:10px; cursor:pointer }
.icon-btn i {color: var(--cool); font-size:18px; line-height:1 }
.icon-btn:hover{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }

.small-icon-btn { display:inline-flex; align-items:center; opacity:0.4; gap:.5rem; padding:.0rem .0rem; border:0; background:var(--glass,rgba(255,255,255,.00));  cursor:pointer }
.small-icon-btn i {color: var(--cool); font-size:13px; line-height:1 }
.small-icon-btn:hover{ color: var(--cool); opacity:1.0; }

.role-perms { display:inline-flex; align-items:center; opacity:0.4; gap:.5rem; padding:.0rem .0rem; border:0; background:var(--glass,rgba(255,255,255,.00));  cursor:pointer }
.role-perms i {color: var(--lgray); font-size:16px; line-height:1 }
.role-perms:hover{ color: var(--cool); opacity:1.0; }

.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; z-index:1000 }
.modal-window { background:rgba(20,20,25,.9); backdrop-filter: blur(12px); border:1px solid rgba(255,255,255,.08); border-radius:16px; color:#fff; }
.modal-window--fixed { width: 920px; height: 620px; display:flex; flex-direction:column; }

.modal-header { padding:14px 16px; display:flex; align-items:center; gap:12px; border-bottom:1px solid rgba(255,255,255,.08) }
.modal-title { font-weight:600; font-size:16px }
.modal-close { margin-left:auto; font-size:24px; line-height:1; background:none; border:0; color:#ccc; cursor:pointer }

.invite-top { padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.08) }
.invite-top__title { font-size:12px; color:#9aa; margin-bottom:8px }
.chips { display:flex; flex-wrap:wrap; gap:8px }
.chip { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:8px; font-size:12px }
.chip .chip-actions { display:inline-flex; gap:6px }
.chip .chip-btn { background:none; border:0; color:#cbd; cursor:pointer }
.chip .chip-btn:hover { color:#fff }

.invite-body { flex:1; display:grid; grid-template-columns: 1fr 2fr; gap:0; min-height:0 }
.invite-left, .invite-right { padding:12px 16px; overflow:auto }
.invite-left { border-right:1px solid rgba(255,255,255,.08) }

.invite-section-title { font-size:12px; color:#9aa; margin-bottom:8px }
.muted { color:#9aa; margin-left:6px }

.tree { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px }
.tree .tree-item { width:100%; text-align:left; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); color:#e6e6e6; padding:8px 10px; border-radius:10px; cursor:pointer }
.tree .tree-item.is-active { outline:2px solid rgba(120,150,255,.5) }

.invite-footer { padding:12px 16px; border-top:1px solid rgba(255,255,255,.08); display:flex; gap:10px; align-items:center }
.btn { border:0; border-radius:8px; padding:8px 12px; cursor:pointer }
.btn-primary { background:var(--cool); color:#fff }
.btn-primary:disabled { opacity:.5; cursor:not-allowed }
.btn-secondary { background:rgba(255,255,255,.08); color:#fff }
.spacer { flex:1 }
.modal-overlay[hidden]{ display:none !important; }
.invite-member-row { display:flex; align-items:center; justify-content:space-between; padding:6px 8px; border-radius:8px; cursor:pointer; }
.invite-member-row:hover { background: var(--fc-surface-2, rgba(255,255,255,.04)); }

.invite-member-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.tg-on  { color:#2AABEE; opacity:1; }
.tg-off { color:var(--fc-muted, #8b8b8b); opacity:.6; }
.assign-item { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.assign-item .tg.on  { color:#1d9bf0; }  /* голубая, когда подключён бот */
.assign-item .tg.off { color:#6b7280; }  /* серая, когда нет */

/* === Invite modal: members list & controls === */
#inviteMembersList {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* строка пользователя */
#inviteMembersList .user-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: #1b1c21;
  color: #e7e7e7;
  text-align: left;
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
#inviteMembersList .user-item:hover {
  background: #202228;
  border-color: rgba(255,255,255,0.16);
}
#inviteMembersList .user-item.is-active {
  background: #262a33;
  border-color: #6ea8fe;
  box-shadow: inset 0 0 0 1px #6ea8fe;
}

/* текстовые части */
#inviteMembersList .user-title {
  font-weight: 600;
  font-size: 14px;
}
#inviteMembersList .user-sub {
  font-size: 12px;
  opacity: .7;
  margin-left: 6px;
}

/* иконка TG справа */
#inviteMembersList .tg-badge {
  margin-left: auto;
  font-size: 18px;
  opacity: .6;
}
#inviteMembersList .tg-badge.is-on  { color: #2aa4f4; opacity: 1; }
#inviteMembersList .tg-badge.is-off { color: #8e93a3; }

/* поиск и сортировка */
#inviteSearch,
#inviteSort {
  width: 100%;
  box-sizing: border-box;
  height: 40px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: #14161b;
  color: #e7e7e7;
  outline: none;
}
#inviteSearch::placeholder { color: #8e93a3; }
#inviteSearch:focus,
#inviteSort:focus { border-color: rgba(110,168,254,.8); box-shadow: 0 0 0 3px rgba(110,168,254,.15); }

/* chips for label filters in invite modal */
#inviteLabelFilters { display:flex; gap:8px; flex-wrap:wrap; margin:8px 0; }
#inviteLabelFilters .chip {
  padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.1);
  background:#1b1c21; color:#e7e7e7; cursor:pointer; font-size:12px;
}
#inviteLabelFilters .chip.is-active {
  border-color:#6ea8fe; box-shadow:inset 0 0 0 1px #6ea8fe; background:#222834;
}
/* карточка в модалке назначения — как в members-list */
.member-card{
  display:flex; flex-direction:column; gap:6px;
  background: rgba(255,255,255,.02);
  border: 0px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}
.member-row.selected .member-card{
  background: rgba(255,255,255,.05);
  box-shadow: 0 0 0 0px rgba(108,120,133,0.38);
}
.m-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.m-left{ display:flex; align-items:center; gap:8px; min-width:0; }
.m-name{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-right{ display:flex; align-items:center; gap:12px; }
.m-roles{ margin-top:2px; }

/* Invite modal: one-line member row */
.invite-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 16px;
  border-radius:14px;
  background:var(--panel);
  box-shadow: var(--shadow-1);
  margin:8px 0;
}
.invite-row.selected{ outline:2px solid var(--cool); }

.inv-left{ display:flex; align-items:center; gap:12px; }
.inv-main{ display:flex; flex-direction:column; }
.inv-name{ font-weight:700; }
.inv-roles{ opacity:.75; font-size:.95em; }

.inv-right{ display:flex; align-items:center; gap:12px; }
.inv-right .ok{ color:var(--cool); }
.inv-right .off{ opacity:.45; }
.inv-right .err{ color:var(--grayl); }

/* кружок-лейбл уже стилизован классом .dot и его цветами; .dot.none — серый */
.dot.none{ background:#666; }

/* Invite modal cards */
.invite-card{
  display:flex; align-items:flex-start; gap:16px;
  padding:12px 12px; margin:4px 10px; margin-right: 40px;
  border-radius:8px;
  background: var(--pane-2);
  border:1px solid rgba(255,255,255,.06);
  transition: background .15s ease, border-color .15s ease;
  cursor:pointer;
}
.invite-card:hover{ background: var(--pane-3); border-color: rgba(255,255,255,.12); }
.invite-card.is-picked{ outline:2px solid var(--cool); outline-offset:0; }

.invite-card .left{ display:flex; align-items:flex-start; gap:12px; flex:1 1 auto; min-width:0; }
.invite-card .dot{ width:10px; height:10px; border-radius:50%; flex:0 0 10px; margin-top: 5px; }
.invite-card .name{ font-weight:600; font-size:18px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;display: flex; align-items: center; gap: 8px;  }
.invite-card .roles{ margin-top:4px; font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.invite-card .right{ display:flex; align-items:center; gap:14px; flex:0 0 auto; padding-left:12px; }
.invite-card .right i.ok{ color: var(--cool); }
.invite-card .right i.absent{ color: var(--grayl); }
.invite-card .warn{ color:var(--yelow); margin-left:8px; }
/* Invite modal — roles list look/behaviour */
#inviteRolesList .role-item{
  appearance:none; -webkit-appearance:none;
  background: var(--panel-2);
  border: 1px solid var(--panel-3);
  color: var(--text);
  width: 100%;
  padding: 10px 14px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;   /* текст слева, счетчик+иконка справа */
  gap: 12px;
}

/* левая часть (название роли) */
#inviteRolesList .role-item .r-left{
  display:flex; align-items:center; gap:10px; min-width:0;
}
#inviteRolesList .role-item .r-name{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* правая часть (счетчик + иконка) */
#inviteRolesList .role-item .r-right{
  display:flex; align-items:center; gap:8px; color:var(--muted);
}
#inviteRolesList .role-item .count{
  min-width: 2ch;                     /* чтобы цифры не «скакали» */
  text-align: right;
  font-variant-numeric: tabular-nums; /* ровные цифры */
}

/* активная роль */
#inviteRolesList .role-item.is-active{
  border-color: var(--cool);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--cool), transparent);
}
/* quick debug helpers for stage modal */
#stageModal {
  z-index: 800 !important;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
#stageModal.hidden { display: none; }
#stageModal[style] { /* allow inline display:block to work */ }
/* контейнер для выбранных ответственных */
.chipbox {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

/* список мини-карточек (используем уже существующую invite-card) */
.mini-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow: auto;
}

/* invite-card уже есть, просто подсветим выбранную */
.invite-card.is-picked {
  outline: 2px solid var(--cool);
  outline-offset: 0;
}
/* Stage actions: fix icon overlap by keeping buttons static inside absolute container */
.stage { position: relative; }

.stage-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 10px;             /* space between icons */
}

.stage-actions .stage-eye,
.stage-actions .stage-gear {
  position: static;      /* NOT absolute */
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s ease, color .15s ease;
  color: rgba(255,255,255,0.7);
  font-size: 18px;
  line-height: 1;
}

.stage:hover .stage-actions .stage-eye,
.stage:hover .stage-actions .stage-gear {
  opacity: 1;            /* reveal on hover */
}

.stage-actions .stage-eye:hover,
.stage-actions .stage-gear:hover {
  color: #fff;
}
/* Dim hidden stages for owner */
/* Dim hidden stages but keep them interactive */
.stage.is-hidden {
  opacity: 0.45;
  filter: grayscale(70%);
  /* no pointer-events here — we want hover/click to work */
}

.stage.is-hidden .stage-title,
.stage.is-hidden .stage-meta {
  color: rgba(255,255,255,0.55);
}

/* Always show action icons on hidden stages */
.stage.is-hidden .stage-actions .stage-eye,
.stage.is-hidden .stage-actions  {
  opacity: 1;
}}

.stage.is-hidden .stage-badge {
  color: #aaa;
  opacity: 1;
}
.stage-badge {
  font-size: 11px;
  color: #ccc;
  margin-left: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
/* Comments composer docked to the right panel bottom */
#reviewDock {
  position: sticky;
  bottom: 0;
  border-top: 1px solid var(--line);
  background: var(--bg, rgba(0,0,0,0.35));
  backdrop-filter: blur(6px);
  padding: 10px 12px;
  z-index: 2;
}

/* Make sure the panel can scroll with composer on bottom */
.panel-comments,
#commentsPanel,
.wrap .right {
  display: block;
  overflow-y: auto;
}

/* Optional: compact inputs inside the dock */
#reviewDock input[type="text"],
#reviewDock textarea {
  width: 100%;
  min-height: 40px;
  resize: vertical;
}
/* Timecode toggle — clean final styles */
#commentDock #timeToggle {
  background: none;
  border: none;                 /* no square */
  cursor: pointer;
  transition: opacity .15s ease, transform .15s ease;
  padding: 0;                   /* compact */
}

#commentDock #timeToggle::before,
#commentDock #timeToggle::after {
  content: none !important;     /* kill any legacy pseudo-icons */
}

#commentDock #timeToggle i {
  color: var(--cool);
  font-size: 22px;
  line-height: 1;
  display: inline-block;
}

#commentDock #timeToggle:hover { opacity: .85; transform: scale(1.04); }
#commentDock #timeToggle.active { opacity: 1; }
#commentDock #timeToggle:not(.active) { opacity: .6; }
/* Comments disabled notice (right panel bottom) */
#commentDock .comments-disabled {
  position: sticky;
  bottom: 0;
  background: rgba(9,12,17,.96);
  border-top: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 6px;
}
#commentDock .comments-disabled .cd-title {
  font-weight: 600;
}
#commentDock .comments-disabled .cd-note {
  color: rgba(255,255,255,0.65);
  font-size: 13px;
}
#commentDock .comments-disabled .cd-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}
.stage-actions .stage-comments-toggle {
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s ease, color .15s ease, transform .15s ease;
}
.stage:hover .stage-actions .stage-comments-toggle { opacity: 1; }
.stage-actions .stage-comments-toggle:hover { color: #fff; transform: scale(1.06); }
.stage-actions .stage-comments-toggle i { color: var(--cool); font-size: 18px; line-height: 1; }
/* Active approval round card */
.stage.stage-video.is-active {
  outline: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
}
/* StagePolicy modal – minimal, scoped by #stage-policy-modal */
#stage-policy-modal.hidden { display: none; }
#stage-policy-modal .modal__backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.35);
}
#stage-policy-modal .modal__card{
  position:fixed; inset:10% auto auto 50%;
  transform:translateX(-50%);
  background:#fff; color:#111; width:640px; max-width:92vw;
  border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.2);
}
#stage-policy-modal .modal__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid #eee;
}
#stage-policy-modal .modal__body{ padding:16px; }
#stage-policy-modal .modal__close{ background:none; border:0; cursor:pointer; font-size:20px; }
#stage-policy-modal .sp-label{ display:block; font-size:12px; color:#555; margin:10px 0 6px; }
#stage-policy-modal .sp-input{
  width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:8px; outline:none;
}
#stage-policy-modal .sp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
#stage-policy-modal .sp-actions{ display:flex; gap:8px; margin-top:14px; }
#stage-policy-modal .btn{ padding:8px 12px; border-radius:8px; border:1px solid #ddd; cursor:pointer; }
#stage-policy-modal .btn--primary{ background:var(--cool, #2b7cff); color:#fff; border-color:transparent; }
#stage-policy-modal .sp-hint{ font-size:12px; color:#666; margin:8px 0 0; }
#stage-policy-modal .sp-toast{ margin-top:10px; font-size:12px; color:#111; }

.popover {
  position: fixed;       /* чтобы не попадал под оверлей модалки */
  z-index: 10000;        /* поверх модалки */
  display: none;
  min-width: 240px;
  padding: 10px 12px;
  background: rgba(14,20,28,.98);
  border: 1px solid var(--line, #2a2f3a);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  color: #e5e7eb;
}
.popover__title {
  font-size: 13px;
  color: #9ca3af;
  margin-bottom: 6px;
}
.popover label {
  font-size: 13px;
  display: block;
  line-height: 1.25;
}
.popover input[type="checkbox"] {
  vertical-align: middle;
  margin-right: 6px;
}
.popover--open{ display:block; }


/* Activity log / Project activity modal styles (pa- prefix)
   Сделано: модалка шире, фильтр в шапке (header). */
.pa-icon-btn { display:inline-flex; align-items:center; gap:.35rem; padding:.6rem .6rem; border:0; background:transparent; border-radius:10px; cursor:pointer; color:var(--cool, #0ACCAC); }
.pa-icon-btn i { color: var(--cool, #0ACCAC); font-size:18px; line-height:1; }
.pa-icon-btn:hover { background: rgba(255,255,255,.02); border-color: rgba(255,255,255,.04); }



.pa-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 12000;
  padding: 18px;
  overflow: auto;
}

/* Модалка растягивается почти на всю ширину экрана, с отступами */
.pa-modal-window {
  background: rgba(18,20,24,0.96);
  border: 1px solid rgba(255,255,255,0.03);
  border-radius: 12px;
  color: #e8edf4;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

/* Если нужно фиксированное большое окно — оставляем опционально */
.pa-modal-window--fixed {
  width: 920px;
  height: 620px;
  max-width: calc(100% - 40px);
  max-height: calc(100% - 40px);
}
/* Header: title + filter + controls */
.pa-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
}
.pa-modal-title {
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  margin: 0;
  flex: 0 0 auto;
}
.pa-header-filter-wrap {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 160px;
}
.pa-header-filter {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.04);
  background: rgba(255,255,255,0.01);
  color: #e7eef4;
  outline: none;
  font-size: 14px;
}
.pa-header-filter::placeholder { color: rgba(231,238,244,0.42); }

.pa-modal-close {
  margin-left: 12px;
  font-size: 20px;
  line-height: 1;
  background: transparent;
  border: none;
  color: rgba(10,204,172,0.30);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
}
.pa-modal-close:hover { background: rgba(255,255,255,0.02); color:rgba(10,204,172,1); }

/* Body: table occupies width */
.pa-modal-body {
  padding: 12px 16px;
  overflow: auto;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pa-al-table-wrap { width: 100%; overflow: auto; background: transparent; }

/* Table */
.pa-al-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: #e7eef4;
}
.pa-al-table thead th {
  text-align: left;
  padding: 10px 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  font-size: 12px;
 position: sticky;
  top: 0; /* relative to the scrolling container (.pa-al-table-wrap) */
  z-index: 5; /* above table rows but below modal header if needed */
  background: linear-gradient(180deg, rgba(18,20,24,0.98), rgba(18,20,24,0.96));

  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.pa-al-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px dashed rgba(255,255,255,0.02);
  vertical-align: top;
  word-break: break-word;
}

.pa-al-ts { color: #9aa0a6; font-size: 12px; white-space: nowrap; }
.pa-al-actor-name { font-weight: 700; color: #fff; }
.pa-al-actor-owner { font-size: 12px; color: #9aa0a6; }
.pa-al-msg-text { white-space: pre-wrap; word-break: break-word; color: #e7eef4; }
.pa-al-muted { color: #8f98a2; font-size: 13px; }
.pa-al-loading { padding: 18px; text-align: center; color: #9aa0a6; }
.pa-al-error { padding: 12px; color: #f28b82; text-align: center; }

/* Footer */
.pa-modal-footer {
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,0.03);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pa-al-pagination { display: flex; gap: 8px; align-items: center; }
.pa-al-page-info { color: #9aa0a6; font-size: 13px; }
.pa-al-count { color: #9aa0a6; font-size: 13px; }
.pa-btn { cursor: pointer; padding: 8px 12px; border-radius: 8px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.03); color: #e7eef4; }
.pa-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Highlight sample */
.pa-action-stage-created { background: linear-gradient(90deg, rgba(32,255,99,0.08), transparent); }
.pa-action-stage-deleted { background: linear-gradient(90deg, rgba(255,80,80,0.08), transparent); }
.pa-action-role-permissions-updated { background: linear-gradient(90deg, rgba(99,150,255,0.03), transparent); }

/* ---------------------------
   SCROLLBAR STYLING (visible + themed)
   - WebKit browsers (Chrome, Edge, Safari)
   - Firefox (scrollbar-color + scrollbar-width)
   --------------------------- */

/* WebKit: modal body (vertical) and table wrap scrollbars */
.pa-modal-body::-webkit-scrollbar,
.pa-al-table-wrap::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

/* Track (the "rail") */
.pa-modal-body::-webkit-scrollbar-track,
.pa-al-table-wrap::-webkit-scrollbar-track {
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
  border-left: 1px solid rgba(255,255,255,0.02);
  border-radius: 999px;
}

/* Corner (where horizontal + vertical meet) */
.pa-modal-body::-webkit-scrollbar-corner,
.pa-al-table-wrap::-webkit-scrollbar-corner {
  background: transparent;
}

/* Thumb (the draggable handle) */
.pa-modal-body::-webkit-scrollbar-thumb,
.pa-al-table-wrap::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(10,204,172,0.22), rgba(99,150,255,0.14));
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,0);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}

/* Thumb hover/focus */
.pa-modal-body::-webkit-scrollbar-thumb:hover,
.pa-al-table-wrap::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(10,204,172,0.30), rgba(99,150,255,0.20));
}

/* Narrower horizontal scrollbar for table when horizontal content present */
.pa-al-table-wrap::-webkit-scrollbar:horizontal { height: 10px; }

/* Firefox: colour + width */
.pa-modal-body,
.pa-al-table-wrap {
  scrollbar-width: thin;
  scrollbar-color: rgba(10,204,172,0.32) rgba(0,0,0,0.12);
}

/* For better contrast when hovering over the container, give subtle glow */
.pa-modal-body:hover::-webkit-scrollbar-thumb,
.pa-al-table-wrap:hover::-webkit-scrollbar-thumb {
  filter: brightness(1.08);
  transform: none;
}

/* Accessibility: ensure keyboard focus shows thumb change */
.pa-modal-body:focus-within::-webkit-scrollbar-thumb,
.pa-al-table-wrap:focus-within::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 0 2px rgba(10,204,172,0.12);
}

/* Small screens */
@media (max-width: 900px) {
  .pa-modal-window { width: calc(100vw - 20px); border-radius: 8px; }
  .pa-modal-header { padding: 10px; }
  .pa-header-filter { font-size: 13px; }
}

/* Helper fallback for floating button */
.pa-floating { position: fixed; top: 12px; right: 12px; z-index: 13000; background: rgba(255,255,255,0.02); border-radius: 10px; padding: 8px; }

/* Small utilities */
.pa-hidden { display: none !important; }


/* Icon container on the right */
.member-right { position: relative; display:flex; align-items:center; gap:8px; }

/* Link icon initially hidden, appears on hover of card */
.member-card .icon-invite { opacity:0; transition: opacity .12s ease; cursor:pointer; }
.member-card:hover .icon-invite { opacity:1; }

/* Status text style */
.invite-status { font-size: 12px; color: var(--muted); margin-left:8px; }

/* Registered icon color */
.icon-registered { color: var(--cool); }

/* Small icon common style */
.member-icon { font-size: 18px; margin-left:6px; }
/* show invite (link) icon only on hover */
.invite-card .icon-invite,
.member-card .icon-invite {
  opacity: 0;
  transition: opacity .12s ease;
  cursor: pointer;
  font-size: 18px;
}
.invite-card:hover .icon-invite,
.member-card:hover .icon-invite {
  opacity: 1;
}

/* registered icon color */
.icon-registered { color: var(--cool); }

/* disabled visual state for invite icon */
.icon-disabled { opacity: 0.45 !important; pointer-events: none !important; }


/* Minimal styles for Invite modal */
.invite-btn {
  padding: 6px 12px;
  background: #0b69ff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}
.invite-modal { display:none; position:fixed; inset:0; z-index:1100; }
.invite-modal[aria-hidden="false"] { display:block; }
.invite-modal-backdrop {
  position: absolute; inset:0; background: rgba(0,0,0,0.45);
}
.invite-modal-panel {
  position: absolute;
  top: 8%; left:50%;
  transform: translateX(-50%);
  width: 720px;
  max-width: 96%;
  background: #fff;
  border-radius: 8px;
  padding: 18px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}
.invite-close { position:absolute; right:10px; top:8px; background:transparent; border:none; font-size:22px; cursor:pointer; }
.invite-tabs { margin: 8px 0 12px; }
.invite-tabs .tab { background:transparent; border:1px solid #ddd; padding:6px 10px; margin-right:6px; border-radius:4px; cursor:pointer; }
.invite-tabs .tab.active { background:#0b69ff; color:#fff; border-color:#0b69ff; }
.invite-content label { display:block; margin:8px 0; font-size:13px; color:#333; }
.invite-content input[type="text"], .invite-content input[type="number"], .invite-content select, .invite-content input[type="email"] {
  width:100%; padding:8px; box-sizing:border-box; margin-top:6px; border:1px solid #ccc; border-radius:4px;
}
.book-items { max-height:260px; overflow:auto; border:1px solid #eee; padding:8px; margin-top:8px; }
.book-row { display:flex; align-items:center; gap:8px; padding:6px; border-bottom:1px dashed #f0f0f0; }
.book-row .book-name { font-weight:600; margin-right:8px; }
.email-result { margin-top:12px; padding:10px; background:#f7f9ff; border:1px solid #e6eeff; border-radius:6px; }
.invite-link { display:flex; gap:6px; align-items:center; }
.invite-link input { flex:1; padding:8px; border:1px solid #ccc; border-radius:4px; }
.invite-link button { padding:6px 10px; background:#0b69ff; color:#fff; border:none; border-radius:4px; cursor:pointer; }
.empty { color:#777; padding:8px; }
.book-actions, .email-actions { margin-top:10px; display:flex; gap:8px; align-items:center; }
.book-invite-btn, .email-invite-btn { padding:8px 12px; background:#09a24b; color:#fff; border:none; border-radius:4px; cursor:pointer; }
.book-invite-btn[disabled] { opacity:0.6; cursor:not-allowed; }