:root{
      --primary:#2563eb;--primary-600:#2563eb;--primary-700:#1d4ed8;--primary-50:#eff6ff;
      --success:#16a34a;--danger:#dc2626;--warn:#d97706;
      --ink:#0f172a;--muted:#64748b;--bg:#f8fafc;--card:#ffffff;--border:#e2e8f0;
      --ring:rgba(37,99,235,.14);--shadow:0 10px 30px rgba(2,6,23,.08);
    }
    :root[data-theme="dark"]{
      --primary:#60a5fa; --primary-600:#3b82f6; --primary-700:#2563eb; --primary-50:#0b1220;
      --success:#22c55e; --danger:#ef4444; --warn:#f59e0b;
      --ink:#e5e7eb; --muted:#94a3b8; --bg:#0b1220; --card:#0f172a; --border:#1f2a44;
      --ring:rgba(96,165,250,.18); --shadow:0 10px 30px rgba(0,0,0,.45);
    }
    @media (prefers-color-scheme: dark){
      :root[data-theme="auto"]{
        --primary:#60a5fa; --primary-600:#3b82f6; --primary-700:#2563eb; --primary-50:#0b1220;
        --success:#22c55e; --danger:#ef4444; --warn:#f59e0b;
        --ink:#e5e7eb; --muted:#94a3b8; --bg:#0b1220; --card:#0f172a; --border:#1f2a44;
        --ring:rgba(96,165,250,.18); --shadow:0 10px 30px rgba(0,0,0,.45);
      }
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
      color:var(--ink);
      background:
        radial-gradient(1200px 600px at 20% -20%, #ecf3ff 0%, transparent 60%),
        radial-gradient(900px 500px at 100% 0%, #f3f7ff 0%, transparent 60%),
        var(--bg);
    }
    :root[data-theme="dark"] body,
    :root[data-theme="auto"] body{
      background:
        radial-gradient(1200px 600px at 20% -20%, #0f172a 0%, transparent 60%),
        radial-gradient(900px 500px at 100% 0%, #0b1220 0%, transparent 60%),
        var(--bg);
    }
    .container{max-width:1200px;margin:28px auto;padding:0 16px}
    header{
      background:var(--primary-600);color:#fff;border-radius:18px;padding:22px;box-shadow:var(--shadow);
      display:flex;align-items:center;justify-content:space-between
    }
    header h1{margin:0;font-size:26px;font-weight:800;letter-spacing:.2px}
    header .sub{opacity:.95;margin-top:6px}
    .head-right{display:flex;align-items:center;gap:12px}
    .kbd{padding:2px 6px;border:1px solid rgba(255,255,255,.55);border-bottom-width:2px;border-radius:6px;background:rgba(255,255,255,.15);font-family:'JetBrains Mono',monospace;font-size:12px;color:#fff}
    .helper{display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:#fff;user-select:none}
    #theme-select{
      padding:8px 10px;border-radius:10px;border:1px solid var(--border);background:#fff;color:var(--ink);
    }
    :root[data-theme="dark"] #theme-select,
    :root[data-theme="auto"] #theme-select{ background:var(--card); color:var(--ink); border-color:var(--border); }
    .grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
    .card{
      background:var(--card);border:1px solid var(--border);border-radius:18px;padding:18px;
      box-shadow:var(--shadow);min-width:0
    }
    .card h2{margin:0 0 12px;font-size:18px;color:#1d4ed8}
    :root[data-theme="dark"] .card h2,
    :root[data-theme="auto"] .card h2{ color:#93c5fd }
    label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
    input,select,textarea{
      width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:12px;background:#fff;font-size:14px;
      transition:border-color .15s,box-shadow .15s
    }
    :root[data-theme="dark"] input,
    :root[data-theme="dark"] select,
    :root[data-theme="dark"] textarea,
    :root[data-theme="auto"] input,
    :root[data-theme="auto"] select,
    :root[data-theme="auto"] textarea{
      background:var(--card); color:var(--ink); border-color:var(--border);
    }
    input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary-600);box-shadow:0 0 0 4px var(--ring)}
    .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
    .row-4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px}
    .muted{color:var(--muted);font-size:12px}
    .tabs{display:flex;margin-top:16px;gap:8px; role="tablist"}
    .tab{
      flex:1;text-align:center;padding:10px 12px;font-weight:700;cursor:pointer;
      border-radius:999px;border:1px solid var(--primary-600);
      color:var(--primary-600);background:#fff;user-select:none;transition:all .15s ease
    }
    .tab:hover{filter:brightness(1.02)}
    .tab.active{background:var(--primary-600);color:#fff}
    .pane{display:none;margin-top:12px}.pane.active{display:block}
    .btn{
      background:var(--primary-600);color:#fff;border:none;border-radius:12px;padding:12px 16px;font-weight:700;cursor:pointer;
      transition:transform .06s,filter .15s
    }
    .btn:hover{filter:brightness(1.03)}
    .btn:active{transform:translateY(1px)}
    .btn.secondary{ background:transparent; color:var(--primary-600); border:1px solid var(--primary-600); }
    .list{max-height:300px;overflow:auto;border:1px solid var(--border);border-radius:14px;background:#fff}
    :root[data-theme="dark"] .list,
    :root[data-theme="auto"] .list{ background:var(--card) }
    .item{display:flex;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border)}
    .item:last-child{border-bottom:none}
    .ok{color:var(--success);font-weight:700}
    .err{color:var(--danger);font-weight:600}
    .grid-ports{display:grid;grid-template-columns:repeat(24,1fr);gap:6px}
    .port{height:30px;border:1.5px solid var(--border);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:12px;background:#fff;user-select:none;cursor:pointer;transition:background .12s,border-color .12s,color .12s}
    :root[data-theme="dark"] .port,
    :root[data-theme="auto"] .port{ background:var(--card); color:var(--ink); }
    .port:hover{border-color:#cbd5e1}
    :root[data-theme="dark"] .port:hover,
    :root[data-theme="auto"] .port:hover{ border-color:#334155 }
    .port.sel{background:var(--primary-50);border-color:var(--primary-600);color:#0b3aa3;box-shadow:0 0 0 3px var(--ring) inset;font-weight:700}
    :root[data-theme="dark"] .port.sel,
    :root[data-theme="auto"] .port.sel{ color:#dbeafe }
    #sw-ports{grid-template-rows:repeat(2,1fr)}
    .pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);padding:4px 10px;border-radius:999px;font-size:12px;background:#fff}
    :root[data-theme="dark"] .pill,
    :root[data-theme="auto"] .pill{ background:var(--card); color:var(--ink) }
    .pill.badge{background:#eef2ff;border-color:#dbeafe;color:#1d4ed8;font-weight:700}
    :root[data-theme="dark"] .pill.badge,
    :root[data-theme="auto"] .pill.badge{ background:#1e293b; border-color:#334155; color:#93c5fd }
    .result-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:12px}
    .metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
    .metric{border:1px solid var(--border);border-radius:14px;padding:10px;background:#fff}
    :root[data-theme="dark"] .metric,
    :root[data-theme="auto"] .metric{ background:var(--card) }
    .metric .label{font-size:12px;color:#64748b}
    .metric .value{font-size:18px;font-weight:800;margin-top:4px}
    .break{border-top:1px dashed var(--border);margin:10px 0}
    .kv{display:grid;grid-template-columns:1fr auto;gap:8px;font-size:14px}
    .kv .k{color:#64748b}
    .chips{display:flex;flex-wrap:wrap;gap:8px}
    .chip{border:1px solid var(--border);border-radius:999px;padding:6px 10px;background:#fff;font-size:13px}
    :root[data-theme="dark"] .chip,
    :root[data-theme="auto"] .chip{ background:var(--card); color:var(--ink) }
    table{width:100%;border-collapse:collapse;margin-top:8px}
    th,td{border:1px solid var(--border);padding:8px 10px;text-align:left}
    th{background:#f8fafc;color:#334155}
    :root[data-theme="dark"] th,
    :root[data-theme="auto"] th{ background:#0b1220; color:#cbd5e1 }
    details summary{cursor:pointer;font-weight:700;color:#0b1220;margin:8px 0}
    :root[data-theme="dark"] details summary,
    :root[data-theme="auto"] details summary{ color:#e5e7eb }
    .viz-wrap{margin-top:10px;border:1px solid var(--border);border-radius:16px;background:#fff}
    :root[data-theme="dark"] .viz-wrap,
    :root[data-theme="auto"] .viz-wrap{ background:var(--card) }
    .viz-wrap svg{width:100%;height:520px;display:block;background:linear-gradient(#fbfdff,#f6f9ff)}
    :root[data-theme="dark"] .viz-wrap svg,
    :root[data-theme="auto"] .viz-wrap svg{ background:linear-gradient(#0b1220,#0f172a) }
    .rack{stroke:#000;fill:#fff}.ru-line{stroke:#000;stroke-width:2;opacity:.75}.panel-slot{stroke:#000;fill:#fff}
    .path{fill:none;stroke:#dc2626;stroke-width:6;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(220,38,38,.35))}
    .viz-legend{display:flex;gap:12px;align-items:center;margin-top:8px;color:var(--muted);font-size:12px}
    .viz-legend .kline{width:28px;height:3px;background:#dc2626;border-radius:2px}
    .viz-legend .krect{width:26px;height:14px;border:2px solid #000;background:#fff}
    .help-modal{
      position:fixed;inset:0;display:none;align-items:center;justify-content:center;
      background:rgba(2,6,23,.45);z-index:50;padding:16px
    }
    .help-content{
      width:min(720px,95vw);background:var(--card);border-radius:16px;border:1px solid var(--border);
      box-shadow:var(--shadow);padding:20px;color:var(--ink)
    }
    .help-close{
      margin-top:12px;display:inline-block;background:var(--primary-600);color:#fff;border-radius:10px;
      padding:8px 12px;font-weight:700;cursor:pointer;user-select:none
    }
    @media (max-width:1000px){
      .grid{grid-template-columns:1fr}
      .result-grid{grid-template-columns:1fr}
    }
    .visually-hidden{
      position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
    }
    /* Assumptions layout polish */
    .assump-topbar{
      display:flex; align-items:center; justify-content:space-between; gap:12px; margin:6px 0 10px 0; flex-wrap:wrap;
    }
    .assump-topbar .group{ display:flex; align-items:center; gap:8px; }
    .assump-grid{
      display:grid; grid-template-columns:repeat(2, minmax(220px, 1fr)); gap:12px;
      padding:8px; border:1px dashed var(--border); border-radius:12px; background:var(--card);
    }
    @media (max-width:720px){ .assump-grid{ grid-template-columns:1fr; } }
    .assump-item{ display:flex; flex-direction:column; gap:6px; }
    .assump-item label{ font-size:12px; color:var(--muted); }
    .assump-item .valwrap{ display:flex; align-items:center; gap:8px; }
    .assump-item input{ flex:1; }
    .assump-item .unit{ font-size:12px; color:var(--muted); min-width:18px; text-align:right; }
    details.assump-fold summary{
      cursor:pointer; font-weight:700; padding:8px 10px; border:1px solid var(--border);
      border-radius:10px; user-select:none; background:var(--card);
    }
    details.assump-fold[open] summary{ border-bottom-left-radius:0; border-bottom-right-radius:0; }
    details.assump-fold .assump-body{ border:1px solid var(--border); border-top:none; border-bottom-left-radius:12px; border-bottom-right-radius:12px; padding:10px; }
  .total-row td{ border-top:1px solid var(--border,#e5e7eb); background: var(--bg,#fafafa); }
  .bulk-mini-summary{ margin:10px 0 6px; padding:10px 12px; border-radius:10px; background:rgba(148,163,184,.12); }
  .bulk-mini-summary strong{ display:block; margin-bottom:6px; font-size:14px; }
  .bulk-mini-summary .line{ color:#cbd5e1; font-size:13px; }
  .bulk-err code{ font-size:12px; color:#93c5fd; }
/* Segmented control for Switch mode */
.switch-seg{display:flex; gap:8px; margin:4px 0 2px; align-items:center}
.switch-seg .seg{position:relative; display:inline-flex; flex:1; justify-content:center; align-items:center; gap:8px;
  padding:10px 12px; border:1.5px solid var(--primary-600); border-radius:999px; cursor:pointer; user-select:none;
  color:var(--primary-600); background:var(--card); font-weight:700; transition:all .15s ease;}
.switch-seg .seg input{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; margin:0}
.switch-seg .seg span{pointer-events:none}
.switch-seg .seg:has(input:checked){ background:var(--primary-600); color:#fff; box-shadow:0 0 0 4px var(--ring); }
.switch-seg .seg:focus-within{ outline:none; box-shadow:0 0 0 4px var(--ring); }
/* Tighten unit alignment in Slack row */
#slack-percent-wrap, #slack-fixed-wrap{ display:inline-flex; align-items:center; gap:6px; }
/* Bulk input area should feel full-width and spacious */
#pane-bulk .card #bulk-text{ width:100%; min-height:180px; resize:vertical; }
#pane-bulk .muted{ margin-top:4px !important; }
/* Make bulk textarea span full section width */
#pane-bulk #bulk-text{ grid-column: 1 / -1 !important; width:100%; }
/* Keep the two bulk select boxes inline and top-aligned */
#pane-bulk .row{align-items:flex-start;}
#bulk-pp-side, #bulk-sw-side{ min-height:44px; }
.slack-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.field-label{font-weight:600;display:block;margin-bottom:6px}
.unit{opacity:.7}
  .total-row td{ border-top:1px solid var(--border,#e5e7eb); background: var(--bg,#fafafa); }
  .bulk-mini-summary{ margin:10px 0 6px; padding:10px 12px; border-radius:10px; background:rgba(148,163,184,.12); }
  .bulk-mini-summary strong{ display:block; margin-bottom:6px; font-size:14px; }
  .bulk-mini-summary .line{ color:#cbd5e1; font-size:13px; }
  .bulk-err code{ font-size:12px; color:#93c5fd; }
/* === Visibility upgrade for Recommended lengths === */
.reco-chip{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  background: #e0f2fe;
  border:1px solid #93c5fd;
  font-weight:800;
}
#reco-summary-sticky{
  position:sticky; top:0; z-index:10;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  margin:8px 0;
  box-shadow:var(--shadow);
}
#reco-summary-sticky .badge{
  display:inline-block; margin:6px 6px 0 0; padding:8px 12px;
  border-radius:999px; border:1px solid var(--border); background:transparent;
  font-weight:500;
}
/* higher-contrast labels */
.rack-label { font: 12px/1.2 system-ui, sans-serif; fill:#000; text-anchor: middle; }
.pill {
  font: 12px/1.2 system-ui, sans-serif;
  fill: #11161a;
  stroke: #000;
  stroke-opacity: .15;
  stroke-width: 0.5;
}
.pill text { fill: #000; }                 /* black text for readability */
.pill-bg { fill: #f1f5f9; opacity: 0.98; } /* lighter pill background */
.leader { stroke:#83c5ff; stroke-width:1.2; stroke-dasharray:3 3; fill:none; }
#viz-zoom-hint { font: 11px/1 system-ui, sans-serif; fill:#90a4ae; }
/* bulk table: green highlight for recommended stock values */
.reco-chip {
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  background:#e8f8ee;
  color:#12823a;
  font-weight:600;
  font-size:12px;
  border:1px solid #c8ebd4;
}
#bulk-route-caption {
  margin-top:10px;
  font: 13px/1.35 system-ui, sans-serif;
  color:#607d8b;
}
/* Bulk Route Preview host (below bulk area) */
#bulk-viz-host {
  margin-top:16px;
  padding:12px;
  border:1px solid #e2e8f0;
  border-radius:10px;
  background:#fafbfc;
}
#bulk-viz-host h3{
  margin:0 0 8px 0;
  font: 600 14px/1.2 system-ui, sans-serif;
  color:#111827;
}
#viz-bulk { width:100%; height:660px; display:block; }
#viz-caption-bulk { margin-top:6px; font: 12px/1.35 system-ui, sans-serif; color:#374151; }
.total-row td{ border-top:1px solid var(--border,#e5e7eb); background: var(--bg,#fafafa); }
.bulk-mini-summary{ margin:10px 0 6px; padding:10px 12px; border-radius:10px; background:rgba(148,163,184,.12); }
.bulk-mini-summary strong{ display:block; margin-bottom:6px; font-size:14px; }
.bulk-mini-summary .line{ color:#cbd5e1; font-size:13px; }
.bulk-err code{ font-size:12px; color:#93c5fd; }
/* Hide focus outlines when navigating with mouse (kept for keyboard nav) */
body.using-mouse :focus { outline: none; }
/* VLAN dropdown styles */
#vlan-dropdown .vlan-body { display: none; }
#vlan-dropdown[open] .vlan-body { display: block; }
#vlan-dropdown summary { cursor: pointer; font-weight: 700; margin-bottom: 6px; list-style: none; }
#vlan-dropdown summary::-webkit-details-marker { display:none; }
#vlan-dropdown summary:after { content: '▸'; margin-left: 8px; font-weight: 400; }
#vlan-dropdown[open] summary:after { content: '▾'; }
/* Dual-line badges: meters on top, feet on bottom */
#reco-summary-sticky .badge-dual{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  padding:8px 12px; border-radius:999px; border:1px solid var(--border); background:var(--card);
  box-shadow:var(--shadow); min-width:110px; text-align:center; margin-right:8px;
}
#reco-summary-sticky .badge-dual .top{ line-height:1.1; }
#reco-summary-sticky .badge-dual .bottom{ line-height:1.1; font-size:.85em; opacity:.9; }
/* Single-line badge style for recommended summary */
#reco-summary-sticky .badge{
  display:inline-block; margin:6px 6px 0 0; padding:8px 12px;
  border-radius:999px; border:1px solid var(--border); background:transparent;
  font-weight:500;
}
/* Screenshot-matched single-line pills */
#reco-summary-sticky .badge{
  display:inline-block;
  padding:6px 14px;
  margin:6px 8px 0 0;
  border-radius:999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  font-weight:600;
  letter-spacing: .1px;
  line-height:1;
}
/* Patching Assigner specific */
.switch-group {
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.switch-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.chassis-fields {
  display: none;
  margin-bottom: 8px;
}
.vlan-list {
  display: grid;
  gap: 8px;
}
.vlan-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.vlan-item input {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
}
pre {
  background: #f1f5f9;
  padding: 14px;
  border-radius: 12px;
  overflow-x: auto;
  margin-top: 12px;
  white-space: pre-wrap;
  font-family: monospace;
  font-size: 14px;
}
.actions {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

    /* DCIM cabinet tool sub-tabs + result blocks */
    .tab-btn{
      padding:6px 10px;
      border-radius:999px;
      border:1px solid var(--border);
      background:var(--card);
      color:var(--ink);
      cursor:pointer;
      font-size:12px;
      margin-right:6px;
      transition:background .12s,border-color .12s,color .12s;
    }
    .tab-btn.active{
      background:var(--primary-600);
      border-color:var(--primary-600);
      color:#fff;
    }
    .tab-pane{ display:none; margin-top:8px; }
    .tab-pane.active{ display:block; }
    .color-select{ max-width:160px; }
    .rack-summary{ margin-top:8px; }
    .rack-block{
      border:1px solid var(--border);
      border-radius:12px;
      padding:8px 10px;
      margin:6px 0;
      background:var(--card);
    }
    .rack-block h4{ margin:0 0 4px;font-size:13px; }
    .rack-block ul{ margin:0 0 0 16px;padding:0; }
    .rack-block li{ margin:2px 0;font-size:12px; }
    .formula-block{
      margin-top:8px;
      padding:8px 10px;
      border-radius:10px;
      border:1px dashed var(--border);
      font-family:ui-monospace,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
      font-size:11px;
      white-space:pre-wrap;
    }
    #downloadCsvBtn[disabled]{ opacity:0.5; cursor:not-allowed; }


/* ---- Split from index.html ---- */


/* Match cards using theme variables */
#assigner-output{
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  line-height: 1.45;
}
.table-wrap{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: auto;
}
#results-table{
  color: var(--ink);
  width: 100%;
}
#results-table th{
  color: var(--ink);
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
#results-table td{
  border-top: 1px solid var(--border);
}