.layout{
  display:grid;
  grid-template-columns: 340px 1fr;
  gap: 14px;
  padding: 14px;
  max-width: 1200px;
  margin: 0 auto;
}

.panel{
  background: rgba(34,36,58,.86);
  border: var(--border);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow);
}

.sidebar{
  padding: 14px;
  height: calc(100dvh - 86px);
  position: sticky;
  top: 72px;
  overflow:auto;
}

.content{
  padding: 14px;
  overflow:hidden;
}

.panelTitle{
  font-weight: 900;
  font-size: 13px;
  color: rgba(255,255,255,.92);
  letter-spacing: .2px;
  margin: 6px 0 12px;
}

.panelTitleRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 8px;
}

.panelInner{
  background: rgba(43,47,73,.65);
  border: var(--border);
  border-radius: var(--radius);
  padding: 14px;
}

.classGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.classCard{
  display:grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  padding: 10px;
  border-radius: 18px;
  border: var(--border);
  background: rgba(43,47,73,.55);
  color: var(--text);        /* força texto claro */
  cursor:pointer;
  transition: transform .1s ease, border-color .2s ease, background .2s ease;
  text-align: left;
}
.classCard:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.15);
  background: rgba(51,56,90,.55);
}
.classCard.active{
  outline: 2px solid rgba(124,92,255,.5);
  background: linear-gradient(180deg, rgba(124,92,255,.16), rgba(43,47,73,.55));
}

.cover{
  width: 64px;
  height: 64px;
  border-radius: 16px;
  object-fit: cover;
  border: var(--border);
  background: rgba(0,0,0,.15);
}

.className{
  font-weight: 900;
  font-size: 14px;
}
.classMeta{
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.25;
}

.notice{
  margin-top: 12px;
  padding: 12px;
  border-radius: 18px;
  border: var(--border);
  background: rgba(51,56,90,.35);
}
.notice.subtle{ background: rgba(51,56,90,.25); }
.notice.warn{
  background: rgba(255,204,102,.08);
  border-color: rgba(255,204,102,.18);
}
.noticeTitle{ font-weight: 900; font-size: 12px; margin-bottom: 6px; }
.noticeText{ font-size: 12px; color: var(--muted); line-height: 1.35; }

.contentHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.contentHeaderLeft h1{
  margin: 2px 0 4px;
  font-size: 22px;
  letter-spacing: .2px;
}
.muted{ color: var(--muted); }

.toggle{
  display:flex;
  align-items:center;
  gap:10px;
  user-select:none;
  font-weight: 800;
  font-size: 12px;
  color: rgba(255,255,255,.92);
}
.toggle input{ display:none; }
.toggleUi{
  width: 46px;
  height: 28px;
  border-radius: 999px;
  border: var(--border);
  background: rgba(255,255,255,.06);
  position: relative;
  flex: 0 0 auto;
}
.toggleUi::after{
  content:"";
  position:absolute;
  top: 50%;
  left: 4px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  box-shadow: 0 8px 14px rgba(0,0,0,.25);
  transition: left .18s ease, background .18s ease;
}
.toggle input:checked + .toggleUi{
  background: rgba(45,227,142,.14);
  border-color: rgba(45,227,142,.22);
}
.toggle input:checked + .toggleUi::after{
  left: 22px;
  background: rgba(45,227,142,.95);
}

