/* ==========================================================================
   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; min-width: 0; }
/* Inside a list row the column is narrow and a password field carries two
   buttons next to the input. Without wrapping, the buttons take the column and
   the input is squeezed to a few pixels (reported on the forum). Give the
   input the full width and let the buttons sit underneath. */
.cfg-list-row .cfg-inline { flex-wrap: wrap; }
.cfg-list-row .cfg-inline input { flex: 1 1 100%; }

/* 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; }

/* Live preview under the advanced section panel: the lines the section you are
   editing produced stay lit, everything else drops back to context. */
.cfg-adv-preview { margin-top: 22px; }
.cfg-adv-preview-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cfg-adv-preview-head h4 { margin: 0; }
.cfg-adv-preview-head .spacer { flex: 1; }
.cfg-adv-preview-count { font-size: .72rem; color: var(--text-3); }
.cfg-adv-preview.collapsed .cfg-preview-mini { display: none; }
.cfg-adv-preview .cfg-preview-mini { max-height: 300px; background: #040a14; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; }
.cfg-code .pl { display: block; opacity: .34; transition: opacity .12s ease; }
.cfg-code .pl.own { opacity: 1; background: rgba(56, 189, 248, .09); box-shadow: inset 2px 0 0 var(--primary); padding-left: 8px; margin-left: -10px; border-radius: 2px; }

/* ── 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-search button { flex: 0 0 auto; }
/* On a phone the three parts do not fit on one line: the field keeps the row
   to itself and the button moves under it, rather than sliding under it. */
@media (max-width: 520px) {
  .cfg-doc-search { flex-wrap: wrap; }
  .cfg-doc-search input { flex: 1 1 100%; order: 1; }
  .cfg-doc-search svg { order: 0; }
  .cfg-doc-search button { order: 2; margin-left: auto; }
}

.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 handbook: our own documentation for the tool. Chapter cards on the
   index, a prev/next pair under a chapter. The chapter body itself reuses
   .cfg-doc, so the manual and the handbook read the same. */
/* With sixty-odd chapters the index needs a way in of its own: the parts as
   chips at the top, with how many chapters each holds. */
/* The link from a check to the chapter about it: part of the sentence, not a
   button, so it does not compete with the warning itself. */
.cfg-check-link { font-size: .78rem; color: var(--text-3); border-bottom: 1px dotted currentColor; white-space: nowrap; }
.cfg-check-link:hover { color: var(--primary); }

.cfg-section-head .cfg-guide-link {
  margin-left: auto; font-size: .78rem; color: var(--text-3);
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px;
  white-space: nowrap;
}
.cfg-section-head .cfg-guide-link:hover { color: var(--primary); border-color: var(--border-hover); }

.cfg-guide-toc { position: relative; z-index: 1000; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.cfg-guide-toc a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  background: #0a1526; border: 1px solid var(--border); color: var(--text-2); font-size: .82rem;
}
.cfg-guide-toc a:hover { border-color: var(--border-hover); color: var(--text-1); }
.cfg-guide-toc span { font-size: .72rem; color: var(--text-3); }
.cfg-guide-part { scroll-margin-top: 90px; }
.cfg-guide-parts { position: relative; z-index: 1000; display: flex; flex-direction: column; gap: 26px; }
.cfg-guide-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.cfg-guide-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 18px;
  background: #101f38; border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-1); transition: var(--transition-fast);
}
.cfg-guide-card:hover { border-color: var(--border-hover); background: #16294a; }
.cfg-guide-card strong { font-size: .95rem; }
.cfg-guide-card span { font-size: .82rem; color: var(--text-3); line-height: 1.5; }
.cfg-guide-nav { position: relative; z-index: 1000; display: flex; gap: 12px; margin: 26px 0 0; flex-wrap: wrap; }
.cfg-guide-nav a {
  flex: 1 1 240px; display: flex; flex-direction: column; gap: 2px;
  padding: 12px 16px; background: #0a1526;
  border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-1);
}
.cfg-guide-nav a:hover { border-color: var(--border-hover); }
.cfg-guide-nav .next { text-align: right; }
.cfg-guide-nav span { font-size: .72rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.cfg-guide-nav strong { font-size: .9rem; }
.cfg-guide h2 { margin-top: 26px; }
/* The glossary is a definition list: term on its own line, explanation
   indented under it, so it stays readable on a phone as well. */
.cfg-guide dl { margin: 12px 0 0; }
.cfg-guide dt { margin-top: 14px; font-weight: 600; color: var(--text-1); }
.cfg-guide dd { margin: 4px 0 0; padding-left: 14px; border-left: 2px solid var(--border); color: var(--text-2); line-height: 1.6; }
.cfg-guide th { text-align: left; font-weight: 600; }
.cfg-guide ul { line-height: 1.7; }

/* 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) {
  /* minmax(0,…) for the same reason as the wizard aside below: a `1fr` track's
     automatic minimum is its max-content, and these columns hold `white-space:
     pre` code, so plain `1fr` widens the track to the longest line. The page
     does not scroll sideways (body clips it), so the excess is simply
     unreachable on a phone. */
  .cfg-advanced, .cfg-output { grid-template-columns: minmax(0, 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; }
}

/* ── Multi-device (site) mode ───────────────────────────────────────────── */
.cfg-modeswitch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 20px; }
.cfg-modeswitch-btn { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; padding: 12px 14px; background: #0a1526; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; text-align: left; color: var(--text-2); }
.cfg-modeswitch-btn strong { font-size: .88rem; color: var(--text-1); font-weight: 600; }
.cfg-modeswitch-btn span { font-size: .74rem; color: var(--text-3); }
.cfg-modeswitch-btn.on { border-color: var(--primary); background: rgba(56, 189, 248, .08); }
.cfg-modeswitch-btn.on strong { color: var(--primary); }

.cfg-site-list { display: flex; flex-direction: column; gap: 10px; }
.cfg-site-row { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; background: #040a14; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.cfg-site-media { display: flex; align-items: center; justify-content: center; height: 40px; }
.cfg-site-media img { max-width: 100%; max-height: 40px; object-fit: contain; }
.cfg-site-model { font-size: .82rem; font-weight: 600; color: var(--text-1); margin-bottom: 6px; }
.cfg-site-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 10px; }
.cfg-site-fields label { display: flex; flex-direction: column; gap: 3px; font-size: .72rem; color: var(--text-3); }

.cfg-site-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cfg-site-tab { padding: 7px 12px; font-size: .78rem; background: #0a1526; color: var(--text-2); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.cfg-site-tab.on { border-color: var(--primary); color: var(--primary); background: rgba(56, 189, 248, .08); }
.cfg-site-tab.bad { border-color: var(--danger, #f87171); color: var(--danger, #f87171); }

@media (max-width: 640px) {
  .cfg-modeswitch { grid-template-columns: minmax(0, 1fr); }
  .cfg-site-row { grid-template-columns: 40px minmax(0, 1fr); }
  .cfg-site-row .cfg-list-remove { grid-column: 2; justify-self: start; }
  .cfg-site-fields { grid-template-columns: minmax(0, 1fr); }
}
.cfg-site-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.cfg-site-tools .cfg-tag { background: rgba(56, 189, 248, .12); color: var(--primary); border-color: transparent; }
@media (max-width: 640px) { .cfg-site-tools { grid-column: 1 / -1; justify-content: flex-start; } }

/* ── Language switch, inside the tool ───────────────────────────────────── */
.cfg-topbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cfg-topbar .cfg-progress { flex: 1; min-width: 0; }
.cfg-langswitch { display: flex; align-items: center; gap: 6px; }
.cfg-langswitch-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); }
.cfg-langswitch-btn { padding: 5px 9px; font-size: .74rem; font-weight: 600; border-radius: var(--radius-sm); border: 1px solid var(--border); color: var(--text-2); text-decoration: none; }
.cfg-langswitch-btn.on { border-color: var(--primary); color: var(--primary); background: rgba(56, 189, 248, .1); }
@media (max-width: 640px) { .cfg-topbar { gap: 8px; } .cfg-langswitch-label { display: none; } }

/* ==========================================================================
   Maintenance page.

   Not an error page, so it does not borrow the site's .not-found block. One
   glass panel on the site's own tokens, sitting above #bg-canvas the way every
   other panel here has to (z-index 1000, opaque enough to read over it).
   ========================================================================== */

.cfg-maint {
  position: relative;
  z-index: 1000;
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 40px 40px;
  overflow: hidden;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-card), var(--shadow-glow);
}
.cfg-maint::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--primary), var(--secondary), transparent);
}
.cfg-maint h1 {
  margin: 0 0 16px;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  line-height: 1.2;
  color: var(--text-1);
}

