:root{--primary-color:#007bff;--primary-hover-color:#0056b3;--secondary-color:#6c757d;--secondary-hover-color:#5a6268;--danger-color:#dc3545;--danger-hover-color:#c82333;--warning-color:#ffc107;--warning-hover-color:#e0a800;--state-rank-color-1:hsl(160,60%,30%);--state-rank-hover-color-1:hsl(160,60%,25%);--state-rank-color-2:hsl(161,61%,31%);--state-rank-hover-color-2:hsl(161,61%,26%);--state-rank-color-3:hsl(162,61%,33%);--state-rank-hover-color-3:hsl(162,61%,28%);--state-rank-color-4:hsl(163,62%,34%);--state-rank-hover-color-4:hsl(163,62%,29%);--state-rank-color-5:hsl(164,62%,36%);--state-rank-hover-color-5:hsl(164,62%,31%);--state-rank-color-6:hsl(165,63%,37%);--state-rank-hover-color-6:hsl(165,63%,32%);--state-rank-color-7:hsl(166,63%,39%);--state-rank-hover-color-7:hsl(166,63%,34%);--state-rank-color-8:hsl(167,64%,40%);--state-rank-hover-color-8:hsl(167,64%,35%);--state-rank-color-9:hsl(168,64%,42%);--state-rank-hover-color-9:hsl(168,64%,37%);--state-rank-color-10:hsl(168,65%,43%);--state-rank-hover-color-10:hsl(168,65%,38%);--state-rank-color-11:hsl(169,65%,45%);--state-rank-hover-color-11:hsl(169,65%,40%);--state-rank-color-12:hsl(170,66%,46%);--state-rank-hover-color-12:hsl(170,66%,41%);--state-rank-color-13:hsl(171,66%,48%);--state-rank-hover-color-13:hsl(171,66%,43%);--state-rank-color-14:hsl(172,67%,49%);--state-rank-hover-color-14:hsl(172,67%,44%);--state-rank-color-15:hsl(173,68%,51%);--state-rank-hover-color-15:hsl(173,68%,46%);--state-rank-color-16:hsl(173,68%,52%);--state-rank-hover-color-16:hsl(173,68%,47%);--state-rank-color-17:hsl(174,69%,53%);--state-rank-hover-color-17:hsl(174,69%,48%);--state-rank-color-18:hsl(174,69%,54%);--state-rank-hover-color-18:hsl(174,69%,49%);--state-rank-color-19:hsl(175,70%,55%);--state-rank-hover-color-19:hsl(175,70%,50%);--state-rank-color-20:hsl(175,70%,55%);--state-rank-hover-color-20:hsl(175,70%,50%);--background-color:#f4f7f9;--card-background-color:#ffffff;--text-color:#212529;--text-light-color:#6c757d;--border-color:#dee2e6;--nav-bg:#ffffff;--nav-text:#343a40;--nav-link-hover:var(--primary-color);--nav-link-active-color:var(--primary-color);--nav-height:70px;--font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--border-radius:0.375rem;--box-shadow:0 4px 6px -1px rgba(0,0,0,0.07),0 2px 4px -2px rgba(0,0,0,0.04);--max-content-width:1200px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background-color:var(--background-color);color:var(--text-color);line-height:1.6;padding-top:var(--nav-height)}.top-nav{background-color:var(--nav-bg);height:var(--nav-height);border-bottom:1px solid var(--border-color);box-shadow:var(--box-shadow);position:fixed;top:0;left:0;width:100%;z-index:1000}.nav-container{max-width:var(--max-content-width);height:100%;margin:0 auto;padding:0 2rem;display:flex;justify-content:space-between;align-items:center}.nav-brand{font-size:1.5rem;font-weight:600;color:var(--text-color);text-decoration:none}.main-nav ul{display:flex;list-style:none;gap:1.5rem}.main-nav a{text-decoration:none;color:var(--nav-text);font-weight:500;padding:0.5rem 0;position:relative;transition:color 0.2s ease}.main-nav a:hover{color:var(--nav-link-hover)}.main-nav a.active{color:var(--nav-link-active-color);font-weight:600}.main-nav a.active::after{content:'';position:absolute;bottom:-2px;left:0;width:100%;height:2px;background-color:var(--nav-link-active-color)}.content{max-width:var(--max-content-width);margin:0 auto;padding:2rem}.card{background-color:var(--card-background-color);border-radius:var(--border-radius);box-shadow:var(--box-shadow);padding:2rem;margin-bottom:2rem}.content-title{font-size:2rem;font-weight:600;margin-bottom:0.5rem}.content-description{font-size:1rem;color:var(--text-light-color);margin-bottom:2rem;max-width:70ch}.form-group{margin-bottom:1rem}.form-group label{display:block;font-weight:600;margin-bottom:0.5rem}.form-control{width:100%;padding:0.75rem 1rem;border:1px solid var(--border-color);border-radius:var(--border-radius);font-size:1rem;transition:border-color 0.2s ease,box-shadow 0.2s ease}.form-control:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(0,123,255,0.25)}.btn{display:inline-block;padding:0.75rem 1.5rem;font-size:1rem;font-weight:600;text-align:center;text-decoration:none;border:none;border-radius:var(--border-radius);cursor:pointer;transition:background-color 0.2s ease,transform 0.1s ease}.btn:active{transform:translateY(1px)}.btn-primary{background-color:var(--primary-color);color:#fff}.btn-primary:hover{background-color:var(--primary-hover-color)}.btn-secondary{background-color:var(--secondary-color);color:#fff}.btn-secondary:hover{background-color:var(--secondary-hover-color)}.btn-danger{background-color:var(--danger-color);color:#fff}.btn-danger:hover{background-color:var(--danger-hover-color)}.form-layout{display:flex;flex-wrap:wrap;gap:2.5rem;align-items:flex-start}.form-section{display:flex;flex-direction:column;gap:1rem}.add-section{flex:2;min-width:300px}.remove-section{flex:1;min-width:250px}.input-group{display:flex;gap:1rem;align-items:flex-end}.input-group .form-group{flex:1;margin-bottom:0}.remove-controls{display:grid;grid-template-columns:auto auto;gap:0.75rem;align-items:center;justify-content:start}.current-graph-title{font-size:1.25rem;font-weight:500;color:var(--text-light-color);margin-top:2.5rem;padding-bottom:0.5rem;border-bottom:1px solid var(--border-color)}.current-graph-title strong{font-weight:600;color:var(--text-color)}.form-errors-container{margin-bottom:1.5rem;padding:1rem;border-radius:var(--border-radius);background-color:color-mix(in srgb,var(--danger-color) 15%,transparent);border:1px solid color-mix(in srgb,var(--danger-color) 40%,transparent);color:var(--danger-color)}.error-message{font-size:0.9em;font-weight:500}.error-message + .error-message{margin-top:0.5rem}.form-group.error .form-control{border-color:var(--danger-color)}.form-group.error .form-control:focus{border-color:var(--danger-color);box-shadow:0 0 0 3px color-mix(in srgb,var(--danger-color) 25%,transparent)}.search-form{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:end}.search-form .form-actions{display:flex;gap:1rem;align-items:end}.table-container{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:0.95rem}th,td{padding:1rem 1.25rem;text-align:left;border-bottom:1px solid var(--border-color)}thead th{background-color:#f8f9fa;font-weight:600;color:var(--text-light-color);text-transform:uppercase;font-size:0.8rem;letter-spacing:0.05em}tbody tr:hover{background-color:#f1f3f5}tbody tr.state-rank-row td{color:#ffffff;font-weight:600}.state-rank-row.state-rank-1 td{background-color:var(--state-rank-color-1)}.state-rank-row.state-rank-1:hover td{background-color:var(--state-rank-hover-color-1)}.state-rank-row.state-rank-2 td{background-color:var(--state-rank-color-2)}.state-rank-row.state-rank-2:hover td{background-color:var(--state-rank-hover-color-2)}.state-rank-row.state-rank-3 td{background-color:var(--state-rank-color-3)}.state-rank-row.state-rank-3:hover td{background-color:var(--state-rank-hover-color-3)}.state-rank-row.state-rank-4 td{background-color:var(--state-rank-color-4)}.state-rank-row.state-rank-4:hover td{background-color:var(--state-rank-hover-color-4)}.state-rank-row.state-rank-5 td{background-color:var(--state-rank-color-5)}.state-rank-row.state-rank-5:hover td{background-color:var(--state-rank-hover-color-5)}.state-rank-row.state-rank-6 td{background-color:var(--state-rank-color-6)}.state-rank-row.state-rank-6:hover td{background-color:var(--state-rank-hover-color-6)}.state-rank-row.state-rank-7 td{background-color:var(--state-rank-color-7)}.state-rank-row.state-rank-7:hover td{background-color:var(--state-rank-hover-color-7)}.state-rank-row.state-rank-8 td{background-color:var(--state-rank-color-8)}.state-rank-row.state-rank-8:hover td{background-color:var(--state-rank-hover-color-8)}.state-rank-row.state-rank-9 td{background-color:var(--state-rank-color-9)}.state-rank-row.state-rank-9:hover td{background-color:var(--state-rank-hover-color-9)}.state-rank-row.state-rank-10 td{background-color:var(--state-rank-color-10)}.state-rank-row.state-rank-10:hover td{background-color:var(--state-rank-hover-color-10)}.state-rank-row.state-rank-11 td{background-color:var(--state-rank-color-11)}.state-rank-row.state-rank-11:hover td{background-color:var(--state-rank-hover-color-11)}.state-rank-row.state-rank-12 td{background-color:var(--state-rank-color-12)}.state-rank-row.state-rank-12:hover td{background-color:var(--state-rank-hover-color-12)}.state-rank-row.state-rank-13 td{background-color:var(--state-rank-color-13)}.state-rank-row.state-rank-13:hover td{background-color:var(--state-rank-hover-color-13)}.state-rank-row.state-rank-14 td{background-color:var(--state-rank-color-14)}.state-rank-row.state-rank-14:hover td{background-color:var(--state-rank-hover-color-14)}.state-rank-row.state-rank-15 td{background-color:var(--state-rank-color-15)}.state-rank-row.state-rank-15:hover td{background-color:var(--state-rank-hover-color-15)}.state-rank-row.state-rank-16 td{background-color:var(--state-rank-color-16)}.state-rank-row.state-rank-16:hover td{background-color:var(--state-rank-hover-color-16)}.state-rank-row.state-rank-17 td{background-color:var(--state-rank-color-17)}.state-rank-row.state-rank-17:hover td{background-color:var(--state-rank-hover-color-17)}.state-rank-row.state-rank-18 td{background-color:var(--state-rank-color-18)}.state-rank-row.state-rank-18:hover td{background-color:var(--state-rank-hover-color-18)}.state-rank-row.state-rank-19 td{background-color:var(--state-rank-color-19)}.state-rank-row.state-rank-19:hover td{background-color:var(--state-rank-hover-color-19)}.state-rank-row.state-rank-20 td{background-color:var(--state-rank-color-20)}.state-rank-row.state-rank-20:hover td{background-color:var(--state-rank-hover-color-20)}.pagination{margin-top:2rem;display:flex;justify-content:center;align-items:center}.pagination .step-links{display:flex;align-items:center;gap:0.5rem}.pagination a.btn{padding:0.5rem 1rem}.current-page{padding:0.5rem 1rem;font-weight:600}#chart-container{padding-top:1rem}.chart-placeholder{text-align:center;padding:4rem 2rem;margin-top:2rem;border:2px dashed var(--border-color);border-radius:var(--border-radius);color:var(--text-light-color);background-color:#f8f9fa}.chart-placeholder p{font-size:1.2rem;font-weight:500;margin:0 0 0.5rem 0}.chart-placeholder span{font-size:1rem}.custom-plotly-tooltip{display:none;position:absolute;z-index:1001;background-color:var(--card-background-color,#fff);border:1px solid var(--border-color,#dee2e6);border-radius:var(--border-radius,6px);box-shadow:0 4px 12px rgba(0,0,0,0.15);padding:0.75rem;pointer-events:none;font-family:var(--font-family);font-size:14px;color:var(--text-color,#212529);text-align:left;min-width:250px}.custom-plotly-tooltip .tooltip-header{font-weight:600;font-size:1.1em;margin-bottom:0.75rem;padding-bottom:0.5rem;border-bottom:1px solid var(--border-color,#e0e0e0)}.custom-plotly-tooltip .tooltip-row{display:flex;align-items:center;justify-content:space-between;padding:4px 0}.custom-plotly-tooltip .tooltip-color-box{width:12px;height:12px;margin-right:8px;flex-shrink:0}.custom-plotly-tooltip .tooltip-name{flex-grow:1;margin-right:20px}.custom-plotly-tooltip .tooltip-value{font-weight:600}.image-container{display:flex;justify-content:center}@media (max-width:768px){body{padding-top:calc(var(--nav-height) + 40px)}.nav-container{flex-direction:column;align-items:flex-start;justify-content:center;padding:0.5rem 1rem;height:auto}.main-nav ul{gap:0.5rem;padding-top:0.5rem}.main-nav a{padding:0.5rem}.content{padding:1rem}.card{padding:1.5rem}.search-form{grid-template-columns:1fr}.input-group{flex-direction:column;align-items:stretch}}