/* The Forge: same hall, different anvil. Leans on ../forever.css tokens. */
.forge-head { max-width: var(--wide); margin: 0 auto; padding: 2rem var(--pad) .5rem; }
.forge { max-width: var(--wide); margin: 0 auto; padding: .8rem var(--pad) 2rem; }
.wrap { max-width: var(--wide); margin: 0 auto; padding: 1rem var(--pad) 2rem; }

.fsteps { list-style: none; display: flex; gap: .35rem; flex-wrap: wrap; margin: 0 0 1rem; padding: 0; }
.fsteps li { font: 600 .72rem/1 var(--heading); letter-spacing: .08em; text-transform: uppercase; color: var(--subtle);
  border: 1px solid var(--card-border); border-radius: 2px; padding: .45rem .7rem; cursor: pointer; }
.fsteps li.done { color: var(--surface-text); border-color: rgba(229,204,128,.35); }
.fsteps li.now { color: var(--gold); border-color: var(--gold); background: rgba(229,204,128,.08); }
.fsteps li.locked { opacity: .4; cursor: default; }

.guide { display: flex; gap: .7rem; align-items: flex-start; margin: 0 0 1rem; }
.guide::before { content: ""; flex: none; width: 30px; height: 30px; border-radius: 6px;
  border: 1px solid rgba(229,204,128,.5); background: url("https://wow.zamimg.com/images/wow/icons/large/inv_misc_head_gnome_01.jpg") center/cover; }
.guide p { margin: 0; font-size: .9rem; color: var(--surface-text); background: var(--card); border: 1px solid var(--card-border);
  border-radius: 2px; padding: .7rem .9rem; max-width: 46rem; }
.guide b { color: var(--gold); }

.stage { position: relative; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: .6rem; }
.card { cursor: pointer; text-align: left; background: var(--card); border: 1px solid var(--card-border); border-radius: 2px;
  padding: .8rem .9rem; color: var(--surface-text); transition: border-color .12s, transform .12s; }
