.network-exercise { max-width: 760px; margin: 32px auto; padding: 28px; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; color: #1e293b; }
.network-exercise h1 { margin: 6px 0 12px; font-size: 24px; font-weight: 700; }
.network-exercise h2 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.network-exercise h3 { font-weight: 700; margin-top: 12px; }
.exercise-description, .exercise-start p { font-size: 14px; line-height: 1.8; color: #475569; }
.exercise-start { margin: 24px 0; padding: 20px; background: #f8fafc; border-radius: 12px; }
.exercise-progress { display: flex; justify-content: space-between; margin: 24px 0 16px; font-size: 14px; color: #64748b; }
.exercise-prompt { background: #f8fafc; border: 1px solid #e2e8f0; padding: 12px 16px; border-radius: 12px; margin-bottom: 16px; line-height: 1.7; }
.exercise-networks { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; font-variant-numeric: tabular-nums; font-weight: 600; }
.exercise-table { width: 100%; margin: 20px 0; border-collapse: collapse; font-size: 16px; }
.exercise-table caption { text-align: left; font-weight: 600; padding: 8px 0; }
.exercise-table th, .exercise-table td { text-align: left; padding: 12px; border-bottom: 1px solid #e2e8f0; overflow-wrap: anywhere; }
.exercise-table th { background: #f8fafc; font-size: 14px; }
.exercise-options { margin-top: 24px; }
.exercise-options legend { margin-bottom: 12px; font-size: 14px; }
.exercise-options label { display: flex; align-items: center; gap: 12px; padding: 16px; margin-bottom: 10px; border: 1px solid #cbd5e1; border-radius: 12px; cursor: pointer; }
.exercise-options label:has(input:checked) { border-color: #2563eb; background: #eff6ff; }
.exercise-options input { width: 18px; height: 18px; flex-shrink: 0; }
.exercise-inputs { display: grid; gap: 8px; margin: 24px 0 16px; }
.exercise-inputs label { font-size: 14px; font-weight: 600; }
.exercise-inputs input { width: 100%; min-width: 0; border: 1px solid #cbd5e1; border-radius: 10px; padding: 12px; font-size: 16px; margin-bottom: 8px; }
.exercise-inputs input:focus { outline: 2px solid #2563eb; outline-offset: 2px; }
.exercise-primary { display: block; width: 100%; padding: 14px; margin-top: 20px; border-radius: 12px; background: #2563eb; color: #fff; font-weight: 700; text-align: center; }
.exercise-primary:hover { background: #1d4ed8; }
.exercise-feedback { padding: 20px; margin-top: 24px; border-radius: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.exercise-feedback.is-correct { background: #f0fdf4; border: 1px solid #86efac; }
.exercise-feedback.is-incorrect { background: #fff7ed; border: 1px solid #fed7aa; }
.exercise-bits { margin-top: 20px; font-size: 14px; }
.exercise-bits summary { cursor: pointer; font-weight: 600; }
.exercise-bits p { margin: 12px 0; }
.exercise-bits div { margin: 12px 0; }
.exercise-bits code { display: block; font-size: clamp(10px, 2.6vw, 16px); letter-spacing: 0; white-space: nowrap; }
.exercise-bits strong { background: #dbeafe; color: #1d4ed8; }
@media(max-width:600px) {
    .network-exercise { margin: 16px 12px; padding: 20px 16px; }
    .network-exercise h1 { font-size: 20px; }
    .exercise-prompt, .exercise-table { font-size: 14px; }
    .exercise-table th, .exercise-table td { padding: 10px 6px; }
    .exercise-networks { font-size: 14px; }
    .exercise-feedback { padding: 14px; }
}

/* Shared settings surface and option dimensions across existing and new modes. */
.network-exercise.study-settings { width: calc(100% - 32px); max-width: 640px; margin: 40px auto; padding: 32px; }
.network-exercise.study-settings, #standard-settings > div { border: 1px solid #e2e8f0; border-radius: 16px; background: white; box-shadow: 0 4px 16px rgb(15 23 42 / 8%); }
.exercise-settings-form { margin-top: 32px; }
.settings-group { margin-bottom: 32px; min-width: 0; }
.settings-group legend { font-weight: 700; font-size: 16px; color: #374151; margin-bottom: 12px; }
.settings-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.difficulty-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.settings-options label { position: relative; cursor: pointer; min-width: 0; }
.study-settings .setting-option-card { display: flex; flex-direction: column; justify-content: center; height: 100%; padding: 16px; border: 2px solid #e5e7eb; border-radius: 12px; text-align: center; }
.study-settings .setting-option-card strong { font-size: 18px; color: #374151; }
.study-settings .setting-option-card small { display: block; font-size: 12px; line-height: 1.6; color: #64748b; margin-top: 4px; }
.study-settings input:checked + .setting-option-card { background: #eff6ff; border-color: #3b82f6; }
.study-settings input:checked + .setting-option-card strong { color: #1d4ed8; }
.study-settings input:checked + .setting-option-card small { color: #2563eb; }
.study-settings input:focus-visible + .setting-option-card { outline: 2px solid #1d4ed8; outline-offset: 3px; }
#standard-settings .setting-option-card, .study-settings .setting-option-card { min-height: 84px; }
@media(max-width:600px) {
    .network-exercise.study-settings { width: calc(100% - 24px); margin: 16px auto; padding: 20px 16px; }
    #standard-settings { padding: 16px 12px; }
    #standard-settings > div { padding: 20px 16px; }
    #standard-settings h1 { font-size: 20px; }
    .study-settings .setting-option-card { padding: 12px 8px; }
    .study-settings .setting-option-card strong { font-size: 16px; }
}
.cidr-answer { display:flex; align-items:center; gap:12px; font-size:24px; font-weight:700; }
.cidr-answer input { margin:0; max-width:160px; }
.acl-packet, .acl-topology, .acl-code, .acl-trace { margin:20px 0; padding:16px; border:1px solid #e2e8f0; border-radius:12px; }
.acl-packet { background:#eff6ff; }
.acl-packet dl { display:grid; grid-template-columns:auto 1fr; gap:8px 16px; font-size:14px; }
.acl-packet dd { overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.acl-packet dt { color:#64748b; }
.acl-topology figcaption { font-weight:700; }
.acl-topology p, .acl-topology summary, .acl-trace p { font-size:14px; line-height:1.7; margin-top:8px; }
.acl-topology summary { cursor:pointer; }
.acl-topology svg { width:100%; height:auto; color:#64748b; }
.acl-topology text { fill:#334155; font-size:13px; }
.acl-device rect { fill:#f8fafc; stroke:#cbd5e1; stroke-width:1.5; }
.acl-selected rect { fill:#eff6ff; stroke:#3b82f6; }
.acl-wire { fill:none; stroke:#94a3b8; stroke-width:3; }
.acl-wire.acl-flow { stroke:#16a34a; stroke-dasharray:7 5; animation:acl-flow 1s linear 3; }
.acl-gate { fill:#f1f5f9; stroke:#64748b; stroke-width:2; }
.acl-gate.acl-permit { fill:#dcfce7; stroke:#16a34a; }
.acl-gate.acl-deny { fill:#fee2e2; stroke:#dc2626; }
.acl-result-label { font-weight:700; }
.acl-diagram-mobile { display:none; }
.acl-code { background:#f8fafc; }
.acl-code > code { font-size:13px; overflow-wrap:anywhere; }
.acl-code li { display:flex; align-items:baseline; gap:10px; margin-top:12px; }
.acl-code li span { flex:0 0 24px; color:#64748b; }
.acl-code li code { min-width:0; overflow-wrap:anywhere; font-size:14px; line-height:1.7; }
.acl-trace > div { padding:12px; border-bottom:1px solid #e2e8f0; font-size:14px; }
.acl-match { background:#eff6ff; border-left:3px solid #2563eb; }
@keyframes acl-flow { to { stroke-dashoffset:-24; } }
@media(prefers-reduced-motion:reduce) { .acl-wire.acl-flow { animation:none; } }
@media(max-width:600px) {
    .acl-diagram-mobile { display:block; }
    .acl-diagram-desktop { display:none; }
    .acl-topology { padding:10px; }
}