*{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary:#1a1a2e;--bg-secondary:#16213e;--bg-card:#1f2937;--text-primary:#f1f5f9;--text-secondary:#94a3b8;--accent:#3b82f6;--accent-hover:#2563eb;--success:#22c55e;--warning:#f59e0b;--error:#ef4444;--border:#374151}body{background:var(--bg-primary);color:var(--text-primary);min-height:100vh;font-family:system-ui,-apple-system,sans-serif}#root{flex-direction:column;min-height:100vh;display:flex}header{background:var(--bg-secondary);border-bottom:1px solid var(--border);padding:1rem 2rem}header .logo{color:var(--text-primary);font-size:1.5rem;font-weight:700;text-decoration:none}main{flex:1;width:100%;max-width:1400px;margin:0 auto;padding:2rem}footer{background:var(--bg-secondary);text-align:center;color:var(--text-secondary);border-top:1px solid var(--border);padding:1rem 2rem}button{cursor:pointer;border:none;border-radius:.5rem;padding:.75rem 1.5rem;font-size:1rem;font-weight:500;transition:background .2s}button.primary{background:var(--accent);color:#fff}button.primary:hover{background:var(--accent-hover)}button:disabled{opacity:.5;cursor:not-allowed}input,select{background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-primary);border-radius:.5rem;padding:.75rem;font-size:1rem}input:focus,select:focus{border-color:var(--accent);outline:none}.upload-page{text-align:center;max-width:800px;margin:0 auto}.upload-page h1{margin-bottom:.5rem;font-size:2.5rem}.upload-page .subtitle{color:var(--text-secondary);margin-bottom:3rem;font-size:1.1rem}.upload-container{max-width:600px;margin:0 auto}.upload-container form{flex-direction:column;gap:1.5rem;display:flex}.dropzone{border:2px dashed var(--border);text-align:center;cursor:pointer;border-radius:1rem;padding:3rem;transition:border-color .2s,background .2s}.dropzone:hover,.dropzone.dragover{border-color:var(--accent);background:#3b82f61a}.dropzone-content{flex-direction:column;align-items:center;gap:1rem;display:flex}.dropzone-content svg{color:var(--text-secondary)}.dropzone-text{color:var(--text-primary);font-size:1.1rem}.dropzone-hint{color:var(--text-secondary);font-size:.9rem}.options{grid-template-columns:1fr 1fr;gap:1rem;display:grid}.option-group{flex-direction:column;gap:.5rem;display:flex}.option-group label{color:var(--text-secondary);font-size:.9rem}.progress-container{flex-direction:column;gap:.5rem;display:flex}.progress-bar{background:var(--bg-secondary);border-radius:4px;height:8px;overflow:hidden}.progress-fill{background:var(--accent);height:100%;transition:width .3s}.progress-text{color:var(--text-secondary);text-align:center;font-size:.9rem}.error-message{color:var(--error);text-align:center}.loading-container{flex-direction:column;justify-content:center;align-items:center;gap:1rem;min-height:50vh;display:flex}.spinner{border:4px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:48px;height:48px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.error-container{text-align:center;padding:3rem}.error-container h2{color:var(--error);margin-bottom:1rem}.back-link{color:var(--accent);margin-top:1rem;text-decoration:none;display:inline-block}.back-link:hover{text-decoration:underline}.analysis-page{flex-direction:column;gap:2rem;display:flex}.game-header{text-align:center}.game-header h1{margin-bottom:.75rem;font-size:1.75rem}.game-meta{color:var(--text-secondary);flex-wrap:wrap;justify-content:center;gap:1.5rem;display:flex}.game-meta .result{color:var(--accent);font-weight:700}.stats-row{grid-template-columns:1fr 1fr;gap:1.5rem;display:grid}@media (width<=768px){.stats-row{grid-template-columns:1fr}}.stats-card{background:var(--bg-card);border:1px solid var(--border);border-radius:1rem;padding:1.5rem}.card-header{margin-bottom:1.5rem}.player-info{align-items:center;gap:.75rem;display:flex}.piece-icon{border:2px solid var(--border);border-radius:50%;width:40px;height:40px}.piece-icon.white{background:#fff}.piece-icon.black{background:#1a1a1a}.player-info h3{margin-bottom:.1rem;font-size:1.1rem}.elo{color:var(--text-secondary);font-size:.9rem}.side-label{text-transform:uppercase;color:var(--accent);letter-spacing:.05em;margin-bottom:.2rem;font-size:.75rem;font-weight:600;display:block}.stats-grid{grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.5rem;display:grid}.stat{text-align:center}.stat-value{color:var(--accent);font-size:1.5rem;font-weight:700;display:block}.stat-label{color:var(--text-secondary);font-size:.8rem}.move-quality{background:var(--bg-secondary);border-radius:.5rem;justify-content:space-between;margin-bottom:1rem;padding:1rem;display:flex}.quality-item{text-align:center}.quality-count{font-size:1.25rem;font-weight:700;display:block}.quality-label{color:var(--text-secondary);font-size:.75rem}.quality-item.blunder .quality-count{color:var(--error)}.quality-item.mistake .quality-count{color:var(--warning)}.quality-item.inaccuracy .quality-count{color:#60a5fa}.total-moves{text-align:center;color:var(--text-secondary);font-size:.9rem}.chart-section{width:100%}.main-content{grid-template-columns:auto 1fr;gap:1.5rem;display:grid}@media (width<=1024px){.main-content{grid-template-columns:1fr}}.moves-section h2{margin-bottom:1rem;font-size:1.25rem}.move-table-wrapper{background:var(--bg-card);border:1px solid var(--border);border-radius:1rem;max-height:500px;overflow-y:auto}.move-table{border-collapse:collapse;width:100%;font-size:.9rem}.move-table thead{background:var(--bg-secondary);position:sticky;top:0}.move-table th{text-align:left;color:var(--text-secondary);border-bottom:1px solid var(--border);padding:.75rem 1rem;font-weight:600}.move-table td{border-bottom:1px solid var(--border);padding:.5rem 1rem}.move-row{cursor:pointer;transition:background .15s}.move-row:hover{background:#3b82f61a}.move-row.selected{background:#3b82f633}.move-row.blunder{background:#ef44441a}.move-row.mistake{background:#f59e0b1a}.move-row.inaccuracy{background:#60a5fa0d}.move-played{font-weight:500}.symbol{color:var(--error);margin-left:.25rem}.move-class.blunder{color:var(--error);font-weight:600}.move-class.mistake{color:var(--warning);font-weight:600}.move-class.inaccuracy{color:#60a5fa}.move-class.best,.move-class.good,.move-match.yes{color:var(--success)}.move-match.no{color:var(--text-secondary)}