/* ═══════════════════════════════════════════════════════════════
   CIDR LAB — Light theme · Mobile-first · Embedded widget
   SEBERD-TOOL-GUIDE v2.0
═══════════════════════════════════════════════════════════════ */

/* No remote font fetching (premium theme requirement) */
/* ─── Tokens ─── */
:root {
  --bg:    #f1f5f9;
  --surf:  #ffffff;
  --surf2: #f8fafc;
  --surf3: #f1f5f9;
  --brd:   #e2e8f0;
  --brd2:  #cbd5e1;

  --ink:   #0f172a;
  --ink2:  #1e293b;
  --ink3:  #334155;
  --mid:   #64748b;
  --muted: #94a3b8;
  --dim:   #c8d8e8;

  --ac:    #111111;
  --ac2:   #333333;
  --acg:   rgba(14,165,233,.12);
  --acg2:  rgba(14,165,233,.06);
  --acb:   rgba(14,165,233,.22);

  --vc:    #8b5cf6;
  --green: #059669;
  --greeng: rgba(5,150,105,.1);
  --red:   #e11d48;
  --redg:  rgba(225,29,72,.09);
  --orange:#d97706;
  --orangeg:rgba(217,119,6,.1);

  /* Fallbacks without relying on remote @font-face */
  --ff:  system-ui, sans-serif;
  --ffm: ui-monospace, monospace;
  --ffd: var(--ff);

  --fxs: clamp(10px, 2.6vw, 13px);
  --fsm: clamp(11px, 2.8vw, 14px);
  --fb:  clamp(12px, 3vw,   15px);
  --flg: clamp(15px, 3.8vw, 20px);
  --fxl: clamp(18px, 4.5vw, 28px);

  --sp1: clamp(4px,  1vw,   5px);
  --sp2: clamp(7px,  1.8vw, 10px);
  --sp3: clamp(10px, 2.5vw, 14px);
  --sp4: clamp(13px, 3.2vw, 18px);

  --rad:  8px;
  --rad2: 5px;
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: var(--ff);
  font-size: var(--fb);
  color: var(--ink3);
  background: var(--bg);
}

input, textarea, select, button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  -webkit-appearance: none;
  appearance: none;
}

/* ─── Widget ─── */
.lab {
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surf);
  border: 1px solid var(--brd);
  overflow: hidden;
}

/* Desktop: fits in page, no scroll */
@media (min-width: 700px) {
  .lab {
    height: clamp(540px, calc(100vh - 220px), 780px);
    border-radius: 12px;
  }
}

/* Mobile: full natural height */
@media (max-width: 699px) {
  .lab { border-radius: 0; border-left: none; border-right: none; }
}

/* ─── Topbar ─── */
.lab-top {
  flex-shrink: 0;
  height: clamp(48px, 7vw, 56px);
  display: flex;
  align-items: center;
  gap: var(--sp2);
  padding: 0 var(--sp4);
  background: var(--surf);
  border-bottom: 1px solid var(--brd);
  position: sticky;
  top: 0;
  z-index: 20;
}

.lab-brand { display: flex; align-items: center; gap: var(--sp2); flex-shrink: 0; }

.brand-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ac);
  box-shadow: 0 0 0 3px var(--acg);
  animation: dot-pulse 2.5s ease-in-out infinite;
}

@keyframes dot-pulse {
  0%,100% { box-shadow: 0 0 0 4px var(--acg); }
  50%     { box-shadow: 0 0 0 1px var(--acg); }
}

.brand-name {
  font-family: var(--ffd); font-size: var(--flg); font-weight: 800;
  color: var(--ink); letter-spacing: -.03em; line-height: 1; white-space: nowrap;
}
.brand-name em { font-style: normal; color: var(--ac); }

.lab-nav {
  display: flex; gap: 2px; margin: 0 auto;
  background: var(--surf3); border: 1px solid var(--brd);
  border-radius: 10px; padding: 3px;
}

