:root {
  color-scheme: dark;
  --bg: #161615;
  --panel: #20201f;
  --panel-2: #262625;
  --line: #3f3d39;
  --line-soft: #32312f;
  --text: #f1eee8;
  --muted: #aaa49a;
  --muted-2: #7e786f;
  --gold: #f0b84b;
  --gold-2: #9a6508;
  --green: #81c995;
  --green-bg: #203926;
  --red: #e08f99;
  --red-bg: #4b252d;
  --blue: #8ec5e8;
  --blue-bg: #244252;
  --cyan: #7ccccc;
  --cyan-bg: #24484a;
  --purple: #d3afe9;
  --purple-bg: #3d2c4a;
  --focus: #3f7ee8;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.decks-shell {
  width: min(1500px, 100%);
}

.decks-count {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 800;
}

.decks-content {
  display: grid;
  gap: 12px;
}

.decks-content > *,
.decks-layout > *,
.decks-section-grid > *,
.decks-list > * {
  min-width: 0;
}

.decks-hero,
.decks-toolbar,
.decks-detail,
.decks-card,
.decks-monster-detail {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
}

.decks-hero {
  min-width: 0;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(135deg, #242a31, #20201f);
}

.decks-hero > div {
  min-width: 0;
}

.decks-hero h2,
.decks-detail h3,
.decks-monster-detail strong,
.decks-card b {
  margin: 0;
  color: var(--text);
}

.decks-hero p,
.decks-detail p,
.decks-card small,
.decks-card-meta,
.decks-monster-detail header span,
.decks-build-line,
.decks-rune-row span,
.decks-rune-row small,
.decks-rune-row em {
  color: var(--muted);
}

.decks-hero-kpis {
  min-width: min(520px, 100%);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.decks-hero-kpis span,
.decks-summary-grid span,
.decks-stat-grid span,
.decks-build-line span {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.decks-hero-kpis b,
.decks-summary-grid b,
.decks-stat-grid b,
.decks-build-line b {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.decks-hero-kpis strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1;
}

.decks-toolbar {
  min-width: 0;
  padding: 10px;
  display: block;
}

.decks-filters {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.decks-filter {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.decks-filter span {
  min-width: 20px;
  padding: 2px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--muted);
  text-align: center;
}

.decks-filter:hover,
.decks-filter.is-active {
  border-color: rgba(240, 184, 75, 0.7);
  color: var(--text);
  background: rgba(240, 184, 75, 0.1);
}

.decks-layout {
  min-width: 0;
  display: grid;
  gap: 14px;
}

.decks-category-panel {
  --decks-group-bg: #181817;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--decks-group-bg);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
  display: grid;
  gap: 10px;
}

.decks-category-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.decks-category-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  line-height: 1.1;
}

.decks-category-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.decks-section-grid {
  display: grid;
  gap: 10px;
}

.decks-section-card {
  padding: 10px;
  border: 1px solid var(--line);
  border-left: 7px solid var(--deck-color);
  border-radius: 8px;
  background: var(--decks-group-bg);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
  display: grid;
  gap: 9px;
}

.decks-section-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.decks-section-card > header span {
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
}

.decks-section-card > header b {
  min-width: 26px;
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--deck-color) 64%, transparent);
  border-radius: 999px;
  background: #161615;
  color: color-mix(in srgb, var(--deck-color) 86%, #fff);
  font-size: 12px;
  text-align: center;
}

.decks-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--deck-section-card-min, 190px)), 1fr));
  align-items: stretch;
  gap: 8px;
}

.decks-card {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 8px;
  border-color: color-mix(in srgb, var(--deck-color) 64%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--deck-color) 22%, transparent), transparent 74%),
    linear-gradient(90deg, color-mix(in srgb, var(--deck-color) 18%, transparent), transparent 40%),
    var(--panel);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--deck-color) 12%, transparent);
  display: grid;
  gap: 6px;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.decks-card:hover,
.decks-card.is-selected {
  border-color: var(--deck-color);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--deck-color) 34%, transparent), transparent 78%),
    linear-gradient(90deg, color-mix(in srgb, var(--deck-color) 24%, transparent), transparent 44%),
    #242628;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--deck-color) 28%, transparent),
    0 0 0 1px color-mix(in srgb, var(--deck-color) 35%, transparent);
}

.decks-card-head,
.decks-card-meta,
.decks-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.decks-card-head span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.decks-card-head b,
.decks-card-head small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.decks-card-meta {
  justify-content: center;
  gap: 10px;
  font-size: 11px;
}

.decks-card-warning {
  padding: 6px 8px;
  border: 1px solid rgba(224, 143, 153, 0.35);
  border-radius: 6px;
  background: rgba(224, 143, 153, 0.09);
  color: var(--red);
  font-size: 12px;
}

.decks-tag {
  flex: 0 0 auto;
  padding: 3px 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.decks-tag--offense {
  color: var(--blue);
  background: var(--blue-bg);
}

.decks-tag--defense {
  color: var(--red);
  background: var(--red-bg);
}

.decks-tag--pve {
  color: var(--green);
  background: var(--green-bg);
}

.decks-tag--autre {
  color: var(--purple);
  background: var(--purple-bg);
}

.decks-monster-strip {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-wrap: nowrap;
}

.decks-monster-icon {
  position: relative;
  width: 46px;
  height: 46px;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #171a1d;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 auto;
}

.decks-monster-icon img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: contain;
  background: transparent;
}

.decks-monster-icon i {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 15px;
  height: 15px;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-left: 0;
  border-bottom: 0;
  border-radius: 0 6px 0 0;
  background: rgba(40, 91, 159, 0.88);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.decks-icon-counter {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.decks-icon-counter img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex: 0 0 auto;
}

.decks-icon-counter b {
  color: var(--muted);
  font-size: 11px;
}

.decks-modal {
  width: min(1500px, 98vw);
}

.decks-modal-body {
  padding: 12px;
  overflow: auto;
}

.decks-modal-title-row {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.decks-modal-title-row h2 {
  margin: 0;
}

.decks-turn-order {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.decks-turn-order b {
  color: var(--blue);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.decks-turn-order span {
  color: var(--text);
}

.decks-modal .decks-detail-head {
  padding-top: 0;
}

.decks-detail {
  position: sticky;
  top: 10px;
  max-height: calc(100vh - 26px);
  overflow: auto;
  padding: 12px;
  display: grid;
  gap: 12px;
}

.decks-detail-head {
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}

.decks-summary-grid,
.decks-stat-grid,
.decks-build-line {
  display: grid;
  gap: 7px;
}

.decks-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.decks-alerts {
  display: grid;
  gap: 6px;
}

.decks-alerts span {
  padding: 7px 9px;
  border: 1px solid rgba(224, 143, 153, 0.35);
  border-radius: 7px;
  background: rgba(224, 143, 153, 0.08);
  color: var(--red);
  font-size: 12px;
}

.decks-detail-monsters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(305px, 1fr));
  align-items: start;
  gap: 10px;
}

.decks-monster-detail {
  min-width: 0;
  padding: 12px;
  display: grid;
  gap: 11px;
  background:
    linear-gradient(135deg, rgba(142, 197, 232, 0.07), transparent 46%),
    var(--panel);
}

.decks-build-head,
.decks-monster-detail header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.decks-build-portrait .decks-monster-icon {
  width: 54px;
  height: 54px;
}

.decks-build-title,
.decks-monster-detail header div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.decks-build-title strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.decks-build-title span {
  color: var(--muted);
  font-size: 12px;
}

.decks-leader-note {
  padding: 9px 10px;
  border: 1px solid rgba(142, 197, 232, 0.28);
  border-radius: 8px;
  background: rgba(142, 197, 232, 0.08);
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.decks-leader-note b {
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.decks-leader-note span {
  color: var(--text);
}

.decks-build-equipment {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 4px;
}

.decks-build-gear {
  position: relative;
  min-width: 0;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.035);
  display: grid;
  place-items: center;
}

.decks-build-gear img {
  width: 94%;
  height: 94%;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
}

.decks-build-gear b {
  position: absolute;
  left: 0;
  bottom: 0;
  min-width: 10px;
  height: 10px;
  padding: 0 1px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.34);
  color: rgba(255, 255, 255, 0.78);
  display: inline-grid;
  place-items: center;
  font-size: 7.5px;
  font-weight: 900;
  line-height: 1;
}

.decks-build-gear--rune:hover,
.decks-build-gear--artifact:hover,
.decks-build-gear--relic:hover {
  border-color: rgba(142, 197, 232, 0.55);
  background: rgba(142, 197, 232, 0.09);
  transform: translateY(-1px);
}

.decks-build-gear--artifact {
  border-color: rgba(211, 175, 233, 0.25);
}

.decks-build-gear--relic {
  border-color: rgba(240, 184, 75, 0.28);
}

.decks-build-gear.is-missing {
  border-color: rgba(224, 143, 153, 0.22);
  background: rgba(224, 143, 153, 0.055);
  color: var(--red);
}

.decks-build-gear.is-missing b {
  position: static;
  background: transparent;
  color: var(--red);
  font-size: 11px;
}

.decks-build-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.decks-build-metrics span {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.026);
  display: grid;
  gap: 3px;
}

.decks-build-metrics b {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.decks-build-metrics strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.decks-build-metrics span:nth-child(-n + 3) strong {
  color: var(--gold);
  font-size: 15px;
}

.decks-build-stat-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(15, 18, 22, 0.58);
  font-size: 12px;
  table-layout: fixed;
}

.decks-build-stat-table th,
.decks-build-stat-table td {
  padding: 6px 7px;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.065);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.decks-build-stat-table th:first-child,
.decks-build-stat-table td:first-child {
  text-align: left;
}

.decks-build-stat-table thead th {
  background: rgba(255, 255, 255, 0.055);
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.decks-build-stat-table tbody th {
  color: var(--text);
  font-weight: 900;
}

.decks-build-stat-table tbody td {
  color: #d7dde8;
}

.decks-build-stat-table tbody td:nth-child(3) {
  color: var(--green);
}

.decks-build-stat-table tbody td:nth-child(4) {
  color: var(--blue);
  font-weight: 900;
}

.decks-build-stat-table tr:last-child th,
.decks-build-stat-table tr:last-child td {
  border-bottom: 0;
}

.decks-build-stat-table th:last-child,
.decks-build-stat-table td:last-child {
  border-right: 0;
}

.decks-stat-grid {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.decks-stat-grid span {
  padding: 6px 7px;
  align-items: center;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
}

.decks-build-line {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  font-size: 12px;
}

.decks-equipment-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 10px;
}

.decks-equipment-grid h4 {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.decks-rune-list,
.decks-artifact-list {
  display: grid;
  gap: 6px;
}

.decks-rune-row {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.025);
  display: grid;
  gap: 2px;
}

.decks-rune-row b {
  color: var(--text);
  font-size: 12px;
}

.decks-rune-row span,
.decks-rune-row small,
.decks-rune-row em {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.decks-rune-row.is-missing {
  border-color: rgba(224, 143, 153, 0.24);
  background: rgba(224, 143, 153, 0.06);
}

@media (max-width: 1080px) {
  .decks-equipment-grid {
    grid-template-columns: 1fr;
  }

  .decks-detail {
    position: static;
    max-height: none;
  }
}

@media (max-width: 760px) {
  .decks-hero,
  .decks-detail-head {
    align-items: stretch;
    flex-direction: column;
  }

  .decks-detail-monsters {
    grid-template-columns: 1fr;
  }

  .decks-toolbar,
  .decks-summary-grid,
  .decks-build-line {
    grid-template-columns: 1fr;
  }

  .decks-build-metrics {
    grid-template-columns: 1fr;
  }

  .decks-hero-kpis {
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .decks-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.account-report-shell {
  width: min(1500px, 100%);
  padding: 12px 8px 24px;
}

.account-report-content {
  display: grid;
  gap: 14px;
}

.account-report-hero {
  display: block;
}

.account-report-score-card,
.account-report-header-card,
.account-kpi,
.account-report-section,
.account-speed-card,
.account-set-card,
.account-monster-card,
.account-farm-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
}

.account-report-score-card {
  padding: 18px;
  display: grid;
  gap: 8px;
  background: linear-gradient(135deg, #243045, #20252d);
}

.account-report-score-card span,
.account-report-score-card em,
.account-report-meta b,
.account-kpi span,
.account-section-title span,
.account-speed-card span,
.account-speed-card dt,
.account-set-head span,
.account-set-stats b,
.account-slot-strip em,
.account-muted {
  color: var(--muted);
}

.account-report-score-card strong {
  font-size: 54px;
  line-height: 0.95;
}

.account-report-score-card small {
  margin-left: 4px;
  font-size: 22px;
  color: var(--muted);
}

.account-report-score-card em {
  font-style: normal;
  font-size: 12px;
  line-height: 1.45;
}

.account-report-header-card {
  padding: 10px 12px 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.account-report-identity {
  min-width: 190px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  overflow: hidden;
}

.account-report-identity h2 {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 22px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-report-meta,
.account-kpi-grid,
.account-artifact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.account-report-meta span {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  white-space: nowrap;
}

.account-report-meta {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-width: 0;
  overflow: hidden;
}

.account-report-meta b {
  flex: 0 0 auto;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.account-report-meta strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  text-overflow: ellipsis;
}

.account-comparison-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(142, 197, 232, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(57, 255, 20, 0.05), rgba(255, 59, 59, 0.04)),
    var(--panel);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
}

.account-comparison-panel.is-active {
  border-color: rgba(57, 255, 20, 0.28);
}

.account-comparison-panel strong {
  display: block;
  color: var(--text);
  font-size: 14px;
}

.account-comparison-panel span {
  color: var(--muted);
  font-size: 12px;
}

.account-comparison-head,
.account-comparison-controls,
.account-comparison-legend {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.account-comparison-head {
  justify-content: space-between;
}

.account-comparison-controls label {
  display: grid;
  gap: 4px;
  min-width: min(280px, 100%);
  flex: 1 1 240px;
}

.account-comparison-controls select {
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #171716;
  color: var(--text);
}

.account-comparison-legend {
  gap: 14px;
}

.account-comparison-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.account-comparison-legend i {
  width: 22px;
  height: 3px;
  border-radius: 999px;
  background: var(--legend-color);
  box-shadow: 0 0 10px rgba(57, 255, 20, 0.22);
}

.account-comparison-legend b {
  color: #ffb4b4;
  font-size: 12px;
}

.account-comparison-delta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  padding: 0 5px 2px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  font-weight: 950;
  vertical-align: middle;
  white-space: nowrap;
  position: relative;
  top: 0;
}

.account-comparison-delta.is-positive {
  color: #39ff14 !important;
  background: rgba(57, 255, 20, 0.12) !important;
  text-shadow: 0 0 8px rgba(57, 255, 20, 0.42);
}

.account-comparison-delta.is-negative {
  color: #ff5656 !important;
  background: rgba(255, 59, 59, 0.13) !important;
  text-shadow: 0 0 8px rgba(255, 59, 59, 0.35);
}

.account-comparison-delta.is-small {
  margin-left: 3px;
  padding: 0 3px 1px;
  font-size: 9px;
  line-height: 1;
  top: 0;
}

.account-comparison-curve-panel {
  border-color: rgba(57, 255, 20, 0.22);
}

.account-report-inline-kpis {
  flex: 1 1 620px;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(86px, 1fr));
  gap: 6px;
}

.account-report-inline-kpis span {
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.025);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}

.account-report-inline-kpis b {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-report-inline-kpis strong {
  flex: 0 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1;
}

.account-kpi-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.account-kpi {
  padding: 8px 10px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.account-kpi span {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-kpi strong {
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1;
}

.account-report-tabs {
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.account-report-tab {
  min-width: 0;
  flex: 1 1 0;
  min-height: 34px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.account-report-tab img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex: 0 0 auto;
}

.account-report-tab span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-report-tab:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.account-report-tab.is-active,
.account-report-tab[aria-pressed="true"] {
  border-color: rgba(142, 197, 232, 0.45);
  background: rgba(142, 197, 232, 0.13);
  color: var(--blue);
}

.account-report-tab-panel {
  display: grid;
  gap: 14px;
}

.account-artifact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.account-artifact-actions[hidden] {
  display: none;
}

.account-report-section {
  padding: 14px;
  display: grid;
  gap: 12px;
}

.account-section-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.account-section-title h2 {
  margin: 0;
  font-size: 18px;
}

.account-speed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.account-speed-depth-groups {
  display: grid;
  gap: 14px;
}

.account-speed-depth-group {
  display: grid;
  gap: 8px;
  padding-top: 2px;
}

.account-speed-depth-group .account-speed-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 260px));
  justify-content: start;
}

.account-speed-depth-group h3 {
  margin: 0;
  padding: 0 2px 3px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.account-speed-card {
  padding: 6px 6px 12px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 7px;
  min-height: 138px;
  text-align: center;
  background: #202328;
  border-color: var(--speed-line, var(--line));
  background:
    linear-gradient(135deg, var(--speed-bg, rgba(142, 197, 232, 0.14)), transparent 68%),
    #202328;
}

.account-speed-card.is-empty {
  opacity: 0.58;
}

.account-speed-rune-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  justify-content: center;
  gap: clamp(2px, 1.1vw, 4px);
  width: min(100%, 380px);
  padding: 0;
  justify-self: center;
}

.account-speed-rune {
  width: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
}

.account-speed-rune:hover {
  border-color: var(--speed-line, var(--accent));
  background: rgba(255, 255, 255, 0.075);
  transform: translateY(-1px);
}

.account-speed-rune.can-gain-speed {
  border-color: rgba(255, 92, 92, 0.6);
  box-shadow: inset 0 0 0 1px rgba(255, 92, 92, 0.28);
}

.account-speed-rune.can-gain-speed:hover {
  border-color: rgba(255, 115, 115, 0.85);
  box-shadow: inset 0 0 0 1px rgba(255, 115, 115, 0.42), 0 0 0 2px rgba(255, 92, 92, 0.08);
}

.account-speed-rune img {
  width: min(24px, 72%);
  height: min(24px, 72%);
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
}

.account-speed-title {
  font-size: 14px;
}

.account-speed-value {
  font-size: 30px;
  line-height: 1;
  font-weight: 850;
  color: var(--speed-color, var(--text));
  white-space: nowrap;
}

.account-speed-flat-alt {
  display: inline-block;
  margin-left: 3px;
  color: #ff6b6b;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  vertical-align: super;
  text-shadow: 0 0 8px rgba(255, 70, 70, 0.28);
}

.account-speed-meta {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 5px;
  width: 100%;
  max-width: 100%;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.account-speed-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
  display: inline-flex;
  align-items: center;
}

.account-speed-meta i {
  flex: 0 0 auto;
  font-style: normal;
  color: var(--muted-2);
}

.account-speed-card--swift {
  --speed-color: #76b8ff;
  --speed-line: rgba(118, 184, 255, 0.55);
  --speed-bg: rgba(118, 184, 255, 0.18);
}

.account-speed-card--violent {
  --speed-color: #c98cff;
  --speed-line: rgba(201, 140, 255, 0.55);
  --speed-bg: rgba(201, 140, 255, 0.17);
}

.account-speed-card--despair {
  --speed-color: #f0c15b;
  --speed-line: rgba(240, 193, 91, 0.55);
  --speed-bg: rgba(240, 193, 91, 0.17);
}

.account-speed-card--broken {
  --speed-color: #9db2bd;
  --speed-line: rgba(157, 178, 189, 0.52);
  --speed-bg: rgba(157, 178, 189, 0.14);
}

.account-speed-build-modal {
  width: min(880px, 96vw);
}

.account-speed-build-modal .modal-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.account-speed-build-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.account-speed-build-rune {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left-color: var(--set-color, var(--accent));
  border-left-width: 3px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.account-speed-build-icon {
  display: grid;
  place-items: center;
  gap: 3px;
}

.account-speed-build-icon img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.account-speed-build-icon span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.account-speed-build-rune strong,
.account-speed-build-rune span,
.account-speed-build-rune em {
  display: block;
  min-width: 0;
}

.account-speed-build-rune strong {
  color: var(--text);
  font-size: 13px;
}

.account-speed-build-rune span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.account-speed-build-rune em {
  margin-top: 5px;
  color: var(--set-color, var(--accent));
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.account-distribution {
  display: grid;
  grid-template-columns: repeat(6, minmax(90px, 1fr));
  gap: 8px;
  align-items: end;
}

.account-distribution > div {
  min-height: 128px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #1c1f23;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 5px;
}

.account-distribution strong {
  font-size: 20px;
}

.account-distribution i {
  align-self: end;
  height: var(--h);
  min-height: 8px;
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, #8ec5e8, #577aa5);
}

.account-distribution em {
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
}

.account-set-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px;
}

.account-set-overview {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #1c1f23;
  display: grid;
  gap: 12px;
}

.account-set-overview-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.account-set-overview-head > div {
  display: grid;
  gap: 3px;
}

.account-set-overview-head span {
  color: var(--muted);
  font-size: 12px;
}

.account-set-overview-head strong {
  font-size: 18px;
}

.account-set-circle-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
}

.account-set-slot-eff-control {
  margin-top: 10px;
  display: flex;
  justify-content: flex-start;
}

.account-set-slot-eff-control label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(18, 23, 31, 0.72);
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.account-set-slot-eff-control input {
  width: 58px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #11151c;
  color: var(--text);
  font-weight: 850;
  text-align: center;
}

.account-set-circle {
  position: relative;
  min-height: 110px;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 4px;
  text-align: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  outline: none;
}

.account-set-circle svg {
  width: 74px;
  height: 74px;
  transform: rotate(-90deg);
}

.account-set-circle circle {
  fill: none;
  stroke-width: 4;
}

.account-set-circle-track {
  stroke: rgba(255, 255, 255, 0.1);
}

.account-set-circle-value {
  stroke: var(--blue);
  stroke-linecap: round;
  stroke-dasharray: var(--dash) 113;
}

.account-set-circle-selection {
  opacity: 0;
  stroke: rgba(255, 255, 255, 0.98);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: var(--outer-dash) 126;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.32));
  transition: opacity 120ms ease, stroke-width 120ms ease;
}

.account-set-circle:hover .account-set-circle-selection,
.account-set-circle:focus-visible .account-set-circle-selection {
  opacity: 0.24;
}

.account-set-circle.is-graph-visible .account-set-circle-selection,
.account-set-circle[aria-pressed="true"] .account-set-circle-selection {
  opacity: 0.96;
}

.account-set-circle.is-graph-visible:hover .account-set-circle-selection,
.account-set-circle.is-graph-visible:focus-visible .account-set-circle-selection,
.account-set-circle[aria-pressed="true"]:hover .account-set-circle-selection,
.account-set-circle[aria-pressed="true"]:focus-visible .account-set-circle-selection {
  opacity: 1;
  stroke-width: 2.6;
}

.account-set-circle img {
  position: absolute;
  top: 18px;
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.account-set-circle strong {
  margin-top: -3px;
  font-size: 14px;
}

.account-set-circle span {
  color: var(--muted);
  font-size: 11px;
}

.account-set-card {
  padding: 12px;
  display: grid;
  gap: 10px;
  background: #202328;
}

.account-set-head,
.account-set-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.account-set-head strong {
  font-size: 16px;
}

.account-set-main > div:first-child {
  display: grid;
  gap: 3px;
}

.account-set-main > div:first-child strong {
  font-size: 26px;
}

.account-set-mini-graph {
  width: 150px;
  height: 64px;
  padding: 0;
  border: 1px solid rgba(142, 197, 232, 0.24);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(142, 197, 232, 0.08), rgba(27, 30, 34, 0.82));
  cursor: pointer;
  overflow: hidden;
}

.account-set-mini-graph:hover {
  border-color: rgba(142, 197, 232, 0.55);
  background: linear-gradient(180deg, rgba(142, 197, 232, 0.14), rgba(27, 30, 34, 0.9));
}

.account-rank-graph {
  width: 100%;
  height: 100%;
  display: block;
}

.account-rank-grid line,
.account-rank-axis line {
  stroke: rgba(255, 255, 255, 0.09);
  stroke-width: 1;
}

.account-rank-grid--target line {
  stroke: rgba(255, 255, 255, 0.35);
  stroke-dasharray: 7 6;
}

.account-rank-grid text,
.account-rank-axis text {
  fill: var(--muted-2);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0;
}

.account-rank-axis text {
  text-anchor: middle;
}

.account-rank-area {
  fill: rgba(142, 197, 232, 0.16);
}

.account-rank-line {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.account-guild-curve-panel {
  gap: 12px;
}

.account-guild-curve-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.account-guild-curve-toolbar label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.account-guild-curve-toolbar input[type="number"] {
  width: 92px;
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #171716;
  color: var(--text);
}

.account-guild-curve-members {
  position: relative;
}

.account-guild-curve-members summary {
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #1c1f23;
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.account-guild-curve-members > div {
  position: absolute;
  z-index: 25;
  top: calc(100% + 6px);
  left: 0;
  width: min(340px, 86vw);
  max-height: 280px;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #202328;
  box-shadow: var(--shadow);
  display: grid;
  gap: 5px;
}

.account-guild-curve-members label {
  justify-content: flex-start;
  min-height: 28px;
  padding: 3px 4px;
}

.account-guild-curve-member-actions {
  display: flex;
  gap: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.account-guild-curve-member-actions button {
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid rgba(142, 197, 232, 0.38);
  border-radius: 6px;
  background: rgba(142, 197, 232, 0.1);
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.account-guild-curve-member-actions button:hover {
  border-color: rgba(142, 197, 232, 0.72);
  background: rgba(142, 197, 232, 0.16);
}

.account-guild-curve-graph {
  position: relative;
  min-height: 258px;
  padding: 10px;
  border: 1px solid rgba(142, 197, 232, 0.22);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(142, 197, 232, 0.06), rgba(20, 22, 26, 0.94));
}

.account-guild-curve-svg {
  width: 100%;
  height: 100%;
  min-height: 258px;
  display: block;
}

.account-guild-curve-line {
  fill: none;
  stroke: var(--graph-color);
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
  transition: opacity 120ms ease;
}

.account-guild-curve-line.is-highlight {
  opacity: 1;
}

.account-guild-curve-line.is-muted {
  opacity: 0.18;
}

.account-guild-curve-hover-zone {
  fill: transparent;
  stroke: transparent;
  pointer-events: all;
}

.account-guild-curve-hover-line {
  opacity: 0;
  stroke: rgba(243, 208, 139, 0.75);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  pointer-events: none;
}

.account-guild-curve-hover-line.is-visible {
  opacity: 1;
}

.account-guild-curve-hover-point {
  fill: var(--graph-color);
  stroke: #f8f2e8;
  stroke-width: 1.4;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}

.account-guild-curve-tooltip {
  position: absolute;
  z-index: 4;
  min-width: 210px;
  max-width: min(360px, calc(100% - 22px));
  padding: 8px 10px;
  border: 1px solid rgba(243, 208, 139, 0.34);
  border-radius: 7px;
  background: rgba(22, 20, 18, 0.94);
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: 12px;
  pointer-events: none;
}

.account-guild-curve-tooltip strong {
  display: block;
  margin-bottom: 5px;
  color: var(--gold);
}

.account-guild-curve-tooltip span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  line-height: 1.35;
  color: var(--muted);
}

.account-guild-curve-tooltip i {
  width: 18px;
  height: 3px;
  border-radius: 999px;
  background: var(--legend-color);
  flex: 0 0 auto;
}

.account-guild-curve-tooltip b {
  color: var(--text);
}

.account-guild-curve-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: var(--muted);
  font-size: 12px;
}

.account-guild-curve-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: default;
  border-radius: 5px;
  outline: none;
}

.account-guild-curve-legend span:hover,
.account-guild-curve-legend span:focus-visible {
  color: var(--text);
}

.account-guild-curve-legend i {
  width: 22px;
  height: 3px;
  border-radius: 999px;
  background: var(--legend-color);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.account-rank-graph.is-mini .account-rank-line {
  stroke-width: 1.6;
}

.account-rank-graph.is-mini .account-rank-area {
  fill: rgba(142, 197, 232, 0.2);
}

.account-rank-graph.is-mini .account-rank-grid text,
.account-rank-graph.is-mini .account-rank-axis text {
  font-size: 7.5px;
  font-weight: 500;
  fill: rgba(170, 164, 154, 0.76);
}

.account-set-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.account-set-stats span {
  padding: 7px;
  border-radius: 6px;
  background: #1b1e22;
  display: grid;
  gap: 3px;
}

.account-slot-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
}

.account-slot-strip span {
  padding: 6px 4px;
  border: 1px solid var(--line);
  border-radius: 6px;
  text-align: center;
  display: grid;
  gap: 2px;
  font-size: 11px;
}

.account-slot-strip b {
  font-size: 15px;
}

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

.account-monster-search {
  max-width: 460px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  display: grid;
  grid-template-columns: max-content minmax(160px, 1fr);
  align-items: center;
  gap: 10px;
}

.account-monster-search span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.account-monster-search input {
  min-width: 0;
  height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: rgba(7, 9, 12, 0.75);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}

.account-monster-search input:focus {
  border-color: rgba(142, 197, 232, 0.62);
  box-shadow: 0 0 0 2px rgba(142, 197, 232, 0.14);
  outline: 0;
}

.account-monster-card {
  padding: 12px;
  display: grid;
  gap: 10px;
  min-width: 0;
  background: #202328;
}

.account-monster-card h3 {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-size: 15px;
}

.account-monster-title-line {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.account-monster-missing-button {
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(142, 197, 232, 0.34);
  border-radius: 999px;
  background: rgba(142, 197, 232, 0.08);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.account-monster-missing-button:hover {
  border-color: rgba(142, 197, 232, 0.62);
  color: var(--text);
  background: rgba(142, 197, 232, 0.14);
}

.account-table-wrap {
  overflow-x: auto;
}

.account-mini-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(142, 197, 232, 0.16);
  border-radius: 8px;
  background: rgba(5, 12, 24, 0.26);
}

.account-mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.account-mini-table th,
.account-mini-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  text-align: left;
  white-space: nowrap;
}

.account-mini-table th {
  color: var(--muted);
  font-weight: 800;
  background: rgba(142, 197, 232, 0.08);
}

.account-mini-table tr:last-child td {
  border-bottom: 0;
}

.account-monster-card table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.account-monster-card th,
.account-monster-card td {
  padding: 6px 7px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  text-align: left;
  white-space: nowrap;
}

.account-monster-card th {
  color: var(--muted);
  font-weight: 700;
}

.account-alert {
  padding: 10px 12px;
  border: 1px solid rgba(240, 184, 75, 0.35);
  border-radius: 8px;
  color: #f0d18a;
  background: rgba(240, 184, 75, 0.1);
}

.account-overview-layout {
  display: grid;
  gap: 12px;
}

.account-overview-profile {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(142, 197, 232, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(142, 197, 232, 0.1), transparent 44%),
    #1c1f23;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) minmax(250px, 330px);
  gap: 14px;
  align-items: center;
}

.account-guild-report-line {
  min-width: 0;
}

.account-guild-report-table-wrap {
  max-height: none;
  overflow: visible;
  border-color: rgba(255, 255, 255, 0.11);
}

.account-guild-report-table {
  min-width: 980px;
}

.account-guild-report-table th,
.account-guild-report-table td {
  padding: 9px 10px;
}

.account-guild-report-table thead th {
  position: static;
}

.account-guild-report-table .guild-report-metric {
  min-width: 88px;
  padding-bottom: 21px;
}

.account-guild-metric-trigger {
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  padding: 3px 7px;
  min-width: 54px;
}

.account-guild-metric-trigger:hover,
.account-guild-metric-trigger[aria-expanded="true"] {
  background: rgba(142, 197, 232, 0.18);
  box-shadow: inset 0 0 0 1px rgba(142, 197, 232, 0.28);
}

.account-guild-metric-menu {
  position: fixed;
  z-index: 10000;
  min-width: 260px;
  max-width: min(360px, calc(100vw - 16px));
  padding: 7px;
  border: 1px solid rgba(142, 197, 232, 0.32);
  border-radius: 8px;
  background: #161b22;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38);
}

.account-guild-metric-menu[hidden] {
  display: none;
}

.account-guild-metric-menu button {
  width: 100%;
  display: block;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #dce7f5;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  white-space: normal;
  line-height: 1.25;
  cursor: pointer;
  padding: 7px 8px;
}

.account-guild-metric-menu button:hover:not(:disabled) {
  background: rgba(142, 197, 232, 0.16);
  color: #fff;
}

.account-guild-metric-menu button:disabled {
  cursor: default;
  color: rgba(220, 231, 245, 0.48);
}

.account-guild-report-action {
  min-width: 96px;
}

.account-guild-report-go {
  min-width: 54px;
  justify-content: center;
}

.account-overview-emblem {
  width: 68px;
  height: 68px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  display: grid;
  place-items: center;
}

.account-overview-emblem img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.account-overview-title {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.account-overview-title > span,
.account-quick-card span,
.account-score-category span,
.account-resource b,
.account-panel-heading span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.account-overview-title h3 {
  margin: 0;
  color: var(--text);
  font-size: 28px;
  line-height: 1.05;
}

.account-overview-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.account-overview-pills b {
  min-height: 26px;
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: #dce3ee;
  font-size: 12px;
  font-weight: 800;
}

.account-overview-resources {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.account-overview-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 390px);
  gap: 12px;
  align-items: start;
}

.account-overview-main,
.account-overview-side {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.account-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.account-quick-card,
.account-score-detail-panel,
.account-summon-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #1c1f23;
}

.account-quick-card {
  min-height: 92px;
  padding: 12px;
  display: grid;
  align-content: center;
  gap: 5px;
  position: relative;
  overflow: hidden;
}

.account-quick-card[data-tooltip] {
  cursor: help;
  overflow: visible;
}

.account-quick-card[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  width: min(640px, calc(100vw - 48px));
  max-height: 420px;
  padding: 12px;
  border: 1px solid rgba(142, 197, 232, 0.26);
  border-radius: 8px;
  background: #11151b;
  color: #dce3ee;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.36);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
  opacity: 0;
  overflow: auto;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.14s ease, transform 0.14s ease;
  white-space: pre-line;
}

.account-quick-card[data-tooltip]:hover::after,
.account-quick-card[data-tooltip]:focus-within::after {
  opacity: 1;
  transform: translateY(0);
}

.account-quick-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: #8ec5e8;
}

.account-quick-card--artifacts::before { background: #d6a55d; }
.account-quick-card--relics::before { background: #b58df0; }
.account-quick-card--monsters::before { background: #75d589; }
.account-quick-card--speed::before { background: #f07373; }

.account-quick-card strong {
  color: var(--text);
  font-size: 30px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.account-quick-card em {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-score-detail-panel,
.account-summon-panel {
  padding: 12px;
  display: grid;
  gap: 12px;
}

.account-panel-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.account-panel-heading h3 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
}

.account-score-categories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.account-score-method-note {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.account-score-category {
  min-height: 142px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.035);
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  gap: 7px;
}

.account-score-category > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.account-score-category strong {
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.account-score-category p {
  margin: 0;
  color: #c4cbd6;
  font-size: 12px;
  line-height: 1.35;
}

.account-score-category small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.account-score-category em {
  color: #d7dde8;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.account-score-category i {
  height: 5px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, #8ec5e8 var(--score-pct), rgba(255, 255, 255, 0.08) 0);
}

.account-resource {
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-areas: "icon label" "icon value";
  align-items: center;
  column-gap: 8px;
}

.account-resource img {
  grid-area: icon;
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.account-resource b {
  grid-area: label;
}

.account-resource strong {
  grid-area: value;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.account-summon-list {
  display: grid;
  gap: 7px;
}

.account-summon-row {
  min-width: 0;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.035);
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) max-content;
  align-items: center;
  gap: 8px;
}

.account-summon-row.is-rare {
  border-color: rgba(240, 184, 75, 0.34);
  background: rgba(240, 184, 75, 0.06);
}

.account-summon-row.is-new {
  border-color: rgba(57, 255, 20, 0.34);
  background: rgba(57, 255, 20, 0.08);
}

.account-comparison-new-monsters {
  border-color: rgba(57, 255, 20, 0.24);
}

.account-summon-icon {
  width: 44px;
  height: 44px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.18);
  position: relative;
  display: grid;
  place-items: center;
}

.account-summon-icon > img {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
}

.account-summon-icon i {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #15181d;
  display: grid;
  place-items: center;
}

.account-summon-icon i img {
  width: 15px;
  height: 15px;
  object-fit: contain;
}

.account-summon-text {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.account-summon-text strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-summon-text em {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-summon-row > b {
  padding: 4px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.075);
  color: #f0d18a;
  font-size: 11px;
  font-weight: 900;
}

.account-artifact-grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.account-artifact-score-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 180px));
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
}

.account-artifact-analysis-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 14px 0;
}

.account-artifact-analysis-card {
  margin: 0;
}

.account-artifact-analysis-table-wrap {
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.account-artifact-analysis-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 9px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.account-artifact-analysis-chips span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 25px;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.account-artifact-analysis-chips b {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.05em;
}

.account-artifact-analysis-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 12px;
  text-align: center;
}

.account-artifact-analysis-table th,
.account-artifact-analysis-table td {
  padding: 8px 9px;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.account-artifact-analysis-table th:last-child,
.account-artifact-analysis-table td:last-child {
  border-right: 0;
}

.account-artifact-analysis-table thead th {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.045);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.account-artifact-analysis-table tbody th {
  color: var(--text);
  text-align: left;
  background: rgba(255, 255, 255, 0.025);
}

.account-artifact-analysis-table tbody tr.is-base th,
.account-artifact-analysis-table tbody tr.is-base td {
  color: var(--muted);
  background: rgba(239, 119, 119, 0.045);
}

.account-artifact-analysis-table tbody tr:hover th,
.account-artifact-analysis-table tbody tr:hover td {
  background: rgba(142, 197, 232, 0.08);
}

.account-artifact-analysis-table .is-good {
  color: var(--green);
  background: var(--green-bg);
  font-weight: 800;
}

.account-artifact-analysis-table .is-bad {
  color: var(--red);
  background: var(--red-bg);
}

.account-artifact-analysis-table .account-comparison-delta {
  margin-left: 4px;
}

.account-artifact-score-card {
  --score: 0deg;
  min-height: 92px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(43, 51, 64, 0.96), rgba(25, 29, 36, 0.96));
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 3px;
  text-align: center;
}

.account-artifact-score-card::before {
  content: "";
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--panel) 49%, transparent 51%),
    conic-gradient(#75d589 var(--score), rgba(255, 255, 255, 0.12) 0);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.account-artifact-score-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.account-artifact-score-card strong {
  color: var(--text);
  font-size: 28px;
  line-height: 1;
}

.account-artifact-score-card small {
  margin-left: 2px;
  color: var(--muted);
  font-size: 16px;
}

.account-artifact-score-card em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.account-artifact-report-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-bottom: 18px;
}

.account-artifact-side {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.account-artifact-side h3 {
  margin: 0 0 -2px;
  padding: 0 2px;
  color: #dbeafe;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.2;
}

.account-artifact-guild-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(15, 18, 22, 0.72);
  font-size: 10.5px;
  font-weight: 600;
}

.account-artifact-guild-table th,
.account-artifact-guild-table td {
  padding: 4px 5px;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  line-height: 1.1;
}

.account-artifact-guild-table thead th {
  position: static;
}

.account-artifact-guild-table tr:last-child th,
.account-artifact-guild-table tr:last-child td {
  border-bottom: 0;
}

.account-artifact-guild-table th:last-child,
.account-artifact-guild-table td:last-child {
  border-right: 0;
}

.account-artifact-rule-head {
  width: 34%;
  background: rgba(142, 197, 232, 0.26);
  color: #dbeafe;
  font-size: 11px;
  font-weight: 850;
}

.account-artifact-rule-head span,
.account-artifact-rule-head b {
  display: inline-block;
  vertical-align: middle;
}

.account-artifact-rule-head b {
  float: right;
  color: #e5f0ff;
  font-size: 10px;
  font-weight: 850;
}

.account-artifact-guild-table tbody th {
  overflow: hidden;
  background: rgba(255, 255, 255, 0.025);
  color: #c6ccd6;
  font-weight: 650;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-artifact-family {
  background: rgba(255, 255, 255, 0.075);
  color: #d7dde8;
  font-size: 10px;
  font-weight: 780;
  text-align: center;
}

.account-artifact-family img {
  width: 17px;
  height: 17px;
  object-fit: contain;
  vertical-align: middle;
}

.account-artifact-family--water,
.account-artifact-family--fire,
.account-artifact-family--wind,
.account-artifact-family--light,
.account-artifact-family--dark,
.account-artifact-family--intangible,
.account-artifact-family--attack,
.account-artifact-family--defense,
.account-artifact-family--hp,
.account-artifact-family--support {
  background: rgba(255, 255, 255, 0.07);
}

.account-artifact-subhead {
  background: rgba(255, 255, 255, 0.11);
  color: var(--muted);
  font-size: 8.5px;
  font-weight: 800;
  text-align: center;
}

.account-artifact-required {
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-weight: 750;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.account-artifact-cell {
  color: var(--text);
  font-weight: 850;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.account-artifact-cell span,
.account-artifact-cell b {
  display: inline-block;
  min-width: 1.2em;
}

.account-artifact-cell .account-comparison-delta,
.account-artifact-rule-head .account-comparison-delta,
.account-set-tooltip .account-comparison-delta,
.account-quality-tooltip .account-comparison-delta,
.account-set-eff-stack-wrap .account-comparison-delta,
.account-set-circle .account-comparison-delta,
.account-set-card .account-comparison-delta {
  min-width: 0;
  display: inline-flex;
}

.account-artifact-guild-table .account-comparison-delta {
  margin-left: 2px;
  padding: 0 0 1px;
  border-radius: 0;
  background: transparent !important;
  font-size: 8px;
  line-height: 1;
  top: 0;
  text-shadow: 0 0 6px currentColor;
}

.account-artifact-cell span {
  color: var(--muted);
  font-weight: 600;
}

.account-artifact-cell b {
  color: var(--text);
  font-weight: 850;
}

.account-artifact-guild-table tbody tr:nth-child(odd) th,
.account-artifact-guild-table tbody tr:nth-child(odd) td {
  background-color: rgba(255, 255, 255, 0.025);
}

.account-artifact-guild-table tbody tr:hover th,
.account-artifact-guild-table tbody tr:hover td {
  background-color: rgba(142, 197, 232, 0.08);
}

.account-artifact-cell--good {
  background: rgba(74, 222, 128, 0.13);
  color: #9ff0b9;
  box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.2);
}

.account-artifact-cell--partial {
  background: rgba(212, 176, 120, 0.16);
  background: color-mix(in srgb, var(--artifact-ratio-color, #d4b078) 24%, transparent);
  color: #f8d486;
  box-shadow: inset 0 0 0 1px rgba(212, 176, 120, 0.24);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--artifact-ratio-color, #d4b078) 42%, transparent);
}

.account-artifact-cell--warn {
  background: rgba(232, 216, 107, 0.14);
  color: #f5e58a;
  box-shadow: inset 0 0 0 1px rgba(232, 216, 107, 0.22);
}

.account-artifact-cell--bad {
  background: rgba(238, 129, 121, 0.14);
  color: #ffafa8;
  box-shadow: inset 0 0 0 1px rgba(238, 129, 121, 0.24);
}

.account-artifact-cell--intangible {
  background: rgba(248, 249, 250, 0.12);
  color: #f8fafc;
  box-shadow: inset 0 0 0 1px rgba(248, 249, 250, 0.22);
}
.account-artifact-cell--neutral {
  background: rgba(255, 255, 255, 0.04);
  color: #c9d0dc;
}
.account-artifact-cell--empty {
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-weight: 800;
}

.account-artifact-top-section {
  margin-top: 18px;
  display: grid;
  gap: 12px;
}

.account-artifact-top-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  border-bottom: 1px solid rgba(112, 150, 255, 0.42);
}

.account-artifact-top-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  background: rgba(255, 255, 255, 0.035);
  color: #8fb2ff;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.account-artifact-top-tab:hover,
.account-artifact-top-tab.is-active {
  background: rgba(255, 255, 255, 0.085);
  color: var(--text);
  border-color: rgba(112, 150, 255, 0.7);
}

.account-artifact-top-tab img,
.account-artifact-family-chip img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.account-artifact-family-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
}

.account-artifact-top-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
}

.account-artifact-top-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.account-artifact-top-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(15, 18, 22, 0.72);
}

.account-artifact-top-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 10.5px;
}

.account-artifact-top-table th,
.account-artifact-top-table td {
  padding: 4px 5px;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  text-align: center;
  line-height: 1.1;
}

.account-artifact-top-table th:last-child,
.account-artifact-top-table td:last-child {
  border-right: 0;
}

.account-artifact-top-table thead tr:first-child th {
  background: rgba(142, 197, 232, 0.26);
  color: #dbeafe;
  font-size: 11px;
  font-weight: 850;
}

.account-artifact-top-table thead tr:nth-child(2) th {
  background: rgba(255, 255, 255, 0.075);
  color: #d7dde8;
  font-size: 10px;
  font-weight: 780;
}

.account-artifact-top-table thead th img {
  width: 15px;
  height: 15px;
  margin-right: 4px;
  object-fit: contain;
  vertical-align: -3px;
}

.account-artifact-top-table tbody tr:nth-child(odd) td {
  background: rgba(255, 255, 255, 0.025);
}

.account-artifact-top-table tbody tr:hover td {
  background: rgba(142, 197, 232, 0.08);
}

.account-artifact-top-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
}