.cfg-maint-icon {
  width: 84px;
  height: 84px;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--primary);
  border: 1px solid var(--border-hover);
  background: radial-gradient(circle, var(--primary-dim), transparent 72%);
  box-shadow: 0 0 0 10px rgba(0, 212, 255, 0.035), var(--shadow-glow);
}
.cfg-maint-icon svg { width: 38px; height: 38px; animation: cfg-maint-spin 14s linear infinite; }
@keyframes cfg-maint-spin { to { transform: rotate(360deg); } }

.cfg-maint-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  padding: 7px 16px 7px 13px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--warning);
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.28);
}
.cfg-maint-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warning);
  animation: cfg-maint-pulse 2.4s ease-out infinite;
}
@keyframes cfg-maint-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(245, 158, 11, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

.cfg-maint-lead { max-width: 560px; margin: 0 auto 14px; font-size: 1.06rem; line-height: 1.6; color: var(--text-1); }
.cfg-maint-note { max-width: 560px; margin: 0 auto 30px; font-size: .9rem; line-height: 1.6; color: var(--text-2); }

.cfg-maint-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

.cfg-maint-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  justify-content: center;
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: .78rem;
  color: var(--text-3);
}
.cfg-maint-meta strong { color: var(--text-2); font-weight: 600; }

@media (max-width: 640px) {
  .cfg-maint { padding: 40px 22px 32px; border-radius: var(--radius); }
  .cfg-maint-icon { width: 68px; height: 68px; }
  .cfg-maint-icon svg { width: 30px; height: 30px; }
  .cfg-maint-links .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .cfg-maint-icon svg, .cfg-maint-dot { animation: none; }
}

/* ==========================================================================
   Legal pages (the licence).

   Rendered from a plain text file, so the job here is readability: a measured
   column, clause headings that can be scanned, and body text that keeps the
   original line breaks without looking like a terminal dump.
   ========================================================================== */

.cfg-legal {
  position: relative;
  z-index: 1000;
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text-2);
  font-size: .92rem;
  line-height: 1.72;
}
.cfg-legal-head {
  margin-bottom: 34px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--border);
  color: var(--text-1);
  font-size: .88rem;
}
.cfg-legal-clause + .cfg-legal-clause { margin-top: 30px; }
.cfg-legal-clause h2 {
  margin: 0 0 12px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--primary);
}
.cfg-legal a { color: var(--primary); }

@media (max-width: 640px) {
  .cfg-legal { padding: 28px 20px; font-size: .88rem; }
}

/* ==========================================================================
   Feedback form.

   No inline script anywhere on this page: the honeypot is hidden in CSS, the
   challenge is a plain number field, and validation happens server-side. The
   page therefore works with JavaScript switched off, which is the right
   default for a form whose whole job is to reach us.
   ========================================================================== */

.cfg-form-panel {
  position: relative;
  z-index: 1000;
  max-width: 720px;
  margin: 0 auto;
  padding: 36px 40px 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}

/* Off-screen rather than display:none — a bot that only fills visible fields
   is rarer than one that skips hidden ones. */
.cfg-form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cfg-form-security {
  margin: 0 0 26px;
  padding: 13px 16px;
  border-left: 3px solid var(--warning);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(245, 158, 11, 0.08);
  color: var(--text-2);
  font-size: .86rem;
  line-height: 1.6;
}
.cfg-form-error {
  margin: 0 0 22px;
  padding: 13px 16px;
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: var(--radius-sm);
  background: rgba(239, 68, 68, 0.10);
  color: #fecaca;
  font-size: .9rem;
}

.cfg-form-row { margin-bottom: 20px; }
.cfg-form-row label { display: block; margin-bottom: 7px; font-size: .88rem; font-weight: 600; color: var(--text-1); }
.cfg-form-row small { display: block; margin-top: 6px; font-size: .78rem; color: var(--text-3); line-height: 1.5; }
.cfg-form-opt { font-weight: 400; color: var(--text-3); }

.cfg-form input[type=text],
.cfg-form input[type=email],
.cfg-form select,
.cfg-form textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-1);
  color: var(--text-1);
  font: inherit;
  font-size: .92rem;
  transition: var(--transition-fast);
}
.cfg-form textarea { resize: vertical; min-height: 150px; line-height: 1.6; }
.cfg-form input:focus, .cfg-form select:focus, .cfg-form textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-dim);
}
.cfg-form ::placeholder { color: var(--text-3); }

.cfg-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }

.cfg-form-challenge {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(0, 212, 255, 0.04);
}
.cfg-form-challenge label strong { color: var(--primary); font-size: 1.02rem; }
.cfg-form-challenge input { max-width: 140px; }

.cfg-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin-top: 26px; }

.cfg-form-done { text-align: center; padding: 48px 40px; }
.cfg-form-done h2 { margin: 0 0 12px; font-size: 1.45rem; color: var(--text-1); }
.cfg-form-done p { max-width: 460px; margin: 0 auto 26px; color: var(--text-2); }
.cfg-form-tick {
  width: 64px; height: 64px; margin: 0 auto 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--success);
  border: 1px solid rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.10);
}
.cfg-form-tick svg { width: 30px; height: 30px; }

@media (max-width: 640px) {
  .cfg-form-panel { padding: 26px 20px 24px; }
  .cfg-form-grid { grid-template-columns: 1fr; }
  .cfg-form-actions .btn { width: 100%; justify-content: center; }
}

/* The form stays up while the rest of the tool is in maintenance, so it has to
   explain that by itself: someone arriving here from the 503 page needs to know
   the form is not also broken. */
.cfg-form-maint {
  margin: 0 0 18px;
  padding: 13px 16px;
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--primary-dim);
  color: var(--text-1);
  font-size: .88rem;
  line-height: 1.6;
}

/* ==========================================================================
   Roadmap with votes.

   The vote control is a real submit button in its own form, one per item, so
   the page needs no script at all: it works with JavaScript off and posts
   straight back to itself.
   ========================================================================== */

.cfg-rm-intro { position: relative; z-index: 1000; max-width: 760px; margin: 0 0 34px; color: var(--text-2); font-size: .94rem; }
.cfg-rm-intro a { color: var(--primary); }

.cfg-rm-state {
  position: relative;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 38px 0 14px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.cfg-rm-state span {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--text-2);
  font-size: .72rem;
  letter-spacing: 0;
}
.cfg-rm-state:first-of-type { margin-top: 0; }

.cfg-rm-list { position: relative; z-index: 1000; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.cfg-rm-item {
  display: flex;
  gap: 18px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  transition: var(--transition-fast);
}
.cfg-rm-item:hover { border-color: var(--border-hover); }
.cfg-rm-item.voted { border-color: rgba(0, 212, 255, 0.3); }

.cfg-rm-vote { flex: 0 0 auto; margin: 0; }
.cfg-rm-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 60px;
  padding: 10px 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-1);
  color: var(--text-2);
  font: inherit;
  cursor: pointer;
  transition: var(--transition-fast);
}
.cfg-rm-btn svg { width: 16px; height: 16px; }
.cfg-rm-count { font-size: 1.05rem; font-weight: 700; color: var(--text-1); font-variant-numeric: tabular-nums; }
.cfg-rm-btn:hover:not([disabled]) { border-color: var(--primary); background: var(--primary-dim); color: var(--primary); }
.cfg-rm-btn:hover:not([disabled]) .cfg-rm-count { color: var(--primary); }
.cfg-rm-btn[disabled] { cursor: default; border-color: rgba(0, 212, 255, 0.35); background: var(--primary-dim); color: var(--primary); }
.cfg-rm-btn[disabled] .cfg-rm-count { color: var(--primary); }

