.sc-container{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;max-width:900px;margin:0 auto;padding:20px 0;color:#1a1a1a}
.sc-container *{box-sizing:border-box}
.sc-title{font-size:26px;font-weight:600;margin:0 0 6px;color:#1a1a1a}
.sc-subtitle{font-size:14px;color:#6b7280;margin:0 0 24px}
.sc-input-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:24px;margin-bottom:20px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.sc-input-group{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.sc-input-group label{font-size:13px;font-weight:500;color:#374151;display:block;margin-bottom:5px}
.sc-input-group .sc-field{display:flex;flex-direction:column}
.sc-input-group .sc-field.ip-field{flex:2;min-width:160px}
.sc-input-group .sc-field.cidr-field{flex:1;min-width:100px}
.sc-container input[type="text"],.sc-container select{width:100%;padding:10px 14px;border:1px solid #d1d5db;border-radius:8px;font-size:15px;background:#fff;color:#1a1a1a;transition:border-color .2s;outline:none}
.sc-container input[type="text"]:focus,.sc-container select:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.sc-calc-btn{background:#2563eb;color:#fff;border:none;border-radius:8px;padding:10px 24px;font-size:15px;font-weight:500;cursor:pointer;white-space:nowrap;transition:background .2s;align-self:flex-end}
.sc-calc-btn:hover{background:#1d4ed8}
.sc-error{color:#dc2626;font-size:13px;margin-top:8px}
.sc-results{display:none}
.sc-results.sc-visible{display:block}
.sc-section-title{font-size:14px;font-weight:600;color:#374151;margin:0 0 14px;display:flex;align-items:center;gap:6px}
.sc-bitmap-card,.sc-results-card,.sc-binary-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:20px 24px;margin-bottom:16px}
.sc-bits{display:flex;flex-wrap:wrap;gap:2px;margin:8px 0}
.sc-bit{width:16px;height:22px;border-radius:3px;transition:background .3s}
.sc-bit.net{background:#2563eb}
.sc-bit.host{background:#bbf7d0;border:1px solid #86efac}
.sc-bit-legend{display:flex;gap:20px;font-size:13px;color:#6b7280;margin-top:8px}
.sc-bit-legend span{display:flex;align-items:center;gap:6px}
.sc-bit-dot{width:12px;height:12px;border-radius:3px}
.sc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.sc-metric{background:#f9fafb;border-radius:8px;padding:12px 14px;border:1px solid #f3f4f6}
.sc-metric .sc-m-label{font-size:12px;color:#6b7280;margin-bottom:4px;font-weight:500;text-transform:uppercase;letter-spacing:.4px}
.sc-metric .sc-m-val{font-size:15px;font-weight:600;color:#111827;word-break:break-all;font-family:monospace}
.sc-metric.highlight .sc-m-val{color:#2563eb}
.sc-binary-card{overflow-x:auto}
.sc-binary-card table{width:100%;border-collapse:collapse;font-size:13px}
.sc-binary-card th{text-align:left;padding:8px 12px;background:#f9fafb;border-bottom:1px solid #e5e7eb;font-weight:600;color:#374151}
.sc-binary-card td{padding:8px 12px;border-bottom:1px solid #f3f4f6;font-family:monospace;color:#374151}
.sc-binary-card tr:last-child td{border-bottom:none}
@media(max-width:600px){.sc-input-group{flex-direction:column}.sc-input-group .sc-field{width:100%}.sc-calc-btn{width:100%}.sc-bit{width:12px;height:18px}}