/* ============================================================================
   LaterDrop — base.css
   Фундамент: токены, сброс, типографика, кнопки, поля, чипы, теги, бейджи,
   карточки, полоса пути, таблицы, состояния.

   Палитра: холодный «приборный» интерфейс. Графитовые чернила, электрокобальт
   как единственный акцент действия, янтарь для «в пути», зелёный для
   «доставлено», фиолетовый для повтора.
   ========================================================================= */

/* ===== Токены ===== */
:root{
  /* Поверхности */
  --bg:            #EEF1F6;
  --bg-2:          #E4E9F0;
  --surface:       #FFFFFF;
  --surface-2:     #F6F8FB;
  --surface-3:     #EDF1F7;

  /* Чернила */
  --ink:           #0C1420;
  --ink-2:         #4C596B;
  --ink-3:         #8794A6;
  --ink-4:         #B4BECC;
  --ink-invert:    #FFFFFF;

  /* Линии */
  --line:          #DDE3EC;
  --line-2:        #C9D2DF;
  --line-dark:     #253044;

  /* Бренд и действие */
  --brand:         #1B4DFF;
  --brand-hover:   #1640D6;
  --brand-ink:     #0B2A99;
  --brand-soft:    #E8EDFF;
  --brand-line:    #C2D0FF;

  /* Каналы доставки */
  --mail:          #4F5BD5;
  --mail-soft:     #EAECFB;
  --mail-line:     #C9CDF2;
  --tg:            #1E9BD7;
  --tg-soft:       #E2F4FC;
  --tg-line:       #B6E2F4;

  /* Смысловые */
  --ok:            #0B8F62;
  --ok-soft:       #E0F6ED;
  --ok-line:       #A8E0C9;
  --warn:          #B26A06;
  --warn-soft:     #FCF2E0;
  --warn-line:     #F0D6A4;
  --danger:        #C8342B;
  --danger-soft:   #FCEAE8;
  --danger-line:   #F2BFBA;
  --repeat:        #6D30D9;
  --repeat-soft:   #F1E9FE;
  --repeat-line:   #D8C4F8;

  /* Тёмный каркас (сайдбар кабинетов) */
  --shell:         #0C1420;
  --shell-2:       #16202F;
  --shell-3:       #1F2B3D;
  --shell-line:    #253044;
  --shell-ink:     #E6EBF2;
  --shell-ink-2:   #8D9BAD;
  --shell-brand:   #5B82FF;

  /* Тени */
  --sh-1: 0 1px 2px rgba(12,20,32,.06), 0 1px 3px rgba(12,20,32,.04);
  --sh-2: 0 4px 12px rgba(12,20,32,.07), 0 1px 3px rgba(12,20,32,.05);
  --sh-3: 0 12px 32px rgba(12,20,32,.10), 0 2px 8px rgba(12,20,32,.06);
  --sh-pop: 0 16px 48px rgba(12,20,32,.16);

  /* Радиусы */
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-4: 20px;
  --r-pill: 999px;

  /* Шрифты */
  --font-display: 'Space Grotesk', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  /* Ритм */
  --wrap: 1180px;
  --wrap-narrow: 860px;
}

/* ===== Сброс ===== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body,h1,h2,h3,h4,p,ul,ol,li,figure,blockquote,dl,dd{ margin:0; }
ul,ol{ padding:0; list-style:none; }
img,svg{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }

/* ===== Базовая типографика ===== */
body{
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.55;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.02em;
  color:var(--ink);
}

/* Цифры, даты, суммы — моноширинный, чтобы столбцы не «плясали» */
.mono{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}

/* ===== Доступность ===== */
:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
  border-radius:var(--r-1);
}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ===== Служебные утилиты ===== */
.muted{ color:var(--ink-2); }
.muted-3{ color:var(--ink-3); }
.tight{ margin-top:0; }
.nowrap{ white-space:nowrap; }
.hidden{ display:none !important; }
[hidden]{ display:none !important; }
.full{ width:100%; }

