.summary-calculator-page { --summary-accent: var(--primary-color); }
.calculator-panel textarea { width:100%; min-height:9.5rem; resize:vertical; padding:1rem; border:1px solid var(--border-color); border-radius:.7rem; background:var(--bg-tertiary); color:var(--text-primary); font:500 .98rem/1.65 ui-monospace,SFMono-Regular,Consolas,monospace; }
.calculator-panel textarea:focus { outline:3px solid color-mix(in srgb,var(--primary-color) 25%,transparent); border-color:var(--primary-color); }
.tool-field label { display:block; margin-bottom:.55rem; color:var(--text-primary); font-weight:700; }
.tool-field-help { margin:.5rem 0 0; color:var(--text-secondary); }
.field-error { margin:.5rem 0 0; color:var(--error-color); font-weight:650; }
.tool-form-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.1rem; }
.tool-status { min-height:1.5rem; margin-top:1rem; color:var(--text-secondary); }
.result-panel { scroll-margin-top:6rem; }
.result-heading { align-items:center; gap:1rem; }
.answer-card { display:flex; flex-direction:column; align-items:center; text-align:center; padding:1.5rem; margin-bottom:1rem; border:1px solid color-mix(in srgb,var(--primary-color) 45%,var(--border-color)); border-radius:.8rem; background:color-mix(in srgb,var(--primary-color) 8%,var(--bg-card)); }
.answer-label { color:var(--text-secondary); font-weight:700; }
.summary-cidr { margin:.35rem 0; color:var(--primary-color); font:800 clamp(2rem,7vw,3.4rem)/1.15 ui-monospace,SFMono-Regular,Consolas,monospace; overflow-wrap:anywhere; }
.answer-note { color:var(--text-secondary); }
.result-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; }
.result-stat-grid article { padding:1rem; border:1px solid var(--border-color); border-radius:.7rem; background:var(--bg-tertiary); min-width:0; }
.result-stat-grid span { display:block; margin-bottom:.4rem; color:var(--text-muted); font-size:.82rem; font-weight:750; text-transform:uppercase; letter-spacing:.04em; }
.result-stat-grid strong { color:var(--text-primary); font:700 .94rem/1.45 ui-monospace,SFMono-Regular,Consolas,monospace; overflow-wrap:anywhere; }
.calculation-section { margin-top:1.25rem; padding-top:1.25rem; border-top:1px solid var(--border-color); }
.section-heading h2,.section-heading h3 { margin:.15rem 0 .45rem; }
.section-heading p:last-child { color:var(--text-secondary); }
.section-kicker { margin:0; color:var(--primary-color); font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.bit-legend { display:flex; flex-wrap:wrap; gap:1rem; margin:.9rem 0; color:var(--text-secondary); font-size:.9rem; }
.legend-swatch { display:inline-block; width:.8rem; height:.8rem; margin-right:.35rem; border-radius:.2rem; vertical-align:-.08rem; }
.legend-swatch.matching,.bit.match { background:color-mix(in srgb,var(--success-color) 22%,var(--bg-tertiary)); color:var(--success-color); }
.legend-swatch.differing,.bit.variable { background:color-mix(in srgb,var(--warning-color) 22%,var(--bg-tertiary)); color:var(--text-primary); }
.bit-table-wrap,.network-table-wrap,.protocol-table-wrap { overflow-x:auto; border:1px solid var(--border-color); border-radius:.7rem; }
.bit-table,.network-table-wrap table,.protocol-table { width:100%; border-collapse:collapse; }
.bit-table th,.bit-table td,.network-table-wrap th,.network-table-wrap td,.protocol-table th,.protocol-table td { padding:.75rem; border-bottom:1px solid var(--border-color); text-align:left; vertical-align:top; }
.bit-table tr:last-child td,.network-table-wrap tr:last-child td,.protocol-table tr:last-child td,.protocol-table tr:last-child th { border-bottom:0; }
.bit-table code,.binary-value { white-space:nowrap; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
.bit { display:inline-block; min-width:.66em; padding:.06rem 0; text-align:center; }
.bit.octet-end { margin-right:.42rem; }
.bit.boundary { box-shadow:inset -2px 0 0 var(--primary-color); }
.calculation-steps { margin:1rem 0 0; padding-left:1.4rem; color:var(--text-secondary); }
.calculation-steps li + li { margin-top:.5rem; }
.command-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }
.command-card { min-width:0; padding:1rem; border:1px solid var(--border-color); border-radius:.7rem; background:var(--bg-tertiary); }
.command-card h4 { margin:0 0 .55rem; }
.command-card p { color:var(--text-secondary); }
.command-card pre { margin:.7rem 0 0; padding:.8rem; overflow:auto; border-radius:.55rem; background:var(--bg-primary); color:var(--text-primary); font-size:.86rem; }
.result-caution { margin:1rem 0 0; padding:.9rem; border-left:4px solid var(--warning-color); background:color-mix(in srgb,var(--warning-color) 9%,var(--bg-card)); color:var(--text-secondary); }
.definition-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.definition-grid article { padding:1rem; border:1px solid var(--border-color); border-radius:.7rem; background:var(--bg-tertiary); }
.definition-grid h3 { margin-top:0; }
.faq-grid { display:grid; gap:.7rem; }
.faq-grid details { padding:1rem; border:1px solid var(--border-color); border-radius:.7rem; background:var(--bg-card); }
.faq-grid summary { cursor:pointer; color:var(--text-primary); font-weight:700; }
.faq-grid details p { margin:.7rem 0 0; color:var(--text-secondary); }
.step-number { display:inline-grid; place-items:center; width:2rem; height:2rem; border-radius:50%; background:color-mix(in srgb,var(--primary-color) 14%,var(--bg-card)); color:var(--primary-color); font-weight:800; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:900px) { .result-stat-grid,.definition-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:650px) { .result-stat-grid,.definition-grid,.command-grid { grid-template-columns:1fr; } .tool-form-actions .btn { width:100%; justify-content:center; } .result-heading { align-items:flex-start; } .result-heading .btn { width:100%; } .bit-table th,.bit-table td,.network-table-wrap th,.network-table-wrap td,.protocol-table th,.protocol-table td { padding:.62rem; } }
@media (prefers-reduced-motion:reduce) { .summary-calculator-page * { scroll-behavior:auto!important; } }