/* ТЗ Конфигуратор — все классы с префиксом tz- чтобы не конфликтовать с темой */

#tz-configurator-root {
  --tz-bg:#0f1115; --tz-panel:#171a21; --tz-panel2:#1f232c; --tz-border:#2a2f3a;
  --tz-accent:#5b8cff; --tz-accent2:#3ddc97; --tz-text:#e8eaf0; --tz-muted:#8a90a0;
  --tz-danger:#ff5b6e; --tz-radius:14px;

  max-width: 880px;
  margin: 0 auto;
  padding: 32px 20px 100px;
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--tz-text);
  line-height: 1.5;
  box-sizing: border-box;
}
#tz-configurator-root *, #tz-configurator-root *::before, #tz-configurator-root *::after {
  box-sizing: border-box;
}

#tz-configurator-root h1 { font-size:22px; margin:0 0 4px; color: var(--tz-text); }
#tz-configurator-root .tz-sub { color:var(--tz-muted); margin:0 0 28px; font-size:14px; }

/* Progress bar */
.tz-progress { display:flex; gap:4px; margin-bottom:28px; }
.tz-progress div { flex:1; height:4px; border-radius:2px; background:var(--tz-border); }
.tz-progress div.done { background:var(--tz-accent2); }
.tz-progress div.active { background:var(--tz-accent); }

/* Steps */
.tz-step {
  display:none; background:var(--tz-panel); border:1px solid var(--tz-border);
  border-radius:var(--tz-radius); padding:24px;
}
.tz-step.active { display:block; animation:tz-fade .25s ease; }
@keyframes tz-fade { from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:translateY(0);} }

#tz-configurator-root .tz-step h2 { font-size:17px; margin:0 0 4px; color:var(--tz-text); }
.tz-hint { color:var(--tz-muted); font-size:13px; margin:0 0 18px; }

/* Inputs */
.tz-field-label { display:block; font-size:13px; color:var(--tz-muted); margin:18px 0 6px; }
#tz-configurator-root input[type=text],
#tz-configurator-root input[type=number],
#tz-configurator-root textarea,
#tz-configurator-root select {
  width:100%; background:var(--tz-panel2); border:1px solid var(--tz-border);
  color:var(--tz-text); border-radius:10px; padding:11px 13px;
  font-size:14px; font-family:inherit;
}
#tz-configurator-root textarea { resize:vertical; min-height:90px; }
#tz-configurator-root input:focus,
#tz-configurator-root textarea:focus,
#tz-configurator-root select:focus { outline:none; border-color:var(--tz-accent); }

.tz-row { display:flex; gap:12px; flex-wrap:wrap; }
.tz-row > * { flex:1; min-width:180px; }

/* Toggle */
.tz-toggle-row {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--tz-panel2); border:1px solid var(--tz-border); border-radius:10px;
  padding:13px 15px; margin-top:10px; cursor:pointer; user-select:none;
}
.tz-toggle-row .tz-t { font-size:14px; color:var(--tz-text); }
.tz-toggle-row .tz-d { font-size:12px; color:var(--tz-muted); display:block; margin-top:2px; }
.tz-switch {
  width:42px; height:24px; border-radius:12px; background:var(--tz-border);
  position:relative; flex-shrink:0; transition:.2s;
}
.tz-switch::after {
  content:''; position:absolute; width:18px; height:18px; border-radius:50%;
  background:#fff; top:3px; left:3px; transition:.2s;
}
.tz-toggle-row.on .tz-switch { background:var(--tz-accent); }
.tz-toggle-row.on .tz-switch::after { left:21px; }