/* =====================================================================
   Кнопки
   ===================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 18px;
  border-radius:var(--r-2);
  border:1px solid transparent;
  font-family:var(--font-body);
  font-size:14px; font-weight:600; line-height:1;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color .15s, border-color .15s, color .15s, transform .05s, box-shadow .15s;
}
.btn:active{ transform:translateY(1px); }
.btn[disabled],.btn[aria-disabled="true"]{ opacity:.5; cursor:not-allowed; transform:none; }

.btn-primary{ background:var(--brand); color:#fff; box-shadow:0 1px 2px rgba(27,77,255,.25); }
.btn-primary:hover{ background:var(--brand-hover); }

.btn-ghost{ background:var(--surface); color:var(--ink); border-color:var(--line-2); box-shadow:var(--sh-1); }
.btn-ghost:hover{ border-color:var(--ink-4); background:var(--surface); }

.btn-subtle{ background:var(--surface-3); color:var(--ink); }
.btn-subtle:hover{ background:var(--bg-2); }

.btn-outline{ background:transparent; color:var(--brand); border-color:var(--brand-line); }
.btn-outline:hover{ background:var(--brand-soft); }

.btn-danger{ background:var(--danger); color:#fff; }
.btn-danger:hover{ background:#AC2A22; }

.btn-danger-ghost{ background:var(--surface); color:var(--danger); border-color:var(--danger-line); }
.btn-danger-ghost:hover{ background:var(--danger-soft); }

/* На тёмном сайдбаре */
.btn-onShell{ background:var(--shell-3); color:var(--shell-ink); border-color:var(--shell-line); }
.btn-onShell:hover{ background:#28374C; }

.btn-sm{ padding:8px 13px; font-size:13px; border-radius:var(--r-1); }
.btn-lg{ padding:14px 26px; font-size:15px; border-radius:var(--r-3); }
.btn-block{ width:100%; }
.btn .ico{ width:16px; height:16px; flex:none; }

/* Иконочная кнопка (правка/удаление в строке) */
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:var(--r-1);
  color:var(--ink-3);
  border:1px solid transparent;
  transition:background-color .15s, color .15s, border-color .15s;
}
.icon-btn svg{ width:16px; height:16px; }
.icon-btn:hover{ background:var(--surface-3); color:var(--ink); border-color:var(--line); }
.icon-btn-danger:hover{ background:var(--danger-soft); color:var(--danger); border-color:var(--danger-line); }

/* =====================================================================
   Поля форм
   ===================================================================== */
.field{ display:flex; flex-direction:column; gap:7px; }
.field > .label,
.field > span.label{
  font-size:13px; font-weight:600; color:var(--ink-2);
  letter-spacing:.01em;
}
.field-hint{ font-size:12.5px; color:var(--ink-3); line-height:1.45; }
.mailru-note{ margin:6px 0 0; }
.mailru-note.is-warn{ color:#7A4904; background:var(--warn-soft); border:1px solid var(--warn-line); border-radius:8px; padding:8px 10px; }

.input,.select,.textarea{
  width:100%;
  padding:11px 13px;
  background:var(--surface);
  border:1px solid var(--line-2);
  border-radius:var(--r-2);
  font-size:14.5px;
  color:var(--ink);
  transition:border-color .15s, box-shadow .15s, background-color .15s;
}
.input::placeholder,.textarea::placeholder{ color:var(--ink-4); }
.input:hover,.select:hover,.textarea:hover{ border-color:var(--ink-4); }
.input:focus,.select:focus,.textarea:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft);
}
.input[disabled],.select[disabled]{ background:var(--surface-3); color:var(--ink-3); cursor:not-allowed; }
.textarea{ min-height:88px; resize:vertical; }

.select{
  appearance:none;
  padding-right:38px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238794A6' stroke-width='1.8'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:16px;
  cursor:pointer;
}

/* Дата и время — нативные контролы: меньше кода, ноль своих багов */
.datetime-row{ display:grid; grid-template-columns:1.4fr 1fr; gap:10px; }
input[type="date"],input[type="time"]{
  width:100%; padding:11px 13px;
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-2);
  font-family:var(--font-mono); font-size:14px; color:var(--ink);
}
input[type="date"]:focus,input[type="time"]:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft);
}

.checkbox{ display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--ink); cursor:pointer; }
.checkbox input{
  appearance:none; flex:none;
  width:18px; height:18px; margin-top:1px;
  border:1.5px solid var(--line-2); border-radius:5px;
  background:var(--surface); cursor:pointer;
  transition:background-color .15s, border-color .15s;
}
.checkbox input:checked{
  background:var(--brand); border-color:var(--brand);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size:14px; background-position:center; background-repeat:no-repeat;
}
.checkbox input:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.checkbox span{ line-height:1.45; }
.checkbox-block{ padding:11px 13px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-2); }

