.sy-overview { max-width: 1440px; margin: 0 auto; color: var(--sy-navy); font-size: var(--sy-font-body); }
.sy-overview [data-tone] { --sy-overview-tone:var(--sy-muted); --sy-overview-tint:var(--sy-surface-subtle); }
.sy-overview [data-tone=info] { --sy-overview-tone:var(--sy-info); --sy-overview-tint:var(--sy-info-surface); }
.sy-overview [data-tone=capacity] { --sy-overview-tone:var(--sy-capacity); --sy-overview-tint:var(--sy-capacity-surface); }
.sy-overview [data-tone=success] { --sy-overview-tone:var(--sy-success); --sy-overview-tint:var(--sy-success-surface); }
.sy-overview [data-tone=warning] { --sy-overview-tone:var(--sy-warning); --sy-overview-tint:var(--sy-warning-surface); }
.sy-overview [data-tone=danger] { --sy-overview-tone:var(--sy-error); --sy-overview-tint:var(--sy-error-surface); }
.sy-overview .sy-status-badge[data-tone] { color:var(--sy-overview-tone); background:var(--sy-overview-tint); }
.sy-overview-heading, .sy-overview-heading-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sy-overview-heading { margin-bottom:16px; }
.sy-overview-heading h1 { font-size:var(--sy-font-page); font-weight:var(--sy-heading-font-weight); margin:0 0 4px; }
.sy-overview-heading p, .sy-overview-panel header p { margin:0; color:var(--sy-muted); font-size:var(--sy-font-meta); }
.sy-overview-freshness { display:flex; flex-wrap:wrap; gap:6px 16px; margin-bottom:12px; font-size:12px; color:var(--sy-muted); }
.sy-overview-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:0 0 20px; }
.sy-overview-metrics > div { padding:16px 20px 18px; border:1px solid var(--sy-border); border-radius:var(--sy-radius); background:var(--sy-surface); min-width:0; }
.sy-overview-metrics dt { color:var(--sy-text); font-weight:var(--sy-control-font-weight); font-size:var(--sy-font-meta); }
.sy-overview-metrics dd { font-size:28px; font-weight:600; margin:8px 0 4px; font-variant-numeric:tabular-nums; line-height:1.4; color:var(--sy-overview-tone); }
.sy-overview-metrics .sy-overview-size-value { font-size:26px; }
.sy-overview-metrics p { color:var(--sy-muted); font-size:12px; margin:0; }
.sy-overview-ready { color:var(--sy-success); }
.sy-overview-main-grid { display:grid; grid-template-columns:minmax(0,2.1fr) minmax(280px,1fr); grid-template-areas:"videos attention"; gap:20px; align-items:start; margin-bottom:20px; }
.sy-overview-videos { grid-area:videos; }
.sy-overview-attention, .sy-overview-attention-clear { grid-area:attention; }
.sy-overview-attention-clear { display:flex; align-items:center; gap:8px; margin:0; padding:14px 0; color:var(--sy-muted); }
.sy-overview-attention-clear .sy-mgmt-icon { width:18px; height:18px; flex:none; }
.sy-overview-main-grid:has(> .sy-overview-attention-clear) { grid-template-columns:minmax(0, 1fr); grid-template-areas:"attention" "videos"; gap:12px; }
.sy-overview-main-grid > .sy-overview-attention-clear { padding:0; }
.sy-overview-data-help { margin-top:20px; }
.sy-overview-data-help p { margin:0 0 12px; line-height:1.8; }
.sy-overview-storage-item .sy-disclosure { margin-top:8px; }
.sy-overview-storage-item .sy-disclosure p { margin:0; color:var(--sy-muted); }
.sy-overview-system-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start; }
.sy-overview-panel { background:var(--sy-surface); border:1px solid var(--sy-border); border-radius:var(--sy-radius); min-width:0; overflow:hidden; }
.sy-overview-panel > header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px; }
.sy-overview-panel h2 { font-size:var(--sy-font-section); font-weight:var(--sy-heading-font-weight); margin:0 0 3px; }
.sy-overview-panel > header .sy-button { padding:6px 0; white-space:nowrap; font-size:var(--sy-font-meta); }
.sy-overview-panel .sy-mgmt-icon { width:18px; height:18px; flex-shrink:0; }
.sy-overview-video-table th:nth-child(2) { width:160px; }
.sy-overview-video-table th:nth-child(3) { width:98px; text-align:right; }
.sy-overview-video-table th:nth-child(4) { width:104px; text-align:center; }
.sy-overview-video-table td { padding:10px 12px; }
.sy-overview-video-name { min-width:0; }
.sy-overview-video-name strong { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; font-weight:400; line-height:1.6; }
.sy-overview-video-name small { display:block; font-size:12px; color:var(--sy-muted); margin-top:2px; }
.sy-overview-video-size { text-align:right; font-variant-numeric:tabular-nums; font-size:var(--sy-font-meta) !important; white-space:nowrap; }
.sy-overview-row-actions { display:flex; align-items:center; justify-content:center; gap:2px; }
.sy-overview-video-table .sy-status-badge { font-size:12px; white-space:nowrap; }
.sy-overview-video-table .sy-table-empty .sy-button { margin-top:16px; }
.sy-overview-attention-body { padding:0 20px; }
.sy-overview-attention[data-tone=danger] > header, .sy-overview-attention[data-tone=warning] > header { background:var(--sy-overview-tint); border-bottom:1px solid var(--sy-border); margin-bottom:14px; }
.sy-overview-attention > header > .sy-mgmt-icon { color:var(--sy-overview-tone); }
.sy-overview-attention-group h3 span { color:var(--sy-overview-tone); }
.sy-overview-attention-group { padding:0 0 14px; }
.sy-overview-attention-group + .sy-overview-attention-group { padding-top:14px; border-top:1px solid var(--sy-border); }
.sy-overview-attention-group h3 { font-size:14px; font-weight:400; margin:0 0 6px; }
.sy-overview-attention-group h3 span { margin-left:6px; font-variant-numeric:tabular-nums; }
.sy-overview-attention-group ul { list-style:none; padding:0; margin:0; }
.sy-overview-attention-group li { padding:8px 0; }
.sy-overview-attention-group li strong { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-weight:400; overflow-wrap:anywhere; }
.sy-overview-attention-group small { display:block; margin-top:3px; color:var(--sy-muted); font-size:12px; }
.sy-overview-attention-group .sy-button { padding:4px 0; min-height:36px; text-align:left; justify-content:space-between; font-size:var(--sy-font-meta); }
.sy-overview-attention-group li .sy-button { width:100%; }
.sy-overview-attention-group li .sy-button span { overflow-wrap:anywhere; min-width:0; }
.sy-overview-service-list { padding:0 20px; }
.sy-overview-service { display:flex; align-items:center; gap:12px; padding:14px 0; border-top:1px solid var(--sy-border); }
.sy-overview-service > div { flex:1; min-width:0; }
.sy-overview-service > .sy-mgmt-icon { color:var(--sy-overview-tone); }
.sy-overview-service strong { display:block; font-size:14px; font-weight:400; }
.sy-overview-service small { display:block; color:var(--sy-muted); font-size:12px; }
.sy-overview-service .sy-status-badge { font-size:12px; max-width:50%; }
.sy-overview-panel-note { color:var(--sy-muted); font-size:12px; margin:0; padding:12px 20px 16px; }
.sy-overview-storage-item { margin:0 20px; padding:14px 0; border-top:1px solid var(--sy-border); }
.sy-overview-storage-title, .sy-overview-storage-capacity { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.sy-overview-storage-title strong { font-weight:400; overflow-wrap:anywhere; min-width:0; }
.sy-overview-storage-title .sy-status-badge { white-space:nowrap; font-size:12px; }
.sy-overview-storage-capacity { margin-top:10px; font-variant-numeric:tabular-nums; }
.sy-overview-storage-item small { color:var(--sy-muted); font-size:12px; }
.sy-overview-storage-item progress { display:block; width:100%; height:6px; margin:9px 0; border:0; border-radius:3px; accent-color:var(--sy-overview-tone); background:var(--sy-border); overflow:hidden; }
.sy-overview-storage-item progress::-webkit-progress-bar { background:var(--sy-border); }
.sy-overview-storage-item progress::-webkit-progress-value { background:var(--sy-overview-tone); border-radius:3px; }
.sy-overview-storage-item progress::-moz-progress-bar { background:var(--sy-overview-tone); }
.sy-overview-measured { display:block; margin-top:5px; }
.sy-overview-probe-error { margin:8px 0 0; font-size:12px; color:var(--sy-error); }
.sy-overview-quiet { padding:16px 20px 28px; text-align:center; color:var(--sy-muted); }
.sy-overview-quiet p { margin:8px 0 4px; }
.sy-overview-quiet small, .sy-overview-caption { font-size:12px; color:var(--sy-muted); }
.sy-overview-footer { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; margin-top:12px; color:var(--sy-muted); font-size:12px; }
.sy-overview-footer > div { display:flex; flex-wrap:wrap; }
.sy-overview-footer .sy-button { font-size:12px; padding:6px 8px; }
.sy-overview-notice { display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--sy-border); border-left:3px solid var(--sy-accent); border-radius:6px; padding:10px 14px; background:var(--sy-surface); margin-bottom:16px; }
.sy-overview-notice p { margin:0; font-size:13px; }
.sy-overview-notice .sy-button { flex-shrink:0; }
.sy-overview-loading { display:flex; justify-content:center; align-items:center; gap:10px; padding:64px 16px; color:var(--sy-muted); }
@media (max-width:1200px) { .sy-overview-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .sy-overview-main-grid { grid-template-columns:minmax(0,1fr); grid-template-areas:"attention" "videos"; } }
@media (max-width:900px) { .sy-overview-system-grid { grid-template-columns:minmax(0,1fr); } }
@media (max-width:640px) {
 .sy-overview-heading { align-items:flex-start; flex-direction:column; gap:12px; }
 .sy-overview-heading-actions { justify-content:space-between; width:100%; }
 .sy-overview-heading-actions .sy-button { padding:8px 12px; font-size:13px; }
 .sy-overview-metrics { gap:10px; }
 .sy-overview-metrics > div { padding:14px 12px; }
 .sy-overview-metrics dt { font-size:12px; }
 .sy-overview-metrics dd, .sy-overview-metrics .sy-overview-size-value { font-size:24px; }
 .sy-overview-panel > header { padding:16px; align-items:flex-start; }
 .sy-overview-notice { align-items:flex-start; }
 .sy-overview-footer { align-items:flex-start; }
}
@container (max-width:620px) {
 .sy-overview-video-table thead { display:none; }
 .sy-overview-video-table tbody, .sy-overview-video-table tr, .sy-overview-video-table td { display:block; width:100%; }
 .sy-overview-video-table tr { display:grid; grid-template-columns:minmax(0,1fr) auto; padding:14px 16px; gap:8px; border-bottom:1px solid var(--sy-border); }
 .sy-overview-video-table td { border:0; padding:0; height:auto; min-width:0; }
 .sy-overview-video-table td:first-child { grid-column:1 / -1; padding:0; }
 .sy-overview-video-table td:nth-child(2) { align-self:center; }
 .sy-overview-video-table td:nth-child(3) { align-self:center; }
 .sy-overview-video-table td:last-child { grid-column:1 / -1; }
 .sy-overview-video-table .sy-overview-row-actions { justify-content:flex-start; gap:8px; }
 .sy-overview-video-table .sy-icon-button { min-width:44px; min-height:44px; }
 .sy-overview-video-table .sy-table-empty { grid-column:1 / -1; }
}