:root {
  color-scheme: dark;
  --bg: #0d1210;
  --panel: #151c18;
  --panel2: #1b241e;
  --line: #2a352d;
  --text: #e8eee8;
  --muted: #929f95;
  --mint: #8be5b6;
  --gold: #e8c881;
  --red: #f2a29a;
  --sidebar: 244px;
  font-family: "Segoe UI", "Malgun Gothic", sans-serif;
  font-size: 14px;
}
* {
  box-sizing: border-box;
}
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  outline-offset: 4px;
}
button,
a {
  touch-action: manipulation;
}
button {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px 14px;
  background: var(--panel2);
  color: var(--text);
  cursor: pointer;
  transition:
    background 0.16s,
    border-color 0.16s,
    transform 0.16s;
}
button:hover:not(:disabled) {
  background: #29372e;
  border-color: #607666;
}
button:active:not(:disabled) {
  transform: translateY(1px);
}
button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}
button.primary {
  background: var(--mint);
  color: #102619;
  border-color: var(--mint);
  font-weight: 700;
}
button.primary:hover:not(:disabled) {
  background: #a3f5ca;
}
button.ghost {
  background: transparent;
}
button.small {
  padding: 7px 11px;
  font-size: 12px;
}
button.icon-button {
  padding: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
a {
  color: var(--mint);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
svg.icon {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  vertical-align: middle;
}
input,
select,
textarea {
  background: #101712;
  border: 1px solid #39483d;
  color: var(--text);
  border-radius: 8px;
  padding: 11px 12px;
  min-width: 0;
  width: 100%;
}
input::placeholder {
  color: #728276;
}
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--mint);
  border-color: transparent;
}
input[type="checkbox"] {
  width: 16px;
  accent-color: var(--mint);
  margin: 0;
}
input[type="number"] {
  font-variant-numeric: tabular-nums;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1 {
  word-break: keep-all;
  font-size: 31px;
  letter-spacing: -1.2px;
  line-height: 1.35;
  font-weight: 700;
}
h2 {
  font-size: 18px;
  letter-spacing: -0.5px;
}
h3 {
  font-size: 15px;
}
small,
.muted {
  color: var(--muted);
}
.positive {
  color: var(--mint);
}
.negative {
  color: var(--red);
}
.gold {
  color: var(--gold);
}
.mono {
  font-variant-numeric: tabular-nums;
}
.eyebrow {
  font-size: 10px;
  letter-spacing: 1.8px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 4px 8px;
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
}
.pill.green {
  background: #193026;
  border-color: #2c4937;
  color: var(--mint);
}
.pill.gold {
  background: #30291a;
  border-color: #5b4b28;
  color: var(--gold);
}
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar);
  border-right: 1px solid var(--line);
  background: #111813;
  display: flex;
  flex-direction: column;
  z-index: 20;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 30px 24px 31px;
}
.brand-symbol {
  width: 35px;
  height: 35px;
  border: 1px solid #b0d2bb;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: var(--mint);
  font-size: 23px;
  font-weight: 800;
  line-height: 1;
  transform: rotate(-5deg);
  background: linear-gradient(150deg, #324637, #17231b);
}
.brand strong {
  font-size: 15px;
  letter-spacing: 1.4px;
}
.brand span {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 2px;
}
.nav {
  display: grid;
  gap: 5px;
  padding: 0 16px;
}
.nav button {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  padding: 12px;
}
.nav button.active {
  color: var(--mint);
  background: #213127;
  border-color: #344c3b;
}
.nav button .count {
  margin-left: auto;
  font-size: 11px;
}
.roster-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32px 24px 15px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.4px;
}
.roster {
  overflow-y: auto;
  padding: 0 14px;
  flex: 1;
}
.roster-person {
  width: 100%;
  display: flex;
  gap: 10px;
  align-items: center;
  text-align: left;
  padding: 11px 9px;
  margin-bottom: 5px;
  background: transparent;
  border-color: transparent;
}
.roster-person.selected {
  background: #1c2820;
  border-color: #344c3b;
}
.avatar {
  width: 34px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: linear-gradient(135deg, #393f33, #252d27);
  color: #c5d3be;
  flex-shrink: 0;
}
.avatar.magic {
  background: linear-gradient(135deg, #37374f, #232733);
  color: #c9b4e5;
}
.avatar.ranged {
  background: linear-gradient(135deg, #464030, #2c2b22);
  color: #e6cd91;
}
.roster-person strong {
  font-size: 12px;
  display: block;
  max-width: 137px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.roster-person small {
  display: block;
  font-size: 10px;
  margin-top: 3px;
}
.roster-person .done {
  margin-left: auto;
  color: var(--mint);
  font-size: 11px;
}
.sidebar-bottom {
  padding: 20px 24px;
  border-top: 1px solid var(--line);
  font-size: 10px;
  color: var(--muted);
  line-height: 1.8;
}
.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mint);
  margin-right: 6px;
}
.main {
  margin-left: var(--sidebar);
  min-height: 100vh;
}
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 76px;
  border-bottom: 1px solid var(--line);
  padding: 0 38px;
  gap: 20px;
}
.breadcrumb {
  color: var(--muted);
  font-size: 12px;
}
.breadcrumb span {
  margin: 0 12px;
  color: #56665b;
}
.breadcrumb b {
  color: var(--text);
  font-weight: 500;
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.workspace {
  max-width: 1460px;
  margin: auto;
  padding: 34px 38px 70px;
}
.page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25px;
  gap: 20px;
}
.page-heading p {
  color: var(--muted);
  font-size: 12px;
  margin-top: 10px;
  line-height: 1.8;
}
.search-strip {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 19px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.search-strip label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}
.search-strip input {
  background: transparent;
  border: 0;
  padding: 6px;
  width: 100%;
}
.search-strip input:focus {
  outline: none;
}
.search-strip select {
  width: 154px;
  font-size: 12px;
  padding: 9px 10px;
  background: #1b241e;
}
.search-results {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  margin-top: -14px;
  margin-bottom: 24px;
  background: var(--panel);
}
.search-results .note {
  padding: 8px;
}
.search-result {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 5px 0;
  background: transparent;
}
.search-result .end {
  margin-left: auto;
  font-size: 12px;
  color: var(--mint);
}
.profile {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.profile .avatar {
  width: 58px;
  height: 65px;
  border-radius: 13px;
}
.profile .avatar svg {
  width: 30px;
  height: 30px;
}
.profile h2 {
  font-size: 24px;
}
.profile .meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 7px;
  color: var(--muted);
  font-size: 11px;
}
.profile-actions {
  display: flex;
  margin-left: auto;
  gap: 8px;
  align-items: center;
}
.notice {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 11px;
  line-height: 1.75;
  color: #9bae9f;
  background: #17211a;
  border: 1px solid #2c3c30;
  padding: 11px 14px;
  border-radius: 9px;
  margin-bottom: 23px;
}
.notice .icon {
  width: 15px;
  height: 15px;
  margin-top: 2px;
}
.notice.warning {
  color: var(--gold);
  background: #282419;
  border-color: #4c432b;
}
.notice button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mint);
  text-decoration: underline;
  white-space: nowrap;
  margin-left: auto;
  font-size: 11px;
}
.metrics {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 13px;
  margin-bottom: 24px;
}
.metric {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  min-height: 145px;
}
.metric.feature {
  background: linear-gradient(110deg, #1f3326, #18291f);
  border-color: #3d6247;
}
.metric .label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #a8b7aa;
}
.metric .value {
  font-size: 29px;
  letter-spacing: -1px;
  font-weight: 600;
  line-height: 1.5;
  margin-top: 9px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.metric .value small {
  font-size: 12px;
  letter-spacing: 0;
  font-weight: 400;
}
.metric .foot {
  font-size: 10px;
  color: var(--muted);
  margin-top: 5px;
  line-height: 1.65;
}
.metric.feature .value {
  color: var(--mint);
}
.metric .change {
  font-size: 12px;
  background: #233e2d;
  color: var(--mint);
  padding: 3px 6px;
  border-radius: 5px;
  letter-spacing: 0;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 17px;
}
.section-heading .sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
}
.section-heading .tools {
  display: flex;
  gap: 7px;
}
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 278px;
  gap: 20px;
  align-items: start;
}
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.panel-pad {
  padding: 20px;
}
.section-tabs {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  padding: 0 20px;
}
.section-tabs button {
  border: 0;
  border-radius: 0;
  padding: 16px 0;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  position: relative;
}
.section-tabs button.active {
  color: var(--mint);
}
.section-tabs button.active:after {
  position: absolute;
  content: "";
  height: 2px;
  background: var(--mint);
  bottom: -1px;
  left: 0;
  right: 0;
}
.equipment-labels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 14px 21px 12px;
  gap: 20px;
  background: #111813;
  border-bottom: 1px solid var(--line);
}
.equipment-labels span {
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--muted);
}
.equipment-labels span:last-child {
  color: var(--mint);
}
.gear-row {
  border-bottom: 1px solid var(--line);
  padding: 19px 20px;
}
.gear-row:last-child {
  border-bottom: 0;
}
.gear-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.item-icon {
  width: 35px;
  height: 35px;
  border: 1px solid #5f5132;
  border-radius: 9px;
  background: #2c281d;
  color: var(--gold);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.item-icon.rare {
  border-color: #514766;
  color: #c6b0e6;
  background: #272332;
}
.gear-heading strong {
  display: block;
  font-size: 12px;
  line-height: 1.5;
}
.gear-heading small {
  display: block;
  font-size: 10px;
  margin-top: 3px;
}
.gear-heading .right {
  margin-left: auto;
  display: flex;
  gap: 7px;
  align-items: center;
}
.gear-lock {
  padding: 5px;
  background: transparent;
  border: 0;
  color: #718576;
}
.gear-lock.locked {
  color: var(--gold);
}
.comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.loadout-side {
  min-width: 0;
  --change-color: #f0c080;
  --change-bg: #35291b;
  --change-border: #967043;
}
.loadout-side.after {
  --change-color: #a2f2c8;
  --change-bg: #1e3d2e;
  --change-border: #559e76;
  border-left: 1px solid var(--line);
  padding-left: 21px;
}
.option-line {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 6px;
  font-size: 11px;
  line-height: 1.85;
  margin: 3px 0;
}
.option-line .kind {
  color: #718477;
  font-size: 10px;
}
.affix,
.gem,
.enchant {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #303d33;
  border-radius: 5px;
  padding: 1px 6px;
  margin: 0 4px 4px 0;
  color: #b7c4b9;
  font-size: 10px;
  vertical-align: middle;
}
.affix.fixed {
  color: var(--gold);
  border-color: #5b4e30;
}
.option-line.has-change {
  background: color-mix(in srgb, var(--change-bg) 45%, transparent);
  border-radius: 5px;
}
.option-line.has-change .kind {
  color: var(--change-color);
  font-weight: 600;
}
.loadout-side .changed {
  color: var(--change-color);
  background: var(--change-bg);
  border-color: var(--change-border);
  font-weight: 600;
}
.enchant small {
  color: inherit;
}
.change-mark {
  font-size: 12px;
  line-height: 1;
  margin-left: 2px;
}
.change-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
}
.change-legend .old { color: #f0c080; }
.change-legend .new { color: #a2f2c8; }
.gem-cost { color: var(--mint); line-height: 1.7; }
.recipe-button { justify-self: start; padding: 3px 0; font-size: 10px; }
.gem-dot {
  width: 6px;
  height: 6px;
  background: var(--mint);
  transform: rotate(45deg);
  margin-right: 2px;
}
.gem.ruby .gem-dot {
  background: #e88780;
}
.gem.rage .gem-dot {
  background: #be97eb;
}
.gem.moon .gem-dot {
  background: #b3caee;
}
.gem.storm .gem-dot {
  background: #ebcb81;
}
.gear-footer {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  margin-top: 9px;
  font-size: 10px;
  color: var(--muted);
}
.gear-footer button {
  font-size: 10px;
  padding: 4px 8px;
  background: transparent;
}
.gear-empty {
  padding: 20px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.side-stack {
  display: grid;
  gap: 17px;
}
.chart-row {
  margin-top: 19px;
}
.chart-row .chart-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-bottom: 9px;
}
.chart-row .chart-label span {
  color: var(--muted);
}
.bar-track {
  height: 5px;
  background: #2a352d;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 5px;
}
.bar-track i {
  display: block;
  height: 100%;
  background: #58695a;
  max-width: 100%;
  border-radius: 4px;
}
.bar-track.after i {
  background: var(--mint);
}
.chart-legend {
  display: flex;
  gap: 15px;
  font-size: 10px;
  color: var(--muted);
  margin-top: 18px;
}
.chart-legend i {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #58695a;
  margin-right: 5px;
}
.chart-legend span:last-child i {
  background: var(--mint);
}
.mini-note {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.8;
  margin-top: 14px;
}
.action-list {
  display: grid;
  gap: 16px;
  margin-top: 20px;
}
.action-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #26382b;
  color: var(--mint);
  display: grid;
  place-items: center;
  font-size: 10px;
  flex-shrink: 0;
}
.action-item strong {
  font-size: 11px;
  display: block;
}
.action-item p {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.7;
  margin-top: 5px;
}
.wide {
  width: 100%;
  margin-top: 18px;
}
.progress-panel {
  padding: 24px;
  background: var(--panel);
  border: 1px solid #4e7458;
  border-radius: 12px;
  margin-bottom: 24px;
}
.progress-panel .progress-title {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.progress-track {
  height: 5px;
  background: #25352a;
  border-radius: 3px;
  margin-top: 17px;
  overflow: hidden;
}
.progress-track i {
  height: 100%;
  width: 35%;
  display: block;
  background: var(--mint);
  animation: progress 1.7s ease-in-out infinite;
}
.progress-panel small {
  display: block;
  margin-top: 13px;
}
.progress-panel button {
  margin-top: 14px;
}
.empty-state {
  padding: 45px 24px;
  text-align: center;
  line-height: 1.8;
  color: var(--muted);
}
.empty-state .icon {
  width: 36px;
  height: 36px;
  margin-bottom: 15px;
  color: var(--mint);
}
.empty-state h3 {
  color: var(--text);
  font-size: 17px;
  margin-bottom: 8px;
}
.empty-state p {
  font-size: 12px;
  max-width: 410px;
  margin: auto;
}
.empty-state button {
  margin-top: 20px;
}
.table-wrap {
  overflow-x: auto;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 12px;
}
.data-table th {
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  padding: 15px 17px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  background: #111913;
}
.data-table td {
  padding: 17px;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.data-table tr:last-child td {
  border: 0;
}
.data-table td small {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.7;
}
.data-table .person-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 130px;
}
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
  margin-top: 21px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
}
.field small {
  font-size: 10px;
  line-height: 1.7;
}
.input-unit {
  display: flex;
  align-items: center;
  gap: 8px;
}
.input-unit small {
  white-space: nowrap;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px;
}
.form-section {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.form-section:first-child {
  padding-top: 0;
}
.form-section h3 {
  margin-bottom: 15px;
}
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1.7;
}
.checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 19px;
  margin-top: 15px;
}
.settings-summary {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 11px;
}
.cost-detail {
  padding: 20px;
}
.cost-step {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.cost-step:last-child {
  border: 0;
}
.cost-step .step-heading {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.cost-step .numbers {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 15px;
  margin-top: 15px;
}
.cost-step .numbers b {
  display: block;
  margin-top: 6px;
  font-size: 17px;
}
.cost-step .numbers small {
  font-size: 10px;
}
.cost-step p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.8;
  margin-top: 12px;
}
.note {
  font-size: 11px;
  line-height: 1.8;
  color: var(--muted);
}
.method-list {
  padding: 0 0 0 18px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 2;
}
.footer-note {
  margin-top: 22px;
  color: #788c7d;
  font-size: 10px;
  line-height: 1.9;
}
.boot {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  flex-direction: column;
}
.boot span {
  color: var(--muted);
  font-size: 12px;
}
dialog {
  border: 1px solid #435747;
  background: #151e18;
  color: var(--text);
  border-radius: 16px;
  width: min(740px, calc(100vw - 28px));
  padding: 0;
  max-height: 90vh;
  box-shadow: 0 30px 100px #0009;
}
dialog::backdrop {
  background: #050a07c9;
  backdrop-filter: blur(5px);
}
.dialog-head {
  padding: 23px 25px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.dialog-head h2 {
  font-size: 19px;
}
.dialog-body {
  padding: 25px;
}
.dialog-actions {
  padding: 18px 25px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  position: sticky;
  bottom: 0;
  background: #151e18;
}
.error {
  color: var(--red);
  font-size: 12px;
  padding: 12px 0;
}
#toast {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translate(-50%, 20px);
  padding: 12px 19px;
  border: 1px solid #4c7456;
  border-radius: 10px;
  background: #22392a;
  color: #d1f3dc;
  box-shadow: 0 10px 40px #0006;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s;
  max-width: 90vw;
  font-size: 12px;
}
#toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.mobile-brand {
  display: none;
}
.spin {
  animation: spin 1.5s linear infinite;
}
.loading-dots {
  opacity: 0.7;
}
.comparison-page .metrics {
  margin-top: 22px;
}
.price-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.view-toggle {
  display: flex;
  gap: 3px;
  padding: 3px;
  background: #0e1710;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.view-toggle button {
  border: 0;
  font-size: 11px;
  padding: 6px 10px;
  background: transparent;
  color: var(--muted);
}
.view-toggle button.active {
  background: #293a2c;
  color: var(--mint);
}
.price-search {
  max-width: 230px;
}
.gap-top {
  margin-top: 24px;
}
@keyframes progress {
  0% {
    transform: translateX(-110%);
  }
  100% {
    transform: translateX(390%);
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@media (min-width: 1700px) {
  .workspace {
    padding-top: 44px;
  }
  .gear-row {
    padding: 23px;
  }
  .metric {
    padding: 24px;
  }
}
@media (max-width: 1200px) {
  :root {
    --sidebar: 210px;
  }
  .brand {
    padding-left: 18px;
  }
  .brand strong {
    font-size: 13px;
  }
  .workspace {
    padding: 27px 25px;
  }
  .topbar {
    padding: 0 25px;
  }
  .split {
    grid-template-columns: minmax(0, 1fr) 245px;
    gap: 15px;
  }
  .metrics {
    gap: 9px;
  }
  .metric {
    padding: 16px;
  }
  .metric .value {
    font-size: 25px;
  }
  .comparison {
    gap: 14px;
  }
  .loadout-side.after {
    padding-left: 13px;
  }
  .price-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 1000px) {
  .split {
    grid-template-columns: 1fr;
  }
  .side-stack {
    grid-template-columns: 1fr 1fr;
  }
  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .profile-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .page-heading {
    align-items: flex-start;
  }
  .page-heading h1 {
    font-size: 27px;
  }
}
@media (max-width: 760px) {
  :root {
    --sidebar: 0px;
  }
  .sidebar {
    position: static;
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    display: block;
  }
  .brand {
    padding: 19px 20px;
  }
  .brand strong {
    font-size: 14px;
  }
  .nav {
    display: flex;
    padding: 0 12px 12px;
    gap: 5px;
  }
  .nav button {
    flex: 1;
    justify-content: center;
    padding: 10px 8px;
    font-size: 11px;
    gap: 7px;
  }
  .nav .count {
    display: none;
  }
  .roster-title,
  .roster,
  .sidebar-bottom {
    display: none;
  }
  .main {
    margin-left: 0;
  }
  .topbar {
    height: 55px;
    padding: 0 20px;
  }
  .top-actions .pill {
    display: none;
  }
  .top-actions button {
    font-size: 10px;
    padding: 6px 9px;
  }
  .workspace {
    padding: 25px 18px 45px;
  }
  .page-heading {
    margin-bottom: 20px;
  }
  .page-heading h1 {
    font-size: 25px;
    letter-spacing: -1px;
  }
  .page-heading p {
    font-size: 11px;
    margin-top: 7px;
  }
  .page-heading > .pill {
    display: none;
  }
  .search-strip {
    gap: 8px;
    padding: 12px;
  }
  .search-strip select {
    width: 88px;
    font-size: 10px;
    padding: 9px 5px;
  }
  .search-strip button {
    padding: 9px 11px;
    font-size: 11px;
  }
  .search-strip label {
    gap: 6px;
  }
  .search-strip label svg {
    width: 15px;
  }
  .search-strip input {
    font-size: 12px;
    width: 100%;
  }
  .profile {
    gap: 11px;
    flex-wrap: wrap;
  }
  .profile h2 {
    font-size: 21px;
  }
  .profile .avatar {
    width: 48px;
    height: 54px;
  }
  .profile-actions {
    width: 100%;
    margin-top: 4px;
    justify-content: space-between;
  }
  .profile-actions button {
    font-size: 11px;
  }
  .notice {
    font-size: 10px;
  }
  .notice button {
    white-space: normal;
  }
  .metric {
    min-height: 130px;
    padding: 15px;
  }
  .metric .value {
    font-size: 26px;
  }
  .metric .label {
    font-size: 10px;
  }
  .metric .change {
    font-size: 10px;
  }
  .section-heading {
    flex-wrap: wrap;
  }
  .section-heading h2 {
    font-size: 17px;
  }
  .gear-row {
    padding: 17px 13px;
  }
  .gear-heading strong {
    font-size: 11px;
  }
  .gear-heading .right {
    gap: 3px;
  }
  .gear-heading .pill {
    font-size: 9px;
    padding: 3px 6px;
  }
  .comparison {
    gap: 10px;
  }
  .loadout-side.after {
    padding-left: 10px;
  }
  .option-line {
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 8px;
  }
  .affix,
  .gem {
    font-size: 9px;
    padding: 1px 5px;
  }
  .option-line .kind {
    font-size: 9px;
    margin-bottom: 3px;
  }
  .equipment-labels {
    padding: 13px;
  }
  .gear-footer {
    gap: 5px;
    align-items: flex-start;
  }
  .gear-footer > span {
    max-width: 70%;
    line-height: 1.7;
  }
  .side-stack {
    grid-template-columns: 1fr;
  }
  .section-tabs {
    gap: 20px;
    padding: 0 14px;
  }
  .section-tabs button {
    font-size: 11px;
  }
  .form-grid,
  .price-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .field {
    font-size: 11px;
  }
  .price-toolbar {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .dialog-head {
    padding: 19px;
  }
  .dialog-body {
    padding: 20px;
  }
  .dialog-actions {
    padding: 16px 20px;
  }
  .data-table td,
  .data-table th {
    padding: 13px;
  }
  .cost-step .numbers {
    gap: 8px;
  }
  .cost-step .numbers b {
    font-size: 15px;
  }
  .profile .meta .pill {
    font-size: 9px;
  }
  .metric .value.compact-value {
    font-size: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}
.passive-panel{margin:0 0 24px;border-color:#395944}.passive-panel .section-heading{margin:0 0 16px;gap:14px}.passive-panel h2{margin:8px 0;font-size:22px}.passive-summary{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;background:#213a2b;padding:16px;border-radius:10px}.passive-summary strong{font-size:15px;line-height:1.8}.passive-summary button{flex-shrink:0}.passive-results summary{cursor:pointer;padding:18px 0 10px;color:var(--mint);font-size:14px}.passive-candidate{display:grid;grid-template-columns:1.2fr 1.2fr .7fr;gap:18px;padding:16px 0;border-top:1px solid var(--line);font-size:14px}.passive-candidate .pill{margin-left:8px}.passive-candidate small{display:block;font-size:12px;line-height:1.7;color:var(--muted);margin-top:5px}.passive-candidate b{color:var(--mint);font-size:15px}.passive-muted{opacity:.7}.passive-input-row{display:grid;grid-template-columns:minmax(110px,1.3fr) 75px 95px 85px;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);font-size:13px}.passive-input-row input[type=number]{width:100%;padding:8px;margin-top:5px}.passive-input-row small{display:block;color:var(--muted);margin-top:5px}.passive-input-row .checkbox-row{font-size:12px}.passive-import{margin:18px 0}.passive-import summary{cursor:pointer;margin-bottom:12px}#passive-paste{width:100%;resize:vertical;font:inherit;background:var(--bg);border:1px solid var(--line);color:var(--text);padding:12px;border-radius:8px}.passive-import button{margin-top:8px}@media(max-width:700px){.passive-panel .section-heading,.passive-summary{flex-direction:column;align-items:stretch}.passive-candidate{grid-template-columns:1fr 1fr;gap:12px}.passive-candidate>div:first-child{grid-column:1/-1}.passive-input-row{grid-template-columns:1fr 70px 90px}.passive-input-row>.checkbox-row{grid-column:1/-1}.passive-candidate b{font-size:14px}.passive-candidate .pill{margin-left:6px}}
.intake-panel{max-width:1000px;margin:24px auto}.intake-panel h2{margin:12px 0;font-size:24px;line-height:1.5}.intake-panel .sub{margin-bottom:24px}.intake-panel details{margin:20px 0;padding:14px;border:1px solid var(--line);border-radius:10px}.intake-panel summary{cursor:pointer;color:var(--mint);font-size:14px;margin-bottom:12px}.intake-panel textarea{width:100%;padding:12px;min-height:110px;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:8px;font:inherit}.intake-nav{display:flex;gap:10px;flex-wrap:wrap}.intake-nav span{border:1px solid var(--line);border-radius:24px;padding:9px 16px;font-size:13px;color:var(--muted)}.intake-nav .active{color:var(--mint);border-color:var(--mint);background:#213a2b}.intake-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}.intake-actions button{min-height:45px}.intake-max{margin-top:24px;padding:18px;background:#213a2b;border-radius:10px;font-size:16px}.intake-skill{display:grid;grid-template-columns:1fr 75px 65px 95px;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding:12px 0;font-size:13px}.intake-skill small{display:block;color:var(--muted);margin-top:5px}.intake-skill input[type=number]{width:100%;padding:8px}.intake-skill .checkbox-row{font-size:12px}.intake-panel .field{margin:12px 0}.intake-panel .field small{line-height:1.7}.unified-first{display:flex;flex-wrap:wrap;gap:12px 24px;padding:20px;margin:20px 0;background:#294a36;border:1px solid #649878;border-radius:12px;align-items:center}.unified-first>span{font-size:13px;color:var(--mint)}.unified-first strong{font-size:19px}.unified-first b{margin-left:auto;font-size:18px}.unified-step{display:flex;gap:15px;padding:18px 0;border-bottom:1px solid var(--line)}.unified-step strong{display:block;font-size:17px;line-height:1.6}.unified-step p{font-size:14px;line-height:1.9;color:var(--muted);margin:5px 0}.unified-step b{color:var(--text)}.roadmap-primary details{margin:15px 0}.roadmap-primary summary{cursor:pointer;color:var(--mint);font-size:14px}.forecast-panel{margin:24px 0}.forecast-panel h2{font-size:22px}.forecast-panel details{margin-top:15px}.forecast-panel summary{cursor:pointer;color:var(--mint)}.forecast-panel .combat-groups strong{font-size:18px;line-height:1.7}@media(max-width:650px){.intake-panel{padding:18px}.intake-panel h2{font-size:21px}.intake-nav{gap:7px}.intake-nav span{font-size:11px;padding:8px}.intake-skill{grid-template-columns:1fr 65px 60px}.intake-skill>.checkbox-row:last-child{grid-column:1/-1}.unified-first{padding:15px;flex-direction:column;align-items:flex-start}.unified-first b{margin-left:0}.unified-first strong{font-size:16px}.unified-step strong{font-size:15px}.unified-step p{font-size:12px}.intake-actions button{flex:1;justify-content:center}.forecast-panel .combat-groups{grid-template-columns:1fr}}
/* Full public roster, extending the existing green comparison interface. */
.roster-pager{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:8px 12px;color:var(--muted);font-size:12px;flex-shrink:0}
.collection-status{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-8px 0 22px;padding:12px 16px;border:1px solid var(--line);border-radius:10px;color:var(--muted);font-size:14px;background:var(--panel)}
.collection-status small{display:block;margin-top:5px;font-size:12px}
.collection-status.warning{border-color:#a87940;color:#d9b775}
.profile-actions{flex-wrap:wrap}
@media(max-width:700px){.collection-status{align-items:flex-start;flex-direction:column;margin-top:0}.profile-actions button{flex:1;justify-content:center}.profile-actions{width:100%}.collection-status button{width:100%;justify-content:center}}

.roster-sort{display:flex;flex-direction:column;gap:6px;margin:0 16px 10px;color:var(--muted);font-size:12px}.roster-sort select{width:100%;min-height:38px;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:8px}.rank-label{color:var(--mint)!important;font-size:12px}.roster-person small.rank-label{margin-top:3px}
@media(max-width:700px){.roster-sort{margin:6px 12px;flex-direction:row;align-items:center}.roster-sort select{flex:1;width:auto}.collection-status .pill{white-space:normal}}
.roadmap-primary{padding:22px;margin-bottom:24px;border-color:#395944;background:linear-gradient(125deg,#192b20,var(--panel) 65%)}
.roadmap-primary h2{margin:8px 0 0;font-size:23px}
.roadmap-heading{display:flex;align-items:center;justify-content:space-between;gap:18px}
.roadmap-primary .mini-note{margin:8px 0 0}
.roadmap-primary .action-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0 12px}
.roadmap-primary .action-item{padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--bg);align-items:flex-start}
.roadmap-primary .action-item.first-step{border-color:#69997b;background:#213a2b}
.roadmap-primary .step-num{font-size:16px;width:32px;height:32px;flex-shrink:0}
.step-priority{display:block;margin-bottom:8px;font-size:12px;color:var(--mint)}
.roadmap-primary .action-item strong{font-size:15px;line-height:1.5;display:block}
.roadmap-primary .action-item p{font-size:13px;line-height:1.8;margin:8px 0 0}
.roadmap-primary .roadmap-note{font-size:12px}
@media(max-width:900px){.roadmap-primary .action-list{grid-template-columns:1fr}.roadmap-heading{align-items:flex-start;flex-direction:column}.roadmap-heading button{width:100%;justify-content:center}}
.combat-panel{margin:24px 0}.combat-panel .section-heading{margin:0 0 18px}.combat-panel h2{margin-top:8px}.combat-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:18px}.combat-groups>div{padding:14px;background:var(--bg);border:1px solid var(--line);border-radius:10px}.combat-groups small,.combat-groups strong{display:block}.combat-groups strong{margin-top:7px;color:var(--mint);font-size:19px}.support-rules{border-left:3px solid var(--mint);padding:10px 14px;line-height:1.8;background:rgba(132,222,175,.06);font-size:13px}.skill-breakdown summary{cursor:pointer;margin:18px 0 8px}.skill-breakdown td:first-child{min-width:160px}.skill-setting{display:grid;grid-template-columns:minmax(120px,1fr) 70px 65px 75px;gap:9px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}.skill-setting input[type=number]{width:100%;padding:8px}.skill-setting small{display:block;color:var(--muted);margin-top:5px}.skill-settings .checkbox-row{font-size:12px}.skill-settings+h4{margin-top:20px}@media(max-width:600px){.combat-groups{grid-template-columns:1fr}.combat-panel .section-heading{align-items:flex-start;gap:12px}.skill-setting{grid-template-columns:1fr 60px 60px}.skill-setting>.checkbox-row:last-child{grid-column:1/-1}.combat-panel .data-table{min-width:420px}}

.economy-panel{margin:18px 0}.economy-panel .section-heading{margin-bottom:12px}.economy-totals{display:flex;flex-wrap:wrap;gap:12px 28px;font-size:14px}.economy-totals b{color:var(--mint);margin-left:6px}.economy-details{margin-top:12px;font-size:13px;color:var(--muted)}.economy-details summary{cursor:pointer}.economy-details .method-list{margin-top:12px}@media(max-width:600px){.economy-panel .section-heading{align-items:flex-start;gap:10px}.economy-panel h3{line-height:1.5}.economy-panel .sub{line-height:1.6}.economy-totals{gap:10px}}
.unified-summary{display:flex;flex-wrap:wrap;gap:12px 32px;margin:6px 0 22px;color:var(--text-muted)}.unified-summary strong{color:var(--text);font-size:1.15rem;margin-left:8px}
.equipment-comparison{margin:24px 0}.equipment-comparison .split:has(>section:only-child){grid-template-columns:1fr}.equipment-comparison .section-heading{gap:16px}.comparison-assumptions{font-size:13px;line-height:1.7;color:var(--muted);margin:-6px 0 18px}.recommendation-pending{justify-content:center;min-height:150px;gap:10px}.recommendation-pending .pill{align-self:flex-start}.optional-analysis{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:22px;margin:24px 0}.optional-analysis h3{margin:0 0 8px}.optional-analysis p{margin:0;line-height:1.7}.optional-analysis button{flex-shrink:0}.optional-intake{margin-top:20px}.optional-intake .intake-panel{max-width:none;margin-top:12px}.equipment-comparison+.roadmap-primary{margin-top:24px}
.growth-wide{margin-top:16px}.growth-side-heading{display:flex;justify-content:space-between;align-items:start;gap:12px;padding:18px;border-bottom:1px solid var(--line)}.growth-side-heading h2{font-size:19px;margin:5px 0}.growth-side-heading p{margin:0}.growth-side-heading button{white-space:nowrap}.growth-side-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.growth-side-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:13px 17px;border-bottom:1px solid var(--line)}.growth-side-row:nth-child(odd){border-right:1px solid var(--line)}.growth-side-row strong{font-size:12px}.growth-side-row small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.growth-side-numbers{text-align:right;font-size:11px;white-space:nowrap}.growth-side-numbers span{display:block;margin-bottom:3px}.growth-side-panel>.mini-note{padding:0 18px 15px;font-size:10px;line-height:1.5}@media(max-width:1050px){.equipment-comparison .split{grid-template-columns:1fr}}@media(max-width:700px){.growth-side-list{grid-template-columns:1fr}.growth-side-row:nth-child(odd){border-right:0}.growth-side-row{grid-template-columns:minmax(0,1fr) auto;gap:8px}.growth-side-row>button{grid-column:2}.growth-side-heading{flex-wrap:wrap}}
.loadout-identity{display:flex;align-items:flex-start;gap:7px;flex-wrap:wrap;margin:0 0 14px;line-height:1.5}.loadout-identity strong{flex-basis:100%;font-size:13px;overflow-wrap:anywhere}.loadout-identity small{font-size:11px;color:var(--muted)}.rarity-badge{font-size:11px;border:1px solid var(--line);border-radius:5px;padding:1px 6px;color:var(--muted)}.rarity-badge.rarity-4{color:#eed084;border-color:#6f5932}.rarity-badge.rarity-5{color:#f8ada5;border-color:#925450;background:#392423}.changed-identity{border-left:2px solid var(--change-border);padding-left:9px}.gear-cap{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;border:1px solid var(--line);border-radius:4px;font-size:11px;color:var(--muted)}.mythic-cost-summary{display:flex;gap:12px;flex-wrap:wrap;padding:14px;border:1px solid var(--line);border-radius:8px;margin:14px 0}.mythic-cost-summary>span{display:flex;flex-direction:column;gap:5px;flex:1;min-width:100px;font-size:12px;color:var(--muted)}.mythic-cost-summary b{color:var(--text)}.cost-phase{display:block;color:var(--mint);font-size:12px;margin-bottom:6px}
.collection-topline{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;font-size:12px;margin:-8px 0 20px;padding:0 0 12px;gap:12px}.collection-topline small{margin:0;font-size:11px}.current-progression{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 14px}.current-progression>div{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:12px}.current-progression span{color:var(--muted);flex:1}.current-progression button{font-size:11px;padding:6px 9px}.analysis-summary{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0}.summary-table{padding:15px 18px;overflow:hidden}.summary-table h3{font-size:15px;display:flex;justify-content:space-between;align-items:center;margin:0 0 9px;gap:12px}.summary-table h3>span{font-size:13px}.summary-table table{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}.summary-table th,.summary-table td{padding:8px 0;border-bottom:1px solid var(--line);text-align:right}.summary-table th:first-child{text-align:left;color:var(--muted);font-weight:400}.summary-table thead th{font-size:11px;color:var(--muted);font-weight:400}.summary-table tr:last-child>*{border-bottom:0}.summary-table .summary-total td{color:var(--mint);font-weight:700;font-size:16px}.summary-table>small{display:block;color:var(--muted);font-size:10px;margin-top:8px}.roadmap-compact{padding:16px 18px;margin:18px 0;background:var(--panel)}.roadmap-compact h2{font-size:17px;margin:0}.roadmap-compact .mini-note{font-size:11px;line-height:1.6;margin:5px 0}.roadmap-actions{display:flex;gap:8px;flex-shrink:0}.roadmap-table{width:100%;border-collapse:collapse;font-size:12px;margin-top:10px;font-variant-numeric:tabular-nums}.roadmap-table th,.roadmap-table td{padding:10px 9px;border-bottom:1px solid var(--line);text-align:right;vertical-align:top}.roadmap-table th{font-size:11px;color:var(--muted);font-weight:400}.roadmap-table th:first-child,.roadmap-table td:first-child{text-align:center;width:36px;padding-left:0}.roadmap-table th:nth-child(2),.roadmap-table td:nth-child(2){text-align:left}.roadmap-table strong{font-size:13px;line-height:1.6}.roadmap-table small{display:block;color:var(--muted);font-size:10px;line-height:1.6;margin-top:3px}.roadmap-table .step-num{width:24px;height:24px;font-size:12px}.roadmap-table .first-step{background:rgba(126,226,184,.04)}.roadmap-table tr:last-child td{border-bottom:0}.roadmap-compact details{margin:9px 0}.roadmap-compact summary{font-size:12px}.growth-item-preview{padding:18px 0}.plan-cost-phases{line-height:1.7}
@media(max-width:700px){.collection-topline{gap:4px;padding-bottom:9px;margin-bottom:14px;font-size:11px}.current-progression{grid-template-columns:1fr;gap:7px}.current-progression>div{font-size:11px;padding:8px 10px;gap:7px}.analysis-summary{gap:10px;grid-template-columns:1fr}.summary-table{padding:13px 15px}.summary-table table{font-size:12px}.summary-table .summary-total td{font-size:15px}.roadmap-compact{padding:14px}.roadmap-compact .roadmap-heading{gap:10px}.roadmap-actions{flex-wrap:wrap;width:100%}.roadmap-actions button{width:auto;flex:1}.roadmap-table{min-width:540px}.roadmap-compact h2{font-size:16px}.roadmap-table strong{font-size:12px}}
@media(max-width:700px){.loadout-identity strong{font-size:11px}.loadout-identity{gap:5px;margin-bottom:12px}.rarity-badge,.gear-cap{font-size:9px}.gear-cap{padding:1px 5px}.changed-identity{padding-left:5px}.mythic-cost-summary{gap:10px;padding:12px}}
@media(max-width:700px){.optional-analysis{align-items:stretch;flex-direction:column;padding:18px}.optional-analysis button{justify-content:center}.equipment-comparison .section-heading{align-items:flex-start;flex-direction:column}.comparison-assumptions{font-size:12px}.recommendation-pending{min-height:120px}.gear-heading>div:first-of-type{min-width:0}.gear-heading strong{overflow-wrap:anywhere}}
.summary-delta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:11px;margin-top:5px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}.summary-delta b{font-size:15px}.roadmap-mobile-metrics{display:none}
@media(max-width:700px){.roadmap-table{min-width:0;width:100%;table-layout:fixed}.roadmap-table th:nth-child(n+3),.roadmap-table td:nth-child(n+3){display:none}.roadmap-table th:first-child,.roadmap-table td:first-child{width:32px;padding-right:8px}.roadmap-table th:nth-child(2),.roadmap-table td:nth-child(2){padding-right:0;padding-left:0;overflow-wrap:anywhere}.roadmap-mobile-metrics{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:9px;padding-top:8px;border-top:1px solid var(--line);color:var(--muted);font-size:10px}.roadmap-mobile-metrics b{display:block;margin-top:4px;color:var(--mint);font-size:13px}.roadmap-mobile-metrics b.negative{color:var(--red)}.roadmap-mobile-metrics small{font-size:10px}.summary-delta{font-size:11px}.summary-delta b{font-size:14px}}
.analysis-summary{align-items:start;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}.analysis-summary>.roadmap-compact{margin:0;min-width:0}.roadmap-in-summary .roadmap-heading{align-items:flex-start;flex-wrap:wrap;gap:10px}.roadmap-in-summary .roadmap-actions{margin-left:auto}.roadmap-in-summary .roadmap-actions button{padding:6px 8px;font-size:10px}.roadmap-in-summary .roadmap-table{min-width:0;width:100%;table-layout:fixed}.roadmap-in-summary .roadmap-table th:nth-child(n+3),.roadmap-in-summary .roadmap-table td:nth-child(n+3){display:none}.roadmap-in-summary .roadmap-table th:first-child,.roadmap-in-summary .roadmap-table td:first-child{width:32px;padding-right:8px}.roadmap-in-summary .roadmap-table th:nth-child(2),.roadmap-in-summary .roadmap-table td:nth-child(2){padding-right:0;padding-left:0;overflow-wrap:anywhere}.roadmap-in-summary .roadmap-mobile-metrics{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:9px;padding-top:8px;border-top:1px solid var(--line);color:var(--muted);font-size:10px}.roadmap-in-summary .roadmap-mobile-metrics b{display:block;margin-top:4px;color:var(--mint);font-size:13px}.roadmap-in-summary .roadmap-mobile-metrics b.negative{color:var(--red)}.roadmap-total{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:12px;margin-top:12px;font-size:11px;color:var(--muted)}.roadmap-total strong{font-size:14px;color:var(--mint)}
.condition-budget{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:center;padding-bottom:20px;border-bottom:1px solid var(--line)}.lifesteal-choice{font-size:13px}.condition-group{margin-top:14px;border:1px solid var(--line);border-radius:8px;padding:0 14px}.condition-group>summary{cursor:pointer;color:var(--mint);font-size:14px;font-weight:600;padding:13px 0}.condition-group .skill-setting:last-child{border-bottom:0}.condition-skills>h3,.condition-passives>h3{font-size:18px;margin-bottom:8px}.condition-skills .skill-setting{grid-template-columns:minmax(130px,1fr) 75px 65px 135px;gap:12px;padding:13px 0}.skill-name{min-width:0;font-size:13px;line-height:1.6}.skill-name strong{font-weight:500}.skill-name small{display:block;font-size:11px;color:var(--muted)}.skill-rank,.passive-books{font-size:11px;color:var(--muted)}.skill-rank input{margin-top:5px}.mastery-control{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}.mastery-control>.checkbox-row{white-space:nowrap;font-size:12px;line-height:1.5;gap:7px}.mastery-control>.checkbox-row input{flex-shrink:0;margin:0}.mastery-control>small{display:block;font-size:10px;line-height:1.5;color:var(--muted);margin:0}.condition-passives .passive-input-row{grid-template-columns:minmax(130px,1fr) 75px 95px 135px;gap:12px}.condition-passives .passive-import{padding:12px;border:1px solid var(--line);border-radius:8px}.condition-passives .passive-import summary{margin:0}.condition-passives .passive-import[open] summary{margin-bottom:12px}
@media(max-width:700px){.analysis-summary{grid-template-columns:1fr}.roadmap-in-summary .roadmap-actions{margin-left:0}.condition-budget{grid-template-columns:1fr;gap:14px}.condition-skills .skill-setting,.condition-passives .passive-input-row{grid-template-columns:minmax(0,1fr) 70px;gap:10px 14px}.condition-skills .skill-use{grid-column:1;grid-row:auto}.condition-skills .mastery-control{grid-column:2;grid-row:auto}.condition-skills .skill-setting>.skill-rank{grid-column:2}.condition-skills .mastery-control{min-width:104px;justify-self:end}.condition-passives .passive-books{grid-column:1;width:110px}.condition-passives .mastery-control{grid-column:2;min-width:104px;justify-self:end}.condition-group{padding:0 12px}.condition-skills .checkbox-row,.condition-passives .checkbox-row{font-size:11px}.condition-skills .skill-setting>.checkbox-row:last-child{grid-column:auto}.condition-passives .passive-input-row>.checkbox-row{grid-column:auto}}

.investment-tabs{display:flex;gap:4px;padding:3px;margin-top:12px;border:1px solid var(--line);border-radius:8px;width:max-content;background:var(--bg)}.investment-tabs button{padding:6px 18px;border:0;background:none;font-size:12px;color:var(--muted)}.investment-tabs button.active{background:#294a36;color:var(--mint)}.investment-columns{display:flex;justify-content:space-between;gap:12px;padding:12px 0 7px;font-size:10px;color:var(--muted)}.investment-rows{list-style:none;margin:0;padding:0}.investment-row{display:grid;grid-template-columns:24px minmax(0,1fr) max-content;align-items:center;gap:9px;padding:11px 0;border-top:1px solid var(--line)}.investment-row.first-step{background:rgba(126,226,184,.04)}.investment-row .step-num{width:24px;height:24px;font-size:11px}.investment-work{font-size:12px;font-weight:500;line-height:1.6;overflow-wrap:anywhere}.investment-work small{display:block;font-size:10px;color:var(--muted)}.investment-row-values{display:flex;align-items:center;justify-content:flex-end;gap:14px;white-space:nowrap;font-size:12px;font-variant-numeric:tabular-nums}.investment-gain{min-width:63px;text-align:right}.investment-cost{color:var(--text)}.roadmap-in-summary{container-type:inline-size}.roadmap-in-summary .roadmap-total{margin-top:10px;padding-top:10px}.roadmap-in-summary .mini-note{line-height:1.6}.summary-table .mini-note{font-size:11px;line-height:1.7;color:var(--muted);margin:12px 0 0}
.investment-hide{padding:4px 7px;font-size:11px}.defense-mix-form{margin:12px 0 16px}.defense-mix-form>div{display:flex;flex-wrap:wrap;align-items:end;gap:8px;margin-top:8px}.defense-mix-form label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--muted)}.defense-mix-form input{width:64px;padding:6px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--text)}
.investment-row.pending-hide{background:rgba(126,226,184,.07)}.investment-hide[aria-checked="true"]{border-color:var(--mint);color:var(--mint)}.pending-exclusions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:10px 0;padding:10px;border:1px solid var(--mint);border-radius:8px;font-size:11px}.pending-exclusions span{flex:1;min-width:170px}.pending-exclusions .primary{white-space:normal}
.progression-ranks{grid-column:1/-1;border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:12px}.progression-ranks summary{cursor:pointer}.progression-ranks>div{display:grid;grid-template-columns:90px minmax(0,1fr);gap:10px;padding:8px 0;border-top:1px solid var(--line)}.progression-ranks>div:first-of-type{margin-top:8px}.progression-ranks span{line-height:1.6;overflow-wrap:anywhere}
@container(max-width:420px){.investment-row{grid-template-columns:24px minmax(0,1fr);gap:3px 9px}.investment-row-values{grid-column:2;justify-content:flex-end}.investment-columns{font-size:9px}.investment-row{padding:9px 0}}
@media(max-width:700px){.investment-row{grid-template-columns:24px minmax(0,1fr);gap:3px 9px}.investment-row-values{grid-column:2;font-size:12px;gap:14px}.investment-work{font-size:12px}.investment-columns{font-size:9px}.investment-tabs button{padding:7px 20px}}