.account-artifact-top-value:hover {
  color: #8ec5e8;
}

.account-artifact-top-value.is-quad-proc {
  color: #fef08a;
  text-shadow: 0 0 8px rgba(250, 204, 21, 0.62), 0 0 2px rgba(255, 255, 255, 0.35);
}

.account-artifact-top-value.is-intangible {
  color: #f8fafc;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.22);
}

.account-artifact-top-value.is-comparison-new {
  color: #39ff14;
  text-shadow: 0 0 9px rgba(57, 255, 20, 0.45);
}

.account-artifact-main-img {
  width: 13px;
  height: 13px;
  object-fit: contain;
  flex: 0 0 auto;
}

.account-artifact-top-empty {
  color: var(--muted-2);
  font-weight: 700;
}

.account-artifact-top-modal {
  width: min(615px, calc(100vw - 18px));
  max-width: min(615px, calc(100vw - 18px));
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.account-artifact-game-card {
  position: relative;
  width: 615px;
  min-width: 615px;
  height: 400px;
  box-sizing: border-box;
  padding: 0;
  border: 2px solid #8c6a00;
  border-radius: 10px;
  background:
    radial-gradient(circle at 26% 16%, rgba(112, 65, 19, 0.32), transparent 42%),
    linear-gradient(180deg, rgba(43, 20, 8, 0.98), rgba(25, 13, 7, 0.98));
  box-shadow: inset 0 0 0 1px rgba(255, 214, 90, 0.18), 0 24px 70px rgba(0, 0, 0, 0.55);
  color: #f7e7a3;
}

.account-artifact-game-close {
  position: absolute;
  top: 17px;
  right: 18px;
  z-index: 4;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #d79b43;
  display: grid;
  place-items: center;
  font-size: 36px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 2px 0 #4f2b0d, 0 0 5px rgba(255, 193, 76, 0.35);
  cursor: pointer;
}

.account-artifact-game-close:hover {
  color: #ffd275;
  transform: scale(1.04);
}

.account-artifact-game-title {
  position: absolute;
  left: 140px;
  top: 28px;
  width: 270px;
  min-height: 34px;
  padding: 0;
  color: #f5a64e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 650;
  line-height: 1.05;
  text-align: center;
  text-shadow: 0 3px 0 #5b3800, 0 0 6px rgba(255, 196, 56, 0.42);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-artifact-game-body {
  display: block;
  margin: 0;
}

.account-artifact-game-left {
  position: absolute;
  left: 25px;
  top: 76px;
  width: 100px;
}

.account-artifact-game-icon {
  position: relative;
  width: 98px;
  height: 98px;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.55));
}

.account-artifact-game-frame,
.account-artifact-game-center {
  position: absolute;
  display: block;
  object-fit: contain;
}

.account-artifact-game-frame {
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.account-artifact-game-center {
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  max-width: 20px;
  max-height: 20px;
  z-index: 2;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.65));
}

.account-artifact-game-monster {
  position: absolute;
  left: 3px;
  bottom: 3px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 229, 137, 0.86);
  border-radius: 5px;
  background: #101010;
  object-fit: cover;
  z-index: 5;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.55);
}

.account-artifact-game-main {
  display: block;
}

.account-artifact-game-main > strong {
  position: absolute;
  left: 150px;
  top: 92px;
  width: 245px;
  color: #fff4bb;
  font-size: 29px;
  line-height: 1;
  font-weight: 500;
  text-shadow: 0 2px 1px #3b2605, 0 0 4px rgba(255, 245, 180, 0.28);
  white-space: nowrap;
}

.account-artifact-game-subs {
  position: absolute;
  left: 25px;
  top: 190px;
  width: 390px;
  display: grid;
  gap: 7px;
}

.account-artifact-game-sub {
  min-width: 0;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  color: #f3df9a;
  font-size: 18px;
  line-height: 1.28;
  text-shadow: 0 2px 1px #2a1707;
}

.account-artifact-game-proc {
  width: 25px;
  height: 25px;
  border: 1px solid rgba(139, 92, 246, .58);
  border-radius: 6px;
  background: linear-gradient(145deg, rgba(63, 39, 111, .96), rgba(25, 12, 54, .98));
  color: #d8cdf5;
  display: inline-grid;
  place-items: center;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 4px rgba(0, 0, 0, .42);
}

.account-artifact-game-proc.has-proc {
  border-color: #20c5f2;
  background: linear-gradient(145deg, rgba(27, 102, 145, .94), rgba(50, 31, 108, .98));
  color: #e5fbff;
  box-shadow: inset 0 1px 0 rgba(220,251,255,.22), 0 0 7px rgba(32,197,242,.2), 0 2px 4px rgba(0,0,0,.42);
}

.account-artifact-game-sub-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-bottom: 1px;
}

.account-artifact-game-sub-text b {
  color: #f6f5f5;
  font-weight: 650;
}

.account-artifact-game-side {
  position: absolute;
  top: 80px;
  right: 18px;
  width: 164px;
  display: grid;
  gap: 10px;
  justify-items: stretch;
  padding-top: 0;
}

.account-artifact-game-quality,
.account-artifact-game-score {
  height: 33px;
  box-sizing: border-box;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 21px;
  font-weight: 750;
  line-height: 21px;
}

.account-artifact-game-quality--legend {
  background: #763012;
  color: #ffc975;
}

.account-artifact-game-quality--hero {
  background: #5f2244;
  color: #fed8ec;
}

.account-artifact-game-quality--rare {
  background: #1d414f;
  color: #adf4ff;
}

.account-artifact-game-score {
  background: #3b2717;
  color: #b88848;
}

.account-artifact-game-score img {
  width: 21px;
  height: 21px;
  object-fit: contain;
  flex: 0 0 21px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
}

.account-artifact-top-detail {
  display: grid;
  gap: 12px;
}

.account-artifact-top-detail-main {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.account-artifact-top-detail-main .account-artifact-main-img {
  width: 24px;
  height: 24px;
}

.account-artifact-top-detail-main span {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
}

.account-artifact-top-detail-subs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.account-artifact-top-detail-subs span {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--muted);
  font-size: 11px;
}

.account-artifact-top-detail-subs b {
  color: var(--text);
}

.account-relic-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.account-relic-kpis span {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.account-relic-kpis b {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.account-relic-kpis strong {
  flex: 0 0 auto;
  color: var(--text);
  font-size: 19px;
  line-height: 1;
}

.account-relic-filters {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.018);
  display: grid;
  gap: 8px;
}

.account-relic-filter-row {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.account-relic-filter-row > span {
  min-width: 74px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.account-relic-filter-buttons {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.account-relic-filter,
.account-relic-reset {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.account-relic-filter:hover,
.account-relic-reset:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

.account-relic-filter.is-active,
.account-relic-filter[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--relic-filter-color, var(--blue)) 72%, var(--line));
  background: color-mix(in srgb, var(--relic-filter-color, var(--blue)) 16%, transparent);
  color: color-mix(in srgb, var(--relic-filter-color, var(--blue)) 72%, #fff);
}

.account-relic-reset {
  margin-left: auto;
}

.account-relic-reset:disabled {
  opacity: 0.42;
  cursor: default;
}

.account-relic-filter-row em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.account-relic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.account-relic-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--relic-color) 34%, var(--line));
  border-left: 5px solid var(--relic-color);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--relic-color) 12%, transparent), transparent 52%),
    var(--panel);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
  display: grid;
  gap: 10px;
}

.account-relic-card-head {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.account-relic-image {
  width: 56px;
  height: 64px;
  border: 1px solid color-mix(in srgb, var(--relic-color) 35%, var(--line));
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  display: grid;
  place-items: center;
}

.account-relic-image img {
  width: 52px;
  height: 60px;
  object-fit: contain;
}

.account-relic-title {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.account-relic-title strong {
  min-width: 0;
  overflow: hidden;
  color: color-mix(in srgb, var(--relic-color) 72%, #fff);
  font-size: 14px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-relic-title b {
  flex: 0 0 auto;
  color: var(--gold);
}

.account-relic-card.is-comparison-new {
  border-color: rgba(57, 255, 20, 0.28);
  box-shadow: 0 0 0 1px rgba(57, 255, 20, 0.08), 0 14px 32px rgba(0, 0, 0, 0.18);
}

.account-relic-card.is-comparison-up {
  border-color: rgba(142, 197, 232, 0.34);
}

.account-relic-compare-badge {
  flex: 0 0 auto;
  padding: 1px 5px;
  border-radius: 999px;
  font-size: 9px;
  line-height: 1.25;
  font-weight: 950;
}

.account-relic-compare-badge.is-new {
  color: #202510;
  background: #39ff14;
}

.account-relic-compare-badge.is-up {
  color: #dff3ff;
  background: rgba(142, 197, 232, 0.22);
  border: 1px solid rgba(142, 197, 232, 0.34);
}

.account-relic-grade {
  width: fit-content;
  margin-top: 4px;
  padding: 2px 6px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--relic-grade-color) 18%, transparent);
  color: var(--relic-grade-color);
  display: inline-flex;
  font-size: 10px;
  font-weight: 900;
}

.account-relic-card p {
  margin: 7px 0 0;
  color: #a0c4ff;
  font-size: 15px;
  font-weight: 900;
}

.account-relic-card p em {
  margin-left: 6px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.account-relic-durability {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
}

.account-relic-durability div {
  display: inline-flex;
  gap: 3px;
}

.account-relic-durability i {
  width: 12px;
  height: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 3px;
  background: transparent;
}

.account-relic-durability i.is-filled {
  border-color: rgba(129, 201, 149, 0.85);
  background: rgba(129, 201, 149, 0.26);
}

.account-relic-durability b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.account-relic-secondary {
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--relic-color) 24%, var(--line));
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.025);
  display: grid;
  gap: 3px;
}

.account-relic-secondary span {
  color: var(--muted);
  font-size: 11px;
}

.account-relic-secondary strong {
  color: color-mix(in srgb, var(--relic-color) 76%, #fff);
  font-size: 12px;
  line-height: 1.3;
}

.account-relic-location {
  min-height: 26px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
}

.account-relic-location img {
  width: 22px;
  height: 22px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #171a1d;
  object-fit: contain;
}

.account-relic-location span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-relic-empty {
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  text-align: center;
}

.account-monster-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 7px;
}

.account-monster-icon {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #171a1d;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.account-monster-empty-search {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.account-monster-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.account-monster-icon img[data-src] {
  opacity: 0;
}

.account-monster-split-image {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
}

.account-monster-split-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-monster-split-image .account-monster-split-classic {
  clip-path: polygon(0 0, 58% 0, 43% 100%, 0 100%);
}

.account-monster-split-image .account-monster-split-collab {
  clip-path: polygon(58% 0, 100% 0, 100% 100%, 43% 100%);
}

.account-monster-split-image::after {
  content: "";
  position: absolute;
  left: 49%;
  top: -9%;
  width: 2px;
  height: 118%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.65);
  transform: rotate(8deg);
  pointer-events: none;
}

.account-monster-icon b {
  position: absolute;
  right: 2px;
  bottom: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
}

.account-monster-missing-modal {
  width: min(980px, 96vw);
}

.account-monster-missing-modal .modal-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.account-monster-missing-body {
  display: grid;
  gap: 16px;
}

.account-monster-missing-section {
  display: grid;
  gap: 9px;
}

.account-monster-missing-section h3 {
  margin: 0;
  color: var(--text);
  font-size: 14px;
}

.account-monster-missing-grid {
  grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
}

.account-monster-icon--missing {
  border-color: rgba(255, 255, 255, 0.13);
}

.account-best-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.account-best-tags span {
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #1b1e22;
  color: var(--muted);
}

.account-best-tags b {
  margin-right: 6px;
  color: var(--text);
}

.account-farm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.account-farm-card {
  padding: 12px;
  display: grid;
  gap: 6px;
  background: #202328;
}

.account-farm-card span {
  color: var(--muted);
  line-height: 1.4;
}

.account-distribution-panel {
  padding: 18px 20px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #1c1f23;
  display: grid;
  gap: 10px;
}

.account-distribution-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: #d8dde8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.account-distribution-head strong {
  font-size: 16px;
}

.account-distribution-total {
  justify-self: end;
  color: #7786a4;
  font-size: 15px;
}

.account-distribution-panel .account-distribution {
  grid-template-columns: repeat(8, minmax(86px, 1fr));
  gap: 12px;
  min-height: 220px;
  align-items: stretch;
}

.account-distribution-panel .account-distribution > div {
  min-height: 210px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  grid-template-rows: minmax(160px, 1fr) auto auto;
  justify-items: center;
  gap: 8px;
}

.account-distribution-bar {
  position: relative;
  width: 100%;
  height: 160px;
}

.account-distribution-bar strong {
  position: absolute;
  left: 50%;
  bottom: calc(var(--h) + 8px);
  transform: translateX(-50%);
  color: #7786a4;
  font-size: 15px;
}

.account-distribution-bar i {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--h);
  min-height: 8px;
  border-radius: 7px 7px 2px 2px;
  background: var(--bar);
}

.account-distribution-panel .account-distribution span {
  color: #78869f;
  font-size: 14px;
  white-space: nowrap;
}

.account-distribution-panel .account-distribution em {
  color: var(--muted-2);
  font-size: 11px;
}

.account-set-eff-distribution-panel {
  padding: 16px 18px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #1c1f23;
  display: grid;
  gap: 6px;
}

.account-rune-distribution-shell {
  display: grid;
  gap: 10px;
}

.account-rune-distribution-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.account-rune-distribution-toolbar label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.account-rune-distribution-toolbar select {
  width: min(100%, 320px);
  height: 36px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #202328;
  color: var(--text);
  font: inherit;
  font-weight: 700;
}

.account-rune-distribution-chart {
  min-height: 358px;
}

.account-rune-chart-title {
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
  text-align: center;
}

.account-rune-donut-wrap,
.account-rune-polar-wrap {
  display: grid;
  place-items: center;
  min-height: 260px;
}

.account-rune-donut,
.account-rune-polar {
  width: min(100%, 340px);
  height: auto;
  overflow: visible;
}

.account-rune-donut path,
.account-rune-polar path {
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 2;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.3));
}

.account-rune-donut-hole,
.account-rune-polar-core {
  fill: #1c1f23;
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 2;
}

.account-rune-donut-total {
  fill: var(--text);
  font-size: 24px;
  font-weight: 900;
  text-anchor: middle;
}

.account-rune-donut-caption {
  fill: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-anchor: middle;
  text-transform: uppercase;
}

.account-rune-polar-grid {
  fill: none;
  stroke: rgba(255, 255, 255, 0.055);
  stroke-width: 1;
}

.account-rune-chart-legend b {
  color: var(--text);
  font-weight: 800;
}

.account-quality-chart {
  min-height: 292px;
}

.account-quality-yaxis {
  height: 254px;
}

.account-quality-plot {
  height: 276px;
}

.account-quality-plot .account-set-eff-gridline {
  bottom: calc(22px + var(--y-px));
}

.account-quality-bars {
  grid-template-columns: repeat(23, minmax(0, 1fr));
  gap: clamp(3px, 0.62vw, 9px);
}

.account-quality-stack-wrap {
  grid-template-rows: 254px 22px;
}

.account-quality-stack {
  width: clamp(18px, 76%, 36px);
  height: 254px;
}

.account-quality-set-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
  pointer-events: none;
}

.account-quality-stack-wrap:hover .account-quality-tooltip,
.account-quality-stack-wrap:focus-within .account-quality-tooltip {
  opacity: 1;
  transform: translate(0, 0);
}

.account-quality-tooltip {
  left: calc(100% + 10px);
  top: 34px;
  bottom: auto;
  display: grid;
  gap: 5px;
  width: 170px;
  transform: translate(-4px, 0);
}

.account-quality-stack-wrap.is-tooltip-left .account-quality-tooltip {
  left: auto;
  right: calc(100% + 10px);
  transform: translate(4px, 0);
}

.account-quality-tooltip span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.account-quality-tooltip i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--dot);
}

.account-set-eff-chart {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  min-height: 258px;
}

.account-set-eff-yaxis {
  position: relative;
  height: 224px;
  margin-top: 4px;
  color: #7786a4;
  font-size: 12px;
}

.account-set-eff-yaxis span {
  position: absolute;
  right: 8px;
  bottom: var(--y-px);
  transform: translateY(50%);
}

.account-set-eff-plot {
  position: relative;
  min-width: 0;
  height: 242px;
  overflow: visible;
  padding: 4px 0 0;
}

.account-set-eff-gridline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(18px + var(--y-px));
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.account-set-eff-bars {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(23, minmax(0, 1fr));
  align-items: end;
  gap: clamp(3px, 0.55vw, 8px);
  min-width: 0;
  width: 100%;
}

.account-set-eff-stack-wrap {
  position: relative;
  display: grid;
  grid-template-rows: 224px 18px;
  justify-items: center;
  gap: 2px;
  min-width: 0;
  outline: none;
}

.account-set-eff-stack {
  align-self: end;
  width: clamp(16px, 72%, 32px);
  height: 224px;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  border-radius: 7px 7px 2px 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.035);
}

.account-set-eff-stack span {
  display: block;
  flex: 0 0 var(--h);
  min-height: 0;
  background: var(--bar);
}

.account-set-eff-icon {
  position: absolute;
  top: 228px;
  left: 50%;
  width: 22px;
  height: 22px;
  object-fit: contain;
  transform: translateX(-50%);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
  pointer-events: none;
}

.account-set-eff-stack-wrap:hover .account-set-tooltip,
.account-set-eff-stack-wrap:focus-within .account-set-tooltip {
  opacity: 1;
  transform: translate(0, 0);
}

.account-set-eff-stack-wrap .account-set-tooltip {
  left: calc(100% + 10px);
  top: 28px;
  bottom: auto;
  transform: translate(-4px, 0);
}

.account-set-eff-stack-wrap.is-tooltip-left .account-set-tooltip {
  left: auto;
  right: calc(100% + 10px);
  transform: translate(4px, 0);
}

.account-set-eff-legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  color: var(--muted);
  font-size: 12px;
  margin-top: 0;
}

.account-set-eff-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.account-set-eff-legend i {
  width: 22px;
  height: 10px;
  border-radius: 3px;
  background: var(--dot);
}

.account-set-circle {
  --set-color: var(--blue);
}

.account-set-circle-value {
  stroke: var(--eff-color);
}

.account-set-circle span,
.account-set-head strong {
  color: var(--set-color);
}

.account-set-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 12;
  width: 230px;
  padding: 12px;
  border: 1px solid #2c3240;
  border-radius: 8px;
  background: rgba(8, 10, 13, 0.98);
  color: #f1f4fa;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition: opacity 120ms ease, transform 120ms ease;
}

.account-set-circle:hover .account-set-tooltip,
.account-set-circle:focus-within .account-set-tooltip {
  opacity: 1;
  transform: translate(-50%, 0);
}

.account-set-circle-grid .account-set-circle:nth-child(12n+1) .account-set-tooltip {
  left: 0;
  transform: translate(0, 6px);
}

.account-set-circle-grid .account-set-circle:nth-child(12n) .account-set-tooltip {
  left: auto;
  right: 0;
  transform: translate(0, 6px);
}

.account-set-circle-grid .account-set-circle:nth-child(12n+1):hover .account-set-tooltip,
.account-set-circle-grid .account-set-circle:nth-child(12n+1):focus-within .account-set-tooltip,
.account-set-circle-grid .account-set-circle:nth-child(12n):hover .account-set-tooltip,
.account-set-circle-grid .account-set-circle:nth-child(12n):focus-within .account-set-tooltip {
  transform: translate(0, 0);
}

.account-set-tooltip header,
.account-set-tooltip div {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.account-set-tooltip header {
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 8px;
}

.account-set-tooltip header strong {
  color: #fff;
  font-size: 18px;
}

.account-set-tooltip header span {
  color: #a6acb8;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
}

.account-set-tooltip div {
  margin-top: 5px;
}

.account-set-tooltip i {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--dot);
}

.account-set-tooltip div span {
  color: #f1f4fa;
  font-size: 14px;
  text-align: left;
}

.account-set-tooltip b {
  font-size: 14px;
  display: inline-flex;
  align-items: center;
}

.account-set-grid {
  grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
  gap: 14px;
}

.account-speed-slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(620px, 1fr));
  gap: 14px;
}

.account-speed-slot-help {
  margin: -6px 0 12px;
  color: var(--muted);
  font-size: 12px;
}

.account-set-card {
  padding: 0;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--set-color) 34%, var(--line));
  background:
    linear-gradient(135deg, var(--set-soft), transparent 48%),
    #151920;
}

.account-set-head {
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.account-set-head strong {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
}

.account-set-head img {
  width: 25px;
  height: 25px;
  object-fit: contain;
}

.account-speed-slot-overview .account-set-overview-head {
  margin-bottom: 2px;
}

.account-speed-slot-circle strong {
  font-size: 14px;
}

.account-speed-slot-circle em {
  color: var(--muted-2);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
}

.account-speed-slot-card {
  min-width: 0;
}

.account-speed-slot-table-wrap {
  padding: 12px 14px 14px;
  overflow-x: auto;
}

.account-speed-slot-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
}

.account-speed-slot-table th,
.account-speed-slot-table td {
  height: 32px;
  padding: 6px 7px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  text-align: center;
  white-space: nowrap;
}

.account-speed-slot-table thead th {
  background: rgba(10, 13, 18, 0.72);
  color: color-mix(in srgb, var(--set-color) 72%, var(--text));
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.account-speed-slot-table thead th:nth-child(n + 3),
.account-speed-slot-table tbody td:nth-child(n + 3) {
  border-left-color: rgba(255, 255, 255, 0.16);
}

.account-speed-slot-table tbody th {
  width: 42px;
  background: rgba(10, 13, 18, 0.52);
  color: var(--muted);
  font-weight: 900;
}

.account-speed-slot-table td {
  background: rgba(18, 23, 31, 0.42);
}

.account-speed-slot-table tbody td:nth-child(even) {
  background: rgba(18, 23, 31, 0.58);
}

.account-speed-slot-table tbody td:nth-child(odd) {
  background: rgba(30, 37, 48, 0.5);
}

.account-speed-slot-table tbody tr:nth-child(odd) td:nth-child(even) {
  background: rgba(24, 30, 39, 0.46);
}

.account-speed-slot-table tbody tr:nth-child(odd) td:nth-child(odd) {
  background: rgba(36, 43, 55, 0.5);
}

.account-speed-slot-table tbody tr:hover td,
.account-speed-slot-table tbody tr:hover th {
  background: color-mix(in srgb, var(--set-color) 14%, rgba(10, 13, 18, 0.7));
}

.account-speed-slot-table tbody tr:hover td:nth-child(even),
.account-speed-slot-table tbody tr:hover td:nth-child(odd),
.account-speed-slot-table tbody tr:nth-child(odd):hover td:nth-child(even),
.account-speed-slot-table tbody tr:nth-child(odd):hover td:nth-child(odd) {
  background: color-mix(in srgb, var(--set-color) 14%, rgba(10, 13, 18, 0.7));
}

.account-speed-slot-table tbody td.account-speed-slot-cell.is-row-low,
.account-speed-slot-table tbody td.account-speed-slot-cell.is-row-low:nth-child(even),
.account-speed-slot-table tbody td.account-speed-slot-cell.is-row-low:nth-child(odd),
.account-speed-slot-table tbody tr:nth-child(odd) td.account-speed-slot-cell.is-row-low:nth-child(even),
.account-speed-slot-table tbody tr:nth-child(odd) td.account-speed-slot-cell.is-row-low:nth-child(odd) {
  background: rgba(127, 29, 29, 0.34);
}

.account-speed-slot-table tbody td.account-speed-slot-cell.is-row-high,
.account-speed-slot-table tbody td.account-speed-slot-cell.is-row-high:nth-child(even),
.account-speed-slot-table tbody td.account-speed-slot-cell.is-row-high:nth-child(odd),
.account-speed-slot-table tbody tr:nth-child(odd) td.account-speed-slot-cell.is-row-high:nth-child(even),
.account-speed-slot-table tbody tr:nth-child(odd) td.account-speed-slot-cell.is-row-high:nth-child(odd) {
  background: rgba(20, 83, 45, 0.36);
}

.account-speed-slot-table tbody tr:hover td.account-speed-slot-cell.is-row-low,
.account-speed-slot-table tbody tr:hover td.account-speed-slot-cell.is-row-low:nth-child(even),
.account-speed-slot-table tbody tr:hover td.account-speed-slot-cell.is-row-low:nth-child(odd),
.account-speed-slot-table tbody tr:nth-child(odd):hover td.account-speed-slot-cell.is-row-low:nth-child(even),
.account-speed-slot-table tbody tr:nth-child(odd):hover td.account-speed-slot-cell.is-row-low:nth-child(odd) {
  background: color-mix(in srgb, #ef4444 28%, rgba(10, 13, 18, 0.74));
}

.account-speed-slot-table tbody tr:hover td.account-speed-slot-cell.is-row-high,
.account-speed-slot-table tbody tr:hover td.account-speed-slot-cell.is-row-high:nth-child(even),
.account-speed-slot-table tbody tr:hover td.account-speed-slot-cell.is-row-high:nth-child(odd),
.account-speed-slot-table tbody tr:nth-child(odd):hover td.account-speed-slot-cell.is-row-high:nth-child(even),
.account-speed-slot-table tbody tr:nth-child(odd):hover td.account-speed-slot-cell.is-row-high:nth-child(odd) {
  background: color-mix(in srgb, #22c55e 28%, rgba(10, 13, 18, 0.74));
}

.account-speed-slot-value {
  color: #dbeafe;
  font-weight: 900;
}

.account-speed-slot-value em {
  color: #fca5a5;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.account-speed-slot-empty {
  color: var(--muted-2);
}

.account-rune-depth-title {
  align-items: center;
}

.account-rune-depth-title > div {
  display: grid;
  gap: 4px;
}

.account-rune-depth-settings {
  justify-self: end;
}

.ghost-button.is-readonly,
.account-rune-depth-settings.is-readonly {
  border-color: rgba(148, 163, 184, 0.34);
  color: var(--muted);
  background: rgba(148, 163, 184, 0.08);
}

.account-rune-depth-circle strong {
  font-size: 13px;
}

.account-rune-depth-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(620px, 1fr));
  gap: 14px;
}

.account-rune-depth-card-head span {
  color: var(--text);
  font-weight: 900;
}

.account-rune-depth-table-wrap {
  padding: 12px 14px 14px;
  overflow-x: auto;
}

.account-rune-depth-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
}