/* Переключатель */
.switch{ display:flex; align-items:center; gap:12px; cursor:pointer; }
.switch input{ appearance:none; position:absolute; opacity:0; pointer-events:none; }
.switch-track{
  position:relative; flex:none;
  width:40px; height:23px; border-radius:var(--r-pill);
  background:var(--line-2); transition:background-color .18s;
}
.switch-track::after{
  content:""; position:absolute; top:3px; left:3px;
  width:17px; height:17px; border-radius:50%;
  background:#fff; box-shadow:var(--sh-1);
  transition:transform .18s;
}
.switch input:checked + .switch-track{ background:var(--brand); }
.switch input:checked + .switch-track::after{ transform:translateX(17px); }
.switch input:focus-visible + .switch-track{ outline:2px solid var(--brand); outline-offset:2px; }

/* =====================================================================
   Чипы — выбор одного из вариантов (пресеты сроков, фильтры)
   ===================================================================== */
.chip-row{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 13px;
  border-radius:var(--r-pill);
  border:1px solid var(--line-2);
  background:var(--surface);
  font-size:13px; font-weight:500; color:var(--ink-2);
  cursor:pointer;
  user-select:none;
  transition:background-color .15s, border-color .15s, color .15s;
}
.chip:hover{ border-color:var(--ink-4); color:var(--ink); }
.chip.is-active{
  background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600;
}
.chip-outline{ border-style:dashed; }
.chip-locked{ color:var(--ink-3); background:var(--surface-3); border-color:var(--line); cursor:not-allowed; }
.chip-locked:hover{ border-color:var(--line); color:var(--ink-3); }
.chip-static{ cursor:default; }
.chip-static:hover{ border-color:var(--line-2); color:var(--ink-2); }
.chip-sm{ padding:5px 10px; font-size:12px; }

/* =====================================================================
   Теги — свободные метки на записи
   ===================================================================== */
.tag{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px;
  border-radius:var(--r-1);
  background:var(--surface-3);
  border:1px solid var(--line);
  font-size:12px; font-weight:500; color:var(--ink-2);
  white-space:nowrap;
}
.tag::before{ content:"#"; color:var(--ink-4); font-weight:600; }
.tag-list{ display:flex; flex-wrap:wrap; gap:5px; }
.tag-remove{
  display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; margin-right:-3px;
  border-radius:4px; color:var(--ink-3);
  font-size:13px; line-height:1;
}
.tag-remove:hover{ background:var(--line); color:var(--danger); }
.tag-input-row{ display:flex; gap:8px; }
.tag-input-row .input{ flex:1; }
.tag-suggest{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }

/* =====================================================================
   Бейджи — статус, канал, повтор
   ===================================================================== */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px;
  border-radius:var(--r-1);
  font-size:11.5px; font-weight:600; letter-spacing:.01em;
  white-space:nowrap;
  border:1px solid transparent;
}
.badge svg{ width:12px; height:12px; }
.badge-mail{ background:var(--mail-soft); color:var(--mail); border-color:var(--mail-line); }
.badge-tg{ background:var(--tg-soft); color:#0F7BAE; border-color:var(--tg-line); }
.badge-repeat{ background:var(--repeat-soft); color:var(--repeat); border-color:var(--repeat-line); }
.badge-ok{ background:var(--ok-soft); color:var(--ok); border-color:var(--ok-line); }
.badge-warn{ background:var(--warn-soft); color:var(--warn); border-color:var(--warn-line); }
.badge-danger{ background:var(--danger-soft); color:var(--danger); border-color:var(--danger-line); }
.badge-muted{ background:var(--surface-3); color:var(--ink-3); border-color:var(--line); }
.badge-soon{ background:var(--warn-soft); color:var(--warn); border-color:var(--warn-line); }

/* Точка-индикатор состояния */
.dot{ width:7px; height:7px; border-radius:50%; flex:none; background:currentColor; }
.dot-pulse{ animation:dot-pulse 2s ease-in-out infinite; }
@keyframes dot-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* =====================================================================
   Карточки и блоки
   ===================================================================== */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-3);
  box-shadow:var(--sh-1);
}
.card-pad{ padding:20px; }
.card-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:18px 20px;
  border-bottom:1px solid var(--line);
}
.card-head-flat{ border-bottom:0; padding-bottom:0; }
.card-title{ font-size:16px; font-weight:600; }
.card-sub{ font-size:13px; color:var(--ink-2); margin-top:3px; }
.card-body{ padding:20px; }
.card-body-flush{ padding:0; }
.card-danger{ border-color:var(--danger-line); }
.card-danger .card-head{ background:var(--danger-soft); border-bottom-color:var(--danger-line); }