.card:hover { border-color: var(--gold); transform: translateY(-2px); }
.card.sel { border-color: var(--gold); background: rgba(229,204,128,.08); }
.card.dis { opacity: .35; cursor: default; transform: none; }
.card .ico { font-size: 1.6rem; display: block; margin-bottom: .35rem; }
.card b { font-family: var(--heading); font-size: 1rem; display: block; }
.card i { font-style: normal; font-size: .7rem; color: var(--subtle); }
.card .cc { color: var(--cc, var(--surface-text)); }
.card.spec-tank i.role { color: var(--frost, #7fb2ff); }
.role { text-transform: uppercase; letter-spacing: .1em; font-size: .62rem !important; }

.talenthead { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin: 1.2rem 0 .6rem; }
.talenthead h3 { font-family: var(--heading); margin: 0; font-size: 1.1rem; }
.pts { font: 700 1rem var(--heading); color: var(--gold); }
.tiers { display: grid; gap: .5rem; }
.tier { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.tier .tlock { font-size: .64rem; color: var(--subtle); min-width: 5.2rem; text-transform: uppercase; letter-spacing: .08em; }
.talent { cursor: pointer; user-select: none; background: var(--card); border: 1px solid var(--card-border); border-radius: 2px;
  padding: .5rem .65rem; display: flex; gap: .5rem; align-items: center; color: var(--surface-text); }
.talent:hover { border-color: var(--gold); }
.talent.maxed { border-color: var(--gold); background: rgba(229,204,128,.1); }
.talent.locked { opacity: .35; cursor: default; }
.talent .te { font-size: 1.15rem; }
.talent b { font-size: .78rem; font-family: var(--heading); }
.talent u { text-decoration: none; font-size: .72rem; color: var(--gold); font-variant-numeric: tabular-nums; }

.gearrow { display: grid; grid-template-columns: 6.5rem 1fr; gap: .6rem; align-items: center; margin-bottom: .45rem; }
.gearrow label { font: 600 .68rem/1 var(--heading); text-transform: uppercase; letter-spacing: .1em; color: var(--subtle); }
.gearopts { display: flex; gap: .4rem; flex-wrap: wrap; }
.gitem { cursor: pointer; background: var(--card); border: 1px solid var(--card-border); border-radius: 2px; padding: .4rem .6rem;
  font-size: .78rem; color: var(--q); }
.gitem:hover { border-color: var(--gold); }
.gitem.sel { border-color: var(--q); background: color-mix(in srgb, var(--q) 10%, transparent); }

.namer { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin: 1.2rem 0 .8rem; }
.namer input { background: var(--card); border: 1px solid var(--card-border); border-radius: 2px; color: var(--surface-text);
  font: 600 1rem var(--heading); padding: .6rem .8rem; min-width: 14rem; }
.namer input:focus { border-color: var(--gold); outline: none; }

.buildcard { border: 1px solid rgba(229,204,128,.4); border-radius: 2px; background: linear-gradient(180deg, rgba(7,50,74,.9), rgba(6,38,56,.9));
  padding: 1.1rem 1.2rem; margin-top: 1rem; }
.buildcard h3 { font-family: var(--display-serif); font-weight: 400; font-size: 1.6rem; margin: 0; color: var(--gold); }
.buildcard .line { color: var(--surface-text); font-size: .86rem; margin: .35rem 0 0; }
.buildcard .line i { font-style: normal; color: var(--subtle); }
.b-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .9rem; }

.composer textarea { width: 100%; background: var(--card); border: 1px solid var(--card-border); border-radius: 2px;
  color: var(--surface-text); font: 500 .8rem/1.5 var(--mono, monospace); padding: .7rem .8rem; resize: vertical; }
.composer textarea:focus { border-color: var(--gold); outline: none; }
.c-actions { display: flex; gap: .5rem; margin: .6rem 0 1rem; }
.raidtable { width: 100%; border-collapse: collapse; font-size: .86rem; }
.raidtable th { text-align: left; font: 600 .62rem/1 var(--heading); letter-spacing: .1em; text-transform: uppercase; color: var(--subtle);
  padding: .3rem .5rem .5rem; border-bottom: 1px solid var(--card-border); }
.raidtable td { padding: .5rem; border-bottom: 1px solid var(--surface-border); }
.verdict { margin-top: .8rem; border: 1px dashed rgba(229,204,128,.4); border-radius: 2px; padding: .8rem .9rem; font-size: .86rem; }
.verdict b { color: var(--gold); }
.rolechip { font: 600 .62rem/1 var(--heading); letter-spacing: .1em; text-transform: uppercase; padding: .2rem .45rem; border-radius: 2px; border: 1px solid var(--card-border); }
.rolechip.tank { color: #7fb2ff; } .rolechip.healer { color: #1eff00; } .rolechip.dps { color: #FE704D; }

.tip { position: fixed; z-index: 60; max-width: 18rem; background: #082a3f; border: 1px solid rgba(229,204,128,.5); border-radius: 2px;
  padding: .55rem .7rem; font-size: .76rem; color: var(--surface-text); pointer-events: none; box-shadow: 0 12px 30px -8px rgba(0,0,0,.9); }
.tip b { color: var(--gold); display: block; margin-bottom: .15rem; }

@media (max-width: 820px) {
  .cards { grid-template-columns: repeat(auto-fill, minmax(8.6rem, 1fr)); }
  .gearrow { grid-template-columns: 1fr; }
}

/* retail-skin talent nodes: round, connected, gold as they fill */
.ttree { display: grid; gap: 1.1rem; position: relative; margin-bottom: 1.4rem; }
.trow { display: flex; gap: .8rem; flex-wrap: wrap; align-items: stretch; position: relative; }
.trow + .trow::before { content: ""; position: absolute; left: 2.6rem; top: -1.15rem; width: 2px; height: 1.15rem;
  background: linear-gradient(180deg, rgba(229,204,128,.5), rgba(229,204,128,.15)); }
.trow.closed .tlock { color: var(--sale); }
.node { cursor: pointer; user-select: none; width: 7.6rem; text-align: center; padding: .6rem .4rem .5rem;
  background: radial-gradient(80% 60% at 50% 20%, rgba(0,175,215,.10), transparent 70%), var(--card);
  border: 2px solid var(--card-border); border-radius: 14px; transition: border-color .12s, transform .12s; }
.node:hover { border-color: var(--gold); transform: translateY(-2px); }
.node .n-ico { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 2px solid var(--card-border); background: #0b2436; font-size: 1.25rem; }
.node.part .n-ico { border-color: var(--cyan); }
.node.maxed { border-color: var(--gold); background: rgba(229,204,128,.08); }
.node.maxed .n-ico { border-color: var(--gold); box-shadow: 0 0 14px -4px var(--gold); }
.node.locked { opacity: .35; cursor: default; transform: none; }
.node .n-rank { display: block; font: 700 .68rem/1.6 var(--heading); color: var(--gold); }
.node .n-name { display: block; font: 600 .66rem/1.15 var(--heading); color: var(--surface-text); }
@media (max-width: 820px) { .node { width: 6.2rem; } .trow + .trow::before { left: 1.9rem; } }

/* real icons */
.wi { width: 2.4rem; height: 2.4rem; border-radius: 6px; border: 1px solid rgba(0,0,0,.5); box-shadow: 0 0 0 1px rgba(229,204,128,.25); display: inline-block; vertical-align: middle; background: #0b2436; }
.wi-lg { width: 3rem; height: 3rem; display: block; margin-bottom: .4rem; }
.wi-sm { width: 1.4rem; height: 1.4rem; border-radius: 4px; }
.newtag { font: 700 .58rem/1 var(--heading); letter-spacing: .1em; color: #000; background: var(--gold); border-radius: 2px; padding: .16rem .35rem; }
.finenote { font-style: normal; font-size: .7rem; color: var(--subtle); }

/* the classic three-tree calculator */
.wtrees { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-bottom: 1.4rem; }
.wtree { position: relative; overflow: hidden; border: 1px solid var(--card-border); border-radius: var(--r-panel); background: linear-gradient(180deg, rgba(7,50,74,.75), rgba(5,30,45,.9)); background-size: cover; background-position: center top; padding: .8rem; }
.wtree::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,20,30,.78), rgba(4,20,30,.55) 30%, rgba(4,20,30,.82)); pointer-events: none; }
.wtree > * { position: relative; }
.wt-grid { position: relative; }
.warrows { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 13.9rem; height: 100%; pointer-events: none; }
.tarrow { stroke: #5a6a75; stroke-width: 2; }
.tarrow-h { fill: #5a6a75; }
.tarrow.ok { stroke: var(--gold); }
.tarrow-h.ok { fill: var(--gold); }
.nextrow { display: block; font: 500 .6rem/1 var(--heading); letter-spacing: .05em; color: var(--subtle); text-decoration: none; margin-top: .15rem; }
.tre-reset { background: none; border: 1px solid var(--card-border); border-radius: 5px; color: var(--subtle); cursor: pointer; font-size: .8rem; line-height: 1; padding: .2rem .35rem; }
.tre-reset:hover { color: var(--gold); border-color: var(--gold); }
.tsplit { font: 600 .78rem var(--heading); color: var(--subtle); }
.tsplit b { color: var(--gold); }
.wtree.main { border-color: rgba(229,204,128,.55); }
.wt-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .7rem; }
.wt-head b { font-family: var(--heading); font-size: .92rem; }
.wt-head u { text-decoration: none; margin-left: auto; font: 700 .85rem var(--heading); color: var(--gold); }
.wt-grid { display: grid; grid-template-columns: repeat(4, 3.1rem); grid-auto-rows: 3.6rem; gap: .5rem; justify-content: center; }
.slot { position: relative; cursor: pointer; user-select: none; width: 3.1rem; height: 3.1rem; }
.slot .wi { width: 100%; height: 100%; border-radius: 8px; border: 2px solid #3a4a55; transition: border-color .12s, filter .12s; }
.slot:hover .wi { border-color: var(--gold); }
.slot.part .wi { border-color: #1eff00; }
.slot.maxed .wi { border-color: var(--gold); box-shadow: 0 0 12px -3px var(--gold); }
.slot.locked { cursor: default; }
.slot.locked .wi { filter: grayscale(1) brightness(.5); border-color: #2a3138; }
.slot.gone { opacity: .45; }
.slot.gone .wi { filter: grayscale(1) brightness(.4); border-style: dashed; border-color: #5a4040; }
.slot.gone::after { content: ""; position: absolute; left: 12%; right: 12%; top: 50%; height: 2px; background: #c0504a; transform: rotate(-35deg); pointer-events: none; }
.s-rank { position: absolute; right: -4px; bottom: -6px; font: 700 .62rem/1 var(--heading); color: #1eff00; background: #06131c; border: 1px solid #3a4a55; border-radius: 3px; padding: .12rem .22rem; }
.slot.maxed .s-rank { color: var(--gold); border-color: var(--gold); }
.slot.locked .s-rank { color: var(--subtle); }
@media (max-width: 900px) { .wtrees { grid-template-columns: 1fr; } }

/* v3: racial expand, compare, quiz, five-row trees */
.dunno-row { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin-bottom: .9rem; }
.dunno { font-size: .95rem; padding: .75rem 1.2rem; }
.race-x { margin-top: .8rem; border: 1px solid rgba(229,204,128,.4); border-radius: var(--r-panel); background: linear-gradient(180deg, rgba(7,50,74,.85), rgba(5,30,45,.9)); padding: 1rem 1.1rem; }
.rx-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.rx-head b { font-family: var(--heading); font-size: 1.05rem; }
.rx-head span { color: var(--subtle); font-size: .74rem; }
.racials { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .3rem; }
.racials li { display: grid; grid-template-columns: 11rem 1fr auto; gap: .7rem; align-items: baseline; padding: .35rem 0; border-bottom: 1px solid var(--surface-border); font-size: .82rem; }
.racials b { font-family: var(--heading); font-size: .78rem; color: var(--gold); }
.racials span { color: var(--card-text); }
.tag { font: 700 .56rem/1 var(--heading); letter-spacing: .1em; text-transform: uppercase; padding: .18rem .4rem; border-radius: 2px; border: 1px solid var(--card-border); }
.tag.shared { color: #1eff00; border-color: rgba(30,255,0,.4); }
.tag.assumed { color: var(--subtle); }
.swapnote { border: 1px solid rgba(0,175,215,.45); border-radius: var(--r-panel); background: rgba(0,126,166,.12); padding: .8rem 1rem; margin-bottom: 1rem; }
.sw-head { display: flex; align-items: center; gap: .8rem; }
.sw-head b { font-family: var(--heading); color: var(--cyan); }
.sw-x { margin-left: auto; background: none; border: 0; color: var(--subtle); font-size: 1.3rem; cursor: pointer; }
.sw-x:hover { color: var(--gold); }
.swapnote .line { margin: .35rem 0 0; font-size: .84rem; }
.gain { color: #1eff00; font-weight: 700; }
.loss { color: var(--sale); font-weight: 700; }
.specnow { font-size: .8rem; color: var(--card-text); }
.specnow b { color: var(--gold); }
.qq { font-family: var(--heading); font-weight: 600; margin: 1rem 0 .45rem; }
.qa { display: grid; gap: .35rem; }
.qopt { text-align: left; cursor: pointer; background: rgba(28,35,37,.6); border: 1px solid var(--card-border); border-radius: 2px; color: var(--surface-text); font: 500 .84rem/1.4 var(--body); padding: .55rem .8rem; }
.qopt:hover { border-color: var(--gold); }
.qopt.sel { border-color: var(--gold); background: rgba(229,204,128,.1); }
.gitem { display: inline-flex; align-items: center; gap: .4rem; }
.gitem .wi-sm { width: 1.25rem; height: 1.25rem; }
.wt-grid.rows5 { grid-auto-rows: 3.6rem; }
@media (max-width: 900px) { .racials li { grid-template-columns: 1fr; gap: .1rem; } .racials li i { justify-self: start; } }

.slot.est .s-rank { border-style: dashed; }
.racials li .wi-sm { justify-self: start; }
.racials li { grid-template-columns: auto 10rem 1fr auto; }
@media (max-width: 900px) { .racials li { grid-template-columns: auto 1fr; } }

.caps { display: inline-flex; gap: .25rem; margin-left: .4rem; }
.capbtn { cursor: pointer; background: var(--card); border: 1px solid var(--card-border); border-radius: 2px; color: var(--card-text); font: 700 .74rem var(--heading); padding: .35rem .55rem; }
.capbtn.on { color: #000; background: var(--gold); border-color: var(--gold); }
.bookbtn { font-size: .72rem; padding: .45rem .7rem; }
.roster span[data-tip] { text-decoration: underline dotted rgba(229,204,128,.6); cursor: help; }

.treset { color: var(--sale); border-color: rgba(254,112,77,.45); }
.treset:hover { border-color: var(--sale); }

/* no points left: say it, show it */
.pts.alldone { color: #1eff00; }
.slot.tapped .wi { filter: saturate(.3) brightness(.55); }
.slot.tapped:hover .wi { filter: none; }
.alldone-note { margin: .2rem 0 1.2rem; font-size: .84rem; color: var(--gold); }

/* the book */
.bktab { margin-top: 1rem; border: 1px solid var(--card-border); border-radius: var(--r-panel); background: linear-gradient(180deg, rgba(7,50,74,.7), rgba(5,30,45,.85)); padding: .8rem .9rem; }
.bk-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.bk-head b { font-family: var(--heading); font-size: .95rem; color: var(--gold); }
.bkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: .4rem; }
.bookui { display: grid; grid-template-columns: 3.2rem 1fr; gap: .7rem; align-items: start; }
.btabs { display: flex; flex-direction: column; gap: .45rem; padding-top: .4rem; }
.btab { width: 2.9rem; height: 2.9rem; padding: 0; border-radius: 0 9px 9px 0; cursor: pointer;
  border: 1px solid var(--card-border); border-left-width: 3px; background: var(--card); transition: border-color .12s; }
.btab img { width: 100%; height: 100%; border-radius: 0 8px 8px 0; opacity: .55; }
.btab:hover img { opacity: .85; }
.btab.on { border-color: var(--gold); }
.btab.on img { opacity: 1; }
.bookpg { border: 1px solid var(--card-border); border-radius: var(--r-panel); padding: .9rem 1rem;
  background: linear-gradient(90deg, rgba(7,50,74,.75), rgba(5,30,45,.9) 49.6%, rgba(2,16,26,.95) 50%, rgba(7,50,74,.75) 50.4%, rgba(5,30,45,.9));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.04); }
.bookspread { grid-template-columns: 1fr 1fr; column-gap: 2rem; grid-auto-flow: column; grid-template-rows: repeat(7, auto); }
.bk-count { margin-left: auto; font: 600 .68rem/1 var(--heading); letter-spacing: .06em; color: var(--subtle); }
.pgfoot { display: flex; justify-content: center; align-items: center; gap: .9rem; margin-top: .8rem;
  font: 600 .78rem var(--heading); color: var(--subtle); }
.pgfoot button { background: none; border: 1px solid var(--card-border); border-radius: 5px; color: var(--gold);
  font-size: 1.05rem; line-height: 1; padding: .15rem .6rem; cursor: pointer; }
.pgfoot button:hover:not(:disabled) { border-color: var(--gold); }
.pgfoot button:disabled { opacity: .3; cursor: default; }
@media (max-width: 820px) { .bookspread { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; } .bookui { grid-template-columns: 2.6rem 1fr; } .btab { width: 2.4rem; height: 2.4rem; } }
.bkspell { display: grid; grid-template-columns: 2.2rem 1fr; grid-template-rows: auto auto; column-gap: .55rem; align-items: center; background: rgba(28,35,37,.5); border: 1px solid var(--card-border); border-radius: 6px; padding: .35rem .5rem; }
.bkspell .wi { grid-row: 1 / span 2; width: 2.2rem; height: 2.2rem; border-radius: 6px; }
.bkspell[data-tip] { cursor: help; }
.bkspell[data-tip]:hover { border-color: var(--gold); }
.bk-n { font: 600 .78rem/1.15 var(--heading); color: var(--surface-text); }
.bk-r { font-size: .64rem; color: var(--subtle); }

/* group audit */
.coverbox { margin-top: 1rem; border: 1px solid var(--card-border); border-radius: var(--r-panel); background: linear-gradient(180deg, rgba(7,50,74,.7), rgba(5,30,45,.85)); padding: .9rem 1rem; }
.coverrow { display: grid; grid-template-columns: 8.5rem 1fr; gap: .7rem; align-items: baseline; margin-bottom: .5rem; }
.coverrow label { font: 600 .66rem/1.6 var(--heading); letter-spacing: .12em; text-transform: uppercase; color: var(--subtle); }
.coverrow > div { display: flex; flex-wrap: wrap; gap: .3rem; }
.cchip { font: 600 .72rem/1.1 var(--heading); padding: .32rem .6rem .32rem .5rem; border-radius: 4px; border: 1px solid var(--card-border); background: rgba(255,255,255,.03); }
.cchip::before { font-size: .66rem; margin-right: .32rem; }
.cchip.good { color: var(--cc, #1eff00); border-color: color-mix(in srgb, var(--cc, #1eff00) 60%, transparent);
  background: color-mix(in srgb, var(--cc, #1eff00) 14%, transparent); }
.cchip.good::before { content: "\2713"; }
.cchip.miss { color: var(--sale); border-color: rgba(254,112,77,.55); background: rgba(254,112,77,.12); }
.cchip.miss::before { content: "\2715"; }
.cchip.soft { color: var(--subtle); }
@media (max-width: 820px) { .coverrow { grid-template-columns: 1fr; gap: .2rem; } }

.cchip.unseen { color: var(--cc); border-style: dashed; border-color: color-mix(in srgb, var(--cc) 55%, transparent);
  background: color-mix(in srgb, var(--cc) 8%, transparent); cursor: help; }
.cchip.unseen::before { content: "?"; }
.cchip.soft::before { content: "\00b7"; }

/* polish pass: the workshop looks like one */
.talenthead { border: 1px solid var(--card-border); border-radius: var(--r-panel); background: linear-gradient(180deg, rgba(7,50,74,.85), rgba(6,38,56,.9)); box-shadow: var(--shadow); padding: .65rem .9rem; margin: 1.2rem 0 .8rem; }
.talenthead h3 { font-size: 1.05rem; letter-spacing: .04em; }
.wtree { box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.04); }
.wtree .wt-head { border-bottom: 1px solid var(--surface-border); padding-bottom: .5rem; }
.slot .wi { box-shadow: inset 0 0 12px rgba(0,0,0,.55); }
.slot:hover .wi { box-shadow: 0 0 14px -4px var(--gold), inset 0 0 12px rgba(0,0,0,.55); }
.gearrow { border: 1px solid var(--card-border); border-radius: var(--r-panel); background: rgba(7,50,74,.35); padding: .55rem .8rem; }
.gearrow label { align-self: center; }
.namer { border: 1px solid var(--card-border); border-radius: var(--r-panel); background: rgba(7,50,74,.35); padding: .7rem .8rem; }
.guide p { box-shadow: var(--shadow); }
.fsteps li { border-radius: 9999px; }
.fsteps li.now { background: var(--gold); color: #000; border-color: var(--gold); }

/* The talent header stops fidgeting when the numbers change. */
.talenthead .pts { min-width: 10.5rem; }
.talenthead .tsplit { min-width: 12rem; }
.capbtn { width: 2.5rem; text-align: center; }

/* ---- Compare to Classic ------------------------------------------------- */
.cmpbtn.on { color: #06131c; background: var(--gold); border-color: var(--gold); }
.cmpf { position: absolute; left: -5px; top: -7px; z-index: 2; font: 800 .5rem/1 var(--heading); letter-spacing: .04em;
  font-style: normal; padding: .14rem .22rem; border-radius: 3px; color: #06131c; box-shadow: 0 1px 4px rgba(0,0,0,.7); }
.cmp-new { --k: #1eff00; } .cmp-changed { --k: #ffb84d; } .cmp-moved { --k: #6cb8ff; }
.cmp-renamed { --k: #c79bff; } .cmp-rank { --k: #5fe0d0; } .cmp-same { --k: #7f8c94; } .cmp-removed { --k: #ff6b5a; }
.cmpf.cmp-new, .cmpf.cmp-changed, .cmpf.cmp-moved, .cmpf.cmp-renamed, .cmpf.cmp-rank, .cmpf.cmp-removed { background: var(--k); }
.slot.cmp-new .wi { border-color: #1eff00; }
.slot.cmp-changed .wi { border-color: #ffb84d; }
.slot.cmp-moved .wi { border-color: #6cb8ff; }
.slot.cmp.cmp-same .wi { filter: saturate(.25) brightness(.6); }
.slot.cmp.cmp-same:hover .wi { filter: none; }
.cmpcount em { font-style: normal; color: var(--k); margin-right: .25rem; }
.cmplegend { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem 1rem; margin: -.2rem 0 .8rem; padding: .6rem .8rem;
  border: 1px solid rgba(229,204,128,.35); border-radius: var(--r-panel); background: rgba(229,204,128,.05); font-size: .76rem; }
.cmplegend b { font-family: var(--heading); color: var(--gold); flex-basis: 100%; }
.cmplegend span { display: inline-flex; align-items: center; gap: .35rem; color: var(--card-text); }
.cmplegend .cmpf { position: static; box-shadow: none; }
.cmplegend .cmp-same-key { display: inline-block; width: .9rem; height: .9rem; border-radius: 3px; background: #3a4a55; padding: 0; }
.cmplegend em { flex-basis: 100%; font-style: normal; color: var(--subtle); font-size: .72rem; }
.tip.cmp-tip { max-width: 34rem; padding: .7rem .8rem; }
.cmp-h { display: flex; align-items: center; gap: .6rem; margin-bottom: .45rem; }
.cmp-h b { margin: 0; font-size: .95rem; }
.cmp-pill { font: 700 .62rem/1 var(--heading); letter-spacing: .05em; text-transform: uppercase; padding: .22rem .4rem;
  border-radius: 3px; color: #06131c; background: var(--k, #7f8c94); white-space: nowrap; }
.cmp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.cmp-cols.one { grid-template-columns: 1fr; }
.cmp-cols > div { border-radius: 4px; padding: .45rem .55rem; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.06); }
.cmp-cols h6 { margin: 0 0 .25rem; font: 700 .6rem/1 var(--heading); letter-spacing: .12em; text-transform: uppercase; }
.cmp-old h6 { color: #b9c2c8; } .cmp-new h6 { color: #1eff00; }
.cmp-cols p { margin: 0; font-size: .78rem; line-height: 1.4; color: #ffd100; }
.cmp-old p { color: #d8cfa6; }
.cmp-cols del { color: #ff8a7a; text-decoration: line-through; text-decoration-thickness: 1px; background: rgba(255,107,90,.12); border-radius: 2px; }
.cmp-cols ins { color: #7dff6a; text-decoration: none; background: rgba(30,255,0,.13); border-radius: 2px; box-shadow: inset 0 -1px 0 rgba(30,255,0,.6); }
.cmp-meta { margin: .45rem 0 0; font-size: .72rem; color: #9ecbe8; }
.cmp-foot { margin: .3rem 0 0; font-size: .66rem; color: var(--subtle); }
@media (max-width: 640px) { .cmp-cols { grid-template-columns: 1fr; } .tip.cmp-tip { max-width: 92vw; } }

.cmpbar { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin: .2rem 0 .6rem; font-size: .76rem; color: var(--subtle); }
.cmpf.inl { position: static; display: inline-block; vertical-align: .08rem; margin-left: .25rem; box-shadow: none; font-size: .5rem; }
.cmpf.cmp-same { background: #56636b; color: #dfe6ea; }
.bkspell.cmp-new, .bkspell.cmp-changed, .bkspell.cmp-renamed, .bkspell.cmp-rank { box-shadow: inset 3px 0 0 var(--k); }
.bkspell.cmp-same { opacity: .6; }
.bkspell.gone, .racials li.gone { opacity: .75; }
.bkspell.gone .bk-n, .racials li.gone > b { text-decoration: line-through; text-decoration-color: rgba(255,107,90,.8); }
.bkspell.gone img { filter: grayscale(1) brightness(.6); }
.racials li.cmp-new, .racials li.cmp-changed, .racials li.cmp-renamed, .racials li.cmp-removed { box-shadow: inset 3px 0 0 var(--k); }
.racials.cmp-on li.cmp-same { opacity: .65; }
.cmplegend.bk { margin: .2rem 0 .8rem; }

.tghost { display: none; position: relative; width: 3.1rem; height: 3.1rem; border: 2px dashed #6cb8ff; border-radius: 8px;
  background: rgba(108,184,255,.08); pointer-events: none; z-index: 1; }
.tghost.show { display: grid; place-items: end center; }
.tghost span { font: 700 .48rem/1 var(--heading); letter-spacing: .06em; text-transform: uppercase; color: #6cb8ff; padding-bottom: .15rem; }
.cmp-unverified { --k: #9aa3a8; }
.cmpf.cmp-unverified { background: transparent; color: #cfd6da; border: 1px dashed #9aa3a8; }

/* ---- Spellbook: the in-game book ------------------------------------------ */
.insight.sbmode { background: rgba(5,6,8,.72); }
.insight.sbmode .insight-card { width: min(57rem, 97vw); padding: 0; background: none; border: 0; box-shadow: none; overflow: visible; max-height: none; }
.insight.sbmode .insight-x { display: none; }
.sbook { position: relative; border-radius: 10px; padding: 0 .9rem .9rem; max-height: 94vh; overflow-y: auto;
  background: linear-gradient(180deg, #2a2217, #17130d); border: 2px solid #5b4a2c;
  box-shadow: 0 0 0 1px #0a0806, 0 18px 50px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,220,150,.07); }
.sb-top { position: sticky; top: 0; z-index: 3; height: 2.3rem; display: flex; align-items: center; justify-content: center; margin: 0 -.9rem;
  border-bottom: 1px solid #4a3c24; background: linear-gradient(180deg, #3a2f20, #231d15); border-radius: 8px 8px 0 0; }
.sb-title { font: 600 .88rem var(--heading); color: #f5e6b8; letter-spacing: .03em; }
.sb-port { position: absolute; left: .2rem; top: .15rem; width: 3.3rem; height: 3.3rem; border-radius: 50%; overflow: hidden; z-index: 4;
  border: 3px solid #8a6d3b; box-shadow: 0 0 0 2px #0a0806, 0 4px 10px rgba(0,0,0,.7); background: #000; }
.sb-port img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sb-x { position: absolute; right: .35rem; top: .28rem; width: 1.75rem; height: 1.75rem; border-radius: 4px; cursor: pointer;
  border: 1px solid #c9a24a; background: linear-gradient(180deg, #8e1414, #5a0909); color: #ffd76a; font-size: 1.15rem; line-height: 1; }
.sb-bar { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .75rem 0 .7rem 3.4rem; }
.sb-tabs { display: flex; gap: .45rem; }
.sb-tab { width: 2.55rem; height: 2.55rem; padding: 0; border-radius: 4px; cursor: pointer; background: #0a0806; border: 2px solid #4a3c24; box-shadow: inset 0 0 0 1px #000; }
.sb-tab img { width: 100%; height: 100%; display: block; border-radius: 2px; opacity: .72; transition: opacity .12s; }
.sb-tab:hover img { opacity: 1; }
.sb-tab.on { border-color: #ffd100; box-shadow: 0 0 0 1px #6b5410, 0 0 10px rgba(255,209,0,.5); }
.sb-tab.on img { opacity: 1; }
.sb-search { margin-left: auto; display: flex; align-items: center; gap: .3rem; }
.sb-search input { width: 17rem; background: #0a0806; border: 1px solid #6b5a3a; border-radius: 3px; color: #e8e1cf; font-size: .8rem; padding: .34rem .55rem; }
.sb-search input:focus { outline: none; border-color: #c9a24a; }
.sb-drop { display: grid; place-items: center; width: 1.5rem; height: 1.55rem; border-radius: 3px; background: linear-gradient(180deg, #8a6d3b, #5b4a2c); color: #ffd76a; font-size: .72rem; }
.sb-page { position: relative; border-radius: 6px; padding: 1.15rem 1.6rem .9rem; min-height: 23rem; color: #2b1a0c;
  background:
    radial-gradient(ellipse at 45% 35%, rgba(255,250,232,.6), transparent 62%),
    radial-gradient(ellipse at 50% 50%, transparent 58%, rgba(96,64,28,.5) 100%),
    repeating-linear-gradient(8deg, rgba(120,90,50,.04) 0 3px, transparent 3px 7px),
    linear-gradient(180deg, #e9d6a8, #d6bc85);
  box-shadow: inset 0 0 0 1px rgba(80,55,25,.55), inset 0 0 46px rgba(96,64,28,.4); }
.sb-h { margin: 0; font: 400 1.75rem/1.1 var(--display-serif), Georgia, serif; color: #3a2410; }
.sb-rule { position: relative; height: 2px; margin: .5rem .5rem 1.05rem; background: linear-gradient(90deg, transparent, #6b4a22 6%, #6b4a22 94%, transparent); }
.sb-rule::before, .sb-rule::after { content: ""; position: absolute; top: -.28rem; width: .55rem; height: .55rem; border: 2px solid #6b4a22; border-radius: 50%; border-right-color: transparent; }
.sb-rule::before { left: -.55rem; } .sb-rule::after { right: -.55rem; transform: scaleX(-1); }
.sb-grid { display: grid; grid-auto-flow: column; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .95rem 1.6rem; }
.sbs { display: flex; align-items: center; gap: .7rem; cursor: help; min-width: 0; }
.sbs-ic { position: relative; flex: none; width: 2.65rem; height: 2.65rem; border-radius: 6px; padding: 2px;
  background: linear-gradient(160deg, #d6b268, #6b4f2a 58%, #3b2a15); box-shadow: 0 2px 4px rgba(60,40,15,.55); }
.sbs-ic img { width: 100%; height: 100%; border-radius: 4px; display: block; }
.sbs-ic .cmpf { left: -6px; top: -8px; }
.sbs-t { min-width: 0; display: flex; flex-direction: column; }
.sbs-t b { font: 600 .92rem/1.15 var(--heading); color: #24160a; }
.sbs-t em { font-style: normal; font-size: .76rem; color: #6e5431; margin-top: .12rem; }
.sbs:hover .sbs-ic { box-shadow: 0 0 0 2px #fff2a8, 0 0 12px rgba(255,220,120,.9); }
.sbs.cmp-same { opacity: .5; }
.sbs.cmp-new .sbs-ic, .sbs.cmp-changed .sbs-ic, .sbs.cmp-renamed .sbs-ic, .sbs.cmp-rank .sbs-ic { background: linear-gradient(160deg, var(--k), #3b2a15); }
.sbs.gone { opacity: .72; }
.sbs.gone b { text-decoration: line-through; text-decoration-color: #a33; }
.sbs.gone img { filter: grayscale(1); }
.sb-foot { display: flex; justify-content: flex-end; align-items: center; gap: .45rem; margin-top: 1.1rem; font: 600 .82rem var(--heading); color: #3a2410; }
.sb-pg { width: 1.7rem; height: 1.7rem; border-radius: 4px; cursor: pointer; background: linear-gradient(180deg, #3a3a3a, #1a1a1a); border: 1px solid #8a6d3b; color: #e8c86a; font-size: .6rem; }
.sb-pg:disabled { opacity: .45; cursor: default; }
.sb-empty { color: #6e5431; font-style: italic; margin: 1rem 0; }
.sb-under { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: .7rem; }
.sb-cap { font-size: .74rem; color: #b9a888; }
.sb-tally { display: flex; flex-wrap: wrap; gap: .55rem; font: 600 .74rem var(--heading); color: #e8e1cf; }
.sb-tally span { display: inline-flex; align-items: center; gap: .25rem; }
.sb-cmp { margin-left: auto; display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; background: none; border: 1px solid #6b5a3a; border-radius: 999px;
  color: #e8d9b0; font: 600 .74rem var(--heading); padding: .3rem .75rem .3rem .35rem; }
.sb-cmp i { position: relative; width: 1.9rem; height: 1.05rem; border-radius: 999px; background: #3a3326; }
.sb-cmp i::after { content: ""; position: absolute; left: .13rem; top: .13rem; width: .8rem; height: .8rem; border-radius: 50%; background: #8a7a5a; transition: left .15s; }
.sb-cmp.on { border-color: #c9a24a; color: #ffd76a; }
.sb-cmp.on i { background: #8a6d1e; }
.sb-cmp.on i::after { left: .97rem; background: #ffd76a; }
.tip.sbtip { background: #0b1322; border: 1px solid #8a7a5a; border-radius: 3px; max-width: 20rem; }
.sbtip b, .tsheet .ts-body > b { color: #fff; font-size: .95rem; }
.sbtip .sbt-r, .tsheet .sbt-r { display: block; color: #9a9a9a; font-size: .74rem; }
.sbtip .sbt-l, .tsheet .sbt-l { display: flex; justify-content: space-between; gap: 1rem; color: #fff; font-size: .76rem; }
.sbt-l i { font-style: normal; }
.sbtip .sbt-d, .tsheet .sbt-d { display: block; color: #ffd100; font-size: .8rem; margin-top: .3rem; line-height: 1.38; }
.sbtip .sbt-n, .tsheet .sbt-n { display: block; color: #8aa0b5; font-size: .68rem; margin-top: .35rem; }
@media (max-width: 700px) {
  .sb-bar { padding: 1.4rem 0 .6rem; }
  .sb-search { width: 100%; margin-left: 0; }
  .sb-search input { flex: 1; width: auto; }
  .sb-tabs { overflow-x: auto; max-width: 100%; }
  .sb-page { padding: 1rem .8rem .8rem; }
  .sb-h { font-size: 1.45rem; }
  .sb-grid { grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-template-rows: none !important; gap: .8rem .7rem; }
  .sbs { gap: .5rem; }
  .sbs-ic { width: 2.2rem; height: 2.2rem; }
  .sbs-t b { font-size: .78rem; }
  .sbs-t em { font-size: .68rem; }
  .sb-cmp { margin-left: 0; }
}

/* ---- Forge, less text: stepper, control bar, chips, gear lock ----------- */
.forge-bar { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: 0 0 .9rem; }
.forge-bar .fsteps { margin: 0; flex: 1; gap: .4rem; }
.fsteps li { display: flex; align-items: center; gap: .5rem; padding: .35rem .8rem .35rem .35rem; border-radius: 999px; text-transform: none; letter-spacing: 0; }
.fsteps .st-ic, .fsteps .st-num { flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; }
.fsteps .st-ic { border: 1px solid rgba(229,204,128,.45); }
.fsteps .st-num { display: grid; place-items: center; font: 700 .8rem/1 var(--heading); background: rgba(255,255,255,.05); border: 1px solid var(--card-border); }
.fsteps li.now .st-num { background: var(--gold); color: #06131c; border-color: var(--gold); }
.fsteps .st-t { display: flex; flex-direction: column; line-height: 1.1; }
.fsteps .st-t b { font: 700 .66rem/1 var(--heading); letter-spacing: .1em; text-transform: uppercase; }
.fsteps .st-t em { font-style: normal; font-size: .72rem; color: var(--card-text); margin-top: .12rem; }
.fsteps li.soon { opacity: .55; }
.guide p { font-size: .88rem; padding: .45rem .8rem; display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.guide .keys { display: inline-flex; align-items: center; gap: .35rem; flex-wrap: wrap; color: var(--card-text); font-size: .78rem; }
.guide kbd { font: 700 .66rem/1 var(--heading); padding: .22rem .4rem; border-radius: 4px; color: var(--gold); background: rgba(0,0,0,.35); border: 1px solid rgba(229,204,128,.35); border-bottom-width: 2px; }
.cmpswitch { display: inline-flex; align-items: center; gap: .5rem; }
.cmpswitch i { position: relative; flex: none; width: 2rem; height: 1.1rem; border-radius: 999px; background: #243038; border: 1px solid #3a4a55; }
.cmpswitch i::after { content: ""; position: absolute; left: .12rem; top: .1rem; width: .78rem; height: .78rem; border-radius: 50%; background: #7f8c94; transition: left .15s, background .15s; }
.cmpswitch.on i { background: #6b5410; border-color: var(--gold); }
.cmpswitch.on i::after { left: 1rem; background: var(--gold); }
.tb-btn { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; font: 600 .76rem var(--heading); color: var(--surface-text);
  background: rgba(0,0,0,.25); border: 1px solid var(--card-border); border-radius: 999px; padding: .35rem .8rem .35rem .4rem; transition: border-color .12s, color .12s; }
.tb-btn:hover { border-color: var(--gold); color: var(--gold); }
.tb-btn .wi { width: 1.5rem; height: 1.5rem; border-radius: 50%; }
.tb-btn.cmpswitch.on { color: var(--gold); border-color: rgba(229,204,128,.6); }
.tb-btn.danger:hover { border-color: #ff7a6b; color: #ff9a8e; }
.tb-glyph { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: rgba(255,122,107,.15); color: #ff9a8e; font-size: .95rem; }
.tbar { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; margin: 1rem 0 .7rem; padding: .6rem .9rem; border-radius: 14px;
  border: 1px solid var(--card-border); background: linear-gradient(180deg, rgba(7,50,74,.85), rgba(6,38,56,.9)); box-shadow: var(--shadow); }
.tb-spec { display: flex; align-items: center; gap: .6rem; min-width: 9.5rem; }
.tb-cls { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 2px solid rgba(229,204,128,.5); }
.tb-spec b { display: block; font: 700 1.05rem/1.1 var(--heading); }
.tb-spec .rolechip { font-size: .62rem; }
.tb-points { display: flex; align-items: center; gap: .5rem; }
.pring { width: 2.6rem; height: 2.6rem; transform: rotate(-90deg); }
.pr-bg { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 5; }
.pr-fg { fill: none; stroke: var(--gold); stroke-width: 5; stroke-linecap: round; transition: stroke-dasharray .25s; }
.tb-points.alldone .pr-fg { stroke: #1eff00; }
.tb-points b, .tb-lvl b { display: block; font: 700 1.15rem/1 var(--heading); color: var(--gold); }
.tb-points.alldone b { color: #1eff00; }
.tb-points span, .tb-lvl span, .tb-cap > span { font: 600 .6rem/1 var(--heading); letter-spacing: .08em; text-transform: uppercase; color: var(--subtle); }
.tb-split { display: flex; gap: .35rem; }
.tb-split > span { display: flex; align-items: center; gap: .3rem; padding: .2rem .5rem .2rem .2rem; border-radius: 999px; background: rgba(0,0,0,.25); border: 1px solid transparent; cursor: help; }
.tb-split > span.on { border-color: rgba(229,204,128,.4); }
.tb-split .wi { width: 1.45rem; height: 1.45rem; border-radius: 50%; opacity: .55; }
.tb-split > span.on .wi { opacity: 1; }
.tb-split b { font: 700 .82rem/1 var(--heading); color: var(--surface-text); min-width: .8rem; text-align: center; }
.tb-lvl { text-align: center; cursor: help; }
.tb-cap { display: flex; align-items: center; gap: .25rem; }
.tb-cap > span { margin-right: .2rem; }
.tb-cap .capbtn { width: 2.2rem; padding: .3rem 0; border-radius: 6px; margin: 0; }
.tb-acts { display: flex; gap: .4rem; margin-left: auto; flex-wrap: wrap; }
.cmpchips { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin: -.2rem 0 .8rem; }
.cc-sum { font: 600 .8rem var(--heading); color: var(--card-text); margin-right: .2rem; }
.cc-sum b { color: var(--gold); font-size: 1rem; }
.cc { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; font: 700 .78rem var(--heading); color: var(--surface-text);
  background: rgba(0,0,0,.25); border: 1px solid var(--card-border); border-radius: 999px; padding: .22rem .65rem .22rem .3rem; }
.cc:hover { border-color: var(--k, var(--gold)); }
.cc.on { border-color: var(--k, var(--gold)); background: color-mix(in srgb, var(--k, #e5cc80) 18%, transparent); }
.cc .cmpf.inl { margin: 0; }
.cc-hint { font-size: .72rem; color: var(--subtle); margin-left: auto; }
.slot.cmpdim { opacity: .18; }
.slot.cmpdim:hover { opacity: .8; }
.tfoot { margin: .5rem 0 0; font-size: .7rem; color: var(--subtle); }
.gearlock { margin: 1.2rem 0 .8rem; padding: .8rem 1rem 1rem; border-radius: 14px; border: 1px dashed rgba(229,204,128,.35); background: rgba(7,50,74,.3); }
.gl-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.gl-head b { font: 700 1rem var(--heading); }
.gl-badge { font: 700 .62rem/1 var(--heading); letter-spacing: .08em; text-transform: uppercase; color: #06131c; background: var(--gold); border-radius: 999px; padding: .28rem .55rem; }
.gl-slots { display: flex; flex-wrap: wrap; gap: .45rem; }
.gl-slot { position: relative; width: 2.6rem; height: 2.6rem; border-radius: 7px; overflow: hidden; border: 1px solid #3a4a55; }
.gl-slot .wi { width: 100%; height: 100%; filter: grayscale(1) brightness(.35); }
.gl-slot::after { content: ""; position: absolute; left: 50%; top: 50%; width: .55rem; height: .45rem; transform: translate(-50%, -20%); border-radius: 2px; background: #8a9aa3; box-shadow: 0 -.34rem 0 -.08rem transparent; }
.gl-slot::before { content: ""; position: absolute; left: 50%; top: 50%; width: .38rem; height: .38rem; transform: translate(-50%, -85%); border: 2px solid #8a9aa3; border-bottom: 0; border-radius: .3rem .3rem 0 0; }
.gearlock p { margin: .7rem 0 0; font-size: .8rem; color: var(--card-text); }
.namer input { flex: 1; min-width: 12rem; }
.nm-btn { cursor: pointer; font: 600 .78rem var(--heading); border-radius: 999px; padding: .5rem .95rem; color: var(--surface-text); background: rgba(0,0,0,.25); border: 1px solid var(--card-border); }
.nm-btn:hover { border-color: var(--gold); color: var(--gold); }
.nm-btn.primary { color: #06131c; background: var(--gold); border-color: var(--gold); }
.nm-btn.primary:hover { color: #06131c; filter: brightness(1.08); }
.nm-btn.ghost { background: none; color: var(--subtle); }
@media (max-width: 820px) {
  .forge-bar { align-items: stretch; }
  .fsteps { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .2rem; }
  .fsteps li { flex: none; }
  .tbar { gap: .7rem .9rem; }
  .tb-acts { margin-left: 0; width: 100%; }
  .tb-btn span:last-child { font-size: .72rem; }
  .cc-hint { display: none; }
}
@media (max-width: 820px) {
  .forge-bar { flex-direction: column; align-items: stretch; gap: .55rem; }
  .forge-bar .fsteps { width: 100%; }
  #cmp-global { align-self: flex-start; }
}

/* ---- Legacy in the Forge ---- */
.forge-tools { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.lgbtn em { font-style: normal; font: 700 .7rem/1 var(--heading); color: var(--gold); background: rgba(229,204,128,.12); border-radius: 999px; padding: .2rem .45rem; }
.lgbtn .wi { border-radius: 50%; border: 1px solid rgba(229,204,128,.5); }
.fsteps li.lgstep { cursor: pointer; }
.fsteps li.lgstep .st-ic { border-color: #8a6d3b; }
.insight.lgmode .insight-card { width: min(48rem, 97vw); padding: 0; background: none; border: 0; box-shadow: none; overflow: visible; max-height: none; }
.insight.lgmode .insight-x { display: none; }
.insight.lgmode #insight-body { max-height: 94vh; overflow-y: auto; padding: .9rem .8rem 0; box-sizing: border-box; }
.insight.lgmode .lgwin { margin: 0 auto .6rem; }
.insight.lgmode .lg-actions { max-width: 46rem; margin: 0 auto; padding: .5rem .2rem; }
.insight.lgmode .lg-sum { color: #cdbd98; }
@media (max-width: 820px) { .forge-tools { margin-left: 0; flex-wrap: wrap; } }

/* ---- Gear inspect ------------------------------------------------------- */
.q-poor { --q: #9d9d9d; } .q-common { --q: #ffffff; } .q-uncommon { --q: #1eff00; } .q-rare { --q: #0070dd; } .q-epic { --q: #a335ee; } .q-legendary { --q: #ff8000; } .q-unknown { --q: #c8c8c8; }
b.q-poor, b.q-common, b.q-uncommon, b.q-rare, b.q-epic, b.q-legendary, b.q-unknown { color: var(--q); }
.gear2 { margin: 1.2rem 0 .8rem; padding: .8rem 1rem 1rem; border-radius: 14px; border: 1px solid var(--card-border); background: linear-gradient(180deg, rgba(7,50,74,.55), rgba(6,38,56,.75)); box-shadow: var(--shadow); }
.g2-head { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: .8rem; }
.g2-head > b { font: 700 1.05rem var(--heading); }
.g2-count { font: 700 .72rem var(--heading); color: var(--gold); background: rgba(229,204,128,.12); border-radius: 999px; padding: .22rem .55rem; }
.g2-db { font-size: .72rem; color: var(--subtle); }
.g2-head .nm-btn { margin-left: auto; padding: .3rem .7rem; }
.g2-doll { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); gap: .8rem; }
.g2-col { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.gslot { display: flex; align-items: center; gap: .55rem; width: 100%; text-align: left; cursor: pointer; padding: .3rem .45rem; border-radius: 9px;
  background: rgba(0,0,0,.28); border: 1px solid var(--card-border); color: var(--surface-text); transition: border-color .12s, background .12s; }
.g2-col:last-child .gslot { flex-direction: row-reverse; text-align: right; }
.gslot:hover { border-color: var(--gold); background: rgba(229,204,128,.06); }
.gs-ic { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 6px; padding: 2px; background: #1b262d; border: 1px solid #3a4a55; }
.gs-ic img { width: 100%; height: 100%; border-radius: 4px; display: block; }
.gslot:not(.filled) .gs-ic img { opacity: .5; }
.gslot.filled .gs-ic { background: var(--q); border-color: var(--q); box-shadow: 0 0 8px -2px var(--q); }
.gs-t { min-width: 0; display: flex; flex-direction: column; }
.gs-t em { font-style: normal; font: 600 .58rem/1 var(--heading); letter-spacing: .1em; text-transform: uppercase; color: var(--subtle); }
.gs-t b { font: 600 .8rem/1.2 var(--heading); color: #7f8c94; margin-top: .12rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gslot.filled .gs-t b { color: var(--q); }
.gslot.blocked { opacity: .45; cursor: default; }
/* 3D stage: the character between the slot columns, like the in-game paperdoll. */
.g2-stage { position: relative; min-width: 0; min-height: 30rem; border-radius: 12px; overflow: hidden; border: 1px solid var(--card-border);
  background: radial-gradient(ellipse at 50% 38%, rgba(0,175,215,.16), transparent 62%), radial-gradient(ellipse at 50% 100%, rgba(229,204,128,.14), transparent 55%), #08141c; }
.g2-model { position: absolute; inset: 0; }
.fm3d { position: absolute; inset: 0; }
.fm3d canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.fm3d canvas:active { cursor: grabbing; }
.fm3d-msg { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); font: 600 .74rem var(--heading); color: var(--subtle); background: rgba(0,0,0,.45); padding: .4rem .7rem; border-radius: 4px; white-space: nowrap; }
.fm3d.loading::after { content: ""; position: absolute; left: 50%; top: 40%; width: 1.6rem; height: 1.6rem; margin: -.8rem 0 0 -.8rem; border: 2px solid rgba(229,204,128,.25); border-top-color: var(--gold); border-radius: 50%; animation: fm3dspin .8s linear infinite; }
@keyframes fm3dspin { to { transform: rotate(360deg); } }
.g2-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.g2-model.live .g2-fallback { display: none; }
.g2-fallback .g2-race { width: 6rem; height: 6rem; border-radius: 6px; border: 2px solid rgba(229,204,128,.5); }
.g2-fallback .g2-class { width: 2.6rem; height: 2.6rem; margin: 4.2rem 0 0 -1.4rem; border-radius: 50%; border: 2px solid rgba(229,204,128,.5); }
.g2-hero { position: absolute; left: .6rem; top: .6rem; right: 7.9rem; display: flex; align-items: center; gap: .5rem; pointer-events: none; }
.g2-hero img { flex: none; width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid rgba(229,204,128,.5); }
.g2-who { display: flex; flex-direction: column; min-width: 0; text-shadow: 0 1px 3px #000; }
.g2-who b { font: 700 .95rem/1.15 var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g2-who em { font-style: normal; font-size: .7rem; color: var(--card-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g2-sex { position: absolute; right: .6rem; top: .6rem; display: flex; }
.g2-sex button, .g2-zoom, .g2-anims button { cursor: pointer; font: 600 .66rem/1 var(--heading); letter-spacing: .04em; color: var(--card-text); background: rgba(3,12,18,.72); border: 1px solid var(--card-border); border-radius: var(--r-btn, 4px); padding: .38rem .55rem; }
.g2-sex button + button { margin-left: -1px; }
.g2-sex button.on, .g2-zoom.on, .g2-anims button.on { color: #1a1204; background: var(--gold); border-color: var(--gold); }
.g2-sex button:hover:not(.on), .g2-zoom:hover:not(.on), .g2-anims button:hover:not(.on):not(:disabled) { border-color: var(--gold); color: #fff; }
.g2-zoom { position: absolute; right: .6rem; top: 2.5rem; }
.g2-standin { position: absolute; left: .6rem; right: .6rem; top: 3.1rem; margin: 0; font-size: .64rem; color: #b8d8e8; text-shadow: 0 1px 2px #000; pointer-events: none; padding-right: 5.5rem; }
.g2-anims { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: .3rem; overflow-x: auto; padding: .55rem .6rem; scrollbar-width: none;
  background: linear-gradient(0deg, rgba(3,10,15,.9), rgba(3,10,15,0)); }
.g2-anims::-webkit-scrollbar { display: none; }
.g2-anims button { flex: none; }
.g2-anims button:disabled { opacity: .35; cursor: default; }
.g2-drag { position: absolute; left: 0; right: 0; bottom: 2.6rem; margin: 0; text-align: center; font-size: .62rem; color: rgba(255,255,255,.4); pointer-events: none; }
.g2-drag.touch-only { display: none; }
@media (hover: none) { .g2-drag.mouse-only { display: none; } .g2-drag.touch-only { display: block; } }
.g2-model.nogl .g2-fallback { display: flex; }
.g2-stage.nomodel .g2-anims, .g2-stage.nomodel .g2-zoom, .g2-stage.nomodel .g2-drag, .g2-stage.nomodel .g2-standin, .g2-stage.nomodel .fm3d { display: none; }
.g2-stage.nomodel .g2-model .g2-fallback { display: flex; }
.g2-stage.nomodel .g2-model::after { content: "3D model coming soon"; position: absolute; left: 0; right: 0; bottom: 1rem; text-align: center; font: 600 .66rem var(--heading); letter-spacing: .06em; color: var(--subtle); }
.g2-info { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: .8rem; margin-top: .8rem; align-items: start; }
.g2-stats { border-radius: 12px; background: rgba(0,0,0,.28); border: 1px solid var(--card-border); padding: .6rem .7rem; }
.gst-g + .gst-g { margin-top: .45rem; }
.gst-g h6 { margin: 0 0 .2rem; font: 700 .58rem/1 var(--heading); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.gst { display: flex; justify-content: space-between; font-size: .76rem; color: #6f7c84; padding: .1rem 0; border-bottom: 1px dashed rgba(255,255,255,.04); }
.gst b { font: 700 .78rem var(--heading); }
.gst.on { color: var(--surface-text); }
.gst.on b { color: #1eff00; }
.g2-note { margin: .45rem 0 0; font-size: .64rem; color: var(--subtle); }
.g2-bottom { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: .7rem; }
.insight.pkmode .insight-card { width: min(40rem, 97vw); padding: 0; background: none; border: 0; box-shadow: none; overflow: visible; max-height: none; }
.insight.pkmode .insight-x { display: none; }
.gpick { border-radius: 12px; overflow: hidden; background: #0b151c; border: 1px solid #5b4a2c; box-shadow: 0 18px 50px rgba(0,0,0,.75); max-height: 88vh; display: flex; flex-direction: column; }
.gp-top { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; background: linear-gradient(180deg, #3a2f20, #231d15); border-bottom: 1px solid #4a3c24; }
.gp-slotic { width: 1.8rem; height: 1.8rem; border-radius: 5px; }
.gp-top b { font: 600 .95rem var(--heading); color: #f5e6b8; }
.gp-n { font-size: .72rem; color: #b9a888; }
.gp-x { margin-left: auto; width: 1.7rem; height: 1.7rem; border-radius: 4px; cursor: pointer; border: 1px solid #c9a24a; background: linear-gradient(180deg, #8e1414, #5a0909); color: #ffd76a; font-size: 1.1rem; line-height: 1; }
.gp-bar { display: flex; flex-direction: column; gap: .45rem; padding: .6rem .8rem; border-bottom: 1px solid #1f2b33; }
.gp-bar input { background: #05090c; border: 1px solid #3a4a55; border-radius: 6px; color: #e8edf0; padding: .45rem .6rem; font-size: .84rem; }
.gp-bar input:focus { outline: none; border-color: var(--gold); }
.gp-quals { display: flex; gap: .3rem; flex-wrap: wrap; }
.gp-q { cursor: pointer; font: 700 .64rem/1 var(--heading); letter-spacing: .06em; text-transform: uppercase; color: var(--q); background: none; border: 1px solid color-mix(in srgb, var(--q) 45%, transparent); border-radius: 999px; padding: .28rem .55rem; }
.gp-q.on { background: color-mix(in srgb, var(--q) 20%, transparent); }
.gp-list { overflow-y: auto; padding: .4rem; }
.gp-row { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto .6rem; align-items: center; gap: .6rem; width: 100%; text-align: left; cursor: pointer;
  padding: .35rem .5rem; border-radius: 8px; background: none; border: 1px solid transparent; color: var(--surface-text); }
.gp-row:hover, .gp-row.on { background: rgba(229,204,128,.06); border-color: rgba(229,204,128,.35); }
.gp-row.lock { opacity: .5; }
.gp-cap { white-space: nowrap; }
.gp-ic { width: 2.4rem; height: 2.4rem; border-radius: 6px; padding: 2px; background: var(--q); }
.gp-ic img { width: 100%; height: 100%; border-radius: 4px; display: block; }
.gp-t { min-width: 0; display: flex; flex-direction: column; }
.gp-t b { font: 600 .86rem/1.2 var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-t em { font-style: normal; font-size: .7rem; color: var(--subtle); }
.gp-s { font: 600 .7rem var(--heading); color: #1eff00; white-space: nowrap; }
.gp-conf { width: .5rem; height: .5rem; border-radius: 50%; background: #7f8c94; }
.gp-conf.c-tooltip { background: #1eff00; } .gp-conf.c-partial { background: #ffb84d; }
.gp-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; padding: 1.6rem 1rem; color: var(--card-text); }
.gp-empty img { width: 3rem; height: 3rem; border-radius: 8px; opacity: .45; }
.gp-empty b { font: 600 .9rem var(--heading); color: var(--surface-text); }
.gp-empty span { font-size: .78rem; }
.gp-foot { padding: .5rem .8rem; border-top: 1px solid #1f2b33; display: flex; justify-content: flex-end; }
.tip.itemtip, .tsheet .it-l { max-width: 20rem; }
.tip.itemtip { background: #070d14; border: 1px solid #5d6b7e; border-radius: 4px; }
.itemtip b, .tsheet .ts-body > b.q-common { font-size: .95rem; margin-bottom: .1rem; }
.itemtip .it-l, .itemtip .it-y, .itemtip .it-g, .itemtip .it-set, .itemtip .it-sp, .itemtip .it-sb, .itemtip .it-src, .itemtip .it-conf, .itemtip .it-row,
.tsheet .it-l, .tsheet .it-y, .tsheet .it-g, .tsheet .it-set, .tsheet .it-sp, .tsheet .it-sb, .tsheet .it-src, .tsheet .it-conf, .tsheet .it-row { display: block; font-size: .78rem; color: #fff; line-height: 1.35; }
.it-row { display: flex !important; justify-content: space-between; gap: 1rem; }
.it-row i { font-style: normal; }
.it-g { color: #1eff00 !important; }
.it-y { color: #ffd100 !important; }
.it-set { color: #ffd100 !important; margin-top: .25rem; }
.it-sp { color: #7c7c7c !important; padding-left: .6rem; }
.it-sp.on { color: #ffe9a8 !important; }
.it-sb { color: #7c7c7c !important; }
.it-sb.on { color: #1eff00 !important; }
.it-sb:first-of-type { margin-top: .2rem; }
.it-src { color: #9fb0bb !important; margin-top: .3rem; font-size: .72rem !important; }
.it-f { display: block; color: #ffd100 !important; font-size: .76rem; line-height: 1.35; }
.it-ft { display: block; color: #7ee0a0 !important; margin-top: .2rem; font-size: .66rem !important; letter-spacing: .04em; }
.it-drop { display: block; color: #e5cc80 !important; margin-top: .25rem; font-size: .74rem !important; }
.it-conf { color: #6f8594 !important; font-size: .66rem !important; margin-top: .15rem; }
.it-px { display: block; color: #9fd4ff !important; font-size: .72rem !important; line-height: 1.35; margin-top: .15rem; }
.it-px.it-unk { color: #ffb84d !important; }
@media (max-width: 760px) {
  .g2-doll { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .g2-stage { grid-column: 1 / -1; order: -1; min-height: 24rem; }
  .g2-info { grid-template-columns: 1fr; }
  .g2-col:last-child .gslot { flex-direction: row; text-align: left; }
  .g2-bottom { grid-template-columns: 1fr; }
}

/* Stepper legibility: the gold "now" pill needs dark text, idle pills need brighter sublabels. */
.fsteps li.now { color: #1a1204; }
.fsteps li.now .st-t b { color: #1a1204; }
.fsteps li.now .st-t em { color: #3d2c08; font-weight: 700; }
.fsteps li.now .st-num { background: #1a1204; color: var(--gold); border-color: #1a1204; }
.fsteps li .st-t em { color: #c9d4d9; }
.fsteps li.done .st-t b, .fsteps li.lgstep .st-t b { color: #eef2f4; }
.fsteps li.soon .st-t em { color: #9fb0bb; }
@media (max-width: 640px) {
  .gp-row { grid-template-columns: 2.4rem minmax(0, 1fr) .6rem; }
  .gp-s { grid-column: 2; grid-row: 2; white-space: normal; overflow-wrap: anywhere; }
  .gp-conf { grid-column: 3; grid-row: 1 / span 2; }
}

/* ---- Stat panel: base, racials ---- */
.gst i.rx { font-style: normal; font: 700 .6rem/1 var(--heading); color: #06131c; background: var(--gold); border-radius: 999px; padding: .12rem .32rem; margin-left: .35rem; vertical-align: .1rem; }
.gst[data-tip] { cursor: help; }
.g2-rx { border-radius: 12px; background: rgba(0,0,0,.28); border: 1px solid var(--card-border); padding: .55rem .6rem .6rem; }
.g2-rx-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: .35rem; }
.g2-rx-h h6 { margin: 0; font: 700 .58rem/1 var(--heading); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.g2-rx-link { background: none; border: 0; padding: 0; cursor: pointer; font: 600 .68rem var(--heading); color: var(--subtle); }
.g2-rx-link:hover { color: var(--gold); }
.rxchip { display: flex; align-items: center; gap: .5rem; padding: .3rem .35rem; border-radius: 8px; cursor: help; }
.rxchip + .rxchip { margin-top: .15rem; }
.rxchip:hover { background: rgba(229,204,128,.06); }
.rxchip img { flex: none; width: 1.8rem; height: 1.8rem; border-radius: 6px; border: 1px solid #3a4a55; filter: saturate(.6); }
.rxchip.on img { border-color: rgba(30,255,0,.55); filter: none; }
.rxchip span { min-width: 0; display: flex; flex-direction: column; }
.rxchip b { font: 600 .78rem/1.15 var(--heading); }
.rxchip em { font-style: normal; font-size: .68rem; color: var(--card-text); }
.rxchip.on em { color: #7dff6a; }

/* ---- Consumables: suggested per spec, counted in the stat panel ---- */
.g2-cons { margin-top: .8rem; border-radius: 12px; background: rgba(0,0,0,.28); border: 1px solid var(--card-border); padding: .6rem .7rem .7rem; }
.g2-cons h6, .cc-all h6, .cc-need h6 { margin: 0; font: 700 .58rem/1 var(--heading); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.g2-cons-h { display: flex; align-items: center; gap: .6rem; }
.g2-cons-h span { font: 600 .66rem var(--heading); color: var(--subtle); }
.g2-cons-h .g2-rx-link { margin-left: auto; }
.g2-cons-sub { margin: .35rem 0 .45rem; font-size: .72rem; color: var(--card-text); }
.cc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: .35rem; }
.cchip { display: flex; align-items: center; gap: .5rem; min-width: 0; text-align: left; cursor: pointer; padding: .3rem .45rem; border-radius: var(--r-btn, 4px);
  background: rgba(0,0,0,.3); border: 1px solid var(--card-border); color: var(--surface-text); transition: border-color .12s, background .12s; }
.cchip:hover:not(:disabled) { border-color: var(--gold); }
.cchip.on { border-color: var(--q); background: color-mix(in srgb, var(--q) 14%, rgba(0,0,0,.3)); box-shadow: inset 0 0 0 1px var(--q); }
.cchip.lock { opacity: .4; cursor: not-allowed; }
.cc-ic { flex: none; width: 2rem; height: 2rem; padding: 2px; border-radius: 5px; background: var(--q, #1b262d); border: 1px solid var(--q, #3a4a55); }
.cc-ic img { display: block; width: 100%; height: 100%; border-radius: 3px; }
.cc-t { display: flex; flex-direction: column; min-width: 0; }
.cc-t b { font: 600 .76rem/1.2 var(--heading); color: var(--q); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-t em { font-style: normal; font-size: .66rem; color: #9fd08a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cchip.on .cc-t b::after { content: " \2713"; color: var(--gold); }
.cc-all { margin-top: .55rem; }
.cc-all summary { cursor: pointer; font: 600 .7rem var(--heading); color: var(--subtle); }
.cc-all summary:hover { color: var(--gold); }
.cc-all h6 { margin: .6rem 0 .35rem; }
.cc-need { margin-top: .6rem; padding-top: .5rem; border-top: 1px solid rgba(255,255,255,.07); }
.cc-need ul { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .3rem; }
.cc-need li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 0 .5rem; align-items: center; }
.cc-need li .cc-ic { grid-row: 1 / 3; width: 1.6rem; height: 1.6rem; }
.cc-need li b { font: 600 .74rem var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-need li em { font-style: normal; font: 600 .66rem var(--heading); color: var(--gold); }
.cc-need li i { grid-column: 2 / 4; font-style: normal; font-size: .64rem; color: var(--subtle); }

/* ---- No pills, no boxed labels: square buttons, plain text tags ---- */
.fsteps li, .sb-cmp, .tb-btn, .tb-split > span, .cc, .nm-btn { border-radius: var(--r-btn, 4px); }
.sb-cmp i, .cmpswitch i { border-radius: 2px; }
.sb-cmp i::after, .cmpswitch i::after { border-radius: 1px; }
.rolechip, .tag { border: 0 !important; background: none !important; padding: 0; border-radius: 0; }
.newtag, .gl-badge, .g2-count, .lgbtn em { background: none; padding: 0; border-radius: 0; color: var(--gold); }
.gst i.rx { background: none; padding: 0; border-radius: 0; color: #1eff00; }
.guide kbd { border: 0; background: none; padding: 0; border-radius: 0; color: var(--gold); box-shadow: none; }

@media (hover: hover) and (pointer: fine) {
  .g2-anims { scrollbar-width: thin; scrollbar-color: rgba(229,204,128,.45) transparent; }
  .g2-anims::-webkit-scrollbar { display: block; height: 4px; }
  .g2-anims::-webkit-scrollbar-thumb { background: rgba(229,204,128,.45); }
}

/* Combined race and class picker: one block, two columns */
.pick-h { font: 600 .72rem/1 var(--heading); letter-spacing: .1em; text-transform: uppercase; color: var(--subtle); margin: 0 0 .55rem; }
.pickwrap { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: 1.4rem; align-items: start; margin-top: .4rem; }
.pickcol .cards { grid-template-columns: repeat(auto-fill, minmax(8.2rem, 1fr)); }
.pickcol .card { padding: .6rem .7rem; }
.pickcol .card b { font-size: .88rem; }
@media (max-width: 880px) { .pickwrap { grid-template-columns: 1fr; } }
.card { position: relative; }
.card.sel::after { content: "\00d7"; position: absolute; top: .3rem; right: .55rem; font-size: .95rem; line-height: 1; color: var(--subtle); }
.card.sel:hover::after { color: var(--gold); }
.card.dis { cursor: pointer; }

/* ---- Gear picker v2: filters, weights, score and source columns, paging ---- */
.insight.pkmode .insight-card { width: min(52rem, 100%); }
.gp-bar { flex: none; gap: .4rem; max-height: 46vh; overflow-y: auto; }
.gp-bar > * { flex: none; }
.gpick .gp-list { flex: 1 1 auto; min-height: 9rem; }
.gpick .gp-top, .gpick .gp-foot { flex: none; }
.gp-line { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .45rem; }
.gp-grp { display: inline-flex; flex-wrap: wrap; gap: .25rem; padding-right: .45rem; border-right: 1px solid #1f2b33; }
.gp-grp:last-child { border-right: 0; padding-right: 0; }
.gp-p { cursor: pointer; font: 600 .66rem/1 var(--heading); letter-spacing: .03em; color: var(--card-text); background: rgba(0,0,0,.28); border: 1px solid var(--card-border); border-radius: var(--r-btn, 4px); padding: .36rem .55rem; white-space: nowrap; }
.gp-p:hover { border-color: var(--gold); color: #fff; }
.gp-p.on { color: #1a1204; background: var(--gold); border-color: var(--gold); }
.gp-p.gp-reset { color: var(--subtle); }
.gp-sel label { display: inline-flex; align-items: center; gap: .3rem; min-width: 0; }
.gp-sel label > span { font: 700 .56rem/1 var(--heading); letter-spacing: .1em; text-transform: uppercase; color: var(--subtle); }
.gp-sel select, .gp-sel input { font: 600 .7rem/1 var(--heading); color: #e8e2d0; background: #0d1626; border: 1px solid var(--card-border); border-radius: var(--r-btn, 4px); padding: .32rem .4rem; max-width: 11rem; }
.gp-sel input[type=number] { width: 3.6rem; -moz-appearance: textfield; }
.gp-sel input::-webkit-outer-spin-button, .gp-sel input::-webkit-inner-spin-button { -webkit-appearance: none; }
.gp-sel select option, .gp-sel select optgroup { color: #e8e2d0; background: #0d1626; }
.gp-moref { display: flex; flex-direction: column; gap: .45rem; padding-top: .45rem; border-top: 1px dashed rgba(255,255,255,.08); }
.gp-w { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .25rem .6rem; }
.gp-w label { display: flex; align-items: center; justify-content: space-between; gap: .4rem; font-size: .7rem; color: var(--card-text); }
.gp-w input { width: 3.6rem; font: 600 .7rem var(--heading); color: #e8e2d0; background: #0d1626; border: 1px solid var(--card-border); border-radius: var(--r-btn, 4px); padding: .25rem .35rem; }
.gp-wtxt { margin: 0; font-size: .68rem; color: var(--subtle); }
.gp-row { grid-template-columns: 2.4rem minmax(0, 1fr) 2.6rem 2.7rem; grid-template-rows: auto auto; gap: .1rem .6rem; }
.gp-row .gp-ic { grid-row: 1 / 3; }
.gp-row .gp-t { grid-column: 2; grid-row: 1; }
.gp-row .gp-s { grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; gap: .15rem .5rem; white-space: normal; font: 600 .68rem/1.3 var(--heading); color: #1eff00; min-width: 0; }
.gp-s i { font-style: normal; white-space: nowrap; }
.gp-s i.hl { background: rgba(30,255,0,.12); box-shadow: inset 0 0 0 1px rgba(30,255,0,.6); border-radius: 2px; padding: 0 .25rem; }
.gp-t em { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-est { font-style: normal; font: 700 .56rem var(--heading); letter-spacing: .06em; text-transform: uppercase; color: #ffb84d; margin-left: .3rem; }
.gp-sc { grid-column: 3; grid-row: 1 / 3; text-align: right; font: 700 .8rem var(--heading); color: var(--gold); }
.gp-src { grid-column: 4; grid-row: 1 / 3; justify-self: end; font: 700 .56rem/1 var(--heading); letter-spacing: .06em; text-transform: uppercase; padding: .22rem .3rem; border-radius: 2px; font-style: normal; }
.gp-src.k-known { color: #e5cc80; border: 1px solid rgba(229,204,128,.55); }
.gp-src.k-est { color: #9fb0bb; border: 1px dashed rgba(159,176,187,.6); }
.gp-erow .gp-s { color: var(--subtle); }
.gp-more { width: 100%; margin: .4rem 0 .2rem; cursor: pointer; font: 600 .74rem var(--heading); color: var(--gold); background: none; border: 1px dashed rgba(229,204,128,.4); border-radius: var(--r-btn, 4px); padding: .55rem; }
.gp-more i { font-style: normal; color: var(--subtle); }
.gp-foot { align-items: center; gap: .6rem; justify-content: space-between; }
.gp-legend { font-size: .64rem; color: var(--subtle); line-height: 1.5; }
.gp-legend .gp-src { display: inline-block; margin: 0 .2rem; }
.gp-note { margin: .1rem 0 .4rem; font-size: .72rem; color: var(--subtle, #9fb0bb); }
.it-warn { display: block; color: #ff8a65 !important; margin-top: .3rem; font-size: .74rem !important; }
.itemtip .it-est, .tsheet .it-est { color: #ffb84d !important; }
@media (max-width: 640px) {
  .gp-row { grid-template-columns: 2.4rem minmax(0, 1fr) 2.2rem; grid-template-rows: auto auto auto; }
  .gp-row .gp-s { grid-column: 2; grid-row: 2; }
  .gp-sc { grid-column: 3; grid-row: 1; }
  .gp-src { grid-column: 3; grid-row: 2; align-self: start; }
  .gp-grp { border-right: 0; padding-right: 0; }
  .gp-sel label { flex: 1 1 100%; }
  .gp-sel select { flex: 1; max-width: none; }
  /* Phone: the whole card scrolls, so the filters move out of the way of the list. */
  .gpick { overflow-y: auto; overscroll-behavior: contain; }
  .gpick .gp-list { flex: none; overflow: visible; min-height: 0; }
  .gp-bar { max-height: none; overflow: visible; }
  .gp-legend { display: none; }
}

/* ---- Paperdoll: enchant button, enchant line, items above your level ---- */
.gslot-w { position: relative; min-width: 0; }
.gs-ench { position: absolute; top: -.3rem; right: -.3rem; width: 1.45rem; height: 1.45rem; padding: 1px; cursor: pointer; border-radius: 4px; background: #0b151c; border: 1px dashed #5b4a2c; z-index: 2; }
.gs-ench img { width: 100%; height: 100%; border-radius: 3px; display: block; opacity: .55; }
.gs-ench.on { border: 1px solid #1eff00; }
.gs-ench.on img, .gs-ench:hover img { opacity: 1; }
.g2-col:last-child .gs-ench { right: auto; left: -.3rem; }
.gs-en { font-style: normal; font-size: .62rem; color: #1eff00; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gslot.over { border-color: rgba(255,138,101,.6); }
.gslot.over .gs-ic { filter: grayscale(.7); }
.gs-over { font-style: normal; color: #ff8a65; letter-spacing: .04em; }
.g2-warn { margin: 0 0 .45rem; font-size: .7rem; color: #ff8a65; }
/* ---- Reflect group ---- */
.rf-tg { display: flex; flex-wrap: wrap; gap: .3rem; margin: .15rem 0 .3rem; }
.rf-tg button { cursor: pointer; font: 600 .64rem/1 var(--heading); color: var(--card-text); background: rgba(0,0,0,.28); border: 1px solid var(--card-border); border-radius: var(--r-btn, 4px); padding: .32rem .5rem; }
.rf-tg button.on { color: #1a1204; background: var(--gold); border-color: var(--gold); }
.gst i.rf-sum { font-style: normal; font: 600 .62rem var(--heading); color: var(--subtle); margin-left: .35rem; }
@media (max-width: 760px) { .g2-col:last-child .gs-ench { left: auto; right: -.3rem; } }
/* ---- Procs and on-use group ---- */
.gst.px-r { gap: .6rem; align-items: baseline; }
.gst.px-r > span { min-width: 0; overflow-wrap: anywhere; }
.gst.px-r > b { white-space: nowrap; flex: none; }
.gst em.px-k { font-style: normal; font: 700 .55rem/1 var(--heading); letter-spacing: .06em; text-transform: uppercase; color: var(--subtle); border: 1px solid var(--card-border); border-radius: 3px; padding: .1rem .25rem; margin-right: .35rem; vertical-align: .08rem; }
.gst i.px-w { font-style: normal; color: #1eff00; }
.gst:not(.on) i.px-w { color: #8fbf87; }