.account-rune-depth-table th,
.account-rune-depth-table td {
  height: 30px;
  padding: 5px 7px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  text-align: center;
  white-space: nowrap;
}

.account-rune-depth-table thead th {
  background: rgba(10, 13, 18, 0.72);
  color: color-mix(in srgb, var(--set-color) 72%, var(--text));
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.account-rune-depth-table thead tr:first-child th:nth-child(4) {
  background: color-mix(in srgb, #f0a33a 34%, rgba(10, 13, 18, 0.84));
  color: #ffd79a;
}

.account-rune-depth-card--baseline .account-rune-depth-table thead tr:first-child th:nth-child(4) {
  background: color-mix(in srgb, #a733b4 34%, rgba(10, 13, 18, 0.84));
  color: #f5c9ff;
}

.account-rune-depth-table tbody th {
  text-align: left;
  background: rgba(10, 13, 18, 0.52);
  color: var(--muted);
  font-weight: 800;
}

.account-rune-depth-table tbody td {
  background: rgba(18, 23, 31, 0.42);
  color: #dbeafe;
  font-weight: 800;
}

.account-rune-depth-table thead th:nth-child(n + 3),
.account-rune-depth-table tbody td:nth-child(n + 3),
.account-rune-depth-table tfoot td:nth-child(n + 3) {
  border-left-color: rgba(255, 255, 255, 0.16);
}

.account-rune-depth-table tbody td:nth-child(even) {
  background: rgba(18, 23, 31, 0.58);
}

.account-rune-depth-table tbody td:nth-child(odd) {
  background: rgba(30, 37, 48, 0.5);
}

.account-rune-depth-table tbody tr:nth-child(odd) td:nth-child(even) {
  background: rgba(24, 30, 39, 0.46);
}

.account-rune-depth-table tbody tr:nth-child(odd) td:nth-child(odd) {
  background: rgba(36, 43, 55, 0.5);
}

.account-rune-depth-table tbody tr:hover td,
.account-rune-depth-table tbody tr:hover th {
  background: color-mix(in srgb, var(--set-color) 14%, rgba(10, 13, 18, 0.7));
}

.account-rune-depth-table tbody tr:hover td:nth-child(even),
.account-rune-depth-table tbody tr:hover td:nth-child(odd),
.account-rune-depth-table tbody tr:nth-child(odd):hover td:nth-child(even),
.account-rune-depth-table tbody tr:nth-child(odd):hover td:nth-child(odd) {
  background: color-mix(in srgb, var(--set-color) 14%, rgba(10, 13, 18, 0.7));
}

.account-rune-depth-table tfoot th,
.account-rune-depth-table tfoot td {
  background: #111318;
  color: var(--text);
  font-weight: 900;
}

.account-rune-depth-table tbody td.is-depth-good,
.account-rune-depth-table tbody td.is-depth-good:nth-child(even),
.account-rune-depth-table tbody td.is-depth-good:nth-child(odd),
.account-rune-depth-table tbody tr:nth-child(odd) td.is-depth-good:nth-child(even),
.account-rune-depth-table tbody tr:nth-child(odd) td.is-depth-good:nth-child(odd),
.account-rune-depth-table tfoot td.is-depth-good {
  background: rgba(20, 83, 45, 0.42);
  color: #bbf7d0;
}

.account-rune-depth-table tbody td.is-depth-equal,
.account-rune-depth-table tbody td.is-depth-equal:nth-child(even),
.account-rune-depth-table tbody td.is-depth-equal:nth-child(odd),
.account-rune-depth-table tbody tr:nth-child(odd) td.is-depth-equal:nth-child(even),
.account-rune-depth-table tbody tr:nth-child(odd) td.is-depth-equal:nth-child(odd),
.account-rune-depth-table tfoot td.is-depth-equal {
  background: rgba(101, 163, 13, 0.38);
  color: #d9f99d;
}

.account-rune-depth-table tbody td.is-depth-mid,
.account-rune-depth-table tbody td.is-depth-mid:nth-child(even),
.account-rune-depth-table tbody td.is-depth-mid:nth-child(odd),
.account-rune-depth-table tbody tr:nth-child(odd) td.is-depth-mid:nth-child(even),
.account-rune-depth-table tbody tr:nth-child(odd) td.is-depth-mid:nth-child(odd),
.account-rune-depth-table tfoot td.is-depth-mid {
  background: rgba(202, 138, 4, 0.36);
  color: #fef08a;
}

.account-rune-depth-table tbody td.is-depth-low,
.account-rune-depth-table tbody td.is-depth-low:nth-child(even),
.account-rune-depth-table tbody td.is-depth-low:nth-child(odd),
.account-rune-depth-table tbody tr:nth-child(odd) td.is-depth-low:nth-child(even),
.account-rune-depth-table tbody tr:nth-child(odd) td.is-depth-low:nth-child(odd),
.account-rune-depth-table tfoot td.is-depth-low {
  background: rgba(194, 65, 12, 0.36);
  color: #fed7aa;
}

.account-rune-depth-table tbody td.is-depth-bad,
.account-rune-depth-table tbody td.is-depth-bad:nth-child(even),
.account-rune-depth-table tbody td.is-depth-bad:nth-child(odd),
.account-rune-depth-table tbody tr:nth-child(odd) td.is-depth-bad:nth-child(even),
.account-rune-depth-table tbody tr:nth-child(odd) td.is-depth-bad:nth-child(odd),
.account-rune-depth-table tfoot td.is-depth-bad {
  background: rgba(127, 29, 29, 0.42);
  color: #fecaca;
}

.account-rune-depth-table tbody tr:hover td.is-depth-good,
.account-rune-depth-table tfoot td.is-depth-good {
  background: color-mix(in srgb, #22c55e 26%, rgba(10, 13, 18, 0.74));
}

.account-rune-depth-table tbody tr:hover td.is-depth-equal,
.account-rune-depth-table tfoot td.is-depth-equal {
  background: color-mix(in srgb, #a3e635 25%, rgba(10, 13, 18, 0.74));
}

.account-rune-depth-table tbody tr:hover td.is-depth-mid,
.account-rune-depth-table tfoot td.is-depth-mid {
  background: color-mix(in srgb, #eab308 25%, rgba(10, 13, 18, 0.74));
}

.account-rune-depth-table tbody tr:hover td.is-depth-low,
.account-rune-depth-table tfoot td.is-depth-low {
  background: color-mix(in srgb, #f97316 25%, rgba(10, 13, 18, 0.74));
}

.account-rune-depth-table tbody tr:hover td.is-depth-bad,
.account-rune-depth-table tfoot td.is-depth-bad {
  background: color-mix(in srgb, #ef4444 27%, rgba(10, 13, 18, 0.74));
}

.account-rune-guild-settings-modal {
  width: min(1180px, calc(100vw - 28px));
  max-height: min(860px, calc(100vh - 32px));
}

.account-rune-guild-settings-body {
  display: grid;
  gap: 16px;
  overflow: auto;
}

.account-rune-guild-settings-group {
  display: grid;
  gap: 8px;
}

.account-rune-guild-settings-group h3 {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--text);
}

.account-rune-guild-settings-group h3 span {
  color: var(--muted);
  font-size: 12px;
}

.account-rune-guild-settings-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.account-rune-guild-settings-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.account-rune-guild-settings-table th,
.account-rune-guild-settings-table td {
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}

.account-rune-guild-settings-table thead th {
  background: #23262d;
  color: var(--text);
}

.account-rune-guild-settings-table tbody th {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #181b21;
  color: var(--text);
  text-align: left;
}

.account-rune-guild-settings-table tbody th img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.account-rune-guild-settings-table input {
  width: 58px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #11151c;
  color: var(--text);
  text-align: center;
  font-weight: 800;
}

.account-rune-guild-settings-table input:disabled {
  opacity: 0.7;
}

.account-set-main {
  padding: 12px 16px;
  display: grid;
  grid-template-columns: minmax(172px, 198px) minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
}

.account-set-metrics {
  min-width: 0;
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  text-transform: uppercase;
  color: #7786a4;
  font-size: 11px;
  font-weight: 800;
}

.account-set-metric-tile {
  min-height: 0;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--set-color) 26%, transparent);
  border-radius: 7px;
  background: rgba(10, 13, 18, 0.48);
  display: grid;
  align-content: center;
  gap: 6px;
}

.account-set-metric-tile span {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.account-set-metric-tile b {
  color: #38d66b;
  font-size: 14px;
  white-space: nowrap;
}

.account-set-metric-tile--depth {
  align-content: center;
  gap: 5px;
}

.account-set-eff-potential {
  margin-top: 3px;
  padding-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  gap: 3px;
}

.account-set-eff-potential-row {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.15;
  text-transform: none;
}

.account-set-eff-potential-row b {
  font-size: 12px;
}

.account-set-eff-potential-row--current b { color: var(--blue); }
.account-set-eff-potential-row--hero b { color: var(--purple); }
.account-set-eff-potential-row--legend b { color: var(--gold); }

.account-set-eff-potential-row--current { color: color-mix(in srgb, var(--blue) 52%, var(--muted)); }
.account-set-eff-potential-row--hero { color: color-mix(in srgb, var(--purple) 48%, var(--muted)); }
.account-set-eff-potential-row--legend { color: color-mix(in srgb, var(--gold) 50%, var(--muted)); }

.account-set-mini-graph {
  width: 100%;
  min-width: 0;
  height: auto;
  aspect-ratio: 360 / 178;
  border-color: color-mix(in srgb, var(--set-color) 36%, transparent);
  background: rgba(10, 13, 18, 0.46);
}

.account-set-mini-graph:hover {
  border-color: var(--set-color);
  background: rgba(10, 13, 18, 0.64);
}

.account-rank-area {
  fill: var(--graph-soft, rgba(142, 197, 232, 0.18));
}

.account-set-mini-graph .account-rank-graph.is-mini .account-rank-area {
  fill: var(--graph-soft, rgba(142, 197, 232, 0.22));
}

.account-rank-line {
  stroke: var(--graph-color, var(--blue));
}

.account-slot-strip {
  padding: 0 16px 12px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 980px) {
  .account-report-hero,
  .account-kpi-grid,
  .account-artifact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .account-report-hero {
    display: block;
  }

  .account-kpi-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .account-report-header-card {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .account-report-identity,
  .account-report-inline-kpis {
    flex: 1 1 100%;
  }

  .account-distribution {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .account-distribution-panel .account-distribution {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .account-set-circle-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .account-set-circle-grid .account-set-circle .account-set-tooltip {
    left: 50%;
    right: auto;
    transform: translate(-50%, 6px);
  }

  .account-set-circle-grid .account-set-circle:hover .account-set-tooltip,
  .account-set-circle-grid .account-set-circle:focus-within .account-set-tooltip {
    transform: translate(-50%, 0);
  }

  .account-set-circle-grid .account-set-circle:nth-child(6n+1) .account-set-tooltip {
    left: 0;
    transform: translate(0, 6px);
  }

  .account-set-circle-grid .account-set-circle:nth-child(6n) .account-set-tooltip {
    left: auto;
    right: 0;
    transform: translate(0, 6px);
  }

  .account-set-circle-grid .account-set-circle:nth-child(6n+1):hover .account-set-tooltip,
  .account-set-circle-grid .account-set-circle:nth-child(6n+1):focus-within .account-set-tooltip,
  .account-set-circle-grid .account-set-circle:nth-child(6n):hover .account-set-tooltip,
  .account-set-circle-grid .account-set-circle:nth-child(6n):focus-within .account-set-tooltip {
    transform: translate(0, 0);
  }

  .account-set-grid {
    grid-template-columns: 1fr;
  }

  .account-artifact-report-grid {
    grid-template-columns: 1fr;
  }

  .account-overview-profile,
  .account-overview-body {
    grid-template-columns: 1fr;
  }

  .account-overview-resources,
  .account-overview-side {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .account-artifact-score-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .account-speed-slot-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 620px) {
  .account-report-hero,
  .account-kpi-grid,
  .account-artifact-grid,
  .account-distribution,
  .account-monster-grid {
    grid-template-columns: 1fr;
  }

  .account-report-header-card {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .account-report-identity {
    width: 100%;
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .account-report-meta {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .account-report-inline-kpis {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .account-artifact-score-row {
    grid-template-columns: 1fr;
  }

  .account-overview-resources,
  .account-overview-side,
  .account-quick-grid,
  .account-score-categories {
    grid-template-columns: 1fr;
  }

  .account-artifact-guild-table {
    font-size: 9.5px;
  }

  .account-artifact-rule-head {
    width: 38%;
  }

  .account-distribution-panel .account-distribution {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .account-set-circle-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .account-set-circle-grid .account-set-circle .account-set-tooltip {
    left: 50%;
    right: auto;
    transform: translate(-50%, 6px);
  }

  .account-set-circle-grid .account-set-circle:hover .account-set-tooltip,
  .account-set-circle-grid .account-set-circle:focus-within .account-set-tooltip {
    transform: translate(-50%, 0);
  }

  .account-set-circle-grid .account-set-circle:nth-child(3n+1) .account-set-tooltip {
    left: 0;
    transform: translate(0, 6px);
  }

  .account-set-circle-grid .account-set-circle:nth-child(3n) .account-set-tooltip {
    left: auto;
    right: 0;
    transform: translate(0, 6px);
  }

  .account-set-circle-grid .account-set-circle:nth-child(3n+1):hover .account-set-tooltip,
  .account-set-circle-grid .account-set-circle:nth-child(3n+1):focus-within .account-set-tooltip,
  .account-set-circle-grid .account-set-circle:nth-child(3n):hover .account-set-tooltip,
  .account-set-circle-grid .account-set-circle:nth-child(3n):focus-within .account-set-tooltip {
    transform: translate(0, 0);
  }

  .account-set-main {
    grid-template-columns: 1fr;
  }

  .account-set-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }

  .account-report-score-card strong {
    font-size: 42px;
  }

  .account-set-grid {
    grid-template-columns: 1fr;
  }

  .account-slot-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
}

.artifact-shell {
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 0%, rgb(77 56 20 / 0.24), transparent 32rem),
    var(--bg);
}

.artifact-analysis {
  width: calc(100% - 12px);
  max-width: none;
  margin: 0 auto;
  padding: 26px 0 60px;
  font-size: 14px;
}

.artifact-hero,
.artifact-block {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgb(38 38 37 / 0.96), rgb(29 29 28 / 0.96));
  box-shadow: 0 18px 45px rgb(0 0 0 / 0.18);
}

.artifact-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 30px;
  margin-bottom: 18px;
  border-radius: 10px;
  border-left: 3px solid var(--gold);
}

.artifact-hero h2 {
  margin: 3px 0 6px;
  font-size: clamp(30px, 5vw, 58px);
  letter-spacing: 0.08em;
}

.artifact-hero p,
.artifact-block-head p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}

.eyebrow {
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.artifact-count {
  flex: none;
  padding: 11px 16px;
  border: 1px solid var(--gold-2);
  border-radius: 999px;
  color: var(--gold);
  background: rgb(154 101 8 / 0.12);
  font-weight: 800;
}

.artifact-shell > .topbar {
  min-height: 72px;
  align-items: center;
}

.artifact-shell > .topbar .brand {
  min-width: 310px;
}

.artifact-shell > .topbar .brand img {
  width: 52px;
  height: 52px;
  border-radius: 7px;
}

.artifact-shell > .topbar .brand h1 {
  margin: 0;
  font-size: 22px;
}

.artifact-shell > .topbar .brand p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.artifact-shell > .topbar .artifact-count {
  padding: 9px 13px;
  font-size: 14px;
}

.artifact-block {
  margin-top: 18px;
  padding: 16px;
  border-radius: 10px;
}

.artifact-block-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}

.artifact-block-head h3 {
  margin: 4px 0 0;
  font-size: 23px;
}

.artifact-table-wrap {
  overflow: auto;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
}

.artifact-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  text-align: center;
}

.artifact-matrix {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.artifact-matrix .artifact-col-label {
  width: 72px;
}

.artifact-matrix .artifact-col-average {
  width: clamp(76px, 5.5vw, 100px);
}

.artifact-matrix .artifact-col-value {
  width: auto;
}

.artifact-table th,
.artifact-table td {
  padding: 9px 11px;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}

.artifact-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #292826;
  color: var(--gold);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.artifact-matrix thead tr:first-child th {
  height: 40px;
  border-bottom-color: var(--line);
}

.artifact-matrix thead tr:nth-child(2) th {
  height: 32px;
}

.artifact-element-group {
  border-left: 2px solid var(--line) !important;
  background: linear-gradient(180deg, #302e29, #282725) !important;
}

.artifact-element-water { box-shadow: inset 0 3px #4e9bd5; }
.artifact-element-fire { box-shadow: inset 0 3px #d85b49; }
.artifact-element-wind { box-shadow: inset 0 3px #e0bd42; }
.artifact-element-light { box-shadow: inset 0 3px #e7e4dc; }
.artifact-element-dark { box-shadow: inset 0 3px #9b78bb; }
.artifact-element-intangible { box-shadow: inset 0 3px #b7b0a6; }

/* Encadre chaque famille d'artefacts d'attribut sur toute la matrice. */
.artifact-matrix thead tr:nth-child(2) > *:nth-child(3),
.artifact-matrix tbody tr:not(.artifact-separator) > *:nth-child(3) { border-left: 2px solid #4e9bd5; }
.artifact-matrix thead tr:nth-child(2) > *:nth-child(7),
.artifact-matrix tbody tr:not(.artifact-separator) > *:nth-child(7) { border-right: 2px solid #4e9bd5; }

.artifact-matrix thead tr:nth-child(2) > *:nth-child(8),
.artifact-matrix tbody tr:not(.artifact-separator) > *:nth-child(8) { border-left: 2px solid #d85b49; }
.artifact-matrix thead tr:nth-child(2) > *:nth-child(12),
.artifact-matrix tbody tr:not(.artifact-separator) > *:nth-child(12) { border-right: 2px solid #d85b49; }

.artifact-matrix thead tr:nth-child(2) > *:nth-child(13),
.artifact-matrix tbody tr:not(.artifact-separator) > *:nth-child(13) { border-left: 2px solid #e0bd42; }
.artifact-matrix thead tr:nth-child(2) > *:nth-child(17),
.artifact-matrix tbody tr:not(.artifact-separator) > *:nth-child(17) { border-right: 2px solid #e0bd42; }

.artifact-matrix thead tr:nth-child(2) > *:nth-child(18),
.artifact-matrix tbody tr:not(.artifact-separator) > *:nth-child(18) { border-left: 2px solid #e7e4dc; }
.artifact-matrix thead tr:nth-child(2) > *:nth-child(22),
.artifact-matrix tbody tr:not(.artifact-separator) > *:nth-child(22) { border-right: 2px solid #e7e4dc; }

.artifact-matrix thead tr:nth-child(2) > *:nth-child(23),
.artifact-matrix tbody tr:not(.artifact-separator) > *:nth-child(23) { border-left: 2px solid #9b78bb; }
.artifact-matrix thead tr:nth-child(2) > *:nth-child(27),
.artifact-matrix tbody tr:not(.artifact-separator) > *:nth-child(27) { border-right: 2px solid #9b78bb; }

.artifact-matrix thead tr:nth-child(2) > *:nth-child(28),
.artifact-matrix tbody tr:not(.artifact-separator) > *:nth-child(28) { border-left: 2px solid #b7b0a6; }
.artifact-matrix thead tr:nth-child(2) > *:nth-child(32),
.artifact-matrix tbody tr:not(.artifact-separator) > *:nth-child(32) { border-right: 2px solid #b7b0a6; }

.artifact-matrix tbody tr:last-child > *:nth-child(n + 3):nth-child(-n + 7) { border-bottom: 2px solid #4e9bd5; }
.artifact-matrix tbody tr:last-child > *:nth-child(n + 8):nth-child(-n + 12) { border-bottom: 2px solid #d85b49; }
.artifact-matrix tbody tr:last-child > *:nth-child(n + 13):nth-child(-n + 17) { border-bottom: 2px solid #e0bd42; }
.artifact-matrix tbody tr:last-child > *:nth-child(n + 18):nth-child(-n + 22) { border-bottom: 2px solid #e7e4dc; }
.artifact-matrix tbody tr:last-child > *:nth-child(n + 23):nth-child(-n + 27) { border-bottom: 2px solid #9b78bb; }
.artifact-matrix tbody tr:last-child > *:nth-child(n + 28):nth-child(-n + 32) { border-bottom: 2px solid #b7b0a6; }

.artifact-table tbody th {
  text-align: left;
  background: #242321;
  color: var(--text);
}

.artifact-table tbody tr:hover td,
.artifact-table tbody tr:hover th {
  background-color: #302e2a;
}

.artifact-table .is-good {
  color: var(--green);
  background: var(--green-bg);
  font-weight: 800;
}

.artifact-table .is-bad {
  color: var(--red);
  background: var(--red-bg);
}

.artifact-element-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 5px;
}

.artifact-element-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.artifact-matrix .artifact-element-icon {
  width: 20px;
  height: 20px;
  margin: 0;
}

.artifact-intangible-icon {
  display: inline-grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid #aaa49a;
  border-radius: 50%;
  color: #d2cdc4;
  font-size: 15px;
  line-height: 1;
}

.artifact-matrix tbody td,
.artifact-matrix tbody th {
  height: 33px;
  padding: 5px 2px;
  font-size: clamp(12px, 0.86vw, 14px);
  overflow: hidden;
  text-overflow: clip;
}

.artifact-matrix thead th {
  padding: 3px 2px;
  font-size: clamp(11px, 0.78vw, 13px);
  letter-spacing: 0;
}

.artifact-matrix tbody th:first-child {
  position: sticky;
  left: 0;
  z-index: var(--tower-z, 2);
  padding-left: 6px;
  padding-right: 6px;
  white-space: nowrap;
  box-shadow: 2px 0 0 var(--line);
}

.artifact-matrix tbody td:nth-child(2),
.artifact-matrix thead tr:nth-child(2) th:nth-child(2) {
  font-weight: 800;
  white-space: nowrap;
}

.artifact-matrix tbody tr:not(.artifact-separator) td:nth-child(5n + 3) {
  border-left: 2px solid var(--line);
}

/* Doit rester après la règle générique des séparateurs de groupes. */
.artifact-matrix thead tr:nth-child(2) > *:nth-child(3),
.artifact-matrix tbody tr:not(.artifact-separator) > *:nth-child(3) {
  border-left-color: #4e9bd5;
}

.artifact-matrix .artifact-average {
  color: var(--gold);
  font-weight: 700;
}

.artifact-separator td {
  height: 14px !important;
  padding: 0 !important;
  border: 0 !important;
  background: #191918;
}

.artifact-group-all th,
.artifact-group-all td {
  color: var(--gold) !important;
  font-weight: 900 !important;
}

.artifact-empty {
  padding: 34px;
  color: var(--muted);
  text-align: center;
}

.artifact-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--line-soft);
  background: #242321;
}

.artifact-sort-advice {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.artifact-sort-advice--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.artifact-sort-advice--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.artifact-sort-advice-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 50px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #242321;
  color: var(--muted);
  white-space: nowrap;
  cursor: help;
  font-size: clamp(14px, 0.95vw, 16px);
}

.artifact-sort-advice-item .artifact-element-icon {
  width: 29px;
  height: 29px;
  margin: 0;
}

.artifact-sort-advice-item .artifact-element-label > span {
  color: var(--text);
  font-weight: 800;
  font-size: inherit;
}

.artifact-sort-advice-item strong {
  color: var(--gold);
}

.artifact-sort-advice-item > span:last-child {
  color: var(--green);
  font-weight: 800;
  font-size: inherit;
}

.artifact-sort-advice-item .artifact-advice-help {
  display: inline-grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--gold);
  font-size: 13px;
  line-height: 1;
}

@media (max-width: 1000px) {
  .artifact-sort-advice {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.artifact-main-chip {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
}

.artifact-main-chip b {
  color: var(--gold);
}

.artifact-value-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 54px;
}

.artifact-main-icon {
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.06);
}

.artifact-main-icon--attack {
  font-size: 15px;
}

.artifact-main-icon--hp {
  color: #81c995;
}

.artifact-main-icon--attack {
  color: #d85b49;
}

.artifact-main-icon--defense {
  color: #75a9d6;
}

.artifact-main-icon--defense svg {
  display: block;
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.artifact-substat-table {
  width: 100%;
  min-width: 1200px;
  table-layout: auto;
}

.artifact-subtable-title {
  margin: 18px 0 8px;
  color: var(--gold);
  font-size: 17px;
}

.artifact-type-label {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.artifact-element-attack { box-shadow: inset 0 3px #d85b49; }
.artifact-element-defense { box-shadow: inset 0 3px #75a9d6; }
.artifact-element-hp { box-shadow: inset 0 3px #81c995; }
.artifact-element-support { box-shadow: inset 0 3px #d3afe9; }

/* Cadres complets des groupes de 3 colonnes dans tous les tableaux de substats. */
.artifact-substat-table thead tr:nth-child(2) > *:nth-child(3n + 2),
.artifact-substat-table tbody tr > *:nth-child(3n + 2) {
  border-left-width: 2px;
}

.artifact-substat-table thead tr:nth-child(2) > *:nth-child(3n + 4),
.artifact-substat-table tbody tr > *:nth-child(3n + 4) {
  border-right-width: 2px;
}

.artifact-substat-table tbody tr:last-child td {
  border-bottom-width: 2px;
}

.artifact-substat-table thead tr:nth-child(2) > *:nth-child(2),
.artifact-substat-table tbody tr > *:nth-child(2) { border-left-color: #4e9bd5; }
.artifact-substat-table thead tr:nth-child(2) > *:nth-child(4),
.artifact-substat-table tbody tr > *:nth-child(4) { border-right-color: #4e9bd5; }
.artifact-substat-table thead tr:nth-child(2) > *:nth-child(5),
.artifact-substat-table tbody tr > *:nth-child(5) { border-left-color: #d85b49; }
.artifact-substat-table thead tr:nth-child(2) > *:nth-child(7),
.artifact-substat-table tbody tr > *:nth-child(7) { border-right-color: #d85b49; }
.artifact-substat-table thead tr:nth-child(2) > *:nth-child(8),
.artifact-substat-table tbody tr > *:nth-child(8) { border-left-color: #e0bd42; }
.artifact-substat-table thead tr:nth-child(2) > *:nth-child(10),
.artifact-substat-table tbody tr > *:nth-child(10) { border-right-color: #e0bd42; }
.artifact-substat-table thead tr:nth-child(2) > *:nth-child(11),
.artifact-substat-table tbody tr > *:nth-child(11) { border-left-color: #e7e4dc; }
.artifact-substat-table thead tr:nth-child(2) > *:nth-child(13),
.artifact-substat-table tbody tr > *:nth-child(13) { border-right-color: #e7e4dc; }
.artifact-substat-table thead tr:nth-child(2) > *:nth-child(14),
.artifact-substat-table tbody tr > *:nth-child(14) { border-left-color: #9b78bb; }
.artifact-substat-table thead tr:nth-child(2) > *:nth-child(16),
.artifact-substat-table tbody tr > *:nth-child(16) { border-right-color: #9b78bb; }
.artifact-substat-table thead tr:nth-child(2) > *:nth-child(17),
.artifact-substat-table tbody tr > *:nth-child(17) { border-left-color: #b7b0a6; }
.artifact-substat-table thead tr:nth-child(2) > *:nth-child(19),
.artifact-substat-table tbody tr > *:nth-child(19) { border-right-color: #b7b0a6; }

.artifact-substat-table tbody tr:last-child > *:nth-child(n + 2):nth-child(-n + 4) { border-bottom-color: #4e9bd5; }
.artifact-substat-table tbody tr:last-child > *:nth-child(n + 5):nth-child(-n + 7) { border-bottom-color: #d85b49; }
.artifact-substat-table tbody tr:last-child > *:nth-child(n + 8):nth-child(-n + 10) { border-bottom-color: #e0bd42; }
.artifact-substat-table tbody tr:last-child > *:nth-child(n + 11):nth-child(-n + 13) { border-bottom-color: #e7e4dc; }
.artifact-substat-table tbody tr:last-child > *:nth-child(n + 14):nth-child(-n + 16) { border-bottom-color: #9b78bb; }
.artifact-substat-table tbody tr:last-child > *:nth-child(n + 17):nth-child(-n + 19) { border-bottom-color: #b7b0a6; }

/* Les tableaux Type utilisent ATK, DEF, PV, SUPPORT, INTANGIBLE. */
.artifact-substat-table.artifact-type-table thead tr:nth-child(2) > *:nth-child(2),
.artifact-substat-table.artifact-type-table tbody tr > *:nth-child(2) { border-left-color: #d85b49; }
.artifact-substat-table.artifact-type-table thead tr:nth-child(2) > *:nth-child(4),
.artifact-substat-table.artifact-type-table tbody tr > *:nth-child(4) { border-right-color: #d85b49; }
.artifact-substat-table.artifact-type-table thead tr:nth-child(2) > *:nth-child(5),
.artifact-substat-table.artifact-type-table tbody tr > *:nth-child(5) { border-left-color: #75a9d6; }
.artifact-substat-table.artifact-type-table thead tr:nth-child(2) > *:nth-child(7),
.artifact-substat-table.artifact-type-table tbody tr > *:nth-child(7) { border-right-color: #75a9d6; }
.artifact-substat-table.artifact-type-table thead tr:nth-child(2) > *:nth-child(8),
.artifact-substat-table.artifact-type-table tbody tr > *:nth-child(8) { border-left-color: #81c995; }
.artifact-substat-table.artifact-type-table thead tr:nth-child(2) > *:nth-child(10),
.artifact-substat-table.artifact-type-table tbody tr > *:nth-child(10) { border-right-color: #81c995; }
.artifact-substat-table.artifact-type-table thead tr:nth-child(2) > *:nth-child(11),
.artifact-substat-table.artifact-type-table tbody tr > *:nth-child(11) { border-left-color: #d3afe9; }
.artifact-substat-table.artifact-type-table thead tr:nth-child(2) > *:nth-child(13),
.artifact-substat-table.artifact-type-table tbody tr > *:nth-child(13) { border-right-color: #d3afe9; }
.artifact-substat-table.artifact-type-table thead tr:nth-child(2) > *:nth-child(14),
.artifact-substat-table.artifact-type-table tbody tr > *:nth-child(14) { border-left-color: #b7b0a6; }
.artifact-substat-table.artifact-type-table thead tr:nth-child(2) > *:nth-child(16),
.artifact-substat-table.artifact-type-table tbody tr > *:nth-child(16) { border-right-color: #b7b0a6; }

.artifact-substat-table.artifact-type-table tbody tr:last-child > *:nth-child(n + 2):nth-child(-n + 4) { border-bottom-color: #d85b49; }
.artifact-substat-table.artifact-type-table tbody tr:last-child > *:nth-child(n + 5):nth-child(-n + 7) { border-bottom-color: #75a9d6; }
.artifact-substat-table.artifact-type-table tbody tr:last-child > *:nth-child(n + 8):nth-child(-n + 10) { border-bottom-color: #81c995; }
.artifact-substat-table.artifact-type-table tbody tr:last-child > *:nth-child(n + 11):nth-child(-n + 13) { border-bottom-color: #d3afe9; }
.artifact-substat-table.artifact-type-table tbody tr:last-child > *:nth-child(n + 14):nth-child(-n + 16) { border-bottom-color: #b7b0a6; }

.artifact-sales-modal {
  width: min(720px, calc(100vw - 24px));
  max-height: 90vh;
}

.artifact-sales-modal h2,
.artifact-reappraisal-modal h2,
.artifact-guild-modal h2 {
  font-size: 22px;
}

#artifact-sales-advice-modal,
#artifact-reappraisal-modal {
  z-index: 5000;
}

#artifact-guild-settings-modal,
#artifact-sale-settings-modal {
  z-index: 5000;
}

.artifact-guild-modal {
  width: min(1180px, calc(100vw - 24px));
  max-height: 92vh;
}

.artifact-guild-modal .modal-body {
  overflow: auto;
}

.artifact-guild-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.artifact-guild-toolbar input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #1b1b1a;
  color: var(--text);
  font-size: 15px;
}

.artifact-guild-toolbar button,
.artifact-guild-modal .modal-actions button {
  min-height: 38px;
  padding: 8px 14px;
  font-size: 15px;
}

.artifact-guild-settings-body { font-size: 15px; }
.artifact-sale-settings-body { font-size: 15px; }
.artifact-guild-access-note {
  margin: 0 0 12px;
  padding: 8px 10px;
  border: 1px solid var(--gold-2);
  border-radius: 7px;
  background: #2a251b;
  color: var(--muted);
  font-size: 13px;
}
.artifact-guild-side { margin-bottom: 20px; }
.artifact-guild-side > h3 {
  position: sticky; top: 0; z-index: 4;
  margin: 0 0 10px; padding: 10px 12px;
  border: 1px solid var(--gold-2); border-radius: 6px;
  background: #2a251b; color: var(--gold); font-size: 21px;
}
.artifact-guild-category { margin-bottom: 14px; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.artifact-guild-category h4 { margin: 0; padding: 10px 12px; background: #302f2d; font-size: 17px; border-bottom: 2px solid var(--gold-2); }
.artifact-guild-category--hp h4 { border-bottom-color: #81c995; }
.artifact-guild-category--atk h4 { border-bottom-color: #d85b49; }
.artifact-guild-category--def h4 { border-bottom-color: #75a9d6; }
.artifact-guild-family-head {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) 90px repeat(5, minmax(58px, 1fr));
  background: #242321; font-size: 14px; font-weight: 900;
}
.artifact-guild-family-head > * { display: grid; place-items: center; min-height: 38px; padding: 6px; border-right: 1px solid var(--line); }
.guild-family-water { background: #99ccff22 !important; color: #9bd0fa !important; }
.guild-family-fire { background: #ffa09922 !important; color: #f3a09a !important; }
.guild-family-wind { background: #ffff9920 !important; color: #e0bd42 !important; }
.guild-family-light { background: #fffff216 !important; color: #e7e4dc !important; }
.guild-family-dark { background: #d199ff20 !important; color: #c49ae8 !important; }
.guild-family-attack { background: #d85b4920 !important; color: #ef9b91 !important; }
.guild-family-defense { background: #75a9d620 !important; color: #9dc7ea !important; }
.guild-family-hp { background: #81c99520 !important; color: #a5dfb3 !important; }
.guild-family-support { background: #d3afe920 !important; color: #ddbdec !important; }

.artifact-guild-rule {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) 90px minmax(300px, 5fr);
  gap: 0; align-items: center; padding: 0; border-bottom: 1px solid var(--line-soft);
}
.artifact-guild-rule-name { min-height: 45px; padding: 8px 10px; border-right: 1px solid var(--line); }
.artifact-guild-rule-name strong { font-size: 15px; line-height: 1.3; }
.artifact-guild-rule label { display: grid; gap: 3px; color: var(--muted); font-size: 13px; }

.artifact-guild-rule input {
  width: 100%;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #1b1b1a;
  color: var(--text);
  text-align: center;
  font-size: 15px;
  font-weight: 800;
}

.artifact-guild-min { padding: 5px; border-right: 1px solid var(--line); }
.artifact-guild-quantities {
  display: grid;
  grid-template-columns: repeat(5, minmax(48px, 1fr));
  gap: 0;
}
.artifact-guild-quantities label { min-height: 45px; padding: 5px; border-right: 1px solid var(--line); }
.artifact-guild-quantities label span { display: none; }

.artifact-sale-settings-section {
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.025);
}

.artifact-sale-settings-section h3,
.artifact-sale-settings-page h4 {
  margin: 0 0 10px;
  color: var(--gold);
}

.artifact-sale-settings-section p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
}

.artifact-sale-settings-help {
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: rgba(230, 190, 110, 0.07);
  color: var(--muted);
  line-height: 1.45;
}

.artifact-sale-settings-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 8px;
}

.artifact-sale-settings-grid label,
.artifact-sale-toggle {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.artifact-sale-settings-grid input {
  width: 100%;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #1b1b1a;
  color: var(--text);
  font-weight: 850;
}

.artifact-sale-settings-page {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

.artifact-sale-exception-group {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.16);
}

.artifact-sale-exception-group--dcc {
  border-color: rgba(230, 190, 110, 0.42);
  background: rgba(230, 190, 110, 0.06);
}

.artifact-sale-exception-group h4,
.artifact-sale-exception-group h5 {
  margin: 0 0 6px;
  color: var(--gold);
}

.artifact-sale-exception-group h5 {
  margin-top: 10px;
  font-size: 12px;
  text-transform: uppercase;
}

.artifact-sale-exception-group p {
  margin: 0 0 8px;
  line-height: 1.45;
}

.artifact-sale-exception-subgroup {
  margin-top: 8px;
}

.artifact-sale-settings-table {
  width: 100%;
  margin-top: 10px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
}

.artifact-sale-settings-table th,
.artifact-sale-settings-table td {
  border: 1px solid var(--line-soft);
  padding: 6px;
  text-align: left;
  vertical-align: middle;
}

.artifact-sale-settings-table th {
  color: var(--gold);
  background: rgba(0, 0, 0, 0.22);
}

.artifact-sale-settings-table td:first-child {
  width: 44%;
  color: var(--text);
  font-weight: 800;
}

.artifact-sale-settings-table td:first-child input[type="checkbox"] {
  margin-right: 6px;
  accent-color: var(--gold);
}

.artifact-sale-settings-table input[type="number"] {
  width: 100%;
  min-width: 0;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #1b1b1a;
  color: var(--text);
  font-weight: 850;
}

.artifact-sale-effect-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.artifact-sale-effect-chip,
.artifact-sale-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: #22211f;
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}

.artifact-sale-effect-chip input,
.artifact-sale-toggle input {
  accent-color: var(--gold);
}

.artifact-sort-advice-item.is-guild-protected {
  outline: 1px solid var(--gold-2);
}

@media (max-width: 800px) {
  .artifact-guild-rule {
    grid-template-columns: 1fr;
  }
  .artifact-guild-family-head { display: none; }
  .artifact-guild-quantities label span { display: block; }
  .artifact-sale-settings-grid { grid-template-columns: 1fr; }
}

body.artifact-modal-open {
  overflow: hidden;
}

.artifact-sales-modal .modal-body {
  overflow: auto;
}

.artifact-reappraisal-modal {
  width: min(1180px, calc(100vw - 24px));
  max-height: 92vh;
}

.artifact-reappraisal-modal .modal-body {
  overflow: auto;
}

.artifact-reapp-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.artifact-reapp-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.artifact-reapp-section-head h3 {
  margin: 0;
  color: var(--gold);
  font-size: 18px;
}

.artifact-reapp-section-head span {
  min-width: 34px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  text-align: center;
  font-weight: 850;
}

.artifact-reapp-section p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.artifact-reapp-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.artifact-reapp-table th,
.artifact-reapp-table td {
  padding: 8px 9px;
  font-size: 13px;
  vertical-align: middle;
}

.artifact-reapp-table td:nth-child(3) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.artifact-reapp-table td:nth-child(4) {
  white-space: nowrap;
  font-weight: 850;
}

.artifact-reapp-table th:nth-child(1),
.artifact-reapp-table td:nth-child(1) {
  width: 32%;
}

.artifact-reapp-table th:nth-child(2),
.artifact-reapp-table td:nth-child(2) {
  width: 18%;
}

.artifact-reapp-table th:nth-child(3),
.artifact-reapp-table td:nth-child(3) {
  width: 38%;
}

.artifact-reapp-table th:nth-child(4),
.artifact-reapp-table td:nth-child(4) {
  width: 12%;
}

.artifact-reapp-sub {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  margin: 2px;
  padding: 3px 6px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: #22211f;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

.artifact-reapp-sub.is-target {
  border-color: var(--gold-2);
  color: var(--gold);
  background: #2b2418;
}

.artifact-reapp-sub b,
.artifact-reapp-procs {
  color: var(--green);
  font-weight: 900;
}

.artifact-reapp-sub em,
.artifact-reapp-advice {
  padding: 1px 5px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--gold);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.artifact-reapp-advice {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  background: #2b2418;
}

.artifact-sales-intro {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}

.artifact-sales-intro.is-guaranteed {
  color: var(--green);
  font-weight: 800;
}

.artifact-sales-intro.is-warning {
  color: #f2b86b;
  font-weight: 800;
}

.artifact-sales-sold-count {
  display: inline-block;
  margin-left: 8px;
  color: var(--gold);
  font-weight: 900;
}

.artifact-sales-table {
  min-width: 0;
}

.artifact-sales-table th:first-child {
  width: auto;
}

.artifact-sales-table th,
.artifact-sales-table td {
  padding: 10px 12px;
  font-size: 15px;
}

.artifact-sales-table th.artifact-sales-label-long-counter {
  font-size: 13px;
  line-height: 1.2;
}

.artifact-sales-table tbody td {
  width: 150px;
  color: var(--green);
  font-weight: 900;
  cursor: help;
}

.artifact-sales-separator td {
  height: 12px;
  padding: 0 !important;
  border: 0 !important;
  background: #191918;
}

.artifact-combo-advice {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.artifact-combo-advice-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.artifact-combo-advice-head h3 {
  margin: 0;
  font-size: 18px;
}

.artifact-combo-advice-head span,
.artifact-combo-advice > p {
  color: var(--muted);
  font-size: 14px;
}

.artifact-combo-advice > p {
  margin: 6px 0 12px;
  line-height: 1.4;
}

.artifact-combo-grid {
  display: grid;
  gap: 10px;
}

.artifact-combo-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
}

.artifact-combo-card h4 {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
  font-size: 15px;
}

.artifact-combo-card h4 span {
  color: var(--muted);
  font-weight: 700;
}

.artifact-combo-card p {
  margin: 4px 0;
  color: var(--text);
  font-size: 14px;
}

.artifact-combo-card ul {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--green);
  font-weight: 800;
  font-size: 14px;
}

.artifact-sale-pages-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.artifact-sale-pages-column {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.artifact-sale-page-section {
  margin-top: 0;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.artifact-sale-page-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}

.artifact-sale-page-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
}

.artifact-sale-page-head span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-align: right;
}

.artifact-sale-page-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.artifact-sale-page-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 3px 7px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: #22211f;
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
}

.artifact-sale-page-meta b {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.artifact-sale-page-source {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.artifact-sale-page-table {
  margin-bottom: 2px;
}

@media (max-width: 980px) {
  .artifact-sale-pages-grid {
    grid-template-columns: 1fr;
  }
}

.artifact-quad-review-panel {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

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

.artifact-quad-review-head h3 {
  margin: 0;
  font-size: 18px;
}

.artifact-quad-review-head span,
.artifact-quad-review-note,
.artifact-quad-review-empty {
  color: var(--muted);
  font-size: 14px;
}

.artifact-quad-review-note,
.artifact-quad-review-empty {
  margin: 0 0 10px;
  line-height: 1.4;
}

.artifact-quad-table {
  min-width: 820px;
}

.artifact-quad-table th,
.artifact-quad-table td {
  padding: 8px 9px;
  font-size: 14px;
}

.artifact-quad-status {
  display: inline-flex;
  min-width: 86px;
  justify-content: center;
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font-weight: 800;
}

.artifact-quad-row--keep .artifact-quad-status {
  border-color: #4b8f5f;
  color: var(--green);
}

.artifact-quad-row--sell .artifact-quad-status {
  border-color: #a35b52;
  color: var(--red);
}

.artifact-quad-actions {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.artifact-quad-actions button {
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #25231f;
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.artifact-quad-actions button:hover {
  border-color: var(--gold-2);
  color: var(--gold);
}

.artifact-substat-table thead th {
  padding: 7px 4px;
  font-size: 13px;
  white-space: nowrap;
}

.artifact-substat-table thead tr > th:first-child,
.artifact-substat-table tbody th {
  width: 1%;
  min-width: 205px;
  padding-left: 10px;
  font-size: 15px;
  white-space: nowrap;
}

.artifact-substat-table tbody th small {
  display: block;
  margin-top: 3px;
  color: var(--gold);
}

.artifact-substat-table tbody td {
  min-width: 52px;
  padding: 9px 3px;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.artifact-rank-table thead tr > th:first-child,
.artifact-rank-table tbody th {
  width: 1%;
  min-width: 82px;
  padding: 9px 8px;
  text-align: left;
}

.artifact-rank-table thead tr:nth-child(2) th {
  min-width: 72px;
  font-size: 13px;
}

.artifact-rank-table thead tr:nth-child(2) th,
.artifact-rank-table tbody td {
  border-color: var(--line-soft) !important;
  border-width: 1px !important;
}

.artifact-rank-table .artifact-family-start { border-left-width: 2px !important; }
.artifact-rank-table .artifact-family-end { border-right-width: 2px !important; }
.artifact-rank-table tbody tr:last-child td { border-bottom-width: 2px !important; }

.artifact-rank-table .artifact-family-water.artifact-family-start { border-left-color: #4e9bd5 !important; }
.artifact-rank-table .artifact-family-water.artifact-family-end { border-right-color: #4e9bd5 !important; }
.artifact-rank-table tbody tr:last-child .artifact-family-water { border-bottom-color: #4e9bd5 !important; }
.artifact-rank-table .artifact-family-fire.artifact-family-start { border-left-color: #d85b49 !important; }
.artifact-rank-table .artifact-family-fire.artifact-family-end { border-right-color: #d85b49 !important; }
.artifact-rank-table tbody tr:last-child .artifact-family-fire { border-bottom-color: #d85b49 !important; }
.artifact-rank-table .artifact-family-wind.artifact-family-start { border-left-color: #e0bd42 !important; }
.artifact-rank-table .artifact-family-wind.artifact-family-end { border-right-color: #e0bd42 !important; }
.artifact-rank-table tbody tr:last-child .artifact-family-wind { border-bottom-color: #e0bd42 !important; }
.artifact-rank-table .artifact-family-light.artifact-family-start { border-left-color: #e7e4dc !important; }
.artifact-rank-table .artifact-family-light.artifact-family-end { border-right-color: #e7e4dc !important; }
.artifact-rank-table tbody tr:last-child .artifact-family-light { border-bottom-color: #e7e4dc !important; }
.artifact-rank-table .artifact-family-dark.artifact-family-start { border-left-color: #9b78bb !important; }
.artifact-rank-table .artifact-family-dark.artifact-family-end { border-right-color: #9b78bb !important; }
.artifact-rank-table tbody tr:last-child .artifact-family-dark { border-bottom-color: #9b78bb !important; }
.artifact-rank-table .artifact-family-intangible.artifact-family-start { border-left-color: #b7b0a6 !important; }
.artifact-rank-table .artifact-family-intangible.artifact-family-end { border-right-color: #b7b0a6 !important; }
.artifact-rank-table tbody tr:last-child .artifact-family-intangible { border-bottom-color: #b7b0a6 !important; }
.artifact-rank-table .artifact-family-attack.artifact-family-start { border-left-color: #d85b49 !important; }
.artifact-rank-table .artifact-family-attack.artifact-family-end { border-right-color: #d85b49 !important; }
.artifact-rank-table tbody tr:last-child .artifact-family-attack { border-bottom-color: #d85b49 !important; }
.artifact-rank-table .artifact-family-defense.artifact-family-start { border-left-color: #75a9d6 !important; }
.artifact-rank-table .artifact-family-defense.artifact-family-end { border-right-color: #75a9d6 !important; }
.artifact-rank-table tbody tr:last-child .artifact-family-defense { border-bottom-color: #75a9d6 !important; }
.artifact-rank-table .artifact-family-hp.artifact-family-start { border-left-color: #81c995 !important; }
.artifact-rank-table .artifact-family-hp.artifact-family-end { border-right-color: #81c995 !important; }
.artifact-rank-table tbody tr:last-child .artifact-family-hp { border-bottom-color: #81c995 !important; }
.artifact-rank-table .artifact-family-support.artifact-family-start { border-left-color: #d3afe9 !important; }
.artifact-rank-table .artifact-family-support.artifact-family-end { border-right-color: #d3afe9 !important; }
.artifact-rank-table tbody tr:last-child .artifact-family-support { border-bottom-color: #d3afe9 !important; }

@media (max-width: 720px) {
  .artifact-analysis { width: min(100% - 18px, 1500px); padding-top: 12px; }
  .artifact-hero, .artifact-block { padding: 16px; }
  .artifact-hero, .artifact-block-head { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 1100px) {
  .artifact-analysis {
    width: calc(100% - 10px);
  }

  .artifact-block {
    padding: 10px;
  }

  .artifact-matrix .artifact-col-label {
    width: 68px;
  }

  .artifact-matrix .artifact-col-average {
    width: 66px;
  }

  .artifact-matrix .artifact-element-icon,
  .artifact-matrix .artifact-intangible-icon {
    width: 16px;
    height: 16px;
  }

  .artifact-element-group .artifact-element-label span:last-child {
    font-size: 8px;
  }
}

button,
input,
select {
  font: inherit;
}

button,
select,
.file-button {
  border: 1px solid var(--line);
  background: #1e1e1d;
  color: var(--text);
}

button,
.file-button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.auth-screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  align-items: start;
  justify-items: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: max(16px, env(safe-area-inset-top)) 14px max(28px, env(safe-area-inset-bottom));
}

.auth-panel {
  width: min(560px, 100%);
  margin: auto 0;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 18px 44px rgb(0 0 0 / 0.24);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 18px;
}

.auth-brand img {
  width: 44px;
  height: 44px;
  border-radius: 8px;
}

.auth-brand h1,
.tools-head h1 {
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
}

.auth-brand p,
.tools-head p {
  margin: 5px 0 0;
  color: var(--muted);
}

.auth-form {
  display: grid;
  gap: 12px;
}

.auth-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 14px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #181817;
}

.auth-tab {
  min-height: 32px;
  padding: 4px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  line-height: 1.15;
  white-space: normal;
}

.auth-tab.is-active {
  background: #2b2b29;
  color: var(--text);
  font-weight: 750;
}

.auth-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
}

.auth-form input,
.auth-form select,
.auth-form textarea {
  height: 38px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #171716;
  color: var(--text);
}

.auth-form textarea {
  min-height: 92px;
  padding: 10px 11px;
  resize: vertical;
  line-height: 1.35;
}

.auth-error {
  margin: 0;
  color: var(--red);
}

.auth-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.auth-error.is-info {
  color: var(--accent);
}

.auth-secondary-action {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  text-align: center;
  cursor: pointer;
}

.auth-secondary-action:hover {
  color: var(--accent);
}

.auth-register {
  width: 100%;
  margin-top: 12px;
}

@media (max-width: 430px), (max-height: 620px) {
  .auth-panel {
    padding: 16px;
  }

  .auth-brand {
    margin-bottom: 12px;
  }

  .auth-brand img {
    width: 38px;
    height: 38px;
  }

  .auth-brand h1,
  .tools-head h1 {
    font-size: 20px;
  }

  .auth-tabs {
    gap: 4px;
    margin-bottom: 12px;
  }

  .auth-tab {
    min-height: 38px;
    font-size: 11px;
  }
}

.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(10, 10, 10, 0.72);
  backdrop-filter: blur(2px);
}

.loading-overlay[hidden] {
  display: none;
}

.loading-card {
  min-width: min(340px, 88vw);
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 22px 26px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #242423;
  color: var(--text);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}

.loading-card > span:last-child {
  color: var(--muted);
  font-size: 12px;
}

.loading-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(142, 197, 232, 0.2);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: loading-spin 700ms linear infinite;
}

@keyframes loading-spin {
  to { transform: rotate(360deg); }
}

body.is-loading {
  cursor: wait;
}

.tools-shell {
  width: min(980px, 100%);
  margin: 0 auto;
  padding: 28px 14px;
}

.tools-head {
  --tools-control-gap: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--tools-control-gap);
  margin-bottom: 18px;
}

.tools-brand {
  display: flex;
  align-items: center;
  gap: var(--tools-control-gap);
  flex-wrap: nowrap;
  min-width: 0;
  flex: 0 0 auto;
}

.tools-brand img {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  object-fit: contain;
}

.tools-brand h1 {
  margin: 0;
  white-space: nowrap;
}

.tools-brand h1 small,
.brand h1 small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.05;
}

.tools-brand h1 span,
.brand h1 span {
  display: block;
}

.tools-brand p {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.tools-session {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--tools-control-gap);
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

.notification-button {
  position: relative;
}

.button-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex: 0 0 auto;
}

.action-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: #d85b49;
  color: #fff8ef;
  border: 1px solid #2d2018;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.action-badge.is-seen {
  background: #6f737b;
  color: #f0f2f5;
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.22);
}

.tools-user-label {
  display: none;
}

.shared-account-control {
  display: grid;
  gap: 4px;
  min-width: 190px;
}

.tools-brand .shared-account-control {
  display: grid;
  gap: 3px;
  width: 170px;
  min-width: 170px;
  flex: 0 0 170px;
  margin-left: 0;
}

.tools-brand .shared-account-control > span {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  line-height: 1;
}

.shared-account-control span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  white-space: nowrap;
}

.shared-account-control select {
  box-sizing: border-box;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #171716;
  color: var(--text);
}

.shared-account-control select:disabled {
  opacity: 0.65;
}

.tools-brand .shared-account-control select {
  width: 100%;
}

.tools-json-update {
  min-height: 34px;
  padding: 0 14px;
  margin-left: 0;
  box-shadow: none;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.tools-drop-zone {
  margin-bottom: 18px;
}

.tools-import-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.tools-import-actions .status-line {
  flex-basis: 100%;
}

.tool-card {
  min-height: 138px;
  padding: 16px;
  border-radius: 8px;
  text-align: left;
  display: grid;
  align-content: start;
  gap: 12px;
  background: var(--panel);
}

.tool-card:hover {
  border-color: #6f8fc6;
  background: #242628;
}

.tool-card-title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: var(--text);
  line-height: 1.2;
}

.tool-card-icon {
  width: 56px;
  height: 56px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.035);
  flex: 0 0 auto;
  object-fit: contain;
}

.tool-card strong {
  color: var(--text);
  font-size: 16px;
  line-height: 1.2;
}

.tool-card span {
  color: var(--muted);
  line-height: 1.45;
}

.tool-card .action-badge {
  color: #fffdf7;
  line-height: 1;
  font-weight: 900;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55);
}

.tool-card .action-badge.is-seen {
  color: #f7f8fb;
}

.tool-card.is-disabled:hover {
  border-color: var(--line);
  background: var(--panel);
}

.guild-shell {
  width: min(1180px, 100%);
}

.guild-content {
  display: grid;
  gap: 12px;
}

.user-profile-shell {
  width: min(1120px, 100%);
}

.user-profile-content {
  display: grid;
  gap: 12px;
}

.user-profile-save-button {
  border-color: rgba(91, 216, 112, 0.76);
  background: linear-gradient(180deg, rgba(69, 190, 88, 0.98), rgba(35, 132, 53, 0.98));
  color: #f6fff7;
  box-shadow: 0 0 0 1px rgba(113, 255, 141, 0.16), 0 8px 18px rgba(42, 162, 65, 0.2);
  font-weight: 900;
}

.user-profile-save-button.is-dirty {
  border-color: rgba(240, 184, 75, 0.92);
  background: linear-gradient(180deg, #f0b84b, #bd7415);
  color: #211406;
  box-shadow: 0 0 0 2px rgba(240, 184, 75, 0.24), 0 0 18px rgba(240, 184, 75, 0.36);
  animation: user-profile-save-pulse 1.8s ease-in-out infinite;
}

@keyframes user-profile-save-pulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
}

.gem-regem-training-shell {
  width: min(1500px, 100%);
}

.gem-regem-training-content {
  display: grid;
  gap: 12px;
}

.gem-regem-training-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.gem-regem-training-intro h2 {
  margin: 2px 0 6px;
  color: var(--text);
  font-size: 20px;
}

.gem-regem-training-intro p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.gem-regem-training-intro .gem-regem-training-help {
  margin-top: 6px;
  color: #b9c58a;
  font-size: 12px;
}

.gem-regem-training-intro strong {
  color: var(--gold);
}

.gem-regem-training-summary {
  display: grid;
  gap: 6px;
  min-width: 210px;
  justify-items: end;
  color: var(--muted);
}

.gem-regem-training-summary strong {
  color: var(--gold);
  font-size: 18px;
}

.gem-regem-training-memory-hint {
  max-width: 260px;
  color: #b9c58a;
  font-size: 11px;
  line-height: 1.25;
  text-align: right;
}

.gem-regem-training-rules {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 201, 117, 0.2);
  border-radius: 8px;
  background: rgba(22, 22, 21, 0.94);
}

.gem-regem-training-rules[hidden] {
  display: none;
}

.gem-regem-training-rules-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.gem-regem-training-rules-head h3 {
  margin: 2px 0 4px;
  color: var(--text);
  font-size: 17px;
}

.gem-regem-training-rules-head p,
.gem-regem-training-rules-empty {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.gem-regem-training-rules-empty strong {
  color: var(--gold);
}

.gem-regem-training-rules-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.gem-regem-training-rules-actions .ghost-button.is-active {
  border-color: rgba(174, 198, 10, 0.72);
  background: rgba(174, 198, 10, 0.14);
  color: #ecff91;
}

.gem-regem-training-rules-body {
  display: grid;
  gap: 7px;
}

.gem-regem-training-rule {
  display: grid;
  grid-template-columns: minmax(210px, 1.15fr) minmax(140px, 0.75fr) minmax(220px, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.025);
}

.gem-regem-training-rule.is-active {
  border-color: rgba(174, 198, 10, 0.52);
  background: rgba(174, 198, 10, 0.05);
}

.gem-regem-training-rule--decision {
  border-color: rgba(111, 143, 198, 0.38);
  background: rgba(71, 106, 160, 0.06);
}

.gem-regem-training-rule--decision.is-active {
  border-color: rgba(111, 143, 198, 0.7);
  background: rgba(71, 106, 160, 0.12);
}

.gem-regem-training-rule-main {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.gem-regem-training-rule-main strong {
  min-width: 0;
  color: #f5a64e;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gem-regem-training-rule-main small {
  color: var(--muted);
  font-size: 11px;
}

.gem-regem-training-rule-analysis {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.gem-regem-training-rule-analysis span {
  max-width: 100%;
  padding: 2px 5px;
  border: 1px solid rgba(111, 143, 198, 0.32);
  border-radius: 5px;
  color: #c9dcff;
  background: rgba(111, 143, 198, 0.08);
  font-size: 10px;
  line-height: 1.25;
}

.gem-regem-training-rule-toggle {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: #b9c58a;
  font-size: 12px;
}

.gem-regem-training-rule-field {
  min-width: 0;
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 11px;
}

.gem-regem-training-rule-field input,
.gem-regem-training-rule-field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255, 201, 117, 0.22);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.2);
  color: var(--text);
  font: inherit;
  font-size: 12px;
}

.gem-regem-training-rule-field input {
  min-height: 30px;
  padding: 4px 7px;
}

.gem-regem-training-rule-field textarea {
  min-height: 34px;
  max-height: 70px;
  padding: 5px 7px;
  resize: vertical;
}

.gem-regem-training-rule-delete {
  align-self: end;
}

.gem-regem-training-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(25, 25, 24, 0.92);
}

.gem-regem-training-pager label {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
}

.gem-regem-training-pager select {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
}

.gem-regem-training-pager span {
  min-width: 112px;
  color: var(--gold);
  text-align: center;
  font-weight: 700;
}

.gem-regem-training-pager .ghost-button.is-active {
  border-color: var(--gold);
  background: rgba(185, 132, 31, 0.22);
  color: #fff3bd;
}

.gem-regem-training-grid {
  align-items: stretch;
}

.gem-regem-training-item {
  min-width: 0;
  display: grid;
  gap: 7px;
  align-content: start;
}

.rune-viewer-grid--1 .gem-regem-training-item {
  grid-column: 2;
}

.rune-viewer-grid--1 .gem-regem-training-item .rune-viewer-card {
  grid-column: auto;
}

.gem-regem-training-card {
  padding-bottom: 10px;
}

.gem-regem-training-card .rune-viewer-footer {
  transform: translateY(-8px);
}

.gem-regem-training-subs {
  cursor: default;
}

.gem-regem-training-inline-action {
  margin-left: 6px;
  color: var(--gold);
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.65);
}

.gem-regem-training-sub--regem {
  border-color: #c998ff;
  box-shadow: inset 0 0 0 1px rgba(201, 152, 255, 0.18);
}

.gem-regem-training-feedback {
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(255, 201, 117, 0.34);
  border-radius: 8px;
  background:
    radial-gradient(circle at 24% 18%, rgba(112, 65, 19, 0.18), transparent 45%),
    rgba(27, 18, 12, 0.95);
  box-shadow: inset 0 0 0 1px rgba(255, 214, 90, 0.08), 0 10px 22px rgba(0, 0, 0, 0.22);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 8px;
  align-items: center;
}

.gem-regem-training-advice {
  min-width: 0;
  color: #f5a64e;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gem-regem-training-buttons {
  display: inline-flex;
  gap: 4px;
  justify-content: flex-end;
}

.gem-regem-training-buttons button {
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid rgba(255, 201, 117, 0.55);
  border-radius: 5px;
  background: rgba(59, 39, 23, 0.88);
  color: #ffe7b0;
  font-size: 11px;
  line-height: 1;
}

.gem-regem-training-buttons button:hover,
.gem-regem-training-buttons button.is-selected {
  border-color: var(--gold);
  background: rgba(185, 132, 31, 0.26);
  color: #fff7cf;
}

.gem-regem-training-feedback textarea {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 28px;
  max-height: 46px;
  resize: vertical;
  padding: 5px 7px;
  border: 1px solid rgba(255, 201, 117, 0.24);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.22);
  color: var(--text);
  font: inherit;
  font-size: 12px;
}

.gem-regem-training-export-text {
  min-height: 180px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #111;
  color: var(--text);
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  white-space: pre;
}

@media (max-width: 900px) {
  .gem-regem-training-intro {
    grid-template-columns: 1fr;
  }

  .gem-regem-training-summary {
    justify-items: start;
  }

  .gem-regem-training-pager {
    justify-content: flex-start;
  }

  .gem-regem-training-rules-head,
  .gem-regem-training-rule {
    grid-template-columns: 1fr;
  }

  .gem-regem-training-rules-actions {
    justify-content: flex-start;
  }
}

.user-profile-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.user-profile-summary > div,
.user-profile-panel {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.user-profile-summary span,
.user-profile-summary small,
.user-profile-panel p,
.user-profile-panel small,
.user-profile-note span {
  color: var(--muted);
}

.user-profile-summary span,
.user-profile-summary small {
  display: block;
  font-size: 12px;
}

.user-profile-summary strong {
  display: block;
  margin: 6px 0 4px;
  color: var(--text);
  font-size: 20px;
}

.user-profile-panel {
  display: grid;
  gap: 12px;
}

.user-profile-panel h2 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
}

.user-profile-panel p {
  margin: 4px 0 0;
  line-height: 1.45;
}

.profile-transfer-form {
  display: grid;
  gap: 10px;
}

.profile-transfer-form select,
.profile-transfer-form textarea {
  width: 100%;
}

.user-profile-master-toggle,
.user-profile-tool-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.user-profile-master-toggle {
  padding: 12px;
  border: 1px solid rgba(142, 197, 232, 0.28);
  border-radius: 8px;
  background: rgba(142, 197, 232, 0.06);
}

.user-profile-master-toggle input,
.user-profile-tool-row input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--accent);
}

.user-profile-master-toggle strong,
.user-profile-tool-row strong,
.user-profile-note strong {
  display: block;
  color: var(--text);
}

.user-profile-master-toggle small,
.user-profile-tool-row small {
  display: block;
  margin-top: 3px;
  line-height: 1.4;
}

.user-profile-tool-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 10px;
}

.user-profile-tool-row {
  min-height: 84px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.user-profile-tool-row:has(select[data-profile-tool]) {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
}

.user-profile-tool-row select[data-profile-tool] {
  width: 100%;
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid rgba(240, 184, 75, 0.28);
  border-radius: 7px;
  background: #171716;
  color: var(--text);
  font-weight: 750;
}

.user-profile-note {
  grid-template-columns: minmax(0, 1fr);
}

.guild-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.guild-summary > div {
  min-height: 74px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.guild-summary span,
.guild-table small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.guild-summary strong {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font-size: 20px;
}

.guild-actions-bar,
.guild-report-header,
.guild-report-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.guild-actions-bar span,
.guild-report-header p,
.guild-report-controls span,
.guild-report-progress {
  color: var(--muted);
  font-size: 13px;
}

.guild-report-header h2 {
  margin: 2px 0 4px;
}

.guild-report-controls {
  flex-wrap: wrap;
  justify-content: flex-start;
}

.guild-report-controls label {
  display: grid;
  gap: 5px;
  min-width: 190px;
}

.guild-report-controls input {
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #171716;
  color: var(--text);
}

.guild-report-progress {
  padding: 10px 12px;
  border: 1px solid rgba(224, 169, 74, 0.35);
  border-radius: 8px;
  background: rgba(224, 169, 74, 0.08);
  color: #f0c36a;
}

.guild-report-settings-modal {
  width: min(980px, calc(100vw - 28px));
  max-height: min(780px, calc(100vh - 32px));
}

.guild-report-settings-modal .modal-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.guild-report-settings-body {
  display: grid;
  gap: 12px;
  overflow: auto;
}

.guild-report-settings-note {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(224, 169, 74, 0.24);
  border-radius: 8px;
  background: rgba(224, 169, 74, 0.07);
  color: #f2cf86;
  font-size: 13px;
}

.guild-report-settings-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.guild-report-settings-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
}

.guild-report-settings-table th,
.guild-report-settings-table td {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  vertical-align: middle;
}

.guild-report-settings-table thead th {
  background: #101522;
  color: #f3f4f8;
  font-size: 12px;
  text-transform: uppercase;
}

.guild-report-settings-table thead small,
.guild-report-settings-table tbody small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  text-transform: none;
}

.guild-report-settings-table tbody th {
  min-width: 260px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text);
  text-align: left;
}

.guild-report-settings-table input {
  width: 86px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #11151c;
  color: var(--text);
  text-align: center;
  font-weight: 850;
}

.guild-report-settings-table input:disabled {
  opacity: 0.62;
}

.guild-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.guild-report-table-wrap {
  max-height: calc(100vh - 220px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #15181f;
}

.guild-report-table {
  width: 100%;
  min-width: 1340px;
  border-collapse: separate;
  border-spacing: 0;
  --guild-head-score-bg: linear-gradient(180deg, rgba(185, 132, 31, 0.2), rgba(58, 43, 22, 0.64)), #221a10;
  --guild-head-score-border: rgba(240, 184, 75, 0.58);
  --guild-head-runes-bg: linear-gradient(180deg, rgba(53, 168, 172, 0.22), rgba(18, 64, 72, 0.7)), #10272d;
  --guild-head-runes-sub-bg: linear-gradient(180deg, rgba(53, 168, 172, 0.16), rgba(17, 51, 58, 0.7)), #102229;
  --guild-head-runes-border: rgba(92, 214, 219, 0.52);
  --guild-head-speed-bg: linear-gradient(180deg, rgba(72, 139, 220, 0.23), rgba(19, 53, 96, 0.72)), #10213a;
  --guild-head-speed-sub-bg: linear-gradient(180deg, rgba(72, 139, 220, 0.17), rgba(18, 43, 82, 0.72)), #101d33;
  --guild-head-speed-border: rgba(117, 177, 249, 0.54);
  --guild-head-artifacts-bg: linear-gradient(180deg, rgba(145, 102, 214, 0.23), rgba(65, 43, 98, 0.72)), #221733;
  --guild-head-artifacts-sub-bg: linear-gradient(180deg, rgba(145, 102, 214, 0.17), rgba(51, 37, 78, 0.72)), #1d172d;
  --guild-head-artifacts-border: rgba(187, 147, 248, 0.52);
}

.guild-report-table th,
.guild-report-table td {
  padding: 10px 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  text-align: center;
  vertical-align: middle;
}

.guild-report-table thead th {
  position: sticky;
  top: 0;
  z-index: 8;
  height: 44px;
  padding-top: 8px;
  padding-bottom: 8px;
  background: #101522;
  color: #f3f4f8;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

.guild-report-table thead tr:nth-child(2) th {
  top: 44px;
  z-index: 9;
  height: 40px;
  background: #121826;
}

.guild-report-table thead th[rowspan="2"] {
  z-index: 10;
  height: 84px;
  background: #101522;
}

.guild-report-table thead .guild-report-group-header {
  height: 44px;
  padding-top: 8px;
  padding-bottom: 8px;
  background: #101522;
  text-align: center;
  vertical-align: middle;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08), inset 0 -3px 0 rgba(255, 255, 255, 0.02);
}

.guild-report-table thead tr th.guild-report-head-score,
.guild-report-table thead tr th.guild-report-head-runes-group,
.guild-report-table thead tr th.guild-report-head-rune-average,
.guild-report-table thead tr th.guild-report-head-baseline,
.guild-report-table thead tr th.guild-report-head-premium,
.guild-report-table thead tr th.guild-report-head-speed-group,
.guild-report-table thead tr th.guild-report-head-speed,
.guild-report-table thead tr th.guild-report-head-swift,
.guild-report-table thead tr th.guild-report-head-artifacts-group,
.guild-report-table thead tr th.guild-report-head-artifact-attribute,
.guild-report-table thead tr th.guild-report-head-artifact-type,
.guild-report-table thead tr th.guild-report-head-artifact-average {
  border-inline: 1px solid rgba(255, 255, 255, 0.045);
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -3px 0 var(--guild-head-border, rgba(255, 255, 255, 0.18));
}

.guild-report-table thead tr th.guild-report-section-start {
  border-left: 2px solid var(--guild-head-border, rgba(255, 255, 255, 0.18));
}

.guild-report-table thead tr th.guild-report-section-end {
  border-right: 2px solid var(--guild-head-border, rgba(255, 255, 255, 0.18));
}

.guild-report-table thead tr th.guild-report-head-score {
  --guild-head-border: var(--guild-head-score-border);
  background: var(--guild-head-score-bg);
  color: #f8df9f;
}

.guild-report-table thead tr th.guild-report-head-runes-group {
  --guild-head-border: var(--guild-head-runes-border);
  background: var(--guild-head-runes-bg);
  color: #d5fbff;
}

.guild-report-table thead tr th.guild-report-head-rune-average,
.guild-report-table thead tr th.guild-report-head-baseline,
.guild-report-table thead tr th.guild-report-head-premium {
  --guild-head-border: var(--guild-head-runes-border);
  background: var(--guild-head-runes-sub-bg);
}

.guild-report-table thead tr th.guild-report-head-baseline {
  color: #bfe4ff;
}

.guild-report-table thead tr th.guild-report-head-premium {
  color: #ffe29a;
}

.guild-report-table thead tr th.guild-report-head-speed-group {
  --guild-head-border: var(--guild-head-speed-border);
  background: var(--guild-head-speed-bg);
  color: #d7e9ff;
}

.guild-report-table thead tr th.guild-report-head-speed,
.guild-report-table thead tr th.guild-report-head-swift {
  --guild-head-border: var(--guild-head-speed-border);
  background: var(--guild-head-speed-sub-bg);
  color: #c8dcff;
}

.guild-report-table thead tr th.guild-report-head-artifacts-group {
  --guild-head-border: var(--guild-head-artifacts-border);
  background: var(--guild-head-artifacts-bg);
  color: #eadcff;
}

.guild-report-table thead tr th.guild-report-head-artifact-attribute,
.guild-report-table thead tr th.guild-report-head-artifact-type,
.guild-report-table thead tr th.guild-report-head-artifact-average {
  --guild-head-border: var(--guild-head-artifacts-border);
  background: var(--guild-head-artifacts-sub-bg);
}

.guild-report-table .guild-sort-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  color: inherit;
  text-align: center;
}

.guild-report-table .guild-sort-button:hover,
.guild-report-table .guild-sort-button.is-active {
  color: #ffffff;
}

.guild-report-table tbody th {
  min-width: 190px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  text-align: left;
}

.guild-report-table tbody th.is-current-user-cell {
  background: rgba(36, 255, 107, 0.2);
  color: #c8ffd4;
  box-shadow: inset 4px 0 0 #39ff7a, inset 0 0 0 1px rgba(75, 255, 126, 0.42);
}

.guild-report-table tbody tr.is-current-user th,
.guild-report-table tbody tr.is-current-user td {
  border-top: 2px solid rgba(57, 255, 122, 0.9);
  border-bottom: 2px solid rgba(57, 255, 122, 0.9);
}

.guild-report-table tbody tr.is-current-user th:first-child {
  border-left: 2px solid rgba(57, 255, 122, 0.9);
}

.guild-report-table tbody tr.is-current-user td:last-child {
  border-right: 2px solid rgba(57, 255, 122, 0.9);
}

.guild-report-table tbody th.is-current-user-cell strong {
  color: #62ff91;
  text-shadow: 0 0 12px rgba(57, 255, 122, 0.32);
}

.guild-report-table tbody tr.is-current-user:hover th.is-current-user-cell {
  background: rgba(36, 255, 107, 0.26);
}

.guild-report-table tbody th small,
.guild-report-upload-cell small {
  display: block;
  max-width: 190px;
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guild-report-table tr:last-child th,
.guild-report-table tr:last-child td {
  border-bottom: 0;
}

.guild-report-table tr.is-roster-only th {
  color: #d9d9d9;
}

.guild-report-upload-cell {
  min-width: 132px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.guild-report-upload-cell.is-empty,
.guild-report-metric.is-empty {
  background: rgba(255, 255, 255, 0.035);
}

.guild-report-metric {
  position: relative;
  min-width: 100px;
  padding-bottom: 21px;
  color: #dce7f5;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.guild-report-metric span,
.guild-report-metric small {
  display: block;
}

.guild-report-metric small {
  width: max-content;
  min-width: 42px;
  margin: 4px auto 0;
  padding: 2px 7px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(4, 7, 12, 0.58);
  color: #c9d0dc;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.25;
  text-align: center;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.72);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.18);
}

.guild-report-metric small.guild-report-delta.is-positive {
  border-color: rgba(67, 255, 127, 0.74);
  background: rgba(6, 38, 22, 0.72);
  color: #55ff8a;
  box-shadow: 0 0 0 1px rgba(67, 255, 127, 0.18), 0 0 14px rgba(67, 255, 127, 0.26);
}

.guild-report-metric small.guild-report-delta.is-negative {
  border-color: rgba(255, 72, 96, 0.78);
  background: rgba(48, 7, 13, 0.74);
  color: #ff4f68;
  box-shadow: 0 0 0 1px rgba(255, 72, 96, 0.2), 0 0 14px rgba(255, 72, 96, 0.28);
}

.guild-report-metric small.guild-report-delta.is-neutral {
  border-color: rgba(91, 184, 255, 0.72);
  background: rgba(7, 25, 46, 0.72);
  color: #78c9ff;
  box-shadow: 0 0 0 1px rgba(91, 184, 255, 0.18), 0 0 12px rgba(91, 184, 255, 0.22);
}

.guild-report-rank {
  position: absolute;
  right: 3px;
  bottom: 4px;
  padding: 1px 6px 1px 5px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(5, 8, 14, 0.34);
  color: rgba(255, 255, 255, 0.76);
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
}

.guild-report-tone-1 {
  background: rgba(116, 35, 42, 0.58);
  color: #ffd0d0;
  box-shadow: inset 0 0 0 1px rgba(242, 93, 93, 0.24);
}

.guild-report-tone-2 {
  background: rgba(190, 76, 72, 0.46);
  color: #ffe0db;
  box-shadow: inset 0 0 0 1px rgba(238, 129, 121, 0.22);
}

.guild-report-tone-3 {
  background: rgba(224, 169, 74, 0.36);
  color: #ffe6a3;
  box-shadow: inset 0 0 0 1px rgba(224, 169, 74, 0.26);
}

.guild-report-tone-4 {
  background: rgba(168, 214, 95, 0.34);
  color: #efffc0;
  box-shadow: inset 0 0 0 1px rgba(205, 242, 122, 0.24);
}

.guild-report-tone-5 {
  background: rgba(23, 124, 72, 0.62);
  color: #a8f5bd;
  box-shadow: inset 0 0 0 1px rgba(82, 221, 125, 0.34);
}

.guild-report-upload-cell.is-stale small {
  color: rgba(255, 208, 208, 0.86);
}

.guild-report-metric.is-good {
  background: rgba(74, 222, 128, 0.13);
  color: #9ff0b9;
  box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.2);
}

.guild-report-metric.is-mid {
  background: rgba(212, 176, 120, 0.16);
  background: color-mix(in srgb, #d4b078 24%, transparent);
  color: #f8d486;
  box-shadow: inset 0 0 0 1px rgba(212, 176, 120, 0.24);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #d4b078 42%, transparent);
}

.guild-report-metric.is-low {
  background: rgba(232, 216, 107, 0.14);
  color: #f5e58a;
  box-shadow: inset 0 0 0 1px rgba(232, 216, 107, 0.22);
}

.guild-report-metric.is-bad {
  background: rgba(238, 129, 121, 0.14);
  color: #ffafa8;
  box-shadow: inset 0 0 0 1px rgba(238, 129, 121, 0.24);
}

.guild-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 920px;
}

.guild-members-table {
  min-width: 1180px;
  table-layout: fixed;
}

.guild-members-table .guild-col-member { width: 12%; }
.guild-members-table .guild-col-role { width: 92px; }
.guild-members-table .guild-col-status { width: 92px; }
.guild-members-table .guild-col-sharing { width: 96px; }
.guild-members-table .guild-col-json { width: 188px; }
.guild-members-table .guild-col-account { width: 190px; }
.guild-members-table .guild-col-rights { width: 190px; }
.guild-members-table .guild-col-stats { width: 92px; }
.guild-members-table .guild-col-actions { width: 248px; }

.guild-table-hint {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

.guild-table th,
.guild-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.guild-table th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  text-transform: uppercase;
}

.guild-sort-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.guild-sort-label {
  line-height: 1.2;
}

.guild-sort-indicator {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 22px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
  opacity: 0.9;
}

.guild-sort-indicator::before,
.guild-sort-indicator::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 6px;
  height: 6px;
  border-right: 2px solid rgba(255, 255, 255, 0.52);
  border-bottom: 2px solid rgba(255, 255, 255, 0.52);
  transform: translateX(-50%);
}

.guild-sort-indicator::before {
  top: 4px;
  transform: translateX(-50%) rotate(225deg);
}

.guild-sort-indicator::after {
  bottom: 4px;
  transform: translateX(-50%) rotate(45deg);
}

.guild-sort-button:hover .guild-sort-indicator {
  border-color: rgba(240, 195, 106, 0.42);
  background: rgba(240, 195, 106, 0.08);
  opacity: 1;
}

.guild-sort-button.is-active .guild-sort-indicator {
  border-color: rgba(240, 195, 106, 0.72);
  background: rgba(240, 195, 106, 0.16);
  box-shadow: inset 0 0 0 1px rgba(240, 195, 106, 0.08), 0 0 12px rgba(240, 195, 106, 0.12);
  opacity: 1;
}

.guild-sort-indicator.is-asc::before {
  border-right-color: #f0c36a;
  border-bottom-color: #f0c36a;
}

.guild-sort-indicator.is-asc::after {
  border-right-color: rgba(255, 255, 255, 0.18);
  border-bottom-color: rgba(255, 255, 255, 0.18);
}

.guild-sort-indicator.is-desc::before {
  border-right-color: rgba(255, 255, 255, 0.18);
  border-bottom-color: rgba(255, 255, 255, 0.18);
}

.guild-sort-indicator.is-desc::after {
  border-right-color: #f0c36a;
  border-bottom-color: #f0c36a;
}

.guild-sort-button:hover,
.guild-sort-button.is-active {
  color: var(--text);
}

.admin-guild-row {
  cursor: pointer;
}

.admin-guild-row:hover td {
  background: rgba(224, 169, 74, 0.05);
}

.admin-guild-row.is-selected td {
  background: rgba(224, 169, 74, 0.14);
}

.admin-guild-row.is-selected td:first-child {
  box-shadow: inset 3px 0 0 var(--gold);
}

.admin-guild-name {
  display: block;
  color: var(--text);
  font-size: 15px;
}

.guild-table tr:last-child td {
  border-bottom: 0;
}

.guild-table tr.is-pending td {
  background: rgba(224, 169, 74, 0.08);
}

.guild-table tr.is-pending-seen td {
  background: rgba(154, 162, 172, 0.075);
}

.guild-table tr.is-pending-seen:hover td {
  background: rgba(154, 162, 172, 0.11);
}

.guild-role,
.guild-share {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-left: 8px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
}

.guild-role {
  margin-left: 0;
  color: var(--text);
}

.guild-share.is-on {
  border-color: rgba(61, 187, 85, 0.5);
  color: #7ee28c;
}

.guild-share.is-pending {
  border-color: rgba(224, 169, 74, 0.55);
  color: #f0c36a;
}

.guild-share.is-pending.is-seen {
  border-color: rgba(180, 187, 198, 0.32);
  background: rgba(180, 187, 198, 0.08);
  color: #b9c0ca;
}

.guild-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.guild-action-menu {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  width: 100%;
  min-width: 0;
  max-width: none;
}

.guild-action-select {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid rgba(162, 132, 65, 0.42);
  border-radius: 6px;
  background: #171716;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.guild-row-actions button {
  min-width: 30px;
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid rgba(61, 187, 85, 0.45);
  border-radius: 6px;
  background: rgba(61, 187, 85, 0.1);
  color: #9ff0aa;
  font-weight: 750;
  font-size: 12px;
  cursor: pointer;
}

.guild-row-actions .guild-action-apply {
  min-width: 0;
  width: 38px;
  padding: 0 7px;
  text-transform: uppercase;
}

.guild-row-actions .guild-icon-action {
  width: 30px;
  padding: 0;
  font-size: 15px;
  line-height: 1;
}

.guild-row-actions .guild-json-action {
  width: auto;
  min-width: 44px;
  padding: 0 7px;
  font-size: 11px;
}

.guild-application-note {
  max-width: 260px;
  margin-top: 4px;
  white-space: normal;
}

.guild-application-note.is-warning {
  color: #f0c36a;
}

.guild-row-actions button.guild-danger {
  border-color: rgba(242, 93, 93, 0.48);
  background: rgba(242, 93, 93, 0.1);
  color: #ff9b9b;
}

.guild-row-actions button.guild-success {
  border-color: rgba(61, 187, 85, 0.5);
  background: rgba(61, 187, 85, 0.14);
  color: #7ee28c;
}

.guild-row-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.guild-rights-select {
  width: 100%;
  min-width: 150px;
  min-height: 32px;
  padding: 0 8px;
  border-radius: 7px;
  background: #171716;
  color: var(--text);
}

.guild-stats-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 82px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.guild-stats-toggle input {
  accent-color: var(--blue);
}

.guild-stats-toggle input:not(:checked) + span {
  color: #7ee28c;
}

.guild-stats-toggle input:checked + span {
  color: #ffb3b3;
}

.app-shell {
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 14px 9px 22px;
}

.app-shell.artifact-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 10px 6px 22px;
}

.artifact-shell > .topbar {
  padding-right: 6px;
  padding-left: 6px;
}

.artifact-shell > .topbar .top-actions button {
  min-height: 38px;
  padding: 8px 13px;
  font-size: 14px;
}

.artifact-shell .artifact-analysis {
  width: 100%;
  margin: 0;
  padding-right: 0;
  padding-left: 0;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 2px 0 14px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 210px;
  flex: 0 0 auto;
}

.brand-home-button {
  padding: 5px 8px 5px 5px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.brand-home-button:hover {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.035);
}

.brand-home-button img {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  object-fit: contain;
}

.brand h1 {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 750;
  white-space: nowrap;
}

.brand p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.brand p.source-replaced-by-select {
  display: none;
}

.brand-account-control {
  display: grid;
  gap: 4px;
  width: 210px;
  min-width: 180px;
  flex: 0 0 auto;
}

.brand-account-control span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
}

.brand-account-control select {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #171716;
  color: var(--text);
}

.brand-account-control select:disabled {
  opacity: 0.65;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  justify-content: flex-end;
  flex: 1 0 auto;
}

#optimizer-view > .topbar {
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}

#optimizer-view > .topbar .top-actions {
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: 6px;
  justify-content: flex-start;
}

#optimizer-view > .topbar .ghost-button,
#optimizer-view > .topbar .help-button {
  min-height: 32px;
  padding: 0 9px;
  font-size: 12px;
}

.optimizer-entry {
  display: grid;
  gap: 14px;
}

.optimizer-entry-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(34, 34, 32, 0.94), rgba(24, 24, 23, 0.96));
}

.optimizer-entry-kicker {
  margin: 0 0 4px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.optimizer-entry-hero h2 {
  margin: 0 0 6px;
  color: var(--text);
  font-size: 25px;
  line-height: 1.1;
}

.optimizer-entry-hero p {
  max-width: 780px;
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.optimizer-entry-status {
  min-width: 128px;
  padding: 9px 12px;
  border: 1px solid rgba(240, 184, 75, 0.4);
  border-radius: 8px;
  background: rgba(59, 39, 23, 0.72);
  text-align: right;
}

.optimizer-entry-status strong {
  display: block;
  color: var(--gold);
  font-size: 24px;
  line-height: 1;
}

.optimizer-entry-status span {
  color: var(--muted);
  font-size: 12px;
}

.optimizer-entry.is-loading .optimizer-entry-status {
  border-color: rgba(240, 184, 75, 0.62);
  background: rgba(74, 49, 25, 0.82);
}

.optimizer-view-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.optimizer-view-card {
  min-width: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  display: grid;
  grid-template-rows: 190px auto;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
}

.optimizer-view-card:hover {
  border-color: var(--gold);
  filter: brightness(1.04);
}

.optimizer-view-card:disabled:hover {
  border-color: var(--line);
  filter: none;
}

.optimizer-view-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
}

.optimizer-view-card span {
  display: grid;
  gap: 4px;
  padding: 12px;
}

.optimizer-view-card strong {
  color: var(--gold);
  font-size: 18px;
}

.optimizer-view-card small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.optimizer-guide-panel {
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(32, 32, 31, 0.78);
}

.optimizer-guide-panel h3 {
  margin: 0 0 12px;
  color: var(--gold);
  font-size: 19px;
}

.optimizer-guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.optimizer-guide-grid article {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(18, 18, 17, 0.58);
}

.optimizer-guide-grid h4 {
  margin: 0 0 6px;
  color: #dfc880;
  font-size: 14px;
}

.optimizer-guide-grid p,
.optimizer-guide-tip {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.optimizer-guide-grid strong {
  color: var(--text);
}

.optimizer-guide-tip {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  color: var(--text);
}

.file-button,
.ghost-button,
.help-button,
.filter-button,
.icon-button {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

.file-button {
  background: linear-gradient(180deg, #377bea, #2d60be);
  border-color: #5f95f1;
  color: #fff;
  font-weight: 700;
}

.help-button {
  background: linear-gradient(180deg, #f0b84b, #b77810);
  border-color: #f6c86b;
  color: #201609;
  font-weight: 850;
}

.help-button:hover {
  border-color: #ffe0a0;
  filter: brightness(1.05);
}

.file-button input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.ghost-button:hover,
.filter-button:hover,
.stat-pill:hover {
  border-color: #69645d;
}

.demo-button {
  gap: 6px;
}

.inline-help {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  opacity: 0.85;
}

.inline-help:hover,
.inline-help:focus {
  opacity: 1;
}

.drop-zone {
  border: 1px dashed var(--line);
  border-radius: 8px;
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px;
  background: #1b1b1a;
  margin-bottom: 14px;
}

.drop-zone.is-drag {
  border-color: var(--focus);
  box-shadow: inset 0 0 0 1px var(--focus);
}

.drop-zone strong {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
}

.drop-zone span,
.status-line {
  color: var(--muted);
}

.status-line {
  text-align: right;
  min-width: 240px;
}

.status-line.is-error {
  color: var(--red);
}

.toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  margin: 2px 0 14px;
}

select:focus,
button:focus-visible,
.file-button:focus-within {
  border-color: var(--focus);
  box-shadow: 0 0 0 2px rgba(63, 126, 232, 0.25);
}

.stage-control {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}

.stage-control--topbar {
  min-height: 32px;
  padding-left: 6px;
  border-left: 1px solid var(--line-soft);
  white-space: nowrap;
}

.stage-control--topbar label {
  font-size: 11px;
}

#optimizer-view .stage-control--topbar select {
  height: 32px;
  padding-right: 24px;
}

select {
  height: 34px;
  padding: 0 30px 0 10px;
  border-radius: 6px;
}

.filters-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  padding: 12px;
  margin: -12px 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.filters-panel label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  min-width: 128px;
}

.filters-panel .checkbox-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  color: var(--text);
}

.counter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 11px;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(32, 32, 31, 0.78);
}

.filter-menu {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 8px;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(32, 32, 31, 0.58);
}

.filter-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-right: 8px;
  border-right: 1px solid var(--line-soft);
}

.filter-group:last-of-type {
  border-right: 0;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1px;
  min-height: 31px;
  padding: 0 11px;
  border-radius: 999px;
  color: var(--muted);
  background: #1e1e1d;
  line-height: 1.05;
  white-space: nowrap;
}

.filter-chip-combo {
  display: inline-flex;
  align-items: center;
}

.filter-chip-combo .filter-chip {
  position: relative;
}

.filter-chip--effmax,
.filter-chip-combo .filter-chip:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.filter-chip--icon {
  width: 32px;
  min-width: 32px;
  padding: 0;
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  font-size: 14px;
  line-height: 1;
}

.filter-chip.is-active {
  color: var(--text);
  border-color: var(--focus);
  box-shadow: 0 0 0 2px rgba(63, 126, 232, 0.18);
}

.filter-chip--clear {
  margin-left: auto;
  border-color: rgba(224, 143, 153, 0.48);
  color: #dcb0b5;
}

.counter-reset-button {
  min-height: 30px;
  padding: 0 10px;
  flex-direction: row;
  gap: 4px;
  white-space: nowrap;
}

.counter-reset-button + .result-count {
  margin-left: 0;
}

.counter-restore-button {
  width: 30px;
  height: 30px;
  min-height: 30px;
  flex: 0 0 auto;
  font-size: 15px;
}

.counter-restore-button:disabled {
  opacity: 0.42;
  cursor: default;
}

.active-filter-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: -2px 0 8px;
  padding: 7px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(25, 25, 24, 0.58);
}

.active-filter-label {
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.active-filter-chip {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  max-width: 260px;
  padding: 0 8px;
  border: 1px solid rgba(126, 119, 109, 0.48);
  border-radius: 999px;
  color: #d9d2c9;
  background: #1e1e1d;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.filter-popover {
  position: absolute;
  z-index: 12;
  min-width: 230px;
  max-width: min(460px, calc(100vw - 20px));
  max-height: 360px;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #242423;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.46);
}

.filter-popover[data-filter-key="setSlot"],
.filter-popover[data-filter-key="craftStats"] {
  width: min(680px, calc(100vw - 20px));
  max-width: min(680px, calc(100vw - 20px));
}

.filter-popover[data-filter-key="columns"] {
  width: min(560px, calc(100vw - 20px));
  max-width: min(560px, calc(100vw - 20px));
}

.filter-popover[data-filter-key="craftsettings"],
.filter-popover[data-filter-key="effsettings"],
.filter-popover[data-filter-key="uppresetsettings"] {
  width: min(520px, calc(100vw - 20px));
  max-width: min(520px, calc(100vw - 20px));
}

.filter-popover[hidden] {
  display: none;
}

.filter-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
}

.filter-popover-title {
  margin: 0;
  color: #d8d1c8;
  font-weight: 800;
}

.filter-popover-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line-soft);
  font-weight: 800;
  line-height: 0;
}

.filter-popover-close:hover {
  color: var(--text);
  border-color: var(--focus);
  background: rgba(255, 255, 255, 0.06);
}

.filter-options {
  display: grid;
  gap: 6px;
}

.filter-options--settings-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.filter-options--columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 10px;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 26px;
  color: var(--text);
}

.filter-option input {
  accent-color: var(--focus);
}

.filter-section-grid {
  display: grid;
  gap: 8px;
}

.filter-section-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.filter-popover[data-filter-key="setSlot"] .filter-section-grid--two {
  grid-template-columns: minmax(350px, 2.1fr) minmax(150px, 0.8fr);
}

.filter-popover[data-filter-key="setSlot"] .grouped-filter-section:first-child .filter-options--compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 8px;
}

.filter-popover[data-filter-key="craftStats"] .filter-options--compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 8px;
}

.filter-popover[data-filter-key="setSlot"] .filter-option {
  min-height: 24px;
  font-size: 12px;
}

.filter-popover[data-filter-key="craftStats"] .filter-option {
  min-height: 24px;
  font-size: 12px;
}

.filter-popover[data-filter-key="columns"] .filter-option {
  min-height: 24px;
  font-size: 12px;
}

.grouped-filter-section {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(27, 27, 26, 0.7);
}

.filter-section-grid:not(.filter-section-grid--two) .grouped-filter-section + .grouped-filter-section {
  margin-top: 8px;
}

.grouped-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.grouped-filter-title,
.ranking-filter-title {
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}

.filter-mini-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.mini-action-button {
  min-height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line-soft);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.mini-action-button:hover {
  color: var(--text);
  border-color: var(--focus);
}

.score-filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.score-filter-grid label {
  display: grid;
  gap: 5px;
  color: var(--muted);
}

.score-filter-grid input {
  height: 32px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #1b1b1a;
  color: var(--text);
  padding: 0 9px;
}

.efficiency-range-grid {
  display: grid;
  gap: 8px;
}

.efficiency-range-row {
  display: grid;
  grid-template-columns: minmax(92px, 1fr) minmax(72px, 0.85fr) minmax(72px, 0.85fr);
  align-items: end;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(27, 27, 26, 0.7);
}

.efficiency-range-label {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.efficiency-range-label strong {
  color: var(--text);
  font-size: 12px;
}

.efficiency-range-label span {
  color: var(--muted-2);
  font-size: 11px;
}

.efficiency-range-row label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
}

.efficiency-range-row input {
  height: 32px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #1b1b1a;
  color: var(--text);
  padding: 0 8px;
}

.ranking-filter-grid {
  display: grid;
  gap: 8px;
}

.ranking-filter-section {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(27, 27, 26, 0.7);
}

.ranking-filter-section label {
  display: grid;
  gap: 5px;
  color: var(--muted);
}

.ranking-filter-section input {
  height: 32px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #1b1b1a;
  color: var(--text);
  padding: 0 9px;
}

.filter-popover-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: nowrap;
}

.filter-popover-actions .ghost-button {
  min-height: 30px;
  padding: 0 10px;
  font-size: 12px;
}

.filter-done-button {
  margin-left: 0;
}

.filter-popover-note {
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.stat-pill {
  display: inline-flex;
  align-items: center;
  height: 29px;
  padding: 0 11px;
  border-radius: 999px;
  color: var(--muted);
  background: #1e1e1d;
}

.stat-pill-combo {
  display: inline-flex;
  align-items: center;
}

.stat-pill--combo-main {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.stat-pill--icon {
  width: 31px;
  min-width: 31px;
  padding: 0;
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}

.stat-pill strong {
  color: var(--text);
  margin-left: 4px;
}

.stat-pill.is-active {
  border-color: var(--focus);
  color: var(--text);
  box-shadow: 0 0 0 2px rgba(63, 126, 232, 0.18);
}

.stat-pill--static {
  border-color: transparent;
  background: transparent;
  color: #c8c0b6;
}

.stat-pill--all {
  border-color: rgba(200, 192, 182, 0.42);
  background: #22211f;
  color: #e5ddd3;
}

.stat-pill--all:hover {
  border-color: var(--focus);
  color: var(--text);
}

.stat-pill--premium {
  border-color: rgba(240, 184, 75, 0.62);
  color: #f1d18a;
  background: #2a2418;
}

.stat-pill--premium.is-active {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(240, 184, 75, 0.2), 0 0 14px rgba(240, 184, 75, 0.18);
}

.stat-pill--preset {
  border-color: rgba(196, 142, 255, 0.56);
  color: #dfc7ff;
  background: #251d31;
}

.stat-pill--preset.is-active {
  border-color: #b984ff;
  box-shadow: 0 0 0 2px rgba(185, 132, 255, 0.18), 0 0 14px rgba(185, 132, 255, 0.14);
}

.stat-pill--objective {
  border-color: rgba(174, 198, 10, 0.6);
  color: #d8ea6a;
  background: #252a14;
}

.stat-pill--objective.is-active {
  border-color: #aec60a;
  box-shadow: 0 0 0 2px rgba(174, 198, 10, 0.18), 0 0 14px rgba(174, 198, 10, 0.14);
}

.stat-pill--speed {
  border-color: rgba(124, 204, 204, 0.5);
  color: #b6e1e1;
  background: #1a2929;
}

.stat-pill--speed.is-active {
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px rgba(124, 204, 204, 0.18), 0 0 14px rgba(124, 204, 204, 0.14);
}

.score-filter-grid--single {
  grid-template-columns: 1fr;
}

.result-count {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  margin-left: auto;
  color: var(--muted);
}

.table-shell {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel);
}

.table-top-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  height: 14px;
  border-bottom: 1px solid var(--line-soft);
  background: #1b1b1a;
}

.table-top-scroll-inner {
  width: var(--table-width, 1120px);
  height: 1px;
}

.table-scroll {
  overflow: auto;
  max-height: calc(100vh - 252px);
  scrollbar-gutter: stable;
  overflow-anchor: none;
  will-change: scroll-position;
}

table {
  width: var(--table-width, 1120px);
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

th[data-col="slot"], td[data-col="slot"] { width: 34px; }
th[data-col="markersCol"], td[data-col="markersCol"] { width: 66px; }
th[data-col="topLegend"], td[data-col="topLegend"] { width: 50px; }
th[data-col="rankSlot"], td[data-col="rankSlot"] { width: 78px; }
th[data-col="reappPriority"], td[data-col="reappPriority"] { width: 82px; }
th[data-col="set"], td[data-col="set"] { width: 76px; }
th[data-col="main"], td[data-col="main"] { width: 82px; }
th[data-col="level"], td[data-col="level"] { width: 34px; }
th[data-col="innate"], td[data-col="innate"] { width: 72px; }
th[data-col="sub1"], td[data-col="sub1"],
th[data-col="sub2"], td[data-col="sub2"],
th[data-col="sub3"], td[data-col="sub3"],
th[data-col="sub4"], td[data-col="sub4"] { width: 176px; }
th[data-col="efficiency"], td[data-col="efficiency"],
th[data-col="effMax"], td[data-col="effMax"],
th[data-col="effMaxHero"], td[data-col="effMaxHero"],
th[data-col="effMaxLegend"], td[data-col="effMaxLegend"],
th[data-col="gain"], td[data-col="gain"] { width: 68px; }
th[data-col="pureEfficiency"], td[data-col="pureEfficiency"] { width: 74px; }
th[data-col="score"], td[data-col="score"] { width: 50px; }
td[data-col="score"] { color: var(--gold); }
th[data-col="verdict"], td[data-col="verdict"] { width: 138px; }
th[data-col="location"], td[data-col="location"] { width: 96px; }
th[data-col="actions"], td[data-col="actions"] { width: 76px; }

.reapp-priority-cell {
  white-space: nowrap;
}

.reapp-priority-rank {
  color: #ff8b8b;
  font-weight: 800;
}

.reapp-priority-score {
  margin-left: 5px;
  color: var(--muted);
  font-size: 0.75rem;
}

thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #2a2927;
  color: #c8c0b6;
  text-align: center;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  height: 32px;
  padding: 0 5px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

thead th[data-col="location"] {
  text-align: left;
}

thead th[data-col="location"] .th-inner {
  justify-content: flex-start;
}

thead th[data-sort] {
  cursor: pointer;
}

.th-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 32px;
  line-height: 1;
}

.sort-caret {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  flex: 0 0 auto;
}

thead th.sort-asc .sort-caret {
  border-bottom: 5px solid var(--gold);
}

thead th.sort-desc .sort-caret {
  border-top: 5px solid var(--gold);
}

tbody tr {
  background: #20201f;
}

tbody tr:nth-child(odd) {
  background: #242423;
}

tbody tr:hover {
  background: #2c2c2a;
}

tbody tr.is-highlighted,
tbody tr.is-highlighted:nth-child(odd) {
  background: #343128;
  box-shadow: inset 3px 0 0 var(--gold);
}

tbody tr.is-highlighted:hover {
  background: #3b372c;
}

tbody tr.virtual-spacer,
tbody tr.virtual-spacer:nth-child(odd),
tbody tr.virtual-spacer:hover {
  background: transparent;
  box-shadow: none;
}

tbody tr.virtual-spacer td {
  padding: 0;
  border: 0;
  line-height: 0;
}

td {
  padding: 6px 5px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  text-align: center;
}

.rune-optimizer-blazor-page .table-scroll > table tbody tr.rune-row--selected > td {
  background: #32291e !important;
  box-shadow: inset 0 1px rgba(224, 169, 74, 0.24), inset 0 -1px rgba(224, 169, 74, 0.18);
}

.rune-optimizer-blazor-page .table-scroll > table tbody tr.rune-row--selected > td:first-child {
  box-shadow: inset 3px 0 0 var(--gold), inset 0 1px rgba(224, 169, 74, 0.24), inset 0 -1px rgba(224, 169, 74, 0.18);
}

th[data-col="actions"],
td[data-col="actions"] {
  position: sticky;
  right: 0;
  z-index: 1;
  background: inherit;
  box-shadow: -1px 0 0 var(--line-soft);
}

thead th[data-col="actions"] {
  z-index: 3;
  background: #2a2927;
}

td[data-col="location"] {
  display: table-cell;
  text-align: left;
}

td[data-col="set"],
td[data-col="main"] {
  text-align: center;
}

th[data-col="set"] .th-inner,
th[data-col="main"] .th-inner {
  display: flex;
  width: 100%;
  justify-content: center;
}

td[data-col="sub1"],
td[data-col="sub2"],
td[data-col="sub3"],
td[data-col="sub4"] {
  overflow: visible;
  text-overflow: clip;
}

td.cell-gem-target .sub {
  padding: 3px 5px;
  margin: -3px -5px;
  border: 1px solid #ffd369;
  border-radius: 4px;
}

td.cell-gem-target-missing .sub {
  border-color: #ff6b6b;
  box-shadow: 0 0 0 1px rgba(255, 107, 107, 0.22);
}

td.cell-regem-target .sub {
  border-color: #d7b5ff;
}

td.cell-regem-target.cell-gem-target-missing .sub {
  border-color: #ff6b6b;
  box-shadow: 0 0 0 1px rgba(255, 107, 107, 0.22);
}

td.cell-flat-main-warning {
  box-shadow: inset 0 0 0 1px #e06464;
}

.sub.is-rarity-strong {
  padding: 3px 5px;
  margin: -3px -5px;
  border-radius: 5px;
}

.sub.is-rarity-strong .sub-rank-trigger,
.sub.is-rarity-strong .sub-value {
  color: #ffe3a3;
  font-weight: 900;
  text-shadow: 0 1px 0 #000;
}

.sub.is-rarity-combo {
  padding: 3px 5px;
  margin: -3px -5px;
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(91, 206, 250, 0.13), rgba(91, 206, 250, 0.03));
}

.sub.is-rarity-strong.is-rarity-combo {
  background: linear-gradient(90deg, rgba(91, 206, 250, 0.15), rgba(91, 206, 250, 0.04));
}

.empty-row td {
  color: var(--muted);
  text-align: center;
  padding: 34px 10px;
}

.num,
.score {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.slot-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--gold-2);
  color: var(--text);
  background: #1d1d1c;
  box-shadow: none;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.slot-compare-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.slot-compare-trigger:hover .slot-grade {
  transform: translateY(-1px);
  filter: brightness(1.12);
}

.rank-slot-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 62px;
  min-height: 26px;
  padding: 0 7px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: #20201f;
  color: var(--text);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.rank-slot-trigger:hover {
  border-color: var(--blue);
  background: rgba(142, 197, 232, 0.08);
}

.rank-slot-gain {
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 0 8px currentColor;
}

.slot-grade.is-rare {
  border-color: var(--blue);
}

.slot-grade.is-hero {
  border-color: var(--purple);
}

.slot-grade.is-legend {
  border-color: var(--gold);
}

.slot-grade.is-classic {
  opacity: 0.78;
  background: #20201f;
}

.slot-grade.is-classic.is-rare {
  border-color: rgba(142, 197, 232, 0.72);
}

.slot-grade.is-classic.is-hero {
  border-color: rgba(211, 175, 233, 0.72);
}

.slot-grade.is-classic.is-legend {
  border-color: rgba(240, 184, 75, 0.72);
}

.slot-grade.is-ancient {
  border-width: 2px;
  opacity: 1;
  background: rgba(24, 24, 23, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.slot-grade.is-ancient.is-rare {
  box-shadow: 0 0 0 2px rgba(128, 183, 212, 0.22), 0 0 10px rgba(128, 183, 212, 0.36), inset 0 0 0 1px rgba(128, 183, 212, 0.2);
}

.slot-grade.is-ancient.is-hero {
  box-shadow: 0 0 0 2px rgba(169, 141, 204, 0.24), 0 0 10px rgba(169, 141, 204, 0.38), inset 0 0 0 1px rgba(169, 141, 204, 0.2);
}

.slot-grade.is-ancient.is-legend {
  box-shadow: 0 0 0 2px rgba(240, 184, 75, 0.28), 0 0 11px rgba(240, 184, 75, 0.42), inset 0 0 0 1px rgba(240, 184, 75, 0.22);
}

.muted {
  color: var(--muted-2);
}

.ancient-mark {
  position: relative;
  display: inline-block;
  width: 12px;
  height: 11px;
  flex: 0 0 12px;
}

.ancient-mark::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 1px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 9px solid var(--gold);
}

.ancient-mark::after {
  content: "!";
  position: absolute;
  left: 0;
  top: 2px;
  width: 12px;
  color: #3a290d;
  font-size: 8px;
  line-height: 10px;
  font-weight: 900;
  text-align: center;
}

.sub {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: none;
  color: var(--text);
}

.sub.is-grindable {
  color: var(--gold);
}

.sub.is-fixed {
  color: #fff;
}

.sub.is-gem,
.sub.is-grind {
  color: var(--gold);
}

.grind-bonus {
  margin-left: -4px;
  color: var(--muted);
}

.grind-quality-magic {
  color: var(--green);
}

.grind-quality-rare {
  color: var(--blue);
}

.grind-quality-hero {
  color: var(--purple);
}

.grind-quality-legend {
  color: var(--gold);
}

.grind-stock-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0;
  width: auto;
  min-height: 0;
  margin-left: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  line-height: 1;
  vertical-align: -3px;
}

.craft-stock-icon {
  display: inline-block;
  position: relative;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  object-fit: contain;
  vertical-align: middle;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.42));
}

.craft-stock-icon + .craft-stock-icon {
  margin-left: -6px;
}

.craft-stock-icon:nth-child(1) {
  z-index: 1;
}

.craft-stock-icon:nth-child(2) {
  z-index: 2;
}

.craft-stock-icon:nth-child(3) {
  z-index: 3;
}

.grind-bonus + .deck-usage-trigger,
.grind-bonus + .gemmed-icon,
.deck-usage-trigger + .gemmed-icon {
  margin-left: -4px;
}

.gemmed-icon + .grind-stock-trigger,
.deck-usage-trigger + .grind-stock-trigger,
.grind-stock-trigger + .grind-stock-trigger {
  margin-left: -6px;
}

.sub > .grind-stock-trigger[data-grind-stock-trigger]:last-child {
  margin-right: -3px;
}

.grind-stock-popover {
  position: fixed;
  /* This dialog must cover the sticky public header as well as the rune grid. */
  z-index: 5000;
  width: max-content;
  min-width: 0;
  max-width: calc(100vw - 16px);
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #242423;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.48);
  overflow: auto;
  overscroll-behavior: contain;
}

.grind-stock-popover[hidden] {
  display: none;
}

.grind-stock-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}

.grind-stock-title {
  max-width: 260px;
  color: #d8d1c8;
  font-weight: 800;
  line-height: 1.25;
  white-space: normal;
}

.gem-advice-title-label {
  color: var(--gold);
}

.gem-advice-title-stat {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  border: 1px solid rgba(114, 213, 138, .65);
  border-radius: 999px;
  color: #c0ffd1;
  background: rgba(38, 76, 47, .5);
  box-shadow: 0 0 10px rgba(114, 213, 138, .18);
  font-weight: 900;
}

.grind-stock-close {
  width: 24px;
  min-width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #1b1b1a;
  color: var(--muted);
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.grind-stock-close:hover {
  border-color: #ff8d8d;
  color: #ff8d8d;
}

.grind-stock-list {
  display: grid;
  gap: 4px;
}

.grind-stock-table {
  display: grid;
  gap: 4px;
}

.stock-choice-head {
  display: grid;
  align-items: center;
  gap: 8px;
  padding: 0 6px 3px;
  color: var(--muted-2);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
}

.stock-choice-head span,
.stock-choice-row > span,
.stock-choice-row > strong {
  justify-self: center;
}

.grind-stock-table.is-gem .stock-choice-head span:first-child,
.grind-stock-table.is-gem .stock-choice-row > :first-child {
  justify-self: start;
  text-align: left;
}

.grind-stock-table.is-grind .stock-choice-head span:first-child,
.grind-stock-table.is-grind .stock-choice-row > :first-child {
  justify-self: start;
  text-align: left;
}

.grind-stock-table.is-grind .stock-choice-head,
.grind-stock-table.is-grind .stock-choice-row {
  grid-template-columns: 52px 40px 58px 44px 58px 48px;
}

.grind-stock-table.is-gem .stock-choice-head,
.grind-stock-table.is-gem .stock-choice-row {
  grid-template-columns: 46px 58px 44px 58px 48px;
}

.grind-stock-row {
  display: grid;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  color: var(--text);
}

.grind-stock-row.stock-choice-row {
  gap: 8px;
  min-height: 31px;
  padding: 5px 6px;
  border: 1px solid rgba(120, 113, 104, 0.42);
  border-radius: 7px;
  background: rgba(28, 28, 27, 0.86);
}

.grind-stock-row.is-disabled {
  opacity: 0.45;
}

.gem-stock-row.is-advised-gem {
  border-color: #72d58a;
  box-shadow: 0 0 0 1px rgba(114, 213, 138, 0.28);
  background: rgba(38, 76, 47, 0.34);
}

.gem-advice-label {
  color: #72d58a;
}

.gem-stock-row {
  align-items: center;
  gap: 8px;
}

.gem-stock-text-rare {
  color: var(--blue);
}

.gem-stock-text-hero {
  color: var(--purple);
}

.gem-stock-text-legend {
  color: var(--gold);
}

.grind-quality-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 40px;
  white-space: nowrap;
}

.grind-quality-short {
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.gem-stock-text.is-immemorial {
  text-shadow: 0 0 6px currentColor, 0 0 13px currentColor;
}

.stock-choice-main,
.stock-choice-potential,
.stock-choice-gain,
.stock-choice-eff,
.stock-choice-count {
  white-space: nowrap;
}

.stock-choice-main {
  color: var(--text);
  font-size: 12px;
}

.stock-choice-eff {
  color: var(--muted);
  font-size: 11px;
}

.stock-choice-potential,
.stock-choice-gain {
  color: var(--text);
  font-size: 12px;
}

.stock-adjust-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  white-space: nowrap;
}

.stock-count-input {
  width: 42px;
  min-height: 24px;
  padding: 3px 5px;
  border: 1px solid #5b5550;
  border-radius: 6px;
  background: #191817;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  text-align: center;
}

.stock-count-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(142, 197, 232, 0.12);
}

.stock-apply-button {
  min-height: 24px;
  padding: 3px 7px;
  border: 1px solid #5b5550;
  border-radius: 6px;
  background: #22201e;
  color: var(--gold);
  font-size: 11px;
  font-weight: 850;
}

.stock-apply-button:hover {
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.06);
}

.stock-popover-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 8px 6px 2px;
}

.stock-popover-hint {
  color: var(--muted-2);
  font-size: 11px;
}

.stock-apply-button--all {
  min-width: 96px;
}

.deck-usage-trigger {
  min-height: 0;
  width: 18px;
  height: 18px;
  margin-left: 1px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  line-height: 1;
  vertical-align: -2px;
}

.deck-usage-icon {
  width: 15px;
  height: 15px;
  display: block;
  background: currentColor;
  clip-path: polygon(50% 6%, 96% 90%, 4% 90%);
  position: relative;
}

.deck-usage-icon::before,
.deck-usage-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 2px;
  background: var(--bg);
}

.deck-usage-icon::before {
  top: 73%;
  width: 20%;
  height: 13%;
}

.deck-usage-icon::after {
  top: 34%;
  width: 20%;
  height: 34%;
}

.deck-usage-trigger.is-pvp,
.deck-usage-row.is-pvp {
  color: var(--red);
}

.deck-usage-trigger.is-rta,
.deck-usage-row.is-rta {
  color: var(--blue);
}

.deck-usage-trigger.is-pve,
.deck-usage-row.is-pve {
  color: var(--green);
}

.deck-usage-trigger:hover {
  background: rgba(255, 255, 255, 0.08);
}

.deck-usage-popover {
  position: fixed;
  z-index: 34;
  width: min(420px, calc(100vw - 16px));
  max-height: min(520px, calc(100vh - 24px));
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #242423;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.5);
  overflow: auto;
}

.deck-usage-popover[hidden] {
  display: none;
}

.deck-usage-list {
  display: grid;
  gap: 6px;
}

.deck-usage-row {
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: #1b1b1a;
}

.deck-usage-row.is-pvp {
  border-color: rgba(224, 143, 153, 0.55);
}

.deck-usage-row.is-rta {
  border-color: rgba(142, 197, 232, 0.55);
}

.deck-usage-row.is-pve {
  border-color: rgba(129, 201, 149, 0.45);
}

.deck-usage-row strong {
  color: var(--text);
}

.deck-usage-row span {
  color: var(--muted);
  line-height: 1.35;
}

.deck-usage-row span strong {
  color: var(--text);
  font-weight: 850;
}

.sub-rank-trigger {
  display: inline;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-weight: inherit;
  user-select: text;
  -webkit-user-select: text;
}

.sub-rank-trigger:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sub-rank-popover {
  position: fixed;
  z-index: 32;
  width: min(390px, calc(100vw - 16px));
  max-height: min(560px, calc(100vh - 24px));
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #242423;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.5);
  overflow: auto;
}

.sub-rank-popover[hidden] {
  display: none;
}

.sub-rank-modal {
  width: min(1120px, calc(100vw - 28px));
  max-height: min(860px, calc(100vh - 28px));
}

#sub-rank-modal.is-over-rune-viewer {
  z-index: 24;
}

.sub-rank-modal .modal-head p {
  margin: 4px 0 0;
  color: var(--muted);
}

.sub-rank-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sub-rank-grind-toggle {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #1e1e1d;
  color: var(--muted);
  white-space: nowrap;
}

.sub-rank-grind-toggle input {
  margin: 0;
}

.sub-rank-modal-body {
  display: grid;
  gap: 14px;
}

.sub-rank-set-panel {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #181817;
}

.sub-rank-set-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.sub-rank-set-head strong {
  color: #ddd7ce;
}

.sub-rank-set-head div {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.sub-rank-set-head .ghost-button {
  min-height: 28px;
  padding: 0 9px;
}

.sub-rank-set-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sub-rank-set-grid label {
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #20201f;
  color: #ddd7ce;
}

.sub-rank-set-grid input {
  margin: 0;
}

.sub-rank-option {
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #20201f;
  color: #ddd7ce;
  font-size: 12px;
  font-weight: 750;
}

.sub-rank-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}

.sub-rank-head strong {
  color: #f3d08b;
}

.sub-rank-current {
  margin-bottom: 10px;
  padding: 7px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: #1b1b1a;
  color: #ddd7ce;
  font-weight: 750;
}

.sub-rank-section {
  min-width: 0;
}

.sub-rank-section h4 {
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.sub-rank-section p {
  margin: 0;
  color: var(--muted-2);
}

.sub-rank-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #181817;
}

.sub-rank-table-wrap--current {
  border-color: rgba(142, 197, 232, 0.42);
  background: rgba(142, 197, 232, 0.035);
  box-shadow: 0 0 0 1px rgba(142, 197, 232, 0.08);
}

.sub-rank-table-wrap--current .sub-rank-table tbody tr {
  background: rgba(142, 197, 232, 0.045);
}

.sub-rank-table {
  width: 100%;
  min-width: 1180px;
  border-collapse: collapse;
  table-layout: auto;
}

.sub-rank-table th,
.sub-rank-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--line-soft);
  text-align: center;
  white-space: nowrap;
}

.sub-rank-table td {
  overflow: visible;
}

.sub-rank-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #20201f;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.sub-rank-table tbody tr:hover {
  background: #242423;
}

.sub-rank-table td .sub {
  justify-content: center;
  min-width: max-content;
  width: max-content;
  margin: 0 auto;
}

.sub-rank-table td.sub-rank-compared {
  padding: 4px;
}

.sub-rank-table td.sub-rank-compared .sub {
  border: 1px solid var(--blue);
  border-radius: 6px;
  padding: 3px 5px;
  background: rgba(142, 197, 232, 0.08);
}

.sub-rank-table th:nth-child(1),
.sub-rank-table td:nth-child(1) {
  width: 58px;
}

.sub-rank-table th:nth-child(8),
.sub-rank-table td:nth-child(8) {
  width: 86px;
}

.sub-rank-table th:nth-child(9),
.sub-rank-table td:nth-child(9),
.sub-rank-table th:nth-child(10),
.sub-rank-table td:nth-child(10) {
  width: 60px;
}

.sub-rank-table th:nth-child(7),
.sub-rank-table td:nth-child(7) {
  width: 86px;
}

.sub-rank-table.has-set-column th:nth-child(2),
.sub-rank-table.has-set-column td:nth-child(2) {
  width: 82px;
}

.sub-rank-table.has-set-column th:nth-child(8),
.sub-rank-table.has-set-column td:nth-child(8),
.sub-rank-table.has-set-column th:nth-child(9),
.sub-rank-table.has-set-column td:nth-child(9) {
  width: 86px;
}

.sub-rank-table.has-set-column th:nth-child(10),
.sub-rank-table.has-set-column td:nth-child(10) {
  width: 60px;
}

.sub-rank-table th:last-child,
.sub-rank-table td:last-child {
  width: 120px;
}

.sub-rank-list {
  display: grid;
  gap: 6px;
}

.sub-rank-row {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: #1b1b1a;
}

.sub-rank-summary {
  display: grid;
  grid-template-columns: 48px 86px 96px 86px minmax(120px, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 24px;
}

.sub-rank-summary strong {
  color: var(--gold);
}

.sub-rank-summary span,
.sub-rank-stats span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sub-rank-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  color: #ddd7ce;
  font-size: 11px;
}

.sub-rank-stats span {
  padding: 3px 5px;
  border-radius: 5px;
  background: #242423;
}

.sub-rank-stats em {
  display: block;
  margin-bottom: 1px;
  color: var(--muted-2);
  font-style: normal;
  font-size: 10px;
}

.grind-stock-remove,
.icon-x {
  position: relative;
  width: 20px;
  height: 20px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  color: transparent;
  background: transparent;
  border: 1px solid #5b5550;
  line-height: 1;
}

.grind-stock-remove::before,
.grind-stock-remove::after,
.icon-x::before,
.icon-x::after {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  top: 9px;
  height: 1.5px;
  border-radius: 2px;
  background: #bdb5aa;
}

.grind-stock-remove::before,
.icon-x::before {
  transform: rotate(45deg);
}

.grind-stock-remove::after,
.icon-x::after {
  transform: rotate(-45deg);
}

.grind-stock-remove:hover,
.icon-x:hover {
  border-color: #d27882;
  background: rgba(224, 143, 153, 0.08);
}

.grind-stock-remove:hover::before,
.grind-stock-remove:hover::after,
.icon-x:hover::before,
.icon-x:hover::after {
  background: #e08f99;
}

.gemmed-icon {
  display: inline-block;
  position: relative;
  top: 0;
  width: 17px;
  height: 17px;
  margin-left: 0;
  object-fit: contain;
  vertical-align: -3px;
}

.innate {
  color: #ddd5cb;
}

.score {
  color: #c6f4d3;
  font-weight: 800;
}

.ingame {
  color: var(--gold);
}

.badge {
  display: inline-flex;
  align-items: center;
  min-width: 38px;
  height: 19px;
  padding: 0 7px;
  border-radius: 4px;
  border: 1px solid currentColor;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

.badge + .badge {
  margin-left: 4px;
}

.badge-keep {
  color: #9de2aa;
  background: var(--green-bg);
}

.badge-sell {
  color: #f0a0aa;
  background: var(--red-bg);
}

.badge-review {
  color: #ffe09a;
  background: #493a18;
  border-color: #b8933f;
}

.badge-gem {
  color: #ffd369;
  background: #4a3711;
}

.badge-reapp,
.badge-gem-missing {
  color: #ff8d8d;
  background: #4a1717;
  box-shadow: inset 0 0 0 1px rgba(255, 107, 107, 0.55);
}

.badge-grind {
  color: #f6b46b;
  background: #4a2e16;
}

.badge-raffinage {
  color: #8ff0d2;
  background: #123c35;
  border-color: #3aa88f;
  box-shadow: inset 0 0 0 1px rgba(90, 220, 190, 0.35);
}

.badge-regem {
  color: #d7b5ff;
  background: #332145;
}

.badge-regem.badge-gem-missing {
  color: #ff8d8d;
  background: #4a1717;
  box-shadow: inset 0 0 0 1px rgba(255, 107, 107, 0.55);
}

.badge-upgrade,
.badge-finish {
  color: #a5d6ff;
  background: #20384d;
}

.location {
  color: #fff;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.row-action {
  text-align: center;
  padding-left: 4px;
  padding-right: 4px;
  line-height: 0;
  white-space: nowrap;
  overflow: visible;
}

.row-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin: 0;
  vertical-align: middle;
}

.row-remove:hover {
  color: transparent;
}

.rune-copy-button {
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid rgba(240, 184, 75, 0.72);
  border-radius: 5px;
  background: rgba(39, 24, 12, 0.78);
  color: var(--gold);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  cursor: pointer;
  vertical-align: middle;
}

.rune-copy-button:hover {
  background: rgba(240, 184, 75, 0.18);
  border-color: var(--gold);
}

.rune-copy-button.is-copied {
  color: #dfffd8;
  border-color: #6ee66a;
  background: rgba(39, 110, 35, 0.78);
}

.rune-copy-button.is-copy-error {
  color: #ffd9d9;
  border-color: #e06f78;
  background: rgba(112, 34, 39, 0.82);
}

.row-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin: 0;
  vertical-align: middle;
}

.row-copy + .row-remove {
  margin-left: 4px;
}

.rune-feedback-button {
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid rgba(174, 198, 10, 0.75);
  border-radius: 5px;
  background: rgba(28, 37, 10, 0.78);
  color: #dff08a;
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  cursor: pointer;
  vertical-align: middle;
}

.rune-feedback-button:hover {
  border-color: #d6ef4c;
  background: rgba(174, 198, 10, 0.18);
}

.row-feedback,
.rune-viewer-feedback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin: 0;
}

.row-feedback + .row-copy,
.rune-viewer-feedback + .rune-viewer-copy {
  margin-left: 4px;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.62);
}

.modal-backdrop[hidden] {
  display: none;
}

/* Scoped to the SPA modal backdrop: do not override Bootstrap's top-level
   `.modal.fade`, used by AppModal in the site header. */
.modal-backdrop > .modal {
  width: min(1120px, 96vw);
  max-height: min(760px, 92vh);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}

.modal-head,
.modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.modal-actions {
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

.modal h2 {
  margin: 0;
  font-size: 17px;
}

body.rune-sales-modal-open {
  overflow: hidden;
}

.rune-sales-advice-modal,
.rune-sales-settings-modal {
  width: min(1240px, 98vw);
  max-height: min(880px, 94vh);
  background:
    linear-gradient(180deg, rgba(35, 31, 25, 0.98), rgba(25, 24, 23, 0.99)),
    var(--panel);
}

.rune-sales-advice-modal .modal-head p,
.rune-sales-settings-modal .modal-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.rune-sales-advice-modal .modal-body,
.rune-sales-settings-modal .modal-body {
  display: grid;
  gap: 12px;
  overflow: auto;
  padding: 14px;
}

.rune-sales-advice-modal .modal-actions,
.rune-sales-settings-modal .modal-actions {
  flex-wrap: wrap;
}

.rune-sales-tabs {
  position: sticky;
  top: -14px;
  z-index: 3;
  display: flex;
  gap: 6px;
  padding: 8px 0;
  background: linear-gradient(180deg, rgba(35, 31, 25, 0.98), rgba(35, 31, 25, 0.88));
}

.rune-sales-tabs button {
  width: 38px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-weight: 850;
  cursor: pointer;
}

.rune-sales-tabs button.is-active {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(240, 184, 75, 0.28), rgba(154, 101, 8, 0.28));
  color: #fff4cf;
  box-shadow: 0 0 0 1px rgba(240, 184, 75, 0.22) inset;
}

.rune-sales-page {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.rune-sales-page > header,
.rune-sales-page .rune-sales-substat-grid,
.rune-sales-page .rune-sales-set-grid {
  grid-column: 1 / -1;
}

.rune-sales-page > header h3 {
  margin: 0 0 4px;
  color: var(--gold);
  font-size: 18px;
}

.rune-sales-page > header p,
.rune-sales-page > header small {
  display: block;
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.rune-sales-page--summary {
  grid-template-columns: 1fr;
}

.rune-sales-page-summary {
  padding: 12px;
  border: 1px solid rgba(240, 184, 75, 0.28);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}

.rune-sales-page-summary h3 {
  margin: 0 0 12px;
  color: var(--gold);
  font-size: 18px;
}

.rune-sales-page-summary dl {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  gap: 8px 14px;
  margin: 0;
}

.rune-sales-page-summary dt {
  color: var(--muted);
  font-weight: 800;
  cursor: help;
}

.rune-sales-page-summary dd {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 760;
  cursor: help;
}

.rune-sales-section,
.rune-sales-profile-controls,
.rune-sales-impact,
.rune-sales-diff {
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.rune-sales-section h3,
.rune-sales-section h4,
.rune-sales-profile-controls h3,
.rune-sales-impact h3,
.rune-sales-diff h3 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 14px;
}

.rune-sales-section h3[title],
.rune-sales-section h4[title],
.rune-sales-profile-controls [title],
.rune-sales-impact [title],
.rune-sales-diff [title],
.rune-sales-tabs button[title] {
  cursor: help;
}

.rune-sales-warning {
  border-color: rgba(240, 184, 75, 0.35);
  background: rgba(240, 184, 75, 0.08);
}

.rune-sales-warning ul {
  margin: 0 0 8px 18px;
  padding: 0;
  color: var(--text);
  line-height: 1.45;
}

.rune-sales-warning p,
.rune-sales-impact p,
.rune-sales-diff p {
  margin: 6px 0 0;
  color: var(--muted);
}

.rune-sales-summary-grid,
.rune-sales-impact-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.rune-sales-summary-grid span,
.rune-sales-impact-grid span {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.18);
  color: var(--muted);
}

.rune-sales-summary-grid strong,
.rune-sales-impact-grid strong {
  color: var(--gold);
}

.rune-sales-checkbox-grid,
.rune-sales-set-grid,
.rune-sales-main-grid,
.rune-sales-substat-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}

.rune-sales-main-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rune-sales-substat-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rune-sales-checkbox-grid label,
.rune-sales-substat-grid label {
  min-width: 0;
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.16);
  color: var(--muted);
}

.rune-sales-checkbox-grid label.is-active,
.rune-sales-substat-grid label.is-active {
  border-color: rgba(129, 201, 149, 0.62);
  background: rgba(129, 201, 149, 0.12);
  color: var(--text);
}

.rune-sales-checkbox-grid label.is-active span,
.rune-sales-substat-grid label.is-active span,
.rune-sales-section .is-active {
  color: var(--green);
  font-weight: 800;
}

.rune-sales-checkbox-grid label.is-muted,
.rune-sales-substat-grid label.is-muted,
.rune-sales-section .is-muted {
  opacity: 0.56;
}

.rune-sales-substat-grid input[type="number"],
.rune-sales-section input[type="number"],
.rune-sales-profile-controls input,
.rune-sales-profile-controls select,
.rune-sales-section select,
.rune-sales-set-priority select {
  min-width: 0;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
}

.rune-sales-substat-grid input[type="number"] {
  width: 64px;
  margin-left: auto;
  text-align: right;
  color: var(--gold);
  font-size: 17px;
  font-weight: 850;
}

.rune-sales-big-number {
  display: inline-flex;
  min-width: 38px;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: rgba(240, 184, 75, 0.16);
  color: var(--gold);
  font-size: 24px;
}

.rune-sales-profile-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.rune-sales-profile-controls label,
.rune-sales-set-priority label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.rune-sales-profile-controls label span {
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 650;
}

.rune-sales-profile-controls p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
}

.rune-sales-set-priority {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.rune-sales-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.rune-sales-errors {
  grid-column: 1 / -1;
  padding: 8px 10px;
  border: 1px solid rgba(224, 143, 153, 0.55);
  border-radius: 7px;
  background: var(--red-bg);
  color: var(--red);
}

.rune-sales-errors p {
  margin: 0;
}

.rune-sales-page-index {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.rune-sales-impact {
  border-color: rgba(142, 197, 232, 0.28);
  background: rgba(142, 197, 232, 0.07);
}

.rune-sales-diff {
  border-color: rgba(240, 184, 75, 0.22);
}

.rune-sales-impact .is-risk {
  color: var(--red);
}

.icon-button {
  min-width: 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  font-weight: 800;
}

.modal-body {
  padding: 12px 14px 14px;
  overflow: auto;
}

.modal-note {
  margin: 0 0 12px;
  color: var(--muted);
}

.help-modal {
  width: min(820px, 94vw);
}

.help-content {
  display: grid;
  gap: 14px;
  line-height: 1.48;
}

.help-content section {
  padding: 0 0 13px;
  border-bottom: 1px solid var(--line-soft);
}

.help-content section:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.help-content h3 {
  margin: 0 0 7px;
  color: #f3d08b;
  font-size: 14px;
}

.help-content p {
  margin: 0 0 8px;
  color: #ddd7ce;
}

.help-content p:last-child {
  margin-bottom: 0;
}

.help-content ul {
  margin: 0 0 8px;
  padding-left: 18px;
  color: #ddd7ce;
}

.help-content li + li {
  margin-top: 4px;
}

.modal-backdrop > .modal.graphs-modal {
  width: min(1420px, calc(100vw - 32px));
  max-height: min(1040px, calc(100vh - 32px));
}

.rune-verdict-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 3px;
  white-space: nowrap;
}

.rune-verdict-cell .badge + .badge {
  margin-left: 0;
}

.rune-row-select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(202, 194, 182, 0.58);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: color 120ms ease, transform 120ms ease;
}

.rune-row-select:hover,
.rune-row-select:focus-visible {
  color: var(--gold);
  transform: translateY(-1px);
}

.rune-row-select.is-selected {
  color: #ffdf75;
  text-shadow: 0 0 8px rgba(224, 169, 74, 0.45);
}

/* Graphs - Stats has one common surface on every page that opens it. */
.graphs-stats-modal :is(.graph-check, .graph-check-grid label) {
  border: 1px solid rgba(139, 92, 246, .34);
  border-radius: 6px;
  background: rgba(26, 11, 46, .72);
  color: #e9e6ff;
}

.graphs-stats-modal input[type="checkbox"] {
  appearance: none;
  width: 14px;
  height: 14px;
  margin: 0;
  border: 1px solid rgba(139, 92, 246, .72);
  border-radius: 3px;
  background: #16072b;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
}

.graphs-stats-modal input[type="checkbox"]::after {
  content: "";
  width: 4px;
  height: 7px;
  border: solid #07131d;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
}

.graphs-stats-modal input[type="checkbox"]:checked {
  border-color: #67e8f9;
  background: #67e8f9;
}

.graphs-stats-modal input[type="checkbox"]:checked::after {
  transform: rotate(45deg) scale(1);
}

.graphs-stats-modal input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, .2);
}

/* One visual contract for every Graphs - Stats dialog.  Account Report uses
   the same markup and SVG identifiers as the optimizer; only its initial
   filter values differ. */
.graphs-stats-modal {
  width: min(1120px, calc(100vw - 24px)) !important;
  height: min(820px, calc(100dvh - 24px)) !important;
  max-height: calc(100dvh - 24px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-color: rgba(139, 92, 246, .55) !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, #211040, #120521) !important;
  color: var(--text) !important;
  box-shadow: 0 28px 72px rgba(0, 0, 0, .62), 0 0 30px rgba(139, 92, 246, .14) !important;
}

.modal-backdrop#graphs-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  display: grid !important;
  place-items: center !important;
  padding: 20px !important;
}

.modal-backdrop#graphs-modal > .graphs-stats-modal {
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
  transform: none !important;
}

.graphs-stats-modal > .modal-head { border-color: rgba(139, 92, 246, .28) !important; }

/* These values intentionally do not use page theme variables: the same graph
   must retain its visual hierarchy in the optimizer and in Account Report. */
.graphs-stats-modal :is(.graph-control, .graph-check-grid label, .graph-legend) { color: #e9e6ff; }
.graphs-stats-modal .graphs-filter-title { color: #c4bfd5; }
.graphs-stats-modal .graph-legend strong { color: #c5cae5; }
.graphs-stats-modal .legend-current { background: #8fd3f4; }
.graphs-stats-modal .legend-hero { background: #d8b7f4; }
.graphs-stats-modal .legend-legend { background: #ffc13d; }

.graphs-stats-modal > .modal-body.graphs-stats-body {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  padding-bottom: 24px;
}

.graphs-stats-modal .graph-canvas-wrap {
  border-color: rgba(139, 92, 246, .4) !important;
  background: linear-gradient(145deg, rgba(19, 5, 40, .96), rgba(10, 1, 24, .98)) !important;
}

.graphs-stats-modal #efficiency-graph {
  display: block;
  width: 100%;
  height: 100% !important;
  min-height: 0 !important;
  cursor: crosshair;
  background: linear-gradient(145deg, rgba(19, 5, 40, .96), rgba(10, 1, 24, .98));
}

.graphs-stats-modal :is(.ro2-graph-frame, .ro2-graph-grid, .ro2-graph-axis) {
  stroke: rgba(255, 255, 255, .09);
}

.graphs-stats-modal .ro2-graph-frame {
  fill: #120521;
}

.graphs-stats-modal .ro2-graph-grid.is-target { stroke: rgba(132, 214, 167, .36); }

.graphs-stats-modal :is(.ro2-graph-label, .ro2-graph-x-label) {
  fill: #c5cae5;
  font: 12px Inter, sans-serif;
}

.graphs-stats-modal .ro2-graph-series {
  stroke-width: 1.35;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
}

.graphs-stats-modal .ro2-graph-hover-zone {
  fill: transparent;
  stroke: transparent;
  pointer-events: all;
}

.graphs-stats-modal .ro2-graph-hover-line {
  opacity: 0;
  stroke: rgba(243, 208, 139, .75);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  pointer-events: none;
}

.graphs-stats-modal .ro2-graph-hover-line.is-visible { opacity: 1; }

.graphs-stats-modal .ro2-graph-hover-point {
  fill: var(--graph-color);
  stroke: #f8f2e8;
  stroke-width: 1.4;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7));
}

.graphs-stats-modal .graph-tooltip-series-heading {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) max-content;
  align-items: center;
  gap: 6px;
  color: #c5cae5;
}

.graphs-stats-modal .graph-tooltip-series-heading i {
  width: 18px;
  height: 3px;
  border-radius: 999px;
  background: var(--legend-color);
}

.graphs-stats-modal .graph-tooltip {
  border-color: rgba(243, 208, 139, .34);
  background: rgba(27, 24, 22, .98);
  color: #c5cae5;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .6);
}

.graphs-stats-modal .graph-tooltip strong { color: #f3d08b; }
.graphs-stats-modal .graph-tooltip :is(.graph-tooltip-series-heading b, .graph-tooltip-series > span b) { color: #f5f2ff; }
.graphs-stats-modal .graph-tooltip span { color: #c5cae5; }

.graphs-stats-modal input[type="checkbox"] {
  appearance: none;
  width: 14px;
  height: 14px;
  margin: 0;
  border: 1px solid rgba(139, 92, 246, .72);
  border-radius: 3px;
  background: #16072b;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
}

.graphs-stats-modal input[type="checkbox"]::after {
  content: "";
  width: 4px;
  height: 7px;
  border: solid #07131d;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
}

.graphs-stats-modal input[type="checkbox"]:checked { border-color: #67e8f9; background: #67e8f9; }
.graphs-stats-modal input[type="checkbox"]:checked::after { transform: rotate(45deg) scale(1); }
.graphs-stats-modal input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(6, 182, 212, .2); }

.graphs-stats-modal .icon-button {
  min-width: 34px !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 1px solid rgba(6, 182, 212, .52) !important;
  border-radius: 9px !important;
  background: rgba(10, 1, 24, .58) !important;
  color: #f5f7ff !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

.graphs-stats-modal .icon-button:hover {
  border-color: #06b6d4 !important;
  background: rgba(6, 182, 212, .18) !important;
  color: #fff !important;
}

@media (max-height: 930px) {
  .graphs-stats-modal { width: min(960px, calc(100vw - 24px)) !important; }
}

@media (max-height: 720px) {
  .graphs-stats-modal {
    width: min(760px, calc(100vw - 20px)) !important;
    height: calc(100dvh - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
  }
}

.summary-modal {
  width: min(900px, 96vw);
  position: relative;
}

#summary-modal.is-over-rune-viewer {
  z-index: 26;
}

.summary-modal .modal-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.summary-body,
.summary-section {
  display: grid;
  gap: 14px;
}

.summary-action-note {
  margin: 0;
  padding: 9px 11px;
  border: 1px solid rgba(142, 197, 232, 0.38);
  border-radius: 7px;
  background: rgba(142, 197, 232, 0.08);
  color: #ccecff;
  font-size: 12px;
}

.summary-section {
  gap: 9px;
}

.summary-section h3 {
  margin: 0;
  color: #f3d08b;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.summary-card-spacer {
  min-height: 1px;
}

.summary-card {
  min-height: 76px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.summary-card:hover {
  border-color: var(--blue);
  background-color: rgba(142, 197, 232, 0.08);
}

.summary-card.is-active {
  border-color: var(--focus);
  box-shadow: 0 0 0 2px rgba(63, 126, 232, 0.3), inset 0 0 0 1px rgba(142, 197, 232, 0.3);
}

.summary-card strong {
  color: #f3d08b;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

.summary-card span {
  color: var(--muted);
  font-size: 12px;
}

.summary-card-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.summary-help-trigger {
  width: 17px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: inherit;
  font-size: 10px !important;
  font-weight: 900;
  line-height: 1;
  opacity: 0.9;
}

.summary-help-trigger:hover,
.summary-help-trigger:focus {
  opacity: 1;
}

.summary-card--static {
  cursor: default;
}

.summary-card--static:hover {
  border-color: var(--line);
  background: transparent;
}

.summary-card--gem {
  border-color: rgba(255, 211, 105, 0.58);
  background: linear-gradient(135deg, rgba(74, 55, 17, 0.86), transparent 72%);
}

.summary-card--gem strong {
  color: #ffd369;
}

.summary-card--regem {
  border-color: rgba(215, 181, 255, 0.56);
  background: linear-gradient(135deg, rgba(51, 33, 69, 0.9), transparent 72%);
}

.summary-card--regem strong {
  color: #d7b5ff;
}

.summary-card--grind {
  border-color: rgba(246, 180, 107, 0.58);
  background: linear-gradient(135deg, rgba(74, 46, 22, 0.9), transparent 72%);
}

.summary-card--grind strong {
  color: #f6b46b;
}

.summary-card--raffinage {
  border-color: rgba(58, 168, 143, 0.6);
  background: linear-gradient(135deg, rgba(18, 60, 53, 0.9), transparent 72%);
}

.summary-card--raffinage strong {
  color: #8ff0d2;
}

.summary-card--reapp,
.summary-card--sell {
  border-color: rgba(255, 107, 107, 0.56);
  background: linear-gradient(135deg, rgba(74, 23, 23, 0.88), transparent 72%);
}

.summary-card--reapp strong,
.summary-card--sell strong {
  color: #ff8d8d;
}

.summary-card--upgrade {
  border-color: rgba(165, 214, 255, 0.54);
  background: linear-gradient(135deg, rgba(32, 56, 77, 0.88), transparent 72%);
}

.summary-card--upgrade strong {
  color: #a5d6ff;
}

.summary-card--rare,
.summary-card--exceptional {
  border-color: rgba(240, 184, 75, 0.58);
  background: linear-gradient(135deg, rgba(72, 52, 18, 0.72), transparent 72%);
}

.summary-card--rare strong,
.summary-card--exceptional strong {
  color: #ffe3a3;
}

.summary-card--combo {
  border-color: rgba(91, 206, 250, 0.58);
  background: linear-gradient(135deg, rgba(27, 61, 75, 0.76), transparent 72%);
}

.summary-card--combo strong {
  color: #8fdefa;
}

.summary-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.summary-metrics > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: linear-gradient(135deg, rgba(35, 91, 53, 0.48), transparent 72%);
}

.summary-metrics strong {
  color: #9ee6ad;
  font-size: 18px;
}

.summary-metrics span {
  color: var(--muted);
  font-size: 12px;
}

.graphs-body {
  display: grid;
  gap: 12px;
}

.farm-modal {
  width: min(1120px, 96vw);
  height: min(860px, 96vh);
  max-height: 96vh;
}

.farm-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.farm-top-control,
.farm-sort-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.farm-top-control input,
.farm-sort-control select {
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #171615;
  color: var(--text);
  font: inherit;
}

.farm-top-control input {
  width: 72px;
  padding: 0 8px;
  font-variant-numeric: tabular-nums;
}

.farm-sort-control select {
  width: 124px;
  padding: 0 7px;
}

.farm-scope-warning {
  margin: 0 12px 10px;
  padding: 10px 12px;
  border: 1px solid rgba(231, 88, 98, 0.72);
  border-left: 5px solid var(--red);
  border-radius: 8px;
  background: rgba(231, 88, 98, 0.14);
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
  box-shadow: 0 0 0 1px rgba(255, 196, 87, 0.16), 0 10px 28px rgba(0, 0, 0, 0.24);
}

.farm-scope-warning strong {
  color: #ffc457;
}

.farm-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 10px 12px 12px;
  overflow: hidden;
  flex: 0 0 auto;
  max-height: 1200px;
  transition: max-height 160ms ease, opacity 160ms ease, padding 160ms ease;
}

.farm-grid section {
  min-width: 0;
}

.farm-grid h3 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 14px;
}

.farm-list {
  display: grid;
  gap: 6px;
}

.farm-row {
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #201f1e;
}

.farm-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: var(--text);
  font-size: 12px;
}

.farm-row-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.farm-row-percent {
  color: var(--gold);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.farm-bar {
  height: 4px;
  overflow: hidden;
  border-radius: 99px;
  background: #141413;
}

.farm-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--purple), var(--gold));
}

.farm-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  color: var(--muted);
  font-size: 11px;
}

.farm-row-meta span {
  white-space: nowrap;
}

.farm-row-sets {
  color: #b8b1a6;
  font-size: 10px;
  line-height: 1.35;
}

.farm-row-sets strong {
  color: var(--text);
  font-weight: 700;
}

.farm-dungeons-toggle {
  align-self: center;
  width: 68px;
  height: 32px;
  margin: 2px 0 10px;
  border: 2px solid #b6944c;
  border-radius: 999px;
  background: linear-gradient(180deg, #30291c, #211e18);
  color: var(--gold);
  cursor: pointer;
  font-size: 23px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 0 0 3px rgba(182, 148, 76, 0.12), 0 3px 10px rgba(0, 0, 0, 0.3);
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.farm-dungeons-toggle:hover {
  border-color: #e1bd68;
  background: linear-gradient(180deg, #403521, #292319);
  color: #f4d27e;
  box-shadow: 0 0 0 4px rgba(225, 189, 104, 0.18), 0 4px 13px rgba(0, 0, 0, 0.38);
  transform: translateY(-1px);
}

.farm-dungeons-toggle:focus-visible {
  outline: 3px solid rgba(63, 126, 232, 0.65);
  outline-offset: 3px;
}

.farm-dungeons-toggle span {
  display: block;
  transform: translateY(-2px);
}

.farm-dungeons-collapsed .farm-grid {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  overflow: hidden;
}

.farm-dungeons-collapsed .farm-dungeons-toggle {
  margin-top: 0;
}

.farm-dungeons-collapsed .farm-dungeons-toggle span {
  transform: translateY(2px) rotate(180deg);
}

.farm-empty {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  background: #201f1e;
}

.farm-breakdown {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding: 0 12px 12px;
  overflow: hidden;
}

.farm-breakdown h3 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 14px;
}

.farm-set-breakdown {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

.farm-breakdown-category {
  display: grid;
  gap: 8px;
}

.farm-breakdown-category h4 {
  margin: 0;
  color: #f3d08b;
  font-size: 12px;
}

.farm-breakdown-category > .farm-empty {
  margin: 0;
}

.farm-set-detail {
  display: block;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #201f1e;
}

.farm-set-detail summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  cursor: pointer;
  color: var(--text);
  font-size: 12px;
}

.farm-set-detail summary span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.farm-set-detail summary::-webkit-details-marker {
  display: none;
}

.farm-set-total {
  color: var(--gold);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.farm-stat-list {
  display: grid;
  gap: 4px;
  padding: 0 8px 8px;
}

.farm-stat-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
}

.farm-stat-row span {
  white-space: nowrap;
}

.farm-stat-row strong {
  color: var(--text);
  font-weight: 700;
}

.graphs-controls,
.graphs-filter-row,
.graph-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
}

.graphs-controls {
  align-items: center;
}

.graphs-filter-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(180px, 0.5fr);
}

.graph-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ddd7ce;
  font-weight: 700;
}

.graph-control input[type="number"] {
  width: 86px;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #181817;
  color: var(--text);
  padding: 0 8px;
}

.graph-check {
  min-height: 32px;
}

.graphs-filter-title {
  margin-bottom: 6px;
  color: var(--muted);
  font-weight: 800;
}

.graph-check-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.graph-choice-actions {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 2px;
}

.graph-choice-actions .ghost-button {
  min-height: 28px;
  padding: 0 9px;
}

.graph-check-grid label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: #1b1b1a;
  color: #ddd7ce;
}

.graph-check-grid--slots label {
  min-width: 45px;
}

.graph-legend {
  align-items: center;
  color: #ddd7ce;
}

.graph-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.graph-legend strong {
  margin-left: auto;
  color: var(--muted);
}

.legend-line {
  width: 24px;
  height: 3px;
  border-radius: 2px;
  display: inline-block;
}

.legend-current {
  background: var(--blue);
}

.legend-hero {
  background: var(--purple);
}

.legend-legend {
  background: var(--gold);
}

.graph-canvas-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1120 / 520;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #181817;
  overflow: hidden;
}

#efficiency-graph {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

.graph-tooltip {
  position: absolute;
  z-index: 2;
  width: min(400px, calc(100% - 16px));
  max-height: calc(100% - 16px);
  overflow: auto;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #242423;
  color: var(--text);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  font-size: 12px;
  line-height: 1.45;
}

.graph-tooltip.is-pinned {
  pointer-events: auto;
  min-width: 330px;
}

.graph-tooltip strong {
  display: block;
  margin-bottom: 3px;
  color: #f3d08b;
}

.graph-tooltip .graph-tooltip-hovered {
  display: inline;
  font-weight: 700;
}

.graph-tooltip-series {
  margin-top: 7px;
  padding: 6px 0 0 8px;
  border-top: 1px solid color-mix(in srgb, var(--graph-series-color) 52%, transparent);
  border-left: 3px solid var(--graph-series-color);
}

.graph-tooltip-series:first-of-type {
  margin-top: 4px;
}

.graph-tooltip span {
  display: block;
  white-space: nowrap;
}

.graph-preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.graph-preview-head button {
  width: 23px;
  min-width: 23px;
  height: 23px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #1b1b1a;
  color: var(--muted);
  font-weight: 900;
}

.graph-preview-subs {
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.graph-preview-hint {
  margin-top: 4px;
  color: var(--muted);
}

.graph-preview-show {
  margin-top: 7px;
  padding: 6px 9px;
  border: 1px solid var(--blue);
  border-radius: 6px;
  background: rgba(142, 197, 232, 0.1);
  color: #bfe6ff;
  font-weight: 800;
  cursor: pointer;
}

.rune-viewer-button {
  background: linear-gradient(135deg, rgba(240, 184, 75, 0.18), rgba(96, 63, 14, 0.32));
  border-color: rgba(240, 184, 75, 0.38);
  color: #f5d38d;
}

.modal-backdrop > .modal.rune-viewer-modal {
  width: min(1340px, calc(100vw - 32px));
  max-height: min(92vh, 980px);
}

.rune-viewer-head {
  align-items: center;
}

.rune-viewer-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.rune-viewer-count {
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 800;
}

.rune-viewer-count select {
  height: 26px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: #171716;
  color: var(--text);
}

.rune-viewer-body {
  overflow: auto;
}

.rune-viewer-grid {
  display: grid;
  gap: 10px;
  align-items: start;
}

.rune-viewer-grid--1 {
  grid-template-columns: minmax(0, 420px);
  justify-content: center;
}

.rune-viewer-grid--1 .rune-viewer-card {
  grid-column: 1;
  width: 100%;
  box-sizing: border-box;
}

.rune-viewer-grid--2 {
  grid-template-columns: repeat(2, 420px);
  justify-content: center;
}

.rune-viewer-grid--3,
.rune-viewer-grid--6,
.rune-viewer-grid--9,
.rune-viewer-grid--12,
.rune-viewer-grid--15,
.rune-viewer-grid--18,
.rune-viewer-grid--21,
.rune-viewer-grid--24,
.rune-viewer-grid--27,
.rune-viewer-grid--30 {
  grid-template-columns: repeat(3, 420px);
  justify-content: center;
}

.rune-viewer-card {
  --rune-quality-bg: #5e5548;
  --rune-quality-text: #efe4f8;
  position: relative;
  min-width: 0;
  padding: 10px 12px;
  border: 2px solid #8c6a00;
  border-radius: 8px;
  background:
    radial-gradient(circle at 26% 18%, rgba(112, 65, 19, 0.26), transparent 42%),
    #21120b;
  box-shadow: inset 0 0 0 1px rgba(255, 214, 90, 0.18), 0 18px 40px rgba(0, 0, 0, 0.28);
  color: #f7e7a3;
  display: grid;
  gap: 8px;
}

.rune-viewer-card--legend {
  --rune-quality-bg: #763012;
  --rune-quality-text: #ffc975;
}

.rune-viewer-card--hero {
  --rune-quality-bg: #5f2244;
  --rune-quality-text: #fed8ec;
}

.rune-viewer-card--rare {
  --rune-quality-bg: #1d414f;
  --rune-quality-text: #adf4ff;
}

.rune-viewer-card--magic {
  --rune-quality-bg: #1f6414;
  --rune-quality-text: #d3ffd0;
}

.rune-viewer-card-head {
  position: relative;
  min-height: 36px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
}

.rune-viewer-card-head strong {
  position: absolute;
  inset: 0;
  min-width: 0;
  padding: 0 76px 0 42px;
  color: #f5a64e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.08;
  text-shadow: 0 2px 0 #5b3800, 0 0 4px rgba(255, 196, 56, 0.38);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rune-viewer-copy {
  position: absolute;
  z-index: 4;
  right: 24px;
  bottom: 2px;
}

.rune-viewer-hide {
  position: absolute;
  z-index: 4;
  right: 2px;
  bottom: 1px;
}

.rune-viewer-feedback {
  position: absolute;
  z-index: 4;
  right: 46px;
  bottom: 2px;
}

.rune-viewer-usage-icons {
  position: absolute;
  z-index: 4;
  top: 118px;
  right: 10px;
  width: 118px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  cursor: pointer;
}

.rune-viewer-usage-icons:hover {
  filter: brightness(1.15);
}

.rune-viewer-usage-icons img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex: 0 0 18px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55));
}

.rune-viewer-rank-slot {
  position: absolute;
  z-index: 3;
  top: -4px;
  right: -2px;
  width: 44px;
  height: 44px;
  padding: 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff5c8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 2px #000, 0 0 3px #000;
  cursor: pointer;
}

.rune-viewer-rank-slot:hover {
  filter: brightness(1.15);
}

.rune-viewer-rank-slot img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex: 0 0 40px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55));
}

.rune-viewer-rank-slot-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 1px;
  transform: scaleX(0.92);
  pointer-events: none;
}

.rune-viewer-marker-slot {
  position: relative;
  z-index: 2;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
}

.rune-viewer-marker {
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  border: 2px solid rgba(191, 139, 54, 0.44);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.16);
  color: #b99660;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
}

.rune-viewer-card-main {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding-right: 124px;
}

.rune-viewer-left {
  width: 80px;
  min-width: 80px;
  display: grid;
  gap: 8px;
}

.rune-viewer-art {
  position: relative;
  width: 80px;
  height: 80px;
  flex: 0 0 80px;
}

.rune-viewer-art img {
  display: block;
}

.rune-viewer-bg,
.rune-viewer-slot-img,
.rune-viewer-set-img,
.rune-viewer-monster-img {
  position: absolute;
}

.rune-viewer-bg {
  inset: 0;
  width: 100%;
  height: 100%;
}

.rune-viewer-stars {
  position: absolute;
  top: 2px;
  left: 3px;
  display: flex;
  z-index: 5;
}

.rune-viewer-stars img {
  width: 15px;
  min-width: 0;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7));
}

.rune-viewer-stars img + img {
  margin-left: -4px;
}

.rune-viewer-slot-img {
  left: 16%;
  top: 17%;
  width: 68%;
  height: 68%;
  object-fit: contain;
  z-index: 2;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.55));
}

.rune-viewer-set-img {
  left: 50%;
  top: 51%;
  width: 38%;
  height: 38%;
  transform: translate(-50%, -50%);
  object-fit: contain;
  z-index: 3;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.55));
}

.rune-viewer-card .rune-viewer-art--slot1 .rune-viewer-set-img {
  top: 55%;
}

.rune-viewer-card .rune-viewer-art--slot2 .rune-viewer-set-img {
  left: 48%;
  top: 48%;
}

.rune-viewer-card .rune-viewer-art--slot4 .rune-viewer-set-img {
  top: 47%;
}

.rune-viewer-card .rune-viewer-art--slot5 .rune-viewer-set-img,
.rune-viewer-card .rune-viewer-art--slot6 .rune-viewer-set-img {
  left: 53%;
  top: 48%;
}

.rune-viewer-monster-img {
  left: 3px;
  bottom: 3px;
  width: 34%;
  height: 34%;
  border: 1px solid rgba(255, 229, 137, 0.8);
  border-radius: 4px;
  background: #101010;
  object-fit: cover;
  z-index: 6;
}

.rune-viewer-level {
  position: absolute;
  right: 8px;
  bottom: 9px;
  z-index: 6;
  color: #ffe392;
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  text-shadow: 0 2px 1px #2c1200, 0 0 3px #000;
}

.rune-viewer-info {
  min-width: 0;
  display: grid;
  align-content: center;
  min-height: 80px;
  gap: 9px;
}

.rune-viewer-main-stat {
  color: #d9d6d0;
  font-size: 21px;
  padding-left: 5px;
  line-height: 1.08;
  text-shadow: 0 2px 1px #3b2605;
}

.rune-viewer-innate {
  color: #d9d6d0;
  font-size: 17px;
  padding-left: 5px;
  line-height: 1.15;
  text-shadow: 0 2px 1px #3b2605;
}

.rune-viewer-quality-row {
  position: absolute;
  top: 55px;
  right: 10px;
  width: 118px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 0;
}

.rune-viewer-ancient {
  width: 22px;
  height: 22px;
  display: inline-block;
  flex: 0 0 22px;
  background: var(--rune-quality-text);
  -webkit-mask: url("assets/runes-img/ancient.png") center / contain no-repeat;
  mask: url("assets/runes-img/ancient.png") center / contain no-repeat;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55));
}

.rune-viewer-quality {
  width: 118px;
  height: 27px;
  box-sizing: border-box;
  padding: 2px 8px;
  border-radius: 7px;
  color: var(--rune-quality-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
}

.rune-viewer-quality--legend { background: #763012; }
.rune-viewer-quality--hero { background: #5f2244; }
.rune-viewer-quality--rare { background: #1d414f; }
.rune-viewer-quality--magic { background: #1f6414; }
.rune-viewer-quality--normal { background: #5e5548; }

.rune-viewer-score {
  position: absolute;
  top: 88px;
  right: 10px;
  width: 118px;
  height: 26px;
  box-sizing: border-box;
  padding: 2px 10px;
  border-radius: 7px;
  background: #3b2717;
  color: #b88848;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 14px;
  font-weight: 650;
}

.rune-viewer-score img {
  width: 21px;
  height: 21px;
  object-fit: contain;
  flex: 0 0 21px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
}

.rune-viewer-subs {
  width: max-content;
  min-width: 112px;
  max-width: 230px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f3df9a;
  display: grid;
  justify-items: start;
  gap: 3px;
  text-align: left;
  cursor: pointer;
}

.rune-viewer-substats-row {
  display: grid;
  grid-template-columns: minmax(112px, max-content) minmax(142px, 1fr);
  align-items: start;
  gap: 12px;
  padding: 0 10px 0 5px;
}

.rune-viewer-metrics {
  display: grid;
  gap: 3px;
  justify-self: end;
  min-width: 142px;
}

.rune-viewer-metrics--compact {
  gap: 1px;
}

.rune-viewer-metric {
  min-height: 20px;
  display: grid;
  grid-template-columns: max-content minmax(66px, max-content);
  align-items: center;
  justify-content: end;
  gap: 8px;
  color: #d9d6d0;
  font-size: 17px;
  line-height: 1;
  text-shadow: 0 2px 1px #2a1707;
  white-space: nowrap;
}

.rune-viewer-metrics--compact .rune-viewer-metric {
  min-height: 15px;
  grid-template-columns: max-content minmax(58px, max-content);
  gap: 6px;
  font-size: 14px;
}

.rune-viewer-metric-label {
  color: #dfc880;
}

.rune-viewer-metric-value {
  min-width: 66px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.rune-viewer-metrics--compact .rune-viewer-metric-value {
  min-width: 58px;
}

.rune-viewer-metric-value--pure,
.pure-efficiency-cell {
  color: #8ec5e8;
}

.rune-viewer-metric-value--hero {
  color: var(--purple);
}

.rune-viewer-metric-value--legend {
  color: var(--gold);
}

.rune-viewer-subs:hover .rune-viewer-sub {
  color: #d9d6d0;
}

.rune-viewer-sub {
  min-height: 20px;
  box-sizing: border-box;
  width: max-content;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 1px;
  color: #d9d6d0;
  font-size: 17px;
  line-height: 1;
  text-shadow: 0 2px 1px #2a1707;
  white-space: nowrap;
}

.rune-viewer-sub-name {
  color: #dfc880;
  margin-right: 4px;
}

.rune-viewer-sub--gem-target {
  padding: 2px 4px;
  margin: -2px -4px;
  border: 1px solid #ffd369;
  border-radius: 4px;
}

.rune-viewer-sub--gem-target::after {
  content: "";
  flex: 0 0 4px;
  width: 4px;
}

.rune-viewer-sub--regem-target {
  border-color: #d7b5ff;
}

.rune-viewer-sub--target-missing {
  border-color: #ff6b6b;
  box-shadow: 0 0 0 1px rgba(255, 107, 107, 0.22);
}

.rune-viewer-sub--total-fixed {
  color: #d9d6d0;
}

.rune-viewer-sub--total-grindable {
  color: #f6b21b;
}

.rune-viewer-subs:hover .rune-viewer-sub--total-fixed {
  color: #d9d6d0;
}

.rune-viewer-subs:hover .rune-viewer-sub--total-grindable {
  color: #f6b21b;
}

.rune-viewer-grind {
  color: #f6b21b;
}

.rune-viewer-sub .gemmed-icon {
  top: 0;
  width: 22px;
  height: 22px;
  margin-left: 0;
  margin-right: 2px;
}

.rune-viewer-sub .deck-usage-trigger {
  width: 21px;
  height: 21px;
  margin-left: 0;
  vertical-align: -4px;
}

.rune-viewer-sub .deck-usage-icon {
  width: 18px;
  height: 18px;
}

.rune-viewer-sub .grind-stock-trigger {
  vertical-align: -4px;
}

.rune-viewer-sub .craft-stock-icon {
  width: 21px;
  height: 21px;
  flex-basis: 21px;
}

.rune-viewer-sub .craft-stock-icon + .craft-stock-icon {
  margin-left: -7px;
}

.rune-viewer-sub .gemmed-icon + .grind-stock-trigger,
.rune-viewer-sub .deck-usage-trigger + .grind-stock-trigger,
.rune-viewer-sub .grind-stock-trigger + .grind-stock-trigger {
  margin-left: -3px;
}

.rune-viewer-sub .deck-usage-trigger + .gemmed-icon {
  margin-left: -2px;
}

.rune-viewer-footer {
  margin-top: 14px;
  min-height: 27px;
  padding: 0 10px 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: start;
  gap: 12px;
  transform: translateY(-8px);
}

.rune-viewer-effect {
  min-width: 0;
  color: #aec60a;
  font-size: 17px;
  line-height: 1.2;
  text-shadow: 0 2px 1px #132300;
}

.rune-viewer-actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.rune-viewer-actions .badge + .badge {
  margin-left: 0;
}

.rune-viewer-grid--3 .rune-viewer-card,
.rune-viewer-grid--4 .rune-viewer-card {
  padding: 10px 12px;
  gap: 8px;
}

.rune-viewer-grid--3 .rune-viewer-card-head strong,
.rune-viewer-grid--4 .rune-viewer-card-head strong {
  padding: 0 76px 0 42px;
  font-size: 18px;
}

.rune-viewer-grid--3 .rune-viewer-card-main,
.rune-viewer-grid--4 .rune-viewer-card-main {
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 10px;
  padding-right: 124px;
}

.rune-viewer-grid--3 .rune-viewer-left,
.rune-viewer-grid--4 .rune-viewer-left {
  width: 80px;
  min-width: 80px;
}

.rune-viewer-grid--3 .rune-viewer-art,
.rune-viewer-grid--4 .rune-viewer-art {
  width: 80px;
  height: 80px;
  flex-basis: 80px;
}

.rune-viewer-grid--3 .rune-viewer-stars img,
.rune-viewer-grid--4 .rune-viewer-stars img {
  width: 15px;
}

.rune-viewer-grid--3 .rune-viewer-stars img + img,
.rune-viewer-grid--4 .rune-viewer-stars img + img {
  margin-left: -4px;
}

.rune-viewer-grid--3 .rune-viewer-level,
.rune-viewer-grid--4 .rune-viewer-level {
  font-size: 12px;
  font-weight: 650;
}

.rune-viewer-grid--3 .rune-viewer-info,
.rune-viewer-grid--4 .rune-viewer-info {
  min-height: 80px;
  gap: 9px;
}

.rune-viewer-grid--3 .rune-viewer-main-stat,
.rune-viewer-grid--4 .rune-viewer-main-stat {
  font-size: 21px;
}

.rune-viewer-grid--3 .rune-viewer-innate,
.rune-viewer-grid--4 .rune-viewer-innate,
.rune-viewer-grid--3 .rune-viewer-sub,
.rune-viewer-grid--4 .rune-viewer-sub,
.rune-viewer-grid--3 .rune-viewer-effect,
.rune-viewer-grid--4 .rune-viewer-effect {
  font-size: 17px;
}

.rune-viewer-grid--3 .rune-viewer-slot-img,
.rune-viewer-grid--4 .rune-viewer-slot-img {
  left: 16%;
  top: 17%;
  width: 68%;
  height: 68%;
}

.rune-viewer-grid--3 .rune-viewer-set-img,
.rune-viewer-grid--4 .rune-viewer-set-img {
  left: 50%;
  top: 51%;
  width: 38%;
  height: 38%;
}

.rune-viewer-grid--3 .rune-viewer-quality,
.rune-viewer-grid--4 .rune-viewer-quality {
  width: 118px;
  height: 27px;
  font-size: 14px;
}

.rune-viewer-grid--3 .rune-viewer-score,
.rune-viewer-grid--4 .rune-viewer-score {
  width: 118px;
  height: 26px;
  font-size: 14px;
}

.rune-viewer-grid--3 .rune-viewer-quality-row,
.rune-viewer-grid--4 .rune-viewer-quality-row {
  right: 10px;
  width: 118px;
}

.rune-viewer-grid--3 .rune-viewer-score,
.rune-viewer-grid--4 .rune-viewer-score {
  right: 10px;
  width: 118px;
}

.rune-viewer-grid--3 .rune-viewer-quality-row,
.rune-viewer-grid--4 .rune-viewer-quality-row {
  top: 55px;
}

.rune-viewer-grid--3 .rune-viewer-score,
.rune-viewer-grid--4 .rune-viewer-score {
  top: 88px;
}

@media (max-width: 900px) {
  .rune-viewer-grid,
  .rune-viewer-grid--1,
  .rune-viewer-grid--2,
  .rune-viewer-grid--3,
  .rune-viewer-grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .rune-viewer-card-main {
    grid-template-columns: 80px minmax(0, 1fr);
    padding-right: 0;
  }

  .rune-viewer-left,
  .rune-viewer-grid--3 .rune-viewer-left,
  .rune-viewer-grid--4 .rune-viewer-left {
    width: 80px;
    min-width: 80px;
  }

  .rune-viewer-art,
  .rune-viewer-grid--3 .rune-viewer-art,
  .rune-viewer-grid--4 .rune-viewer-art {
    width: 80px;
    height: 80px;
    flex-basis: 80px;
  }

  .rune-viewer-quality-row,
  .rune-viewer-score,
  .rune-viewer-grid--3 .rune-viewer-quality-row,
  .rune-viewer-grid--4 .rune-viewer-quality-row,
  .rune-viewer-grid--3 .rune-viewer-score,
  .rune-viewer-grid--4 .rune-viewer-score {
    position: static;
    width: min(170px, 100%);
    justify-content: flex-start;
  }

  .rune-viewer-card-head strong {
    white-space: normal;
  }

  .rune-viewer-score,
  .rune-viewer-grid--3 .rune-viewer-score,
  .rune-viewer-grid--4 .rune-viewer-score {
    width: 132px;
  }
}

@media (max-width: 540px) {
  .rune-viewer-controls {
    justify-content: flex-start;
  }

  .rune-viewer-card {
    padding: 10px;
  }

  .rune-viewer-card-main,
  .rune-viewer-grid--3 .rune-viewer-card-main,
  .rune-viewer-grid--4 .rune-viewer-card-main {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 10px;
    padding-right: 0;
  }

  .rune-viewer-left,
  .rune-viewer-grid--3 .rune-viewer-left,
  .rune-viewer-grid--4 .rune-viewer-left {
    width: 80px;
    min-width: 80px;
  }

  .rune-viewer-art,
  .rune-viewer-grid--3 .rune-viewer-art,
  .rune-viewer-grid--4 .rune-viewer-art {
    width: 80px;
    height: 80px;
    flex-basis: 80px;
  }

  .rune-viewer-card-head {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .rune-viewer-main-stat,
  .rune-viewer-grid--3 .rune-viewer-main-stat,
  .rune-viewer-grid--4 .rune-viewer-main-stat {
    font-size: 19px;
  }
}

.top-speed-button span {
  color: #ffd369;
}

.top-speed-modal {
  width: min(1050px, 97vw);
  height: min(860px, 94vh);
  max-height: 94vh;
  overflow: hidden;
}

.top-speed-modal > .modal-head {
  flex: 0 0 auto;
}

.top-speed-modal .modal-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.top-speed-body {
  flex: 1 1 0;
  min-height: 0;
  display: block;
  overflow-y: scroll;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.top-speed-group + .top-speed-group {
  margin-top: 9px;
}

.top-speed-group {
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: #1c1b1a;
  overflow: visible;
}

.top-speed-row {
  width: 100%;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.top-speed-row:hover {
  background: rgba(142, 197, 232, 0.08);
}

.top-speed-row strong {
  color: #f3d08b;
}

.top-speed-row span {
  color: #bfe6ff;
  font-variant-numeric: tabular-nums;
}

.top-speed-details {
  display: grid;
  gap: 9px;
  padding: 0 10px 10px;
  overflow: visible;
}

.top-speed-details[hidden] {
  display: none;
}

.top-speed-build {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #222120;
}

.top-speed-build header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.top-speed-build header span {
  color: #9ee6ad;
  font-weight: 850;
}

.top-speed-runes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.top-speed-runes > div {
  display: grid;
  gap: 2px;
  padding: 7px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: #191817;
}

.top-speed-runes > div.is-weakest {
  border-color: #ff9b72;
  background: rgba(92, 48, 30, 0.35);
}

.top-speed-runes strong {
  color: #bfe6ff;
}

.top-speed-runes small,
.top-speed-build p {
  color: var(--muted);
}

.grind-grid-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.grind-grid {
  min-width: 980px;
  table-layout: auto;
}

.grind-grid th,
.grind-grid td {
  width: auto;
  padding: 7px 8px;
}

.grind-grid input {
  width: 76px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #1b1b1a;
  color: var(--text);
  padding: 0 8px;
  font-variant-numeric: tabular-nums;
}

.stock-modal {
  width: min(860px, 94vw);
}

.stock-grid-wrap {
  overflow-x: hidden;
}

.stock-grid {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.stock-grid th,
.stock-grid td {
  white-space: normal;
  overflow-wrap: anywhere;
}

.stock-grid th:nth-child(1),
.stock-grid td:nth-child(1) {
  width: 13%;
}

.stock-grid th:nth-child(2),
.stock-grid td:nth-child(2) {
  width: 17%;
}

.stock-grid th:nth-child(3),
.stock-grid td:nth-child(3) {
  width: 25%;
}

.stock-grid th:nth-child(4),
.stock-grid td:nth-child(4) {
  width: 15%;
}

.stock-grid th:nth-child(5),
.stock-grid td:nth-child(5) {
  width: 18%;
}

.stock-grid th:nth-child(6),
.stock-grid td:nth-child(6) {
  width: 12%;
}

.gem-bounds-modal {
  width: min(620px, 94vw);
}

.grind-bounds-modal {
  width: min(1120px, 98vw);
}

.gem-bounds-modal .modal-note,
.grind-bounds-modal .modal-note {
  font-size: 14px;
  line-height: 1.55;
  color: #ddd7ce;
}

.bounds-grid-wrap {
  overflow-x: hidden;
}

.bounds-grid {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.bounds-grid th,
.bounds-grid td {
  padding: 6px 4px;
  white-space: normal;
}

.bounds-grid input {
  width: 100%;
  min-width: 0;
  padding: 0 5px;
}

.gem-bounds-grid th:nth-child(1),
.gem-bounds-grid td:nth-child(1),
.gem-bounds-grid th:nth-child(2),
.gem-bounds-grid td:nth-child(2) {
  width: 30%;
}

.gem-bounds-grid th:nth-child(3),
.gem-bounds-grid td:nth-child(3),
.gem-bounds-grid th:nth-child(4),
.gem-bounds-grid td:nth-child(4) {
  width: 20%;
}

.grind-bounds-grid th:nth-child(1),
.grind-bounds-grid td:nth-child(1) {
  width: 10%;
}

.grind-bounds-grid th:nth-child(2),
.grind-bounds-grid td:nth-child(2) {
  width: 12%;
}

@media (max-width: 840px) {
  .app-shell {
    padding: 10px 8px 18px;
  }

  .account-relic-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .account-relic-filter-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .account-relic-filter-row > span {
    min-width: 0;
  }

  .account-relic-reset {
    margin-left: 0;
  }

  .topbar,
  .drop-zone {
    align-items: stretch;
    flex-direction: column;
  }

  .optimizer-entry-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .optimizer-entry-status {
    text-align: left;
  }

  .optimizer-view-cards,
  .optimizer-guide-grid {
    grid-template-columns: 1fr;
  }

  .optimizer-view-card {
    grid-template-rows: 150px auto;
  }

  .rune-sales-advice-modal,
  .rune-sales-settings-modal {
    width: min(100%, 98vw);
  }

  .rune-sales-page,
  .rune-sales-summary-grid,
  .rune-sales-impact-grid,
  .rune-sales-profile-controls {
    grid-template-columns: 1fr;
  }

  .rune-sales-checkbox-grid,
  .rune-sales-set-grid,
  .rune-sales-main-grid,
  .rune-sales-substat-grid,
  .rune-sales-set-priority {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rune-sales-page-summary dl {
    grid-template-columns: 1fr;
  }

  .stage-control {
    justify-content: space-between;
  }

  .status-line {
    min-width: 0;
    text-align: left;
  }

  .result-count {
    width: 100%;
    margin-left: 0;
  }

  .counter-reset-button + .result-count {
    width: auto;
  }

  .filter-popover[data-filter-key] {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
  }

  .table-shell {
    max-height: calc(100vh - 330px);
  }

  .farm-grid,
  .farm-set-breakdown {
    grid-template-columns: 1fr;
  }

  .farm-head-actions {
    width: 100%;
    flex-wrap: wrap;
  }
}

@media (max-width: 560px) {
  .account-relic-kpis,
  .account-relic-grid {
    grid-template-columns: 1fr;
  }

  .filter-popover[data-filter-key="setSlot"] .filter-section-grid--two,
  .filter-section-grid--two,
  .filter-options--settings-grid {
    grid-template-columns: 1fr;
  }

  .filter-popover[data-filter-key="setSlot"] .grouped-filter-section:first-child .filter-options--compact {
    grid-template-columns: 1fr;
  }

  .filter-popover[data-filter-key="craftStats"] .filter-options--compact {
    grid-template-columns: 1fr;
  }

  .filter-options--columns {
    grid-template-columns: 1fr;
  }
}

.profile-check-shell {
  width: min(1500px, 100%);
}

.profile-check-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 8px 0 12px;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(12px);
}

.profile-level-control {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.profile-level-control select {
  min-width: 92px;
}

.profile-check-content {
  display: grid;
  gap: 16px;
}

.profile-empty-state {
  min-height: 220px;
  display: grid;
  place-content: center;
  gap: 8px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.profile-empty-state strong {
  color: var(--text);
  font-size: 18px;
}

.profile-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background:
    radial-gradient(circle at 5% 0%, rgba(84, 125, 196, 0.19), transparent 38%),
    var(--panel);
}

.profile-hero h2,
.profile-section h2,
.profile-card h3 {
  margin: 0;
}

.profile-hero p {
  margin: 7px 0 0;
  color: var(--muted);
}

.profile-verdict {
  min-width: 280px;
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.profile-verdict strong {
  font-size: 16px;
}

.profile-verdict span {
  color: var(--muted);
  font-size: 12px;
}

.profile-verdict > b {
  font-size: 30px;
  line-height: 1;
}

.profile-account-title {
  min-width: 0;
}

.profile-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.profile-kpi {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 12px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.profile-kpi > span,
.profile-kpi > small {
  color: var(--muted);
}

.profile-kpi > strong {
  font-size: 20px;
}

.profile-kpi > i {
  grid-column: 1 / -1;
  height: 5px;
  overflow: hidden;
  border-radius: 99px;
  background: #303338;
}

.profile-kpi > i > b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #557fca, #65c795);
}

.profile-kpi > small {
  grid-column: 1 / -1;
  line-height: 1.3;
}

.profile-verdict--ready {
  border-color: rgba(92, 197, 132, 0.58);
  background: rgba(52, 135, 84, 0.13);
}

.profile-verdict--review {
  border-color: rgba(225, 180, 70, 0.58);
  background: rgba(166, 119, 23, 0.13);
}

.profile-verdict--work {
  border-color: rgba(224, 102, 102, 0.58);
  background: rgba(155, 49, 49, 0.13);
}

.profile-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.profile-card {
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.profile-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.profile-card > header > span {
  color: var(--muted);
  font-size: 12px;
}

.profile-summary-list ul {
  margin: 0;
  padding-left: 19px;
  display: grid;
  gap: 8px;
  color: var(--muted);
  line-height: 1.35;
}

.profile-summary-list--good li::marker {
  color: #62c98a;
}

.profile-summary-list--warn li::marker {
  color: #e6b94f;
}

.profile-method-card p {
  margin: 0 0 8px;
  color: var(--muted);
  line-height: 1.4;
}

.profile-section {
  display: grid;
  gap: 11px;
}

.profile-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}

.profile-section-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.profile-benchmark-groups {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.8fr);
  gap: 12px;
  align-items: start;
}

.profile-benchmark-list {
  display: grid;
  gap: 6px;
}

.profile-benchmark-row {
  width: 100%;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) minmax(145px, auto);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: left;
  background: #1f2123;
}

.profile-benchmark-row:hover {
  border-color: #6f8fc6;
}

.profile-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d46464;
}

.profile-status--valid .profile-status-dot {
  background: #62c98a;
  box-shadow: 0 0 0 3px rgba(98, 201, 138, 0.12);
}

.profile-status--near .profile-status-dot {
  background: #e6b94f;
  box-shadow: 0 0 0 3px rgba(230, 185, 79, 0.12);
}

.profile-benchmark-copy,
.profile-benchmark-result {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.profile-benchmark-copy small,
.profile-benchmark-result small {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-benchmark-result {
  text-align: right;
}

.profile-build-details {
  margin: 0 4px 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: #191b1d;
}

.profile-build-details[hidden] {
  display: none;
}

.profile-portfolio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.profile-portfolio-item {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: left;
  background: #1f2225;
}

.profile-portfolio-item:hover {
  border-color: #6f8fc6;
}

.profile-portfolio-item span,
.profile-portfolio-item small,
.profile-muted {
  color: var(--muted);
}

.profile-portfolio-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-portfolio > .profile-build-details {
  grid-column: 1 / -1;
}

.profile-build-detail + .profile-build-detail {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.profile-build-detail > header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.profile-build-detail > header span {
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}

.profile-rune-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.profile-rune-list > div {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 7px 8px;
  border-radius: 6px;
  background: #24272a;
}

.profile-rune-list span,
.profile-rune-list small {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-two-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.profile-speed-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.profile-speed-card {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #1f2123;
}

.profile-speed-card > div:not(.profile-build-details) {
  display: grid;
  gap: 5px;
  margin-top: 8px;
}

.profile-speed-card button {
  display: flex;
  justify-content: space-between;
  gap: 5px;
  padding: 7px 8px;
  border-radius: 6px;
  background: #282b2f;
  text-align: left;
}

.profile-speed-card button:hover {
  border-color: #6f8fc6;
}

.profile-speed-card small {
  color: var(--muted);
}

.profile-monster-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.profile-monster-card {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.profile-monster-card.is-missing {
  opacity: 0.72;
  border-style: dashed;
}

.profile-monster-card > header {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}

.profile-monster-card > header img,
.profile-team-members img {
  width: 44px;
  height: 44px;
  border-radius: 9px;
  object-fit: cover;
  background: #24272a;
}

.profile-monster-card > header > span,
.profile-team-members span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.profile-monster-card small,
.profile-monster-card p,
.profile-team-members small,
.profile-formula-list small {
  color: var(--muted);
}

.profile-monster-card > header > b,
.profile-team-card > header > b {
  padding: 4px 7px;
  border-radius: 99px;
  color: #e6b94f;
  background: rgba(230, 185, 79, 0.11);
  font-size: 11px;
}

.profile-monster-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin-top: 11px;
}

.profile-monster-stats span {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 6px;
  border-radius: 6px;
  color: var(--muted);
  background: #222529;
  font-size: 10px;
}

.profile-monster-stats b {
  color: var(--text);
  font-size: 12px;
}

.profile-monster-card p {
  min-height: 34px;
  margin: 10px 0;
  font-size: 11px;
  line-height: 1.4;
}

.profile-monster-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.profile-monster-actions > span {
  margin-right: auto;
  color: #65c795;
  font-size: 12px;
}

.profile-monster-actions button {
  padding: 5px 7px;
  border-radius: 6px;
  background: #292d32;
  font-size: 11px;
}

.profile-team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.profile-team-card.is-ready {
  border-color: rgba(92, 197, 132, 0.42);
}

.profile-team-card > header > div {
  display: grid;
  gap: 3px;
}

.profile-team-card > header span {
  color: var(--muted);
  font-size: 11px;
}

.profile-team-card.is-ready > header > b {
  color: #65c795;
  background: rgba(92, 197, 132, 0.11);
}

.profile-team-members {
  display: grid;
  gap: 6px;
}

.profile-team-members > div {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border-radius: 7px;
  background: #202327;
}

.profile-team-members > div.is-missing {
  opacity: 0.55;
}

.profile-team-members img {
  width: 38px;
  height: 38px;
}

.profile-team-members > div > b {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.profile-formula-list {
  display: grid;
  gap: 5px;
  margin-top: 9px;
}

.profile-speedtune-result {
  margin-top: 10px;
  padding: 9px;
  border: 1px solid rgba(98, 201, 138, 0.35);
  border-radius: 8px;
  background: rgba(52, 135, 84, 0.08);
}

.profile-speedtune-result > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}

.profile-speedtune-result > header > span {
  display: grid;
  gap: 2px;
}

.profile-speedtune-result > header small,
.profile-speedtune-result button small {
  color: var(--muted);
}

.profile-speedtune-result > header > b {
  color: #65c795;
  font-size: 11px;
}

.profile-speedtune-proof {
  margin: -1px 0 7px;
  color: var(--muted);
  font-size: 11px;
}

.profile-speedtune-result > div {
  display: grid;
  gap: 5px;
}

.profile-speedtune-result button {
  display: grid;
  grid-template-columns: minmax(145px, 1fr) minmax(125px, auto) minmax(190px, auto);
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  text-align: left;
  background: #24282b;
}

.profile-speedtune-result button:hover {
  border-color: #6f8fc6;
}

.profile-speedtune-result button > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.profile-speedtune-result button > span:first-child {
  grid-template-columns: 22px minmax(0, 1fr);
}

.profile-speedtune-result button > span:first-child small {
  grid-column: 2;
}

.profile-speedtune-result button i {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #65c795;
  background: rgba(98, 201, 138, 0.13);
  font-style: normal;
}

.profile-speedtune-result .profile-build-details {
  margin: 0;
}

.profile-speedtune-empty {
  margin-top: 10px;
  padding: 9px;
  border: 1px dashed #555b63;
  border-radius: 7px;
  color: var(--muted);
  font-size: 11px;
}

.profile-formula-list > span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.profile-formula-list code {
  color: #86a9e5;
}

.profile-formula-list small {
  grid-column: 1 / -1;
}

.profile-box-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.profile-box-grid article {
  display: grid;
  gap: 3px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
}

.profile-box-grid strong {
  font-size: 20px;
}

.profile-box-grid span {
  color: var(--muted);
  font-size: 11px;
}

.profile-global-grid {
  display: grid;
  gap: 8px;
}

.profile-global-metric {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 12px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #1f2123;
}

.profile-global-metric span {
  display: grid;
}

.profile-global-metric small {
  color: var(--muted);
}

.profile-global-metric > b {
  align-self: center;
  color: #e6b94f;
}

.profile-global-metric.is-valid > b {
  color: #62c98a;
}

.profile-global-metric > i {
  grid-column: 1 / -1;
  height: 4px;
  border-radius: 99px;
  overflow: hidden;
  background: #303338;
}

.profile-global-metric > i span {
  height: 100%;
  border-radius: inherit;
  background: #6f8fc6;
}

.profile-pending-list {
  display: grid;
  gap: 7px;
}

.profile-pending-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border: 1px dashed #555b63;
  border-radius: 8px;
}

.profile-pending-row > span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.profile-pending-row small {
  color: var(--muted);
}

.profile-pending-row > b {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 99px;
  color: #e6b94f;
  background: rgba(230, 185, 79, 0.11);
  font-size: 11px;
}

@media (max-width: 1050px) {
  .profile-summary-grid,
  .profile-two-columns,
  .profile-benchmark-groups,
  .profile-team-grid {
    grid-template-columns: 1fr;
  }

  .profile-kpi-grid,
  .profile-box-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-monster-grid,
  .profile-portfolio {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .profile-hero,
  .profile-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .profile-verdict {
    min-width: 0;
  }

  .profile-benchmark-row {
    grid-template-columns: 10px minmax(0, 1fr);
  }

  .profile-benchmark-result {
    grid-column: 2;
    text-align: left;
  }

  .profile-rune-list,
  .profile-speed-grid,
  .profile-kpi-grid,
  .profile-box-grid,
  .profile-monster-grid,
  .profile-portfolio {
    grid-template-columns: 1fr;
  }

  .profile-monster-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-team-members > div {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .profile-team-members > div > b {
    grid-column: 2;
  }

  .profile-speedtune-result > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .profile-speedtune-result button {
    grid-template-columns: 1fr;
  }
}

.siege-planner-content {
  padding: 18px;
}

.siege-tool {
  display: grid;
  gap: 16px;
}

.siege-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 2px solid rgba(92, 132, 214, 0.9);
}

.siege-tabs button,
.siege-tabs a {
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font: inherit;
  font-weight: 760;
  cursor: pointer;
}

.siege-tabs button:hover,
.siege-tabs a:hover,
.siege-tabs button.is-active,
.siege-tabs a.is-active {
  background: rgba(72, 116, 205, 0.22);
  color: var(--text);
}

.siege-tabs button.is-active,
.siege-tabs a.is-active {
  border-color: rgba(92, 132, 214, 0.95);
}

.siege-tab-panel {
  min-width: 0;
}

.siege-layout {
  display: grid;
  grid-template-columns: minmax(330px, 420px) minmax(760px, 1fr);
  gap: 18px;
  align-items: start;
}

.siege-builder-panel,
.siege-map-panel,
.siege-overview-panel,
.siege-table-panel,
.siege-reserve-panel {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(18, 20, 24, 0.92);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
}

.siege-builder-panel {
  padding: 16px;
  position: sticky;
  top: 14px;
  z-index: 2;
}

.siege-panel-head,
.siege-builder-actions,
.siege-picker-modal header,
.siege-picker-modal footer,
.siege-tower-modal header,
.siege-tower-modal footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.siege-panel-head h2,
.siege-picker-modal h2,
.siege-tower-modal h2 {
  margin: 0;
  font-size: 1.18rem;
}

.siege-panel-head p,
.siege-picker-modal p,
.siege-tower-modal p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.siege-team-form {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.siege-team-row {
  display: grid;
  grid-template-columns: 112px 40px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.siege-team-row > label {
  padding-top: 10px;
  color: var(--text);
  font-weight: 750;
}

.siege-pick-button {
  width: 40px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
  font-size: 1.1rem;
  cursor: pointer;
}

.siege-pick-button:hover {
  color: var(--text);
  border-color: rgba(122, 162, 255, 0.7);
}

.siege-search-wrap {
  position: relative;
  min-width: 0;
}

.siege-search-wrap input,
.siege-picker-search,
.siege-notes-field textarea,
.siege-map-notes textarea,
.siege-tower-select-row select {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
  font: inherit;
}

.siege-search-wrap input,
.siege-picker-search,
.siege-tower-select-row select {
  min-height: 42px;
  padding: 0 12px;
}

.siege-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 360px;
  overflow: auto;
  z-index: 25;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: #2b2d2f;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5);
}

.siege-suggestions button {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 28px;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-left: 3px solid rgba(122, 162, 255, 0.82);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.siege-suggestions button:hover {
  background: rgba(255, 255, 255, 0.09);
}

.siege-suggestions img,
.siege-suggestions .siege-monster-split-image {
  width: 42px;
  height: 42px;
  border-radius: 7px;
  overflow: hidden;
}

.siege-suggestions img {
  object-fit: cover;
}

.siege-suggestions span {
  display: grid;
  min-width: 0;
}

.siege-suggestions strong,
.siege-suggestions small,
.siege-suggestions em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.siege-suggestions small {
  color: var(--muted);
}

.siege-suggestions em {
  color: #83e9ff;
  font-style: normal;
}

.siege-element-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
  overflow: hidden;
}

.siege-element-icon img {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  object-fit: contain;
}

.siege-chip-row {
  grid-column: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 0;
}

.siege-monster-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(122, 162, 255, 0.13);
  color: var(--text);
  padding: 3px 9px 3px 4px;
  cursor: pointer;
}

.siege-monster-chip img,
.siege-monster-chip .siege-monster-split-image {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 auto;
}

.siege-monster-chip img {
  object-fit: cover;
}

.siege-monster-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.siege-notes-field {
  display: grid;
  gap: 7px;
  margin-top: 16px;
  color: var(--text);
  font-weight: 720;
}

.siege-notes-field textarea,
.siege-map-notes textarea {
  resize: vertical;
  min-height: 76px;
  padding: 10px 12px;
  font-weight: 500;
}

.siege-builder-actions {
  justify-content: flex-end;
  margin-top: 14px;
}

.primary-button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid #6fd182;
  border-radius: 7px;
  background: linear-gradient(180deg, #58c46c, #36a24c);
  color: #fff;
  font: inherit;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.primary-button:hover {
  border-color: #91ec9f;
  filter: brightness(1.05);
}

.danger-button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid #f27575;
  border-radius: 7px;
  background: linear-gradient(180deg, #e76565, #b93f3f);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.siege-overview-grid {
  display: grid;
  grid-template-columns: minmax(320px, 520px) minmax(320px, 1fr);
  gap: 16px;
}

.siege-overview-panel,
.siege-table-panel,
.siege-reserve-panel {
  padding: 16px;
}

.siege-overview-panel h2,
.siege-reserve-group h2 {
  margin: 0 0 14px;
  color: var(--text);
}

.siege-form-grid {
  display: grid;
  gap: 12px;
}

.siege-form-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-weight: 720;
}

.siege-form-grid input,
.siege-form-grid select,
.siege-reserve-search input {
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
  padding: 0 12px;
  font: inherit;
}

.siege-plan-picker {
  position: relative;
  min-width: 0;
}

.siege-plan-picker-button {
  width: 100%;
  min-height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(97, 142, 212, 0.75);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
  padding: 0 12px;
  font: inherit;
  font-weight: 800;
  text-align: left;
}

.siege-plan-picker-button span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.siege-plan-picker-button:hover,
.siege-plan-picker-button:focus-visible,
.siege-plan-picker.is-open .siege-plan-picker-button {
  border-color: rgba(111, 164, 246, 0.95);
  box-shadow: 0 0 0 3px rgba(69, 126, 213, 0.25);
  outline: none;
}

.siege-plan-picker-menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow: auto;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: #34323d;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.42);
}

.siege-plan-picker-menu button {
  width: 100%;
  min-height: 28px;
  display: block;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #f4f3f7;
  padding: 5px 8px;
  font: inherit;
  font-weight: 800;
  text-align: left;
}

.siege-plan-picker-menu button:hover,
.siege-plan-picker-menu button:focus-visible,
.siege-plan-picker-menu button.is-active {
  background: rgba(255, 255, 255, 0.16);
  outline: none;
}

.siege-toggle-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.siege-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.siege-kpi-grid span {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.siege-kpi-grid b {
  color: var(--text);
  font-size: 1.3rem;
}

.siege-kpi-grid small,
.siege-muted,
.siege-reserve-help {
  color: var(--muted);
}

.siege-muted {
  margin: 14px 0 0;
}

.siege-table-panel {
  overflow: auto;
}

.siege-table-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.siege-plan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.siege-share-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.siege-share-panel header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  color: var(--text);
  font-weight: 800;
}

.siege-share-panel header small,
.siege-share-empty,
.siege-share-result p {
  color: var(--muted);
  font-weight: 650;
}

.siege-share-search {
  display: grid;
  gap: 8px;
}

.siege-share-search input {
  width: 100%;
}

.siege-share-results {
  display: grid;
  gap: 6px;
}

.siege-share-result,
.siege-shared-guild {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}

.siege-share-result span,
.siege-shared-guild strong,
.siege-shared-guild span {
  min-width: 0;
}

.siege-shared-guild > div:first-child {
  display: grid;
  gap: 2px;
}

.siege-shared-guild > div:first-child span {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 650;
}

.siege-share-list {
  display: grid;
  gap: 8px;
}

.siege-share-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
}

.siege-share-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(142, 197, 232, 0.16);
  color: #cfeeff;
  font-size: 0.78rem;
  font-weight: 850;
}

.siege-share-badge.is-on {
  background: rgba(123, 215, 166, 0.18);
  color: #caffdf;
}

@media (max-width: 760px) {
  .siege-share-result,
  .siege-shared-guild {
    grid-template-columns: minmax(0, 1fr);
  }

  .siege-share-badges {
    justify-content: flex-start;
  }
}

.siege-plan-status {
  margin: 10px 0 0;
  color: var(--muted);
  font-weight: 700;
}

.siege-plan-status.is-error {
  color: #ff9b9b;
}

.siege-data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 840px;
  color: var(--text);
}

.siege-data-table th,
.siege-data-table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px 12px;
  text-align: left;
  vertical-align: middle;
}

.siege-data-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(23, 29, 44, 0.98);
  color: #d8dce8;
  font-size: 0.82rem;
}

.siege-sort-button {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.siege-sort-button:hover {
  color: #fff;
}

.siege-data-table tr.is-excluded {
  opacity: 0.45;
}

.siege-inline-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.siege-teams-layout {
  display: grid;
  grid-template-columns: minmax(330px, 460px) minmax(640px, 1fr);
  gap: 16px;
  align-items: start;
}

.siege-team-slot-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.siege-team-slot-cell span,
.siege-table-monster {
  position: relative;
  display: inline-grid;
  place-items: center;
}

.siege-team-slot-cell img,
.siege-table-monster img,
.siege-team-slot-cell .siege-monster-split-image,
.siege-table-monster .siege-monster-split-image {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  overflow: hidden;
}

.siege-team-slot-cell img,
.siege-table-monster img {
  object-fit: cover;
}

.siege-team-slot-cell b {
  position: absolute;
  right: -5px;
  bottom: -5px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 0.7rem;
}

.siege-row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  min-width: max-content;
}

.siege-row-actions .icon-button {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  flex: 0 0 auto;
}

.siege-teams-table th:last-child,
.siege-teams-table td:last-child {
  min-width: 148px;
  width: 148px;
  padding-right: 12px;
}

.danger-icon-button {
  background: rgba(255, 92, 92, 0.18);
  color: #ffb3b3;
}

.siege-reserve-panel {
  display: grid;
  gap: 14px;
}

.siege-reserve-help {
  margin: 0;
  text-align: center;
  font-weight: 760;
}

.siege-reserve-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 8px;
}

.siege-reserve-group {
  display: grid;
  gap: 10px;
}

.siege-reserve-group h2 {
  border-bottom: 1px solid rgba(213, 184, 74, 0.42);
  padding-bottom: 8px;
  text-align: center;
  letter-spacing: 0;
}

.siege-reserve-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 7px;
}

.siege-reserve-monster {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #171a1d;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
}

.siege-reserve-monster img,
.siege-reserve-monster .siege-monster-split-image {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.siege-reserve-monster img {
  object-fit: cover;
}

.siege-reserve-count {
  position: absolute;
  right: 2px;
  bottom: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  box-sizing: border-box;
}

.siege-monster-split-image {
  position: relative;
  display: block;
  overflow: hidden;
  background: #171a1d;
}

.siege-monster-split-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.siege-monster-split-image .siege-monster-split-classic {
  clip-path: polygon(0 0, 58% 0, 43% 100%, 0 100%);
}

.siege-monster-split-image .siege-monster-split-collab {
  clip-path: polygon(58% 0, 100% 0, 100% 100%, 43% 100%);
}

.siege-monster-split-image::after {
  content: "";
  position: absolute;
  left: 49%;
  top: -9%;
  width: 2px;
  height: 118%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.65);
  transform: rotate(8deg);
  pointer-events: none;
}

.siege-compat-summary {
  margin-top: 14px;
  padding: 11px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
}

.siege-compat-summary p {
  margin: 0;
}

.siege-compat-summary .is-error {
  color: #ff9c9c;
}

.siege-variant-compat-list {
  display: grid;
  gap: 9px;
  margin-top: 10px;
}

.siege-variant-compat,
.siege-assignment-variant {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.14);
}

.siege-defense-icons {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
}

.siege-defense-icons .siege-table-monster img,
.siege-defense-icons .siege-table-monster .siege-monster-split-image {
  width: 34px;
  height: 34px;
}

.siege-owner-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.siege-owner-list span {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  padding: 4px 8px;
  color: var(--text);
  font-size: 0.82rem;
}

.siege-map-panel {
  overflow: auto;
  min-width: 0;
}

.siege-map-panel--full {
  padding: 0;
}

.siege-map-board {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: min(76vh, 820px);
  aspect-ratio: 970 / 700;
  background:
    linear-gradient(90deg, rgba(30, 21, 38, 0.34), rgba(31, 18, 20, 0.16)),
    url("assets/map/SiegeMap_2025-03-23.jpg") center / cover no-repeat;
}

.siege-map-board--full {
  min-height: calc(100vh - 190px);
  min-width: min(1180px, 100%);
}

.siege-map-copy-button,
.siege-map-copy-status {
  position: absolute;
  z-index: 8;
  left: 10px;
  border-radius: 7px;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.siege-map-copy-button {
  top: 10px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(34, 44, 68, 0.82);
  padding: 7px 10px;
  cursor: pointer;
}

.siege-map-copy-button:hover {
  background: rgba(74, 112, 184, 0.9);
}

.siege-map-copy-status {
  top: 48px;
  padding: 5px 8px;
  background: rgba(0, 0, 0, 0.58);
  font-size: 0.78rem;
}

.siege-tower {
  position: absolute;
  left: var(--tower-x);
  top: var(--tower-y);
  z-index: var(--tower-z, 2);
  width: max-content;
  min-width: 112px;
  max-width: 150px;
  min-height: 64px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  background: rgba(28, 16, 26, 0.72);
  color: #fff;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.siege-tower--blue {
  box-shadow: inset 4px 0 0 #44a9ff, 0 16px 34px rgba(0, 0, 0, 0.3);
}

.siege-tower--red {
  box-shadow: inset 4px 0 0 #ff6666, 0 16px 34px rgba(0, 0, 0, 0.3);
}

.siege-tower--yellow {
  box-shadow: inset 4px 0 0 #f5ce26, 0 16px 34px rgba(0, 0, 0, 0.3);
}

.siege-tower header {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 23px;
  align-items: center;
  gap: 3px;
  min-height: 24px;
  padding: 3px 4px 0;
  width: 100%;
}

.siege-tower header b {
  display: grid;
  place-items: center;
  width: 24px;
  height: 22px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.45);
  color: #ffd45a;
}

.siege-tower header span {
  font-size: 0.84rem;
  font-weight: 850;
  text-align: center;
  white-space: nowrap;
}

.siege-tower-gear {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border: 0;
  border-radius: 7px;
  background: #6ea2ff;
  color: #fff;
  cursor: pointer;
}

.siege-tower-defenses {
  display: grid;
  gap: 2px;
  justify-items: start;
  padding: 4px 6px 7px;
}

.siege-mini-defense {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  gap: 3px;
  align-items: center;
}

.siege-mini-defense img,
.siege-mini-defense .siege-monster-split-image {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  overflow: hidden;
}

.siege-qg-team img,
.siege-qg-team .siege-monster-split-image {
  width: 25px;
  height: 25px;
  border-radius: 5px;
  overflow: hidden;
}

.siege-mini-defense img,
.siege-qg-team img {
  object-fit: cover;
}

.siege-mini-count {
  min-width: 20px;
  font-weight: 800;
  text-align: left;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.siege-empty-tower,
.siege-qg-empty {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 700;
}

.siege-headquarters {
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: 0;
  width: min(224px, 23%);
  height: min(346px, 47%);
  padding: 8px 6px;
  background: rgba(24, 18, 38, 0.78);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  overflow: hidden;
}

.siege-headquarters h3,
.siege-map-notes strong {
  margin: 0 0 8px;
  color: #fff;
  font-size: 1rem;
}

.siege-headquarters h3 {
  font-size: 0.92rem;
  white-space: nowrap;
}

.siege-qg-list {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 6px 5px;
  max-height: calc(100% - 34px);
  overflow: auto;
}

.siege-qg-team {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: max-content;
  gap: 2px;
}

.siege-qg-team div {
  display: flex;
  flex: 0 0 auto;
  gap: 1px;
}

.siege-qg-team strong {
  flex: 0 0 auto;
  color: #fff;
}

.siege-map-notes {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: min(300px, 30%);
  height: min(420px, 46%);
  padding: 12px;
  background: rgba(18, 14, 16, 0.72);
}

.siege-map-notes textarea {
  height: calc(100% - 34px);
  min-height: 120px;
  background: rgba(0, 0, 0, 0.22);
}

.siege-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.64);
}

.siege-picker-modal,
.siege-tower-modal,
.siege-assignment-modal {
  width: min(980px, 96vw);
  max-height: 88vh;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: #202225;
  color: var(--text);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.54);
  padding: 16px;
}

.siege-assignment-modal {
  width: min(1120px, 96vw);
}

.siege-assignment-modal header,
.siege-assignment-modal footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.siege-assignment-modal h2 {
  margin: 0;
  font-size: 1.18rem;
}

.siege-assignment-modal p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.siege-assignment-variants {
  display: grid;
  gap: 10px;
  margin: 16px 0;
}

.siege-assignment-variant-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.siege-assignment-owner-actions,
.siege-assignment-current {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.siege-assignment-current {
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.siege-assignment-current span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  background: rgba(129, 201, 149, 0.15);
  color: var(--text);
  padding: 4px 4px 4px 9px;
  font-size: 0.82rem;
}

.siege-assignment-current button {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
  cursor: pointer;
}

.siege-picker-search {
  margin: 14px 0;
}

.siege-monster-gallery {
  display: grid;
  gap: 18px;
  max-height: 55vh;
  overflow: auto;
  padding: 2px;
}

.siege-gallery-group {
  display: grid;
  gap: 10px;
}

.siege-gallery-group h3 {
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(213, 184, 74, 0.42);
  color: var(--text);
  font-size: 1rem;
  text-align: center;
}

.siege-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 6px;
}

.siege-gallery-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0;
  min-height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  padding: 2px;
  cursor: pointer;
}

.siege-gallery-card:hover {
  border-color: rgba(122, 162, 255, 0.86);
  background: rgba(122, 162, 255, 0.16);
}

.siege-gallery-card.is-picked {
  border-color: #4dff54;
  background: rgba(77, 255, 84, 0.16);
  box-shadow:
    0 0 0 2px rgba(77, 255, 84, 0.95),
    0 0 14px rgba(77, 255, 84, 0.72);
}

.siege-gallery-card img,
.siege-gallery-card .siege-monster-split-image {
  width: 42px;
  height: 42px;
  border-radius: 7px;
  overflow: hidden;
}

.siege-gallery-card img {
  object-fit: cover;
}

.siege-gallery-card > span:not(.siege-monster-split-image):not(.siege-reserve-count),
.siege-gallery-card small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.siege-gallery-card > span:not(.siege-monster-split-image):not(.siege-reserve-count),
.siege-gallery-card small {
  display: none;
}

.siege-gallery-card > span:not(.siege-monster-split-image):not(.siege-reserve-count) {
  font-weight: 760;
}

.siege-gallery-card .siege-monster-split-image img {
  width: 100%;
  height: 100%;
}

.siege-gallery-card small {
  color: var(--muted);
}

.siege-tower-form {
  display: grid;
  gap: 10px;
  margin: 16px 0;
}

.siege-tower-editor {
  display: grid;
  gap: 16px;
  margin: 16px 0;
}

.siege-tower-current {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 178px;
  max-height: 178px;
  overflow: hidden;
}

.siege-tower-current-scroll,
.siege-tower-current > .siege-muted {
  min-height: 0;
  overflow: auto;
}

.siege-tower-current-scroll {
  max-height: 132px;
}

.siege-tower-current > .siege-muted {
  display: flex;
  align-items: center;
  margin: 0;
}

.siege-tower-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: var(--text);
}

.siege-tower-section-head span {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.siege-tower-table {
  min-width: 760px;
}

.siege-tower-table select {
  width: min(250px, 100%);
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
  font: inherit;
}

.siege-tower-table .siege-defense-icons {
  min-width: 128px;
}

.siege-tower-current-table {
  min-width: 520px;
}

.siege-tower-select-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  color: var(--text);
  font-weight: 700;
}

.siege-tower-owner-row {
  margin-top: -4px;
  padding-left: 18px;
  opacity: 0.92;
}

@media (max-width: 1180px) {
  .siege-layout {
    grid-template-columns: 1fr;
  }

  .siege-builder-panel {
    position: static;
  }

  .siege-map-board {
    min-height: 760px;
  }
}

@media (max-width: 760px) {
  .siege-planner-content {
    padding: 10px;
  }

  .siege-team-row {
    grid-template-columns: 1fr 44px;
  }

  .siege-team-row > label,
  .siege-search-wrap,
  .siege-chip-row {
    grid-column: 1 / -1;
  }

  .siege-pick-button {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .siege-map-board {
    min-height: 940px;
    aspect-ratio: auto;
  }

  .siege-tower {
    width: max-content;
  }

  .siege-headquarters,
  .siege-map-notes {
    width: 100%;
    position: absolute;
    left: 0;
    right: auto;
  }

  .siege-map-notes {
    top: auto;
    bottom: 214px;
    height: 170px;
  }
}

.rune-advice-feedback-modal {
  z-index: 220;
}

.rune-advice-feedback-dialog {
  width: min(1320px, calc(100vw - 40px));
  max-height: calc(100dvh - 64px);
  overflow: hidden;
}

.rune-advice-feedback-body.modal-body,
.rune-advice-feedback-body {
  /* Ne pas créer de scrollport : la modale grandit jusqu'au max-height. */
  flex: 0 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: hidden !important;
}

.rune-advice-feedback-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 12px;
  align-items: start;
  min-width: 0;
  max-height: 100%;
}

.rune-advice-feedback-rune,
.rune-advice-feedback-editor {
  min-width: 0;
}

.rune-advice-feedback-rune {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
}

.rune-advice-feedback-preview-grid {
  /* Même largeur de carte que la vue rune par rune (une colonne sur trois). */
  width: min(100%, 420px);
  grid-template-columns: minmax(0, 1fr);
}

.rune-advice-feedback-reasoning {
  width: 100%;
  box-sizing: border-box;
  justify-self: stretch;
}

.rune-advice-feedback-reasoning textarea {
  width: 100%;
  min-height: 56px;
  max-height: 88px;
  resize: none;
}

.rune-advice-feedback-editor,
.rune-advice-feedback-section,
.rune-advice-sub-editor {
  display: grid;
  gap: 6px;
}

.rune-advice-feedback-section {
  padding: 8px;
  border: 1px solid rgba(240, 184, 75, 0.22);
  border-radius: 8px;
  background: rgba(16, 16, 16, 0.54);
}

.rune-advice-feedback-section h3,
.rune-advice-admin-panel h4 {
  margin: 0;
  color: var(--gold);
}

.rune-advice-feedback-section p,
.rune-advice-muted {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.rune-advice-verdict-grid,
.rune-advice-admin-verdicts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rune-advice-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 3px 7px;
  border: 1px solid rgba(240, 184, 75, 0.22);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 700;
}

.rune-advice-check.is-disabled {
  opacity: 0.45;
}

.rune-advice-sub-row {
  display: grid;
  /* Label + Action sur une ligne ; les cibles Gem toujours en dessous,
     bornées à la largeur du cadre (évite le débordement ~1100px). */
  grid-template-columns: minmax(0, 1fr) 78px;
  gap: 6px;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  padding: 6px 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.rune-advice-sub-row.is-active {
  align-items: start;
  border-color: rgba(240, 184, 75, 0.8);
  box-shadow: inset 0 0 0 1px rgba(240, 184, 75, 0.2);
}

.rune-advice-targets {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.rune-advice-targets .rune-advice-check {
  flex: 0 1 auto;
  justify-content: center;
  min-height: 24px;
  max-width: 100%;
  padding: 2px 5px;
  font-size: 0.78rem;
  white-space: nowrap;
  box-sizing: border-box;
}

.rune-advice-sub-label {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  min-height: 26px;
  border: 0;
  background: transparent;
  color: var(--gold);
  font: inherit;
  font-weight: 800;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}

.rune-advice-action-select {
  display: grid;
  gap: 2px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1;
}

.rune-advice-sub-row select,
.rune-advice-admin-advice-row select,
.rune-advice-admin-advice-row input,
.rune-advice-feedback-section textarea,
.rune-advice-admin-note textarea {
  width: 100%;
  min-height: 28px;
  border: 1px solid rgba(240, 184, 75, 0.24);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.32);
  color: var(--text);
  font: inherit;
}

.rune-advice-feedback-section textarea,
.rune-advice-admin-note textarea {
  padding: 8px;
  resize: vertical;
}

.rune-advice-gemmed {
  color: #ffb84a;
  font-size: 0.78rem;
}

.rune-advice-admin-grid {
  display: grid;
  gap: 14px;
  padding: 12px;
}

.rune-advice-admin-item {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(240, 184, 75, 0.42);
  border-radius: 9px;
  background: rgba(24, 14, 8, 0.84);
  padding: 14px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
}

.rune-advice-admin-head,
.rune-advice-admin-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.rune-advice-admin-head h3 {
  margin: 3px 0;
  color: #f5a64e;
}

.rune-advice-admin-head p {
  margin: 0;
  color: var(--muted);
}

.rune-advice-admin-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.rune-advice-admin-panel {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
}

.rune-advice-admin-panel--edit {
  border-color: rgba(174, 198, 10, 0.36);
}

.rune-advice-admin-panel--snapshot {
  align-content: start;
}

.rune-advice-admin-snapshot-grid {
  width: min(100%, calc((min(1320px, 98vw) - 20px) / 3));
  grid-template-columns: minmax(0, 1fr);
  justify-self: center;
}

.rune-advice-admin-rune-line,
.rune-advice-admin-stat,
.rune-advice-admin-choice {
  color: var(--text);
}

.rune-advice-admin-rune-line {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.rune-advice-admin-substats {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rune-advice-admin-substats li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #dfc880;
}

.rune-advice-admin-substats strong {
  color: var(--gold);
}

.rune-advice-admin-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.rune-advice-admin-tags span {
  padding: 3px 7px;
  border: 1px solid rgba(240, 184, 75, 0.45);
  border-radius: 999px;
  color: var(--gold);
  background: rgba(240, 184, 75, 0.09);
  font-size: 0.82rem;
  font-weight: 800;
}

.rune-advice-admin-advice-list {
  display: grid;
  gap: 6px;
}

.rune-advice-admin-advice-row {
  display: grid;
  grid-template-columns: minmax(88px, 1fr) 92px minmax(140px, 1.5fr) 32px;
  gap: 6px;
  align-items: center;
}

.rune-advice-admin-note {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-weight: 700;
}

@media (min-width: 1100px) {
  /* Grand écran : pas de scroll sur le body de la modale feedback. */
  .rune-advice-feedback-dialog {
    max-height: calc(100dvh - 72px);
  }

  .rune-advice-feedback-body.modal-body,
  .rune-advice-feedback-body {
    overflow: hidden !important;
  }

  .rune-advice-feedback-section {
    padding: 7px 8px;
  }

  .rune-advice-feedback-section p {
    font-size: 0.82rem;
    line-height: 1.25;
  }

  .rune-advice-verdict-grid {
    gap: 4px;
  }

  .rune-advice-check {
    min-height: 22px;
    padding: 2px 6px;
    font-size: 0.8rem;
  }

  .rune-advice-sub-row {
    padding: 4px 6px;
  }

  .rune-advice-sub-editor {
    gap: 5px;
  }

  .rune-advice-feedback-preview-grid {
    width: min(100%, 380px);
  }

  .rune-advice-feedback-reasoning textarea {
    min-height: 48px;
    max-height: 72px;
  }
}

@media (max-width: 1200px) {
  /* ~1100px : une colonne pour laisser toute la largeur aux cibles Gem. */
  .rune-advice-feedback-layout {
    grid-template-columns: 1fr;
  }

  .rune-advice-feedback-preview-grid {
    width: min(100%, 360px);
  }
}

@media (max-width: 900px) {
  .rune-advice-feedback-layout,
  .rune-advice-admin-compare {
    grid-template-columns: 1fr;
  }

  .rune-advice-sub-row,
  .rune-advice-sub-row.is-active,
  .rune-advice-admin-advice-row {
    grid-template-columns: 1fr;
  }

  .rune-advice-feedback-body.modal-body,
  .rune-advice-feedback-body {
    overflow: auto !important;
  }
}
.embedded-mode #login-view,
.embedded-mode #tools-view {
  display: none !important;
}

.embedded-mode .brand-account-control,
.embedded-mode .shared-account-control {
  display: none !important;
}

.embedded-mode .filter-popover--embedded,
.filter-popover.filter-popover--embedded {
  position: fixed !important;
  /* left/top sont fournis par le bouton Blazor qui a ouvert le menu. */
  transform: none;
  z-index: 10050;
  width: min(520px, calc(100vw - 24px));
  max-height: min(520px, 78vh);
  overflow: auto;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}
/* Account report Blazor: speed build strips fill the complete card width.
   This file loads after the dedicated Blazor stylesheet, so keep the final
   cascade rule here rather than inheriting the SPA's centered strip. */
.account-report-blazor-page .account-speed-card {
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: stretch !important;
  padding-inline: 5px !important;
}

.account-report-blazor-page .account-speed-rune-strip {
  display: grid !important;
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  justify-self: stretch !important;
}