.middle-sync-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.middle-sync-card .card-body { padding: 22px; }
.middle-sync-head { display: flex; gap: 14px; margin-bottom: 16px; }
.middle-sync-head h2 { margin: 0 0 6px; font-size: 18px; }
.middle-sync-head p { margin: 0; color: #98a6ad; font-size: 13px; line-height: 1.6; }
.middle-source-icon { width: 44px; height: 44px; flex: 0 0 44px; display: flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 24px; }
.middle-source-icon.mobile { color: #2f7bff; background: #e8f3ff; }
.middle-source-icon.pc { color: #15c377; background: #e9f8f0; }
.middle-stat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.middle-stat { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid #edf0f5; border-radius: 10px; background: #fff; }
.middle-stat span { color: #98a6ad; font-size: 12px; }
.middle-stat strong { color: #2b3445; font-size: 26px; line-height: 1; }
.middle-stat small { color: #aab2bd; font-size: 12px; }
.middle-log-message { max-width: 360px; color: #6b7684; font-size: 12px; }
.middle-filter-form .form-group { margin-bottom: 0; }
.middle-software-table td { vertical-align: middle; }
.middle-row-meta { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; color: #98a6ad; font-size: 12px; }
.middle-row-inactive { opacity: .55; }
.middle-thumb { width: 64px; height: 64px; object-fit: cover; border: 1px solid #edf0f5; border-radius: 8px; background: #f7f8fa; }
.middle-thumb-link { display: inline-block; }
.middle-edit-thumb { width: 120px; height: 120px; object-fit: cover; border: 1px solid #edf0f5; border-radius: 10px; background: #f7f8fa; }
.middle-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.middle-info-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px dashed #edf0f5; font-size: 13px; }
.middle-info-row:last-child { border-bottom: 0; }
.middle-info-row > span:first-child { flex: 0 0 auto; color: #98a6ad; }
.middle-info-row strong, .middle-info-row a, .middle-info-row code { text-align: right; word-break: break-all; }
@media (max-width: 1200px) { .middle-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 991px) { .middle-sync-grid { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .middle-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }