@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    /* Simple Color Palette */
    --bg-main: #ffffff;
    --bg-panel: #f8fafc;
    --bg-card: #ffffff;
    --bg-light: #f1f5f9;
    
    /* Text Colors */
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    
    /* Accent Colors */
    --primary: #0ea5e9;
    --primary-light: rgba(14, 165, 233, 0.1);
    --primary-hover: #0284c7;
    --border-color: #e2e8f0;
    --border-dark: #cbd5e1;
    
    /* Status Colors */
    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;
    
    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
}

* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
}

body {
    font-family: var(--font-sans);
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.6;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header */
.app-header {
    background: var(--bg-main);
    border-bottom: 1px solid var(--border-color);
    padding: 0 var(--spacing-2xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 64px;
    flex-shrink: 0;
}

.logo-area { display: flex; align-items: center; gap: 8px; }
.logo-title { font-size: 20px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.5px; }
.logo-title span { color: var(--primary); }

.stats-banner { display: flex; align-items: center; gap: 16px; }
.stat-badge { 
    background: var(--bg-light); 
    border: 1px solid var(--border-color); 
    padding: 6px 12px; 
    border-radius: 6px; 
    font-family: var(--font-sans); 
    color: var(--text-secondary); 
    font-size: 13px;
    font-weight: 500;
}

/* Buttons */
.btn { 
    border: 1px solid var(--border-color); 
    padding: 8px 16px; 
    border-radius: 6px; 
    font-family: var(--font-sans); 
    font-size: 13px; 
    font-weight: 600; 
    cursor: pointer; 
    transition: all 0.2s;
    background: var(--bg-main);
    color: var(--text-primary);
}
.btn:hover { background: var(--bg-light); border-color: var(--border-dark); }
.btn-primary { background: var(--primary); color: white; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-secondary { background: var(--bg-main); border: 1px solid var(--border-color); color: var(--text-primary); }
.btn-secondary:hover { background: var(--bg-light); }

.app-container { display: flex; flex: 1; overflow: hidden; position: relative; }

/* Sidebar */
.panel-sidebar { 
    width: 320px; 
    background: var(--bg-panel); 
    border-right: 1px solid var(--border-color); 
    display: flex; 
    flex-direction: column; 
    padding: var(--spacing-lg); 
    gap: var(--spacing-lg); 
    flex-shrink: 0; 
    overflow-y: auto;
}
.sidebar-section-title { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.5px; margin-bottom: 12px; }

/* HOMEPAGE ONLY - Blue Gradient Background with White Text */
.empty-state-view {
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    background: linear-gradient(135deg, #001133 0%, #002266 30%, #003399 60%, #0055cc 100%);
    z-index: 100; 
    padding: var(--spacing-2xl);
}

.landing-content { 
    max-width: 600px; 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
}

.landing-title { 
    font-size: 48px; 
    font-weight: 700; 
    color: #ffffff; 
    letter-spacing: -1px; 
    margin-bottom: 16px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.landing-subtitle { 
    font-size: 16px; 
    color: #e0f2fe; 
    line-height: 1.6; 
    margin-bottom: 40px; 
    max-width: 480px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* Upload Box - Homepage Only */
.upload-box { 
    width: 100%; 
    max-width: 480px; 
    margin: 0 auto; 
}

.drop-zone { 
    border: 2px dashed rgba(255, 255, 255, 0.4); 
    border-radius: 8px; 
    padding: 48px 24px; 
    text-align: center; 
    background: rgba(255, 255, 255, 0.05); 
    cursor: pointer; 
    transition: all 0.2s;
    backdrop-filter: blur(5px);
}

.drop-zone:hover { 
    border-color: rgba(255, 255, 255, 0.8); 
    background: rgba(255, 255, 255, 0.1);
}

.drop-zone p { 
    color: #ffffff; 
    font-size: 14px;
}

.file-link { 
    color: #ffffff; 
    font-weight: 600; 
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Loading Bar - Homepage Only */
.loading-bar-container { 
    background: rgba(255, 255, 255, 0.1); 
    border: 1px solid rgba(255, 255, 255, 0.2); 
    border-radius: 6px; 
    padding: 16px; 
    width: 100%; 
}

.loading-label { 
    font-size: 12px; 
    color: #e0f2fe; 
    margin-bottom: 8px; 
}

.progress-rail { 
    height: 4px; 
    background: rgba(255, 255, 255, 0.2); 
    border-radius: 2px; 
    overflow: hidden; 
}

.progress-fill { 
    height: 100%; 
    width: 45%; 
    background: #ffffff; 
    border-radius: 2px; 
    animation: loadShimmy 1.5s infinite linear;
}

@keyframes loadShimmy { 
    0% { transform: translateX(-100%); } 
    100% { transform: translateX(250%); } 
}

/* Timeline - Post-upload (unchanged) */
.timeline-box { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
.timeline-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; flex: 1; }
.timeline-group-header { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--text-muted); margin: 16px 0 8px; letter-spacing: 0.5px; }

.timeline-card { background: var(--bg-card); border: 1px solid var(--border-color); padding: 12px; border-radius: 6px; cursor: pointer; transition: all 0.2s; }
.timeline-card:hover { border-color: var(--primary); background: var(--primary-light); }
.timeline-card.active { border-color: var(--primary); background: var(--primary-light); }
.timeline-card .domain-text { font-weight: 600; font-size: 14px; color: var(--text-primary); word-break: break-all; margin-bottom: 4px; }
.timeline-card .meta-text { font-size: 12px; color: var(--text-muted); display: flex; justify-content: space-between; }
.badge-ghost { font-size: 9px; padding: 2px 6px; background: rgba(245, 158, 11, 0.1); color: var(--warning); border: 1px solid rgba(245, 158, 11, 0.2); border-radius: 4px; font-weight: 600; }

/* Main Viewport - Post-upload (unchanged) */
.analysis-viewport { flex: 1; display: flex; flex-direction: column; background: var(--bg-main); overflow: hidden; }
.viewport-header { padding: var(--spacing-lg) var(--spacing-2xl); background: var(--bg-panel); border-bottom: 1px solid var(--border-color); }
.viewport-header h2 { font-size: 20px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.viewport-header p { font-size: 13px; color: var(--text-secondary); }

/* Tabs - Post-upload (unchanged) */
.tabs-nav { display: flex; background: var(--bg-main); border-bottom: 1px solid var(--border-color); padding: 0 var(--spacing-2xl); gap: 4px; }
.tab-link { background: none; border: none; padding: 14px 16px; font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; }
.tab-link:hover { color: var(--text-primary); }
.tab-link.active { color: var(--primary); border-bottom-color: var(--primary); }

.tabs-content { flex: 1; overflow-y: auto; padding: var(--spacing-xl); }
.tab-pane { display: none; height: 100%; }
.tab-pane.active { display: block; }

/* Protocol Cards - Post-upload (unchanged) */
.protocol-card { border: 1px solid var(--border-color); background: var(--bg-card); border-radius: 8px; margin-bottom: 16px; overflow: hidden; }
.protocol-card-header { padding: 14px 18px; background: var(--bg-panel); cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.protocol-card-header:hover { background: var(--bg-light); }
.header-meta-group { display: flex; align-items: center; gap: 12px; }
.proto-tag { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 4px; background: var(--bg-main); color: var(--text-primary) !important; }
.proto-friendly-title { font-size: 14px; font-weight: 600; color: var(--text-primary) !important; }
.toggle-indicator { font-size: 11px; color: var(--text-muted); }
.protocol-card-body { display: none; padding: 20px; border-top: 1px solid var(--border-color); background: var(--bg-panel); }
.proto-text-explanation { font-size: 13px; line-height: 1.6; padding: 12px 16px; border-left: 3px solid var(--primary); border-radius: 0 4px 4px 0; margin-bottom: 24px; background: var(--bg-main); }

/* Sequence Diagram - Post-upload (unchanged) */
.sequence-diagram-timeline { position: relative; padding: 24px 0; margin: 0 auto; max-width: 800px; display: flex; flex-direction: column; gap: 20px; }
.sequence-lifelines-container { position: absolute; top: 0; bottom: 0; left: 10%; right: 10%; display: flex; justify-content: space-between; pointer-events: none; }
.lifeline-pole { width: 1px; background: var(--border-color); height: 100%; }
.seq-message-row { display: flex; align-items: center; width: 100%; position: relative; min-height: 80px; padding: 32px 0; }
.seq-axis-label { width: 12%; font-size: 11px; color: var(--text-primary); text-align: center; background: var(--bg-main); border: 1px solid var(--border-color); padding: 6px 8px; border-radius: 4px; z-index: 2; font-weight: 500; }
.seq-vector-container { flex: 1; margin: 0 16px; position: relative; display: flex; align-items: center; height: 100%; }
.seq-arrow-line { position: absolute; top: 50%; left: 0; right: 0; height: 2px; background-color: var(--primary); transform: translateY(-50%); }
.seq-arrow-line.arrow-right::after { content: ''; position: absolute; right: -1px; top: -4px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent var(--primary); }
.seq-arrow-line.arrow-left::after { content: ''; position: absolute; left: -1px; top: -4px; border-style: solid; border-width: 5px 8px 5px 0; border-color: transparent var(--primary) transparent transparent; }
.seq-message-content { position: absolute; top: 50%; transform: translateY(-180%); display: flex; align-items: center; gap: 8px; z-index: 3; }
.msg-align-right { left: 10%; }
.msg-align-left { right: 10%; }
.seq-step-badge { font-size: 10px; font-weight: 700; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--primary); color: white; flex-shrink: 0; }
.seq-msg-text-bubble { background-color: var(--bg-main); border: 1px solid var(--border-color); padding: 8px 12px; border-radius: 6px; color: var(--text-primary); font-size: 12px; font-weight: 500; white-space: normal; max-width: 350px; line-height: 1.4; text-align: left; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

/* Tree View - Post-upload (unchanged) */
.tree-meta-summary { font-size: 13px; color: var(--text-secondary); margin-bottom: 20px; }
.tree-meta-summary strong { color: var(--text-primary); }
.tree-category-block { margin-bottom: 20px; }
.category-header-line { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.category-indicator-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.category-title-text { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.category-title-text small { color: var(--text-muted); font-size: 11px; margin-left: 4px; }
.tree-nodes-wrapper { border-left: 1px solid var(--border-color); margin-left: 4px; padding-left: 16px; }
.tree-node-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.tree-branch-symbol { font-size: 12px; color: var(--text-muted); }
.node-endpoint-string { font-size: 12px; color: var(--text-secondary); }

/* Evidence Table - Post-upload (unchanged) */
.evidence-split-layout { display: flex; gap: 24px; height: calc(100vh - 200px); overflow: hidden; }
.evidence-table-pane { flex: 4; display: flex; flex-direction: column; overflow: hidden; }
.table-wrapper { border: 1px solid var(--border-color); border-radius: 8px; overflow-y: auto; flex: 1; background: var(--bg-card); }
.packet-table { width: 100%; border-collapse: collapse; text-align: left; }
.packet-table th { background: var(--bg-panel); padding: 12px; font-weight: 600; font-size: 12px; color: var(--text-secondary); border-bottom: 2px solid var(--border-color); position: sticky; top: 0; z-index: 10; }
.packet-table td { padding: 12px; border-bottom: 1px solid var(--border-color); font-size: 12px; }
.packet-table tr:hover td { background: var(--bg-light); }
.packet-table tr.selected-row td { background: var(--primary-light); }
.proto-badge-pill { font-size: 10px; font-weight: 600; padding: 2px 6px; border: 1px solid var(--border-color); border-radius: 4px; background: var(--bg-main); }
.mono-address-string { font-family: 'SF Mono', Monaco, monospace; color: var(--text-muted); font-size: 11px; }
.packet-info-string-cell { font-family: 'SF Mono', Monaco, monospace; font-size: 11px; max-width: 300px; overflow: hidden; text-overflow: ellipsis; color: var(--text-secondary); }

/* Explanation Pane - Post-upload (unchanged) */
.explanation-pane { flex: 3; background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 8px; padding: 20px; display: flex; flex-direction: column; overflow-y: auto; }
.active-breakdown-wrapper { display: flex; flex-direction: column; gap: 16px; }
.breakdown-meta-header h4 { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.raw-data-string { font-family: 'SF Mono', Monaco, monospace; font-size: 11px; color: var(--text-muted); }
.plain-english-summary-paragraph { font-size: 13px; line-height: 1.6; color: var(--text-secondary); padding-bottom: 14px; border-bottom: 1px solid var(--border-color); }
.binary-header-modelling-title { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.5px; margin-top: 8px; }
.binary-wire-stack-container { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.wire-header-box { border: 1px solid var(--border-color); border-radius: 6px; overflow: hidden; background: var(--bg-card); }
.wire-box-header { background: var(--bg-panel); padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); cursor: pointer; font-weight: 600; font-size: 12px; color: var(--text-primary); }
.wire-box-header:hover { background: var(--bg-light); }
.layer-tag { font-size: 10px; color: var(--text-muted); }
.wire-box-fields-grid { display: grid; grid-template-columns: repeat(12, 1fr); padding: 8px; gap: 6px; }
.wire-box-fields-grid.collapsed { display: none; }
.wire-field { border: 1px solid var(--border-color); background: var(--bg-main); padding: 6px; border-radius: 4px; display: flex; flex-direction: column; gap: 2px; }
.wire-field label { font-size: 9px; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.wire-field span { font-family: 'SF Mono', Monaco, monospace; font-size: 11px; color: var(--text-primary); }

/* Grid Spans */
.span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-6 { grid-column: span 6; } .span-8 { grid-column: span 8; } .span-12 { grid-column: span 12; }

/* Layer Colors - Post-upload (unchanged) */
.layer-ethernet { border-color: var(--border-color); } .layer-ethernet .wire-box-header { color: var(--text-secondary); }
.layer-ip { border-color: var(--border-color); } .layer-ip .wire-box-header { color: var(--text-primary); }
.layer-transport-tcp { border-color: var(--primary); } .layer-transport-tcp .wire-box-header { color: var(--primary); }
.layer-transport-udp { border-color: var(--border-color); } .layer-transport-udp .wire-box-header { color: var(--text-secondary); }

/* Academic Concepts - Post-upload (unchanged) */
.academic-concepts-stack { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; border-top: 1px solid var(--border-color); padding-top: 16px; }
.concepts-header-label { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.5px; }
.concept-block { border: 1px solid var(--border-color); background: var(--bg-main); padding: 12px; border-radius: 6px; }
.concept-block h5 { font-size: 12px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.concept-block p { font-size: 12px; line-height: 1.5; color: var(--text-secondary); }

/* Alert Banner - Post-upload (unchanged) */
.alert-ghost-banner { background: var(--primary-light); border: 1px solid var(--primary); padding: 14px 20px; font-size: 13px; color: var(--text-primary); line-height: 1.5; border-radius: 6px; margin-bottom: 20px; }
.alert-ghost-banner strong { color: var(--text-primary); font-weight: 600; }

/* Placeholder Text - Post-upload (unchanged) */
.placeholder-text { color: var(--text-muted); font-style: italic; text-align: center; margin-top: 40px; }

/* Scrollbar - Post-upload (unchanged) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-light); }
::-webkit-scrollbar-thumb { background: var(--border-dark); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }