/* ============ SUPPLEMENTS SETTINGS CSS ============ */
.sup-kpi-row {
  display:flex;
  gap:var(--w2-s2);
  margin-bottom:var(--w2-s4)
}

.sup-kpi {
  flex:1;
  padding:var(--w2-s4) var(--w2-s4);
  border:1px solid var(--border);
  border-radius:var(--w2-s3);
  background:var(--surface-el);
  cursor:pointer;
  transition: color .14s, background-color .14s, border-color .14s, box-shadow .14s, transform .14s, opacity .14s;
  text-align:center
}

.sup-kpi:hover {
  border-color:var(--border-hi);
  background:var(--surface-hi)
}

.sup-kpi.active {
  border-color:var(--green);
  background:var(--green-ghost)
}

.sup-kpi .sk-label {
  font:600 10px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-dim)
}

.sup-kpi .sk-val {
  font:700 22px/1 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  color:var(--text);
  margin-top:var(--w2-s2);
  letter-spacing:-.01em
}

.sup-kpi.active .sk-val {
  color:var(--green)
}

.sup-card {
  padding:var(--w2-s4) var(--w2-s4);
  background:var(--surface-el);
  border:1px solid var(--border);
  border-radius:var(--w2-s3);
  transition: color .14s
}

.sup-card:hover {
  border-color:var(--border-hi), background-color .14s
}

.sup-card:hover {
  border-color:var(--border-hi), border-color .14s
}

.sup-card:hover {
  border-color:var(--border-hi), box-shadow .14s
}

.sup-card:hover {
  border-color:var(--border-hi), transform .14s
}

.sup-card:hover {
  border-color:var(--border-hi), opacity .14s
}

.sup-card:hover {
  border-color:var(--border-hi);
  background:var(--surface-hi)
}

.sup-card.is-off {
  opacity:.45
}

.sup-card.is-off:hover {
  opacity:.6
}

.sup-card-head {
  display:flex;
  align-items:center;
  gap:var(--w2-s3)
}

.sup-card-left {
  display:flex;
  align-items:center;
  gap:var(--w2-s2);
  flex:1;
  min-width:0
}

.sup-card-right {
  display:flex;
  align-items:center;
  gap:var(--w2-s2);
  flex-shrink:0
}

.sup-card-name {
  font:600 13px/1.3 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  color:var(--text);
  cursor:pointer;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.sup-card-name[contenteditable="true"] {
  color:var(--green)
}

.sup-card.detail-open .sup-card-name {
  color:var(--green)
}

.sup-group-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  flex-shrink:0
}

.sup-group-label {
  font:400 11px/1 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  color:var(--text-dim);
  white-space:nowrap
}

.sup-protocol-tag {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border-radius:var(--w2-s2);
  font:700 10px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  color:var(--green);
  border:1px solid var(--green);
  background:var(--green-ghost);
  flex-shrink:0;
  cursor:default
}

.sup-toggle-badge {
  display:inline-flex;
  align-items:center;
  padding:var(--w2-s1) var(--w2-s3);
  border-radius:var(--w2-s2);
  font:700 10px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  transition: color .14s, background-color .14s, border-color .14s, box-shadow .14s, transform .14s, opacity .14s;
  white-space:nowrap;
  user-select:none
}

.sup-toggle-badge.on {
  color:var(--text-dim);
  background:transparent;
  border:1px solid var(--border)
}

.sup-toggle-badge.on:hover {
  color:#C8F135;
  background:rgba(200,241,53,.12);
  border-color:rgba(200,241,53,.3)
}

.sup-toggle-badge.off {
  color:var(--text-dim);
  background:transparent;
  border:1px solid var(--border)
}

.sup-toggle-badge.off:hover {
  color:var(--error);
  background:rgba(241,70,44,.08);
  border-color:rgba(241,70,44,.25)
}

.sup-ev-badge {
  display:inline-flex;
  align-items:center;
  padding:var(--w2-s1) var(--w2-s2);
  border-radius:var(--w2-s2);
  font:700 10px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  letter-spacing:.04em;
  border:1px solid;
  white-space:nowrap
}

.sup-meta {
  display:inline-flex;
  align-items:center;
  gap:var(--w2-s1);
  font:600 10px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  color:var(--text-dim);
  white-space:nowrap
}

.sup-meta svg {
  width:12px;
  height:12px;
  stroke:currentColor;
  stroke-width:2;
  fill:none;
  flex-shrink:0
}

