/* =========================================
   APP STYLES (Player & Metadata Viewer)
   ========================================= */

body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
    background: var(--bg-main); 
    color: var(--text-main); 
    padding: 0; 
    margin: 0; 
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header / Toolbar */
.toolbar { 
    display: flex; 
    align-items: center; 
    background: var(--bg-surface); 
    padding: 15px 20px; 
    border-bottom: 1px solid var(--border-color);
    gap: 10px; 
}
.toolbar input { max-width: 300px; }

/* Main Layout */
.layout { 
    display: flex; 
    flex: 1; 
    overflow: hidden;
}

/* Left Panel: Video */
.pane-left { 
    flex: 1.5; 
    background: #000; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    border-right: 1px solid var(--border-color);
}
.video-player { width: 100%; height: 100%; object-fit: contain; }

/* Right Panel: Metadata */
.pane-right { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    background: var(--bg-surface); 
    overflow: hidden;
}

/* Main Tabs (Console / Network) */
.main-tabs { display: flex; border-bottom: 1px solid var(--border-color); background: var(--bg-main); }
.main-tabs .tab { 
    flex: 1; padding: 12px; text-align: center; cursor: pointer; 
    font-weight: 600; font-size: 14px; border-bottom: 2px solid transparent; 
}
.main-tabs .tab.active { background: var(--bg-surface); border-bottom-color: var(--primary); color: var(--primary); }

/* Scrollable Lists */
.scroll-panel { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }

/* Console View */
.log-item { padding: 10px 15px; border-bottom: 1px solid var(--border-color); font-family: monospace; font-size: 12px; word-wrap: break-word; }
.log-item.error { background: #fef2f2; color: var(--danger); }

/* Network View */
.net-item { padding: 10px 15px; border-bottom: 1px solid var(--border-color); cursor: pointer; display: flex; gap: 10px; font-size: 12px; align-items: center;}
.net-item:hover { background: var(--bg-main); }
.net-item.active { background: #eff6ff; border-left: 4px solid var(--primary); }
.url-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; direction: rtl; text-align: left;}

/* Network Details Sub-Panel */
.network-details { 
    height: 50%; 
    border-top: 1px solid var(--border-color); 
    display: flex; 
    flex-direction: column; 
    background: #fafafa;
}
.sub-tabs { display: flex; border-bottom: 1px solid var(--border-color); background: var(--bg-surface); overflow-x: auto; }
.sub-tabs .tab { padding: 8px 12px; font-size: 12px; cursor: pointer; font-weight: 500; border-bottom: 2px solid transparent; white-space: nowrap; }
.sub-tabs .tab.active { border-bottom-color: var(--primary); color: var(--primary); }

.details-content { flex: 1; overflow: auto; padding: 15px; }
.details-content pre { margin: 0; font-family: monospace; font-size: 11px; white-space: pre-wrap; word-wrap: break-word; color: #333; }