.totals{ margin-bottom: 14px; }
.totalsRow{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.totalBox{
  background: rgba(34,36,58,.35);
  border: var(--border);
  border-radius: 18px;
  padding: 12px;
}
.totalLabel{
  font-weight: 900;
  font-size: 12px;
  color: rgba(255,255,255,.9);
}
.totalValue{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-top: 8px;
  font-size: 28px;
  font-weight: 950;
  letter-spacing: .2px;
}
.totalValue.small{
  font-size: 14px;
  font-weight: 800;
  color: rgba(255,255,255,.92);
}
.totalHint{
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.35;
}

.split{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 14px;
}

.categoriesList{
  display:flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.cat{
  background: rgba(51,56,90,.40);
  border: var(--border);
  border-radius: 18px;
  padding: 12px;
}
.catTop{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  align-items:flex-start;
}
.catName{
  font-weight: 950;
  letter-spacing: .2px;
  font-size: 13px;
}
.catTag{
  font-size: 11px;
  color: rgba(255,255,255,.88);
  border: var(--border);
  background: rgba(124,92,255,.10);
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.catTag.melee{ background: rgba(255,204,102,.10); border-color: rgba(255,204,102,.18); }
.catTag.extra{ background: rgba(53,198,255,.10); border-color: rgba(53,198,255,.18); }

.catMid{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-top: 10px;
}
.levelBadge{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: var(--border);
  background: rgba(34,36,58,.35);
  font-weight: 950;
  font-size: 12px;
}
.levelBadge .lvl{ font-size: 13px; }
.costToMax{
  font-size: 12px;
  color: var(--muted);
  display:flex;
  align-items:center;
  gap: 8px;
  white-space: nowrap;
}

.controls{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap: 10px;
  align-items:center;
  margin-top: 10px;
}
.stepper{
  display:flex;
  align-items:center;
  gap: 8px;
}
.stepper button{
  width: 36px;
  height: 34px;
  border-radius: 12px;
  border: var(--border);
  background: rgba(34,36,58,.35);
  color: var(--text);
  cursor:pointer;
  font-weight: 1000;
}
.stepper button:hover{ border-color: rgba(255,255,255,.15); }
.stepper .value{
  width: 36px;
  text-align:center;
  font-weight: 950;
}
.range{
  width: 100%;
}
.range input[type="range"]{
  width:100%;
  accent-color: var(--accent);
}

.preview .statsPreview{
  display:flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.statLine{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  padding: 10px;
  border-radius: 16px;
  border: var(--border);
  background: rgba(51,56,90,.30);
  font-size: 12px;
}
.statKey{ font-weight: 900; color: rgba(255,255,255,.92); }
.statVal{ color: var(--muted); text-align:right; }
.unknown{ color: rgba(255,204,102,.95); font-weight: 900; }

/* Responsive */
@media (max-width: 980px){
  .layout{ grid-template-columns: 1fr; }
  .sidebar{
    position: relative;
    top: 0;
    height: auto;
  }
  .split{ grid-template-columns: 1fr; }
  .totalsRow{ grid-template-columns: 1fr; }
}

/* ========= FIX: overflow on mobile (PT-BR long strings) ========= */

/* Flex children can overflow if min-width isn't allowed to shrink */
.catTop, .catMid, .statLine, .footerLine, .contentHeader {
  min-width: 0;
}

/* Allow wrapping inside the category mid row */
.catMid {
  flex-wrap: wrap;
}

/* This was forcing overflow in PT-BR */
.costToMax {
  white-space: normal;      /* was nowrap */
  flex-wrap: wrap;
  max-width: 100%;
  min-width: 0;
}

/* Make the text inside costToMax able to break nicely */
.costToMax .muted {
  white-space: normal;
  overflow-wrap: anywhere;  /* breaks long sentences safely */
}

/* Keep the coin + number aligned, but allow overall block wrap */
.costToMax strong {
  white-space: nowrap;
}

/* Also prevent long category names from forcing width */
.catName {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Stats preview: prevent long lines from widening the card */
.statKey, .statVal {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Optional: on very small screens, make controls stack if needed */
@media (max-width: 420px){
  .controls{
    grid-template-columns: 1fr;
  }
  .stepper{
    justify-content: space-between;
  }
}

/* ========= Progress bar ========= */
.progressBlock{
  margin-top: 10px;
}

.progressTop{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--muted);
}

.progressPct{
  font-weight: 950;
  color: rgba(255,255,255,.92);
}

.progressTrack{
  height: 12px;
  border-radius: 999px;
  border: var(--border);
  background: rgba(34,36,58,.35);
  overflow: hidden;
  position: relative;
}

.progressFill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--progressColor, rgba(124,92,255,.9));
  transition: width .55s ease, background-color .35s ease, filter .35s ease;
  position: relative;
  filter: saturate(1.1);
}

/* subtle animated shimmer that moves forever */
.progressFill::after{
  content:"";
  position:absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.18),
    transparent
  );
  transform: translateX(-60%);
  animation: progressShimmer 2.2s linear infinite;
  opacity: .55;
}

@keyframes progressShimmer{
  0%{ transform: translateX(-60%); }
  100%{ transform: translateX(140%); }
}

/* ========= Category controls UX upgrade ========= */

/* Make the whole controls area more touch-friendly */
.controls{
  grid-template-columns: 148px 1fr;
  gap: 12px;
  margin-top: 12px;
}

/* Bigger, nicer stepper */
.stepper{
  gap: 10px;
  padding: 6px;
  border-radius: 16px;
  border: var(--border);
  background: rgba(34,36,58,.28);
}

.stepper button{
  width: 44px;
  height: 42px;
  border-radius: 14px;
  border: var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  color: rgba(255,255,255,.92);
  font-weight: 1000;
  font-size: 18px;
  line-height: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform .08s ease, border-color .2s ease, background .2s ease, filter .2s ease;
  touch-action: manipulation;
}

.stepper button:hover{
  border-color: rgba(255,255,255,.18);
  filter: saturate(1.1);
}

.stepper button:active{
  transform: translateY(1px) scale(.98);
}

.stepper .value{
  width: 44px;
  font-size: 14px;
  font-weight: 950;
  color: rgba(255,255,255,.92);
}

/* Slider: easier to grab on mobile */
.range input[type="range"]{
  height: 34px;              /* makes the hit area larger */
  width: 100%;
  accent-color: var(--accent);
}

/* Make the track and thumb nicer (Chromium/WebKit) */
.range input[type="range"]::-webkit-slider-runnable-track{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.10);
}

.range input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -7px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 2px solid rgba(124,92,255,.55);
  box-shadow: 0 10px 16px rgba(0,0,0,.35);
}

/* Firefox */
.range input[type="range"]::-moz-range-track{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.10);
}
.range input[type="range"]::-moz-range-thumb{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 2px solid rgba(124,92,255,.55);
  box-shadow: 0 10px 16px rgba(0,0,0,.35);
}

/* Add small min/max labels under the slider */
.range{
  position: relative;
  padding-bottom: 16px;
}

.range::before,
.range::after{
  position:absolute;
  bottom: -2px;
  font-size: 11px;
  color: rgba(183,185,218,.85);
}

.range::before{ content:"0"; left: 0; }
.range::after{ content: attr(data-max); right: 0; }

/* Mobile: stack stepper above slider for a cleaner feel */
@media (max-width: 520px){
  .controls{
    grid-template-columns: 1fr;
  }
  .stepper{
    justify-content: space-between;
  }
}

.delta{
  color: rgba(45,227,142,.95);
  font-weight: 950;
}