.nav-btn {
  display: inline-flex; align-items: center; gap: var(--sp1);
  background: transparent; border: none; border-radius: 7px;
  color: var(--mid); font-family: var(--ff); font-size: var(--fsm);
  font-weight: 500; padding: var(--sp1) var(--sp2);
  cursor: pointer; transition: all .14s; white-space: nowrap;
  user-select: none; min-height: 32px;
}
.nav-btn:hover { color: var(--ink); }
.nav-btn.active {
  background: var(--ac); color: #fff; font-weight: 700;
  box-shadow: 0 2px 8px rgba(14,165,233,.3);
}

.lab-badge {
  font-size: var(--fxs); font-family: var(--ffm); color: var(--muted);
  border: 1px solid var(--brd); padding: 2px 8px; border-radius: 20px;
  background: var(--surf3); flex-shrink: 0; white-space: nowrap; display: none;
}
@media (min-width: 700px) { .lab-badge { display: inline; } }

/* ─── Stage ─── */
.lab-stage {
  flex: 1; min-height: 0; position: relative; overflow: hidden;
}

/* Mobile: panels scroll */
@media (max-width: 699px) {
  .lab-stage {
    height: calc(100dvh - clamp(48px,7vw,56px) - clamp(30px,4.5vh,40px));
    min-height: 460px;
  }
}

/* ─── Panels ─── */
.lab-panel {
  position: absolute; inset: 0; overflow: hidden;
  display: flex; flex-direction: column;
}

@media (max-width: 699px) {
  .lab-panel { overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* ════════════════════════════════════════
   PANEL: CALC
════════════════════════════════════════ */
.calc-layout {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: clamp(240px, 30vw, 360px) 1fr;
  gap: var(--sp3); padding: var(--sp3) var(--sp4); overflow: hidden;
}

@media (max-width: 699px) {
  .calc-layout {
    grid-template-columns: 1fr;
    height: auto; overflow: visible; padding-bottom: 20px;
  }
}

.calc-left {
  display: flex; flex-direction: column; gap: var(--sp3);
  overflow-y: auto; overflow-x: hidden; min-height: 0;
}
.calc-left::-webkit-scrollbar { width: 3px; }
.calc-left::-webkit-scrollbar-thumb { background: var(--brd2); border-radius: 2px; }

.calc-right {
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}

@media (max-width: 699px) {
  .calc-left, .calc-right { min-height: auto; overflow: visible; }
}

/* ─── Input block ─── */
.input-block { display: flex; flex-direction: column; gap: var(--sp1); flex-shrink: 0; }

.field-lbl {
  font-family: var(--ffm); font-size: var(--fxs); text-transform: uppercase;
  letter-spacing: .1em; color: var(--mid); display: block; font-weight: 600;
}
.field-note {
  color: var(--muted); font-family: var(--ff); text-transform: none;
  letter-spacing: 0; font-size: var(--fxs); font-weight: 400;
}

.input-row { display: flex; gap: var(--sp2); align-items: stretch; }

.main-input {
  flex: 1; min-width: 0; display: block;
  background: var(--surf2); color: var(--ink);
  caret-color: var(--ac);
  border: 1.5px solid var(--brd); border-radius: var(--rad); outline: none;
  font-family: var(--ffm); font-size: var(--fb); font-weight: 400; line-height: 1.5;
  padding: var(--sp2) var(--sp3);
  transition: border-color .15s, box-shadow .15s, background .15s;
  min-height: 40px;
}
.main-input:hover:not(:focus) { border-color: var(--brd2); background: var(--surf); }
.main-input:focus {
  border-color: var(--ac); background: var(--surf);
  box-shadow: 0 0 0 3px var(--acg);
}
.main-input::placeholder { color: var(--dim); font-style: italic; }

/* Autofill override */
.main-input:-webkit-autofill,
.main-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--surf2) inset;
}

.err-line {
  font-size: var(--fsm); font-family: var(--ffm);
  color: var(--red); min-height: 1em;
}
.err-line:not(:empty)::before { content: '⚠ '; }

/* ─── Prefix picker ─── */
.pfx-block { flex-shrink: 0; display: flex; flex-direction: column; gap: var(--sp1); }
.pfx-grid  { display: flex; flex-wrap: wrap; gap: clamp(3px,.3vw,5px); }

