*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{margin:0;overflow:hidden}#app{width:100%;max-width:100%;height:100vh}.app-root{color:#333;background:#f8f8fc;flex-direction:column;width:100%;max-width:100%;height:100vh;font-family:Segoe UI,system-ui,-apple-system,sans-serif;transition:background .3s,color .3s;display:flex;overflow:hidden}.app-root.dark{color:#ccc;background:#12121a}.app-header{color:#fff;z-index:10;background:linear-gradient(135deg,#f69,#f36);flex-shrink:0;align-items:center;gap:12px;padding:8px 20px;display:flex;box-shadow:0 2px 8px #ff33664d}.dark .app-header{background:linear-gradient(135deg,#c47,#a24)}.app-header h1{letter-spacing:-.5px;margin:0;font-size:22px;font-weight:700}.app-header .subtitle{opacity:.85;font-size:13px}.header-controls{margin-left:auto}.icon-btn{color:#fff;cursor:pointer;background:#fff3;border:none;border-radius:6px;padding:6px 10px;font-size:18px;transition:background .2s}.icon-btn:hover{background:#ffffff59}.app-body{flex:1;display:flex;overflow:hidden}.sidebar{background:#fff;border-right:1px solid #e5e4e7;flex-direction:column;flex-shrink:0;gap:4px;width:220px;min-width:220px;padding:12px;transition:background .3s,border-color .3s;display:flex;overflow-y:auto}.dark .sidebar{background:#1a1a24;border-color:#2e2e3a}.section{border-bottom:1px solid #eee;padding:8px 0}.dark .section{border-color:#2a2a36}.section:last-child{border-bottom:none}.section h3{text-transform:uppercase;letter-spacing:.5px;color:#888;margin:0 0 8px;font-size:12px;font-weight:600}.dark .section h3{color:#666}.file-input-wrapper{margin-bottom:8px}.file-label{color:#fff;cursor:pointer;background:#f69;border-radius:6px;padding:6px 14px;font-size:13px;font-weight:500;transition:background .2s;display:inline-block}.file-label:hover{background:#f36}.file-input{display:none}.current-file{color:#888;word-break:break-all;font-size:11px}.dark .current-file{color:#666}.info-grid{flex-direction:column;gap:4px;display:flex}.info-row{justify-content:space-between;padding:2px 0;font-size:12px;display:flex}.info-val{text-overflow:ellipsis;white-space:nowrap;text-align:right;max-width:120px;font-weight:500;overflow:hidden}.levels-section{border-top:1px solid #eee;margin-top:6px;padding-top:6px}.difficulty-selector{border-top:1px solid #eee;flex-direction:column;gap:4px;margin-top:8px;padding-top:8px;display:flex}.dark .difficulty-selector{border-color:#2a2a36}.diff-select{border:1px solid var(--border,#e5e4e7);color:#333;cursor:pointer;background:#fff;border-radius:5px;padding:4px 6px;font-family:inherit;font-size:12px}.dark .diff-select{color:#ccc;background:#2a2a36;border-color:#3a3a48}.dark .levels-section{border-color:#2a2a36}.levels-grid{flex-direction:column;gap:3px;display:flex}.level-row{background:#00000008;border-radius:3px;justify-content:space-between;align-items:center;padding:1px 4px;font-size:11px;display:flex}.dark .level-row{background:#ffffff08}.diff-name{color:#888;font-weight:500}.diff-lv{color:#f69;font-weight:700}.info-row .label{color:#888;font-weight:500}.dark .info-row .label{color:#666}.tap-label{color:#f69}.hold-label{color:#fa3}.slide-label{color:#fc0}.touch-label{color:#4af}.break-label{color:#f44}.note-count{font-weight:700}.speed-control{align-items:center;gap:8px;display:flex}.speed-slider,.slide-lead-slider{accent-color:#f69;cursor:pointer;flex:1}.speed-value{text-align:right;color:#f69;min-width:44px;font-size:13px;font-weight:600}.dark .speed-value{color:#f8a}.playback-controls{align-items:center;gap:8px;margin-bottom:8px;display:flex}.play-btn{cursor:pointer;background:#f0f0f5;border:none;border-radius:6px;padding:6px 12px;font-size:16px;transition:background .2s}.dark .play-btn{color:#ccc;background:#2a2a36}.play-btn:hover{background:#e0e0ea}.dark .play-btn:hover{background:#3a3a48}.time-display{color:#888;white-space:nowrap;font-family:Consolas,Courier New,monospace;font-size:12px}.dark .time-display{color:#666}.seek-bar{accent-color:#f69;cursor:pointer;width:100%;margin:4px 0}.legend{flex-direction:column;gap:5px;display:flex}.legend-item{align-items:center;gap:8px;font-size:12px;display:flex}.legend-dot{border-radius:3px;flex-shrink:0;width:12px;height:12px}.tap-dot{background:#f69}.hold-dot{background:#fa3}.slide-dot{background:#fc0}.touch-dot{background:#4af}.each-dot{background:#ff4;border:1px solid #ddd}.break-dot{background:#f44}.dark .each-dot{border-color:#555}.main-area{background:#f0f0f8;flex:1;transition:background .3s;position:relative;overflow:hidden}.dark .main-area{background:#1a1a2e}.chart-canvas{width:100%;height:100%;display:block}.placeholder{pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.placeholder p{color:#aaa;font-size:18px}.dark .placeholder p{color:#444}@media (width<=768px){.app-body{flex-direction:column}.sidebar{border-bottom:1px solid #e5e4e7;border-right:none;flex-shrink:0;width:100%;min-width:0;max-height:200px}.dark .sidebar{border-color:#2e2e3a}.main-area{flex:1;min-height:0}}