/* Chips */
.tz-chip-grid { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.tz-chip {
  padding:9px 14px; border-radius:20px; border:1px solid var(--tz-border);
  background:var(--tz-panel2); font-size:13px; cursor:pointer;
  transition:.15s; color:var(--tz-text);
}
.tz-chip:hover { border-color:var(--tz-accent); }
.tz-chip.sel { background:var(--tz-accent); border-color:var(--tz-accent); color:#fff; }
.tz-chip.tz-unsure { border-style:dashed; }
.tz-chip.tz-unsure.sel { background:var(--tz-danger); border-color:var(--tz-danger); }

/* Cards (MCU list) */
.tz-card-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
@media(max-width:560px) { .tz-card-grid { grid-template-columns:1fr; } }
.tz-card {
  border:1px solid var(--tz-border); background:var(--tz-panel2);
  border-radius:12px; padding:14px; cursor:pointer; transition:.15s;
}
.tz-card:hover { border-color:var(--tz-accent); }
.tz-card.sel { border-color:var(--tz-accent); box-shadow:0 0 0 1px var(--tz-accent) inset; }
.tz-card .name { font-weight:600; font-size:14px; color:var(--tz-text); }
.tz-card .meta { font-size:12px; color:var(--tz-muted); margin-top:4px; }
.tz-badge {
  display:inline-block; font-size:11px; padding:2px 7px;
  border-radius:8px; margin-top:6px; margin-right:4px;
}
.tz-badge.ok { background:rgba(61,220,151,.15); color:var(--tz-accent2); }
.tz-badge.warn { background:rgba(255,91,110,.15); color:var(--tz-danger); }

/* Dropzone */
.tz-dropzone {
  border:2px dashed var(--tz-border); border-radius:12px; padding:24px;
  text-align:center; color:var(--tz-muted); font-size:13px;
  margin-top:10px; cursor:pointer; transition:.15s;
}
.tz-dropzone:hover { border-color:var(--tz-accent); color:var(--tz-text); }

/* File list */
.tz-file-list { margin-top:10px; font-size:13px; }
.tz-file-list div {
  display:flex; justify-content:space-between; background:var(--tz-panel2);
  padding:8px 12px; border-radius:8px; margin-bottom:6px; color:var(--tz-text);
}
.tz-file-list button {
  background:none; border:none; color:var(--tz-danger); cursor:pointer; font-size:13px;
}

/* AI box */
.tz-ai-box {
  border:1px solid var(--tz-border); border-radius:12px; padding:14px;
  margin-top:14px; background:var(--tz-panel2);
}
.tz-ai-status {
  font-size:12px; color:var(--tz-accent2); display:flex;
  align-items:center; gap:6px; margin-bottom:8px;
}
.tz-spinner {
  width:12px; height:12px; border:2px solid var(--tz-border);
  border-top-color:var(--tz-accent2); border-radius:50%;
  animation:tz-spin .7s linear infinite; display:inline-block;
}
@keyframes tz-spin { to{transform:rotate(360deg);} }
.tz-btn-ai {
  background:transparent; border:1px solid var(--tz-accent); color:var(--tz-accent);
  padding:8px 14px; border-radius:8px; font-size:13px; cursor:pointer; margin-top:8px;
}
.tz-btn-ai:hover { background:rgba(91,140,255,.1); }

/* Navigation */
.tz-nav { display:flex; justify-content:space-between; margin-top:22px; }
.tz-btn {
  padding:11px 22px; border-radius:10px; border:none;
  font-size:14px; cursor:pointer; font-weight:500;
}
.tz-btn-primary { background:var(--tz-accent); color:#fff; }
.tz-btn-primary:disabled { opacity:.4; cursor:not-allowed; }
.tz-btn-secondary { background:var(--tz-panel2); color:var(--tz-text); border:1px solid var(--tz-border); }
.tz-btn-final { background:var(--tz-accent2); color:#0f1115; font-weight:700; }

/* Summary */
.tz-summary {
  background:#fff; color:#1a1a1a; border:1px solid var(--tz-border);
  border-radius:10px; padding:28px 32px; font-size:14px;
  max-height:520px; overflow:auto; line-height:1.6;
}
.tz-summary h3 { font-size:16px; margin:20px 0 8px; color:#111; border-bottom:1px solid #e3e3e3; padding-bottom:6px; }
.tz-summary h3:first-child { margin-top:0; }
.tz-summary p { margin:4px 0 10px; }
.tz-summary .doc-title { font-size:20px; font-weight:700; margin-bottom:4px; color:#111; }
.tz-summary .doc-sub { color:#777; font-size:12px; margin-bottom:18px; }
.tz-summary .row2 {
  display:flex; justify-content:space-between; gap:12px;
  padding:3px 0; border-bottom:1px dashed #eee; font-size:13px;
}
.tz-summary .row2 b { color:#333; }
.tz-summary .empty { color:#999; font-style:italic; }

.tz-err { color:var(--tz-danger); font-size:12px; margin-top:6px; }
.tz-opt-note { font-size:12px; color:var(--tz-muted); margin-top:8px; }