.sup-card-actions {
  display:flex;
  align-items:center;
  gap:var(--w2-s1);
  flex-shrink:0
}

.sup-card-actions .icon-btn {
  width:28px;
  height:28px;
  border-radius:var(--w2-s2);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-dim);
  border:1px solid transparent;
  transition: color .14s, background-color .14s, border-color .14s, box-shadow .14s, transform .14s, opacity .14s;
  background:transparent
}

.sup-card-actions .icon-btn:hover {
  border-color:var(--border-hi);
  color:var(--text)
}

.sup-card-actions .icon-btn.danger:hover {
  border-color:rgba(241,70,44,.4);
  color:var(--error)
}

.sup-card-actions .icon-btn svg {
  width:14px;
  height:14px;
  stroke:currentColor;
  stroke-width:2;
  fill:none
}

/* below-threshold dimming removed (#13) — threshold only affects auto-wizard, not visual catalog */
.sup-search {
  width:100%;
  padding:var(--w2-s2) var(--w2-s3) var(--w2-s2) var(--w2-s8);
  border:1px solid var(--border);
  border-radius:var(--w2-s2);
  background:var(--surface-el);
  color:var(--text);
  font:400 13px/1.4 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  transition:border-color .14s;
  margin-bottom:var(--w2-s3)
}

.sup-search:focus {
  border-color:var(--green);
  outline:none
}

.sup-search-wrap {
  position:relative;
  display:block
}

.sup-search-wrap>svg {
  position:absolute;
  left:var(--w2-s3);
  top:50%;
  transform:translateY(-50%);
  width:16px;
  height:16px;
  stroke:var(--text-dim);
  stroke-width:2;
  fill:none;
  pointer-events:none;
  z-index:1
}

.sup-detail {
  display:none;
  margin-top:var(--w2-s3);
  padding-top:var(--w2-s3);
  border-top:1px solid var(--border);
  font:400 12px/1.6 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  color:var(--text-mute)
}

.sup-detail.open {
  display:block
}

.sup-detail-section {
  margin-bottom:var(--w2-s3)
}

.sup-detail-section:last-child {
  margin-bottom:0
}

.sup-detail-label {
  font:600 10px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:var(--w2-s1)
}

/* Read-only view */
.sup-detail-head {
  display:flex;
  align-items:center;
  gap:var(--w2-s2);
  margin-bottom:var(--w2-s1)
}

.sup-detail-pencil {
  width:14px;
  height:14px;
  stroke:var(--text-dim);
  stroke-width:2;
  fill:none;
  cursor:pointer;
  flex-shrink:0;
  opacity:.5;
  transition:opacity .14s
}

.sup-detail-pencil:hover {
  opacity:1;
  stroke:var(--green)
}

.sup-detail-val {
  font:400 12px/1.6 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  color:var(--text);
  white-space:pre-wrap;
  word-break:break-word
}

.sup-detail-val:empty::after {
  content:'—';
  color:var(--text-dim)
}

/* Editable input (hidden until pencil click) */
.sup-detail-edit {
  width:100%;
  padding:var(--w2-s2) var(--w2-s3);
  border:1px solid var(--border);
  border-radius:var(--w2-s2);
  background:var(--bg);
  color:var(--text);
  font:400 12px/1.6 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  transition:border-color .14s;
  display:none
}

.sup-detail-edit.active {
  display:block
}

.sup-detail-edit:focus {
  border-color:var(--green);
  outline:none
}

.sup-detail-edit.saved {
  border-color:var(--green);
  box-shadow:0 0 0 2px var(--green-ghost);
  background:rgba(200,241,53,.06)
}

.sup-detail-edit-area {
  width:100%;
  min-height:48px;
  padding:var(--w2-s2) var(--w2-s3);
  border:1px solid var(--border);
  border-radius:var(--w2-s2);
  background:var(--bg);
  color:var(--text);
  font:400 12px/1.6 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  resize:vertical;
  transition:border-color .14s;
  display:none
}

.sup-detail-edit-area.active {
  display:block
}

.sup-detail-edit-area:focus {
  border-color:var(--green);
  outline:none
}

.sup-detail-edit-area.saved {
  border-color:var(--green);
  box-shadow:0 0 0 2px var(--green-ghost);
  background:rgba(200,241,53,.06)
}

/* #7: chip focus-visible */
.chip:focus-visible {
  outline:2px solid var(--green);
  outline-offset:2px
}

/* #17: inline name editing */
.sup-card-name[contenteditable="true"] {
  outline:none;
  border-bottom:1px dashed var(--green);
  padding-bottom:var(--w2-s1);
  min-width:60px
}

