/* ===========================================================================
   Компоненты страницы генератора. Движок кнопок перенесён из lingo (один
   базовый класс + роли), остальное — карточки/поля/таблица в той же системе.
   =========================================================================== */

/* ---- каркас страницы ---- */
.page{max-width:860px;margin:0 auto;padding:0 var(--sp-4) var(--sp-8)}
.topbar{background:var(--grad-header);color:var(--on-dark);box-shadow:var(--sh-2)}
.topbar-in{max-width:860px;margin:0 auto;padding:var(--sp-5) var(--sp-4);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap}
.brand{display:flex;flex-direction:column;gap:2px}
.brand h1{margin:0;font-size:var(--fs-xl);font-weight:800}
.brand .sub{font-size:var(--fs-sm);opacity:.8}

/* ---- переключатель майнер/оператор (сегмент) ---- */
.seg{display:inline-flex;background:rgba(255,255,255,.14);border-radius:var(--r-pill);padding:3px}
.seg button{border:0;background:transparent;color:var(--on-dark);cursor:pointer;
  padding:8px 16px;border-radius:var(--r-pill);font-weight:700;font-size:var(--fs-sm);
  transition:background var(--t) var(--ease),color var(--t) var(--ease)}
.seg button.active{background:var(--card);color:var(--ink)}

/* ---- карточки-секции ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);padding:var(--sp-5);margin-top:var(--sp-5)}
.card > h2{margin:0 0 var(--sp-1);font-size:var(--fs-lg)}
.card > .hint{margin:0 0 var(--sp-4);color:var(--muted);font-size:var(--fs-sm)}
.step{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:var(--r-pill);background:var(--accent-fill);color:var(--accent-ink);
  font-size:var(--fs-xs);font-weight:800;margin-right:var(--sp-2)}

/* ---- поля формы ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp-4)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:var(--fs-sm);font-weight:700;color:var(--muted-strong)}
.field .sub{font-size:var(--fs-xs);color:var(--faint);font-weight:400}
.field input,.field select{
  border:1px solid var(--line-mid);border-radius:var(--r-sm);padding:10px 12px;
  font-size:var(--fs-md);color:var(--ink);background:var(--card);
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.field input:focus,.field select:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}

/* ---- зона загрузки ---- */
.drop{border:2px dashed var(--line-mid);border-radius:var(--r-md);background:var(--surface);
  padding:var(--sp-7) var(--sp-4);text-align:center;cursor:pointer;color:var(--muted);
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease)}
.drop:hover,.drop.over{border-color:var(--accent);background:var(--accent-tint);color:var(--accent-ink)}
.drop strong{color:var(--ink)}
.filelist{list-style:none;margin:var(--sp-4) 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.filelist li{display:flex;align-items:center;gap:10px;background:var(--surface);
  border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:10px 12px;font-size:var(--fs-sm)}
.filelist .fname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- бейджи статусов ---- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:800;line-height:1.6}
.badge.ok{background:var(--ok-tint);color:var(--ok-ink);border:1px solid var(--ok-line)}
.badge.bad{background:var(--alert-tint);color:var(--alert-ink);border:1px solid var(--alert-line)}
.badge.warn{background:var(--draft-tint);color:var(--draft-ink);border:1px solid var(--draft-line)}
.badge.muted{background:var(--fill-soft);color:var(--muted-strong);border:1px solid var(--line)}

/* ---- таблица результатов ---- */
.tablewrap{overflow-x:auto}
table.res{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
table.res th,table.res td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line-soft)}
table.res th{color:var(--muted-strong);font-weight:700;font-size:var(--fs-xs);
  text-transform:uppercase;letter-spacing:var(--tracking-caps)}
table.res tr:last-child td{border-bottom:0}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-3);margin-top:var(--sp-4)}
.kpi{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4)}
.kpi .k{font-size:var(--fs-xs);color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-caps)}
.kpi .v{font-size:var(--fs-xl);font-weight:800;color:var(--ink-strong);margin-top:2px}

/* ---- предупреждение о заглушках ---- */
.note{border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sm);margin-top:var(--sp-4)}
.note.warn{background:var(--draft-tint);border:1px solid var(--draft-line);color:var(--draft-ink)}
.note.bad{background:var(--alert-tint);border:1px solid var(--alert-line);color:var(--alert-ink)}