/* Сообщение об ошибке формы. Живёт в общем слое, потому что используется
   и на страницах входа, и в кабинете, и в админке. */
.form-error{
  margin:0 0 18px; padding:12px 15px;
  border-radius:var(--r-2);
  background:var(--danger-soft); border:1px solid var(--danger-line);
  color:#8C211A; font-size:13.5px; line-height:1.5;
}
.form-error:last-child{ margin-bottom:0; }

/* Заметка / подсказка */
.note{
  display:flex; gap:11px;
  padding:13px 15px;
  border-radius:var(--r-2);
  background:var(--brand-soft);
  border:1px solid var(--brand-line);
  font-size:13px; color:var(--brand-ink); line-height:1.5;
}
.note svg{ width:16px; height:16px; flex:none; margin-top:1px; }
.note-warn{ background:var(--warn-soft); border-color:var(--warn-line); color:#7A4904; }
.note-plain{ background:var(--surface-2); border-color:var(--line); color:var(--ink-2); }
.note-danger{ background:var(--danger-soft); border-color:var(--danger-line); color:#8C211A; }

/* Полоса-метр (кредиты) */
.meter{ height:7px; border-radius:var(--r-pill); background:var(--surface-3); overflow:hidden; border:1px solid var(--line); }
.meter-fill{ height:100%; border-radius:var(--r-pill); background:var(--brand); transition:width .3s; }
.meter-fill-warn{ background:var(--warn); }
.meter-fill-ok{ background:var(--ok); }

/* =====================================================================
   ПОЛОСА ПУТИ — центральный компонент
   Полоса «от создания до окончания» + выноски над ней:
   Создано / Сработает / Окончание. Плюс мелкие риски сроков «напомнить заранее».

   Разметка:
   <div class="track" style="--now:38%">
     <div class="track-notes">
       <div class="tnote tnote-start"> … </div>
       <div class="tnote tnote-fire" style="--p:62%"> … </div>
       <div class="tnote tnote-end"> … </div>
     </div>
     <div class="track-bar">
       <div class="track-fill" style="--now:38%"></div>
       <span class="track-tick" style="--p:52%"></span>
       <span class="track-now" style="--now:38%"></span>
     </div>
   </div>
   ===================================================================== */
/* Выноски занимают два «этажа»: «Создано» и «Окончание» — нижний,
   «Сработает» — верхний. Это гарантирует, что средняя выноска никогда
   не наезжает на крайние, как бы близко они ни стояли по времени.

   Высоты посчитаны по факту: выноска = подпись 10.5px + дата 12.5px при
   line-height 1.55, то есть около 37px. Нижний этаж начинается с 8px,
   верхний — с 48px, поэтому между ними остаётся зазор и обе влезают в 86px. */
.track{ position:relative; padding-top:86px; }

.track-notes{ position:absolute; inset:0 0 auto 0; height:86px; }

.tnote{ position:absolute; bottom:8px; display:flex; flex-direction:column; gap:1px; }
.tnote-label{
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3);
}
.tnote-date{
  font-family:var(--font-mono); font-size:12.5px; font-variant-numeric:tabular-nums;
  color:var(--ink); white-space:nowrap;
}
/* Соединительная линия выноски вниз, к самой полосе */
.tnote::after{
  content:""; position:absolute; left:50%; bottom:-8px;
  width:1px; height:8px; background:var(--line-2);
}
.tnote-start{ left:0; }
.tnote-start::after{ left:0; }
.tnote-end{ right:0; text-align:right; align-items:flex-end; }
.tnote-end::after{ left:auto; right:0; }

.tnote-fire{
  left:var(--p,50%); bottom:8px;
  transform:translateX(-50%); align-items:center; text-align:center;
}
.tnote-fire .tnote-date{ color:var(--brand); font-weight:500; }
.tnote-fire::after{ background:var(--brand-line); }
/* У краёв «Сработает» поднимается на второй этаж, чтобы не налезть на «Создано» и «Окончание» */
.track-flat{ padding-top:54px; }
.track-flat .track-notes{ height:54px; }
.track-compact.track-flat{ padding-top:50px; }
.track-compact.track-flat .track-notes{ height:50px; }
.tnote-fire.is-high{ bottom:48px; }
.tnote-fire.is-high::after{ bottom:-48px; height:48px; }
/* У самых краёв центрирование выносит подпись за пределы блока — прижимаем её */
.tnote-fire.is-near-start{ left:0; transform:none; align-items:flex-start; text-align:left; }
.tnote-fire.is-near-start::after{ left:0; }
.tnote-fire.is-near-end{ left:auto; right:0; transform:none; align-items:flex-end; text-align:right; }
.tnote-fire.is-near-end::after{ left:auto; right:0; }

/* Подпись под полосой: нужна там, где у записи нет даты окончания */
.track-foot{
  margin-top:9px; display:flex; flex-wrap:wrap; gap:4px 14px;
  font-size:11.5px; color:var(--ink-3);
}
.track-foot b{ color:var(--ink-2); font-weight:600; }

.track-bar{
  position:relative;
  height:8px;
  border-radius:var(--r-pill);
  background:var(--surface-3);
  border:1px solid var(--line);
}
.track-fill{
  position:absolute; inset:0 auto 0 0;
  width:var(--now,0%);
  transition:width 1s linear;
  border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--brand-line),var(--brand));
}
.track-now{
  position:absolute; top:50%; left:var(--now,0%);
  transition:left 1s linear;
  width:11px; height:11px; margin:-5.5px 0 0 -5.5px;
  border-radius:50%; background:var(--brand);
  border:2px solid #fff; box-shadow:0 0 0 2px var(--brand-soft);
}
/* Риски сроков «напомнить заранее» */
.track-tick{
  position:absolute; top:50%; left:var(--p,0%);
  width:3px; height:15px; margin:-7.5px 0 0 -1.5px;
  border-radius:2px; background:var(--ink-4);
}
.track-tick::after{
  content:attr(data-tip);
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  padding:2px 6px; border-radius:4px;
  background:var(--ink); color:#fff;
  font-size:10.5px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .15s;
}
.track-tick:hover::after{ opacity:1; }

/* Сроки «напомнить заранее»: список под полосой, прижатый к срабатыванию.
   Слева от срабатывания, если оно в первой половине пути, иначе справа. */
.track-adv-list{
  margin-top:9px; display:flex; flex-direction:column; gap:3px;
  width:max-content; max-width:100%;
}
.track-adv-list.is-left{
  margin-left:var(--p,50%); max-width:calc(100% - var(--p,50%));
  padding-left:9px; border-left:1px solid var(--brand-line);
}
.track-adv-list.is-right{
  margin-left:auto; margin-right:calc(100% - var(--p,50%)); max-width:var(--p,50%);
  padding-right:9px; border-right:1px solid var(--brand-line); text-align:right;
}
.adv-item{ display:flex; flex-wrap:wrap; gap:0 8px; align-items:baseline; }
.track-adv-list.is-right .adv-item{ justify-content:flex-end; }
.adv-item .tnote-label{ text-transform:none; letter-spacing:0; font-weight:600; color:var(--ink-2); font-size:11.5px; }
.adv-item .tnote-date{ font-size:11.5px; color:var(--ink-2); }
.track-compact .adv-item .tnote-label, .track-compact .adv-item .tnote-date{ font-size:10.5px; }

/* Состояния полосы */
.track-done .track-fill{ background:var(--ok); }
.track-done .track-now{ background:var(--ok); box-shadow:0 0 0 2px var(--ok-soft); }
.track-soon .track-fill{ background:linear-gradient(90deg,var(--warn-line),var(--warn)); }
.track-soon .track-now{ background:var(--warn); box-shadow:0 0 0 2px var(--warn-soft); }
.track-idle .track-fill{ background:var(--line-2); }
.track-idle .track-now{ background:var(--ink-3); box-shadow:0 0 0 2px var(--surface-3); }

/* Компактный вариант — в архиве и в админке */
.track-compact{ padding-top:80px; }
.track-compact .track-notes{ height:80px; }
.track-compact .tnote-label{ font-size:9.5px; }
.track-compact .tnote-date{ font-size:11px; }
.track-compact .tnote-fire.is-high{ bottom:46px; }
.track-compact .tnote-fire.is-high::after{ bottom:-46px; height:46px; }