.sup-card-name.name-saved {
  border-bottom-color:var(--green);
  background:rgba(200,241,53,.08);
  border-radius:var(--w2-s1)
}

/* #6: KPI keyboard */
.sup-kpi:focus-visible {
  outline:2px solid var(--green);
  outline-offset:2px
}

/* #8/#22: Mobile responsive */
@media(max-width:500px) {
  /* Поле поиска по каталогу было 36 px высотой — ниже пальцевого минимума. */
  .sup-search {
    min-height:var(--w2-s8);
  }


  .sup-card-head {
    flex-direction:column;
    align-items:flex-start;
    gap:var(--w2-s2)
  }

  .sup-card-left {
    width:100%;
    min-width:0
  }

  .sup-card-name {
    flex:1 1 auto;
    min-width:0;
    min-height:var(--w2-s8);
    display:flex;
    align-items:center;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    overflow-wrap:anywhere
  }

  .sup-card-right {
    width:100%;
    justify-content:space-between;
    flex-wrap:wrap;
    flex-shrink:0;
    gap:var(--w2-s1)
  }

  .sup-toggle-badge,
  .sup-card-actions .icon-btn {
    min-width:var(--w2-s8);
    min-height:var(--w2-s8)
  }

  .sup-kpi-row {
    flex-direction:column;
    gap:var(--w2-s2)
  }

  .sup-kpi {
    padding:var(--w2-s3) var(--w2-s3)
  }

  .sup-kpi .sk-val {
    font-size:18px
  }

  #screen-settings .sound-source-sel {
    min-height:var(--w2-s8)
  }

}

/* Резервный системный редактор звуков остаётся в DOM для совместимости. */
.snd-setting-row {
  display:flex;
  align-items:center;
  gap:var(--w2-s3);
  padding:var(--w2-s3) var(--w2-s4);
  border:1px solid var(--w2-line);
  border-radius:var(--w2-s3);
  background:var(--w2-surface)
}

.snd-setting-icon {
  display:grid;
  place-items:center;
  flex-shrink:0;
  width:var(--w2-s6);
  height:var(--w2-s6);
  color:var(--w2-text-muted)
}

.snd-setting-icon svg,
.sound-meta-icon {
  width:var(--w2-s4);
  height:var(--w2-s4)
}

.snd-setting-label {
  min-width:110px;
  color:var(--w2-text);
  font:600 15px/1.25 Inter,sans-serif
}

.snd-setting-value {
  flex:1;
  color:var(--w2-text-muted);
  font:500 12px/1.2 'JetBrains Mono',monospace;
  font-variant-numeric:tabular-nums
}

.snd-setting-value.is-on {
  color:var(--w2-lime)
}

.snd-preview,
.snd-toggle {
  min-width:var(--w2-s8);
  min-height:var(--w2-s8);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--w2-s2);
  cursor:pointer;
  transition:color 160ms,border-color 160ms,background-color 160ms
}

.snd-preview {
  display:grid;
  place-items:center;
  color:var(--w2-lime);
  background:transparent
}

.snd-preview svg {
  width:var(--w2-s4);
  height:var(--w2-s4)
}

.snd-toggle {
  padding:var(--w2-s2) var(--w2-s3);
  color:var(--w2-text-muted);
  background:var(--w2-surface-raised);
  font:600 12px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  letter-spacing:.05em;
  text-transform:uppercase
}

.snd-toggle.is-off {
  border-color:rgba(200,241,53,.4);
  color:var(--w2-lime);
  background:rgba(200,241,53,.1)
}

.sup-undo-toast {
  position:fixed;
  z-index:99999;
  bottom:var(--w2-s6);
  left:50%;
  display:flex;
  align-items:center;
  gap:var(--w2-s4);
  padding:var(--w2-s3) var(--w2-s6);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--w2-s2);
  color:var(--w2-text);
  background:var(--w2-surface-raised);
  box-shadow:0 18px 48px rgba(0,0,0,.35);
  font-size:14px;
  opacity:0;
  transform:translate(-50%,var(--w2-s2));
  transition:opacity 300ms,transform 300ms
}

.sup-undo-toast.is-visible {
  opacity:1;
  transform:translate(-50%,0)
}

.sup-undo-toast button {
  min-height:var(--w2-s8);
  padding:var(--w2-s1) var(--w2-s3);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--w2-s2);
  color:var(--w2-lime);
  background:transparent;
  font:600 12px/1 Inter,sans-serif; font-variant-numeric: tabular-nums;
  cursor:pointer
}

