/* ===== Hero Profile (clean CSS foundation) ===== */
:root{
  --th-bg: #f8fafc;
  --th-card: rgba(255,255,255,.86);
  --th-border: rgba(15,23,42,.10);
  --th-text: #0f172a;
  --th-muted: #64748b;

  --nature: #10b981;
  --league: #0ea5e9;
  --horde:  #ef4444;
  --indigo: #6366f1;

  --gear:   #34d399;
  --skills: #2dd4bf;
  --queues: #38bdf8;
  --upg:    #fbbf24;
  --det:    #818cf8;
  --summary:#0f766e;

  --th-radius: 18px;
  --th-radius-sm: 14px;
  --th-card-pad: 16px;
  --th-card-pad-sm: 14px;
}

.th-container{max-width:76rem;margin:0 auto;padding:0 16px;}
.th-space{display:flex;flex-direction:column;gap:16px;}
.th-spaceSm{display:flex;flex-direction:column;gap:10px;}
.th-gapLg{gap:22px;}

.th-card{
  position:relative;
  border:1px solid var(--th-border);
  background:var(--th-card);
  backdrop-filter: blur(10px);
  border-radius:var(--th-radius);
  padding:var(--th-card-pad);
  box-shadow: 0 12px 30px rgba(15,23,42,.06);
}
.th-accent{height:4px;border-radius:12px;margin:calc(-1 * var(--th-card-pad)) calc(-1 * var(--th-card-pad)) 14px calc(-1 * var(--th-card-pad));opacity:.9}
.th-accent--gear{background:var(--gear)}
.th-accent--skills{background:var(--skills)}
.th-accent--queues{background:var(--queues)}
.th-accent--upgrades{background:var(--upg)}
.th-accent--details{background:var(--det)}
.th-accent--summary{background:linear-gradient(90deg, rgba(14,165,233,.9), rgba(15,118,110,.9))}
.th-cardTitle{font-size:20px;font-weight:800;color:var(--th-text);margin:0 0 8px;letter-spacing:-.01em}

.th-heroHeader{
  display:flex;gap:16px;align-items:center;
  border:1px solid var(--th-border);
  border-radius:var(--th-radius);
  padding:14px;
  background: linear-gradient(135deg, rgba(255,255,255,.85), rgba(241,245,249,.65));
  box-shadow: 0 12px 30px rgba(15,23,42,.06);
}
.th-heroHeaderImg{width:116px;height:116px;border-radius:var(--th-radius);object-fit:cover;}
.th-heroName{font-size:28px;line-height:1.1;margin:0;font-weight:800;color:var(--th-text);letter-spacing:-.01em}