/* =====================================================================
   Таблицы
   ===================================================================== */
.table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.table th{
  text-align:left; padding:11px 16px;
  font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-3);
  background:var(--surface-2);
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.table td{
  padding:13px 16px;
  border-bottom:1px solid var(--line);
  vertical-align:middle;
}
.table tbody tr:last-child td{ border-bottom:0; }
.table tbody tr:hover{ background:var(--surface-2); }
.table-num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; text-align:right; }
.table-wrap{ overflow-x:auto; }

/* =====================================================================
   Состояния: загрузка, пусто, ошибка
   ===================================================================== */
.skel{
  position:relative; overflow:hidden;
  background:var(--surface-3); border-radius:var(--r-1);
  color:transparent !important; user-select:none;
}
.skel::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  transform:translateX(-100%);
  animation:skel 1.3s infinite;
}
@keyframes skel{ 100%{ transform:translateX(100%); } }

.state{ padding:36px 20px; text-align:center; }
.state-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; margin-bottom:12px;
  border-radius:var(--r-2);
  background:var(--surface-3); color:var(--ink-3);
}
.state-icon svg{ width:22px; height:22px; }
.state-title{ font-size:15px; font-weight:600; }
.state-text{ font-size:13.5px; color:var(--ink-2); margin-top:5px; max-width:420px; margin-inline:auto; }
.state-actions{ margin-top:16px; display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.state-error .state-icon{ background:var(--danger-soft); color:var(--danger); }

/* Пока контейнер грузится — приглушаем и блокируем клики */
[data-loading="true"]{ opacity:.65; pointer-events:none; }

/* =====================================================================
   Модальное окно
   ===================================================================== */
.modal-backdrop{
  position:fixed; inset:0; z-index:100;
  display:none; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(12,20,32,.55);
  backdrop-filter:blur(3px);
}
.modal-backdrop.is-open{ display:flex; }
.modal{
  width:100%; max-width:520px; max-height:calc(100vh - 48px);
  overflow-y:auto;
  background:var(--surface);
  border-radius:var(--r-4);
  box-shadow:var(--sh-pop);
}
.modal-wide{ max-width:680px; }
.modal-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:20px 22px;
  border-bottom:1px solid var(--line);
}
.modal-title{ font-size:17px; }
.modal-sub{ font-size:13px; color:var(--ink-2); margin-top:4px; line-height:1.5; }
.modal-body{ padding:22px; display:flex; flex-direction:column; gap:16px; }
.modal-foot{
  display:flex; align-items:center; justify-content:flex-end; gap:10px;
  padding:16px 22px;
  border-top:1px solid var(--line);
  background:var(--surface-2);
  border-radius:0 0 var(--r-4) var(--r-4);
}
.modal-foot-note{ margin-right:auto; font-size:12.5px; color:var(--ink-3); }
.modal-close{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:30px; height:30px; border-radius:var(--r-1); color:var(--ink-3);
}
.modal-close svg{ width:16px; height:16px; }
.modal-close:hover{ background:var(--surface-3); color:var(--ink); }

/* Выбор из нескольких вариантов внутри модалки */
.choice-row{ display:flex; flex-wrap:wrap; gap:7px; }
.summary-box{
  padding:13px 15px;
  border-radius:var(--r-2);
  background:var(--brand-soft);
  border:1px solid var(--brand-line);
  font-size:13.5px; color:var(--brand-ink); line-height:1.55;
}

/* =====================================================================
   Всплывающие сообщения (тосты)
   ===================================================================== */