/* ============ END SUPPLEMENTS SETTINGS CSS ============ */
/* ============ SYSTEM SETTINGS CSS ============ */
.sound-row {
  display:flex;
  gap:var(--w2-s3);
  align-items:center;
  padding:var(--w2-s3) var(--w2-s4);
  background:var(--surface-el,rgba(255,255,255,.03));
  border:1px solid var(--border);
  border-radius:var(--w2-s3);
  margin-bottom:var(--w2-s2);
  transition:border-color .14s
}

.sound-row:hover {
  border-color:var(--border-hi,rgba(255,255,255,.12))
}

.sound-row .play {
  width:32px;
  height:32px;
  border-radius:var(--w2-s2);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--green);
  border:1px solid var(--border);
  flex-shrink:0;
  transition: color .14s, background-color .14s, border-color .14s, box-shadow .14s, transform .14s, opacity .14s;
  background:none;
  cursor:pointer
}

.sound-row .play:hover {
  background:rgba(200,241,53,.08);
  border-color:var(--green)
}

.sound-row .play.playing {
  color:#fff;
  background:var(--green);
  border-color:var(--green)
}

.sound-source-sel {
  padding:var(--w2-s1) var(--w2-s2);
  border:1px solid var(--border);
  border-radius:var(--w2-s2);
  background:var(--bg,#16181A);
  color:var(--text,#FFFFFF);
  font:500 11px/1.4 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  cursor:pointer;
  transition:border-color .14s;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23777'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 6px center;
  padding-right:var(--w2-s5)
}

.sound-source-sel:focus {
  border-color:var(--green);
  outline:none
}

.sys-test-modal {
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.7);
  animation:fadeIn .2s
}

.sys-test-panel {
  background:var(--surface,#1E2023);
  border:1px solid var(--border);
  border-radius:var(--w2-s4);
  padding:var(--w2-s6);
  width:min(460px,90vw);
  max-height:80vh;
  overflow-y:auto
}

.sys-test-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:var(--w2-s4)
}

.sys-test-header h3 {
  font:700 16px/1.2 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  color:var(--text,#FFFFFF);
  margin:0
}

.sys-test-close {
  width:28px;
  height:28px;
  border-radius:var(--w2-s2);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-dim,rgba(255,255,255,.35));
  border:1px solid var(--border);
  transition: color .14s, background-color .14s, border-color .14s, box-shadow .14s, transform .14s, opacity .14s;
  background:none;
  cursor:pointer
}

.sys-test-close:hover {
  border-color:var(--border-hi,rgba(255,255,255,.12));
  color:var(--text,#FFFFFF)
}

.sys-test-item {
  display:flex;
  align-items:center;
  gap:var(--w2-s3);
  padding:var(--w2-s2) 0;
  border-bottom:1px solid var(--border)
}

.sys-test-item:last-child {
  border-bottom:none
}

.sys-test-dot {
  width:20px;
  height:20px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font:600 10px/1 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  flex-shrink:0
}

.sys-test-dot.pass {
  background:rgba(200,241,53,.15);
  color:var(--green)
}

.sys-test-dot.fail {
  background:rgba(241,70,44,.15);
  color:var(--error,#F1462C)
}

.sys-test-dot.running {
  background:rgba(255,217,61,.15);
  color:var(--amber,#FFD740);
  animation:pulse .8s infinite
}

.sys-test-summary {
  display:flex;
  align-items:center;
  gap:var(--w2-s3);
  margin-top:var(--w2-s4);
  padding:var(--w2-s3);
  background:var(--surface-el,rgba(255,255,255,.03));
  border-radius:var(--w2-s2)
}

.sys-test-summary .ring {
  width:48px;
  height:48px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font:700 16px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  flex-shrink:0
}

.sys-sound-upload-list {
  margin-bottom:var(--w2-s2)
}

.sys-sound-upload-item {
  display:flex;
  align-items:center;
  gap:var(--w2-s2);
  padding:var(--w2-s2) var(--w2-s3);
  background:var(--surface-el,rgba(255,255,255,.03));
  border:1px solid var(--border);
  border-radius:var(--w2-s2);
  margin-bottom:var(--w2-s2);
  font:400 12px/1.4 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  color:var(--text,#FFFFFF)
}

/* ============ END SYSTEM SETTINGS CSS ============ */
/* ═══════ MOBILE: bottom tab bar (≤500px) ═══════ */