/* ---- ряд действий ---- */
.actions{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-5);align-items:center}

/* ---- заглушка оператора ---- */
.stub{text-align:center;padding:var(--sp-8) var(--sp-4);color:var(--muted)}
.stub .big{font-size:var(--fs-2xl);font-weight:800;color:var(--ink);margin-bottom:var(--sp-2)}

.hidden{display:none !important}
/* кнопка-ссылка в отключённом виде (у <a> нет :disabled) */
.btn.is-disabled{opacity:.45;pointer-events:none;box-shadow:none}
a.btn{text-decoration:none}

/* ═══ ДВИЖОК КНОПОК (перенесён из lingo) — один базовый .btn + роли ═══ */
.btn{
  --btn-r:var(--r-md); --btn-px:18px; --btn-py:11px; --btn-fs:14px; --btn-fw:700;
  --btn-face:var(--card); --btn-ink:var(--ink); --btn-line:var(--line);
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  box-sizing:border-box;min-height:44px;
  border:1px solid var(--btn-line);border-radius:var(--btn-r);
  padding:var(--btn-py) var(--btn-px);
  font-family:inherit;font-size:var(--btn-fs);font-weight:var(--btn-fw);line-height:1.2;
  color:var(--btn-ink);background:var(--btn-face);cursor:pointer;box-shadow:var(--sh-1);
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease),
             box-shadow var(--t) var(--ease),transform var(--t-fast) var(--ease)}
.btn:disabled{opacity:.45;cursor:default;box-shadow:none;transform:none}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}
.btn--sm{--btn-px:14px;--btn-py:8px;--btn-fs:13px;--btn-r:var(--r-sm);min-height:38px}
/* роль ghost — вид по умолчанию */
.btn:hover:not(:disabled){border-color:var(--accent);background:var(--accent-tint);box-shadow:var(--sh-2)}
.btn--primary{--btn-line:transparent;--btn-ink:var(--on-dark);
  background:var(--grad-primary);box-shadow:var(--gloss),var(--sh-1)}
.btn--primary:hover:not(:disabled){box-shadow:var(--gloss),0 6px 18px color-mix(in srgb,var(--primary) 42%,transparent)}
.btn--accept{--btn-line:transparent;--btn-ink:var(--on-dark);
  background:var(--grad-accept);box-shadow:var(--gloss),var(--sh-1)}
.btn--accept:hover:not(:disabled){box-shadow:var(--gloss),0 6px 18px color-mix(in srgb,var(--ok-solid) 40%,transparent)}
.btn--fill{--btn-line:var(--accent-solid);--btn-ink:var(--on-dark);
  background:var(--grad-fill);box-shadow:var(--gloss),var(--sh-1)}
.btn--fill:hover:not(:disabled){filter:brightness(1.04);box-shadow:var(--gloss),0 6px 18px color-mix(in srgb,var(--accent-solid) 40%,transparent)}
.btn--danger{--btn-ink:var(--alert)}
.btn--danger:hover:not(:disabled){border-color:var(--alert);background:var(--alert-tint);box-shadow:var(--sh-2)}
/* сочное движение — подъём на hover, вдавливание на press */
.btn:hover:not(:disabled){transform:translateY(-1px)}
.btn:active:not(:disabled){transform:translateY(0) scale(.97);box-shadow:var(--sh-press)}
@media (prefers-reduced-motion:reduce){
  .btn{transition:border-color var(--t) var(--ease),background var(--t) var(--ease),box-shadow var(--t) var(--ease)}
  .btn:hover,.btn:active{transform:none}
}
/* состояние loading — спиннер вместо подписи, клики заблокированы */
.btn.is-loading{color:transparent;pointer-events:none;position:relative}
.btn.is-loading::after{content:"";position:absolute;top:calc(50% - 8px);left:calc(50% - 8px);
  width:16px;height:16px;border-radius:50%;border:2px solid var(--btn-ink);border-top-color:transparent;
  animation:btn-spin .7s linear infinite}
@keyframes btn-spin{to{transform:rotate(360deg)}}
/* состояние done — краткий зелёный «✓ сработало» */
.btn.is-done{--btn-line:var(--ok-line);--btn-ink:var(--ok-ink);background:var(--ok-tint);filter:none;box-shadow:var(--sh-1)}