:root{--bg-color:#0a0a0a;--card-bg:#141414;--text-color:#e0e0e0;--input-bg:#262626;--border-color:#333;--color-agent:#8f7c5d;--color-knight:#737890;--glow-knight:#b4c1cb99;--color-captain:#5e8795;--glow-captain:#94c2cc;--color-centurion:#6c80a0;--glow-centurion:#8bb2e7;--color-lord:#ffce76;--glow-lord:#7f6b56;--color-count:#8fcdd8;--glow-count:#c0f5ff;--color-colonel:#74b4de;--glow-colonel:#a8defc;--color-warrior:#c982f3;--glow-warrior:#e5b6fa;--color-elite:#f87940;--glow-elite:#f7925d;--color-guardian:#eb79dd;--glow-guardian:#ffb2f8;--color-champion:#f62a42;--glow-champion:#f7cd35;--color-gold:#d5a246}body{background-color:var(--bg-color);color:var(--text-color);flex-direction:column;align-items:center;margin:0;padding:20px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;display:flex}h1{color:var(--text-color);letter-spacing:2px;text-align:center;text-transform:uppercase;margin-bottom:20px;font-weight:300}h3{color:var(--border-color);letter-spacing:1px;text-align:center;text-transform:uppercase;margin-top:0;margin-bottom:40px;font-size:medium;font-weight:300}.controls{flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:20px;display:flex}button{cursor:pointer;border:none;border-radius:4px;padding:10px 20px;font-family:inherit;font-weight:700;transition:background .2s,transform .1s}button:active{transform:scale(.98)}button:disabled{cursor:not-allowed;opacity:.5;transform:none}.btn-reset{color:#f98284;background-color:#333;align-self:center;max-width:10rem;padding:5px 10px}.btn-reset:hover{background-color:#a10003}.btn-settings,.btn-share,.btn-sort,.btn-charts{color:#ccc;background-color:#0000;padding:0;font-size:1.6rem}.container{border:1px solid var(--border-color);background-color:var(--card-bg);border-radius:12px;width:100%;max-width:950px;margin-bottom:30px;padding:25px;box-shadow:0 10px 30px #000000b3}.hero-row{border-bottom:1px solid var(--border-color);grid-template-columns:70px 2.5fr 1.1fr 1fr;align-items:center;gap:15px;padding:15px 5px;transition:background .2s;display:grid}.hero-row:hover{background-color:#ffffff05}.hero-row:last-child{border-bottom:none}.portrait-container{position:relative}.char-img-wrapper{border-radius:12px;width:70px;height:70px;overflow:hidden}.hero-portrait{object-fit:cover;width:100%;height:100%}.role-icon-container{z-index:2;border-radius:50%;justify-content:end;width:24px;height:24px;padding:2px;display:flex;position:absolute;bottom:-10px;right:-10px}.role-icon-mini{filter:drop-shadow(0 0 3px #000c)}.rank-badge-img{vertical-align:middle;filter:drop-shadow(0 0 5px #00000080);width:auto;height:40px;margin-right:15px}.hero-details{flex-direction:column;justify-content:center;min-width:0;display:flex}.hero-name{align-items:center;margin-bottom:4px;font-size:1.2em;font-weight:600;transition:all .4s ease-out;display:flex}.progress-section{flex-direction:column;gap:4px;margin-top:4px;display:flex}.progress-label{color:#888;justify-content:space-between;margin-bottom:2px;font-size:.7em;display:flex}.progress-bg{background-color:#333;border-radius:3px;width:100%;height:6px;position:relative;overflow:hidden}.progress-fill{border-radius:3px;height:100%;transition:width .5s ease-in-out}.fill-next-Knight{background-color:var(--color-knight);box-shadow:0 0 5px var(--glow-knight)}.fill-next-Captain{background-color:var(--color-captain);box-shadow:0 0 5px var(--glow-captain)}.fill-next-Centurion{background-color:var(--color-centurion);box-shadow:0 0 5px var(--glow-centurion)}.fill-next-Lord{background-color:var(--color-lord);box-shadow:0 0 5px var(--glow-lord)}.fill-next-Count{background-color:var(--color-count);box-shadow:0 0 5px var(--glow-count)}.fill-next-Colonel{background-color:var(--color-colonel);box-shadow:0 0 5px var(--glow-colonel)}.fill-next-Warrior{background-color:var(--color-warrior);box-shadow:0 0 5px var(--glow-warrior)}.fill-next-Elite{background-color:var(--color-elite);box-shadow:0 0 5px var(--glow-elite)}.fill-next-Guardian{background-color:var(--color-guardian);box-shadow:0 0 5px var(--glow-guardian)}.fill-next-Champion{background-color:var(--color-champion);box-shadow:0 0 5px var(--glow-champion)}.fill-next-Agent{background-color:var(--color-agent)}.fill-total{background:linear-gradient(90deg, #444, var(--color-lord))}.rank-select-container{justify-content:center;align-items:center;display:flex}.rank-Agent{color:var(--color-agent)}.rank-Knight{color:var(--color-knight);text-shadow:0 0 10px var(--glow-knight)}.rank-Captain{color:var(--color-captain);text-shadow:0 0 12px var(--glow-captain)}.rank-Centurion{color:var(--color-centurion);text-shadow:0 0 14px var(--glow-centurion)}.rank-Lord{color:var(--color-lord);text-shadow:0 0 16px var(--glow-lord)}.rank-Count{color:var(--color-count);text-shadow:0 0 16px var(--glow-count)}.rank-Colonel{color:var(--color-colonel);text-shadow:0 0 18px var(--glow-colonel)}.rank-Warrior{color:var(--color-warrior);text-shadow:0 0 18px var(--glow-warrior)}.rank-Elite{color:var(--color-elite);text-shadow:0 0 20px var(--glow-elite)}.rank-Guardian{color:var(--color-guardian);text-shadow:0 0 20px var(--glow-guardian)}.rank-Champion{color:var(--color-champion);text-shadow:0 0 22px var(--glow-champion)}.rank-Champion img{transform:scale(2)}select,input{box-sizing:border-box;border:1px solid var(--border-color);background-color:var(--input-bg);color:#fff;border-radius:6px;width:100%;padding:10px;font-family:inherit;font-size:.95em}.level-input{padding:8px;display:flex}select{cursor:pointer}select:hover,input:hover{border-color:#555}.point-container{align-items:center;gap:8px;display:flex}.point-suffix{color:#999;white-space:nowrap;font-size:.85em;font-weight:600}.header-row{border-bottom:2px solid var(--border-color);color:#666;letter-spacing:1px;text-transform:uppercase;grid-template-columns:70px 2.5fr 1.2fr 1fr;margin-bottom:10px;padding-bottom:15px;font-size:.85em;font-weight:700}.backup-section{color:#888;text-align:center;background-color:#1a1a1a;border:1px solid #333;border-radius:8px;width:100%;max-width:900px;margin-bottom:50px;padding:20px;box-shadow:0 5px 15px #00000080}.backup-title{color:#fff;letter-spacing:1px;text-transform:uppercase;margin-bottom:15px;font-size:.9em;font-weight:700}.backup-controls{justify-content:center;align-items:center;gap:15px;display:flex}.btn-backup{color:#ccc;background-color:#333;border:1px solid #444;font-size:.9em}.btn-backup:hover{border-color:var(--color-knight);background-color:var(--color-knight);color:#000}#fileInput{display:none}.filter-container{border:1px solid var(--border-color);background-color:var(--card-bg);border-radius:8px;width:100%;max-width:950px;margin-bottom:20px;transition:border-color .3s;overflow:hidden}.filter-container:hover{border-color:#555}.btn-filter-toggle{color:#888;letter-spacing:1px;text-align:left;text-transform:uppercase;background:0 0;align-items:center;gap:10px;width:100%;font-size:.9em;font-weight:500;display:flex}.btn-filter-toggle:hover{color:#fff;background-color:#ffffff05}#filter-arrow{font-size:.8em;transition:transform .3s}.filter-content{opacity:0;background-color:#0003;max-height:0;transition:max-height .3s ease-out,opacity .3s ease-out;overflow:hidden}.filter-content.expanded{opacity:1;max-height:150px}.filter-inner{border-top:1px solid var(--border-color);flex-wrap:wrap;align-items:center;gap:20px;padding:15px 20px;display:flex}#searchInput{background-color:#000;border:1px solid #333;flex:1;min-width:200px}#searchInput:focus{border-color:var(--color-knight);outline:none}.role-filters{gap:15px;display:flex}.role-checkbox{color:#bbb;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;display:flex}.role-checkbox:hover{color:#fff}.role-checkbox input{width:16px;height:16px;accent-color:var(--color-knight);cursor:pointer}.modal-overlay{z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000d9;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.modal-content{border:1px solid var(--border-color);background:var(--card-bg);text-align:center;border-radius:12px;width:90%;max-width:600px;padding:30px;position:relative;box-shadow:0 10px 40px #000c}.modal-content h2{color:#fff;letter-spacing:1px;margin-top:0}.comparison-container{gap:20px;margin-top:20px;display:flex}.save-option{background:var(--input-bg);border:1px solid #333;border-radius:8px;flex-direction:column;flex:1;justify-content:space-between;padding:15px;display:flex}.save-option h3{margin-bottom:15px}.top-heroes-list{text-align:left;background:#0003;border-radius:6px;min-height:120px;margin-bottom:20px;padding:10px;font-size:.9em}.top-hero-item{border-bottom:1px solid #333;justify-content:space-between;padding:6px 0;display:flex}.top-hero-item:last-child{border-bottom:none}.share-canvas-wrapper{background:#000;border-radius:10px;justify-content:center;width:100%;min-height:120px;display:flex;position:relative;overflow:hidden}#share-canvas{width:100%;height:auto;display:block}.share-loading{color:#888;letter-spacing:1px;text-transform:uppercase;background:#0006;justify-content:center;align-items:center;width:100%;height:100%;font-size:.9em;display:flex;position:absolute;top:0;left:0}.share-loading.hidden{display:none}.share-modal-actions{justify-content:center;gap:15px;margin-top:20px;display:flex}.settings-list{text-align:left;flex-direction:column;gap:12px;display:flex}.settings-row{background:var(--input-bg);cursor:pointer;border:1px solid #333;border-radius:8px;justify-content:space-between;align-items:center;gap:20px;padding:14px 16px;display:flex}.settings-row:hover{border-color:#555}.settings-row-text{flex-direction:column;gap:4px;display:flex}.settings-row-title{color:#fff;font-size:.95em;font-weight:600}.settings-row-desc{color:#888;font-size:.8em}.settings-row input[type=checkbox]{appearance:none;cursor:pointer;vertical-align:middle;background-color:#0000;border:2px solid #9ca3af;border-radius:4px;place-content:center;width:1.25em;height:1.25em;display:inline-grid;position:relative}.settings-row input[type=checkbox]:checked{background-color:#4f46e5;border-color:#4f46e5}.settings-row input[type=checkbox]:before{content:"";opacity:0;border-bottom:2px solid #fff;border-left:2px solid #fff;width:.65em;height:.35em;transition:opacity .1s ease-in-out;transform:rotate(-45deg)translate(1px,-1px)}.settings-row input[type=checkbox]:checked:before{opacity:1}.settings-row input[type=checkbox]:focus-visible{outline-offset:2px;outline:2px solid #2563eb}.pin-btn{color:#fff1;cursor:pointer;-webkit-user-select:none;user-select:none;margin-left:8px;font-size:1em;transition:color .2s,transform .2s;display:inline-block}.pin-btn:hover{transform:scale(1.1);color:#fff!important}.pin-btn.pinned{color:#a2a2a2;text-shadow:0 0 8px}.version-display{color:#666;letter-spacing:1px;cursor:pointer;font-size:.9em;font-weight:600;transition:color .2s,transform .2s;position:absolute;top:10px;right:10px}.modal-content{text-align:left;max-width:600px;max-height:85vh;overflow-y:auto}#changelog-title{text-align:center;margin-bottom:-15px}#changelog-body ul{color:#bbb;margin-top:8px;padding-left:20px}#changelog-body li{margin-bottom:6px;line-height:1.4}#changelog-body blockquote{border-left:3px solid var(--color-knight);color:#999;background:#ffffff08;border-radius:0 4px 4px 0;margin:0 6px 20px 20px;padding:1px 22px 4px;font-style:italic}.cl-headers{color:#fac53c;font-variant:small-caps;text-transform:none;border-bottom:1px solid #333;margin-top:40px;margin-bottom:8px;padding-bottom:6px;font-size:1.2em}.cl-headers span{color:#777;text-transform:uppercase;margin-left:10px;font-size:.75em;font-weight:400}div:has(>.close-btn){text-align:end}.close-btn{color:#777;background-color:#0000;padding:2px;font-size:2rem;position:absolute;top:15px;right:20px}.hover-btn{transition:color .2s,transform .2s}.hover-btn:hover{color:#fff;transform:scale(1.05)}.hover-btn-large{color:#696969;justify-content:center;justify-self:center;transition:color .2s,transform .2s}.hover-btn-large>p{opacity:0;justify-self:center;width:50px;margin:-5px;font-size:.5rem;transition:opacity .2s;position:absolute;transform:translate(12px)}.hover-btn-large:hover{color:#fff;transform:scale(1.75)}.hover-btn-large:hover>p{opacity:1}html,.no-scroll-track{scrollbar-color:#888 transparent;scrollbar-width:thin;overflow-y:auto}:is(html,.no-scroll-track)::-webkit-scrollbar{width:8px}:is(html,.no-scroll-track)::-webkit-scrollbar-track{background:0 0}:is(html,.no-scroll-track)::-webkit-scrollbar-thumb{background:#888;border-radius:4px}:is(html,.no-scroll-track)::-webkit-scrollbar-thumb:hover{background:#555}@media (width<=600px){.hero-row{background:#1a1a1a;border:1px solid #333;border-radius:8px;grid-template-rows:auto auto;grid-template-columns:80px 1fr;gap:20px 15px;margin-bottom:10px;padding:15px;display:grid}.portrait-container{grid-area:1/1}.hero-details{flex-direction:column;grid-area:1/2;justify-content:center;display:flex}.rank-select-container{grid-area:2/1;justify-content:flex-start}.point-container{grid-area:2/2;align-items:center}.header-row{display:none}.rank-badge-img{height:30px;margin-right:8px}.hero-name{font-size:1.1em}.point-container input{flex:1}}.chart-btn{color:#fff1;cursor:pointer;-webkit-user-select:none;user-select:none;margin-left:4px;transition:color .2s,transform .2s}.chart-btn>span{font-size:20px;transform:translateY(4px)}.chart-btn:hover{transform:scale(1.1);color:#fff!important}.chart-modal-title-row{justify-content:center;align-items:center;gap:8px;display:flex}.chart-settings-btn{color:#777;background-color:#0000;padding:2px;font-size:1.1rem;line-height:1;display:inline-flex}.chart-axis-settings{border:1px solid var(--border-color);background:var(--input-bg);text-align:left;border-radius:8px;margin-bottom:14px;padding:14px 16px}.chart-axis-row{margin-bottom:18px}.chart-axis-row:last-of-type{margin-bottom:0}.chart-axis-row-header{color:#ccc;justify-content:space-between;margin-bottom:10px;font-size:.8em;display:flex}.chart-dual-range{height:18px;position:relative}.chart-dual-range-track{background:#444;border-radius:2px;height:4px;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.chart-dual-range-fill{background:var(--color-elite,#f87940);border-radius:2px;height:4px;position:absolute;top:50%;transform:translateY(-50%)}.chart-dual-range input[type=range]{appearance:none;pointer-events:none;background:0 0;outline:none;width:100%;height:18px;margin:0;padding:0;position:absolute;top:0;left:0;overflow:hidden}.chart-dual-range input[type=range]::-webkit-slider-runnable-track{background:0 0;height:4px}.chart-dual-range input[type=range]::-webkit-slider-thumb{appearance:none;z-index:1;background:var(--color-elite,#f87940);cursor:pointer;pointer-events:all;border:2px solid #1a1a1a;border-radius:50%;width:14px;height:14px;margin-top:-5px;position:relative}.chart-dual-range input[type=range]::-moz-range-track{z-index:-1;background:0 0;border:0;height:4px;position:relative}.chart-dual-range input[type=range]::-moz-range-thumb{appearance:none;z-index:10;background:var(--color-elite,#f87940);cursor:pointer;pointer-events:all;border:2px solid #1a1a1a;border-radius:50%;width:10px;height:10px;position:relative}.chart-dual-range input[type=range]::-moz-focus-outer{border:0}.chart-axis-actions{justify-content:flex-end;gap:10px;margin-top:14px;display:flex}.chart-axis-actions button{width:auto;padding:8px 18px;font-size:.85em}.chart-canvas-wrapper{width:100%;height:800px;margin-top:10px;position:relative}#chart-canvas{width:100%;height:100%}.chart-legend{flex-wrap:wrap;justify-content:center;gap:10px 16px;margin-top:14px;display:flex}.chart-legend-item{color:#ccc;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:6px;font-size:.8em;display:flex}.chart-legend-item.chart-legend-off{color:#555;text-decoration:line-through}.chart-legend-swatch{border-radius:2px;width:10px;height:10px;display:inline-block}.regression-warning{color:#e0b64a;cursor:help;-webkit-user-select:none;user-select:none;margin-left:2px;font-size:.9em}@font-face{font-family:Material Symbols Outlined;font-style:normal;font-weight:100 700;font-display:block;src:url(/assets/material-symbols-outlined-DhPLOrnb.woff2)format("woff2")}.material-symbols-outlined{letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;font-feature-settings:"liga";direction:ltr;font-family:Material Symbols Outlined;font-size:24px;font-style:normal;font-weight:400;line-height:1;display:inline-block}@font-face{font-family:Material Symbols Rounded;font-style:normal;font-weight:100 700;font-display:block;src:url(/assets/material-symbols-rounded-ChlUn1Xu.woff2)format("woff2")}.material-symbols-rounded{letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;font-feature-settings:"liga";direction:ltr;font-family:Material Symbols Rounded;font-size:24px;font-style:normal;font-weight:400;line-height:1;display:inline-block}@font-face{font-family:Material Symbols Sharp;font-style:normal;font-weight:100 700;font-display:block;src:url(/assets/material-symbols-sharp-_BRi17Ba.woff2)format("woff2")}.material-symbols-sharp{letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;font-feature-settings:"liga";direction:ltr;font-family:Material Symbols Sharp;font-size:24px;font-style:normal;font-weight:400;line-height:1;display:inline-block}