.configurator {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
}
.config-panel { display: flex; flex-direction: column; gap: var(--space-5); }
.field label { display: flex; justify-content: space-between; font-weight: 600; font-size: var(--text-xs); margin-bottom: var(--space-2); }
.field input[type="range"] { width: 100%; accent-color: var(--color-brand-coral); height: 44px; }
.note-card { background: var(--color-surface-alt); border-radius: var(--radius-md); padding: var(--space-4); font-size: var(--text-xs); color: var(--color-ink-soft); }
.config-notice {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-chip-active-bg);
  color: var(--color-chip-active-text);
  font-size: var(--text-xs);
  font-weight: 700;
}
.mini-models-head { display: flex; flex-direction: column; gap: 2px; }
.mini-models-head h4 { margin: 0; font-size: var(--text-sm); }
.mini-models-head p { margin: 0; font-size: 11px; color: var(--color-ink-faint); }
.mini-models { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--space-2); }
.mini-model {
  border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2);
  text-align: center; font-size: 11px; font-weight: 700; font-family: inherit; color: inherit;
  background: var(--color-surface); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 78px; position: relative; overflow: hidden;
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.mini-model:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.mini-model:focus-visible { outline: 2px solid var(--color-brand-coral); outline-offset: 2px; }
.mini-model.best { background: var(--color-chip-active-bg); color: var(--color-chip-active-text); border-color: var(--color-chip-active-bg); }
.mini-model.good { background: var(--color-surface-alt); }
.mini-model.disabled { opacity: .45; }
.mini-model small { display: block; font-weight: 400; color: inherit; opacity: .8; }
.mini-model-name { line-height: 1.15; }
.mini-model.has-stock { border-color: rgba(47, 158, 68, .7); opacity: 1; }
.mini-model-stock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
  padding: 4px 7px;
  border-radius: var(--radius-pill);
  background: #167d36;
  color: #fff;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .045em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(47, 158, 68, .24);
}
.mini-model-stock::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #baff78; }
.config-stock-badge { position: absolute; right: 14px; bottom: 14px; z-index: 5; }

.config-result { display: flex; flex-direction: column; gap: var(--space-5); }
.result-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-6) var(--space-5);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.result-title { margin: var(--space-2) 0; }
.fit { max-width: 46ch; }
.result-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); margin: var(--space-5) 0; width: 100%; max-width: 460px; }
.result-stats b { display: block; font-size: var(--text-md); font-variant-numeric: tabular-nums; }
.result-stats small { color: var(--color-ink-faint); font-size: 11px; }
.confidence { width: 100%; max-width: 460px; height: 8px; border-radius: var(--radius-pill); background: var(--color-surface); overflow: hidden; }
.confidence span { display: block; height: 100%; background: linear-gradient(90deg, var(--color-brand-yellow), var(--color-brand-coral)); border-radius: var(--radius-pill); transition: width var(--duration-base) var(--ease-out); }
.config-actions { display: flex; justify-content: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); }

@media (max-width: 900px) {
  .configurator { grid-template-columns: 1fr; }
  .result-stats { grid-template-columns: repeat(2, 1fr); }
}