/* 15-1 流媒体协议原理与实现：页面使用了 Bootstrap 栅格类名但未加载 Bootstrap，补齐所需的布局与组件样式 */
.row { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.row > [class*="col-"] { padding: 0 8px; min-width: 0; }
.g-3 { row-gap: 16px; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.333%; max-width: 33.333%; }
.col-8 { flex: 0 0 66.667%; max-width: 66.667%; }
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; height: 100%; }
.card-body { padding: 14px 10px; }
.card-title { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.border-primary { border-color: #667eea !important; } .border-success { border-color: #16a34a !important; }
.border-warning { border-color: #f59e0b !important; } .border-danger { border-color: #dc2626 !important; }
.text-primary { color: #4f63d2 !important; } .text-success { color: #16a34a !important; } .text-warning { color: #d97706 !important; }
.text-danger { color: #dc2626 !important; } .text-info { color: #0891b2 !important; } .text-center { text-align: center; }
.display-6 { font-size: 34px; font-weight: 700; line-height: 1.2; margin: 6px 0; }
.mt-4 { margin-top: 24px; } .mb-3 { margin-bottom: 12px; } .p-3 { padding: 12px; }
.position-relative { position: relative; } .position-absolute { position: absolute; }
.bottom-0 { bottom: 0; } .start-0 { left: 0; } .end-0 { right: 0; }
.bg-black { background: #000; } .bg-dark.bg-opacity-75 { background: rgba(17, 24, 39, .75); } .text-white { color: #fff; }
.rounded { border-radius: 10px; } .overflow-hidden { overflow: hidden; } .shadow-lg { box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.d-flex { display: flex; } .justify-content-between { justify-content: space-between; } .align-items-center { align-items: center; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; } .bg-success { background: #16a34a; color: #fff; }
.form-select { width: 100%; }
.control-group { margin: 10px 0; }
.control-group label { display: block; margin-bottom: 4px; font-size: 14px; }
.control-section h3 { margin-bottom: 10px; }
@media (max-width: 900px) { .col-3 { flex-basis: 50%; max-width: 50%; } .col-4, .col-8 { flex-basis: 100%; max-width: 100%; } }