.cfg-rm-body { min-width: 0; }
.cfg-rm-body h3 { margin: 0 0 6px; font-size: 1.02rem; color: var(--text-1); line-height: 1.35; }
.cfg-rm-body p { margin: 0; font-size: .89rem; line-height: 1.62; color: var(--text-2); }
.cfg-rm-source { margin-top: 8px !important; font-size: .78rem !important; color: var(--text-3) !important; }
@media (max-width: 640px) {
  .cfg-rm-item { padding: 16px; gap: 14px; }
  .cfg-rm-btn { width: 52px; }
}
.cfg-form-roadmap { margin: 0 0 16px; font-size: .88rem; color: var(--text-2); }
.cfg-form-roadmap a { color: var(--primary); }
.cfg-maint-also { max-width: 560px; margin: 22px auto 0; font-size: .86rem; color: var(--text-2); }
.cfg-maint-also a { color: var(--primary); }

/* The ask sits at the end of the list, not the top: someone who has just read
   fifteen items and not found their own is exactly who should see it. */
.cfg-rm-cta {
  position: relative;
  z-index: 1000;
  max-width: 620px;
  margin: 48px auto 0;
  padding: 34px 32px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}
.cfg-rm-cta h2 { margin: 0 0 10px; font-size: 1.2rem; color: var(--text-1); }
.cfg-rm-cta p { margin: 0 auto 22px; max-width: 460px; font-size: .9rem; line-height: 1.62; color: var(--text-2); }

@media (max-width: 640px) {
  .cfg-rm-cta { padding: 26px 20px; }
  .cfg-rm-cta .btn { width: 100%; justify-content: center; }
}

/* Roadmap and feedback, in the hero of the tool page.

   Deliberately not buttons: the point of this page is the configurator, and two
   filled buttons above it would compete with the thing people came for. Quiet
   pills that light up on hover reach everyone without shouting. */
.cfg-hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 22px 0 0;
}
.cfg-hero-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(13, 26, 50, 0.55);
  color: var(--text-2);
  font-size: .84rem;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition-fast);
}
.cfg-hero-link svg { width: 15px; height: 15px; flex: 0 0 auto; }
.cfg-hero-link:hover {
  border-color: var(--border-hover);
  background: var(--primary-dim);
  color: var(--primary);
}

@media (max-width: 640px) {
  .cfg-hero-links { flex-direction: column; align-items: stretch; }
  .cfg-hero-link { justify-content: center; }
}

/* The roadmap link in green.

   The site is cyan throughout, so green is the one accent that reads as a
   different kind of thing rather than as another cyan control. It is also the
   link we want taken first: someone who votes for an item that already exists
   costs nobody anything, and someone who writes a paragraph costs us a read. */
/* The handbook link sits first among the hero links, so it gets the accent the
   roadmap has: someone who does not know the tool needs the manual before a
   vote or a form. */
.cfg-hero-link.is-guide {
  border-color: rgba(0,212,255,.35);
  background: rgba(0,212,255,.08);
}
.cfg-hero-link.is-guide:hover { border-color: var(--primary); background: rgba(0,212,255,.14); }
.cfg-guide p.cfg-note { margin: 16px 0; }

.cfg-hero-link.is-roadmap {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.45);
  background: rgba(52, 211, 153, 0.10);
}
.cfg-hero-link.is-roadmap:hover {
  color: #04140d;
  border-color: transparent;
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
  box-shadow: 0 0 24px rgba(52, 211, 153, 0.35);
}

/* Items that are live or turned down: the count stays visible as a record of
   who wanted it, but it is no longer a button. */
