/* V6.0 — readable, explicit subnet calculation detail. */
html[data-scroll-theme='network-subnet'] .calc-detail-card { overflow:hidden; }
.calc-detail-head { display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px; }
.calc-detail-head p { margin:4px 0 0;color:var(--apu-muted);font-size:13px;line-height:1.6; }
.calc-summary-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px; }
.calc-summary-item { border:1px solid var(--apu-border);border-radius:14px;padding:13px;background:var(--apu-surface-2);min-width:0; }
.calc-summary-item span { display:block;color:var(--apu-muted);font-size:10px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;margin-bottom:7px; }
.calc-summary-item strong,.calc-summary-item code { display:block;color:var(--apu-text);font-size:13px;overflow-wrap:anywhere; }
.calc-steps { display:grid;gap:12px; }
.calc-step { display:grid;grid-template-columns:42px minmax(0,1fr);gap:14px;padding:16px;border:1px solid var(--apu-border);border-radius:15px;background:var(--apu-surface); }
.calc-step-index { width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--apu-text);color:var(--apu-bg);font:900 11px/1 var(--apu-font-mono); }
.calc-step h3 { margin:0 0 5px;font-size:15px;color:var(--apu-text); }
.calc-step p { margin:0 0 10px;color:var(--apu-muted);font-size:12px;line-height:1.6; }
.calc-formula { display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px; }
.calc-formula code { padding:8px 10px;border:1px solid var(--apu-border);border-radius:10px;background:var(--apu-surface-2);color:var(--apu-text);font-size:12px; }
.binary-stack { display:grid;gap:6px;padding:12px;border-radius:12px;background:#08090b;color:#f8fafc;overflow-x:auto; }
.binary-line { display:grid;grid-template-columns:92px minmax(620px,1fr);gap:10px;align-items:center;font:700 11px/1.55 var(--apu-font-mono); }
.binary-line span { color:#aeb4c0; }
.binary-line code { color:#f8fafc;letter-spacing:.03em;white-space:nowrap; }
.bit-map { display:flex;align-items:center;gap:3px;flex-wrap:nowrap;overflow-x:auto;padding:10px 0 4px; }
.bit-map b { width:22px;height:28px;display:grid;place-items:center;border-radius:6px;font:800 11px/1 var(--apu-font-mono);color:white;flex:0 0 auto; }
.bit-map .bit-network { background:#2563eb; }
.bit-map .bit-host { background:#d97706; }
.bit-map i { color:var(--apu-muted);font-style:normal;margin:0 2px; }
.bit-legend { display:flex;gap:14px;flex-wrap:wrap;color:var(--apu-muted);font-size:11px;margin-top:6px; }
.bit-legend span::before { content:'';display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;vertical-align:-1px; }
.bit-legend .legend-network::before { background:#2563eb; }
.bit-legend .legend-host::before { background:#d97706; }
.route-decision { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:10px; }
.route-decision div { border:1px solid var(--apu-border);border-radius:11px;padding:11px;background:var(--apu-surface-2); }
.route-decision small { display:block;color:var(--apu-muted);font-size:9px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px; }
.route-decision strong { color:var(--apu-text);font-size:12px;overflow-wrap:anywhere; }
@media (max-width: 980px) { .calc-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.route-decision{grid-template-columns:1fr}.binary-line{grid-template-columns:78px minmax(620px,1fr)} }
@media (max-width: 620px) { .calc-summary-grid{grid-template-columns:1fr}.calc-step{grid-template-columns:1fr}.calc-step-index{width:34px;height:34px}.binary-stack{margin-inline:-4px}.bit-map b{width:20px;height:26px} }