@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

  :root{
    --bg:#F6F6F3;
    --surface:#FFFFFF;
    --ink:#16171C;
    --ink-soft:#6B6E76;
    --line:#E3E2DC;
    --line-strong:#C8C6BD;
    --accent:#2A4FE0;
    --accent-tint:#EAEFFD;
    --accent-deep:#1E3BB8;
    --good:#1C8A5C;
    --good-tint:#E4F3EC;
    --warn:#A8630E;
    --warn-tint:#FBF0DC;
    --danger:#C23B2E;
    --danger-tint:#FBEAE8;
  }
  *{box-sizing:border-box;}
  html{ overflow-x:hidden; width:100%; }
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter', sans-serif;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden; width:100%;
  }
  .wrap{max-width:720px; margin:0 auto; padding:36px 18px 100px;}
  h1,h2,h3{font-family:'Space Grotesk', sans-serif; font-weight:600; margin:0;}

  header{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:2px;}
  .brand{font-family:'Space Grotesk', sans-serif; font-size:1.5rem; font-weight:700; display:flex; align-items:center; gap:10px; letter-spacing:-0.01em;}
  .brand .seal{ flex-shrink:0; display:flex; align-items:center; justify-content:center;
    width:34px; height:34px; border:1.5px solid var(--ink); border-radius:8px; position:relative;
  }
  .brand .seal::before, .brand .seal::after{
    content:''; position:absolute; width:8px; height:8px; border:1.5px solid var(--accent);
  }
  .brand .seal::before{ top:-1.5px; left:-1.5px; border-right:none; border-bottom:none; }
  .brand .seal::after{ bottom:-1.5px; right:-1.5px; border-left:none; border-top:none; }
  .brand .seal span{ font-size:0.62rem; font-family:'IBM Plex Mono', monospace; color:var(--accent); font-weight:500; }
  .tagline{color:var(--ink-soft); font-size:0.98rem; max-width:46ch; margin:14px 0 32px; line-height:1.55;}

  .panel{
    background:var(--surface); border:1px solid var(--line); border-radius:6px;
    padding:22px; margin-bottom:16px;
  }

  .dropzone{
    display:block; position:relative; overflow:hidden;
    border:1px solid var(--line); border-radius:4px; padding:38px 22px;
    text-align:center; cursor:pointer; transition:border-color .15s, background .15s;
    background:var(--bg);
  }
  .scan-line{
    position:absolute; left:8px; right:8px; top:8px; height:2px;
    background:linear-gradient(90deg, transparent, var(--accent) 20%, var(--accent) 80%, transparent);
    opacity:0; pointer-events:none;
  }
  .dropzone.scanning .scan-line{
    opacity:1;
    animation:scan-sweep 1.7s ease-in-out infinite;
  }
  .dropzone.scanning{ border-color:var(--accent); background:var(--accent-tint); }
  @keyframes scan-sweep{
    0%{ top:8px; }
    50%{ top:calc(100% - 10px); }
    100%{ top:8px; }
  }
  @media (prefers-reduced-motion:reduce){
    .dropzone.scanning .scan-line{ animation:none; opacity:0.6; top:50%; }
  }
  .dropzone::before, .dropzone::after,
  .dropzone .corner-br, .dropzone .corner-bl{ content:''; }
  .dropzone{ --bracket:14px; }
  .dropzone::before{
    position:absolute; top:8px; left:8px; width:var(--bracket); height:var(--bracket);
    border-left:2px solid var(--accent); border-top:2px solid var(--accent);
  }
  .dropzone::after{
    position:absolute; bottom:8px; right:8px; width:var(--bracket); height:var(--bracket);
    border-right:2px solid var(--accent); border-bottom:2px solid var(--accent);
  }
  .dropzone.drag{ border-color:var(--accent); background:var(--accent-tint); }
  .dropzone .icon{ font-size:2.1rem; margin-bottom:10px; opacity:0.7; }
  .dropzone .main{ font-size:1.08rem; margin-bottom:5px; font-weight:600; }
  .dropzone .sub{ font-size:0.85rem; color:var(--ink-soft); font-family:'IBM Plex Mono', monospace; }
  .camera-row{ margin-top:12px; text-align:center; }
  .camera-btn{ display:inline-block; font-size:0.9rem; padding:11px 20px; }
  .camera-row .btn-secondary{ margin:4px; }
  .fine-print{ text-align:center; font-size:0.78rem; color:var(--ink-soft); margin-top:10px; }

  .step-label{ display:flex; align-items:center; gap:10px; font-family:'Space Grotesk', sans-serif;
    font-weight:600; font-size:1.02rem; margin-bottom:16px; }
  .step-num{ width:25px; height:25px; border-radius:50%; background:var(--ink); color:#fff;
    font-family:'Inter', sans-serif; font-size:0.8rem; font-weight:600;
    display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .step-optional{ font-family:'Inter', sans-serif; font-weight:400; font-size:0.82rem; color:var(--ink-soft); }

  .settings-details{ margin-top:22px; border-top:1px solid var(--line); padding-top:16px; }
  .settings-details summary{
    cursor:pointer; font-size:0.88rem; font-weight:600; color:var(--ink-soft);
    list-style:none; display:flex; align-items:center; gap:7px; user-select:none;
  }
  .settings-details summary::-webkit-details-marker{ display:none; }
  .settings-details summary::before{ content:'⚙'; font-size:0.95rem; }
  .settings-details[open] summary{ margin-bottom:16px; }
  .settings-details summary:hover{ color:var(--ink); }
  #cameraInput{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  input[type=file]{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }

  .file-row{
    display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:nowrap;
    padding:11px 4px; border-bottom:1px solid var(--line);
  }
  .file-list-items .file-row:last-child{ border-bottom:none; }
  .file-thumb{
    width:30px; height:30px; border-radius:4px; overflow:hidden; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:var(--bg); border:1px solid var(--line);
  }
  .file-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  .file-thumb-pdf{
    font-family:'IBM Plex Mono', monospace; font-size:0.58rem; font-weight:600;
    color:var(--accent-deep); background:var(--accent-tint); border-color:var(--accent);
  }
  .file-row-main{ min-width:0; flex:1 1 auto; overflow:hidden; }
  .file-row .name{
    font-size:0.85rem; font-family:'IBM Plex Mono', monospace;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block;
  }
  .file-row-controls{ display:flex; align-items:center; gap:4px; flex-shrink:0; }
  .file-download{
    display:flex; align-items:center; justify-content:center;
    width:26px; height:26px; border-radius:4px; color:var(--ink-soft); font-size:0.92rem;
    text-decoration:none; flex-shrink:0;
  }
  .file-download:hover{ background:rgba(35,36,54,0.06); color:var(--ink); }
  .file-type-select{
    font-family:'IBM Plex Mono', monospace; font-size:0.72rem; color:var(--ink-soft);
    background:var(--bg); border:1px solid var(--line-strong); border-radius:4px;
    padding:6px 6px; max-width:100px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    cursor:pointer;
    display:none; /* по умолчанию скрыт — см. #manualTypeToggle: старт не должен начинаться
      с вопроса "что это за документ", когда пользователь ещё даже не знает, что можно
      уточнить тип. Показывается только если явно включить переключатель. */
  }
  .file-list-items.show-type-select .file-type-select{ display:inline-block; }
  .file-type-select.is-set{ color:var(--accent-deep); background:var(--accent-tint); border-color:var(--accent); font-weight:500; }
  .file-row .remove-file{
    background:transparent; border:none; color:var(--ink-soft); font-size:1.15rem;
    cursor:pointer; padding:4px 6px; line-height:1; border-radius:4px; flex-shrink:0;
  }
  .file-row .remove-file:hover{ color:var(--danger); background:#FBEAE8; }
  @media (max-width:400px){
    .file-type-select{ max-width:76px; font-size:0.65rem; }
    .file-thumb{ width:26px; height:26px; }
  }

  /* Объединение нескольких фото в один многостраничный документ (Ethan, 8 сен
     2026, "если человек сфотографировал договор на 5 страниц по отдельности") —
     чекбокс выбора у обычных строк-фото, "стопка" вместо превью у объединённой
     группы, и отдельный полноэкранный оверлей проверки/перестановки порядка
     страниц перед подтверждением (см. fileList.js:openGroupOrderOverlay). */
  .file-row .group-select{ flex-shrink:0; width:16px; height:16px; cursor:pointer; }
  .file-thumb-stack{
    font-family:'IBM Plex Mono', monospace; font-size:0.62rem; font-weight:600;
    color:var(--accent-deep); background:var(--accent-tint); border-color:var(--accent);
    position:relative;
  }
  .file-thumb-stack::before, .file-thumb-stack::after{
    content:''; position:absolute; inset:0; border:1px solid var(--accent);
    border-radius:4px; background:var(--accent-tint);
  }
  .file-thumb-stack::before{ transform:translate(2px,-2px); z-index:-1; }
  .file-thumb-stack::after{ transform:translate(4px,-4px); z-index:-2; }
  .file-row .ungroup-file{
    background:transparent; border:none; color:var(--ink-soft); font-size:0.78rem;
    cursor:pointer; padding:4px 6px; line-height:1; border-radius:4px; flex-shrink:0;
    font-family:'IBM Plex Mono', monospace; white-space:nowrap;
  }
  .file-row .ungroup-file:hover{ color:var(--accent-deep); background:var(--accent-tint); }

  .group-order-box{ max-width:520px; }
  .group-order-hint{ font-size:0.85rem; color:var(--ink-soft); line-height:1.5; margin-bottom:14px; }
  .group-order-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; max-height:56vh; overflow-y:auto; }
  .group-order-item{
    display:flex; align-items:center; gap:10px; padding:8px; border:1px solid var(--line);
    border-radius:8px; background:var(--bg);
  }
  .group-order-num{
    font-family:'IBM Plex Mono', monospace; font-size:0.78rem; font-weight:600;
    color:var(--accent-deep); flex-shrink:0; width:22px; text-align:center;
  }
  .group-order-thumb{
    width:44px; height:44px; border-radius:6px; overflow:hidden; flex-shrink:0;
    border:1px solid var(--line); cursor:pointer; display:block;
  }
  .group-order-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  .group-order-name{
    flex:1 1 auto; min-width:0; font-size:0.8rem; font-family:'IBM Plex Mono', monospace;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .group-order-moves{ display:flex; gap:2px; flex-shrink:0; }
  .group-order-moves button{
    background:transparent; border:1px solid var(--line-strong); color:var(--ink-soft);
    width:26px; height:26px; border-radius:4px; cursor:pointer; font-size:0.85rem; line-height:1;
  }
  .group-order-moves button:hover:not(:disabled){ background:rgba(35,36,54,0.06); color:var(--ink); }
  .group-order-moves button:disabled{ opacity:0.35; cursor:default; }

  .file-list{ margin-top:16px; }
  .file-list-header{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;
    font-size:0.85rem; color:var(--ink-soft); margin-bottom:6px; font-family:'IBM Plex Mono', monospace;
  }
  .file-list-header-actions{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
  .manual-type-toggle{ display:flex; align-items:center; gap:6px; font-size:0.8rem; color:var(--ink-soft); cursor:pointer; white-space:nowrap; }
  .manual-type-toggle input{ cursor:pointer; }
  .file-list-items{ display:flex; flex-direction:column; max-height:280px; overflow-y:auto; border-top:1px solid var(--line); }

  .file-group{ margin-bottom:14px; }
  .file-group-title{ font-size:0.87rem; font-weight:600; margin-bottom:8px; font-family:'IBM Plex Mono', monospace; overflow-wrap:anywhere; }
  .file-group .pages{ margin:0 0 0 8px; }

  .file-result-group{ margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid var(--line); }
  .file-result-group:last-child{ margin-bottom:0; padding-bottom:0; border-bottom:none; }  .file-result-title{
    font-family:'Space Grotesk', sans-serif; font-size:1.08rem; font-weight:600; margin-bottom:10px; cursor:pointer; display:flex;
    align-items:flex-start; gap:9px; user-select:none;
  }
  .file-result-title .chevron{ font-size:0.7rem; color:var(--ink-soft); transition:transform .15s; margin-top:3px; flex-shrink:0; }
  .file-result-title .title-text{ min-width:0; overflow-wrap:anywhere; }
  .confidence-badge{
    display:inline-block; flex-shrink:0; margin-top:1px; font-size:0.72rem; font-weight:600;
    font-family:'IBM Plex Mono', monospace; letter-spacing:0.02em; border-radius:4px; padding:2px 7px;
    cursor:help;
  }
  .confidence-badge.confidence-high{ color:var(--good); background:var(--good-tint); }
  .confidence-badge.confidence-medium{ color:var(--warn); background:var(--warn-tint); }
  .confidence-badge.confidence-low{ color:var(--danger); background:var(--danger-tint); }
  /* Уверенность на конкретное поле (см. ui/results.js:buildFieldConfidenceBadge) —
     тот же бейдж, компактнее, т.к. на одной карточке их может быть много (по
     одному на строку fields-row). */
  .confidence-badge-field{ font-size:0.66rem; padding:1px 6px; margin-top:0; justify-self:end; }
  /* Проверки бизнес-логики (см. postprocess/businessRules.js) — например,
     "дата выдачи позже даты окончания". error — вероятная ошибка распознавания,
     info — не ошибка, а факт о документе (например, срок истёк). */
  .business-warnings{ margin:0 0 10px; display:flex; flex-direction:column; gap:5px; }
  .business-warning{ font-size:0.82rem; border-radius:6px; padding:6px 10px; line-height:1.35; }
  .business-warning-error{ color:var(--danger); background:var(--danger-tint); }
  .business-warning-info{ color:var(--warn); background:var(--warn-tint); }
  .file-result-group.collapsed .file-result-title .chevron{ transform:rotate(-90deg); }
  .file-result-group.collapsed .collapsible{ display:none; }
  .doc-type-badge{
    display:inline-block; font-size:0.78rem; font-weight:500; color:var(--accent-deep);
    background:var(--accent-tint); border:none; border-radius:4px;
    padding:3px 10px; margin-bottom:12px; font-family:'IBM Plex Mono', monospace;
  }

  .doc-type-row{
    display:flex; align-items:center; gap:8px; margin-bottom:14px; flex-wrap:wrap;
    font-size:0.85rem; color:var(--ink-soft);
  }
  .doc-type-select{
    font-family:'IBM Plex Mono', monospace; font-size:0.8rem; font-weight:500; color:var(--accent-deep);
    background:var(--accent-tint); border:none; border-radius:4px;
    padding:5px 11px; cursor:pointer;
  }

  .fields-table{
    display:flex; flex-direction:column; gap:0; margin-bottom:18px;
    border:1px solid var(--line); border-radius:4px; overflow:hidden;
  }
  .fields-row{ display:grid; grid-template-columns:36% 1fr auto; gap:10px; align-items:center;
    padding:9px 12px; border-bottom:1px solid var(--line); }
  .fields-row:last-child{ border-bottom:none; }
  .fields-row:nth-child(odd){ background:#FAFAF8; }
  .fields-label{ font-size:0.82rem; color:var(--ink-soft); font-family:'IBM Plex Mono', monospace; }
  .fields-input{
    padding:6px 9px; border:1px solid transparent; border-radius:4px;
    font-family:'IBM Plex Mono', monospace; font-size:0.87rem; background:transparent; width:100%;
    transition:border-color .15s, background .15s;
  }
  .fields-input:focus{ outline:none; border-color:var(--accent); background:#fff; }

  .line-items-table{
    margin-bottom:18px; border:1px solid var(--line); border-radius:4px;
    overflow-x:auto; overflow-y:hidden;
  }
  .line-items-row{
    display:grid; grid-template-columns:2.2fr 1fr 1fr 0.8fr 1fr 28px; gap:8px; align-items:center;
    padding:7px 10px; border-bottom:1px solid var(--line); min-width:520px;
  }
  .line-items-row:last-child{ border-bottom:none; }
  .line-items-rows .line-items-row:nth-child(odd){ background:#FAFAF8; }
  .line-items-header{ background:var(--accent-tint); font-weight:600; }
  .line-items-header-cell{
    font-size:0.75rem; color:var(--accent-deep); font-family:'IBM Plex Mono', monospace;
  }
  .line-items-header.line-items-row{ grid-template-columns:2.2fr 1fr 1fr 0.8fr 1fr; }
  .line-items-input{
    padding:6px 8px; border:1px solid transparent; border-radius:4px;
    font-family:'IBM Plex Mono', monospace; font-size:0.83rem; background:transparent; width:100%;
    transition:border-color .15s, background .15s;
  }
  .line-items-input:focus{ outline:none; border-color:var(--accent); background:#fff; }
  .line-items-remove{
    background:transparent; border:none; color:var(--ink-soft); cursor:pointer;
    font-size:0.85rem; padding:2px; min-height:auto; line-height:1;
  }
  .line-items-remove:hover{ color:#B3452F; }
  .line-items-add-row{
    display:block; width:100%; background:var(--accent-tint); color:var(--accent-deep);
    border:none; border-top:1px solid var(--line); border-radius:0; font-size:0.8rem;
    font-weight:600; padding:9px 12px; cursor:pointer; min-height:auto;
  }
  .line-items-add-row:hover{ background:var(--accent-tint-hover, var(--accent-tint)); }

  button{
    font-family:'Inter', sans-serif; font-size:0.9rem; font-weight:600;
    border:none; border-radius:5px; padding:12px 20px; cursor:pointer;
    transition:background .12s, border-color .12s, transform .05s;
    min-height:44px;
  }
  button:active{ transform:scale(0.98); }
  #recognizeBtn{ font-size:1rem; padding:15px 24px; min-height:52px; }
  .btn-primary{ background:var(--ink); color:#fff; }
  .btn-primary:hover:not(:disabled){ background:var(--accent); }
  .btn-primary:disabled{ background:#C9C9C4; cursor:not-allowed; }
  .btn-secondary{ background:transparent; color:var(--ink); border:1px solid var(--line-strong); }
  .btn-secondary:hover{ border-color:var(--ink); background:#F4F4F1; }
  .btn-row{ display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }

  .lang-note{
    font-size:0.83rem; color:var(--ink-soft); margin-top:14px; padding:10px 12px;
    background:var(--bg); border-left:2px solid var(--accent); border-radius:0 4px 4px 0;
  }

  .lang-select{ margin-top:16px; }
  .lang-select-label{ font-size:0.83rem; color:var(--ink-soft); margin-bottom:8px; font-weight:500; }
  .lang-options{
    display:flex; gap:2px; flex-wrap:wrap; background:var(--bg);
    border:1px solid var(--line); border-radius:6px; padding:3px;
  }
  .lang-option{
    display:flex; align-items:center; gap:7px; padding:8px 14px; min-height:38px; flex:1;
    border-radius:4px; cursor:pointer; justify-content:center;
    font-size:0.85rem; background:transparent; transition:background .15s, color .15s;
  }
  .lang-option input{ accent-color:var(--accent); margin:0; position:absolute; opacity:0; width:0; }
  .lang-option:has(input:checked){ background:var(--surface); font-weight:600; box-shadow:0 1px 2px rgba(22,23,28,0.08); }

  #pagesList{
  max-height: 480px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 14px;
}
/* Итоговые результаты (карточки файлов с текстом/полями) — при больших пачках
   (см. showResults в results.js) сворачиваются по умолчанию, но даже свёрнутые
   строки на 50+ файлов дают длинный список; фиксированная высота + скролл —
   та же защита от бесконечной страницы, что и у #pagesList выше. Высота больше
   (640 против 480), т.к. содержимое здесь заметно крупнее одной строки. */
#pageResults{
  max-height: 640px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 20px;
}
.pages{ display:flex; flex-direction:column; gap:0; margin:16px 0; border-top:1px solid var(--line); }
  .page-row{
    display:flex; align-items:center; gap:12px; padding:10px 4px;
    background:transparent; border-bottom:1px solid var(--line);
    font-size:0.87rem; font-family:'IBM Plex Mono', monospace;
  }
  .page-row .num{
    width:20px; height:20px; border-radius:3px; background:var(--line-strong); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:0.68rem; flex-shrink:0;
  }
  .page-row.done .num{ background:var(--good); }
  .page-row .status{ margin-left:auto; color:var(--ink-soft); font-size:0.8rem; }
  .page-row.done .status{ color:var(--good); }

  /* При большом пакете файлов (см. progress.js, setDefaultHideCompleted) скрываем
     полностью успешные файлы целиком (заголовок + строка), не только их статус —
     иначе на 50-100 документах остаются пустые на вид заголовки без содержимого.
     Файлы с ошибками или ещё в процессе класс all-done не получают — всегда видны. */
  #pagesList.hide-done .file-group.all-done{ display:none; }

  .results h2{ font-size:1.3rem; margin-bottom:4px; }
  .results .hint{ color:var(--ink-soft); font-size:0.86rem; margin-bottom:18px; }

  .page-result{ margin-bottom:20px; }
  .page-result .label{ font-size:0.8rem; color:var(--ink-soft); margin-bottom:6px; font-family:'IBM Plex Mono', monospace; }
  .page-result textarea{
    width:100%; min-height:140px; padding:13px; border:1px solid var(--line); border-radius:4px;
    background:var(--bg); font-family:'Inter', sans-serif; font-size:0.94rem; line-height:1.6;
    resize:vertical; transition:border-color .15s, background .15s;
  }
  .page-result textarea:focus{ outline:none; border-color:var(--accent); background:#fff; }

  .empty{ text-align:center; color:var(--ink-soft); padding:26px 0; font-size:0.9rem; }

  .export-group{ margin-top:22px; padding-top:16px; border-top:1px solid var(--line); }
  .export-group-label{ font-size:0.82rem; color:var(--ink-soft); }

  .progress-track{ height:4px; background:var(--line); border-radius:2px; overflow:hidden; margin:16px 0 2px; }
  .progress-fill{ height:100%; width:0%; background:var(--accent); border-radius:2px; transition:width .25s ease; }

  footer{ margin-top:40px; font-size:0.8rem; color:var(--ink-soft); max-width:58ch; line-height:1.6; }

  @media (max-width:700px){
    .btn-row#actionRow{
      position:fixed; left:0; right:0; bottom:0; margin:0; z-index:20;
      background:var(--surface); border-top:1px solid var(--line);
      padding:12px 18px calc(12px + env(safe-area-inset-bottom));
      box-shadow:0 -4px 14px rgba(22,23,28,0.08);
    }
    .btn-row#actionRow .btn-primary{ width:100%; }
    body.has-action-bar .wrap{ padding-bottom:110px; }
  }

  /* Замена системным alert()/confirm() — см. ui/notify.js */
  .toast{
    position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(12px);
    background:var(--ink); color:#fff; padding:12px 18px; border-radius:8px;
    font-size:0.9rem; max-width:min(90vw, 480px); line-height:1.45;
    box-shadow:0 10px 28px rgba(22,23,28,0.25);
    opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
    z-index:1000;
  }
  .toast-visible{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
  .toast-error{ background:var(--danger); }

  .confirm-overlay{
    position:fixed; inset:0; background:rgba(22,23,28,0.45);
    display:flex; align-items:center; justify-content:center; padding:20px; z-index:1001;
  }
  .confirm-box{
    background:var(--surface); border-radius:10px; padding:24px; max-width:420px; width:100%;
    box-shadow:0 20px 48px rgba(22,23,28,0.25);
  }
  .confirm-message{ white-space:pre-line; font-size:0.95rem; line-height:1.55; margin-bottom:18px; }
  .confirm-actions{ margin-top:0; justify-content:flex-end; }
  @media (max-width:480px){
    .confirm-actions{ flex-direction:column-reverse; }
    .confirm-actions button{ width:100%; }
  }

  /* Гейт клиентского пилота (?client=slug с паролем, см. public/js/branding.js) —
     та же схема оверлея, что .confirm-overlay выше, но во весь экран поверх
     полностью скрытого приложения (#appRoot скрыт через html.tamga-gate-pending,
     см. index.html), а не поверх уже видимого контента. */
  .client-gate{
    position:fixed; inset:0; background:var(--bg);
    display:flex; align-items:center; justify-content:center; padding:20px; z-index:2000;
  }
  .client-gate-box{
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:28px; max-width:320px; width:100%; box-shadow:0 20px 48px rgba(22,23,28,0.15);
  }
  .client-gate-title{ font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:1.1rem; margin-bottom:16px; }
  .client-gate-input{
    width:100%; padding:10px 12px; border:1px solid var(--line-strong); border-radius:6px;
    font-family:inherit; font-size:0.95rem; margin-bottom:12px; box-sizing:border-box;
  }
  .client-gate-input:focus{ outline:none; border-color:var(--accent); }
  .client-gate #clientGateBtn{ width:100%; }
  .client-gate-error{ color:var(--danger); font-size:0.85rem; margin-top:10px; }