.cfg-rm-btn.is-closed,
.cfg-rm-btn.is-closed:hover:not([disabled]) { cursor: default; border-color: rgba(52, 211, 153, 0.45); background: rgba(52, 211, 153, 0.10); color: #34d399; }
.cfg-rm-btn.is-closed .cfg-rm-count,
.cfg-rm-btn.is-closed:hover:not([disabled]) .cfg-rm-count { color: #34d399; }
.cfg-rm-item.declined .cfg-rm-btn.is-closed,
.cfg-rm-item.declined .cfg-rm-btn.is-closed:hover:not([disabled]) { border-color: var(--border); background: none; color: var(--text-3); }
.cfg-rm-item.declined .cfg-rm-btn.is-closed .cfg-rm-count { color: var(--text-3); }
.cfg-rm-item.shipped { border-color: rgba(52, 211, 153, 0.30); }
.cfg-rm-shipped { margin: -2px 0 6px !important; font-size: .76rem !important; font-weight: 600; letter-spacing: .02em; color: #34d399 !important; }

/* ── Handover sheet ─────────────────────────────────────────────────────────
   Exists in the page only while its print dialog is open. On screen it is never
   shown; in print it replaces everything else. */
.cfg-ho-control { position: relative; display: inline-flex; }
.cfg-ho-pop { position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 30; width: 300px; padding: 14px; background: #0a1526; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 30px rgba(0,0,0,.45); display: flex; flex-direction: column; gap: 10px; }
.cfg-ho-secrets { display: flex; gap: 8px; align-items: center; font-size: .84rem; color: var(--text-1); cursor: pointer; }
.cfg-ho-pop .cfg-help { margin: 0; }
.cfg-ho-pop[hidden] { display: none; }
.cfg-handover { display: none; }

@media print {
  html.cfg-printing-handover body > *:not(.cfg-handover) { display: none !important; }
  html.cfg-printing-handover body { background: #fff !important; color: #000 !important; }
  html.cfg-printing-handover .cfg-handover { display: block; font: 10pt/1.4 Inter, Arial, sans-serif; color: #000; }
  .cfg-ho-page { page-break-after: always; break-after: page; }
  .cfg-ho-page:last-child { page-break-after: auto; break-after: auto; }
  .cfg-ho-head { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid #000; padding-bottom: 6px; margin-bottom: 12px; }
  .cfg-ho-head h1 { font-size: 18pt; margin: 0; color: #000; }
  .cfg-ho-head p { margin: 2px 0 0; color: #333; }
  .cfg-ho-meta { text-align: right; font-size: 9pt; color: #333; }
  .cfg-ho-sec { break-inside: avoid; page-break-inside: avoid; margin: 0 0 12px; }
  .cfg-ho-sec h2 { font-size: 11pt; margin: 0 0 4px; color: #000; text-transform: uppercase; letter-spacing: .04em; }
  .cfg-ho-kv, .cfg-ho-grid { width: 100%; border-collapse: collapse; }
  .cfg-ho-kv th { width: 32%; text-align: left; font-weight: 600; padding: 2px 8px 2px 0; vertical-align: top; color: #000; }
  .cfg-ho-kv td { padding: 2px 0; color: #000; }
  .cfg-ho-grid { margin-top: 4px; }
  .cfg-ho-grid th, .cfg-ho-grid td { border: 1px solid #999; padding: 3px 6px; text-align: left; color: #000; font-size: 9pt; }
  .cfg-ho-grid th { background: #eee; }
  .cfg-ho-note { font-size: 9pt; color: #333; margin: 4px 0 0; white-space: pre-wrap; }
  .cfg-ho-sign { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px; }
  .cfg-ho-sign div { display: flex; flex-direction: column; gap: 26px; font-size: 9pt; }
  .cfg-ho-sign i { display: block; border-bottom: 1px solid #000; }
  .cfg-ho-foot { margin-top: 14px; font-size: 8pt; color: #555; }
}

/* VLAN matrix: rows start the connection, columns receive it. */
.cfg-matrix-wrap { overflow-x: auto; margin-top: 4px; }
.cfg-matrix { border-collapse: collapse; font-size: .8rem; }
.cfg-matrix th, .cfg-matrix td { border: 1px solid var(--border); padding: 6px 10px; text-align: center; white-space: nowrap; }
.cfg-matrix thead th { color: var(--text-2); font-weight: 600; background: #0a1526; }
.cfg-matrix tbody th { text-align: left; color: var(--text-1); font-weight: 600; background: #0a1526; }
.cfg-matrix th.corner { color: var(--text-3); font-weight: 400; font-size: .72rem; }
.cfg-matrix td.self { color: var(--text-3); }
.cfg-matrix input { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }

/* Wizard building blocks */
.cfg-extras { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.cfg-extra { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 14px; background: #0a1526; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.cfg-extra:hover { border-color: rgba(56, 189, 248, .5); }
.cfg-extra.on { border-color: var(--primary); background: rgba(56, 189, 248, .08); }
.cfg-extra input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--primary); }
.cfg-extra-icon svg { width: 20px; height: 20px; color: var(--primary); }
.cfg-extra-text { display: flex; flex-direction: column; gap: 2px; }
.cfg-extra-text strong { font-size: .88rem; color: var(--text-1); }
.cfg-extra-text span { font-size: .76rem; color: var(--text-3); line-height: 1.45; }

/* Site cabling */
.cfg-cable-list { display: flex; flex-direction: column; gap: 8px; }
.cfg-cable { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.cfg-cable select { width: 100%; }
.cfg-cable-wire { color: var(--primary); font-size: 1.1rem; text-align: center; }
@media (max-width: 720px) { .cfg-cable { grid-template-columns: 1fr 1fr; } .cfg-cable-wire { grid-column: span 2; } }

/* SwOS panel, with the BETA push script kept visibly apart */
.cfg-swos-beta { border: 1px dashed rgba(251, 191, 36, .55); border-radius: var(--radius); padding: 14px 16px; }
.cfg-swos-beta-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.cfg-beta { display: inline-block; padding: 2px 8px; border-radius: 999px; background: rgba(251, 191, 36, .16); border: 1px solid rgba(251, 191, 36, .6); color: #fbbf24; font-size: .7rem; font-weight: 700; letter-spacing: .08em; }
.cfg-swos-beta .cfg-btn-ghost[disabled] { opacity: .45; cursor: not-allowed; }

.cfg-rm-eta { margin: -2px 0 6px !important; }
.cfg-rm-eta span { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 600; letter-spacing: .02em; color: #fbbf24; background: rgba(251, 191, 36, .12); border: 1px solid rgba(251, 191, 36, .45); }

/* ── Network board ─────────────────────────────────────────────────────── */
.cfg-modeswitch.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) { .cfg-modeswitch.three { grid-template-columns: 1fr; } }
.cfg-board-app { display: flex; flex-direction: column; gap: 10px; }
.cfg-board-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cfg-board-toolbar .spacer { flex: 1; }
.cfg-board-main { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 12px; }
@media (max-width: 900px) { .cfg-board-main { grid-template-columns: 1fr; } }
.cfg-board-stage { position: relative; height: 72vh; min-height: 520px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); background: #040a14; }
.cfg-board { position: relative; background-image: radial-gradient(rgba(148, 163, 184, .16) 1px, transparent 1px); background-size: 24px 24px; }
.cfg-board-wires { position: absolute; inset: 0; pointer-events: none; }
.cfg-board-wires g { pointer-events: auto; cursor: pointer; }
.cfg-wire .hit { stroke: transparent; stroke-width: 14; fill: none; }
.cfg-wire .line { stroke-width: 3; fill: none; stroke: #94a3b8; }
.cfg-wire rect { fill: #0a1526; stroke: currentColor; stroke-width: 1.2; }
.cfg-wire text { fill: #e2e8f0; font-size: 11px; font-weight: 700; text-anchor: middle; font-family: Inter, Arial, sans-serif; }
.cfg-wire.s0 { color: #94a3b8; } .cfg-wire.s0 .line { stroke: #94a3b8; }
.cfg-wire.s1 { color: #34d399; } .cfg-wire.s1 .line { stroke: #34d399; }
.cfg-wire.s2 { color: #2dd4bf; } .cfg-wire.s2 .line { stroke: #2dd4bf; }
.cfg-wire.s10 { color: #38bdf8; } .cfg-wire.s10 .line { stroke: #38bdf8; }
.cfg-wire.s25 { color: #a78bfa; } .cfg-wire.s25 .line { stroke: #a78bfa; }
.cfg-wire.warn .line { stroke-dasharray: 8 5; }
.cfg-wire.warn rect { stroke: #fbbf24; }
.cfg-wire.selected .line { stroke-width: 5; filter: drop-shadow(0 0 4px currentColor); }
.cfg-wire-temp { stroke: #38bdf8; stroke-width: 2.5; stroke-dasharray: 6 4; fill: none; }
.cfg-bnode { position: absolute; width: 220px; background: #0a1526; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.35); user-select: none; }
.cfg-bnode.router { border-color: rgba(56, 189, 248, .55); }
.cfg-bnode.node { width: 170px; }
.cfg-bnode.node.internet { border-color: rgba(167, 139, 250, .6); }
.cfg-bnode.selected { outline: 2px solid var(--primary); outline-offset: 1px; }
.cfg-bnode-head { display: flex; gap: 8px; align-items: center; padding: 8px 10px; cursor: grab; touch-action: none; border-bottom: 1px solid var(--border); }
.cfg-bnode-head:active { cursor: grabbing; }
.cfg-bnode-head img { width: 38px; height: 28px; object-fit: contain; }
.cfg-bnode-head strong { display: block; font-size: .82rem; color: var(--text-1); }
.cfg-bnode-head span { display: block; font-size: .68rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.cfg-bnode-icon svg { width: 26px; height: 26px; color: var(--primary); }
.cfg-bports { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px; }
.cfg-bport { min-width: 30px; padding: 3px 5px; font: 600 .66rem/1 ui-monospace, Menlo, Consolas, monospace; color: var(--text-2); background: #040a14; border: 1px solid var(--border); border-radius: 4px; cursor: crosshair; touch-action: none; }
.cfg-bport:hover { border-color: var(--primary); color: var(--primary); }
.cfg-bport.linked { background: rgba(56, 189, 248, .14); border-color: rgba(56, 189, 248, .6); color: #e0f2fe; }
.cfg-bport.p10g, .cfg-bport.p25g, .cfg-bport.p40g, .cfg-bport.p100g { border-style: dashed; }
.cfg-board-side { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; background: #0a1526; align-self: start; }
.cfg-board-side h4 { margin: 0 0 8px; font-size: .95rem; color: var(--text-1); }
.cfg-board-field { display: flex; flex-direction: column; gap: 4px; font-size: .74rem; color: var(--text-3); margin: 10px 0; }
.cfg-board-side-actions { display: flex; gap: 8px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.cfg-board-ends { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; color: var(--text-2); line-height: 1.6; }
.cfg-board-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cfg-speed-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; border: 1px solid currentColor; }
.cfg-speed-chip.s0 { color: #94a3b8; } .cfg-speed-chip.s1 { color: #34d399; } .cfg-speed-chip.s2 { color: #2dd4bf; } .cfg-speed-chip.s10 { color: #38bdf8; } .cfg-speed-chip.s25 { color: #a78bfa; } .cfg-speed-chip.unknown { color: #64748b; }
.cfg-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 1000; padding: 10px 16px; border-radius: 10px; background: #1e293b; color: #f8fafc; border: 1px solid #fbbf24; font-size: .85rem; box-shadow: 0 10px 30px rgba(0,0,0,.45); }

.cfg-board-stage { scrollbar-color: rgba(148, 163, 184, .35) transparent; }

/* details panel: floating over the board (default), docked beside it, or put away */
.cfg-board-main { position: relative; }
.cfg-board-main.panel-float, .cfg-board-main.panel-hidden { grid-template-columns: minmax(0, 1fr); }
.cfg-board-main.panel-float .cfg-board-side { position: absolute; top: 12px; right: 24px; width: 290px; max-height: calc(100% - 36px); overflow: auto; z-index: 6; box-shadow: 0 18px 40px rgba(0, 0, 0, .55); background: rgba(10, 21, 38, .96); backdrop-filter: blur(6px); }
.cfg-board-main.panel-hidden .cfg-board-side { display: none; }
.cfg-board-panel-show { display: none; }
.cfg-board-main.panel-hidden .cfg-board-panel-show { display: inline-flex; position: absolute; top: 12px; right: 24px; z-index: 6; background: rgba(10, 21, 38, .96); }
.cfg-board-panel-tools { float: right; display: flex; gap: 4px; margin: -6px -6px 0 8px; }
.cfg-board-panel-btn { width: 26px; height: 26px; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--text-2); cursor: pointer; font-size: .9rem; line-height: 1; }
.cfg-board-panel-btn:hover { color: var(--text-1); border-color: var(--primary); }
@media (max-width: 900px) { .cfg-board-main.panel-float .cfg-board-side { position: static; width: auto; max-height: none; box-shadow: none; } }
.cfg-board-field input, .cfg-board-field select { 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: .88rem; }
.cfg-board-field input:focus, .cfg-board-field select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-dim); }
.cfg-bnode.fresh { animation: cfg-bnode-fresh 1.6s ease-out; }
@keyframes cfg-bnode-fresh { 0% { box-shadow: 0 0 0 0 rgba(34, 211, 238, .75); } 100% { box-shadow: 0 0 0 18px rgba(34, 211, 238, 0); } }
.cfg-board-stage { cursor: grab; }
.cfg-board-stage.panning { cursor: grabbing; user-select: none; }
.cfg-board-stage .cfg-bnode { cursor: default; }

.cfg-board-advice { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 8px; }
.cfg-board-reach { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; font-size: .8rem; color: var(--text-2); }

/* right-click menu */
.cfg-board-menu { position: fixed; z-index: 60; width: 270px; max-height: calc(100vh - 16px); overflow: auto; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: rgba(10, 21, 38, .98); box-shadow: 0 18px 44px rgba(0, 0, 0, .6); backdrop-filter: blur(6px); }
.cfg-board-menu-head { display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.cfg-board-menu-head strong { color: var(--text-1); font-size: .92rem; font-family: ui-monospace, Menlo, Consolas, monospace; }
.cfg-board-menu-head span { color: var(--text-3); font-size: .74rem; }
.cfg-board-menu .cfg-board-field { margin: 8px 0; }
.cfg-board-check { display: flex; align-items: center; gap: 8px; margin: 10px 0; font-size: .82rem; color: var(--text-2); cursor: pointer; }
.cfg-board-check input { accent-color: var(--primary); width: 15px; height: 15px; }
.cfg-board-menu-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.cfg-bport.custom { box-shadow: inset 0 -2px 0 #fbbf24; }
.cfg-bport.off { opacity: .45; text-decoration: line-through; }

/* zoom and undo */
.cfg-board-sizer { position: relative; }
.cfg-board-group { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; }
.cfg-board-tool { min-width: 30px; height: 28px; padding: 0 6px; border: 0; border-radius: 6px; background: transparent; color: var(--text-2); font: inherit; font-size: .95rem; line-height: 1; cursor: pointer; }
.cfg-board-tool.wide { font-size: .76rem; font-variant-numeric: tabular-nums; }
.cfg-board-tool:hover:not([disabled]) { background: rgba(148, 163, 184, .12); color: var(--text-1); }
.cfg-board-tool[disabled] { opacity: .35; cursor: default; }

/* planning: hypervisors, servers, VMs */
.cfg-bnode.node.host { width: 230px; }
.cfg-bnode.node.hypervisor { border-color: rgba(52, 211, 153, .55); }
.cfg-bnode.node.server { border-color: rgba(251, 191, 36, .5); }
.cfg-bnode.hypervisor .cfg-bnode-icon svg { color: #34d399; }
.cfg-bnode.server .cfg-bnode-icon svg { color: #fbbf24; }
.cfg-bnode-meta { padding: 6px 10px 0; font-size: .68rem; line-height: 1.45; color: var(--text-3); font-variant-numeric: tabular-nums; }
.cfg-bvms { display: flex; flex-direction: column; gap: 3px; padding: 6px 8px 8px; border-top: 1px solid var(--border); }
.cfg-bvms.side { padding: 0; border: 0; margin: 6px 0; }
.cfg-bvm { display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px 6px; border: 1px solid transparent; border-radius: 6px; background: rgba(148, 163, 184, .07); color: var(--text-2); font: inherit; font-size: .72rem; text-align: left; cursor: pointer; }
.cfg-bvm:hover { border-color: var(--border); color: var(--text-1); }
.cfg-bvm.selected { border-color: var(--primary); color: var(--text-1); }
.cfg-bvm.add { justify-content: center; background: transparent; border: 1px dashed var(--border); color: var(--text-3); }
.cfg-bvm-os { flex: none; min-width: 46px; padding: 1px 5px; border-radius: 4px; background: rgba(52, 211, 153, .14); color: #6ee7b7; font-size: .64rem; text-align: center; }
.cfg-bvm-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg-bvm-vlan { flex: none; padding: 0 5px; border-radius: 4px; border: 1px solid var(--border); color: var(--text-3); font-size: .62rem; }
.cfg-bvm-more { font-size: .66rem; color: var(--text-3); padding-left: 4px; }
.cfg-board-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cfg-board-row3 .cfg-board-field { margin: 8px 0; }
.cfg-board-row3 input, .cfg-board-row3 select { padding: 7px 6px; }
.cfg-board-usage { margin: 10px 0 4px; font-size: .74rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.cfg-board-usage.over { color: #fbbf24; }
.cfg-board-sub { margin: 14px 0 4px; font-size: .8rem; color: var(--text-1); }
.cfg-board-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text-1); font: inherit; font-size: .86rem; text-align: left; cursor: pointer; }
.cfg-board-menu-item:hover { background: rgba(148, 163, 184, .12); }
.cfg-board-menu-item svg { width: 18px; height: 18px; color: var(--primary); }
.cfg-board-field input[type=number] { width: 100%; }

/* logos */
.cfg-logo, .cfg-bnode-head .cfg-logo { display: inline-flex; flex: none; align-items: center; justify-content: center; max-width: none; overflow: visible; border-radius: 6px; background: var(--logo-bg, #334155); color: var(--logo-fg, #fff); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); font-size: inherit; white-space: nowrap; }
.cfg-logo svg { width: 62%; height: 62%; fill: currentColor; }
.cfg-logo.sm { width: 20px; height: 20px; border-radius: 5px; }
.cfg-logo.md { width: 28px; height: 28px; border-radius: 7px; }
.cfg-logo.lg, .cfg-bnode-head .cfg-logo.lg { width: 32px; height: 32px; border-radius: 8px; }
.cfg-logo.text { font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.cfg-logo.sm.text { font-size: .62rem; }
.cfg-logo.md.text { font-size: .74rem; }
.cfg-logo.md.text.long { font-size: .56rem; }
.cfg-logo.lg.text { font-size: .86rem; }
.cfg-logo.lg.text.long { font-size: .64rem; }
.cfg-logo.none { background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
.cfg-board-titled { display: flex; align-items: center; gap: 8px; }
.cfg-board-menu-head.titled { flex-direction: row; align-items: center; gap: 10px; }
.cfg-board-menu-head.titled > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cfg-board-field > span { font-size: .74rem; color: var(--text-3); }
.cfg-picker { position: relative; }
.cfg-picker-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #0a1526; color: var(--text-1); font: inherit; font-size: .86rem; text-align: left; cursor: pointer; }
.cfg-picker-btn:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-dim); }
.cfg-picker-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg-picker-caret { color: var(--text-3); font-size: .7rem; }
.cfg-picker-list { margin-top: 4px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #07101e; }
.cfg-picker-list input[type=search] { width: 100%; padding: 7px 9px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text-1); font: inherit; font-size: .84rem; outline: none; }
.cfg-picker-body { max-height: 240px; overflow: auto; padding: 4px; }
.cfg-picker-group { padding: 8px 6px 3px; font-size: .66rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.cfg-picker-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 6px; border: 0; border-radius: 5px; background: transparent; color: var(--text-2); font: inherit; font-size: .82rem; text-align: left; cursor: pointer; }
.cfg-picker-item:hover { background: rgba(148, 163, 184, .12); color: var(--text-1); }
.cfg-picker-item.current { color: var(--text-1); background: rgba(34, 211, 238, .1); }


.cfg-bnode-icon.sphere { display: inline-flex; flex: none; width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 50% 45%, rgba(34, 211, 238, .16), rgba(34, 211, 238, 0) 70%); }
.cfg-sphere { display: block; }

/* VLANs on the board */
.cfg-board-menu.wide { width: 470px; }
.cfg-board-vlantable { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.cfg-board-vlanhead, .cfg-board-vlanrow { display: grid; grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1.2fr) 26px; gap: 6px; align-items: center; }
.cfg-board-vlanhead span { font-size: .68rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.cfg-board-vlanrow { margin-top: 8px; }
.cfg-board-vlanrow input, .cfg-board-nicrow input, .cfg-board-nicrow select { width: 100%; padding: 6px 7px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #0a1526; color: var(--text-1); font: inherit; font-size: .84rem; }
.cfg-board-vlanrow input.bad { border-color: #f87171; }
.cfg-board-vlanflags { display: flex; flex-wrap: wrap; gap: 2px 14px; padding: 0 0 8px 2px; border-bottom: 1px solid var(--border); }
.cfg-board-vlanflags .cfg-board-check { margin: 4px 0; font-size: .76rem; }
.cfg-board-vlanpick .cfg-board-check { margin: 6px 0; }
.cfg-board-vlangrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; padding-left: 22px; }
.cfg-board-nicrow { display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr) 26px; gap: 6px; align-items: center; margin: 6px 0; }
.cfg-board-nicno { font-size: .7rem; color: var(--text-3); font-family: ui-monospace, Menlo, Consolas, monospace; }
.cfg-board-addnic { margin: 2px 0 6px; font-size: .8rem; }

/* locations */
.cfg-zone { position: absolute; border: 1.5px dashed rgba(var(--zone), .45); border-radius: 18px; background: rgba(var(--zone), .035); }
.cfg-zone.selected { border-style: solid; border-color: rgba(var(--zone), .85); background: rgba(var(--zone), .06); }
.cfg-zone-head { position: absolute; top: -15px; left: 16px; display: flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid rgba(var(--zone), .55); border-radius: 999px; background: #0b1628; color: rgb(var(--zone)); font-size: .8rem; cursor: grab; user-select: none; white-space: nowrap; touch-action: none; }
.cfg-zone-head:active { cursor: grabbing; }
.cfg-zone-head strong { color: var(--text-1); font-weight: 600; }
.cfg-zone-range { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .72rem; }
.cfg-zone-range.bad { color: #f87171; }
.cfg-zone-count { min-width: 18px; padding: 0 6px; border-radius: 999px; background: rgba(var(--zone), .18); color: var(--text-1); font-size: .7rem; text-align: center; }
.cfg-zone-resize { position: absolute; right: 2px; bottom: 2px; width: 18px; height: 18px; cursor: nwse-resize; border-right: 2px solid rgba(var(--zone), .6); border-bottom: 2px solid rgba(var(--zone), .6); border-bottom-right-radius: 12px; }
.cfg-zone-addrs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 6px 8px; align-items: center; }
.cfg-zone-addr-label { font-size: .78rem; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg-zone-addrs input { width: 100%; padding: 6px 7px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #0a1526; color: var(--text-1); font: 400 .8rem ui-monospace, Menlo, Consolas, monospace; }
.cfg-board-field input.bad { border-color: #f87171; }

/* tunnels: virtual ports and dashed lines */
.cfg-bports.virtual { border-top: 1px dashed var(--border); padding-top: 6px; }
.cfg-vport { padding: 2px 7px; border: 1px dashed var(--tun, #a78bfa); border-radius: 6px; background: transparent; color: var(--tun, #a78bfa); font: 600 .68rem ui-monospace, Menlo, Consolas, monospace; cursor: pointer; }
.cfg-vport.selected, .cfg-vport:hover { background: color-mix(in srgb, var(--tun, #a78bfa) 18%, transparent); }
.tun-wireguard { --tun: #a78bfa; } .tun-gre { --tun: #fb923c; } .tun-ipip { --tun: #fbbf24; } .tun-eoip { --tun: #2dd4bf; } .tun-vxlan { --tun: #f472b6; }
.cfg-wire.tunnel { color: var(--tun); }
.cfg-wire.tunnel .line { stroke: var(--tun); stroke-width: 2.5; stroke-dasharray: 9 6; }
.cfg-wire.tunnel.selected .line { stroke-width: 4; }
.cfg-tun-new { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.cfg-tun-new select { width: 100%; padding: 6px 7px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #0a1526; color: var(--text-1); font: inherit; font-size: .82rem; }
.cfg-tun-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: .78rem; color: var(--text-2); }
.cfg-tun-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* traffic analysis */
.cfg-board-flowbtn.active { color: var(--primary); border-color: var(--primary); background: rgba(34, 211, 238, .08); }
.cfg-flow-badge { flex: none; margin-left: auto; padding: 1px 7px; border-radius: 999px; font-size: .68rem; font-weight: 700; }
.cfg-flow-badge.error { background: rgba(248, 113, 113, .18); color: #fca5a5; border: 1px solid rgba(248, 113, 113, .55); }
.cfg-flow-badge.warn { background: rgba(251, 191, 36, .15); color: #fcd34d; border: 1px solid rgba(251, 191, 36, .5); }
.cfg-wire.tunnel.flow-ok .line { stroke: #34d399; }
.cfg-wire.tunnel.flow-ok { color: #34d399; }
.cfg-wire.tunnel.flow-partial .line { stroke: #fbbf24; }
.cfg-wire.tunnel.flow-partial { color: #fbbf24; }
.cfg-wire.tunnel.flow-blocked .line { stroke: #f87171; stroke-dasharray: 3 5; }
.cfg-wire.tunnel.flow-blocked { color: #f87171; }
.cfg-wire.trace-ok .line { stroke-width: 5; filter: drop-shadow(0 0 5px #34d399); }
.cfg-wire.trace-maybe .line { stroke-width: 5; filter: drop-shadow(0 0 5px #fbbf24); }
.cfg-wire.trace-bad .line { stroke-width: 5; filter: drop-shadow(0 0 5px #f87171); }
.cfg-bnode.trace-ok { box-shadow: 0 0 0 2px #34d399, 0 0 18px rgba(52, 211, 153, .45); }
.cfg-bnode.trace-maybe { box-shadow: 0 0 0 2px #fbbf24, 0 0 18px rgba(251, 191, 36, .45); }
.cfg-bnode.trace-stop { box-shadow: 0 0 0 2px #f87171, 0 0 20px rgba(248, 113, 113, .55); }
.cfg-flow-summary { margin: 6px 0; font-size: .8rem; color: var(--text-1); }
.cfg-flow-list { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 10px; max-height: 320px; overflow: auto; }
.cfg-flow-item { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border-radius: 8px; font-size: .76rem; line-height: 1.4; color: var(--text-2); background: rgba(148, 163, 184, .06); }
.cfg-flow-item.link { cursor: pointer; }
.cfg-flow-item.link:hover { background: rgba(148, 163, 184, .12); }
.cfg-flow-item.error { background: rgba(248, 113, 113, .1); }
.cfg-flow-item.warn { background: rgba(251, 191, 36, .08); }
.cfg-flow-mark { flex: none; font-weight: 700; }
.cfg-flow-item.error .cfg-flow-mark { color: #f87171; } .cfg-flow-item.warn .cfg-flow-mark { color: #fbbf24; } .cfg-flow-item.info .cfg-flow-mark { color: #34d399; }
.cfg-flow-hops { margin: 6px 0 0; padding-left: 20px; font-size: .78rem; color: var(--text-2); }
.cfg-flow-hops li { margin: 2px 0; }
.cfg-flow-hops li.ok::marker { color: #34d399; } .cfg-flow-hops li.maybe::marker { color: #fbbf24; } .cfg-flow-hops li.bad { color: #fca5a5; }
.cfg-bnode .cfg-flow-badge { position: absolute; top: -10px; right: -10px; margin: 0; z-index: 2; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); background-color: #1a0f14; }
.cfg-bnode .cfg-flow-badge.warn { background-color: #1a160c; }

/* moving lines: packets on cables, flowing dashes on tunnels */
@keyframes cfg-flow { from { stroke-dashoffset: 48; } to { stroke-dashoffset: 0; } }
@keyframes cfg-tunnel-flow { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }
.cfg-wire .flow { fill: none; stroke: #f8fafc; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 7 41; opacity: .9; pointer-events: none; filter: drop-shadow(0 0 3px currentColor); animation: cfg-flow 1.4s linear infinite; }
.cfg-wire.s0 .flow { animation-duration: 2.6s; }
.cfg-wire.s1 .flow { animation-duration: 1.4s; }
.cfg-wire.s2 .flow { animation-duration: 1s; }
.cfg-wire.s10 .flow { animation-duration: .6s; }
.cfg-wire.s25 .flow { animation-duration: .38s; }
.cfg-wire.unknown .flow { animation-duration: 2s; opacity: .45; }
.cfg-wire.selected .flow { stroke-width: 4.5; }
.cfg-wire.tunnel .line { animation: cfg-tunnel-flow 1s linear infinite; }
.cfg-wire.tunnel.flow-partial .line { animation-duration: 2.4s; }
.cfg-wire.tunnel.flow-blocked .line { animation: none; }
.cfg-wire-temp { animation: cfg-flow .6s linear infinite; }

/* right-click on empty board */
.cfg-fav-row { display: flex; align-items: center; gap: 2px; }
.cfg-fav-row .cfg-fav { flex: 1; min-width: 0; }
.cfg-fav img { width: 30px; height: 20px; object-fit: contain; flex: none; }
.cfg-fav span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg-fav-star { flex: none; width: 28px; height: 28px; border: 0; border-radius: 6px; background: transparent; color: var(--text-3); font-size: 1rem; cursor: pointer; }
.cfg-fav-star:hover { color: #fbbf24; background: rgba(148, 163, 184, .1); }
.cfg-fav-star.on { color: #fbbf24; }
.cfg-board-menu .cfg-picker-group { padding-left: 4px; }

/* four modes */
.cfg-modeswitch.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .cfg-modeswitch.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Wi-Fi plan */
.cfg-wifi-app { display: flex; flex-direction: column; gap: 10px; }
.cfg-board-tool.on { background: rgba(34, 211, 238, .14); color: var(--primary); }
.cfg-wifi-select { padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #0a1526; color: var(--text-1); font: inherit; font-size: .82rem; }
.cfg-wifi-hint { font-size: .74rem; }
.cfg-btn-ghost.active { color: var(--primary); }
.cfg-wifi-stage { cursor: default; background: #050c18; }
.cfg-wifi-stage.tool-room, .cfg-wifi-stage.tool-wall, .cfg-wifi-stage.tool-object, .cfg-wifi-stage.tool-ap, .cfg-wifi-stage.tool-door { cursor: crosshair; }
.cfg-wifi-surface { position: relative; }
.cfg-wifi-heat { position: absolute; image-rendering: auto; filter: blur(2px); pointer-events: none; }
.cfg-wifi-plan { position: absolute; inset: 0; overflow: visible; }
.cfg-wifi-plan .wroom { fill: rgba(148, 163, 184, .05); stroke: none; }
.cfg-wifi-plan .wroom.sel { fill: rgba(34, 211, 238, .12); }
.cfg-wifi-plan .wroom-name { fill: #e2e8f0; font: 600 12px Inter, Arial, sans-serif; text-anchor: middle; paint-order: stroke; stroke: rgba(4, 10, 20, .8); stroke-width: 3px; pointer-events: none; }
.cfg-wifi-plan .wroom-size { fill: #94a3b8; font: 11px Inter, Arial, sans-serif; text-anchor: middle; paint-order: stroke; stroke: rgba(4, 10, 20, .8); stroke-width: 3px; pointer-events: none; }
.cfg-wifi-plan .wwall.sel { filter: drop-shadow(0 0 4px #22d3ee); }
.cfg-wifi-plan .wobj { fill: rgba(100, 116, 139, .55); stroke: #cbd5e1; stroke-width: 1.2; }
.cfg-wifi-plan .wobj-meterbox { fill: rgba(250, 204, 21, .35); stroke: #facc15; }
.cfg-wifi-plan .wobj-fridge, .cfg-wifi-plan .wobj-cabinet { fill: rgba(203, 213, 225, .35); }
.cfg-wifi-plan .wobj-aquarium { fill: rgba(56, 189, 248, .35); stroke: #38bdf8; }
.cfg-wifi-plan .wobj.sel { stroke: #22d3ee; stroke-width: 2.5; }
.cfg-wifi-plan .wobj-name { fill: #f8fafc; font: 600 9px Inter, Arial, sans-serif; text-anchor: middle; pointer-events: none; }
.cfg-wifi-plan .wap-dot { fill: #0a1526; stroke: #22d3ee; stroke-width: 2.5; }
.cfg-wifi-plan .wap-waves { fill: none; stroke: #22d3ee; stroke-width: 2; stroke-linecap: round; }
.cfg-wifi-plan .wap-core { fill: #22d3ee; }
.cfg-wifi-plan .wap-name { fill: #e2e8f0; font: 600 11px Inter, Arial, sans-serif; text-anchor: middle; paint-order: stroke; stroke: rgba(4, 10, 20, .85); stroke-width: 3px; }
.cfg-wifi-plan .wap.sel .wap-dot { stroke-width: 4; filter: drop-shadow(0 0 6px #22d3ee); }
.cfg-wifi-plan .wap.other { opacity: .45; }
.cfg-wifi-plan .wtemp { fill: rgba(34, 211, 238, .12); stroke: #22d3ee; stroke-width: 2; stroke-dasharray: 6 4; }
.cfg-wifi-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 10px 0; font-size: .74rem; color: var(--text-2); }
.cfg-wifi-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cfg-wifi-legend i { width: 14px; height: 10px; border-radius: 3px; display: inline-block; }
.cfg-wifi-rooms { display: flex; flex-direction: column; gap: 3px; margin: 6px 0 10px; }
.cfg-wifi-room { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 5px 8px; border: 0; border-radius: 6px; background: rgba(148, 163, 184, .06); color: var(--text-2); font: inherit; font-size: .78rem; text-align: left; cursor: pointer; }
.cfg-wifi-room b { font-variant-numeric: tabular-nums; }
.cfg-wifi-room small { color: var(--text-3); font-variant-numeric: tabular-nums; }
.cfg-wifi-room.good b { color: #34d399; } .cfg-wifi-room.fair b { color: #fbbf24; } .cfg-wifi-room.bad b { color: #f87171; }
.cfg-wifi-cov { font-size: .8rem; margin: 8px 0; }
.cfg-wifi-cov.good { color: #34d399; } .cfg-wifi-cov.fair { color: #fbbf24; } .cfg-wifi-cov.bad { color: #f87171; }
.cfg-wifi-disclaimer { margin-top: 14px; font-size: .72rem; }
.btn.on { border-color: var(--primary); color: var(--primary); }

.cfg-wifi-search { width: 100%; margin: 8px 0 4px; padding: 7px 9px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #0a1526; color: var(--text-1); font: inherit; font-size: .84rem; }
.cfg-wifi-models { max-height: 320px; overflow: auto; }
.cfg-wifi-bands { display: flex; gap: 14px; flex-wrap: wrap; }
.cfg-wifi-plan .wap.planonly .wap-dot { stroke-dasharray: 4 3; }

.cfg-wifi-plan .whandle { fill: #0a1526; stroke: #22d3ee; stroke-width: 2; cursor: grab; }
.cfg-wifi-plan .whandle.square { cursor: nwse-resize; }
.cfg-wifi-plan .wdim { fill: #22d3ee; font: 600 11px Inter, Arial, sans-serif; text-anchor: middle; paint-order: stroke; stroke: rgba(4, 10, 20, .9); stroke-width: 3px; pointer-events: none; }

.cfg-wifi-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: end; }
.cfg-wifi-row2 .cfg-board-field { margin: 8px 0; }
.cfg-wifi-row2 select, .cfg-wifi-row2 input { width: 100%; }
.cfg-wifi-stage { height: 76vh; min-height: 560px; }

/* projects: several drawings in this browser */
.cfg-projects { position: relative; }
.cfg-projects-btn { display: inline-flex; align-items: center; gap: 8px; max-width: 320px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; color: var(--text-2); font: inherit; font-size: .8rem; cursor: pointer; }
.cfg-projects-btn:hover { border-color: var(--primary); color: var(--text-1); }
.cfg-projects-btn strong { color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg-projects-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); }
.cfg-projects-caret { color: var(--text-3); }
.cfg-projects-menu { width: 300px; }
.cfg-project-row { display: flex; align-items: flex-start; gap: 8px; }
.cfg-project-row.on { color: var(--primary); }
.cfg-project-dot { width: 10px; flex: none; font-size: .6rem; line-height: 1.6; }
.cfg-project-name { display: flex; flex-direction: column; min-width: 0; }
.cfg-project-name small { color: var(--text-3); font-size: .72rem; }
.cfg-board-menu-item.danger { color: #f87171; }
.cfg-board-menu-sep { height: 1px; margin: 6px 0; background: var(--border); }
.cfg-projects-note { margin: 8px 0 0; font-size: .72rem; }
@media (max-width: 640px) { .cfg-projects-label { display: none; } .cfg-projects-btn { max-width: 200px; } }

/* people and pets, and Jaclaz mode */
.cfg-wifi-plan .wobj-living { fill: rgba(244, 114, 182, .22); stroke: #f472b6; stroke-width: 1.5; }
.cfg-wifi-plan .wobj-pet { fill: rgba(251, 191, 36, .22); stroke: #fbbf24; }
.cfg-wifi-plan .wobj-living.sel { stroke: #22d3ee; stroke-width: 2.5; }
.cfg-wifi-plan .wobj-emoji { text-anchor: middle; pointer-events: none; }
.cfg-wifi-jaclaz.active { border-color: #f472b6; color: #f472b6; }

/* radios switched off on the plan */
.cfg-wifi-plan .wap.radio-off { opacity: .45; }
.cfg-wifi-plan .wap.radio-off .wap-dot { stroke-dasharray: 3 3; }
.cfg-wifi-plan .wap-off { fill: #f87171; font: 600 10px Inter, Arial, sans-serif; text-anchor: middle; paint-order: stroke; stroke: rgba(4, 10, 20, .9); stroke-width: 3px; }
.cfg-board-check.off span { color: var(--text-3); text-decoration: line-through; }

/* antenna beam of a sector access point */
.cfg-wifi-plan .wap-beam { fill: rgba(34, 211, 238, .12); stroke: rgba(34, 211, 238, .55); stroke-width: 1; pointer-events: none; }
.cfg-wifi-plan .wap-beam.sel { fill: rgba(34, 211, 238, .2); stroke: #22d3ee; }
.cfg-wifi-plan .wap-beam-axis { stroke: #22d3ee; stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }

/* Discord: its own colour on hover, so it reads as a way out to another place */
.cfg-hero-link.is-discord:hover { border-color: rgba(88, 101, 242, .6); background: rgba(88, 101, 242, .14); color: #aab3ff; }

/* the selected cable: its own colour, drawn above the blocks, with both ports lit */
.cfg-board-wires.top { z-index: 5; }
.cfg-wire.selected { color: #fbbf24; }
.cfg-wire.selected .line { stroke: #fbbf24 !important; stroke-width: 5; filter: drop-shadow(0 0 5px rgba(251, 191, 36, .8)); }
.cfg-wire.selected rect { stroke: #fbbf24; stroke-width: 2; }
.cfg-bport.cable-end { background: rgba(251, 191, 36, .25) !important; border-color: #fbbf24 !important; color: #fff7db !important; box-shadow: 0 0 0 2px rgba(251, 191, 36, .45); }

/* full screen: the board fills the window, the plan area takes all the room left */
.cfg-board-app.is-full, .cfg-wifi-app.is-full { position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; background: #030811; overflow: hidden; }
.is-full > .cfg-board-main { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); }
.is-full .cfg-board-stage, .is-full .cfg-wifi-stage { height: 100%; min-height: 0; }
.is-full .cfg-board-main.panel-dock .cfg-board-side { max-height: 100%; overflow: auto; }
html.cfg-full-open, html.cfg-full-open body { overflow: hidden; }
.cfg-fullbtn.active { border-color: var(--primary); color: var(--primary); }

/* the plain-text section below the tool: what it is, features, roles, FAQ */
.cfg-seo { padding-top: 10px; }
.cfg-seo h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 0 0 14px; color: var(--text-1); }
.cfg-seo h3 { font-size: 1.15rem; margin: 34px 0 12px; color: var(--text-1); }
.cfg-seo h4 { font-size: .98rem; margin: 0 0 6px; color: var(--text-1); }
.cfg-seo p, .cfg-seo li { color: var(--text-2); line-height: 1.65; }
.cfg-seo-lead { max-width: 860px; font-size: 1.02rem; }
.cfg-seo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.cfg-seo-card { padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: rgba(13, 26, 50, .45); }
.cfg-seo-card p { margin: 0; font-size: .92rem; }
.cfg-seo-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px 40px; }
.cfg-seo-list { margin: 0; padding-left: 18px; columns: 2; column-gap: 28px; }
.cfg-seo-list li { break-inside: avoid; font-size: .92rem; }
.cfg-seo-faq details { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 16px; margin: 0 0 8px; background: rgba(13, 26, 50, .35); }
.cfg-seo-faq summary { cursor: pointer; font-weight: 600; color: var(--text-1); }
.cfg-seo-faq details p { margin: 10px 0 2px; }
.cfg-seo-more { margin-top: 26px; font-size: .92rem; }
@media (max-width: 640px) { .cfg-seo-list { columns: 1; } }

/* import: v6 or v7, and the conversion report */
.cfg-import-from { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.cfg-import-from-label { font-size: .8rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; margin-right: 4px; }
.cfg-import-cta.is-v6 .cfg-import-cta-icon { color: #fbbf24; }
.cfg-v6-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.cfg-v6-list li { display: flex; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(13, 26, 50, .45); color: var(--text-2); line-height: 1.5; }
.cfg-v6-list li.lvl-manual { border-color: rgba(248, 113, 113, .45); }
.cfg-v6-list li.lvl-warn { border-color: rgba(251, 191, 36, .45); }
.cfg-v6-icon { flex: none; }

/* import, v6 and open-file side by side */
.cfg-import-ctas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 18px; }
.cfg-import-ctas .cfg-import-cta { margin-bottom: 0; height: 100%; align-items: flex-start; }
.cfg-import-ctas .cfg-import-cta-go { align-self: center; }