.pfx-btn {
  border: 1.5px solid var(--brd); background: var(--surf2); color: var(--mid);
  font-family: var(--ffm); font-size: var(--fxs);
  padding: clamp(3px,.3vw,5px) clamp(7px,.7vw,11px);
  border-radius: var(--rad2); cursor: pointer;
  transition: all .12s; min-height: 28px;
}
.pfx-btn:hover { border-color: var(--ac); color: var(--ac2); background: var(--acg2); }
.pfx-btn.active {
  background: var(--ac); border-color: var(--ac2); color: #fff; font-weight: 600;
}

/* ─── Example chips ─── */
.ex-block { flex-shrink: 0; display: flex; flex-direction: column; gap: var(--sp1); }
.ex-row   { display: flex; flex-wrap: wrap; gap: clamp(3px,.3vw,5px); }

.chip {
  border: 1.5px solid var(--brd); background: var(--surf2); color: var(--mid);
  font-family: var(--ffm); font-size: var(--fxs);
  padding: clamp(3px,.3vw,4px) clamp(7px,.7vw,10px);
  border-radius: 4px; cursor: pointer; transition: all .12s;
  white-space: nowrap; min-height: 28px; display: inline-flex; align-items: center;
}
.chip:hover { border-color: var(--ac); color: var(--ac2); background: var(--acg2); }

/* ─── Bit map block ─── */
#bmap-block { flex-shrink: 0; display: flex; flex-direction: column; gap: var(--sp1); }

/* ─── Result placeholder ─── */
.result-placeholder {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--sp2); text-align: center; color: var(--muted);
  padding: var(--sp4);
}
.ph-ico   { font-size: var(--fxl); line-height: 1; }
.ph-title { font-family: var(--ffd); font-size: var(--flg); font-weight: 700; color: var(--mid); }
.ph-sub   { font-size: var(--fsm); }
.ph-sub code { font-family: var(--ffm); color: var(--ac2); }
.ph-hint  {
  font-size: var(--fxs); color: var(--muted); line-height: 1.6;
  background: var(--surf2); border: 1px solid var(--brd); border-radius: var(--rad);
  padding: var(--sp2) var(--sp3); max-width: 280px;
}

/* ─── Result container ─── */
#result-container {
  flex: 1; min-height: 0; overflow-y: auto;
  padding-right: 3px; scrollbar-gutter: stable;
}
#result-container::-webkit-scrollbar { width: 3px; }
#result-container::-webkit-scrollbar-thumb { background: var(--brd2); border-radius: 2px; }

/* ─── Plain language summary ─── */
.plain-summary {
  background: var(--acg2); border: 1.5px solid var(--acb);
  border-radius: var(--rad); padding: var(--sp2) var(--sp3);
  margin-bottom: var(--sp2); flex-shrink: 0;
}
.plain-summary p {
  font-size: var(--fsm); color: var(--ink2); line-height: 1.65;
}
.plain-summary strong { color: var(--ac2); }

/* ─── Result grid ─── */
.result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(4px,.4vw,7px);
  margin-bottom: var(--sp2);
}

.rc {
  background: var(--surf2); border: 1.5px solid var(--brd);
  border-radius: var(--rad2); padding: var(--sp2) var(--sp3);
  transition: border-color .15s, box-shadow .15s;
  cursor: pointer; position: relative;
}
.rc:hover {
  border-color: var(--ac); box-shadow: 0 2px 8px var(--acg);
}
/* copy hint on hover */
.rc::after {
  content: 'копировать';
  position: absolute; top: var(--sp1); right: var(--sp2);
  font-size: 9px; font-family: var(--ffm); color: var(--ac2);
  opacity: 0; transition: opacity .12s; text-transform: uppercase;
  letter-spacing: .06em; pointer-events: none;
}
.rc:hover::after { opacity: 1; }

.rc-accent {
  background: var(--acg2); border-color: var(--acb); grid-column: span 2;
}
.rc-big   { background: var(--greeng); border-color: rgba(5,150,105,.2); }
.rc-priv  { background: var(--orangeg); border-color: rgba(217,119,6,.2); }

.rc-lbl {
  font-family: var(--ffm); font-size: var(--fxs); text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted); margin-bottom: 2px; line-height: 1.3;
}
.rc-val {
  font-family: var(--ffm); font-size: var(--flg); font-weight: 600;
  color: var(--ink); line-height: 1.2; word-break: break-all;
}
.rc-accent .rc-val { color: var(--ac2); font-size: var(--fxl); }
.rc-big    .rc-val { color: var(--green); }
.rc-priv   .rc-val { color: var(--orange); }

