.split-layout { display: grid; grid-template-columns: 1fr 350px; gap: 20px; }
.cheat-sheet-panel { background: var(--card-bg); border-radius: 15px; padding: 20px; height: 600px; overflow-y: auto; }
.cheat-sheet-panel h3 { margin-top: 0; color: var(--accent-color); border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 10px;}

.binary-visual-container {
    background: #000; padding: 15px; border-radius: 8px; margin-bottom: 15px;
    font-family: 'Consolas', monospace; letter-spacing: 2px; overflow-x: auto; white-space: nowrap;
}
.bit-net { color: var(--accent-color); font-weight: bold; }
.bit-host { color: #555; }
.bit-dot { color: #333; }

.subnet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.subnet-item { background: rgba(255,255,255,0.05); padding: 10px; border-radius: 8px; }
.subnet-item .value { display: block; font-weight: bold; font-size: 1.1rem; color: white; }
.subnet-item small { color: #aaa; text-transform: uppercase; font-size: 0.75rem; }

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
td, th { padding: 8px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.1); }
th { color: var(--accent-color); }

@media (max-width: 900px) { .split-layout { grid-template-columns: 1fr; } }