:root{font-family:DM Sans,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:var(--text-primary);background-color:var(--bg-primary);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:var(--accent-primary);text-decoration:inherit}a:hover{color:var(--accent-secondary)}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--bg-secondary);color:var(--text-primary);cursor:pointer;transition:border-color .25s}button:hover{border-color:var(--accent-primary)}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:var(--text-primary);background-color:var(--bg-primary)}a:hover{color:var(--accent-secondary)}button{background-color:var(--bg-secondary)}}*{margin:0;padding:0;box-sizing:border-box}:root{--primary: #2E666D;--secondary: #363A43;--accent50: #F3F3FF;--accent100: #EAE9FE;--accent200: #D7D6FE;--accent300: #B9B5FD;--accent400: #978CF9;--accent500: #7158F5;--accent600: #623BEC;--accent700: #5329D8;--accent800: #4622B5;--accent900: #3B1E94;--primary50: #E6F5F6;--primary100: #B8E1E5;--primary200: #8ACCD2;--primary300: #5CB5BD;--primary400: #2E9CA6;--primary500: #00828D;--primary600: #006B74;--primary700: #00555C;--primary800: #003E43;--primary900: #00272A;--warning50: #FFF6EF;--warning100: #FEEAC7;--warning200: #FDD28A;--warning300: #FCBD4F;--warning400: #FBAB24;--warning500: #F59E0B;--warning600: #DB8D06;--warning700: #B47409;--warning800: #92610E;--warning900: #78510F;--highlight50: #FFFCDA;--highlight100: #FFF7AD;--highlight200: #FFF27D;--highlight300: #FFED4B;--highlight400: #FFE81A;--highlight500: #E6CF00;--highlight600: #B3A100;--highlight700: #807300;--highlight800: #786B03;--highlight900: #6A5F00;--positive50: #F4FAF1;--positive100: #E8F4E3;--positive200: #D4E8CA;--positive300: #A8D291;--positive400: #67B034;--positive500: #5EA130;--positive600: #55932A;--positive700: #4C8425;--positive800: #437720;--positive900: #3C691C;--secondary50: #F4F6F7;--secondary100: #E2E6EB;--secondary200: #C9CFD8;--secondary300: #A3AEBD;--secondary400: #76859A;--secondary500: #64748B;--secondary600: #4E596C;--secondary700: #444B5A;--secondary800: #3D424D;--secondary900: #363A43;--negative50: #FFF6F3;--negative100: #FDEDE8;--negative200: #FFDAD0;--negative300: #FFB4A1;--negative400: #FA7659;--negative500: #F65633;--negative600: #E75030;--negative700: #D14729;--negative800: #BC4024;--negative900: #A9371E;--neutral50: #F8F8F8;--neutral100: #F1F1F1;--neutral200: #E2E2E2;--neutral300: #C6C6C6;--neutral400: #9E9E9E;--neutral500: #919191;--neutral600: #848484;--neutral700: #757575;--neutral800: #575757;--neutral900: #111111;--black50: #0000000A;--black100: #00000014;--black200: #0000001A;--black300: #00000026;--black400: #00000033;--black500: #0000004D;--black600: #00000080;--black700: #000000B2;--black800: #000000CC;--black900: #000000;--white50: #FFFFFF0D;--white100: #FFFFFF14;--white200: #FFFFFF1A;--white300: #FFFFFF26;--white400: #FFFFFF33;--white500: #FFFFFF4D;--white600: #FFFFFF80;--white700: #FFFFFFB2;--white800: #FFFFFFCC;--white900: #FFFFFF;--bg-primary: var(--neutral900);--bg-secondary: var(--secondary900);--bg-tertiary: var(--secondary800);--text-primary: var(--white900);--text-secondary: var(--neutral400);--text-tertiary: var(--neutral500);--border-primary: var(--secondary700);--border-secondary: var(--secondary800);--accent-primary: var(--primary500);--accent-secondary: var(--accent500);--success: var(--positive500);--warning: var(--warning500);--error: var(--negative500);--info: var(--primary500)}body{font-family:DM Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg-primary);color:var(--text-primary);line-height:1.6}.app{min-height:100vh;display:flex;flex-direction:column;width:100%;overflow-x:hidden}.app-main{flex:1;display:grid;grid-template-columns:300px 1fr;gap:2rem;padding:2rem;max-width:1400px;margin:0 auto;width:100%;min-width:0}.queue-controls{background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:12px;padding:1.5rem;height:fit-content;position:sticky;top:2rem;max-height:calc(100vh - 4rem);overflow-y:auto}.control-section{margin-bottom:2rem}.control-section:last-child{margin-bottom:0}.control-section h3{font-size:.875rem;font-weight:600;margin-bottom:1rem;color:var(--text-primary);text-transform:uppercase;letter-spacing:.05em}.worker-control{display:flex;align-items:center;gap:1rem}.worker-control input[type=range]{flex:1;height:4px;border-radius:2px;background:var(--border-primary);outline:none;-webkit-appearance:none;cursor:pointer}.worker-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent-primary);cursor:pointer;border:2px solid var(--bg-secondary)}.worker-control span{font-weight:600;color:var(--accent-primary);min-width:2rem;text-align:center;font-size:.875rem}.scenario-buttons{display:flex;flex-direction:column;gap:.5rem}.scenario-buttons button{padding:.75rem 1rem;border:1px solid var(--border-primary);border-radius:8px;background:var(--bg-secondary);color:var(--text-secondary);font-weight:500;cursor:pointer;transition:all .2s ease;text-align:left;font-size:.875rem}.scenario-buttons button:hover{border-color:var(--accent-primary);color:var(--text-primary)}.scenario-buttons button.active{border-color:var(--accent-primary);background:var(--accent-primary);color:var(--white900)}.rate-limit-controls{display:flex;flex-direction:column;gap:1rem}.rate-input{display:flex;flex-direction:column;gap:.5rem}.rate-input label{font-size:.75rem;color:var(--text-secondary);font-weight:500}.rate-input input{padding:.5rem .75rem;border:1px solid var(--border-primary);border-radius:6px;background:var(--bg-secondary);color:var(--text-primary);font-size:.875rem;outline:none}.rate-input input:focus{border-color:var(--accent-primary)}.tenant-rate-limits{display:flex;flex-direction:column;gap:1rem}.tenant-rate-limit{border:1px solid var(--border-primary);border-radius:8px;padding:1rem;background:var(--bg-primary)}.tenant-rate-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}.tenant-rate-toggle{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--text-secondary);cursor:pointer;margin-left:auto}.tenant-rate-toggle input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent-primary)}.tenant-rate-controls{display:flex;gap:1rem;padding-top:1rem;border-top:1px solid var(--border-primary)}.tenant-rate-controls .rate-input{flex:1}.tenant-controls{display:flex;flex-direction:column;gap:1rem}.tenant-control{display:flex;flex-direction:column;gap:.75rem;padding:.75rem;border-radius:8px;border:1px solid var(--border-primary);background:var(--bg-primary)}.tenant-control.current-tenant{border-color:var(--accent-primary);background:var(--bg-secondary)}.tenant-header{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.tenant-color{width:12px;height:12px;border-radius:50%;flex-shrink:0}.tenant-header span{font-weight:500;color:var(--text-primary);font-size:.875rem}.next-indicator{color:var(--accent-primary);font-size:.75rem;font-weight:500}.job-buttons{display:flex;gap:.5rem;margin-left:auto}.job-buttons button{padding:.25rem .5rem;border:1px solid;border-radius:4px;background:var(--bg-secondary);color:var(--text-primary);font-size:.75rem;font-weight:500;cursor:pointer;transition:all .2s ease}.job-buttons button:hover{background:var(--bg-tertiary)}.queue-visualization{background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:12px;padding:1.5rem;min-height:600px}.scenario-header{margin-bottom:2rem}.scenario-info{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.scenario-info h2{font-size:1.5rem;font-weight:600;color:var(--text-primary);margin:0}.workers-info span{background:var(--bg-tertiary);color:var(--text-secondary);padding:.25rem .75rem;border-radius:6px;font-size:.875rem;font-weight:500}.rate-limit-overview{display:flex;flex-wrap:wrap;gap:1rem;padding:1rem;background:var(--bg-primary);border-radius:8px;border:1px solid var(--border-primary)}.rate-limit-status{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;background:var(--bg-secondary);border-radius:6px;border:1px solid var(--border-primary);font-size:.875rem}.rate-limit-indicator{display:flex;align-items:center;gap:.5rem}.tenant-name{font-weight:500;color:var(--text-primary);font-size:.875rem}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--success)}.status-dot.ok{background:var(--success)}.status-dot.breached{background:var(--error)}.rate-count{font-weight:600;color:var(--text-primary)}.replenish-timer{color:var(--warning);font-weight:500;font-size:.75rem}.consistent-hashing-queues{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-top:1rem}.queue-container{background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:8px;overflow:hidden}.queue-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;background:var(--bg-secondary);border-bottom:1px solid var(--border-primary)}.queue-header h3{font-size:1rem;font-weight:600;color:var(--text-primary);margin:0}.queue-job-count{background:var(--bg-tertiary);color:var(--text-secondary);padding:.25rem .75rem;border-radius:4px;font-size:.75rem;font-weight:500}.queue-container .queue-states{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;padding:1rem;height:200px}.queue-container .state-column{background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:6px;overflow:hidden}.queue-container .state-header{padding:.5rem;background:var(--bg-tertiary);border-bottom:1px solid var(--border-primary)}.queue-container .state-title{display:flex;align-items:center;gap:.5rem}.queue-container .state-label{font-size:.75rem;font-weight:600;color:var(--text-primary);text-transform:capitalize}.queue-container .job-count{background:var(--bg-primary);color:var(--text-secondary);padding:.125rem .25rem;border-radius:2px;font-size:.625rem;font-weight:500}.queue-container .clear-button{padding:.125rem .5rem;border:1px solid var(--border-primary);border-radius:2px;background:var(--bg-secondary);color:var(--text-secondary);font-size:.625rem;cursor:pointer;transition:all .2s ease}.queue-container .clear-button:hover:not(:disabled){border-color:var(--error);color:var(--error)}.queue-container .state-jobs{padding:.5rem;display:flex;flex-wrap:wrap;gap:.25rem;align-content:flex-start;overflow-y:auto;height:120px}.queue-container .job-circle{width:24px;height:24px;border-radius:50%;background:var(--tenant-color);display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;transition:transform .2s ease}.queue-container .job-circle:hover{transform:scale(1.2)}.queue-container .circle-progress{width:100%;height:100%;position:relative}.queue-container .progress-ring{width:100%;height:100%;transform:rotate(-90deg)}.queue-container .progress-bg{stroke:var(--border-primary);opacity:.3}.queue-container .progress-fill{stroke:var(--text-primary);stroke-linecap:round;transition:stroke-dashoffset .1s ease}.queue-states{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;height:500px}.state-column{display:flex;flex-direction:column;background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:8px;overflow:hidden}.state-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;background:var(--bg-secondary);border-bottom:1px solid var(--border-primary)}.state-title{display:flex;align-items:center;gap:.75rem}.state-label{font-weight:600;color:var(--text-primary);font-size:.875rem;text-transform:capitalize}.job-count{background:var(--bg-tertiary);color:var(--text-secondary);padding:.125rem .5rem;border-radius:4px;font-size:.75rem;font-weight:500}.clear-button{padding:.25rem .75rem;border:1px solid var(--border-primary);border-radius:4px;background:var(--bg-secondary);color:var(--text-secondary);font-size:.75rem;cursor:pointer;transition:all .2s ease}.clear-button:hover:not(:disabled){border-color:var(--error);color:var(--error)}.clear-button:disabled{opacity:.5;cursor:not-allowed}.state-jobs{flex:1;padding:1rem;display:flex;flex-wrap:wrap;gap:.5rem;align-content:flex-start;overflow-y:auto}.job-circle{width:40px;height:40px;border-radius:50%;background:var(--tenant-color);display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;transition:transform .2s ease}.job-circle:hover{transform:scale(1.1)}.circle-progress{width:100%;height:100%;position:relative}.progress-ring{width:100%;height:100%;transform:rotate(-90deg)}.progress-bg{stroke:var(--border-primary);opacity:.3}.progress-fill{stroke:var(--text-primary);stroke-linecap:round;transition:stroke-dashoffset .1s ease}@media (max-width: 1200px){.app-main{grid-template-columns:1fr;gap:1rem}.queue-controls{position:static;max-height:none}}@media (max-width: 768px){.app-main{padding:1rem}.queue-states{grid-template-columns:repeat(2,1fr);gap:1rem}.tenant-colors{flex-direction:column;gap:.5rem}.rate-limit-overview{flex-direction:column}.rate-limit-status{width:100%;justify-content:space-between}}@media (max-width: 480px){.queue-states{grid-template-columns:1fr}.scenario-info{flex-direction:column;align-items:flex-start}}@media (max-width: 1200px){.consistent-hashing-queues{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}}@media (max-width: 768px){.consistent-hashing-queues{grid-template-columns:1fr}.queue-container .queue-states{grid-template-columns:repeat(2,1fr)}}