/* NavoFlo v8.25 — Company Settings page */

.company-settings-shell { padding: 40px 0 80px; min-height: calc(100vh - 80px); }
.cs-loading { color: #6b8fa6; padding: 40px 0; text-align: center; }

/* ── Page header ── */
.cs-header { margin-bottom: 32px; }
.cs-header h1 { font-size: 26px; font-weight: 800; color: #eef6fa; margin: 0 0 6px; }
.cs-header p { color: #6b8fa6; margin: 0; font-size: 14px; }

/* ── Tab strip ── */
.cs-tabs { display: flex; gap: 0; border-bottom: 1px solid #1e3040; margin-bottom: 32px; }
.cs-tab {
  padding: 10px 22px; border: none; background: none; cursor: pointer;
  font-size: 14px; font-weight: 700; color: #6b8fa6; letter-spacing: .04em;
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s;
}
.cs-tab:hover { color: #adc0cc; }
.cs-tab.active { color: #35d19f; border-bottom-color: #35d19f; }

/* ── Panels ── */
.cs-panel { display: none; }
.cs-panel.active { display: block; }

/* ── Section card ── */
.cs-card {
  background: #101b23; border: 1px solid #1e3040; border-radius: 14px;
  padding: 24px; margin-bottom: 24px;
}
.cs-card-title { font-size: 15px; font-weight: 800; color: #eef6fa; margin: 0 0 4px; }
.cs-card-desc { font-size: 13px; color: #6b8fa6; margin: 0 0 20px; }

/* ── Capabilities grid ── */
.cs-cap-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px;
}
.cs-cap-item {
  display: flex; align-items: center; gap: 10px;
  background: #0d1820; border: 1px solid #1e3040; border-radius: 9px;
  padding: 10px 14px; cursor: pointer; transition: border-color .15s, background .15s;
}
.cs-cap-item:hover { border-color: #2c4351; background: #12212c; }
.cs-cap-item input[type="checkbox"] { width: 16px; height: 16px; accent-color: #35d19f; cursor: pointer; flex-shrink: 0; }
.cs-cap-item label { font-size: 13px; font-weight: 600; color: #c8dce8; cursor: pointer; user-select: none; }
.cs-cap-item.checked { border-color: #35d19f44; background: #0b1e17; }
.cs-cap-item.checked label { color: #35d19f; }

/* ── Capability groups: Interne / Externe per process (v8.37.7) ── */
.cs-cap-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: #6b8fa6; margin: -8px 0 16px; }
.cs-cap-legend span::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: -1px; }
.cs-cap-legend .int::before { background: #35d19f; }
.cs-cap-legend .ext::before { background: #f0a85a; }
.cs-cap-legend .off::before { background: #3a5668; }
.cs-cap-groups { display: flex; flex-direction: column; gap: 10px; }
.cs-cap-group { background: #0d1820; border: 1px solid #1e3040; border-radius: 11px; overflow: hidden; transition: border-color .15s; }
.cs-cap-group.on { border-color: #35d19f44; }
.cs-cap-group-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; user-select: none; }
.cs-cap-group-head:hover { background: #12212c; }
.cs-cap-group-head:focus-visible { outline: 2px solid #35d19f; outline-offset: -2px; }
.cs-cap-chev { color: #6b8fa6; font-size: 13px; width: 12px; flex-shrink: 0; transition: transform .15s; }
.cs-cap-group.on .cs-cap-chev { transform: rotate(90deg); color: #35d19f; }
.cs-cap-group-label { flex: 1; font-size: 14px; font-weight: 800; color: #c8dce8; }
.cs-cap-group.on .cs-cap-group-label { color: #eef6fa; }
.cs-cap-group-sum { display: flex; gap: 6px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.cs-cap-group-sum .int { color: #35d19f; }
.cs-cap-group-sum .ext { color: #f0a85a; }
.cs-cap-group-sum .sep, .cs-cap-group-sum .off { color: #3a5668; }
.cs-cap-group-body { display: none; border-top: 1px solid #1e3040; padding: 10px 16px 12px; }
.cs-cap-group.on .cs-cap-group-body { display: block; }
.cs-proc-row { display: flex; flex-direction: column; gap: 10px; padding: 11px 0; border-bottom: 1px solid #12212c; }
.cs-proc-row:last-child { border-bottom: none; }
.cs-proc-head { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px 16px; }
.cs-proc-name { flex: 1 1 200px; font-size: 13px; font-weight: 700; color: #c8dce8; }
.cs-proc-desc { font-size: 11px; color: #6b8fa6; font-weight: 500; margin-top: 2px; line-height: 1.35; }
.cs-proc-row.is-external .cs-proc-name { color: #d9b98a; }
.cs-proc-row.is-off .cs-proc-name { color: #5f7584; }
.cs-proc-row.is-off .cs-proc-desc { color: #4a6070; }
.cs-seg { display: inline-flex; border: 1px solid #2c4351; border-radius: 8px; overflow: hidden; background: #081118; flex-shrink: 0; }
.cs-seg-btn { border: none; background: transparent; color: #6b8fa6; font-size: 12px; font-weight: 800; padding: 6px 14px; cursor: pointer; letter-spacing: .04em; transition: background .15s, color .15s; }
.cs-seg-btn + .cs-seg-btn { border-left: 1px solid #2c4351; }
.cs-seg-btn:hover { color: #eef6fa; }
.cs-seg-btn.off.active { background: #2c4351; color: #c8dce8; }
.cs-seg-btn.int.active { background: #35d19f; color: #05120e; }
.cs-seg-btn.ext.active { background: #f0a85a; color: #1b1006; }
.cs-proc-thr { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 4px 0 4px 12px; border-left: 2px solid #35d19f44; }
.cs-proc-ext-note { font-size: 12px; color: #b8946a; padding: 0 0 0 12px; border-left: 2px solid #f0a85a44; line-height: 1.4; }
/* V8.61.0 — availability checkboxes · priority · machine summary · Configurer (advanced resources) */
.cs-cap-legend .pref::before { background: #9fd3ea; }
.cs-avail { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; flex-shrink: 0; }
.cs-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: #6b8fa6; cursor: pointer; user-select: none; }
.cs-chk input { width: 15px; height: 15px; accent-color: #35d19f; cursor: pointer; margin: 0; }
.cs-chk.ext input { accent-color: #f0a85a; }
.cs-chk input:checked + span { color: #eef6fa; }
.cs-chk.int input:checked + span { color: #35d19f; }
.cs-chk.ext input:checked + span { color: #f0a85a; }
.cs-pref { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #6b8fa6; }
.cs-pref select { background: #081118; color: #c8dce8; border: 1px solid #2c4351; border-radius: 6px; padding: 4px 8px; font-size: 12px; }
.cs-proc-sum { font-size: 12px; color: #6b8fa6; flex: 1 1 160px; align-self: center; }
.cs-cfg-btn { padding: 4px 12px; font-size: 12px; border: 1px solid #2c4351; color: #adc0cc; flex-shrink: 0; align-self: center; }
.cs-cfg-btn.on { border-color: #35d19f88; color: #35d19f; }
.cs-proc-adv { flex: 1 1 100%; padding: 6px 0 4px 12px; border-left: 2px solid #35d19f44; display: flex; flex-direction: column; gap: 8px; }
.cs-res-list { display: flex; flex-direction: column; gap: 10px; }
.cs-res { border: 1px solid #2c4351; border-radius: 10px; padding: 10px 12px; background: #081118; }
.cs-res .cs-proc-thr { border-left: none; padding-left: 0; }
.cs-res-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.cs-res-name { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: #6b8fa6; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; flex: 0 1 280px; }
.cs-res-name input { background: #0d1a24; color: #eef6fa; border: 1px solid #2c4351; border-radius: 6px; padding: 6px 8px; font-size: 13px; }
.cs-res-del { padding: 4px 10px; font-size: 12px; }
.cs-res-add { align-self: flex-start; padding: 5px 12px; font-size: 12px; border: 1px dashed #2c4351; color: #adc0cc; }
.cs-sup-form .cs-sup-procs { flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 18px; }
.cs-sup-fam { display: flex; flex-direction: column; gap: 4px; }
.cs-sup-fam .cs-chk { font-weight: 600; letter-spacing: 0; }
.cs-proc-extra { flex: 1 1 100%; }
.cs-proc-extra .cs-param-sub:first-child { margin-top: 6px; }
.cs-proc-extra .cs-param-row .cs-field { flex: 0 1 220px; }
.cs-thr-hint { font-size: 11px; letter-spacing: .08em; font-weight: 700; color: #6b8fa6; text-transform: uppercase; }
.cs-thr-field { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: #c8dce8; }
.cs-thr-field input { width: 80px; background: #081118; border: 1px solid #2c4351; border-radius: 6px; color: #eef6fa; padding: 5px 8px; font-size: 13px; outline: none; }
.cs-thr-field input:focus { border-color: #35d19f; }
/* V8.39 — group hints, min-hole table */
.cs-group-hint { margin: 0 0 8px; font-size: 12px; color: #8fa8b6; line-height: 1.45; }
.cs-minhole-grid { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.cs-minhole-row { display: flex; align-items: center; gap: 8px; }
.cs-minhole-row input { width: 120px; background: #081118; border: 1px solid #2c4351; border-radius: 6px; color: #eef6fa; padding: 5px 8px; font-size: 13px; outline: none; }
.cs-minhole-row input:focus { border-color: #35d19f; }
.cs-tool-lengths { display: flex; flex-direction: column; gap: 6px; }
.cs-tool-lengths-row { display: flex; align-items: center; gap: 8px; }
.cs-tool-lengths-row input { width: 110px; background: #081118; border: 1px solid #2c4351; border-radius: 6px; color: #eef6fa; padding: 5px 8px; font-size: 13px; outline: none; }
.cs-tool-lengths-row input:focus { border-color: #35d19f; }
.cs-tool-lengths-total { font-size: 12px; color: #8fa8b6; }

/* ── Save button ── */
.cs-save-row { margin-top: 18px; display: flex; align-items: center; gap: 14px; }
.cs-btn {
  padding: 10px 22px; border-radius: 9px; border: none; cursor: pointer;
  font-size: 14px; font-weight: 750; transition: opacity .15s, background .15s;
}
.cs-btn:disabled { opacity: .45; cursor: not-allowed; }
.cs-btn-primary { background: #35d19f; color: #05120e; }
.cs-btn-primary:hover:not(:disabled) { background: #3de8b0; }
.cs-btn-danger { background: transparent; border: 1px solid #e55; color: #e55; }
.cs-btn-danger:hover:not(:disabled) { background: #e5515120; }
.cs-save-msg { font-size: 13px; color: #35d19f; display: none; }
.cs-save-msg.err { color: #f87171; }

/* ── Bend params table ── */
.cs-bend-toolbar { display: flex; gap: 10px; margin-bottom: 14px; align-items: center; }
.cs-bend-toolbar .cs-hint { font-size: 12px; color: #6b8fa6; }

.cs-bend-table-wrap { overflow-x: auto; }
.cs-bend-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cs-bend-table th {
  text-align: left; padding: 8px 10px; font-size: 11px; letter-spacing: .1em;
  font-weight: 800; color: #6b8fa6; border-bottom: 1px solid #1e3040; white-space: nowrap;
}
.cs-bend-table td { padding: 8px 10px; border-bottom: 1px solid #12212c; color: #c8dce8; }
.cs-bend-table tr:last-child td { border-bottom: none; }
.cs-bend-table tr:hover td { background: #0d1820; }
.cs-bend-table .td-actions { display: flex; gap: 6px; }
.cs-bend-table .td-k { font-weight: 800; color: #35d19f; }
.cs-bend-table .td-mat { font-size: 11px; letter-spacing: .08em; font-weight: 700; color: #adc0cc; }
.cs-bend-empty { text-align: center; color: #6b8fa6; padding: 28px 0; font-size: 13px; }

/* ── Inline edit form ── */
.cs-bend-form {
  display: none; background: #0d1820; border: 1px solid #2c4351; border-radius: 10px;
  padding: 18px; margin-top: 14px; gap: 12px; flex-wrap: wrap; align-items: flex-end;
}
.cs-bend-form.open { display: flex; }
.cs-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 110px; }
.cs-field label { font-size: 11px; letter-spacing: .1em; font-weight: 700; color: #6b8fa6; }
.cs-field input, .cs-field select {
  background: #081118; border: 1px solid #2c4351; border-radius: 7px;
  color: #eef6fa; padding: 7px 10px; font-size: 13px; outline: none;
  transition: border-color .15s; width: 100%; box-sizing: border-box;
}
.cs-field input:focus, .cs-field select:focus { border-color: #35d19f; }
.cs-field input::placeholder { color: #3a5668; }
.cs-form-actions { display: flex; gap: 8px; align-items: flex-end; flex-shrink: 0; padding-bottom: 0; }

/* ── Company K badge in viewer (injected by viewer.js) ── */
.cs-company-k-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; color: #35d19f;
  background: #0b1e1744; border: 1px solid #35d19f44;
  border-radius: 5px; padding: 2px 7px; letter-spacing: .05em;
}

/* ── Account nav link (add to licenses page or nav) ── */
.cs-account-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.cs-account-nav a {
  padding: 7px 16px; border-radius: 8px; text-decoration: none;
  font-size: 13px; font-weight: 700; color: #adc0cc;
  border: 1px solid #1e3040; transition: color .15s, border-color .15s;
}
.cs-account-nav a:hover { color: #eef6fa; border-color: #2c4351; }
.cs-account-nav a.active { color: #35d19f; border-color: #35d19f44; background: #0b1e1744; }

/* ── Capability param editors (v8.26) ── */
.cs-param-block {
  border: 1px solid #1e3040; border-radius: 11px; padding: 16px 18px;
  margin-bottom: 14px; background: #0d1820;
}
.cs-param-block:last-child { margin-bottom: 0; }
.cs-param-title { font-size: 14px; font-weight: 800; color: #35d19f; margin-bottom: 12px; }
.cs-param-row { display: flex; gap: 12px; flex-wrap: wrap; }
.cs-param-row .cs-field { flex: 1 1 130px; }
.cs-param-sub { font-size: 11px; letter-spacing: .1em; font-weight: 700; color: #6b8fa6; margin: 14px 0 8px; text-transform: uppercase; }
.cs-matgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.cs-matrow {
  display: flex; align-items: center; gap: 8px;
  background: #081118; border: 1px solid #1e3040; border-radius: 8px; padding: 6px 10px;
}
.cs-matrow > span:first-child { flex: 1; font-size: 12px; color: #c8dce8; }
.cs-matrow input { width: 74px; background: #0d1820; border: 1px solid #2c4351; border-radius: 6px; color: #eef6fa; padding: 5px 8px; font-size: 13px; outline: none; }
.cs-matrow input:focus { border-color: #35d19f; }
.cs-matrow .cs-unit { color: #6b8fa6; font-size: 12px; }

/* ── Tooling (v8.26) ── */
.cs-tool-section { margin-top: 20px; }
.cs-tool-section:first-of-type { margin-top: 8px; }
.cs-tool-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cs-tool-head h3 { font-size: 14px; font-weight: 800; color: #eef6fa; margin: 0; }
.cs-tool-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #0d1820; border: 1px solid #1e3040; border-radius: 10px;
  padding: 11px 15px; margin-bottom: 8px;
}
.cs-tool-card:hover { border-color: #2c4351; }
.cs-tool-thumb { flex: 0 0 56px; width: 56px; height: 56px; background: #0a131a; border: 1px solid #1e3040; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.cs-tool-thumb svg { width: 50px; height: 50px; display: block; }
.cs-tool-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.cs-tool-main strong { font-size: 14px; color: #eef6fa; }
.cs-tool-main span { font-size: 12px; color: #6b8fa6; }
.cs-tool-img-link { color: #9fd3ea; text-decoration: underline; }

.cs-tool-form {
  display: none; background: #0d1820; border: 1px solid #2c4351; border-radius: 12px;
  margin-top: 16px; overflow: hidden;
}
.cs-tool-form.open { display: block; }
.cs-tool-form.is-die .cs-punch-only { display: none !important; }
.cs-tool-form.is-punch .cs-die-only { display: none !important; }
.cs-tool-form .cs-fam-2v, .cs-tool-form .cs-fam-gooseneck, .cs-tool-form .cs-fam-hemming, .cs-tool-form .cs-fam-hemming_spring, .cs-tool-form .cs-fam-offset { display: none; }
.cs-tool-form.is-die.fam-2v .cs-fam-2v { display: flex; }
.cs-tool-form.is-punch.fam-gooseneck .cs-fam-gooseneck { display: flex; }
.cs-tool-form.is-punch.fam-hemming .cs-fam-hemming { display: flex; }
.cs-tool-form.is-die.fam-hemming_spring .cs-fam-hemming_spring { display: flex; }
.cs-tool-form.fam-offset .cs-fam-offset { display: flex; }
.cs-tool-form .cs-horn-fields, .cs-tool-form .cs-wp-fields { display: none; }
.cs-tool-form.is-punch.has-horn .cs-horn-fields { display: flex; }
.cs-tool-form.is-punch.has-wp .cs-wp-fields { display: flex; }
.cs-tool-form .cs-field-sub { display: block; margin-top: 3px; font-size: 11px; line-height: 1.35; color: #7f98a6; }
.cs-tool-preset-hint { font-size: 11px; color: #6b8fa6; margin: 6px 0 0; }
.cs-tool-preset-src { font-size: 11px; color: #3f6f8f; margin: 4px 0 0; font-style: italic; }
.cs-tool-image-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cs-tool-image-row input[type=file] { font-size: 12px; color: #adc0cc; max-width: 100%; }
.cs-tool-image-preview img { max-width: 220px; max-height: 160px; margin-top: 8px; border: 1px solid #2c4351; border-radius: 8px; background: #fff; }

/* ── Tool designer (v8.42, COVO-style): top bar · big canvas + stats · steppers column ── */
.cs-dz-top { display: flex; align-items: flex-end; gap: 14px; padding: 14px 16px; border-bottom: 1px solid #1e3040; background: #0a131a; flex-wrap: wrap; }
.cs-dz-ident { display: flex; gap: 10px; flex: 1 1 420px; align-items: flex-end; flex-wrap: wrap; }
.cs-dz-ident .cs-field { flex: 1 1 140px; }
.cs-dz-ident .cs-dz-preset { flex: 2 1 220px; }
.cs-dz-ident .cs-dz-name { flex: 2 1 180px; }
.cs-dz-top .cs-tool-view-toggle { align-self: flex-end; flex: 0 0 auto; min-width: 220px; }
.cs-dz-reset { background: transparent; border: 1px solid #2c4351; color: #adc0cc; border-radius: 8px; padding: 8px 12px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; align-self: flex-end; }
.cs-dz-reset:hover { color: #eef6fa; border-color: #3d5a6d; }
.cs-dz-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; }
.cs-dz-canvas {
  position: relative; min-height: 560px; overflow: hidden;
  background-color: #f5f7fb;
  background-image: radial-gradient(rgba(37,99,235,.20) 1px, transparent 1px);
  background-size: 22px 22px;
}
.cs-dz-canvas-hint { position: absolute; top: 12px; left: 16px; font-size: 11px; color: #64748b; z-index: 2; pointer-events: none; }
.cs-dz-view { position: absolute; inset: 34px 16px 86px 16px; display: flex; align-items: center; justify-content: center; }
.cs-dz-view[hidden] { display: none; }
.cs-dz-view svg { width: 100%; height: 100%; display: block; }
.cs-dz-view .tp-dim:hover { fill: #1d4ed8; text-decoration: underline; }
.cs-dz-view .tp-handle { transition: r .1s; }
.cs-dz-view .tp-handle:hover { fill: #dbeafe; }
.cs-dz-3d canvas { border-radius: 8px; }
.cs-dz-3d-loading { font-size: 13px; color: #64748b; }
.cs-dz-horn { position: absolute; left: 16px; bottom: 92px; width: 170px; height: 170px; z-index: 2; }
.cs-dz-horn:empty { display: none; }
.cs-dz-horn svg { width: 100%; height: 100%; display: block; background: rgba(13,24,32,.85); border: 1px solid #1e3040; border-radius: 8px; }
.cs-dz-canvas .cs-tool-wp-status { position: absolute; top: 12px; right: 16px; z-index: 2; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(13,24,32,.9); border: 1px solid #1e3040; }
.cs-dz-canvas .cs-tool-wp-status:empty { display: none; }
.cs-dz-inline { position: absolute; z-index: 6; display: flex; align-items: center; gap: 4px; background: #fff; color: #0a131a; border: 2px solid #3b82f6; border-radius: 9px; padding: 4px 8px; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.cs-dz-inline[hidden] { display: none; }
.cs-dz-inline input { width: 72px; border: 0; background: transparent; color: #0a131a; font-size: 15px; font-weight: 800; text-align: center; font-family: ui-monospace, Menlo, Consolas, monospace; -moz-appearance: textfield; outline: none; }
.cs-dz-inline input::-webkit-outer-spin-button, .cs-dz-inline input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cs-dz-inline span { font-size: 11px; color: #475569; font-weight: 700; }
.cs-dz-inline span:empty { display: none; }
.cs-dz-stats { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: rgba(13,24,32,.92); border-top: 1px solid #1e3040; backdrop-filter: blur(4px); }
.cs-dz-stat { padding: 12px 16px; border-right: 1px solid #1e3040; min-width: 0; }
.cs-dz-stat:last-child { border-right: 0; }
.cs-dz-stat span { display: block; font-size: 11px; color: #6b8fa6; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-dz-stat b { font-size: 20px; font-weight: 800; color: #eef6fa; letter-spacing: -.01em; }
.cs-dz-stat small { margin-left: 5px; font-size: 11px; color: #8fb3c7; }
.cs-dz-side { border-left: 1px solid #1e3040; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; max-height: 760px; overflow-y: auto; background: #0d1820; }
.cs-dz-side h4 { margin: 8px 0 2px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #6b8fa6; }
.cs-dz-side h4:first-child { margin-top: 0; }
.cs-step { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 8px; padding: 2px 0; }
.cs-step.flash { background: rgba(159,211,234,.12); box-shadow: 0 0 0 4px rgba(159,211,234,.12); }
.cs-step label { font-size: 13px; color: #cfe4ef; flex: 1 1 auto; min-width: 0; }
.cs-step-ctl { display: flex; align-items: center; background: #0a131a; border: 1px solid #1e3040; border-radius: 8px; height: 32px; flex: 0 0 auto; }
.cs-step-ctl:focus-within { border-color: #35d19f; }
.cs-step-ctl button { width: 28px; height: 30px; border: 0; background: transparent; color: #8fb3c7; font-size: 16px; line-height: 1; cursor: pointer; font-family: inherit; border-radius: 6px; }
.cs-step-ctl button:hover { color: #eef6fa; background: #1e3040; }
.cs-step-ctl input { width: 64px; height: 30px; border: 0; background: transparent; color: #eef6fa; font-size: 13px; font-weight: 700; text-align: right; font-family: ui-monospace, Menlo, Consolas, monospace; padding: 0 2px; -moz-appearance: textfield; }
.cs-step-ctl input::-webkit-outer-spin-button, .cs-step-ctl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cs-step-ctl input:focus { outline: none; }
.cs-step-ctl span { font-size: 11px; color: #6b8fa6; min-width: 22px; padding-left: 3px; }
.cs-switch { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: #cfe4ef; cursor: pointer; padding: 4px 0; }
.cs-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cs-switch i { flex: 0 0 38px; width: 38px; height: 22px; border-radius: 999px; background: #1e3040; border: 1px solid #2c4351; position: relative; transition: background .15s; }
.cs-switch i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #8fb3c7; transition: transform .15s, background .15s; }
.cs-switch input:checked + i { background: rgba(53,209,159,.35); border-color: #35d19f; }
.cs-switch input:checked + i::after { transform: translateX(16px); background: #35d19f; }
.cs-dz-sub { flex-direction: column; gap: 6px; padding: 6px 0 6px 10px; border-left: 2px solid #1e3040; margin-left: 2px; }
.cs-dz-ghost { background: transparent; border: 1px solid #2c4351; color: #adc0cc; padding: 7px 12px; font-size: 12px; }
.cs-dz-ghost:hover { color: #eef6fa; border-color: #3d5a6d; }
.cs-dz-more { border-top: 1px solid #1e3040; margin-top: 8px; padding-top: 8px; }
.cs-dz-more summary { cursor: pointer; font-size: 12px; font-weight: 800; color: #9fd3ea; list-style: none; display: flex; align-items: center; gap: 6px; padding: 4px 0; }
.cs-dz-more summary::-webkit-details-marker { display: none; }
.cs-dz-more summary::before { content: '›'; display: inline-block; transition: transform .15s; font-size: 16px; line-height: 1; }
.cs-dz-more[open] summary::before { transform: rotate(90deg); }
.cs-dz-more > *:not(summary) { margin-top: 8px; }
.cs-dz-more .cs-field label { font-size: 12px; }
.cs-dz-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cs-dz-export { margin-top: 12px; width: 100%; justify-content: center; }
.cs-dz-actions { margin: 6px 0 0; display: flex; gap: 8px; }
.cs-dz-actions .cs-btn { flex: 1 1 0; justify-content: center; }
@media (max-width: 980px) {
  .cs-dz-body { grid-template-columns: 1fr; }
  .cs-dz-canvas { min-height: 560px; }
  .cs-dz-view { inset: 34px 16px 160px 16px; }
  .cs-dz-horn { bottom: 166px; }
  .cs-dz-side { border-left: 0; border-top: 1px solid #1e3040; max-height: none; }
  .cs-dz-stats { grid-template-columns: repeat(2, 1fr); }
  .cs-dz-stat { border-bottom: 1px solid #1e3040; }
  .cs-dz-stat:nth-child(2n) { border-right: 0; }
  .cs-dz-stat:nth-last-child(-n+2) { border-bottom: 0; }
}

/* ── Tooling extras (v8.41): chips, finder ── */
.cs-tool-wp-status { font-size: 12px; font-weight: 700; }
.cs-tool-wp-status.ok { color: #35d19f; }
.cs-tool-wp-status.bad { color: #ff6b6b; }
.cs-tool-view-toggle { display: flex; gap: 4px; background: #0d1820; border: 1px solid #1e3040; border-radius: 8px; padding: 3px; }
.cs-tool-view-toggle button { flex: 1 1 0; background: transparent; border: 0; border-radius: 6px; color: #6b8fa6; font-size: 12px; font-weight: 700; padding: 7px 12px; cursor: pointer; font-family: inherit; white-space: nowrap; }
.cs-tool-view-toggle button.active { background: #1e3040; color: #eef6fa; }
.cs-tool-view-toggle button:hover { color: #cfe4ef; }
.cs-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.cs-chip { font-size: 11px; color: #9fd3ea; background: rgba(159,211,234,.08); border: 1px solid rgba(159,211,234,.18); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.cs-chip em { font-style: normal; color: #6b8fa6; }
.cs-chip.warn { color: #f2b661; background: rgba(242,182,97,.08); border-color: rgba(242,182,97,.3); }
.cs-finder { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 14px; }
.cs-finder .cs-field { flex: 1 1 140px; }
.cs-finder-summary { font-size: 13px; color: #cfe4ef; background: #0d1820; border: 1px solid #1e3040; border-radius: 8px; padding: 10px 14px; margin-bottom: 10px; }
.cs-finder-summary .bad { color: #ff6b6b; font-weight: 700; }
.cs-finder-h { font-size: 13px; font-weight: 800; color: #eef6fa; margin: 14px 0 8px; }
.cs-finder-row.ok { border-left: 3px solid #35d19f; }
.cs-finder-row.warn { border-left: 3px solid #f2b661; }
.cs-finder-flags { font-size: 12px !important; color: #f2b661 !important; font-weight: 700; }
.cs-finder-flags.ok { color: #35d19f !important; }
.cs-finder-results .cs-tool-main b { color: #eef6fa; }