:root{--bg-primary: #1a1a2e;--bg-card: #16213e;--bg-elevated: #1f2b4d;--border-color: #2a3a5e;--border-hover: #3d5a8f;--text-primary: #e8e8e8;--text-secondary: #8899bb;--text-muted: #5f6f93;--color-before: #ff6b6b;--color-after: #51cf66;--color-accent: #4dabf7;--color-warning: #fcc419;--input-bg: #0f1630;--input-border: #2a3a5e;--checkbox-accent: #4dabf7;--font-mono: "JetBrains Mono", "Cascadia Code", Consolas, "Courier New", monospace}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%}body{background:var(--bg-primary);color:var(--text-primary);font-family:Segoe UI,PingFang SC,Microsoft YaHei,system-ui,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased}#app{height:100vh;display:flex;overflow:hidden}.charts-area{flex:1;min-width:0;display:flex;flex-direction:column;padding:16px;gap:16px;overflow-y:auto}.charts-area h1{margin:0;font-size:18px;font-weight:600;color:var(--text-primary)}.charts-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.help-btn{width:auto;flex-shrink:0;padding:7px 14px;font-size:13px;width:auto!important}.charts-area .subtitle{margin:4px 0 0;font-size:12px;color:var(--text-secondary)}.chart-columns{display:flex;gap:16px;flex:1;min-height:0}.chart-card{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg-card);border:1px solid var(--border-color);border-radius:10px;overflow:hidden}.chart-card.before{border-top:3px solid var(--color-before)}.chart-card.after{border-top:3px solid var(--color-after)}.chart-card-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border-color);gap:8px}.chart-card-title{font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}.chart-card-title .badge{font-size:11px;padding:2px 8px;border-radius:10px;font-weight:500}.badge.before{background:#ff6b6b26;color:var(--color-before)}.badge.after{background:#51cf6626;color:var(--color-after)}.chart-toolbar{display:flex;gap:6px;align-items:center}.chart-toolbar .btn{width:auto;padding:4px 10px;font-size:11px;font-weight:500;border-radius:4px}.opt-tags{display:flex;flex-wrap:wrap;gap:4px;padding:0 14px 8px}.opt-tag{font-size:11px;font-family:var(--font-mono);color:var(--color-after);background:#51cf661a;border:1px solid rgba(81,207,102,.3);padding:1px 6px;border-radius:4px}.chart-wrapper{position:relative;flex:1;min-height:260px;margin:0 14px}.chart-canvas{width:100%;height:100%;min-height:260px}.stats-panel{position:absolute;top:8px;right:8px;z-index:10;opacity:.85;border-radius:4px;overflow:hidden}.append-progress{display:none;margin:0 14px 8px;height:4px;border-radius:2px;background:var(--input-border);overflow:hidden}.append-progress.active{display:block}.append-progress .bar{height:100%;width:0;background:var(--color-accent);transition:width .1s linear}.append-progress .progress-text{position:absolute;right:0;top:-2px;font-size:10px;color:var(--text-secondary);font-family:var(--font-mono)}.performance-stats{margin:10px 14px 14px;padding:10px 12px;background:var(--bg-elevated);border:1px solid var(--border-color);border-radius:8px;display:grid;grid-template-columns:repeat(2,1fr);gap:6px 14px}.stat-item{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:12px}.stat-item .stat-label{color:var(--text-secondary);white-space:nowrap}.stat-item .stat-value{font-family:var(--font-mono);font-weight:600;font-size:13px;color:var(--text-primary);white-space:nowrap}.stat-value.improved{color:var(--color-after);position:relative}.stat-value.improved:after{content:" ▲";font-size:10px}.stat-value.worse{color:var(--color-before);position:relative}.stat-value.worse:after{content:" ▼";font-size:10px}.stat-item{position:relative;cursor:help}.stat-tip{display:none;position:absolute;bottom:130%;left:0;z-index:50;width:220px;padding:8px 10px;background:#0f1630;border:1px solid var(--border-hover);border-radius:6px;font-size:11px;line-height:1.5;color:var(--text-secondary);box-shadow:0 4px 16px #00000080;font-family:Segoe UI,PingFang SC,Microsoft YaHei,sans-serif}.stat-item:hover .stat-tip{display:block}.loading-mask{position:absolute;inset:0;z-index:15;display:none;align-items:center;justify-content:center;background:#1a1a2e8c;border-radius:6px;font-size:13px;color:var(--text-secondary);pointer-events:none}.loading-mask.active{display:flex}@media(max-width:1199px){#app{flex-direction:column;overflow:auto}.charts-area{overflow:visible;padding-top:8px}.chart-columns{flex-direction:column}.chart-card{min-height:420px}}.help-modal{position:fixed;inset:0;z-index:10001;display:none}.help-modal.open{display:block}.help-modal-backdrop{position:absolute;inset:0;background:#0a0c18b8;backdrop-filter:blur(2px)}.help-modal-dialog{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(960px,calc(100vw - 48px));height:min(82vh,820px);display:flex;flex-direction:column;background:var(--bg-card);border:1px solid var(--border-hover);border-radius:12px;box-shadow:0 24px 64px #0009;overflow:hidden}.help-modal-header{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid var(--border-color);flex-shrink:0}.help-modal-title{font-size:15px;font-weight:600;color:var(--text-primary)}.help-modal-close{width:30px;height:30px;border:none;border-radius:6px;background:transparent;color:var(--text-secondary);font-size:15px;cursor:pointer;transition:all .15s}.help-modal-close:hover{background:var(--bg-elevated);color:var(--color-before)}.help-modal-body{flex:1;overflow-y:auto;padding:20px 28px 32px}.help-modal-content{font-size:14px;line-height:1.75;color:var(--text-primary)}.help-modal-content h1{font-size:22px;border-bottom:1px solid var(--border-color);padding-bottom:10px;margin:6px 0 20px}.help-modal-content h2{font-size:17px;margin:28px 0 12px;color:var(--color-accent);padding-left:10px;border-left:3px solid var(--color-accent);scroll-margin-top:16px}.help-modal-content h3{font-size:15px;margin:20px 0 10px}.help-modal-content h4{font-size:14px;margin:16px 0 8px;color:var(--text-secondary)}.help-modal-content p{margin:10px 0}.help-modal-content a{color:var(--color-accent);text-decoration:none}.help-modal-content a:hover{text-decoration:underline}.help-modal-content blockquote{margin:12px 0;padding:10px 14px;background:#4dabf714;border-left:3px solid var(--color-accent);border-radius:0 6px 6px 0;color:var(--text-secondary)}.help-modal-content blockquote p{margin:4px 0}.help-modal-content code{font-family:var(--font-mono);font-size:12.5px;background:var(--bg-elevated);border:1px solid var(--border-color);border-radius:4px;padding:1px 6px;color:var(--color-warning)}.help-modal-content pre{background:#0f1630;border:1px solid var(--border-color);border-radius:8px;padding:14px 16px;overflow-x:auto;margin:12px 0}.help-modal-content pre code{background:transparent;border:none;padding:0;color:#a8d8a8;font-size:12.5px;line-height:1.6}.help-modal-content table{width:100%;border-collapse:collapse;margin:12px 0;font-size:13px}.help-modal-content th,.help-modal-content td{border:1px solid var(--border-color);padding:8px 12px;text-align:left;vertical-align:top}.help-modal-content th{background:var(--bg-elevated);color:var(--color-accent);font-weight:600;white-space:nowrap}.help-modal-content tr:nth-child(2n) td{background:#1f2b4d59}.help-modal-content ul,.help-modal-content ol{padding-left:22px;margin:8px 0}.help-modal-content li{margin:4px 0}.help-modal-content li::marker{color:var(--color-accent)}.help-modal-content hr{border:none;border-top:1px solid var(--border-color);margin:24px 0}.help-modal-content strong{color:var(--color-warning)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-hover);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#4a6a9e}.control-panel{width:280px;flex-shrink:0;display:flex;flex-direction:column;gap:16px;padding:16px;background:var(--bg-card);border-right:1px solid var(--border-color);overflow-y:auto;max-height:100vh;position:sticky;top:0}.panel-section{background:var(--bg-elevated);border:1px solid var(--border-color);border-radius:8px;padding:12px}.panel-section h3{margin:0 0 10px;font-size:13px;font-weight:600;color:var(--color-accent);letter-spacing:.5px;display:flex;align-items:center;gap:6px}.panel-section h3:before{content:"";width:4px;height:14px;border-radius:2px;background:var(--color-accent)}.control-group{margin-bottom:12px}.control-group:last-child{margin-bottom:0}.control-label{display:block;font-size:12px;color:var(--text-secondary);margin-bottom:6px}.control-label .label-value{color:var(--text-primary);font-weight:600;font-family:var(--font-mono);margin-left:4px}.slider-row{display:flex;align-items:center;gap:10px}.slider-row input[type=range]{flex:1;min-width:0}.slider-row .num-input{width:92px;flex-shrink:0}input[type=range]{-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:var(--input-border);outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--color-accent);border:2px solid var(--bg-primary);cursor:grab;transition:transform .15s}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--color-accent);border:2px solid var(--bg-primary);cursor:grab}.quick-counts{display:flex;gap:6px;margin-top:8px}.quick-counts button{flex:1;padding:4px 0;font-size:11px;font-family:var(--font-mono);background:var(--input-bg);border:1px solid var(--input-border);border-radius:4px;color:var(--text-secondary);cursor:pointer;transition:all .15s}.quick-counts button:hover{color:var(--color-accent);border-color:var(--color-accent)}.quick-counts button.active{color:var(--bg-primary);background:var(--color-accent);border-color:var(--color-accent);font-weight:600}select{width:100%;padding:6px 8px;font-size:13px;color:var(--text-primary);background:var(--input-bg);border:1px solid var(--input-border);border-radius:4px;outline:none;cursor:pointer;transition:border-color .15s}select:hover,select:focus{border-color:var(--color-accent)}select option{background:var(--input-bg);color:var(--text-primary)}input[type=number]{width:100%;padding:5px 8px;font-size:12px;font-family:var(--font-mono);color:var(--text-primary);background:var(--input-bg);border:1px solid var(--input-border);border-radius:4px;outline:none}input[type=number]:focus{border-color:var(--color-accent)}.checkbox-item{display:flex;align-items:flex-start;gap:8px;padding:6px 8px;border-radius:6px;cursor:pointer;transition:background .15s;user-select:none}.checkbox-item:hover{background:#4dabf714}.checkbox-item input[type=checkbox]{appearance:none;-webkit-appearance:none;width:16px;height:16px;flex-shrink:0;margin:1px 0 0;border:1.5px solid var(--input-border);border-radius:4px;background:var(--input-bg);cursor:pointer;position:relative;transition:all .15s}.checkbox-item input[type=checkbox]:checked{background:var(--color-accent);border-color:var(--color-accent)}.checkbox-item input[type=checkbox]:checked:after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid var(--bg-primary);border-width:0 2px 2px 0;transform:rotate(45deg)}.checkbox-item .checkbox-text{font-size:13px;color:var(--text-primary);line-height:1.35}.checkbox-item .checkbox-desc{display:block;font-size:11px;color:var(--text-muted);margin-top:2px}.checkbox-item input[type=checkbox]:checked~.checkbox-text{color:var(--color-accent)}.radio-group{display:flex;gap:8px}.radio-group label{flex:1;text-align:center;padding:6px 0;font-size:13px;color:var(--text-secondary);background:var(--input-bg);border:1px solid var(--input-border);border-radius:4px;cursor:pointer;transition:all .15s}.radio-group label:hover{border-color:var(--color-accent)}.radio-group input{display:none}.radio-group input:checked+span{color:var(--bg-primary)}.radio-group input:checked~.radio-text,.radio-group label:has(input:checked){background:var(--color-accent);border-color:var(--color-accent);color:var(--bg-primary);font-weight:600}.panel-actions{display:flex;flex-direction:column;gap:8px}.btn{width:100%;padding:9px 12px;font-size:13px;font-weight:600;border:none;border-radius:6px;cursor:pointer;transition:all .15s}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--color-accent);color:var(--bg-primary)}.btn-primary:hover:not(:disabled){filter:brightness(1.15)}.btn-secondary{background:var(--input-bg);color:var(--text-primary);border:1px solid var(--input-border)}.btn-secondary:hover:not(:disabled){border-color:var(--color-accent);color:var(--color-accent)}.btn-export{background:transparent;color:var(--text-secondary);border:1px dashed var(--input-border);font-size:12px;font-weight:400}.btn-export:hover:not(:disabled){color:var(--color-warning);border-color:var(--color-warning)}.export-row{display:flex;gap:8px}.export-row .btn{flex:1;padding:7px 0}.control-panel.busy{pointer-events:none;opacity:.6}.panel-toggle{display:none;width:100%;padding:10px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);font-size:14px;cursor:pointer;text-align:left}@media(max-width:1199px){.panel-toggle{display:block;position:sticky;top:0;z-index:30}.control-panel{position:fixed;left:0;top:46px;bottom:0;z-index:20;width:300px;max-width:90vw;max-height:calc(100vh - 46px);transform:translate(-110%);transition:transform .25s ease;box-shadow:4px 0 20px #0006}.control-panel.open{transform:translate(0)}}