.rc-tag-priv { color: var(--orange) !important; }
.rc-tag-pub  { color: var(--green)  !important; }

.rc-hint {
  font-size: var(--fxs); color: var(--mid);
  margin-top: 3px; line-height: 1.45;
}

/* ─── Bit map ─── */
.bmap-wrap {
  background: var(--surf2); border: 1.5px solid var(--brd);
  border-radius: var(--rad); padding: var(--sp2) var(--sp3);
}
.bmap-hdr {
  display: flex; justify-content: space-between;
  font-size: var(--fxs); margin-bottom: var(--sp1);
}
.bmap-hdr-net  { color: var(--ac2); font-family: var(--ffm); font-weight: 600; }
.bmap-hdr-host { color: var(--orange); font-family: var(--ffm); font-weight: 600; }

.bmap-row {
  display: flex; align-items: center; flex-wrap: nowrap; overflow-x: auto;
}
.bmap-row::-webkit-scrollbar { height: 2px; }
.bmap-row::-webkit-scrollbar-thumb { background: var(--brd2); }

.bmap-sep {
  width: clamp(2px,.2vw,3px); height: clamp(18px,2vw,26px);
  background: var(--brd2); flex-shrink: 0; margin: 0 clamp(1px,.1vw,2px);
}
.bmap-bit {
  width: clamp(12px,1.2vw,17px); height: clamp(16px,1.6vw,22px);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ffm); font-size: var(--fxs); font-weight: 600;
  border-radius: 2px; cursor: default; transition: all .1s; flex-shrink: 0;
}
.bmap-bit-net {
  background: rgba(14,165,233,.12); color: var(--ac2);
  border: 1px solid rgba(14,165,233,.25);
}
.bmap-bit-host {
  background: rgba(217,119,6,.1); color: var(--orange);
  border: 1px solid rgba(217,119,6,.2);
}

/* Octet labels */
.bmap-octets {
  display: flex; font-family: var(--ffm); font-size: var(--fxs);
  color: var(--muted); margin-top: 2px;
}
.bmap-octet-lbl {
  text-align: center; flex: 0 0 calc(8 * clamp(12px,1.2vw,17px) + 7px);
}

.bmap-table { margin-top: var(--sp2); display: flex; flex-direction: column; gap: 2px; }
.bmap-tr { display: flex; align-items: center; gap: var(--sp2); font-size: var(--fxs); font-family: var(--ffm); }
.bmap-td-lbl { color: var(--muted); min-width: clamp(60px,6vw,90px); flex-shrink: 0; }
.bmap-td-val { color: var(--ink2); letter-spacing: .04em; }

/* ─── Range bar ─── */
.rbar {
  display: flex; height: clamp(10px,1.2vh,16px);
  border-radius: var(--rad2); overflow: hidden;
  border: 1px solid var(--brd);
}
.rbar-seg { display: flex; align-items: center; justify-content: center; }
.rbar-seg-net   { background: var(--ac); flex: 0 0 clamp(5px,.5vw,8px); }
.rbar-seg-host  {
  background: linear-gradient(90deg, var(--greeng), rgba(5,150,105,.04));
  flex: 1;
}
.rbar-seg-host .rbar-seg-lbl { font-family: var(--ffm); font-size: var(--fxs); color: var(--green); }
.rbar-seg-bcast { background: var(--orange); flex: 0 0 clamp(5px,.5vw,8px); }
.rbar-lbls {
  display: flex; justify-content: space-between;
  font-size: var(--fxs); font-family: var(--ffm); color: var(--muted); margin-top: 2px;
}

/* ════════════════════════════════════════
   PANEL: SPLIT
════════════════════════════════════════ */
.split-layout {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: clamp(220px, 26vw, 310px) 1fr;
  gap: var(--sp3); padding: var(--sp3) var(--sp4); overflow: hidden;
}

@media (max-width: 699px) {
  .split-layout { grid-template-columns: 1fr; height: auto; overflow: visible; padding-bottom: 20px; }
}