.th-heroHeaderTitleRow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:6px;}
.th-metaRow{display:flex;flex-wrap:wrap;gap:8px;color:#334155;font-size:12px}
.th-label{font-weight:700;color:#0f172a}
.th-uwRow{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}

.th-chip{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;color:#fff;font-size:12px;font-weight:750;background:var(--indigo)}
.th-chip--nature{background:var(--nature)}
.th-chip--league{background:var(--league)}
.th-chip--horde{background:var(--horde)}

.th-pill{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;border:1px solid var(--th-border);background:rgba(15,23,42,.03);font-size:12px;font-weight:600;color:#0f172a}
.th-pillRow{display:flex;flex-wrap:wrap;gap:8px}

.th-rarity{border:1px solid var(--th-border);background:rgba(15,23,42,.03);font-weight:800;border-radius:999px;display:inline-flex;align-items:center;padding:6px 10px}
.th-rarity--mythic{border-color:rgba(239,68,68,.55);background:rgba(239,68,68,.10);color:#7f1d1d}
.th-rarity--legendary{border-color:rgba(234,179,8,.60);background:rgba(234,179,8,.16);color:#713f12}
.th-rarity--epic{border-color:rgba(168,85,247,.55);background:rgba(168,85,247,.12);color:#581c87}
.th-rarity--rare{border-color:rgba(59,130,246,.55);background:rgba(59,130,246,.12);color:#1e3a8a}

.th-sectionNav{
  display:flex;flex-wrap:wrap;gap:8px;padding:10px 0;
  position:sticky;top:56px;z-index:25;
  background:rgba(248,250,252,.90);
  backdrop-filter:blur(10px);
}
.th-tab{
  text-decoration:none;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--th-border);
  background:#fff;
  font-size:13px;
  font-weight:800;
  color:#334155;
  transition:transform .06s ease, background .12s ease, border-color .12s ease;
}
.th-tab:hover{background:#f1f5f9;transform:translateY(-1px)}
.th-tab.is-active{
  background:rgba(99,102,241,.12);
  border-color:rgba(99,102,241,.45);
  color:#312e81;
}

.th-grid2{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width: 900px){ .th-grid2{grid-template-columns:1fr 1fr} }

.th-card--summary{
  background:
    radial-gradient(circle at top right, rgba(14,165,233,.10), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.88));
}
.th-summaryIntro{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.th-summaryEyebrow{
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--summary);
  margin-bottom:6px;
}
.th-summaryGrid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
@media (min-width: 820px){
  .th-summaryGrid{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
.th-summaryCard{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:100%;
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  background:rgba(255,255,255,.8);
  padding:14px;
}
.th-summaryLabel{
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#0f766e;
}
.th-summaryValue{
  font-size:19px;
  line-height:1.2;
  font-weight:800;
  color:#0f172a;
}
.th-summaryText{
  margin:0;
  font-size:13px;
  line-height:1.5;
  color:#334155;
}
.th-summaryLinks{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}
.th-summaryLink{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.86);
  color:#0f172a;
  font-size:13px;
  font-weight:700;
  text-decoration:none;
}
.th-summaryLink:hover{
  background:#fff;
  border-color:rgba(14,165,233,.28);
  color:#0f766e;
}

.th-skillCard{border:1px solid var(--th-border);border-radius:var(--th-radius-sm);background:#fff;padding:12px;display:flex;flex-direction:column;gap:10px}
.th-skillHeader{display:flex;justify-content:space-between;gap:10px}
.th-skillName{font-weight:800;color:#0f172a}
.th-skillMeta{display:flex;flex-wrap:wrap;gap:6px}
.th-tagRow{display:flex;flex-wrap:wrap;gap:6px}
.th-tag{font-size:11px;font-weight:800;border:1px solid rgba(45,212,191,.30);background:rgba(45,212,191,.10);color:#115e59;border-radius:999px;padding:4px 8px}
.th-skillDesc{margin:0;color:#1f2937;font-size:13px;line-height:1.4}

.th-details summary{cursor:pointer;font-weight:800;color:#0f766e}
.th-starList{margin:8px 0 0 18px;padding:0;display:flex;flex-direction:column;gap:6px}
.th-star{font-weight:900;color:#b45309}

.th-callout{
  border:1px solid rgba(45,212,191,.30);
  background:rgba(45,212,191,.10);
  border-radius:var(--th-radius-sm);
  padding:12px;
  margin-bottom:10px;
}
.th-calloutRow{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px}
.th-calloutTitle{font-weight:900;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#0f766e}
.th-calloutHint{font-size:12px;color:#115e59;opacity:.8;font-style:italic}
.th-ol{margin:8px 0 0 18px}

.th-subCard{border:1px solid rgba(56,189,248,.30);background:rgba(56,189,248,.10);border-radius:var(--th-radius-sm);padding:14px}
.th-subTitle{margin:0 0 8px 0;font-weight:900;color:#075985}

.th-portraits{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.th-arrow{opacity:.65;font-size:14px}
.th-portraitItem{display:flex;flex-direction:column;align-items:center;gap:4px;max-width:84px}
.th-portraitImg{width:38px;height:38px;border-radius:12px;object-fit:cover;border:1px solid rgba(15,23,42,.10);box-shadow:0 2px 10px rgba(15,23,42,.12)}
.th-portraitName{font-size:11px;font-weight:700;max-width:84px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#334155;text-align:center}

.th-gearRow{display:flex;align-items:center;gap:12px;border:1px solid rgba(16,185,129,.25);background:rgba(255,255,255,.85);border-radius:var(--th-radius-sm);padding:10px}
.th-gearImg{height:38px;width:160px;object-fit:contain;border-radius:12px;background:rgba(16,185,129,.08);padding:0 12px}
.th-gearName{font-weight:800;color:#064e3b}
.th-gearDesc{font-size:13px;color:#065f46}
.th-gearAltList{display:flex;flex-direction:column;gap:10px;margin-top:10px}

.th-muted{color:var(--th-muted);font-size:13px}
.th-small{font-size:12px;color:#0f172a}

.th-hr{border:none;border-top:1px solid var(--th-border);margin:14px 0}
.th-ul{margin:6px 0 0 18px}

.th-profileNav{display:flex;justify-content:space-between;align-items:center;margin:0 0 10px}

.th-topbar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.90);backdrop-filter:blur(10px);border-bottom:1px solid var(--th-border)}
.th-topbarInner{max-width:76rem;margin:0 auto;padding:12px 16px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.th-topbarSearch{display:flex;gap:8px;align-items:center;flex:1;justify-content:flex-end}
.th-topbarSearch input{min-width:240px;max-width:420px;width:100%;border:1px solid rgba(15,23,42,.18);border-radius:12px;padding:10px 12px;font-weight:800}

.th-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;text-decoration:none;font-weight:800;border:1px solid var(--th-border);background:#fff;color:#334155}
.th-btn--ghost:hover{background:#f1f5f9}
.th-btn--primary{background:var(--indigo);border-color:rgba(99,102,241,.45);color:#fff}
.th-btn--primary:hover{filter:brightness(0.95)}
.th-link{font-weight:800;color:#4f46e5;text-decoration:none}
.th-link:hover{text-decoration:underline}

.th-titleRow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.th-h3{margin:10px 0 6px;font-size:14px;font-weight:800;color:#0f172a;letter-spacing:-.01em}
.th-rowBlock{display:flex;flex-direction:column;gap:8px}
.th-rowLabel{font-size:12px;font-weight:800;color:#334155}

/* Level cap form */
.th-formRow{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin-top:10px}
.th-field{display:flex;flex-direction:column;gap:6px;min-width:180px}
.th-fieldLabel{font-size:12px;font-weight:900;color:#334155}
.th-field select{
  border:1px solid rgba(15,23,42,.18);
  border-radius:12px;
  padding:10px 12px;
  font-weight:800;
  background:#fff;
}
.th-levelCapResult{font-size:26px;font-weight:900;color:#0f172a;margin-top:8px}

@media (max-width: 640px){
  .th-topbarInner{ gap: 10px; }
  .th-topbarSearch{ justify-content: stretch; }
  .th-topbarSearch input{ min-width: 0; }
  .th-heroHeader{ flex-direction: column; align-items: flex-start; }
  .th-heroHeaderImg{ width: 108px; height: 108px; }
  .th-sectionNav{ top: 0; }
}


/* ===== Cleanup v3 tweaks ===== */

/* 2) Tone down overall boldness a bit more */
.th-heroName{font-weight:800;}
.th-cardTitle{font-weight:800;}
.th-h3{font-weight:800;}
.th-tab,.th-btn{font-weight:800;}
.th-pill,.th-chip,.th-muted strong{font-weight:700;}

/* 3) Rarity badge should be rounded like pills */
.th-rarity{border-radius:999px !important;}

/* 1) Star upgrades dropdown toggle + sizing parity */
.th-details{border:1px solid rgba(15,23,42,.10); border-radius:14px; background:rgba(255,255,255,.70);}
.th-details > summary{
  list-style:none;
  cursor:pointer;
  font-weight:800;
  font-size:13px;
  padding:10px 12px;
  border-radius:14px;
  display:flex;
  align-items:center;
  gap:10px;
}
.th-details > summary::-webkit-details-marker{display:none;}
.th-details > summary:after{
  content:"▾";
  margin-left:auto;
  opacity:.7;
  transition: transform .12s ease;
}
.th-details[open] > summary:after{transform: rotate(180deg);}
.th-details > summary:hover{background:rgba(99,102,241,.08);}
.th-starList{margin:0; padding:10px 14px 12px 30px; font-size:13px;}
.th-starList li{margin:6px 0; line-height:1.35;}
.th-star{font-weight:800; font-size:12px; margin-right:6px;}

/* 4) Ensure portrait images in queues/UW/order are 38px */
.th-portraitImg{width:38px !important; height:38px !important;}

/* 3) Queue row emphasis (Front / Mid / Back) */
.th-rowBlock{
  padding:10px 10px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.72);
}
.th-rowLabel{font-weight:800;}
.th-rowBlock--front{box-shadow: inset 0 0 0 1px rgba(239,68,68,.22);}
.th-rowBlock--mid{box-shadow: inset 0 0 0 1px rgba(99,102,241,.22);}
.th-rowBlock--back{box-shadow: inset 0 0 0 1px rgba(34,197,94,.22);}
.th-rowBlock--front .th-rowLabel{color:#991b1b;}
.th-rowBlock--mid .th-rowLabel{color:#312e81;}
.th-rowBlock--back .th-rowLabel{color:#14532d;}

/* 7) UW + Upgrade Order separation */
.th-subCard{
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.72);
  margin-bottom:12px;
}
.th-subCard--uw{background: rgba(99,102,241,.08);}
.th-subCard--order{background: rgba(34,197,94,.08);}

/* 5) Castle breakdown font sizing */
.th-breakdownList{margin:0; padding:10px 14px 12px 30px; font-size:13px;}
.th-breakdownList li{margin:6px 0; line-height:1.35;}
.th-breakdownKey{font-weight:800; font-size:12px; margin-right:6px;}

/* 6) Specific Details text size parity */
.th-card--details p, .th-card--details li, .th-card--details .th-muted{font-size:13px; line-height:1.45;}


/* ===== Cleanup v4 tweaks ===== */
.th-btn { font-weight: 750; }
.th-btn--ghost, .th-btn--soft {
  padding: 7px 10px;
  font-weight: 750;
  background: rgba(255,255,255,.65);
}
.th-btn--ghost:hover, .th-btn--soft:hover { background: rgba(241,245,249,.95); }
.th-profileNav .th-btn { font-size: 13px; }

.th-topbarInner{ padding: 10px 16px; }
.th-topbarSearchWrap{
  position: relative;
  flex: 1;
  display: flex;
  justify-content: flex-end;
}
.th-searchInput{
  width: min(420px, 100%);
  border: 1px solid rgba(15,23,42,.14);
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 700;
  background: rgba(255,255,255,.82);
}
.th-searchInput:focus{
  outline: none;
  border-color: rgba(99,102,241,.45);
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.th-searchResults{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(420px, 100%);
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  box-shadow: 0 14px 36px rgba(15,23,42,.12);
  overflow: hidden;
}
.th-searchItem{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  cursor:pointer;
  font-size:13px;
}
.th-searchItem:hover{ background: rgba(241,245,249,.9); }
.th-searchItemName{ font-weight: 800; color:#0f172a; }
.th-searchAvatar{
  width:38px;
  height:38px;
  border-radius:12px;
  object-fit:cover;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.04);
}
.th-searchText{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.th-searchItemSub{ color:#64748b; font-size:12px; }

/* Suggested Star Upgrade Focus size */
.th-calloutTitle{
  font-size: 11px;
  font-weight: 800;
}
.th-calloutHint{ font-size: 12px; }
.th-callout .th-ol li{ font-size: 13px; line-height: 1.35; }
.th-callout .th-ol strong{ font-weight: 800; }

/* Star upgrades toggle + list sizing */
.th-details summary{
  font-size: 13px;
  font-weight: 800;
}
.th-starList li{ font-size: 13px; }

/* Light gray sub cards */
.th-subCard--gray{
  border:1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.04);
  border-radius: 14px;
  padding: 12px;
}

.th-priorityBoard{
  margin-top:16px;
  border:1px solid rgba(251,191,36,.28);
  border-radius:16px;
  padding:14px;
  background:
    linear-gradient(135deg, rgba(255,251,235,.82), rgba(255,255,255,.78) 44%, rgba(239,246,255,.70));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 12px 30px rgba(15,23,42,.05);
}
.th-priorityHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.th-priorityTitle{
  margin:0;
  font-size:18px;
  line-height:1.16;
  font-weight:900;
  color:#0f172a;
}
.th-prioritySub{
  margin:4px 0 0;
  max-width:46rem;
  color:#64748b;
  font-size:12px;
  line-height:1.4;
  font-weight:650;
}
.th-priorityGrid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
@media (min-width: 880px){
  .th-priorityGrid{grid-template-columns:repeat(3, minmax(0, 1fr));}
  .th-priorityTile--traits,
  .th-priorityTile--milestones{grid-column:span 2;}
  .th-priorityTile--notes{grid-column:span 3;}
}
.th-priorityTile{
  min-width:0;
  border:1px solid rgba(15,23,42,.08);
  border-radius:14px;
  padding:12px;
  background:rgba(255,255,255,.74);
  box-shadow:0 8px 18px rgba(15,23,42,.04);
}
.th-priorityTile--track{
  background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(248,250,252,.76));
}
.th-priorityTile--traits{
  background:rgba(255,255,255,.78);
}
.th-priorityTileTitle{
  margin:0 0 9px;
  color:#334155;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.th-priorityTrack{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:7px;
}
.th-priorityTrack li{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  align-items:start;
  gap:8px;
  min-width:0;
}
.th-priorityNum{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:9px;
  border:1px solid rgba(251,191,36,.36);
  background:rgba(255,251,235,.86);
  color:#92400e;
  font-size:11px;
  font-weight:900;
  line-height:1;
}
.th-priorityText{
  min-width:0;
  padding:6px 0 7px;
  border-bottom:1px solid rgba(15,23,42,.07);
  color:#0f172a;
  font-size:12px;
  line-height:1.35;
  font-weight:750;
}
.th-priorityTrack li:last-child .th-priorityText{
  border-bottom:0;
}
.th-priorityRows{
  display:grid;
  gap:8px;
}
.th-priorityRow{
  display:grid;
  grid-template-columns:minmax(8.5rem, .8fr) minmax(0, 1fr);
  gap:10px;
  align-items:center;
  border:1px solid rgba(15,23,42,.08);
  border-radius:12px;
  padding:9px 10px;
  background:rgba(248,250,252,.72);
}
.th-priorityHero{
  color:#0f172a;
  font-size:12px;
  font-weight:900;
}
.th-priorityTrait{
  color:#334155;
  font-size:12px;
  font-weight:750;
  line-height:1.35;
}
.th-priorityNotes{
  display:grid;
  gap:8px;
}
.th-priorityNotes p{
  margin:0;
  border-left:3px solid rgba(251,191,36,.70);
  border-radius:10px;
  padding:9px 10px;
  background:rgba(255,255,255,.72);
  color:#334155;
  font-size:12px;
  line-height:1.35;
  font-weight:650;
}
@media (max-width: 560px){
  .th-priorityRow{
    grid-template-columns:1fr;
    gap:3px;
  }
}

/* Details typography */
.th-card--details p,
.th-card--details li{
  font-size: 13px;
  line-height: 1.45;
}

/* Calculator breakdown sizing */
.th-breakdownList li{ font-size: 13px; line-height: 1.35; }


/* === Unified topbar search (profile) === */
.th-searchRow{display:flex;gap:8px;align-items:center;justify-content:flex-end;width:min(520px,100%);}
.th-btn--sm{padding:8px 10px;font-size:12px;}
.th-btn--soft{background:rgba(15,23,42,.03);border-color:rgba(15,23,42,.10);color:#334155;}
.th-topbar .th-btn{font-weight:700;}
/* Match "Hero Hub" button size to Prev/Next */
.th-topbar .th-btn{font-size:13px;}
.th-searchInput{font-weight:600;}

/* Search dropdown active item */
.th-searchItem.is-active{ background: rgba(226,232,240,.95); }


/* v4.6 tweaks */
.th-topbar{border-bottom:none !important;}

/* Bonds & Synergies portrait grid */
.th-bondsGrid{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.th-bondItem{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:inherit;padding:8px 10px;border:1px solid rgba(15,23,42,.10);border-radius:14px;background:rgba(255,255,255,.7)}
.th-bondItem:hover{box-shadow:0 10px 24px rgba(15,23,42,.08);transform:translateY(-1px)}
.th-bondItem--text{border-style:dashed}
.th-bondItem .th-portraitImg{width:38px;height:38px;border-radius:12px}
.th-bondItem .th-portraitName{font-size:11px;font-weight:800;text-align:center;max-width:86px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


/* ===== v4.7 tweaks: skill type flair + prettier star suggestion + lineups ===== */
.th-pill--type{border-width:1px}
.th-pill--active{background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.35); color:#14532d;}
.th-pill--passive{background: rgba(99,102,241,.12); border-color: rgba(99,102,241,.35); color:#312e81;}
.th-pill--ultimate{background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.35); color:#78350f;}

.th-callout--star{background: rgba(99,102,241,.08); border-color: rgba(99,102,241,.18);}
.th-callout--notes{background:rgba(14,165,233,.08);border-color:rgba(14,165,233,.18);margin-top:2px}
.th-starSuggestList{margin:10px 0 0 0; padding-left:0; list-style:none; display:grid; gap:8px;}
.th-starSuggestList li{display:flex; gap:10px; align-items:flex-start; font-size:13px; color:#0f172a;}
.th-starSuggestList li::before{
  content: counter(item);
}
.th-starSuggestList{counter-reset:item;}
.th-starSuggestList li{counter-increment:item;}
.th-starSuggestList li::before{
  content: counter(item);
  min-width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background: rgba(99,102,241,.14);
  border:1px solid rgba(99,102,241,.25);
  color:#312e81;
  font-weight:800;
  margin-top:1px;
}

/* Other lineups cards */
.th-lineupCard{padding:12px;border-radius:14px;border:1px solid rgba(15,23,42,.10);background:rgba(255,255,255,.6);margin-top:10px}
.th-lineupTitle{font-weight:800}

/* Bonds & Synergies: portrait + portrait = % */
.th-bondList{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.th-bondRow{border:1px solid rgba(15,23,42,.10);background:rgba(248,250,252,.75);border-radius:14px;padding:10px 12px}
.th-bondHeroes{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.th-bondHero{display:flex;flex-direction:column;align-items:center;min-width:68px}
.th-bondOp{font-weight:900;color:#475569;margin:0 2px}
.th-bondValue{display:flex;flex-direction:column;align-items:flex-start;padding:6px 10px;border-radius:12px;background:rgba(99,102,241,.10);border:1px solid rgba(99,102,241,.22)}
.th-bondPct{font-weight:900;color:#312e81;line-height:1}
.th-bondHint{font-size:12px;color:#475569;margin-top:3px}
.th-bondDesc{margin-top:8px;font-size:13px;color:#334155;line-height:1.35}



/* Bonds & Synergies (portrait + portrait = value) */

.th-bondList{margin-top:10px;display:flex;flex-direction:column;gap:10px}
.th-bondRow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:rgba(255,255,255,.7);border:1px solid rgba(15,23,42,.10);border-radius:14px;padding:10px 12px}
.th-bondHeroes{display:flex;align-items:center;gap:10px}
.th-bondHero{display:flex;flex-direction:column;align-items:center}
.th-bondPlus,.th-bondEquals{font-weight:900;color:#475569}
.th-bondValue{font-weight:900;padding:6px 10px;border-radius:999px;border:1px solid rgba(15,23,42,.10);background:rgba(99,102,241,.08);color:#1e1b4b}
.th-bondMeta{margin-left:6px;font-size:12px}
.th-bondTextRow{padding:4px 0}

/* Bonds & Synergies (portrait + portrait = label) */
.th-bondValue{
  font-weight:800;
  font-size:13px;
  line-height:1.2;
  text-align:center;
  white-space:normal;
  max-width: 220px;
}



/* Queue tabs */
.th-tabs{ margin-top: 10px; }
.th-tabsBar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin: 10px 0 12px;
}
.th-tabBtn{
  border: 1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.75);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 700;
  font-size: 13px;
  cursor:pointer;
}
.th-tabBtn:hover{ background: rgba(255,255,255,.95); }
.th-tabBtn.is-active{
  border-color: rgba(99,102,241,.45);
  background: rgba(99,102,241,.10);
  color: #312e81;
}
.th-tabPanel{ display:none; }
.th-tabPanel.is-active{ display:block; }
.th-subTitle{ font-weight: 800; margin: 0 0 6px; }

/* v4.10.1 tweaks */
.th-slotPill{font-size:12px; line-height:1.2; font-weight:800; padding:6px 10px; border-radius:999px;}

/* Phase 1 detail polish */
.th-factGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px;margin-top:10px}
.th-factGrid--skills{margin-top:10px}
.th-factItem{padding:10px 12px;border-radius:12px;border:1px solid rgba(15,23,42,.10);background:rgba(255,255,255,.72)}
.th-factLabel{font-size:11px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:#64748b}
.th-factValue{margin-top:4px;font-size:14px;font-weight:800;color:#0f172a;line-height:1.3}

.th-sourceList{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.th-sourceLink{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.75);
  color:#1d4ed8;
  font-size:13px;
  font-weight:700;
  text-decoration:none;
}
.th-sourceLink:hover{background:rgba(255,255,255,.95);border-color:rgba(29,78,216,.25)}

.th-summonCard{margin-top:12px;padding:12px;border-radius:14px;border:1px solid rgba(15,23,42,.10);background:rgba(248,250,252,.85)}
.th-summonTitle{font-size:13px;font-weight:800;color:#0f172a}

.th-skinList{display:grid;gap:10px;margin-top:10px}
.th-skinItem{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.th-skinNote{font-size:12px;line-height:1.4;color:#475569}
.th-bondValue .th-bondMeta{display:block;margin:4px 0 0;font-weight:600;color:#475569}