/* ==========================================================================
   Configurator styles.

   Loaded AFTER the website's style.css and built on its custom properties
   (--primary, --border, --radius…) so the tool inherits the site's palette and
   typography. Only patterns the site does not have live here.

   Two site traps, both known from /shop: #bg-canvas is position:fixed at
   z-index 999 and paints OVER static content, so every panel is
   position:relative; z-index:1000 with an opaque background. And .feature-card
   starts at opacity:0 until main.js reveals it — never reuse that class here.
   ========================================================================== */

.cfg-preview-banner {
  position: sticky;
  top: var(--nav-height);
  z-index: 40;
  padding: 10px 20px;
  text-align: center;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: #0b1220;
  background: linear-gradient(90deg, var(--warning), #fbbf24);
}

.cfg-hero .hero-sub { max-width: 760px; }
.cfg-hero-compact.page-hero { padding-bottom: 24px; }
.cfg-container { position: relative; z-index: 1000; }
.cfg-disclaimer {
  position: relative;
  z-index: 1000;
  margin-top: 28px;
  font-size: .78rem;
  color: var(--text-3);
  max-width: 900px;
}

/* ── Vendor overview ───────────────────────────────────────────────────── */
.cfg-vendor-grid {
  position: relative;
  z-index: 1000;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.cfg-vendor-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 28px;
  background: #0a1526;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: var(--transition);
}
.cfg-vendor-card:hover { border-color: var(--border-hover); transform: translateY(-3px); }
.cfg-vendor-card h2 { font-size: 1.3rem; margin: 0; }
.cfg-vendor-card p { margin: 0 0 8px; font-size: .92rem; }
.cfg-vendor-card .btn { align-self: flex-start; }
.cfg-vendor-logo { height: 36px; width: auto; }
.cfg-vendor-soon { opacity: .55; }

/* ── App shell ─────────────────────────────────────────────────────────── */
.cfg-app {
  background: #060d1a;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  min-height: 420px;
}
.cfg-loading { padding: 60px; text-align: center; color: var(--text-3); }

/* Progress bar across the top: device → mode → configuration → script */
.cfg-progress {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--border);
  background: #0a1526;
}
.cfg-progress button {
  appearance: none;
  border: 0;
  background: none;
  padding: 14px 12px;
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-3);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.cfg-progress button[disabled] { cursor: default; opacity: .6; }
.cfg-progress button.done { color: var(--text-2); }
.cfg-progress button.active { color: var(--primary); border-bottom-color: var(--primary); }
.cfg-progress .num {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: .72rem;
  background: rgba(255,255,255,.06);
}
.cfg-progress .active .num { background: var(--primary); color: #04080f; }
.cfg-progress .done .num { background: var(--success); color: #04080f; }

.cfg-screen { padding: 28px; }
.cfg-screen-head { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: baseline; justify-content: space-between; margin-bottom: 20px; }
.cfg-screen-head h2 { font-size: 1.35rem; margin: 0; }
.cfg-screen-head p { margin: 4px 0 0; font-size: .9rem; }
.cfg-context {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #0a1526;
  font-size: .82rem;
  color: var(--text-2);
}
.cfg-context img { width: 34px; height: 34px; object-fit: contain; border-radius: 50%; background: #fff; }
.cfg-context strong { color: var(--text-1); }
.cfg-context a { color: var(--primary); }

/* ── Device picker ─────────────────────────────────────────────────────── */
.cfg-toolbar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-bottom: 18px;
}
.cfg-search { position: relative; flex: 1 1 240px; }
.cfg-search input {
  width: 100%;
  padding: 10px 12px 10px 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #0a1526;
  color: var(--text-1);
  font: inherit; font-size: .9rem;
}
.cfg-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.cfg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cfg-chip {
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #0a1526;
  color: var(--text-2);
  font: inherit; font-size: .8rem; font-weight: 500;
  cursor: pointer;
}
.cfg-chip.active { border-color: var(--primary); color: var(--primary); background: var(--primary-dim); }

.cfg-device-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}
.cfg-device {
  display: flex; flex-direction: column;
  text-align: left;
  padding: 0;
  background: #101f38;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  font: inherit; color: inherit;
  transition: var(--transition-fast);
}
.cfg-device:hover { border-color: var(--border-hover); background: #16294a; }
.cfg-device.selected { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-dim); }
.cfg-device-media { height: 120px; background: #fff; display: flex; align-items: center; justify-content: center; }
.cfg-device-media img { max-height: 100px; max-width: 85%; object-fit: contain; }
.cfg-device-media.logo img { max-height: 34px; opacity: .7; }
.cfg-device-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.cfg-device-name { font-weight: 600; font-size: .92rem; color: var(--text-1); line-height: 1.3; }
.cfg-device-sku { font-size: .74rem; color: var(--text-3); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.cfg-device-ports { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.cfg-tag {
  font-size: .68rem;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: var(--text-2);
  white-space: nowrap;
}
.cfg-tag.wifi { background: var(--primary-dim); color: var(--primary); }
.cfg-tag.lte { background: var(--secondary-dim); color: #c4b5fd; }
.cfg-tag.virtual { background: rgba(16,185,129,.16); color: #34d399; }
.cfg-device.other .cfg-device-media { background: #0a1526; color: var(--primary); font-size: 2rem; }

/* Virtual devices (CHR) carry drawn artwork, not a product photo on white. */
.cfg-device.virtual .cfg-device-media { background: #0a1526; }
.cfg-device.virtual { border-color: var(--border-hover); }

/* ── Cards (modes, profiles) ───────────────────────────────────────────── */
.cfg-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.cfg-card {
  display: flex; flex-direction: column; gap: 8px;
  text-align: left;
  padding: 22px 20px;
  background: #101f38;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font: inherit; color: inherit;
  transition: var(--transition-fast);
}
.cfg-card:hover { border-color: var(--border-hover); background: #16294a; }
.cfg-card.selected { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-dim); }
.cfg-card[disabled] { opacity: .45; cursor: not-allowed; }
.cfg-card-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--primary-dim); color: var(--primary); }
.cfg-card h3 { margin: 0; font-size: 1.02rem; }
.cfg-card p { margin: 0; font-size: .85rem; }
.cfg-card-big h3 { font-size: 1.2rem; }
.cfg-card small { color: var(--text-3); font-size: .76rem; }

/* ── Forms ─────────────────────────────────────────────────────────────── */
.cfg-form { display: flex; flex-direction: column; gap: 18px; }
.cfg-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cfg-field > label, .cfg-field-label {
  font-size: .84rem; font-weight: 600; color: var(--text-2);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.cfg-field .cfg-opt { font-weight: 400; color: var(--text-3); font-size: .75rem; }
.cfg-help { font-size: .76rem; color: var(--text-3); line-height: 1.5; }
.cfg-help code, .cfg-apply code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; color: var(--primary); background: rgba(0,212,255,.06); padding: 1px 5px; border-radius: 4px; }
.cfg-input, .cfg-field select, .cfg-field textarea, .cfg-field input[type=text], .cfg-field input[type=number], .cfg-field input[type=password] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #0a1526;
  color: var(--text-1);
  font: inherit; font-size: .9rem;
  transition: var(--transition-fast);
}
.cfg-field textarea { min-height: 90px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; resize: vertical; }
.cfg-field input:focus, .cfg-field select:focus, .cfg-field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-dim); }
.cfg-field.invalid input, .cfg-field.invalid select, .cfg-field.invalid textarea { border-color: #f87171; }
.cfg-error { font-size: .76rem; color: #f87171; }
.cfg-mono input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.cfg-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.cfg-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px 18px; }
.cfg-field.span-2 { grid-column: span 2; }
.cfg-field.span-3 { grid-column: span 3; }
.cfg-inline { display: flex; gap: 8px; align-items: center; }
.cfg-inline input { flex: 1; }

/* Toggle switch */
.cfg-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: .88rem; color: var(--text-1); font-weight: 500; }
.cfg-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.cfg-toggle .track {
  width: 40px; height: 22px; border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid var(--border);
  position: relative;
  transition: var(--transition-fast);
  flex: 0 0 auto;
}
.cfg-toggle .track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--text-2);
  transition: var(--transition-fast);
}
.cfg-toggle input:checked + .track { background: var(--primary); border-color: var(--primary); }
.cfg-toggle input:checked + .track::after { left: 20px; background: #04080f; }
.cfg-toggle input:focus-visible + .track { box-shadow: 0 0 0 3px var(--primary-dim); }

/* Radio/check groups rendered as pills */
.cfg-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.cfg-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #0a1526;
  color: var(--text-2);
  font-size: .82rem;
  cursor: pointer;
  user-select: none;
}
.cfg-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.cfg-pill.on { border-color: var(--primary); color: var(--primary); background: var(--primary-dim); }
.cfg-pill.disabled { opacity: .4; cursor: not-allowed; }
.cfg-pill .sub { font-size: .7rem; color: var(--text-3); }
.cfg-pill.on .sub { color: var(--primary); opacity: .8; }

/* Interface assignment table */
.cfg-iface-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.cfg-iface-table th, .cfg-iface-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.cfg-iface-table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); font-weight: 600; }
.cfg-iface-table td:first-child { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text-1); }
.cfg-iface-table select { padding: 6px 8px; font-size: .82rem; }
.cfg-iface-table .speed { color: var(--text-3); font-size: .74rem; }

