:root {
--primary:#4a90e2;
--bg:#fff;
--text:#333;
--card-bg:#f8f9fa;
--border:#dee2e6;
--success:#28a745;
--warning:#ffc107;
--danger:#dc3545;
--shadow:0 2px 10px rgba(0,0,0,0.1);
}
[x-cloak]{display:none}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);transition:all 0.3s;min-height:100vh;display:flex;flex-direction:column}
.dark{--bg:#1a1a1a;--text:#f0f0f0;--card-bg:#2d2d2d;--border:#404040}
.header{background:var(--primary);color:white;padding:1rem;display:flex;justify-content:space-between;align-items:center}
.header-title{text-align:center}
.header-title h1{margin:0;font-size:1.5rem}
.header-title p{margin:0;opacity:0.9;font-size:0.9rem}
.controls{display:flex;gap:0.5rem}
.icon-btn{background:rgba(255,255,255,0.2);border:none;color:white;padding:0.5rem;border-radius:6px;cursor:pointer;transition:background 0.2s}
.icon-btn:hover{background:rgba(255,255,255,0.3)}
.main-container{flex:1;padding:1rem;max-width:1400px;margin:0 auto;width:100%}
.upload-section{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh}
.drop-zone{border:2px dashed var(--border);border-radius:12px;padding:3rem;text-align:center;cursor:pointer;transition:all 0.3s;background:var(--card-bg);min-width:400px}
.drop-zone:hover,.drag-over{border-color:var(--primary);background:rgba(74,144,226,0.1)}
.upload-icon{font-size:4rem;margin-bottom:1rem}
.drop-zone h3{margin-bottom:0.5rem;color:var(--text)}
.format-info{font-size:0.85rem;color:var(--text);opacity:0.7;margin-top:1rem}
.keyboard-hint{font-size:0.8rem;color:var(--primary);margin-top:0.5rem;font-style:italic}
.upload-progress{margin-top:2rem;width:100%;max-width:400px}
.progress-bar{height:8px;background:var(--border);border-radius:4px;overflow:hidden}
.progress-fill{height:100%;background:var(--primary);transition:width 0.3s}
.dashboard{display:flex;flex-direction:column;gap:2rem}
.session-controls{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.session-selector{display:flex;align-items:center;gap:0.5rem}
.session-selector select{padding:0.5rem;border:1px solid var(--border);border-radius:6px;background:var(--card-bg);color:var(--text)}
.control-buttons{display:flex;gap:0.5rem}
.btn{padding:0.5rem 1rem;border:1px solid var(--border);border-radius:6px;background:var(--card-bg);color:var(--text);cursor:pointer;transition:all 0.2s}
.btn:hover{background:var(--primary);color:white;border-color:var(--primary)}
.btn.active{background:var(--primary);color:white;border-color:var(--primary)}
.comparison-controls{background:var(--card-bg);border:1px solid var(--border);border-radius:6px;padding:1rem;margin-bottom:1rem;display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.comparison-selector{display:flex;gap:0.5rem;align-items:center}
.comparison-selector label{color:var(--text);font-weight:500}
.comparison-selector select{padding:0.5rem;border:1px solid var(--border);border-radius:4px;background:var(--bg);color:var(--text)}
.comparison-info{color:var(--text);font-size:0.9rem;font-style:italic}
.overview-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.metric-card{background:var(--card-bg);border:1px solid var(--border);border-radius:8px;padding:1.5rem;text-align:center;box-shadow:var(--shadow)}
.metric-value{font-size:2rem;font-weight:bold;color:var(--primary);margin-bottom:0.5rem}
.metric-label{font-size:0.9rem;color:var(--text);opacity:0.8}
.metric-band{font-size:0.8rem;margin-top:0.5rem;padding:0.25rem 0.5rem;border-radius:12px;display:inline-block}
.metric-band{background:var(--border);color:var(--text)}
.charts-section{display:flex;flex-direction:column;gap:2rem}
.chart-container{background:var(--card-bg);border:1px solid var(--border);border-radius:8px;padding:1.5rem;box-shadow:var(--shadow);max-height:400px;overflow:hidden}
.chart-container h3{margin-bottom:1rem;color:var(--text)}
.chart-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-wrap:wrap}
.chart-controls{display:flex;gap:0.5rem;align-items:center;font-size:0.9rem}
.chart-controls label{color:var(--text);font-weight:500}
.chart-controls select{padding:0.25rem 0.5rem;border:1px solid var(--border);border-radius:4px;background:var(--bg);color:var(--text);font-size:0.8rem}
.timestamp-info{margin-top:1rem;padding:0.75rem;background:var(--bg);border:1px solid var(--border);border-radius:6px;font-size:0.9rem}
.timestamp-details{color:var(--text)}
.chart{height:300px;width:100%;max-height:300px}
.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.timing-chart{height:200px;width:100%;max-height:200px}
.heatmap{height:200px;width:100%;border:1px solid var(--border);border-radius:4px}
.heatmap-replay-container{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
.heatmap-section{display:flex;flex-direction:column;gap:1rem}
.replay-controls{display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap;font-size:0.9rem}
.replay-controls label{color:var(--text);font-weight:500}
.replay-controls select{padding:0.25rem 0.5rem;border:1px solid var(--border);border-radius:4px;background:var(--bg);color:var(--text);font-size:0.8rem}
.replay-section{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:1rem}
.replay-display h4{margin-bottom:1rem;color:var(--text)}
.replay-text-container{position:relative;background:var(--card-bg);border:1px solid var(--border);border-radius:4px;padding:1rem;min-height:120px;font-family:monospace;font-size:0.9rem;line-height:1.4;margin-bottom:1rem}
.replay-text{color:var(--text)}
.replay-cursor{position:absolute;top:1rem;width:2px;height:1.2em;background:var(--primary);animation:blink 1s infinite}
.replay-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:0.5rem;font-size:0.85rem}
.stat{display:flex;justify-content:space-between;padding:0.5rem;background:var(--card-bg);border-radius:4px}
.stat .label{color:var(--text);opacity:0.8}
.stat span:last-child{font-weight:bold;color:var(--primary)}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
.digraph-chart{height:300px;width:100%;max-height:300px}
.flow-analysis-grid{display:grid;grid-template-columns:2fr 1fr;gap:2rem;align-items:start}
.flow-chart-section h4,.flow-stats-section h4{margin-bottom:1rem;color:var(--text);font-size:1rem}
.flow-chart{height:250px;width:100%;border:1px solid var(--border);border-radius:4px;max-height:250px}
.flow-stats{display:grid;gap:0.75rem}
.flow-stat{display:flex;justify-content:space-between;align-items:center;padding:0.75rem;background:var(--bg);border:1px solid var(--border);border-radius:6px}
.flow-label{color:var(--text);opacity:0.8;font-size:0.9rem}
.flow-value{font-weight:bold;color:var(--primary);font-size:0.9rem}
.recommendations-panel{background:var(--card-bg);border:1px solid var(--border);border-radius:8px;padding:1.5rem;box-shadow:var(--shadow)}
.recommendations-panel h3{margin-bottom:1rem;color:var(--text)}
.recommendation-cards{display:grid;gap:1rem}
.recommendation-card{border:1px solid var(--border);border-radius:6px;padding:1rem;background:var(--bg)}
.recommendation-card.high{border-left:4px solid var(--danger)}
.recommendation-card.medium{border-left:4px solid var(--warning)}
.recommendation-card.low{border-left:4px solid var(--success)}
.rec-header{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem}
.rec-icon{font-size:1.2rem}
.rec-title{font-weight:bold;color:var(--text)}
.rec-content{color:var(--text);opacity:0.9;line-height:1.4}
.tooltip{position:fixed;background:rgba(0,0,0,0.9);color:white;padding:0.5rem;border-radius:4px;font-size:0.8rem;max-width:200px;z-index:1000;pointer-events:none}
.session-summary{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;z-index:1001}
.summary-content{background:var(--card-bg);border-radius:8px;padding:2rem;max-width:500px;max-height:70vh;overflow-y:auto}
.sessions-list{margin-top:1rem}
.session-item{padding:0.75rem;border:1px solid var(--border);border-radius:6px;margin-bottom:0.5rem;background:var(--bg)}
.progress-summary{display:grid;gap:1rem;margin-bottom:2rem}
.progress-stat{display:flex;justify-content:space-between;align-items:center;padding:0.75rem;background:var(--bg);border:1px solid var(--border);border-radius:6px}
.trend.positive{color:var(--success)}
.trend.negative{color:var(--danger)}
.progress-timeline{display:grid;gap:1rem}
.timeline-item{display:flex;gap:1rem;align-items:center}
.timeline-marker{width:2rem;height:2rem;background:var(--primary);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:0.8rem}
.timeline-content{flex:1;padding:0.75rem;background:var(--bg);border:1px solid var(--border);border-radius:6px}
.metric-card{transition:transform 0.2s,box-shadow 0.2s}
.metric-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.metric-band.expert{background:var(--success);color:white}
.metric-band.advanced{background:#17a2b8;color:white}
.metric-band.intermediate{background:var(--warning);color:black}
.metric-band.beginner{background:var(--danger);color:white}
.upload-progress p{text-align:center;margin-top:0.5rem;font-size:0.9rem}
.chart-container{transition:transform 0.2s}
.chart-container:hover{transform:translateY(-1px)}
.version{position:fixed;bottom:1rem;right:1rem;font-size:0.7rem;color:var(--text);opacity:0.5}
@media (max-width:768px){
.header{flex-direction:column;gap:1rem}
.session-controls{flex-direction:column;align-items:stretch}
.control-buttons{justify-content:center}
.chart-grid{grid-template-columns:1fr}
.drop-zone{min-width:300px;padding:2rem}
}