.split-ctrl {
  display: flex; flex-direction: column; gap: var(--sp3);
  background: var(--surf2); border: 1.5px solid var(--brd);
  border-radius: var(--rad); padding: var(--sp3); overflow: hidden;
}
@media (max-width: 699px) { .split-ctrl { overflow: visible; } }

.split-explain {
  background: var(--surf); border: 1px solid var(--brd);
  border-radius: var(--rad2); padding: var(--sp2) var(--sp3);
}
.split-explain p { font-size: var(--fsm); color: var(--mid); line-height: 1.6; }

.prefix-row { display: flex; align-items: center; gap: var(--sp2); }
.prefix-slash {
  font-family: var(--ffm); font-size: var(--flg); color: var(--ac2);
  font-weight: 700; line-height: 1; flex-shrink: 0;
}

.prefix-input {
  width: clamp(60px,6vw,90px);
  background: var(--surf); color: var(--ink);
  caret-color: var(--ac);
  border: 1.5px solid var(--brd); border-radius: var(--rad2); outline: none;
  font-family: var(--ffm); font-size: var(--flg); font-weight: 700;
  padding: var(--sp1) var(--sp2); text-align: center;
  -moz-appearance: textfield;
  transition: border-color .15s;
  min-height: 40px;
}
.prefix-input::-webkit-inner-spin-button,
.prefix-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.prefix-input:focus { border-color: var(--ac); box-shadow: 0 0 0 3px var(--acg); }

.slider-block { flex-shrink: 0; display: flex; flex-direction: column; gap: var(--sp1); }

.pfx-slider {
  width: 100%; height: 4px; -webkit-appearance: none; appearance: none;
  background: var(--brd); border-radius: 2px; outline: none; cursor: pointer;
}
.pfx-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: clamp(16px,1.6vw,20px); height: clamp(16px,1.6vw,20px);
  border-radius: 50%; background: var(--ac);
  box-shadow: 0 2px 6px rgba(14,165,233,.35);
  cursor: pointer; transition: box-shadow .15s;
}
.pfx-slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ac); border: none; cursor: pointer;
}
.pfx-slider::-webkit-slider-thumb:hover { box-shadow: 0 2px 12px rgba(14,165,233,.5); }
.slider-labels {
  display: flex; justify-content: space-between;
  font-size: var(--fxs); font-family: var(--ffm); color: var(--muted);
}

.split-preview {
  background: var(--surf); border: 1.5px solid var(--brd);
  border-radius: var(--rad2); padding: var(--sp2) var(--sp3);
  display: flex; flex-direction: column; gap: var(--sp1);
}
.sp-row    { display: flex; justify-content: space-between; align-items: center; }
.sp-lbl    { font-size: var(--fsm); color: var(--mid); }
.sp-val    { font-family: var(--ffm); font-size: var(--flg); font-weight: 700; color: var(--ac2); }
.sp-divider { height: 1px; background: var(--brd); }

/* Subnet bars visualization */
.split-bars {
  flex-shrink: 0; margin-bottom: var(--sp2);
}
.split-bars-title {
  font-family: var(--ffm); font-size: var(--fxs); text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); margin-bottom: var(--sp1);
}
.split-bars-row {
  display: flex; height: 20px; border-radius: var(--rad2);
  overflow: hidden; border: 1px solid var(--brd); gap: 1px;
  background: var(--brd);
}
.split-bar-seg {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-family: var(--ffm); font-size: 9px; font-weight: 600;
  transition: opacity .12s;
  min-width: 2px;
}
.split-bar-seg:hover { opacity: .75; }

.split-result { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
@media (max-width: 699px) { .split-result { min-height: 300px; overflow: visible; } }

#split-table-wrap {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--sp2);
  scrollbar-gutter: stable;
}
#split-table-wrap::-webkit-scrollbar { width: 3px; }
#split-table-wrap::-webkit-scrollbar-thumb { background: var(--brd2); border-radius: 2px; }

.split-info { font-size: var(--fsm); color: var(--ink2); flex-shrink: 0; padding-bottom: var(--sp1); border-bottom: 1px solid var(--brd); }
.si-orig    { font-family: var(--ffm); color: var(--ink2); font-weight: 600; }
.si-count   { font-family: var(--ffm); color: var(--ac2); font-weight: 700; }
.si-warn    { color: var(--orange); font-size: var(--fxs); }

/* Subnet table */
.stbl { display: flex; flex-direction: column; }
.stbl-hdr, .stbl-row {
  display: grid;
  grid-template-columns: clamp(24px,2.5vw,36px) 1fr 1fr 1fr 1fr clamp(50px,5vw,70px);
}
.stbl-hdr {
  position: sticky; top: 0; background: var(--surf3); z-index: 1;
}
.stbl-th {
  font-family: var(--ffm); font-size: var(--fxs); text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); padding: var(--sp1) var(--sp2);
  border-bottom: 1.5px solid var(--brd);
}
.stbl-td {
  font-family: var(--ffm); font-size: var(--fsm); color: var(--ink2);
  padding: var(--sp1) var(--sp2); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; border-bottom: 1px solid var(--brd);
}
.stbl-td-net  { color: var(--ac2); font-weight: 600; }
.stbl-row-alt { background: rgba(14,165,233,.025); }
.stbl-row:hover { background: var(--acg2); }

/* ════════════════════════════════════════
   PANEL: REF
════════════════════════════════════════ */
.ref-layout {
  flex: 1; min-height: 0; padding: var(--sp3) var(--sp4);
  overflow: hidden; display: flex; flex-direction: column;
}
.ref-inner {
  flex: 1; min-height: 0; overflow-y: auto; padding-right: 3px;
  scrollbar-gutter: stable;
}
.ref-inner::-webkit-scrollbar { width: 3px; }
.ref-inner::-webkit-scrollbar-thumb { background: var(--brd2); border-radius: 2px; }

/* Ref sections */
.ref-section {
  margin-bottom: var(--sp4);
}
.ref-section-title {
  font-family: var(--ffd); font-size: var(--flg); font-weight: 800;
  color: var(--ink); margin-bottom: var(--sp2);
  padding-bottom: var(--sp1); border-bottom: 2px solid var(--ac);
  display: inline-block;
}

.ref-explain {
  background: var(--surf2); border: 1px solid var(--brd);
  border-radius: var(--rad); padding: var(--sp3);
  margin-bottom: var(--sp2);
}
.ref-explain p { font-size: var(--fsm); color: var(--ink2); line-height: 1.7; margin-bottom: var(--sp1); }
.ref-explain p:last-child { margin-bottom: 0; }
.ref-explain strong { color: var(--ac2); }
.ref-explain code { font-family: var(--ffm); color: var(--ac2); background: var(--acg2); padding: 1px 4px; border-radius: 3px; }

/* Grid of concept cards */
.ref-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp2); margin-bottom: var(--sp2);
}
.ref-card {
  background: var(--surf); border: 1.5px solid var(--brd);
  border-radius: var(--rad); padding: var(--sp2) var(--sp3);
}
.ref-card-title { font-size: var(--fsm); font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.ref-card-body  { font-size: var(--fxs); color: var(--mid); line-height: 1.6; }
.ref-card-val   { font-family: var(--ffm); color: var(--ac2); font-weight: 600; }

/* Private ranges */
.ref-ranges {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp2); margin-bottom: var(--sp2);
}
.ref-range-card {
  background: var(--surf); border: 1.5px solid var(--brd);
  border-radius: var(--rad); padding: var(--sp2) var(--sp3);
  border-left: 3px solid var(--ac);
}
.ref-range-cidr { font-family: var(--ffm); font-size: var(--flg); font-weight: 700; color: var(--ac2); }
.ref-range-mask { font-family: var(--ffm); font-size: var(--fxs); color: var(--muted); }
.ref-range-desc { font-size: var(--fsm); color: var(--mid); margin-top: 4px; line-height: 1.5; }

