:root{
    --bg-0:#0b0d12;
    --bg-1:#12151c;
    --bg-2:#181c26;
    --bg-3:#20242f;
    --border:#2b2f3b;
    --gold:#d4af37;
    --gold-bright:#f1cc5f;
    --text:#e7e4da;
    --text-dim:#9a9ba3;
    --champion:#3fa9f5;
    --hero:#a463f2;
    --myth:#f2a93f;
    --future:#ff5f7e;
    --good:#5fd08a;
  }
  *{box-sizing:border-box;}
  a{
    color:var(--gold-bright);
    text-decoration-color:rgba(241,204,95,0.5);
  }
  a:hover{
    color:var(--gold);
    text-decoration-color:currentColor;
  }
  a:visited{
    color:var(--myth);
  }
  a:focus-visible{
    outline:1px solid var(--gold);
    outline-offset:2px;
  }
  body{
    margin:0;
    font-family:'Segoe UI', Georgia, 'Trebuchet MS', sans-serif;
    background:radial-gradient(circle at 50% -10%, #1a1f2b 0%, var(--bg-0) 55%);
    color:var(--text);
    padding-bottom:60px;
  }
  header{
    text-align:center;
    padding:16px 16px 0;
    background:linear-gradient(180deg, #14171f 0%, rgba(20,23,31,0) 100%);
  }
  .header-line{
    display:flex;
    align-items:baseline;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
  }
  header h1{
    margin:0;
    font-size:24px;
    letter-spacing:1px;
    color:var(--gold-bright);
    text-shadow:0 0 18px rgba(212,175,55,0.35);
    font-variant-caps:all-small-caps;
  }
  .header-line .hint{
    margin:0;
    font-size:13.5px;
  }
  .beta-badge{
    display:inline-block;
    padding:1px 7px;
    margin-right:2px;
    border-radius:999px;
    background:rgba(242,169,63,0.15);
    border:1px solid rgba(242,169,63,0.5);
    color:var(--myth);
    font-weight:700;
    font-size:10.5px;
    letter-spacing:0.5px;
    text-transform:uppercase;
    vertical-align:middle;
  }
  .legend{
    display:flex;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
    margin-bottom:14px;
    font-size:12.5px;
  }
  .legend span{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:var(--text-dim);
  }
  .dot{
    width:10px;height:10px;border-radius:50%;
    display:inline-block;
    box-shadow:0 0 6px currentColor;
  }
  .dot.champion{background:var(--champion); color:var(--champion);}
  .dot.hero{background:var(--hero); color:var(--hero);}
  .dot.myth{background:var(--myth); color:var(--myth);}
  .dot.future{background:var(--future); color:var(--future);}
  .star.future{
    color:var(--future);
    text-shadow:0 0 6px currentColor;
    font-size:12px;
    display:inline-block;
  }

  main{
    max-width:1440px;
    margin:0 auto;
    padding:26px 20px 0;
  }

  .hint{
    margin:10px 0 14px;
    font-size:12px;
    color:var(--text-dim);
  }

  /* Controls bar */
  #controls{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    justify-content:center;
    align-items:center;
    background:var(--bg-2);
    border:1px solid var(--border);
    border-top:none;
    border-radius:0;
    padding:14px 18px;
    margin-bottom:0;
  }
  .control-group{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12.5px;
    color:var(--text-dim);
    background:var(--bg-3);
    border:1px solid var(--border);
    border-radius:8px;
    padding:7px 10px;
  }
  #character-name, #weekly-cap-input{
    padding:6px 8px;
    background:var(--bg-1);
    border:1px solid var(--border);
    color:var(--text);
    border-radius:6px;
    font-size:12.5px;
  }
  #character-name{
    width:130px;
  }
  #weekly-cap-input{
    width:70px;
  }
  #import-csv-file{
    display:none;
  }
  .control-group select{
    width:auto;
    margin:0;
    padding:6px 8px;
    font-size:12.5px;
  }
  .control-group button{
    background:linear-gradient(160deg, var(--gold-bright), var(--gold));
    border:none;
    color:#1a1206;
    font-weight:700;
    font-size:12.5px;
    padding:7px 12px;
    border-radius:6px;
    cursor:pointer;
  }
  .control-group button:hover{filter:brightness(1.08);}
  .control-group button.btn-danger{
    background:linear-gradient(160deg, #e05c5c, #b83a3a);
    color:#fff;
  }
  .toggle-label{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    font-size:11px;
    color:var(--text);
    background:var(--bg-3);
    border:1px solid var(--border);
    border-radius:8px;
    padding:5px 10px;
    margin-top:8px;
    cursor:pointer;
    user-select:none;
    width:fit-content;
    margin-left:auto;
    margin-right:auto;
  }
  .toggle-label input{
    width:14px;height:14px;
    accent-color:var(--gold);
    cursor:pointer;
  }
  .toggle-label.champion-toggle{border-color:rgba(63,169,245,0.4);}
  .toggle-label.hero-toggle{border-color:rgba(164,99,242,0.4);}
  .toggle-label.active.champion-toggle{background:rgba(63,169,245,0.15); color:var(--champion);}
  .toggle-label.active.hero-toggle{background:rgba(164,99,242,0.15); color:var(--hero);}
  .toggle-label.active{background:rgba(212,175,55,0.15); border-color:rgba(212,175,55,0.4); color:var(--gold-bright);}

  /* Instructions panel */
  #instructions-section{
    background:var(--bg-2);
    border:1px solid var(--border);
    border-radius:12px 12px 0 0;
    padding:12px 16px;
    margin-bottom:0;
  }
  #instructions-section summary{
    cursor:pointer;
    list-style:none;
    display:flex;
    align-items:center;
    gap:8px;
  }
  #instructions-section summary::-webkit-details-marker{
    display:none;
  }
  #instructions-section summary::before{
    content:'▶';
    font-size:11px;
    color:var(--gold);
    transition:transform .15s;
  }
  #instructions-section[open] summary::before{
    transform:rotate(90deg);
  }
  #instructions-section h2{
    margin:0;
    font-size:16px;
    color:var(--gold);
    letter-spacing:0.5px;
    display:inline;
  }
  .instructions-list{
    margin:10px 0 0;
    padding-left:20px;
    font-size:12.5px;
    color:var(--text-dim);
    line-height:1.6;
  }
  .instructions-list li{
    margin-bottom:6px;
  }
  .instructions-list li:last-child{
    margin-bottom:0;
  }
  .instructions-list strong{
    color:var(--text);
  }

  /* Totals panel */
  #combined-panel{
    margin-bottom:26px;
    border-radius:12px;
    box-shadow:0 8px 24px rgba(0,0,0,0.45);
  }
  #sticky-summary{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:1000;
    background:linear-gradient(180deg, #171b25 0%, #12151c 100%);
    border-bottom:1px solid var(--border);
    box-shadow:0 8px 24px rgba(0,0,0,0.45);
    padding:10px 20px;
    transform:translateY(-100%);
    transition:transform .2s ease;
  }
  #sticky-summary.visible{
    transform:translateY(0);
  }
  .sticky-summary-inner{
    max-width:1440px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:28px;
    flex-wrap:wrap;
    font-size:13px;
    color:var(--text-dim);
  }
  .sticky-summary-inner b{
    margin-left:5px;
    font-size:15px;
  }
  .sticky-summary-inner .sc-champion b{color:var(--champion);}
  .sticky-summary-inner .sc-hero b{color:var(--hero);}
  .sticky-summary-inner .sc-myth b{color:var(--myth);}
  .sticky-summary-inner .sc-avg b, .sticky-summary-inner .sc-weeks b{color:var(--gold-bright);}

  #totals{
    background:linear-gradient(180deg, #171b25 0%, #12151c 100%);
    border:1px solid var(--border);
    border-top:none;
    border-radius:0;
    padding:18px 22px;
    margin-bottom:0;
  }
  #totals h2{
    margin:0 0 12px;
    font-size:16px;
    color:var(--gold);
    letter-spacing:0.5px;
  }
  .totals-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(150px,1fr));
    gap:14px;
  }
  .total-card{
    background:var(--bg-2);
    border:1px solid var(--border);
    border-radius:10px;
    padding:12px 14px;
    text-align:center;
    position:relative;
    overflow:hidden;
  }
  .total-card.champion{border-color:rgba(63,169,245,0.4);}
  .total-card.hero{border-color:rgba(164,99,242,0.4);}
  .total-card.myth{border-color:rgba(242,169,63,0.4);}
  .total-card .label{
    font-size:11.5px;
    text-transform:uppercase;
    letter-spacing:0.8px;
    color:var(--text-dim);
    margin-bottom:4px;
  }
  .total-card .value{
    font-size:26px;
    font-weight:700;
  }
  .total-card.champion .value{color:var(--champion);}
  .total-card.hero .value{color:var(--hero);}
  .total-card.myth .value{color:var(--myth);}
  .total-card.avg-card{border-color:rgba(212,175,55,0.4);}
  .total-card.avg-card .value{color:var(--gold-bright);}
  .total-card.gold .value{color:var(--gold-bright);}

  /* Weeks-to-max panel */
  #weeks-section{
    background:var(--bg-2);
    border:1px solid var(--border);
    border-top:none;
    border-radius:0 0 12px 12px;
    padding:12px 16px;
    margin-bottom:0;
  }
  #weeks-section summary{
    cursor:pointer;
    list-style:none;
    display:flex;
    align-items:center;
    gap:8px;
  }
  #weeks-section summary::-webkit-details-marker{
    display:none;
  }
  #weeks-section summary::before{
    content:'▶';
    font-size:11px;
    color:var(--gold);
    transition:transform .15s;
  }
  #weeks-section[open] summary::before{
    transform:rotate(90deg);
  }
  #weeks-section h2{
    margin:0 0 4px;
    font-size:16px;
    color:var(--gold);
    letter-spacing:0.5px;
  }
  #weeks-section summary h2{
    margin:0;
    display:inline;
  }
  .weeks-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(170px,1fr));
    gap:14px;
    margin-bottom:16px;
  }
  .weeks-result-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(150px,1fr));
    gap:14px;
  }
  .weeks-result-card{
    background:var(--bg-1);
    border:1px solid var(--border);
    border-radius:10px;
    padding:12px 14px;
    text-align:center;
  }
  .weeks-result-card .label{
    font-size:11.5px;
    text-transform:uppercase;
    letter-spacing:0.8px;
    color:var(--text-dim);
    margin-bottom:4px;
  }
  .weeks-result-card .value{
    font-size:24px;
    font-weight:700;
  }
  .weeks-result-card.champion{border-color:rgba(63,169,245,0.4);}
  .weeks-result-card.champion .value{color:var(--champion);}
  .weeks-result-card.hero{border-color:rgba(164,99,242,0.4);}
  .weeks-result-card.hero .value{color:var(--hero);}
  .weeks-result-card.myth{border-color:rgba(242,169,63,0.4);}
  .weeks-result-card.myth .value{color:var(--myth);}
  .weeks-result-card.headline{border-color:var(--gold);}
  .weeks-result-card.headline .value{color:var(--gold-bright);}


  select{
    width:auto;
    padding:10px 12px;
    background:var(--bg-3);
    border:1px solid var(--border);
    color:var(--text);
    border-radius:8px;
    font-size:14px;
    outline:none;
  }
  select:focus{border-color:var(--gold);}
  /* Weekly crest cap table */
  #cap-section{
    margin-top:30px;
  }
  #cap-section summary{
    cursor:pointer;
    list-style:none;
    display:flex;
    align-items:center;
    gap:8px;
  }
  #cap-section summary::-webkit-details-marker{
    display:none;
  }
  #cap-section summary::before{
    content:'▶';
    font-size:11px;
    color:var(--gold);
    transition:transform .15s;
  }
  #cap-section[open] summary::before{
    transform:rotate(90deg);
  }
  #cap-section h2{
    margin:0 0 6px;
    font-size:16px;
    color:var(--gold);
    letter-spacing:0.5px;
  }
  #cap-section summary h2{
    margin:0;
    display:inline;
  }
  .cap-table-wrap{
    overflow-x:auto;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--bg-1);
  }
  table.cap-table{
    border-collapse:collapse;
    width:100%;
    min-width:760px;
    font-size:13px;
  }
  table.cap-table th, table.cap-table td{
    padding:10px 14px;
    text-align:center;
    border-bottom:1px solid var(--border);
    border-right:1px solid var(--border);
    white-space:nowrap;
  }
  table.cap-table th:last-child, table.cap-table td:last-child{
    border-right:none;
  }
  table.cap-table thead th{
    background:var(--bg-2);
    color:var(--gold-bright);
    font-weight:600;
    font-size:12.5px;
  }
  table.cap-table thead th:first-child{
    text-align:left;
    background:var(--bg-3);
  }
  table.cap-table tbody th{
    text-align:left;
    background:var(--bg-2);
    font-weight:700;
    position:sticky;
    left:0;
  }
  table.cap-table tbody tr:last-child td, table.cap-table tbody tr:last-child th{
    border-bottom:none;
  }
  table.cap-table tbody tr.row-champion th{color:var(--champion);}
  table.cap-table tbody tr.row-hero th{color:var(--hero);}
  table.cap-table tbody tr.row-myth th{color:var(--myth);}
  table.cap-table tbody td{color:var(--text);}

  /* Interactive item level slider table */
  #ilvl-section{
    margin-top:30px;
    margin-bottom:20px;
  }
  #ilvl-section summary{
    cursor:pointer;
    list-style:none;
    display:flex;
    align-items:center;
    gap:8px;
  }
  #ilvl-section summary::-webkit-details-marker{
    display:none;
  }
  #ilvl-section summary::before{
    content:'▶';
    font-size:11px;
    color:var(--gold);
    transition:transform .15s;
  }
  #ilvl-section[open] summary::before{
    transform:rotate(90deg);
  }
  #ilvl-section h2{
    margin:0 0 6px;
    font-size:16px;
    color:var(--gold);
    letter-spacing:0.5px;
  }
  #ilvl-section summary h2{
    margin:0;
    display:inline;
  }
  .ilvl-header-row{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px 16px;
    margin-bottom:6px;
  }
  .ilvl-header-row h2{
    margin:0;
  }
  .ilvl-header-row .toggle-label{
    margin:0;
    width:auto;
  }
  .ilvl-table-wrap{
    overflow-x:auto;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--bg-1);
  }
  table.ilvl-table{
    border-collapse:collapse;
    width:100%;
    min-width:1260px;
    table-layout:fixed;
    font-size:12px;
  }
  table.ilvl-table th, table.ilvl-table td{
    border-bottom:1px solid var(--border);
    border-right:1px solid var(--border);
    text-align:center;
    padding:8px 4px;
  }
  table.ilvl-table th:last-child, table.ilvl-table td:last-child{
    border-right:none;
  }
  table.ilvl-table thead th{
    background:var(--bg-2);
    color:var(--gold-bright);
    font-weight:600;
    white-space:nowrap;
  }
  table.ilvl-table thead th.slot-col-header{
    background:var(--bg-3);
    text-align:left;
    padding-left:14px;
  }
  table.ilvl-table tbody th{
    text-align:left;
    background:var(--bg-2);
    padding:10px 14px;
    font-weight:700;
    white-space:nowrap;
  }
  table.ilvl-table tbody tr.future-row th{color:var(--future);}
  table.ilvl-table tbody tr:last-child td, table.ilvl-table tbody tr:last-child th{
    border-bottom:none;
  }
  .slider-cell{
    padding:12px 14px !important;
  }
  .slider-row{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .slot-name-line{
    display:block;
    margin-bottom:3px;
  }
  .slider-current{
    display:block;
    font-size:11px;
    font-weight:700;
    color:var(--gold-bright);
    text-align:left;
  }
  .custom-slider{
    position:relative;
    flex:1;
    height:22px;
    cursor:pointer;
    touch-action:none;
  }
  .custom-slider-track{
    position:absolute;
    top:50%;
    left:0;
    right:0;
    height:8px;
    transform:translateY(-50%);
    background:var(--bg-3);
    border-radius:6px;
  }
  .custom-slider-fill{
    position:absolute;
    top:50%;
    left:0;
    height:8px;
    transform:translateY(-50%);
    background:var(--gold);
    border-radius:6px 0 0 6px;
  }
  .custom-slider-thumb{
    position:absolute;
    top:50%;
    left:0%;
    width:18px;
    height:18px;
    border-radius:50%;
    background:var(--gold-bright);
    border:2px solid var(--gold);
    box-shadow:0 0 8px rgba(212,175,55,0.6);
    transform:translate(-50%,-50%);
    cursor:grab;
  }
  .custom-slider.dragging .custom-slider-thumb{
    cursor:grabbing;
    box-shadow:0 0 12px rgba(212,175,55,0.9);
  }
  .col-tick{
    position:absolute;
    top:50%;
    width:1px;
    height:14px;
    background:rgba(255,255,255,0.06);
    transform:translate(-50%,-50%);
  }

  /* Weekly upgrade checklist */
  #checklist-section{
    margin-top:30px;
    margin-bottom:10px;
  }
  #checklist-section summary{
    cursor:pointer;
    list-style:none;
    display:flex;
    align-items:center;
    gap:8px;
  }
  #checklist-section summary::-webkit-details-marker{
    display:none;
  }
  #checklist-section summary::before{
    content:'▶';
    font-size:11px;
    color:var(--gold);
    transition:transform .15s;
  }
  #checklist-section[open] summary::before{
    transform:rotate(90deg);
  }
  #checklist-section h2{
    margin:0;
    font-size:16px;
    color:var(--gold);
    letter-spacing:0.5px;
    display:inline;
  }
  .checklist{
    display:flex;
    flex-direction:column;
    gap:10px;
    background:var(--bg-1);
    border:1px solid var(--border);
    border-radius:12px;
    padding:10px;
    margin-top:14px;
  }
  .checklist-item{
    display:flex;
    align-items:center;
    gap:12px;
    background:var(--bg-2);
    border:1px solid var(--border);
    border-radius:9px;
    padding:12px 16px;
    cursor:pointer;
    transition:border-color .15s, background .15s;
  }
  .checklist-item:hover{
    border-color:rgba(212,175,55,0.45);
  }
  .checklist-item input[type="checkbox"]{
    display:none;
  }
  .checklist-check{
    flex:0 0 auto;
    width:22px;
    height:22px;
    border-radius:6px;
    border:2px solid var(--border);
    background:var(--bg-3);
    display:flex;
    align-items:center;
    justify-content:center;
    color:transparent;
    font-size:14px;
    font-weight:700;
    transition:background .15s, border-color .15s, color .15s;
  }
  .checklist-item.checked .checklist-check{
    background:var(--gold);
    border-color:var(--gold);
    color:#1a1206;
  }
  .checklist-text{
    font-size:14px;
    color:var(--text);
    transition:color .15s;
  }
  .checklist-item.checked .checklist-text{
    color:var(--text-dim);
    text-decoration:line-through;
  }

  /* Changelog */
  #changelog-section{
    margin-top:30px;
    margin-bottom:10px;
  }
  #changelog-section summary{
    cursor:pointer;
    list-style:none;
    display:flex;
    align-items:center;
    gap:8px;
  }
  #changelog-section summary::-webkit-details-marker{
    display:none;
  }
  #changelog-section summary::before{
    content:'▶';
    font-size:11px;
    color:var(--gold);
    transition:transform .15s;
  }
  #changelog-section[open] summary::before{
    transform:rotate(90deg);
  }
  #changelog-section h2{
    margin:0;
    font-size:16px;
    color:var(--gold);
    letter-spacing:0.5px;
    display:inline;
  }
  .changelog-list{
    margin:14px 0 0;
    padding-left:20px;
    font-size:12.5px;
    color:var(--text-dim);
    line-height:1.6;
  }
  .changelog-list li{
    margin-bottom:6px;
  }
  .changelog-list li:last-child{
    margin-bottom:0;
  }
  .changelog-list strong{
    color:var(--text);
  }

  /* Discount / crest summary table */
  #discount-crest-section{
    margin-top:30px;
  }
  #discount-crest-section h2{
    margin:0 0 14px;
    font-size:16px;
    color:var(--gold);
    letter-spacing:0.5px;
  }
  .discount-table-wrap{
    overflow-x:auto;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--bg-1);
  }
  table.discount-table{
    border-collapse:collapse;
    width:100%;
    min-width:820px;
    font-size:13px;
  }
  table.discount-table th, table.discount-table td{
    padding:6px 10px;
    text-align:center;
    border-bottom:1px solid var(--border);
    border-right:1px solid var(--border);
    white-space:nowrap;
  }
  table.discount-table th:last-child, table.discount-table td:last-child{
    border-right:none;
  }
  table.discount-table thead th{
    background:var(--bg-2);
    color:var(--gold-bright);
    font-weight:600;
    font-size:12.5px;
  }
  table.discount-table tbody tr:last-child td{
    border-bottom:none;
  }
  table.discount-table tr.row-champion td:nth-child(2){color:var(--champion); font-weight:600;}
  table.discount-table tr.row-hero td:nth-child(2){color:var(--hero); font-weight:600;}
  table.discount-table tr.row-myth td:nth-child(2){color:var(--myth); font-weight:600;}
  table.discount-table input[type="number"]{
    width:70px;
    padding:4px 6px;
    background:var(--bg-3);
    border:1px solid var(--border);
    color:var(--text);
    border-radius:6px;
    font-size:13px;
    text-align:center;
    outline:none;
  }
  table.discount-table input[type="number"]:focus{border-color:var(--gold);}
  table.discount-table input[type="checkbox"]{
    width:18px;
    height:18px;
    accent-color:var(--gold);
    cursor:pointer;
  }

  footer{
    text-align:center;
    color:var(--text-dim);
    font-size:11.5px;
    margin-top:34px;
    padding:0 20px 20px;
    line-height:1.6;
  }
  footer p{
    margin:0 0 6px;
  }
  footer p:last-child{
    margin-bottom:0;
  }