:root{color-scheme:light;--color-bg: #f1f5f9;--color-surface: #ffffff;--color-border: #e2e8f0;--color-text: #1e293b;--color-text-muted: #64748b;--color-primary: #2563eb;--color-primary-hover: #1d4ed8;--color-primary-soft: #eef2ff;--radius: 10px;--radius-sm: 7px;--shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);--shadow-md: 0 8px 24px rgba(15, 23, 42, .1);--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}*,*:before,*:after{box-sizing:border-box}body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.app{max-width:1180px;margin:0 auto;padding:32px 24px 64px}.app-header{margin-bottom:20px}.app-header-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.app-title{display:flex;align-items:flex-end;gap:10px;min-width:0;margin-bottom:16px}.app-title svg{flex:0 0 auto}.app-header h1{margin:0;font-size:1.5rem;font-weight:700;letter-spacing:-.01em;color:#001036}.brand-ssi{color:#c1272d}.settings-panel{position:relative;flex:0 0 auto}.settings-toggle{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-muted);cursor:pointer;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.settings-toggle:hover,.settings-toggle[aria-expanded=true]{background:var(--color-primary-soft);border-color:var(--color-primary);color:var(--color-primary)}.settings-dropdown{position:absolute;z-index:10;top:calc(100% + 4px);right:0;width:min(280px,calc(100vw - 24px));padding:12px;display:flex;flex-direction:column;gap:10px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow-md)}.settings-dropdown label{display:flex;flex-direction:column;gap:4px;font-size:.85rem;font-weight:500;color:var(--color-text-muted)}.settings-dropdown input{border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:8px 10px;font-family:inherit;font-size:.95rem;color:var(--color-text);background:var(--color-surface)}.settings-dropdown input:focus-visible{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-soft);outline:none}.settings-hint{margin:0;font-size:.78rem;color:var(--color-text-muted)}h2{margin:0 0 4px;font-size:1.15rem;font-weight:600;color:var(--color-text)}h3{font-size:1rem;font-weight:600;color:var(--color-text)}h4{font-weight:600;color:var(--color-text-muted)}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:20px 24px;margin-bottom:24px}.match-header-card h2{font-size:1.3rem}.section-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}.section-header h2{margin:0}.controls{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;margin-bottom:4px}.controls:last-child{margin-bottom:0}.controls label{display:inline-flex;align-items:center;gap:8px;min-width:0;font-size:.9rem;color:var(--color-text-muted);font-weight:500}.controls-primary{background:var(--color-primary-soft);border-radius:var(--radius-sm);padding:12px 16px;margin-bottom:12px}.controls-primary label{font-size:.95rem;font-weight:600;color:var(--color-text)}.controls-primary select{font-size:1rem;font-weight:500}.controls-secondary{margin-bottom:12px}.controls-secondary .btn-ghost{font-size:.85rem}.stage-stepper{display:flex;align-items:center;gap:6px;min-width:0;flex:1 1 auto}.stage-counter{flex:0 0 auto;margin-left:4px;font-size:.85rem;font-weight:500;color:var(--color-text-muted);white-space:nowrap}.stage-chart-clip{overflow:hidden}.stage-chart-transition{animation:stage-slide-in-forward .28s ease-out}.stage-chart-transition[data-direction="-1"]{animation-name:stage-slide-in-back}@keyframes stage-slide-in-forward{0%{transform:translate(28px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes stage-slide-in-back{0%{transform:translate(-28px);opacity:0}to{transform:translate(0);opacity:1}}@media(prefers-reduced-motion:reduce){.stage-chart-transition{animation:none}}.match-line-chart{cursor:pointer}.stage-stepper-button{flex:0 0 auto;min-width:40px;min-height:40px;font-size:1.2em;line-height:1;border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-primary);cursor:pointer;transition:background-color .12s ease,border-color .12s ease}.stage-stepper-button:hover:not(:disabled){background:var(--color-primary-soft);border-color:var(--color-primary)}.stage-stepper-button:disabled{opacity:.4;cursor:default}.controls select,.controls button,.compare-controls select{min-height:40px;padding:6px 10px}select{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);font-family:inherit;cursor:pointer}select:hover{border-color:var(--color-primary)}button{font-family:inherit}.btn-ghost{border:1px solid transparent;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-muted);font-weight:500;cursor:pointer;transition:background-color .12s ease,color .12s ease}.btn-ghost:hover{background:var(--color-border);color:var(--color-text)}.btn-ghost[aria-expanded=true]{background:var(--color-primary-soft);color:var(--color-primary)}.btn-ghost:disabled{opacity:.5;cursor:default}.btn-primary{border:1px solid var(--color-primary);border-radius:var(--radius-sm);background:var(--color-primary);color:#fff;font-weight:600;padding:8px 16px;cursor:pointer;transition:background-color .12s ease,border-color .12s ease}.btn-primary:hover:not(:disabled){background:var(--color-primary-hover);border-color:var(--color-primary-hover)}.btn-primary:disabled{opacity:.5;cursor:default}.error{color:#b91c1c;font-weight:600}.spinner-container{display:inline-flex;align-items:center;gap:8px}.spinner{display:inline-block;flex:0 0 auto;border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite}.spinner-label{color:var(--color-text-muted)}@keyframes spin{to{transform:rotate(360deg)}}.search-row{display:flex;align-items:flex-end;gap:8px}.match-search{position:relative;flex:1 1 auto;max-width:520px}.match-search input{width:100%;border:1px solid var(--color-border);border-radius:999px;padding:10px 16px;font-size:.95rem;font-family:inherit;background:var(--color-surface);transition:border-color .12s ease,box-shadow .12s ease}.match-search input:focus-visible{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-soft);outline:none}.match-search label{display:block;margin-bottom:4px;font-size:.85rem;color:var(--color-text-muted);font-weight:500}.toggle-url-form{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:1px solid var(--color-border);background:var(--color-surface);font-size:1.2em;line-height:1;cursor:pointer;transition:background-color .12s ease,border-color .12s ease}.url-form{display:flex;flex-direction:column;gap:8px;max-width:520px;margin-top:12px}.url-form label{display:block;font-size:.85rem;color:var(--color-text-muted);font-weight:500}.url-form input{width:100%;border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:10px 14px;font-size:.95rem;font-family:inherit;background:var(--color-surface);color:var(--color-text);box-sizing:border-box;transition:border-color .12s ease,box-shadow .12s ease}.url-form input:focus-visible{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-soft);outline:none}.url-form-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.toggle-url-form:hover{background:var(--color-primary-soft);border-color:var(--color-primary)}.match-search-status{color:var(--color-text-muted);font-size:.9em}.match-search-results{position:absolute;z-index:10;top:calc(100% + 4px);left:0;width:100%;max-width:480px;max-height:300px;overflow-y:auto;margin:0;padding:4px;list-style:none;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow-md)}.match-search-results li button{display:flex;flex-direction:column;width:100%;padding:8px 12px;border:none;border-radius:var(--radius-sm);background:none;text-align:left;cursor:pointer}.match-search-results li button:hover{background:var(--color-primary-soft)}.match-search-results li button span{color:var(--color-text-muted);font-size:.85em}.match-search-results-heading{padding:6px 12px 2px;color:var(--color-text-muted);font-size:.75em;font-weight:600;text-transform:uppercase;letter-spacing:.04em}.line-chart-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;list-style:none;padding:0;margin:0 0 8px}.line-chart-legend li{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px}.line-chart-legend-swatch{display:inline-block;width:10px;height:10px;border-radius:2px}.stage-shooter-summary{display:flex;flex-wrap:wrap;gap:8px 24px;margin-bottom:12px;color:var(--color-text)}.compare-controls{display:flex;flex-wrap:wrap;gap:16px 24px;margin-bottom:12px}.compare-legend{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:8px;font-size:.85em;color:var(--color-text-muted)}.compare-legend-item{display:flex;align-items:center;gap:6px}.compare-legend-swatch{display:inline-block;width:10px;height:10px;border-radius:2px}.stage-chart-row{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}.stage-chart-wrapper{position:relative;flex:1 1 400px;min-width:320px}.detail-panel{display:grid;grid-template-columns:minmax(0,320fr) minmax(0,140fr);gap:16px;align-items:start;flex:0 1 476px;min-width:280px}.stage-pie-chart,.match-pie-chart,.time-comparison-bar{min-width:0}.stage-pie-chart h4,.match-pie-chart h4,.time-comparison-bar h4{height:40px;margin:0 0 4px;display:flex;align-items:center;justify-content:center;overflow:hidden;text-align:center}.pie-chart-placeholder{display:flex;align-items:center;justify-content:center;height:280px;color:var(--color-text-muted);font-size:.9em;text-align:center;border:1px dashed var(--color-border);border-radius:var(--radius-sm)}.match-overview-row{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}.match-line-chart{flex:1 1 400px;min-width:320px}.match-line-chart-scroll{min-width:100%}.stage-image-overlay{position:absolute;top:8px;right:8px;width:120px;height:90px;object-fit:contain;padding:3px;background:var(--color-surface);border-radius:var(--radius-sm);border:1px solid var(--color-border);box-shadow:var(--shadow-sm);cursor:zoom-in}.stage-image-overlay-left{right:auto;left:70px}.stage-image-lightbox{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#0f172acc;cursor:zoom-out}.stage-image-lightbox img{width:85%;height:85%;object-fit:contain;border-radius:var(--radius);box-shadow:0 8px 32px #00000080}@media(max-width:768px){.app{padding:16px 12px 48px}.card{padding:16px}.stage-chart-row,.match-overview-row{flex-direction:column}.stage-chart-wrapper,.match-line-chart{width:100%}.match-line-chart{overflow-x:auto;-webkit-overflow-scrolling:touch}.match-line-chart-scroll{min-width:640px}.detail-panel{width:100%;max-width:360px;min-width:0;gap:10px;align-self:center}.search-row{flex-wrap:wrap}.match-search{flex:1 1 auto;min-width:0;max-width:none}#match-search-input{width:100%;max-width:100%;box-sizing:border-box}.controls{gap:12px}}