/* Cheatsheet table */
.cs-tbl { display: flex; flex-direction: column; border: 1px solid var(--brd); border-radius: var(--rad); overflow: hidden; }
.cs-hdr, .cs-row {
  display: grid;
  grid-template-columns: clamp(55px,5.5vw,80px) clamp(130px,14vw,180px) clamp(70px,7vw,100px) 1fr;
}
.cs-hdr {
  position: sticky; top: 0; background: var(--surf3); z-index: 1;
  border-bottom: 1.5px solid var(--brd2);
}
.cs-th {
  font-family: var(--ffm); font-size: var(--fxs); text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); padding: var(--sp2);
}
.cs-td { font-size: var(--fsm); color: var(--ink2); padding: var(--sp2); border-top: 1px solid var(--brd); }
.cs-td-pfx  { font-family: var(--ffm); color: var(--ac2); font-weight: 700; }
.cs-td-mono { font-family: var(--ffm); color: var(--ink2); }
.cs-td-num  { font-family: var(--ffm); color: var(--green); font-weight: 600; }
.cs-td-use  { color: var(--mid); }
.cs-row-alt { background: rgba(14,165,233,.025); }
.cs-row:hover { background: var(--acg2); }

/* Special addresses table */
.spec-tbl { display: flex; flex-direction: column; border: 1px solid var(--brd); border-radius: var(--rad); overflow: hidden; margin-bottom: var(--sp2); }
.spec-row { display: grid; grid-template-columns: 1fr 1fr 2fr; }
.spec-hdr { background: var(--surf3); border-bottom: 1.5px solid var(--brd2); }
.spec-th  { font-family: var(--ffm); font-size: var(--fxs); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: var(--sp2); }
.spec-td  { font-size: var(--fsm); padding: var(--sp2); border-top: 1px solid var(--brd); }
.spec-td:first-child { font-family: var(--ffm); color: var(--ac2); font-weight: 600; }
.spec-td:nth-child(2){ font-family: var(--ffm); color: var(--ink2); }
.spec-td:last-child  { color: var(--mid); }
.spec-row-alt { background: rgba(14,165,233,.025); }

/* ─── Buttons ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp1);
  border: 1.5px solid var(--brd2); background: var(--surf2); color: var(--ink2);
  font-family: var(--ff); font-size: var(--fsm); font-weight: 600;
  padding: clamp(6px,1.5vw,8px) clamp(10px,2.5vw,14px);
  border-radius: var(--rad2); cursor: pointer; transition: all .12s;
  white-space: nowrap; user-select: none; line-height: 1; min-height: 36px;
}
.btn:hover:not(:disabled) { border-color: var(--ac); color: var(--ac2); background: var(--acg2); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
.btn:disabled { opacity: .35; cursor: not-allowed; }

.btn-p {
  background: var(--ac); border-color: var(--ac2); color: #fff; font-weight: 700;
  box-shadow: 0 2px 8px rgba(14,165,233,.25);
}
.btn-p:hover:not(:disabled) {
  background: var(--ac2); border-color: var(--ac2); color: #fff;
  box-shadow: 0 3px 14px rgba(14,165,233,.35);
}
.btn-full  { width: 100%; }
.row-g     { display: flex; align-items: center; gap: var(--sp1); }

/* ─── Toast ─── */
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff;
  font-size: var(--fsm); font-weight: 700; font-family: var(--ffm);
  padding: 7px 18px; border-radius: var(--rad2); z-index: 9999;
  pointer-events: none; opacity: 0; white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.toast.on { pointer-events: auto; }

/* ─── Footer ─── */
.lab-foot {
  flex-shrink: 0; height: clamp(30px,4.5vh,40px);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp3); padding: 0 var(--sp4);
  background: var(--surf2); border-top: 1px solid var(--brd);
  font-size: var(--fxs); color: var(--muted); flex-wrap: wrap;
  position: sticky; bottom: 0; z-index: 10;
}
.foot-r { display: flex; gap: var(--sp1); }
.foot-r code {
  font-family: var(--ffm); font-size: var(--fxs);
  background: var(--surf3); border: 1px solid var(--brd);
  padding: 1px 5px; border-radius: 3px; color: var(--mid);
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--brd2); border-radius: 2px; }
::selection { background: var(--acg); color: var(--ac2); }

/* ─── Mobile overrides ─── */
@media (max-width: 699px) {
  .calc-left  { overflow: visible; }
  .calc-right { min-height: 300px; overflow: visible; }
  #result-container { min-height: 200px; overflow: visible; }
  .result-grid { grid-template-columns: 1fr 1fr; }
  .rc-accent { grid-column: span 2; }
}