/* cfg-subnet-trainer: infinite subnetting practice tool */
.cfg-subnet-trainer { margin: 30px 0; }
.cfg-st { border: 1px solid #e2e8f0; border-radius: 12px; padding: 22px 24px; background: #f8fafc; }
.cfg-st-title { margin: 0 0 4px; font-size: 1.3rem; }
.cfg-st-sub { margin: 0 0 14px; color: #475569; font-size: .92rem; }
.cfg-st-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.cfg-st-stat { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 6px 12px; font-weight: 600; font-size: .9rem; color: #1e293b; }
.cfg-st-q { font-size: 1.25rem; font-weight: 700; margin: 6px 0 14px; font-family: 'DejaVu Sans Mono', ui-monospace, Menlo, Consolas, monospace; color: #0f172a; line-height: 1.4; }
.cfg-st-form { display: flex; gap: 10px; flex-wrap: wrap; }
.cfg-st-input { flex: 1 1 220px; min-width: 200px; padding: 11px 14px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 1rem; font-family: 'DejaVu Sans Mono', ui-monospace, Menlo, Consolas, monospace; }
.cfg-st-input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.cfg-st-input:disabled { background: #f1f5f9; color: #64748b; }
.cfg-st-btn { background: #2563eb; color: #fff; border: 0; border-radius: 8px; padding: 11px 24px; font-weight: 600; font-size: .95rem; cursor: pointer; transition: background .15s; }
.cfg-st-btn:hover { background: #1d4ed8; }
.cfg-st-fb { margin-top: 14px; padding: 11px 14px; border-radius: 8px; font-weight: 600; font-family: 'DejaVu Sans Mono', ui-monospace, Menlo, Consolas, monospace; }
.cfg-st-fb.is-ok { background: #dcfce7; color: #166534; }
.cfg-st-fb.is-no { background: #fef2f2; color: #991b1b; }
@media (max-width: 600px) { .cfg-st { padding: 18px 16px; } .cfg-st-q { font-size: 1.1rem; } }