.toast-wrap{
  position:fixed; right:24px; bottom:24px; z-index:200;
  display:flex; flex-direction:column; gap:10px;
  pointer-events:none;
}
.toast{
  display:flex; align-items:flex-start; gap:11px;
  padding:13px 16px;
  max-width:380px;
  border-radius:var(--r-2);
  background:var(--ink); color:#fff;
  box-shadow:var(--sh-3);
  font-size:13.5px; line-height:1.5;
  pointer-events:auto;
  animation:toast-in .22s ease-out;
}
.toast svg{ width:16px; height:16px; flex:none; margin-top:1px; color:var(--ok); }
.toast-warn svg{ color:var(--warn); }
.toast-danger svg{ color:#FF8A80; }
@keyframes toast-in{ from{ opacity:0; transform:translateY(8px); } }

/* =====================================================================
   Переключатель языка
   ===================================================================== */
.lang-switch{
  display:inline-flex; align-items:center;
  padding:2px;
  border-radius:var(--r-1);
  background:var(--surface-3);
  border:1px solid var(--line);
}
.lang-btn{
  padding:5px 9px;
  border-radius:5px;
  font-family:var(--font-mono); font-size:11.5px; font-weight:500;
  letter-spacing:.03em;
  color:var(--ink-3);
  transition:background-color .15s, color .15s;
}
.lang-btn:hover{ color:var(--ink); }
.lang-btn.is-active{
  background:var(--surface); color:var(--ink);
  box-shadow:var(--sh-1);
}
/* Тёмный вариант — для сайдбара кабинета */
.lang-switch-onShell{ background:var(--shell-3); border-color:var(--shell-line); }
.lang-switch-onShell .lang-btn{ color:var(--shell-ink-2); }
.lang-switch-onShell .lang-btn:hover{ color:var(--shell-ink); }
.lang-switch-onShell .lang-btn.is-active{ background:var(--shell); color:#fff; box-shadow:none; }

/* Страница прячется до применения перевода, чтобы английскому посетителю
   не мигала русская разметка. Класс снимает LD.i18n.init(), а на случай
   отказа скриптов есть страховочный таймер прямо в разметке страницы. */
html.i18n-pending body{ visibility:hidden; }

/* =====================================================================
   Логотип
   ===================================================================== */
.logo{
  display:inline-flex; align-items:baseline; gap:1px;
  font-family:var(--font-display);
  font-size:19px; font-weight:700; letter-spacing:-.03em;
  color:var(--ink);
}
.logo-mark{
  display:inline-block; width:24px; height:24px; margin-right:8px;
  border-radius:6px;
  background:url("../img/favicon.svg") center/contain no-repeat;
  vertical-align:-6px;
}
.logo-accent{ color:var(--brand); }
.logo-onShell{ color:var(--shell-ink); }
.logo-onShell .logo-mark{ background:url("../img/favicon.svg") center/contain no-repeat; }
.logo-onShell .logo-accent{ color:var(--shell-brand); }

/* ==========================================================================
   СОСТОЯНИЯ СТРАНИЦЫ: загрузка и недоступный сервер

   Нужны, потому что данные теперь приходят по сети. Без них при медленном
   или упавшем бэкенде пользователь видел бы пустые таблицы и не понимал,
   что произошло: то ли данных нет, то ли сервис сломался.
   ========================================================================== */
.app-gate{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; min-height:220px; padding:40px 24px; text-align:center;
  color:var(--ink-2); font-size:14px;
}
.app-gate[hidden]{ display:none; }
.app-gate-ring{
  width:22px; height:22px; flex:none;
  border:2px solid var(--line-2); border-top-color:var(--brand);
  border-radius:50%;
  animation:app-gate-spin .7s linear infinite;
}
@keyframes app-gate-spin{ to{ transform:rotate(360deg); } }
.app-gate-title{ font-weight:600; font-size:15px; color:var(--ink); }
.app-gate-text{ font-size:13px; color:var(--ink-2); max-width:420px; line-height:1.5; }
.app-gate-error .app-gate-title::before{
  content:''; display:block; width:26px; height:3px; margin:0 auto 14px;
  background:var(--warn); border-radius:2px;
}

/* «Написать нам» */
.contact-overlay{ position:fixed; inset:0; z-index:1000; background:rgba(15,23,42,.45); display:flex; align-items:center; justify-content:center; padding:16px; }
.contact-box{ background:var(--surface,#fff); color:inherit; border-radius:16px; width:100%; max-width:460px; padding:24px; display:flex; flex-direction:column; gap:14px; box-shadow:0 20px 60px rgba(15,23,42,.25); max-height:100%; overflow:auto; }
.contact-title{ margin:0; font-size:20px; }
.contact-sub{ margin:0; color:var(--ink-3,#64748b); font-size:14px; }
.contact-text{ resize:vertical; min-height:110px; font:inherit; }
.contact-actions{ display:flex; gap:10px; }
.contact-trap{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.side-help{ display:block; padding:8px 14px; font-size:13.5px; color:var(--ink-3,#64748b); text-decoration:none; }
.side-help:hover{ text-decoration:underline; }