/* Repeater (list) fields */
.cfg-list { display: flex; flex-direction: column; gap: 10px; }
.cfg-list-row {
  display: grid;
  gap: 10px 12px;
  padding: 12px 14px 12px;
  background: #0a1526;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  align-items: end;
}
.cfg-list-row .cfg-field > label { font-size: .74rem; }
.cfg-list-remove {
  appearance: none; border: 1px solid var(--border); background: none; color: var(--text-3);
  border-radius: var(--radius-sm); padding: 8px 10px; cursor: pointer; font: inherit; font-size: .78rem;
  align-self: end;
}
.cfg-list-remove:hover { color: #f87171; border-color: rgba(248,113,113,.5); }
.cfg-list-add { align-self: flex-start; }

/* Section (advanced) */
.cfg-advanced { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 22px; align-items: start; }
.cfg-rail {
  position: sticky; top: calc(var(--nav-height) + 16px);
  display: flex; flex-direction: column; gap: 2px;
  max-height: calc(100vh - var(--nav-height) - 40px);
  overflow-y: auto;
  padding-right: 4px;
}
.cfg-rail button {
  appearance: none; border: 0; background: none;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  font: inherit; font-size: .84rem; color: var(--text-2); text-align: left; cursor: pointer;
}
.cfg-rail button:hover { background: rgba(255,255,255,.04); color: var(--text-1); }
.cfg-rail button.active { background: var(--primary-dim); color: var(--primary); }
.cfg-rail button.off { opacity: .5; }
.cfg-rail button.na { opacity: .35; cursor: not-allowed; }
.cfg-rail .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex: 0 0 auto; }
.cfg-rail .on .dot { background: var(--success); }
.cfg-rail .err .dot { background: #f87171; }
.cfg-rail-search { margin-bottom: 8px; }
.cfg-rail-search input { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #0a1526; color: var(--text-1); font: inherit; font-size: .82rem; }

.cfg-section-panel {
  background: #0a1526;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px 24px;
}
.cfg-section-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.cfg-section-head h3 { margin: 0; font-size: 1.1rem; flex: 1 1 auto; }
.cfg-section-head a { font-size: .78rem; color: var(--primary); }
.cfg-section-na { color: var(--text-3); font-size: .88rem; }
.cfg-subhead { margin: 8px 0 -6px; font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--primary); font-weight: 700; }
.cfg-note { padding: 10px 14px; border-radius: var(--radius-sm); background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.3); color: #fbbf24; font-size: .8rem; }
.cfg-note.info { background: rgba(0,212,255,.06); border-color: var(--border-hover); color: var(--text-2); }

/* Wizard.
   One column: the summary and the live script preview sit BELOW the form, not
   beside it. In a 300px side rail the generated config wrapped and clipped on
   every line, which made the preview unreadable and the whole step look
   cramped. Below the form they get the full width — summary narrow on the
   left, script wide on the right. */
.cfg-wizard { display: block; }
.cfg-wizard .cfg-aside {
  position: static;
  margin-top: 22px;
  display: grid;
  grid-template-columns: minmax(230px, 320px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.cfg-wizard .cfg-preview-mini {
  max-height: 460px;
  font-size: .76rem;
  line-height: 1.5;
}
.cfg-wizard-steps { display: flex; flex-direction: column; gap: 4px; }
.cfg-step-bar { display: flex; gap: 4px; margin-bottom: 18px; }
.cfg-step-bar span { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.08); }
.cfg-step-bar span.done { background: var(--success); }
.cfg-step-bar span.active { background: var(--primary); }
.cfg-step-title { font-size: .74rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.cfg-step-intro { font-size: .9rem; color: var(--text-2); margin: 0 0 18px; }
.cfg-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); }
.cfg-actions .spacer { flex: 1; }
.cfg-link { appearance: none; border: 0; background: none; color: var(--primary); font: inherit; font-size: .84rem; cursor: pointer; padding: 0; }
.cfg-link:hover { text-decoration: underline; }

.cfg-aside { position: sticky; top: calc(var(--nav-height) + 16px); display: flex; flex-direction: column; gap: 14px; }
.cfg-aside-panel { padding: 16px 18px; background: #0a1526; border: 1px solid var(--border); border-radius: var(--radius); min-width: 0; }
.cfg-aside-panel h4 { margin: 0 0 10px; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); }
.cfg-summary-line { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: .8rem; color: var(--text-2); border-bottom: 1px dashed var(--border); }
.cfg-summary-line:last-child { border-bottom: 0; }
.cfg-summary-line strong { color: var(--text-1); font-weight: 500; text-align: right; word-break: break-word; }
.cfg-preview-mini { max-height: 320px; overflow: auto; font-size: .7rem; line-height: 1.45; }

/* ── Output ─────────────────────────────────────────────────────────────── */
.cfg-output { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.cfg-code-wrap { background: #040a14; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.cfg-code-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; background: #0a1526; border-bottom: 1px solid var(--border); font-size: .8rem; color: var(--text-3); }
.cfg-code-bar .spacer { flex: 1; }
.cfg-code {
  margin: 0; padding: 16px 18px;
  max-height: 70vh; overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem; line-height: 1.55;
  color: #dbe4f0; white-space: pre; tab-size: 4;
}
.cfg-code .c { color: #64748b; font-style: italic; }
.cfg-code .p { color: var(--primary); font-weight: 600; }
.cfg-code .k { color: #c4b5fd; }
.cfg-code .v { color: #fde68a; }
.cfg-code .s { color: #86efac; }
.cfg-code .w { color: #fbbf24; }
.cfg-warnings { display: flex; flex-direction: column; gap: 8px; }
.cfg-warning { display: flex; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); font-size: .8rem; line-height: 1.45; }
.cfg-warning.warn { background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.3); color: #fbbf24; }
.cfg-warning.error { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.3); color: #f87171; }
.cfg-warning.ok { background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.3); color: #34d399; }
.cfg-warning svg { flex: 0 0 16px; margin-top: 2px; }
.cfg-apply ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: .82rem; color: var(--text-2); }
.cfg-apply kbd { font-family: inherit; font-size: .75em; padding: 1px 6px; border: 1px solid var(--border-hover); border-bottom-width: 2px; border-radius: 4px; color: var(--text-1); }
.cfg-extra-scripts { margin-top: 22px; display: flex; flex-direction: column; gap: 16px; }
.cfg-extra-scripts h3 { font-size: 1rem; margin: 0 0 8px; }

.btn.cfg-btn-icon { display: inline-flex; align-items: center; gap: 8px; }
.btn.cfg-btn-icon svg { width: 16px; height: 16px; }
.cfg-btn-ghost { appearance: none; border: 1px solid var(--border); background: none; color: var(--text-2); border-radius: var(--radius-sm); padding: 8px 12px; font: inherit; font-size: .8rem; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.cfg-btn-ghost:hover { color: var(--text-1); border-color: var(--border-hover); }
.cfg-btn-ghost.ok { color: var(--success); border-color: rgba(16,185,129,.5); }

/* ── Manual (local copy of the MikroTik documentation) ─────────────────── */
.cfg-doc-search {
  position: relative;
  z-index: 1000;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  margin-bottom: 22px;
  background: #0a1526;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.cfg-doc-search svg { color: var(--text-3); flex: 0 0 auto; }
.cfg-doc-search input {
  flex: 1; min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #060d1a; color: var(--text-1);
  font: inherit; font-size: .9rem;
}
.cfg-doc-search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-dim); }

.cfg-doc-trail { position: relative; z-index: 1000; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; font-size: .82rem; color: var(--text-3); }
.cfg-doc-trail a { color: var(--primary); }
.cfg-doc-trail .here { color: var(--text-2); }

.cfg-doc-sections { position: relative; z-index: 1000; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cfg-doc-section {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 18px;
  background: #101f38; border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-1); transition: var(--transition-fast);
}
.cfg-doc-section:hover { border-color: var(--border-hover); background: #16294a; }
.cfg-doc-section strong { font-size: .95rem; text-transform: capitalize; }
.cfg-doc-section span { font-size: .78rem; color: var(--text-3); }

.cfg-doc-hits { position: relative; z-index: 1000; list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cfg-doc-hits li { padding: 14px 16px; background: #0a1526; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.cfg-doc-hits a { color: var(--primary); font-weight: 600; font-size: .95rem; }
.cfg-doc-hits .sec { margin-left: 10px; font-size: .72rem; color: var(--text-3); text-transform: capitalize; }
.cfg-doc-hits p { margin: 6px 0 0; font-size: .84rem; color: var(--text-2); line-height: 1.55; }
.cfg-doc-hits mark { background: var(--primary-dim); color: var(--primary); padding: 0 2px; border-radius: 3px; }
.cfg-doc-h2 { position: relative; z-index: 1000; font-size: 1.1rem; margin: 0 0 14px; }

/* The rendered manual page itself. */
.cfg-doc {
  position: relative; z-index: 1000;
  padding: 26px 30px 30px;
  background: #0a1526;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: #cbd5e1;
  line-height: 1.7;
  overflow-wrap: break-word;
}
.cfg-doc h1, .cfg-doc h2, .cfg-doc h3, .cfg-doc h4 { color: var(--text-1); line-height: 1.25; margin: 1.6em 0 .6em; }
.cfg-doc h1 { font-size: 1.75rem; margin-top: 0; }
.cfg-doc h2 { font-size: 1.3rem; padding-bottom: .3em; border-bottom: 1px solid var(--border); }
.cfg-doc h3 { font-size: 1.08rem; }
.cfg-doc h4 { font-size: .96rem; color: var(--text-2); }
.cfg-doc p, .cfg-doc li { font-size: .92rem; }
.cfg-doc a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.cfg-doc ul, .cfg-doc ol { padding-left: 22px; margin: .6em 0; }
.cfg-doc li { margin: .3em 0; }
.cfg-doc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .86em; color: #fde68a;
  background: rgba(255,255,255,.05); padding: 1px 5px; border-radius: 4px;
}
.cfg-doc pre {
  background: #040a14; border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px; margin: 1em 0;
  overflow-x: auto;
}
.cfg-doc pre code { background: none; padding: 0; color: #dbe4f0; font-size: .82rem; line-height: 1.6; }
.cfg-doc blockquote {
  margin: 1em 0; padding: 10px 16px;
  border-left: 3px solid var(--primary);
  background: rgba(0,212,255,.06); color: var(--text-2);
}
.cfg-doc blockquote p { margin: .2em 0; }
.cfg-doc table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: .85rem; display: block; overflow-x: auto; }
.cfg-doc th, .cfg-doc td { padding: 8px 10px; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.cfg-doc th { background: #101f38; color: var(--text-1); font-weight: 600; }
.cfg-doc img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.cfg-doc hr { border: 0; border-top: 1px solid var(--border); margin: 1.6em 0; }

.cfg-doc-source {
  position: relative; z-index: 1000;
  margin-top: 16px; font-size: .85rem; color: var(--text-3);
}
.cfg-doc-source a { color: var(--primary); }
.cfg-doc-credit {
  position: relative; z-index: 1000;
  margin-top: 26px; font-size: .76rem; color: var(--text-3);
}
.cfg-doc-when { margin-left: 6px; }

@media (max-width: 640px) {
  .cfg-doc { padding: 18px 16px 22px; }
  .cfg-doc-search { flex-wrap: wrap; }
  .cfg-doc-search input { flex: 1 1 100%; order: 2; }
}

/* ── Import an existing configuration ──────────────────────────────────── */
.cfg-import-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-bottom: 18px;
  padding: 14px 18px;
  text-align: left;
  background: linear-gradient(90deg, rgba(0,212,255,.10), rgba(0,212,255,.02));
  border: 1px solid var(--border-hover);
  border-radius: var(--radius);
  color: var(--text-1);
  font: inherit;
  cursor: pointer;
  transition: var(--transition-fast);
}
.cfg-import-cta:hover { background: linear-gradient(90deg, rgba(0,212,255,.18), rgba(0,212,255,.04)); }
.cfg-import-cta > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.cfg-import-cta strong { font-size: .95rem; }
.cfg-import-cta-icon {
  width: 38px; height: 38px; flex: 0 0 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--primary-dim);
  color: var(--primary);
}
.cfg-import-cta-go { color: var(--primary); font-size: 1.2rem; }

.cfg-import-text {
  width: 100%;
  min-height: 260px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #040a14;
  color: #dbe4f0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem;
  line-height: 1.5;
  white-space: pre;
  overflow: auto;
  resize: vertical;
}
.cfg-import-text:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-dim); }

.cfg-import-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.cfg-import-stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 16px;
  background: #0a1526;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
}
.cfg-import-stat strong { font-size: 1.5rem; font-weight: 700; color: var(--text-1); line-height: 1.1; }
.cfg-import-stat span { font-size: .78rem; color: var(--text-3); }
.cfg-import-stat.ok { border-left-color: var(--success); }
.cfg-import-stat.ok strong { color: #34d399; }
.cfg-import-stat.kept { border-left-color: var(--primary); }
.cfg-import-stat.kept strong { color: var(--primary); }

.cfg-import-table { width: 100%; border-collapse: collapse; font-size: .85rem; margin-top: 8px; }
.cfg-import-table th {
  text-align: left; padding: 8px 10px;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-3); font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.cfg-import-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); color: var(--text-2); }
.cfg-import-table td:first-child { color: var(--text-1); }
.cfg-import-table td:not(:first-child) { width: 110px; font-variant-numeric: tabular-nums; }
.cfg-import-table tr:last-child td { border-bottom: 0; }

/* Restore prompt */
.cfg-restore { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 14px 18px; margin-bottom: 18px; background: rgba(0,212,255,.06); border: 1px solid var(--border-hover); border-radius: var(--radius-sm); font-size: .86rem; color: var(--text-1); }
.cfg-restore .spacer { flex: 1; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .cfg-advanced, .cfg-output { grid-template-columns: 1fr; }
  .cfg-rail, .cfg-aside { position: static; max-height: none; }
  .cfg-rail { flex-direction: row; flex-wrap: wrap; }
  .cfg-rail button { padding: 7px 10px; font-size: .78rem; }
}
@media (max-width: 780px) {
  /* minmax(0,…), never plain 1fr: a grid item's automatic minimum size is its
     content, and the preview holds unwrappable `white-space: pre` lines, so
     `1fr` would blow the column out to the longest line's width. */
  .cfg-wizard .cfg-aside { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .cfg-screen { padding: 18px 14px; }
  .cfg-grid-2, .cfg-grid-3 { grid-template-columns: 1fr; }
  .cfg-field.span-2, .cfg-field.span-3 { grid-column: auto; }
  .cfg-progress button { font-size: .66rem; padding: 12px 4px; }
  .cfg-progress .label { display: none; }
  .cfg-code { font-size: .7rem; }
}
@media print {
  .site-header, .site-footer, #bg-canvas, .cfg-progress, .cfg-actions, .cfg-code-bar, .cfg-preview-banner, .cfg-aside, .cfg-rail { display: none !important; }
  .cfg-app { border: 0; box-shadow: none; }
  .cfg-code { max-height: none; color: #000; font-size: 9pt; }
  .cfg-output { grid-template-columns: 1fr; }
}