/* ── Armor 3.0 Optimizer — neutral dark, single blue accent ───────────────── */
:root {
  --bg: #101216;
  --panel: #16181d;
  --panel-2: #1e2128;
  --line: #262a32;
  --line-2: #343945;
  --text: #d6d9de;
  --dim: #878c96;
  --accent: #5b9dde;
  --accent-dim: rgba(91, 157, 222, 0.13);
  --neg: #d97e6f;
  --pos: #8fbf82;
  --perk-blue: #6591bd;   /* the disc weapon perk glyphs sit on, as in game */
  --mono: Consolas, "Cascadia Mono", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Reserve the scrollbar's width whether or not one is showing. Without it any
   change in page height can add or remove the scrollbar, and every centred
   page then jumps sideways by the gutter width. */
html { scrollbar-gutter: stable; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 "Segoe UI", system-ui, sans-serif;
  padding: 22px clamp(12px, 3vw, 36px) 60px;
}

/* header */
/* Three columns rather than a flex row: the nav is centred on the page itself,
   not on whatever is left after the brand and the buttons have taken their
   width. The side columns are equal fractions so growing one — a long display
   name in the avatar menu, say — cannot drag the tabs off centre. */
/* margin-bottom matches body's padding-top, so the header sits with equal space
   above it and below it inside the band the rule closes off */
.top {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 18px; margin-bottom: 22px;
}
/* Separates the header from the page. Bleeds past body's horizontal padding to
   both page edges — the negative margin has to track that padding exactly. */
.top-rule {
  position: relative; height: 1px; background: var(--line);
  margin: 0 calc(-1 * clamp(12px, 3vw, 36px)) 18px;
}
/* The lit patch that follows the cursor. initTopRule() in app.js writes its
   centre from the pointer's x and its strength from the vertical distance, so
   only a short stretch of the rule brightens rather than the whole line. */
.top-rule::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(90px 1px at var(--rule-x, 50%) 50%, var(--dim), transparent);
  opacity: var(--rule-a, 0); transition: opacity 0.12s linear;
}
h1 { font-size: 17px; font-weight: 600; margin: 0; min-width: 0; letter-spacing: -0.01em; }
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }

/* brand: the mark carries the accent, the wordmark stays neutral */
.brand { display: flex; align-items: center; gap: 9px; }
.brand-mark { width: 26px; height: 26px; flex: none; display: block; }
.bm-plate { fill: var(--panel-2); stroke: var(--line-2); stroke-width: 1.4; }
.bm-bar { fill: var(--dim); }
.bm-bar.on { fill: var(--accent); }
.brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.views {
  position: relative; display: flex; gap: 2px; justify-self: center;
  background: rgba(22, 24, 29, 0.72); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}
/* The active pill is one element that travels between tabs rather than a
   background on each. Its two edges carry different durations, so the leading
   edge arrives ahead of the trailing one: the pill stretches as it leaves and
   squashes back as it lands. moveNavBubble() in app.js sets left/right. */
.views-bubble {
  position: absolute; top: 4px; bottom: 4px; left: 0; right: 100%;
  border-radius: 999px; background: var(--panel-2); opacity: 0;
  box-shadow: inset 0 0 0 1px var(--line-2), 0 1px 2px rgba(0, 0, 0, 0.35);
  transition: left 0.42s cubic-bezier(0.32, 0.72, 0.24, 1),
              right 0.42s cubic-bezier(0.32, 0.72, 0.24, 1),
              opacity 0.15s linear;
}
/* travelling right, the right edge leads; travelling left, the left edge does */
.views.to-right .views-bubble { transition-duration: 0.42s, 0.26s, 0.15s; }
.views.to-left .views-bubble { transition-duration: 0.26s, 0.42s, 0.15s; }
/* first paint and resizes place it outright — nothing to animate from */
.views.no-anim .views-bubble { transition: none; }
/* the vertical half of squash and stretch: a shallow dip while in flight */
.views-bubble.squish { animation: bubbleSquish 0.42s cubic-bezier(0.32, 0.72, 0.24, 1); }
@keyframes bubbleSquish { 40% { transform: scaleY(0.88); } }

.view-tab {
  position: relative; z-index: 1; background: none; border: none; border-radius: 999px;
  color: var(--dim); font: inherit; font-size: 13px; font-weight: 500;
  padding: 7px 20px; cursor: pointer;
}
.view-tab:not(.on):hover { color: var(--text); background: rgba(255, 255, 255, 0.035); }
.view-tab.on { color: var(--text); }
.view-tab.bump { animation: bump 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes bump { 40% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) {
  .views-bubble { transition: opacity 0.15s linear; animation: none; }
}

/* below this the three columns stop fitting on one line and the grid stacks */
@media (max-width: 860px) {
  .top { grid-template-columns: 1fr auto; row-gap: 12px; }
  .views { grid-column: 1 / -1; justify-self: stretch; }
  .views .view-tab { flex: 1; padding: 7px 8px; }
}

/* layout */
/* capped and centred like every other page — the sidebar is a fixed 400px, so
   left uncapped the results panel just kept growing on a wide monitor */
.layout {
  display: grid; grid-template-columns: 400px 1fr; gap: 14px; align-items: start;
  max-width: 1344px; margin: 0 auto;
}
@media (max-width: 980px) { .layout { grid-template-columns: 1fr; } }

.import-msg { font-size: 12px; margin-top: 7px; min-height: 0; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.import-msg.ok { color: var(--text); }
.import-msg.err { color: var(--neg); }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px;
}
.panel section + section { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; }

h2 {
  font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--dim); margin: 0 0 10px;
}
.count { color: var(--accent); margin-left: 4px; text-transform: none; letter-spacing: 0; }
.dim { color: var(--dim); font-weight: 400; }

.ico { width: 14px; height: 14px; flex: none; }
img.stat-ico { width: 16px; height: 16px; flex: none; object-fit: contain; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--el, #888); flex: none; }
.dot.big { width: 14px; height: 14px; }

/* tabs */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.tab {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--panel-2); color: var(--dim);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 6px 12px; cursor: pointer; font: inherit; font-size: 13px;
}
.tab:hover { border-color: var(--line-2); color: var(--text); }
.tab.sub.on { color: var(--text); border-color: var(--el); background: var(--panel-2); }

/* fragments */
.submenu { animation: expand 0.16s ease; }
@keyframes expand {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
#fragArea { margin-top: 6px; }
#fragArea .tabs { margin-bottom: 10px; }
.frag-hint { padding: 8px 4px; font-size: 12.5px; }
.frag-ico { width: 26px; height: 26px; flex: none; object-fit: contain; opacity: 0.9; }
.frag-list { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding-right: 4px; }
/* Subclasses carry different fragment counts — 13 on Prismatic, 7 on Arc — so a
   list that sized to its content resized the whole sidebar on every subclass
   click: the Optimize button jumped 22px and the page height changed with it.
   Once a subclass is picked the list holds the capped height and scrolls. */
.frag-list.fixed { height: 300px; }
.frag {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 8px; border-radius: 6px; cursor: pointer; border: 1px solid transparent;
}
.frag:hover { background: var(--panel-2); }
.frag.on { background: var(--accent-dim); border-color: rgba(91, 157, 222, 0.3); }
.frag-name { flex: 1; font-size: 13px; }
.frag-stats { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: 11px; padding: 2px 6px; border-radius: 4px;
  background: var(--panel-2); color: var(--dim); white-space: nowrap;
}
.chip img.stat-ico { width: 13px; height: 13px; }
.chip.pos { background: rgba(96, 170, 80, 0.2); border: 1px solid rgba(120, 190, 100, 0.45); color: #bfdfb2; }
.chip.neg { background: rgba(212, 96, 80, 0.18); border: 1px solid rgba(224, 120, 104, 0.45); color: #edbfb5; }
.chip.pick { cursor: pointer; font: inherit; font-family: var(--mono); font-size: 11px; }
.chip.pick:not(.on) { opacity: 0.35; border-style: dashed; }
.chip.pick:not(.on):hover { opacity: 0.7; }

/* checkboxes / switches */
input[type="checkbox"] {
  appearance: none; width: 15px; height: 15px; margin: 0; flex: none;
  border: 1px solid var(--line-2); border-radius: 4px; background: transparent; cursor: pointer;
  display: inline-grid; place-content: center;
}
input[type="checkbox"]::before {
  content: ""; width: 7px; height: 7px; border-radius: 2px; transform: scale(0);
  background: var(--accent); transition: transform 0.08s;
}
input[type="checkbox"]:checked { border-color: var(--accent); }
input[type="checkbox"]:checked::before { transform: scale(1); }

input.switch { width: 32px; height: 18px; border-radius: 10px; position: relative; }
input.switch::before {
  position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--dim); transform: none; transition: left 0.12s, background 0.12s;
}
input.switch:checked::before { left: 16px; background: var(--accent); }

/* targets */
.target-block { padding: 3px 0 1px; }
.target-row { display: flex; align-items: center; gap: 8px; }
.t-name { flex: 1; font-size: 13px; }
.t-input {
  width: 64px; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px;
  font-family: var(--mono); font-size: 13px; text-align: right;
}
.t-input:focus { outline: none; border-color: var(--accent); }
.prio {
  font: 600 10px/1 "Segoe UI", sans-serif; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-dim); border: 1px solid transparent;
  border-radius: 5px; padding: 5px 0; cursor: pointer; width: 42px; text-align: center;
}
.prio:hover { border-color: var(--accent); }
.prio.hide, .lockbtn.hide { visibility: hidden; }
.lockbtn {
  display: grid; place-content: center; width: 26px; height: 26px;
  background: none; border: 1px solid transparent; border-radius: 5px;
  color: var(--dim); opacity: 0.55; cursor: pointer;
}
.lockbtn:hover { opacity: 1; border-color: var(--line-2); }
.lockbtn.locked { color: var(--accent); opacity: 1; background: var(--accent-dim); }

.t-slider {
  appearance: none; -webkit-appearance: none; width: 100%; height: 4px;
  border-radius: 2px; background: var(--panel-2); outline: none; margin: 8px 0 6px; cursor: pointer;
}
.t-slider::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--line-2);
  cursor: grab; transition: transform 0.08s;
}
.t-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
.t-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.2); }
.t-slider::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg); cursor: grab;
}

/* budget bar */
.budget {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px; padding: 10px 14px;
  background: #0b0d10; border: 1px solid var(--line); border-radius: 8px;
}
.budget-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.budget-total {
  font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--accent);
  line-height: 1; transition: color 0.2s;
}
.budget-total.over { color: var(--neg); }
.budget-spacer { flex: 1; }
.budget-track { width: 90px; height: 5px; background: var(--panel-2); border-radius: 3px; overflow: hidden; flex: none; }
.budget-fill { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.15s ease-out, background 0.2s; }
.budget-fill.over { background: var(--neg); }
.budget-max { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; color: var(--dim); font-family: var(--mono); white-space: nowrap; }
.budget-info { color: var(--dim); font-size: 13px; cursor: help; opacity: 0.7; transition: opacity 0.15s; }
.budget-info:hover { opacity: 1; }
.budget-hint { font-size: 11.5px; color: var(--neg); min-height: 16px; margin-top: 6px; transition: opacity 0.2s; }
.budget-hint:empty { opacity: 0; }

/* options */
.opt-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; cursor: pointer; }
select {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 5px 8px; font: inherit; font-size: 12px;
}

.btn {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line-2);
  border-radius: 6px; padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}
.btn:hover { border-color: var(--dim); }
.btn.accent { background: var(--accent); border-color: var(--accent); color: #0c1522; }
.btn.accent:hover { filter: brightness(1.08); }
.btn.big { width: 100%; margin-top: 0; padding: 10px; }
.btn:disabled { opacity: 0.6; cursor: wait; }
.btn.danger { color: var(--neg); }
.btn.danger.confirm { background: var(--neg); border-color: var(--neg); color: #1a0e0b; }

/* result */
.empty { color: var(--text); padding: 26px 10px; text-align: center; }
.empty.warn { color: var(--neg); }

.option { border: 1px solid var(--line); border-radius: 8px; padding: 16px; margin-bottom: 14px; background: var(--panel); }
.opt-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.opt-num {
  display: inline-grid; place-content: center; width: 30px; height: 30px;
  background: var(--accent); color: #10131a; border-radius: 6px;
  font-family: var(--mono); font-size: 13px; font-weight: 700;
}
.opt-solution { font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.pill {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--line-2); color: var(--dim); border-radius: 5px; padding: 4px 9px;
}
.pill.good { color: var(--pos); border-color: rgba(120, 190, 100, 0.5); background: rgba(96, 170, 80, 0.12); }
.opt-save { display: flex; gap: 8px; flex: 1; justify-content: flex-end; min-width: 240px; }
.opt-name {
  flex: 1; max-width: 240px; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; font: inherit; font-size: 13px;
}
.opt-name:focus { outline: none; border-color: var(--accent); }

.opt-sec {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dim); margin: 16px 0 8px; padding-top: 12px; border-top: 1px solid var(--line);
}

/* armor piece rows */
.armor-row {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2);
  padding: 10px 12px; margin-bottom: 6px;
}
.icon-box {
  display: grid; place-content: center; width: 36px; height: 36px; flex: none;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 6px;
}
.ar-text { flex: 1; min-width: 0; }
.ar-name { font-size: 13.5px; font-weight: 600; }
.ar-count { color: var(--accent); font-family: var(--mono); font-weight: 600; }
.ar-sub { font-size: 12px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 2px; }
.ar-sub img.stat-ico { width: 13px; height: 13px; }
.tag {
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--line-2); color: var(--dim); border-radius: 5px; padding: 4px 8px; flex: none;
}

/* mods */
.mod-list { display: flex; gap: 8px; flex-wrap: wrap; }
.mod-item {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--line); background: var(--panel-2); border-radius: 6px;
  padding: 6px 10px; font-size: 12.5px; font-family: var(--mono);
}
.mod-item img.stat-ico { width: 14px; height: 14px; }

/* tuning */
.tune-card {
  border: 1px solid var(--line); background: var(--panel-2); border-radius: 7px;
  padding: 10px 12px; margin-bottom: 6px;
}
.tc-name { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; margin-bottom: 7px; }
.tc-name img.stat-ico { width: 14px; height: 14px; }
.tc-chips { display: flex; align-items: center; gap: 7px; }
.info-banner {
  border: 1px solid rgba(91, 157, 222, 0.35); border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: var(--accent-dim); border-radius: 7px;
  padding: 9px 12px; font-size: 12.5px; margin-top: 8px;
}
.info-banner b { color: var(--accent); font-family: var(--mono); }

/* stat distribution table */
.st-table { display: flex; flex-direction: column; }
.st-row {
  display: grid; grid-template-columns: 130px 1fr 64px 64px 48px;
  align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line);
}
.st-row:last-child { border-bottom: none; }
.st-head {
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--dim); padding: 2px 0 6px;
}
.st-head .st-num, .st-head .st-bar { font-family: inherit; }
.st-name { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.sb-lock { color: var(--accent); display: inline-flex; }
.sb-lock .ico { width: 11px; height: 11px; }
.lv-track { display: block; width: 100%; max-width: 180px; height: 5px; background: var(--panel-2); border-radius: 3px; overflow: hidden; }
.lv-fill { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.st-num { font-family: var(--mono); font-size: 13px; text-align: right; }
.d-pos { color: var(--pos); }
.d-neg { color: var(--neg); }

.frag-sum { font-size: 12px; }
.solve-ms { float: right; font-family: var(--mono); font-size: 11px; }

/* builds page */
.builds-page { display: flex; flex-direction: column; gap: 16px; }
.bp-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; animation: rise 0.3s ease backwards; }
.bp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.bp-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bp-name { font-size: 17px; font-weight: 700; }
.bp-by { font-size: 13px; }
.bp-by b { color: var(--accent); font-weight: 600; }
.bp-label { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.bp-actions { display: flex; gap: 8px; }


/* one compact icon strip identifying the loadout — subclass · super · abilities ·
   aspects · weapons · exotic + artifact, separated by hairlines */
.bp-ident { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.bi-group { display: inline-flex; align-items: center; gap: 5px; }
.bi-sep { width: 1px; align-self: stretch; min-height: 22px; background: var(--line-2); }
.bi-pip {
  width: 30px; height: 30px; flex: none; border-radius: 7px; overflow: hidden;
  display: grid; place-content: center; background: #10131a; border: 1px solid #333947;
}
.bi-pip img { width: 100%; height: 100%; object-fit: cover; }
.bi-pip.legendary { border-color: #e9edf3; }
.bi-pip.exotic { border-color: #e0a326; }
.bi-pip.el { border-color: var(--el); background: transparent; }
.bi-pip.el img { width: 24px; height: 24px; object-fit: contain; }
.bi-pip.el .el-svg svg { width: 20px; height: 20px; }
/* class glyph, masked so it picks up the pip's colour */
.bi-pip.cls { background: var(--panel-2); color: #e2e6ec; }
.bi-pip.cls .cls-ico { width: 21px; height: 21px; }

.bp-progress { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; }
.bp-track { flex: 1; height: 7px; background: var(--panel-2); border-radius: 4px; overflow: hidden; }
.bp-fill { height: 100%; background: var(--accent); border-radius: 4px; transition: width 0.3s ease; }
.bp-count { font-family: var(--mono); font-size: 13px; color: var(--accent); font-weight: 600; }

.bp-grid { display: grid; grid-template-columns: 1fr 400px; gap: 22px; align-items: start; }
@media (max-width: 1100px) { .bp-grid { grid-template-columns: 1fr; } }

/* one line per piece: number · archetype icon · name · slot picker · tuning, so the
   archetype icon sits level with the slot glyphs rather than wrapping above them */
.piece-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
  border: 1px solid var(--line); background: var(--panel-2); border-radius: 8px;
  padding: 10px 12px; margin-bottom: 8px; transition: border-color 0.2s;
}
.piece-row.got { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-dim); }
.pr-num { font-family: var(--mono); font-size: 11px; color: var(--dim); width: 20px; flex: none; }
.pr-text { flex: 1; min-width: 0; }
.pr-text .ar-name, .pr-text .ar-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1240px) { .piece-row { flex-wrap: wrap; } }
.pr-status { color: var(--accent); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; min-width: 62px; flex: none; }
.slot-btns { display: flex; gap: 5px; flex: none; }
.slot-btn {
  display: grid; place-content: center; width: 38px; height: 38px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 7px;
  color: var(--dim); cursor: pointer; transition: transform 0.1s, border-color 0.15s, background 0.15s, color 0.15s;
}
/* the in-game slot glyph, masked so it tints with the button's colour — larger
   art inside the same 38px button */
.slot-ico {
  width: 32px; height: 32px; display: block; background: currentColor;
  -webkit-mask: var(--u) center/contain no-repeat; mask: var(--u) center/contain no-repeat;
}
.slot-btn:hover:not(:disabled) { color: var(--text); border-color: var(--dim); }
.slot-btn:active:not(:disabled) { transform: scale(0.94); }
.slot-btn.on { background: var(--accent); border-color: var(--accent); color: #10131a; }
.slot-btn:disabled { opacity: 0.25; cursor: not-allowed; }

/* tuning listbox — a native select can't carry the stat icons */
.tune-drop { position: relative; flex: none; }
/* fixed 38px height to match the slot buttons; the icon slot is always present so
   the label doesn't shift between "None" and a chosen tuning, and the caret is
   absolutely centred on the right edge */
.td-btn {
  position: relative; display: flex; align-items: center; gap: 8px;
  width: 134px; height: 38px; box-sizing: border-box;
  background: var(--panel); color: var(--text); border: 1px solid var(--line-2);
  border-radius: 7px; padding: 0 26px 0 10px; font: inherit; font-size: 12.5px;
  cursor: pointer; text-align: left; transition: border-color 0.15s;
}
.td-btn:hover, .td-btn[aria-expanded="true"] { border-color: var(--accent); }
.td-btn .td-ico { width: 17px; height: 17px; flex: none; display: grid; place-content: center; }
/* with nothing selected there's no icon, so the slot collapses and "None" sits
   at the normal padding rather than behind an empty gap */
.td-btn .td-ico:empty { display: none; }
.td-btn .td-cur { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* chevron drawn from borders so it scales and rotates cleanly */
.td-caret {
  position: absolute; right: 11px; top: 50%; width: 7px; height: 7px; margin-top: -5px;
  border-right: 2px solid #8b93a0; border-bottom: 2px solid #8b93a0;
  transform: rotate(45deg); transition: transform 0.15s, margin-top 0.15s;
}
.td-btn[aria-expanded="true"] .td-caret { transform: rotate(-135deg); margin-top: -2px; }
.td-menu {
  position: absolute; z-index: 60; top: calc(100% + 5px); right: 0; min-width: 100%;
  background: #12151b; border: 1px solid var(--accent); border-radius: 8px; padding: 5px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.62); display: flex; flex-direction: column; gap: 2px;
}
/* display:flex above outranks the UA [hidden] rule, so close it explicitly */
.td-menu[hidden] { display: none; }
.td-opt {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  background: none; border: none; border-radius: 6px; padding: 7px 9px;
  color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.td-opt:hover { background: var(--panel-2); }
.td-opt.on { color: var(--accent); }
.td-opt .td-ico { width: 17px; display: grid; place-content: center; flex: none; }
/* "None" has no icon, so its slot collapses and the label sits flush left */
.td-opt .td-ico:empty { display: none; }
.td-opt .td-lab { flex: 1; }
.td-tick { color: var(--accent); font-weight: 700; }
.td-give { font-size: 11px; flex: none; }
.td-ico img.stat-ico { width: 16px; height: 16px; }

.bp-subclass { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--el, var(--text)); margin-bottom: 8px; }
.bp-frag {
  display: flex; align-items: center; gap: 11px;
  border: 1px solid var(--line); background: var(--panel-2); border-radius: 8px;
  padding: 9px 12px; margin-bottom: 6px;
}
.bp-frag .frag-ico { width: 34px; height: 34px; }
.bp-frag-body { min-width: 0; }
.bp-frag-name { font-size: 13px; font-weight: 600; }
/* fragments with no stat effect simply carry no chips */
.bp-frag-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
.bp-el-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--el, var(--accent)); flex: none; }

.check-card {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); background: var(--panel-2); border-radius: 8px;
  padding: 10px 12px; margin-bottom: 6px; cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.check-card.tune { flex-direction: column; align-items: stretch; gap: 7px; cursor: default; }
.cc-row { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.check-card.done { border-color: rgba(120, 190, 100, 0.4); background: rgba(96, 170, 80, 0.08); }
.cc-text { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; font-family: var(--mono); transition: color 0.2s; }
.check-card.done > .cc-text, .check-card.done .cc-row .cc-text { color: var(--dim); text-decoration: line-through; }
.cc-auto { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pos); }

/* scrollbars */
.frag-list::-webkit-scrollbar { width: 8px; }
.frag-list::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }

/* ── builds page palette ──────────────────────────────────────────────────── */
.bp-card { background: #14151a; border-color: #2a303c; color: #ebebf1; }
.bp-card .dim { color: #a7aeba; }
.bp-card .opt-sec { color: #9aa2af; border-top-color: #2b303b; }
.bp-name { font-size: 18px; color: #ebebf1; }
.bp-label { color: #99a1ad; }
.bp-card img.stat-ico { filter: brightness(1.3); }
/* the panels inside the card all share one tone */
.piece-row, .check-card, .bp-frag { background: #111318; border-color: #2e3542; }
.pr-num { color: #b9c0cc; }
.icon-box { background: #0d1015; border-color: #3b4351; }
.icon-box img.stat-ico { width: 19px; height: 19px; }
.bp-card .ar-name { font-size: 14px; color: #ebebf1; }
.bp-card .ar-sub { font-size: 12.5px; }
.bp-card .ar-sub img.stat-ico { width: 14px; height: 14px; }
.pr-status { font-size: 11px; }
.slot-btn { background: #0d1015; border-color: #3b4351; color: #ebebf1; }
.cc-text { color: #ebebf1; }
.bp-frag .frag-ico { width: 38px; height: 38px; }
.bp-frag-name { font-size: 13.5px; color: #ebebf1; }
/* stat chips: saturated green for the stat gained, red for the one given up, with
   the text and icon carrying the same hue rather than sitting white on top */
.bp-card .chip.pos { background: #16402f; border-color: #2f8f63; color: #4ee59b; }
.bp-card .chip.neg { background: #45161f; border-color: #a3384c; color: #ff7d95; }
.bp-card .chip.pos img.stat-ico { filter: brightness(0) saturate(100%) invert(72%) sepia(46%) saturate(720%) hue-rotate(102deg) brightness(97%) contrast(94%); }
.bp-card .chip.neg img.stat-ico { filter: brightness(0) saturate(100%) invert(63%) sepia(31%) saturate(1180%) hue-rotate(300deg) brightness(103%) contrast(101%); }
.bp-count { font-size: 14px; }
.builds-page { margin-top: 16px; }

/* card title: links back to its community build page, pencil switches to renaming */
.bp-name-holder, .bp-title-holder { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.bp-name-link {
  font-size: 18px; font-weight: 700; color: #ebebf1; text-decoration: none;
  border-bottom: 1px solid transparent; max-width: 460px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bp-name-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.bp-rename {
  background: none; border: none; color: #7e8695; cursor: pointer;
  font-size: 13px; line-height: 1; padding: 2px 4px; border-radius: 4px; flex: none;
}
.bp-rename:hover { color: var(--accent); background: var(--accent-dim); }

/* target stats sit at the bottom of the armor column — icon first, then the value.
   The column is a flex box purely so `auto` can push this block down to the card's
   bottom edge however tall the mods/tuning column beside it grows. */
.farm-left { display: flex; flex-direction: column; }
.farm-stats { margin-top: auto; padding-top: 22px; }
/* the block already reads as its own section down here — no rule needed above it */
.farm-stats .opt-sec { border-top: none; padding-top: 0; margin-top: 0; }
.farm-stats .ex-stats { flex: none; gap: 4px; align-items: flex-start; }
.farm-stats .ex-stat { gap: 14px; padding: 3px 0; }
.farm-stats .ex-val { font-size: 27px; width: auto; text-align: left; color: #ebebf1; }
.farm-stats .ex-ico { width: 32px; height: 32px; flex: none; }
.farm-stats .ex-ico img.stat-ico { width: 30px; height: 30px; }

/* zero-health dump toggle */
.target-block.off { opacity: 0.4; pointer-events: none; }

/* modal + toast */
.modal-back { position: fixed; inset: 0; background: rgba(6, 8, 11, 0.72); display: grid; place-content: center; z-index: 50; }
.modal { background: #181b21; border: 1px solid #363d4b; border-radius: 12px; padding: 20px; max-width: 440px; animation: rise 0.2s ease; }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 14px; font-weight: 700; font-size: 15px; }
#qrBox { display: grid; place-content: center; }
#qrBox img { image-rendering: pixelated; border: 10px solid #fff; border-radius: 6px; display: block; }
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #10131a; font-weight: 600; font-size: 13.5px;
  padding: 11px 20px; border-radius: 8px; z-index: 60; animation: rise 0.25s ease;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}

/* community */
.community-page { display: flex; flex-direction: column; gap: 14px; }
.auth-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.auth-row input {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 7px 10px; font: inherit; font-size: 13px; width: 160px;
}
.auth-row input:focus { outline: none; border-color: var(--accent); }
.up-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-bottom: 12px; }
@media (max-width: 800px) { .up-grid { grid-template-columns: 1fr; } }
.up-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--dim); font-weight: 600; }
.up-grid .req { color: var(--neg); }
.up-grid input, .up-grid select, .up-grid textarea {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 7px 10px; font: inherit; font-size: 13px; font-weight: 400;
}
.up-grid input:focus, .up-grid textarea:focus { outline: none; border-color: var(--accent); }
.up-grid textarea { min-height: 64px; resize: vertical; }
.up-wide { grid-column: 1 / -1; }
.up-stats { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 0; }
.up-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.comm-list { display: flex; flex-direction: column; gap: 12px; }
.comm-post { background: #181b21; border-color: #303645; }
.cp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cp-name { font-size: 16px; font-weight: 700; color: #f1f3f6; }
.cp-actions { display: flex; gap: 8px; }
.cp-tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }
.tag.link { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); text-decoration: none; }
.cp-desc { font-size: 13.5px; line-height: 1.55; margin: 8px 0; white-space: pre-wrap; }
.btn.like.on { color: var(--accent); border-color: var(--accent); }
.btn.subtle {
  border-color: transparent; color: var(--dim);
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.btn.subtle:hover { color: var(--text); border-color: var(--line-2); }
.cp-links { align-items: center; }
.cp-links .btn { padding: 7px 14px; }
/* the card heading already carries a rule — no second divider here */
.comments { display: flex; flex-direction: column; gap: 9px; }
.comment { font-size: 13px; }
.comment b { color: var(--accent); }
.comment-add { display: flex; gap: 8px; }
.comment-add input {
  flex: 1; background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 7px 10px; font: inherit; font-size: 13px;
}
.comment-add input:focus { outline: none; border-color: var(--accent); }

/* builds page head */
.bp-pagehead h2 { font-size: 13px; margin: 2px 0 0; }
.bp-pagehead .count { font-size: 13px; }

/* site-wide auth */
/* relative so the avatar menu can anchor to it; .top-actions owns the spacing */
.auth-slot { position: relative; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--line-2);
  background: var(--av, #445); color: #fff; font: 700 15px "Segoe UI", sans-serif;
  cursor: pointer; display: grid; place-content: center;
}
.avatar:hover { border-color: var(--accent); }
.avatar-menu {
  position: absolute; right: 0; top: 42px; z-index: 40;
  background: #181b21; border: 1px solid #363d4b; border-radius: 8px;
  padding: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 180px;
  animation: rise 0.15s ease; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}
.am-user { font-size: 12.5px; }
.am-user b { color: var(--text); }
.auth-form { display: flex; flex-direction: column; gap: 10px; min-width: 260px; }
.auth-form input {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 9px 12px; font: inherit; font-size: 13.5px;
}
.auth-form input:focus { outline: none; border-color: var(--accent); }
.auth-btns { display: flex; gap: 8px; }
.auth-btns .btn { flex: 1; }
.auth-hint { font-size: 11.5px; line-height: 1.45; margin: -2px 0 2px; }

/* image modal */
.modal-btns { display: flex; gap: 8px; }
.modal-btns .btn { text-decoration: none; display: inline-flex; align-items: center; }

/* loadout editor */
.lo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px 16px; }
.lo-slot { display: flex; flex-direction: column; gap: 5px; }
.lo-item { display: flex; align-items: center; gap: 8px; min-height: 34px; }
.lo-ico { width: 30px; height: 30px; border-radius: 5px; flex: none; background: #12151a; }
.lo-ico.sm { width: 24px; height: 24px; }
.lo-ico.ph { border: 1px dashed #414a5b; }
.lo-name { font-size: 13px; color: #eef1f5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lo-x {
  background: none; border: none; color: var(--dim); cursor: pointer;
  font-size: 14px; padding: 2px 5px; border-radius: 4px; flex: none;
}
.lo-x:hover { color: var(--neg); background: rgba(217, 126, 111, 0.12); }
.lo-pick {
  background: #12151a; color: var(--text); border: 1px solid #414a5b;
  border-radius: 6px; padding: 6px 10px; font: inherit; font-size: 12.5px; width: 100%;
}
.lo-pick.sm { width: 90px; padding: 4px 8px; font-size: 11.5px; }
.lo-pick:focus { outline: none; border-color: var(--accent); }
.lo-perks { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.lo-perk { display: inline-flex; align-items: center; gap: 2px; background: #12151a; border: 1px solid #333947; border-radius: 6px; padding: 2px; }
.lo-pname { font-size: 11px; padding: 0 4px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#gearDrop {
  position: absolute; z-index: 70; background: #181b21; border: 1px solid #414a5b;
  border-radius: 8px; padding: 4px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  max-height: 320px; overflow-y: auto; animation: rise 0.12s ease;
}
.gd-opt { display: flex; align-items: center; gap: 9px; padding: 6px 9px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.gd-opt:hover { background: var(--panel-2); }
.gd-opt img { width: 28px; height: 28px; border-radius: 4px; }
.gd-opt .dim { margin-left: auto; font-size: 11px; }

/* info tooltip */
/* info tips use the shared JS #hoverTip (via data-tip) — no CSS bubble here, or
   both would show at once */
.info-tip { position: relative; color: var(--dim); cursor: help; font-size: 13px; }
.info-tip:hover, .info-tip:focus { color: var(--accent); }

/* saved-page import */

/* community class cards */
.class-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.class-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 9px;
  padding: 13px 18px; font: 600 14.5px "Segoe UI", sans-serif; color: var(--text); cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.class-card:hover { border-color: var(--line-2); }
.class-card.on { border-color: var(--accent); background: var(--accent-dim); }
.cc-glyph {
  width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--panel-2);
  border: 1px solid var(--line-2); display: grid; place-content: center; color: #e2e6ec;
}
/* the manifest glyphs are white-on-transparent, so mask them to take the colour */
.cls-ico {
  width: 30px; height: 30px; display: block; background: currentColor;
  -webkit-mask: var(--u) center/contain no-repeat; mask: var(--u) center/contain no-repeat;
}
.class-card.on .cc-glyph { border-color: var(--accent); color: var(--accent); }

/* community filter bar */
.filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* the time filter is a native select, styled to sit level with the exotic
   combo buttons beside it — same box, same caret, same active treatment */
.f-sel {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; max-width: 200px;
  background: var(--panel) no-repeat right 12px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23878c96'/%3E%3C/svg%3E");
  background-size: 9px 6px;
  color: var(--text); border: 1px solid var(--line);
  border-radius: 7px; padding: 8px 30px 8px 12px; font: inherit; font-size: 13px; cursor: pointer;
}
.f-sel:hover { border-color: var(--line-2); }
.f-sel:focus { outline: none; border-color: var(--line-2); }
.f-sel.on { border-color: var(--accent); color: var(--accent); }
.f-sel.on { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%235b9dde'/%3E%3C/svg%3E"); }
.f-sel option { background: var(--panel); color: var(--text); }
.seg { display: inline-flex; background: var(--panel); border: 1px solid var(--line); border-radius: 7px; padding: 3px; gap: 2px; }
.seg-btn {
  background: none; border: none; border-radius: 5px; color: var(--dim);
  font: 600 12.5px "Segoe UI", sans-serif; padding: 6px 12px; cursor: pointer;
}
.seg-btn:hover { color: var(--text); }
.seg-btn.on { background: var(--panel-2); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

/* community post rows */
.comm-post { padding: 16px 18px; }
.cp-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cp-diamond {
  width: 46px; height: 46px; flex: none; display: grid; place-content: center;
  background: var(--panel-2); border: 1px solid var(--el, var(--line-2));
  transform: rotate(45deg); border-radius: 8px; margin: 4px;
}
.cp-diamond .dot { width: 16px; height: 16px; background: var(--el); transform: rotate(-45deg); }
.cp-title { flex: 1; min-width: 180px; }
.cp-name { font-size: 16.5px; font-weight: 700; color: #f1f3f6; margin-bottom: 6px; }
.cp-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cp-icons { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cp-group { display: inline-flex; gap: 5px; }
.cp-ico { width: 44px; height: 44px; border-radius: 6px; background: #12151a; border: 1px solid #333947; object-fit: cover; }
.cp-ico.sq { border-radius: 6px; }
.cp-ico.ph { display: inline-block; border-style: dashed; opacity: 0.4; }
.cp-ico.exotic { border-color: #d8b13d; box-shadow: 0 0 0 1px rgba(216, 177, 61, 0.4); }
.cp-fav {
  margin-left: auto; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 8px;
  color: var(--text); font: 600 15px "Segoe UI", sans-serif; padding: 12px 22px; cursor: pointer;
  transition: color 0.15s, border-color 0.15s, transform 0.1s;
}
.cp-fav:hover { border-color: var(--accent); }
.cp-fav:active { transform: scale(0.95); }
.cp-fav.on { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
.cp-mid { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.cp-tags-inline { display: inline-flex; gap: 7px; flex-wrap: wrap; }
.cp-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px; font-size: 13px;
}
.cp-author { color: var(--accent); }
.cp-links { display: inline-flex; gap: 4px; }
.accent-link { color: var(--accent) !important; }
.accent-link:hover { filter: brightness(1.15); }
.danger-link { color: var(--neg) !important; }
.danger-link:hover { filter: brightness(1.15); }

/* ── moderation ─────────────────────────────────────────────────────────────
   Removed content is only ever visible to an admin, so these read as a state
   marker rather than an alarm — muted, not red-on-red. */
.mod-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #2a1e22; border: 1px solid #5c3a42; border-radius: 10px;
  padding: 11px 15px; font-size: 13px; color: #e7c9cf;
}
.mod-banner b { color: #f0a6b1; }
.mod-banner .btn { margin-left: auto; }
.mod-tag {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: #e0919d; background: #3a252b;
  border: 1px solid #5c3a42; border-radius: 4px; padding: 2px 7px; vertical-align: 1px;
}
.comment.removed { opacity: 0.62; }
/* the per-comment delete sits at the end of the byline, quiet until hovered */
.c-del {
  border: none; background: none; cursor: pointer; padding: 0 4px;
  color: #6f7787; font-size: 14px; line-height: 1;
  transition: color 0.12s, transform 0.12s;
}
.comment:hover .c-del { color: #9aa2ae; }
.c-del:hover, .c-del:focus-visible {
  color: var(--neg); transform: scale(1.25); outline: none;
}
.combo.mod-toggle.on { border-color: var(--neg); color: var(--neg); }

/* inline build rename */
.bp-name-input {
  font-size: 18px; font-weight: 700; color: #f1f3f6;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  padding: 3px 8px; margin: -3px 0 -3px -8px; width: min(340px, 60vw); font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.bp-name-input:hover { border-color: var(--line-2); }
.bp-name-input:focus { outline: none; background: var(--panel-2); border-color: var(--accent); }


.gear-tile { display: flex; align-items: center; gap: 11px; }
.gt-square {
  position: relative; width: 46px; height: 46px; flex: none; border-radius: 8px;
  background: #12151a; border: 1px solid #3a4150; display: grid; place-content: center; overflow: hidden;
}
.gt-square img { width: 100%; height: 100%; object-fit: cover; }
/* rarity outlines: Exotic gold, Legendary white */
.gt-square.exotic { border-color: #ceae33; box-shadow: inset 0 0 0 1px rgba(206, 174, 51, 0.45); }
.gt-square.legendary { border-color: #e8ecf2; box-shadow: inset 0 0 0 1px rgba(232, 236, 242, 0.28); }
.d-ico.sq.exotic { border-color: #e0a326; box-shadow: inset 0 0 0 1px rgba(224, 163, 38, 0.5); }
.d-ico.sq.legendary { border-color: #e8ecf2; }
.gt-square.empty {
  border-style: dashed; color: #6f7787; font-size: 22px; font-weight: 300; cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.gt-square.empty:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.gt-square .gt-stat { display: grid; place-content: center; }
.gt-square .gt-stat img.stat-ico { width: 22px; height: 22px; filter: brightness(1.3); }
/* Remove button on a gear tile. It only appears on tile hover, so on its own hover
   it has to state plainly that it deletes: it fills red, brightens and lifts. */
.gt-clear {
  position: absolute; top: 0; right: 0; width: 20px; height: 20px; padding: 0;
  border: none; display: grid; place-content: center;
  background: rgba(10,12,16,0.82); color: #cfd4dc; font-size: 14px; line-height: 1; cursor: pointer;
  border-bottom-left-radius: 6px; opacity: 0;
  transition: opacity 0.12s, background 0.12s, color 0.12s, transform 0.12s, box-shadow 0.12s;
}
.gear-tile:hover .gt-clear { opacity: 1; }
.gt-clear:hover, .gt-clear:focus-visible {
  opacity: 1; background: var(--neg); color: #14161b; font-weight: 700;
  transform: scale(1.18); border-radius: 6px;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.5);
  outline: none;
}
.gt-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.gt-label { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #8b93a0; }
.gt-name { font-size: 13.5px; font-weight: 600; color: #eef1f5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-name.dim { color: #6f7787; font-weight: 400; }
.gt-sub { font-size: 11.5px; }
.gt-perks { display: flex; gap: 4px; margin-top: 3px; flex-wrap: wrap; }
/* weapons split their sockets into labelled groups: perks / masterwork / mod,
   laid out horizontally from the weapon */
.gt-perks.wpn { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.gt-group { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.gt-glab {
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: #79818f; min-width: 34px;
}
.gt-pip {
  width: 22px; height: 22px; border-radius: 50%; overflow: hidden; flex: none;
  background: #12151a; border: 1px solid #3a4150; display: grid; place-content: center;
  font-size: 9px; color: #9aa2ae; cursor: pointer; transition: border-color 0.12s;
}
.gt-pip img { width: 100%; height: 100%; object-fit: cover; }
.gt-pip:hover { border-color: var(--neg); }
.gt-pip.add { border-style: dashed; color: #6f7787; font-size: 14px; }
.gt-pip.add:hover { border-color: var(--accent); color: var(--accent); }
/* armor mods have no fixed sockets in game — press and drag one to reorder it */
.gt-perks:not(.wpn) .gt-pip:not(.add):not(.auto) { cursor: grab; touch-action: none; }
.gt-pip.dragging {
  cursor: grabbing; border-color: var(--accent); opacity: 0.85;
  transform: scale(1.15); box-shadow: 0 4px 12px rgba(0,0,0,0.55); z-index: 2;
}
body.mod-dragging { cursor: grabbing; user-select: none; }
/* mods held for a slot whose piece was removed */
.gt-perks.parked .gt-pip { opacity: 0.55; border-style: dashed; }
.gt-perks.parked .gt-pip:hover { opacity: 0.85; }
/* optimiser-assigned stat / tuning mods: square, accent-tinted, sit left of mods */
.gt-pip.auto {
  position: relative; border-radius: 6px; border-color: var(--accent);
  background: var(--accent-dim); overflow: visible;
}
.gt-pip.auto:hover { border-color: var(--accent); }
.gt-pip.auto > img { width: 16px; height: 16px; }
.gt-pip.auto .pip-badge {
  position: absolute; right: -4px; bottom: -4px; font-size: 8px; font-weight: 800; line-height: 1;
  background: var(--accent); color: #0d0f13; border-radius: 4px; padding: 1px 2px;
}
.gt-pip.auto .tp-pair { display: grid; grid-template-columns: 1fr 1fr; width: 100%; height: 100%; box-sizing: border-box; }
.gt-pip.auto .tp-pair img { width: 100%; height: 100%; object-fit: contain; }
.gt-pip.auto .tp-up { filter: none; }
/* the given-up stat is dimmed and pulled towards red so the trade reads at a glance */
.gt-pip.auto .tp-dn, .d-plug.auto .tp-dn { opacity: 0.6; filter: sepia(1) saturate(3) hue-rotate(-28deg); }
/* a tuning mod is a trade, so it says so: the stat gained, the stat given up */
.gt-pip.auto .pip-badge.swap, .d-plug.auto .pip-badge.swap {
  right: 50%; transform: translateX(50%); bottom: -6px; letter-spacing: -0.02em;
}
/* the same pips on the build detail page */
.d-plug.auto {
  position: relative; display: grid; place-content: center; border-color: var(--accent); background: var(--accent-dim);
}
.d-plug.auto > img { width: 60%; height: 60%; }
.d-plug.auto .pip-badge {
  position: absolute; right: -3px; bottom: -3px; font-size: 9px; font-weight: 800; line-height: 1;
  background: var(--accent); color: #0d0f13; border-radius: 4px; padding: 1px 3px;
}
.d-plug.auto .tp-pair { display: grid; grid-template-columns: 1fr 1fr; width: 100%; height: 100%; align-items: center; }
.d-plug.auto .tp-pair img { width: 100%; height: 100%; object-fit: contain; }
.d-plug.auto .tp-pair { padding: 6px 4px 10px; box-sizing: border-box; gap: 3px; }
.set-src {
  font-weight: 600; font-size: 10px; color: var(--accent); background: var(--accent-dim);
  padding: 1px 6px; border-radius: 10px; margin-left: 6px; white-space: nowrap;
}


/* the farming checklist is the saved page's main content, always open — each
   column's .opt-sec header draws its own rule, so the grid needs no divider */
/* armor checklist (plus target stats beneath it) · fragments + mods + tuning. The
   armor column holds a full single-line row, so it takes the lion's share. */
.farm-grid { display: grid; grid-template-columns: minmax(0, 1.95fr) minmax(0, 1fr); gap: 20px; }
.farm-grid > div > .opt-sec:first-child { margin-top: 4px; }
@media (max-width: 900px) { .farm-grid { grid-template-columns: 1fr; } }

/* gear picker (search + scrollable list) */
#gearPicker {
  position: absolute; z-index: 80; background: #181b21; border: 1px solid #414a5b;
  border-radius: 8px; padding: 6px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.6);
  display: flex; flex-direction: column; gap: 6px; animation: rise 0.12s ease;
  max-width: calc(100vw - 24px);
}
.picker-search {
  background: #0f1216; color: var(--text); border: 1px solid var(--accent);
  border-radius: 6px; padding: 8px 10px; font: inherit; font-size: 13px; width: 100%;
}
.picker-search:focus { outline: none; }
/* never scroll sideways — long subtitles wrap under the name instead */
.picker-list { max-height: 320px; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; }
.picker-opt { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 9px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.picker-opt:hover { background: var(--panel-2); }
.picker-opt img { width: 30px; height: 30px; border-radius: 5px; flex: none; background: #12151a; }
.picker-opt > span:not(.dim) { flex: 1 1 auto; min-width: 0; }
.picker-opt .dim { margin-left: auto; font-size: 11px; white-space: normal; text-align: right; }
.picker-opt.clear { color: var(--accent); font-weight: 600; border-bottom: 1px solid var(--line); border-radius: 0; margin-bottom: 2px; }
.picker-empty { padding: 10px 8px; }
.picker-list::-webkit-scrollbar { width: 8px; }
.picker-list::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }

/* subclass icon filter */
.sub-filter { display: inline-flex; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 3px; gap: 2px; }
.sub-btn {
  background: none; border: none; border-radius: 6px; color: var(--dim); cursor: pointer;
  font: 600 12.5px "Segoe UI", sans-serif; padding: 6px 12px; display: inline-flex; align-items: center;
}
.sub-btn.ico { padding: 6px 9px; }
.sub-btn.ico .ico { width: 18px; height: 18px; }
.sub-btn:hover { color: var(--text); }
.sub-btn.on { background: var(--panel-2); color: var(--el, var(--accent)); box-shadow: inset 0 0 0 1px var(--el, var(--accent)); }
.sub-btn.all.on { color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

/* exotic combo buttons */
.combo {
  display: inline-flex; align-items: center; gap: 8px; max-width: 200px;
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 7px; padding: 8px 12px; font: inherit; font-size: 13px; cursor: pointer;
}
.combo:hover { border-color: var(--line-2); }
.combo.on { border-color: var(--accent); color: var(--accent); }
.combo .caret { margin-left: auto; color: var(--dim); font-size: 10px; }
.combo span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* community header + upload plus */
.comm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.comm-head h2 { margin: 0; font-size: 13px; }
.upload-plus {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: var(--accent); color: #10131a; border: none; font-size: 24px; font-weight: 300;
  line-height: 1; cursor: pointer; display: grid; place-content: center;
  transition: transform 0.1s, filter 0.15s;
}
.upload-plus:hover { filter: brightness(1.1); }
.upload-plus:active { transform: scale(0.92); }
/* build composer: a full page of cards, one per section */
.create-page { max-width: 1060px; margin: 0 auto; padding: 20px 18px 60px; }
.create-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.create-head h2 { margin: 0; font-size: 19px; }
.create-hint { font-size: 12px; }
.up-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 20px 14px; margin-bottom: 14px;
}
.up-card-h {
  margin: 0 0 14px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: #aab2c0; padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.up-card-h .up-card-hint { font-weight: 500; letter-spacing: 0.02em; text-transform: none; font-size: 12px; margin-left: 6px; }
.up-subhead {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: #9aa2af; margin: 18px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
/* "fill from set" chips — a real search affordance, not a bare button */
.setfill-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.setfill-wrap { display: flex; align-items: stretch; gap: 6px; flex: 1 1 320px; min-width: 0; }
.sfc-clear {
  flex: none; width: 32px; border-radius: 9px; border: 1px solid var(--line-2);
  background: var(--panel-2); color: #9aa2ae; font-size: 16px; line-height: 1; cursor: pointer;
}
.sfc-clear:hover { color: var(--neg); border-color: var(--neg); }
/* the pieces a set will equip, previewed in the picker */
.set-pieces { display: flex; align-items: center; gap: 4px; margin-top: 5px; flex-wrap: wrap; }
.set-pieces img { width: 24px; height: 24px; border-radius: 5px; background: #12151a; border: 1px solid #333947; }
.set-pcount { font-size: 10.5px; margin-left: 3px; }
.setfill-chip {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 11px; text-align: left;
  background: var(--panel-2); border: 1px dashed var(--line-2); border-radius: 10px;
  padding: 9px 12px; color: var(--text); font: inherit; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.setfill-chip:hover { border-color: var(--accent); background: var(--accent-dim); }
.setfill-chip.filled { border-style: solid; border-color: var(--accent); background: var(--accent-dim); }
.sfc-icons { display: flex; flex: none; }
.sfc-icons img { width: 30px; height: 30px; border-radius: 6px; background: #12151a; }
.sfc-icons img + img { margin-left: -8px; }
.sfc-search {
  flex: none; width: 30px; height: 30px; border-radius: 6px; background: #12151a;
  display: grid; place-content: center; color: var(--accent); font-size: 17px;
}
.sfc-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.sfc-name { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sfc-sub { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setfill-chip .caret { opacity: 0.55; font-size: 10px; flex: none; }
.set-opt-icons img { width: 28px; height: 28px; border-radius: 6px; background: #12151a; }
.set-opt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* In-game subclass layout: the Super sits largest on the left, Abilities run in
   a row beside it, Aspects a step further right, Fragments smaller underneath. */
.kit-grid { display: flex; align-items: flex-start; gap: 34px; flex-wrap: wrap; }
.kit-aspects { margin-left: 8px; }
.kit-row { display: flex; gap: 12px; flex-wrap: wrap; }
.kit-head {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: #9aa2af; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
/* Each slot is a fixed-height band with the icon centred in it and the name
   below, so Super, Abilities and Aspects all sit on the same y line no matter
   how big the icon is or how long the name wraps. */
.kit-row { align-items: flex-start; }
.kit-slot {
  display: grid; grid-template-rows: 112px auto; justify-items: center; align-items: center;
  gap: 4px; width: 78px;
}
.ks-box {
  position: relative; width: 62px; height: 62px; border-radius: 10px; overflow: hidden;
  background: #12151a; border: 1px solid #3a4150; display: grid; place-content: center;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ks-inner { display: grid; place-content: center; width: 100%; height: 100%; }
/* Stasis/Strand ability pairs that reuse one Bungie art file: nudge the hue so
   each element still reads as its own colour (Strand green, Stasis blue). */
.el-shift-strand { filter: hue-rotate(-88deg) saturate(1.2); }
.el-shift-stasis { filter: saturate(1.05); }
.ks-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ks-box.empty {
  border-style: dashed; color: #6f7787; font-size: 24px; font-weight: 300; cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.ks-box.empty:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.kit-slot:hover .gt-clear { opacity: 1; }
.ks-name { font-size: 10.5px; line-height: 1.3; text-align: center; color: #cdd2da; overflow-wrap: anywhere; }
.ks-name.dim { color: #6f7787; }

/* the Super is the hero of the panel and sits in a diamond, as in game */
.kit-super .kit-slot { width: 132px; }
.kit-super .ks-box {
  width: 76px; height: 76px; border-radius: 12px; transform: rotate(45deg);
  border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-dim), 0 6px 20px rgba(0,0,0,0.5);
}
/* counter-rotate the contents and scale so the art fills the diamond */
.kit-super .ks-inner { transform: rotate(-45deg) scale(1.42); }
.kit-super .ks-box.empty .ks-inner { transform: rotate(-45deg); }
/* the diamond rotates its box, so this one keeps the counter-rotation on hover too */
.kit-super .gt-clear { transform: rotate(-45deg); }
.kit-super .gt-clear:hover, .kit-super .gt-clear:focus-visible { transform: rotate(-45deg) scale(1.18); }
.kit-super .ks-name { font-size: 12px; font-weight: 600; }

/* fragments read smaller than abilities/aspects */
.frag-chips .frag-chip { font-size: 11.5px; padding: 4px 10px 4px 4px; }
.frag-chips .frag-chip img { width: 26px; height: 26px; }
.up-actions .big { padding: 10px 22px; font-size: 14px; }
.up-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.up-row > .bp-label { min-width: 110px; }
.up-row input, .up-row select {
  flex: 1; min-width: 200px; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; font: inherit; font-size: 13px;
}
.up-row input:focus, .up-row select:focus { outline: none; border-color: var(--accent); }
.up-row .class-pick { flex: 1; min-width: 392px; }
.up-note { padding: 6px 0 2px; font-size: 12.5px; }
.up-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 18px; }

.frag-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.frag-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 20px;
  padding: 5px 12px 5px 5px; color: var(--dim); font: inherit; font-size: 12.5px; cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.frag-chip img { width: 22px; height: 22px; border-radius: 50%; background: #12151a; }
.frag-chip:hover { color: var(--text); border-color: var(--line-2); }
.frag-chip.on { color: var(--text); border-color: var(--accent); background: var(--accent-dim); }

.up-setinfo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 14px; margin-bottom: 12px; font-size: 12.5px;
}
.up-setinfo b { color: var(--accent); }
.up-setinfo .dim { line-height: 1.5; margin-top: 3px; }
@media (max-width: 700px) { .up-setinfo { grid-template-columns: 1fr; } }

/* fragment capacity + chips */
.frag-cap { font-size: 12px; color: var(--dim); margin-bottom: 8px; }
.frag-cap.over { color: var(--neg); }
.frag-chip.full { opacity: 0.4; }
.frag-chip.full:hover { border-color: var(--line); }

/* armor sets */
.set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 820px) { .set-grid { grid-template-columns: 1fr; } }
.set-slot { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--panel-2); }
.set-slot.filled { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.set-slot-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.seg.small .seg-btn { padding: 4px 9px; font-size: 11.5px; }
.set-combo {
  width: 100%; display: flex; align-items: center; gap: 10px;
  background: #12151a; border: 1px solid var(--line-2); border-radius: 8px;
  padding: 9px 12px; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; text-align: left;
}
.set-combo:hover { border-color: var(--accent); }
.set-ico { width: 30px; height: 30px; border-radius: 7px; flex: none; background: #0e1116; object-fit: contain; }
.set-ico.ph { border: 1px dashed var(--line-2); display: inline-block; }
.set-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-bonuses { display: flex; flex-direction: column; gap: 11px; margin-top: 12px; }
.set-bonus {
  display: flex; gap: 14px; align-items: flex-start; font-size: 13.5px;
  background: #12151a; border: 1px solid var(--line); border-radius: 11px; padding: 13px 15px;
}
/* the icon sits on the in-game round blue field */
.set-bonus img {
  width: 52px; height: 52px; flex: none; border-radius: 50%; object-fit: contain; padding: 7px;
  background: radial-gradient(circle at 50% 38%, #6ea6d8 0%, #4f83bd 62%, #3d6aa4 100%);
  border: 1px solid #7fb0dc; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
}
.set-bonus b { color: var(--accent); font-size: 14.5px; }
.set-bonus .dim { line-height: 1.5; margin-top: 4px; font-size: 12.5px; }
.set-list .set-opt { align-items: center; gap: 11px; }
.set-opt-icons { display: inline-flex; gap: 3px; flex: none; }
.set-opt-icons img { width: 28px; height: 28px; border-radius: 6px; background: #12151a; object-fit: contain; }
.set-opt-text { display: flex; flex-direction: column; min-width: 0; }
.set-opt-text .dim { font-size: 11px; }

/* artifact laid out like the in-game screen: one column per tier */
.art-grid-wrap { margin-top: 4px; }
/* the seven sockets, as they read in game: what you've got, then what's left */
.art-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.art-slots { display: flex; gap: 6px; }
.art-slot {
  width: 38px; height: 38px; border-radius: 9px; flex: none; overflow: hidden;
  background: #10131a; border: 1px dashed #3a4150; display: grid; place-content: center;
}
.art-slot.on { border-style: solid; border-color: var(--accent); background: var(--accent-dim); }
.art-slot img { width: 100%; height: 100%; object-fit: cover; }
.art-count { font-size: 12.5px; font-weight: 600; }
.art-count.full { color: var(--accent); }
.art-clear {
  margin-left: auto; background: none; border: 1px solid var(--line-2); border-radius: 7px;
  color: var(--dim); font: inherit; font-size: 12px; padding: 5px 11px; cursor: pointer;
}
.art-clear:hover { color: var(--neg); border-color: var(--neg); }
.art-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; overflow-x: auto; }
@media (max-width: 640px) { .art-grid { grid-template-columns: 1fr; } }
.art-col { display: flex; flex-direction: column; gap: 7px; }
.art-col-head {
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: #99a1ad; padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.art-cap {
  font-size: 10px; letter-spacing: 0; background: var(--panel-2); border: 1px solid var(--line-2);
  border-radius: 9px; padding: 1px 6px; color: #aab2be;
}
.art-cap.full { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
.art-hint { font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: none; color: #6f7787; }
.art-perk {
  display: flex; align-items: center; gap: 9px; text-align: left;
  background: #12151a; border: 1px solid #333947; border-radius: 9px;
  padding: 7px 9px; color: var(--dim); font: inherit; font-size: 12px; cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.art-perk img { width: 38px; height: 38px; border-radius: 7px; flex: none; }
.art-perk span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.art-perk:hover { color: var(--text); border-color: var(--line-2); }
.art-perk.on { color: var(--text); border-color: var(--accent); background: var(--accent-dim); }
/* no room left for this tier — shown, but plainly not clickable */
.art-perk.off { opacity: 0.38; cursor: not-allowed; }
.art-perk.off:hover { color: var(--dim); border-color: #333947; }

/* composer stat sliders reuse the optimizer controls, with bigger grab targets */
#upStats .target-block { padding: 4px 0 6px; }
#upStats .t-name { flex: 1; }
#upStats .up-stat-out { margin-right: 4px; }
#upStats .t-slider { height: 8px; margin: 10px 0 6px; cursor: grab; }
#upStats .t-slider::-webkit-slider-thumb {
  width: 22px; height: 22px; border-width: 3px;
  box-shadow: 0 0 0 1px var(--line-2), 0 2px 6px rgba(0, 0, 0, 0.5);
}
#upStats .t-slider::-moz-range-thumb { width: 18px; height: 18px; }
.up-zh { max-width: 340px; padding: 4px 0 10px; }
.up-optrow { margin-top: 10px; }

/* Stats card: calculator on the left, proposed builds on the right — the
   standalone optimizer's split, inside the composer */
.opt-two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .opt-two { grid-template-columns: 1fr; } }
.opt-calc { min-width: 0; }
.opt-results { min-width: 0; }
.opt-results .d-label { margin-bottom: 10px; }
.opt-calc .up-optrow .btn { width: 100%; }
.opt-empty {
  border: 1px dashed var(--line-2); border-radius: 10px; padding: 22px 18px;
  font-size: 12.5px; line-height: 1.6; text-align: center;
}
.dro-list { display: flex; flex-direction: column; gap: 10px; }
.dro { background: #12151a; border: 1px solid var(--line); border-radius: 10px; padding: 12px 13px; }
.dro.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-dim); }
.dro-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.dro-num { font-family: var(--mono); font-size: 12px; color: var(--accent); font-weight: 700; }
.dro-head .pill { font-size: 11px; }
.dro-use { margin-left: auto; padding: 5px 14px; font-size: 12px; }
.dro-archs { display: flex; flex-direction: column; gap: 5px; margin-bottom: 11px; }
.dro-arch { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.dro-ico {
  width: 26px; height: 26px; flex: none; border-radius: 7px; display: grid; place-content: center;
  background: #0f1216; border: 1px solid #333947;
}
.dro-ico img.stat-ico { width: 15px; height: 15px; filter: brightness(1.3); }
.dro-name { flex: 1; min-width: 0; color: #dfe3ea; }
.dro-name b { color: var(--accent); }
.dro-tert { display: inline-flex; align-items: center; gap: 4px; flex: none; color: #aab2be; }
.dro-tert img.stat-ico { width: 13px; height: 13px; }
.dro-stats { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--line); padding-top: 10px; }
.dro-stat { display: flex; align-items: center; gap: 7px; }
.dro-stat img.stat-ico { width: 14px; height: 14px; filter: brightness(1.3); }
.dro-track { flex: 1; height: 5px; background: var(--panel-2); border-radius: 3px; overflow: hidden; }
.dro-fill { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.dro-val { font-family: var(--mono); font-size: 12px; color: #eef1f5; width: 30px; text-align: right; }
.dro-delta { font-family: var(--mono); font-size: 11px; width: 34px; text-align: right; }
.dro-delta.pos { color: var(--pos); }
.dro-delta.neg { color: var(--neg); }

/* Prismatic renders as the drawn flat glyph (see PRISMATIC_SVG), so it needs no
   size correction — it already matches the other element glyphs' weight. */

/* in-game style mod slots: larger rounded squares, sized to read at a glance */
.armor-tiles .gt-pip, .up-tiles .gt-pip, .armor-list .gt-pip, .wpn-list .gt-pip {
  width: 52px; height: 52px; border-radius: 11px;
  border-color: #414a5b; background: #10131a;
}
.armor-tiles .gt-pip.add, .up-tiles .gt-pip.add, .armor-list .gt-pip.add, .wpn-list .gt-pip.add { font-size: 26px; }
.armor-tiles .gt-perks, .up-tiles .gt-perks, .armor-list .gt-perks, .wpn-list .gt-perks { gap: 8px; margin-top: 8px; }
/* the optimiser's stat and tuning mods scale with them */
.armor-tiles .gt-pip.auto > img, .up-tiles .gt-pip.auto > img,
.armor-list .gt-pip.auto > img, .wpn-list .gt-pip.auto > img { width: 28px; height: 28px; }
.armor-tiles .gt-pip.auto .pip-badge, .up-tiles .gt-pip.auto .pip-badge,
.armor-list .gt-pip.auto .pip-badge, .wpn-list .gt-pip.auto .pip-badge {
  font-size: 10.5px; padding: 1px 4px; border-radius: 5px; right: -5px; bottom: -5px;
}
.armor-tiles .gt-pip.auto .tp-pair, .up-tiles .gt-pip.auto .tp-pair,
.armor-list .gt-pip.auto .tp-pair, .wpn-list .gt-pip.auto .tp-pair { padding: 7px 5px 11px; gap: 3px; }
.up-tiles .gt-square, .armor-list .gt-square, .wpn-list .gt-square { width: 54px; height: 54px; border-radius: 10px; }
.up-tiles .gt-name, .armor-list .gt-name, .wpn-list .gt-name { font-size: 14px; }

/* weapons and armor stack vertically, one piece per full-width row */
.wpn-list, .armor-list { display: flex; flex-direction: column; gap: 10px; }
.armor-list .gear-tile {
  align-items: center; gap: 13px;
  background: #12151a; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
}
.armor-list .gt-glab { min-width: 0; }
.armor-list .gt-name { white-space: normal; }

/* weapon rows: thumbnail level with the name, perk columns beneath */
.wpn-tile { background: #12151a; border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; }
.wt-head { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.wt-head .gt-square { width: 54px; height: 54px; border-radius: 10px; flex: none; }
.wt-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.wt-title .gt-name { font-size: 15px; white-space: normal; }
/* masterwork / weapon-mod pickers: obvious labelled controls, not bare pips */
.wt-side { display: inline-flex; align-items: center; gap: 4px; flex: none; position: relative; }
.ws-btn {
  display: flex; align-items: center; gap: 9px; text-align: left;
  background: var(--panel-2); border: 1px dashed var(--line-2); border-radius: 9px;
  padding: 6px 11px 6px 7px; color: var(--text); font: inherit; cursor: pointer; min-width: 148px;
  transition: border-color 0.15s, background 0.15s;
}
.ws-btn:hover { border-color: var(--accent); background: var(--accent-dim); }
.ws-btn.filled { border-style: solid; border-color: var(--accent); background: var(--accent-dim); }
.ws-btn img, .ws-plus {
  width: 32px; height: 32px; border-radius: 7px; flex: none;
  background: #10131a; border: 1px solid #3a4150;
}
.ws-plus { display: grid; place-content: center; color: #6f7787; font-size: 18px; font-weight: 300; }
.ws-btn:hover .ws-plus { color: var(--accent); border-color: var(--accent); }
.ws-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ws-lab { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #8b93a0; }
.ws-val { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
.ws-clear {
  width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line-2);
  background: var(--panel); color: #9aa2ae; font-size: 13px; line-height: 1; cursor: pointer; flex: none;
}
.ws-clear:hover { color: var(--neg); border-color: var(--neg); }
/* exotics: a catalyst toggle stands in for the masterwork picker */
.ws-btn.cat { min-width: 156px; }
.ws-check {
  width: 32px; height: 32px; border-radius: 7px; flex: none; display: grid; place-content: center;
  background: #10131a; border: 1px solid #3a4150; color: var(--accent); font-size: 16px; font-weight: 700;
}
.ws-check.on { background: var(--accent); color: #0d0f13; border-color: var(--accent); }
/* with the catalyst's own artwork in it, the tick is redundant */
.ws-check.art { background: #10131a; border-color: #ceae33; padding: 0; overflow: hidden; }
.ws-check.art img { width: 100%; height: 100%; border: none; border-radius: 6px; object-fit: cover; }

/* the weapon's real perk columns, click to pick one per column */
/* compact grid of large perk icons, no captions — hover gives name + description */
.wpn-perks {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 20px; border-top: 1px solid var(--line);
}
.wpn-col { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
/* Left padding is the lane the enhanced arrow hangs out into. Applied to every
   perk (not just enhanced ones) so enabling enhanced never reflows the column.
   Disc is 54px, so the button is 13 + 54 + 3 = 70px wide. */
.wp-opt {
  display: grid; place-content: center; padding: 3px 3px 3px 13px; flex: none;
  background: transparent; border: none; cursor: pointer; border-radius: 50%;
  transition: transform 0.12s;
}
/* perk glyphs are white on transparency, so the disc behind them is the blue the
   game uses; box-sizing + object-fit keep every icon exactly the same size */
.wp-opt img, .wp-noico {
  display: block; box-sizing: border-box; width: 54px; height: 54px; border-radius: 50%;
  object-fit: cover; background: var(--perk-blue); border: 1px solid #3a4150;
  transition: border-color 0.12s, box-shadow 0.12s, filter 0.12s;
}
/* a column with only one possible plug is fixed (exotics) — show it as locked in */
.wp-opt.fixed { cursor: default; }

.wp-opt { position: relative; }
/* reset sits where one more perk column would be */
.wpn-reset-col { justify-content: flex-start; }
/* matches a perk button's disc plus its 13px arrow lane so the columns line up */
.wp-reset {
  box-sizing: border-box; width: 54px; height: 54px; margin: 3px 3px 3px 13px; border-radius: 50%;
  flex: none; cursor: pointer;
  background: #0f1216; border: 1px solid #3a4150; color: #9aa2ae;
  font-size: 22px; line-height: 1; display: grid; place-content: center;
  transition: color 0.12s, border-color 0.12s, transform 0.12s;
}
.wp-reset:hover { color: var(--accent); border-color: var(--accent); transform: rotate(-45deg); }

.d-plug-wrap { position: relative; display: inline-block; }
.wp-noico { display: grid; place-content: center; font-size: 13px; color: #9aa2ae; }
.wp-opt img { filter: brightness(0.72) saturate(0.75); }
.wp-opt:hover { transform: scale(1.07); }
.wp-opt:hover img { filter: none; border-color: var(--line-2); }
.wp-opt.on img, .wp-opt.on .wp-noico {
  filter: none; border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), 0 0 12px -2px var(--accent);
}
/* the catalyst column reads as exotic: gold ring instead of the blue one */
.wpn-cat-col .wp-opt img { background: #17130a; }
.wpn-cat-col .wp-opt.on img {
  border-color: #ceae33;
  box-shadow: 0 0 0 2px #ceae33, 0 0 12px -2px #ceae33;
}

/* import + optimise rows */
.up-import input { flex: 1; min-width: 240px; }
.up-optrow { gap: 14px; }
.up-optrow .over { color: var(--neg); }
.up-stat-out { font-family: var(--mono); font-size: 13px; color: var(--accent); min-width: 34px; text-align: right; }

/* video guide embed */
.d-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-2); }
.d-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.up-statgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px 14px; }
.up-stat { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.up-stat span { flex: 1; }
.up-stat input {
  width: 70px; background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 6px 8px; font-family: var(--mono); font-size: 13px; text-align: right;
}
.up-stat input:focus { outline: none; border-color: var(--accent); }

/* community page: constrain width + side padding on wide screens */
.community-page, .detail-page, .builds-page { max-width: 1120px; margin: 0 auto; padding: 0 8px; }
@media (min-width: 1400px) { .community-page, .detail-page, .builds-page { padding: 0 40px; } }
/* the farming checklist carries three columns, so it runs 20% wider */
.builds-page { max-width: 1344px; }

/* subclass filter: compact segmented control, real element icons, hairline dividers */
.sub-filter { padding: 3px; gap: 0; background: #141821; border-color: #2b3040; border-radius: 9px; }
.sub-btn.all {
  padding: 8px 16px; border-radius: 7px; margin-right: 3px; font-size: 13px; color: var(--text);
}
.sub-btn.all.on { box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent); background: transparent; }
/* fixed, equal boxes so every element glyph is centred and always fits */
.sub-btn.ico {
  width: 42px; height: 34px; padding: 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px; position: relative;
  opacity: 0.85; transition: opacity 0.15s, background 0.15s;
}
.sub-btn.ico + .sub-btn.ico::before {
  content: ''; position: absolute; left: -1px; top: 22%; bottom: 22%; width: 1px; background: #2f3545;
}
.sub-btn.ico img, .sub-btn.ico .el-svg, .sub-btn.ico .el-svg svg {
  width: 21px; height: 21px; max-width: 100%; max-height: 100%;
  display: block; object-fit: contain;
}
.sub-btn.ico:hover { opacity: 1; background: rgba(255, 255, 255, 0.05); }
.sub-btn.ico.on { opacity: 1; background: color-mix(in srgb, var(--el) 24%, transparent); box-shadow: inset 0 0 0 1px var(--el); }
.sub-btn.ico.on::before, .sub-btn.ico.on + .sub-btn.ico::before { display: none; }

/* community card: bare super art, blurred backdrop, clearer footer separation */
.comm-post.clickable { cursor: pointer; transition: border-color 0.15s, transform 0.08s; position: relative; overflow: hidden; }
.comm-post.clickable:hover { border-color: var(--el, var(--line-2)); }
.comm-post.clickable:active { transform: scale(0.997); }
/* subclass-colored wash on the top half, with the blurred emblem art over it */
.cp-tint {
  position: absolute; inset: 0 0 auto 0; height: 58%; z-index: 0; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--el) 30%, transparent), transparent);
  -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,0.6) 45%, rgba(0,0,0,0) 85%);
  mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,0.6) 45%, rgba(0,0,0,0) 85%);
}
.cp-bg {
  position: absolute; inset: 0 0 auto 0; height: 58%; z-index: 0; pointer-events: none;
  background-size: cover; background-position: center; filter: blur(16px) saturate(1.2);
  opacity: 0.42; transform: scale(1.15);
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 40%, rgba(0,0,0,0) 80%);
  mask-image: linear-gradient(to right, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 40%, rgba(0,0,0,0) 80%);
}
.comm-post > *:not(.cp-bg):not(.cp-tint) { position: relative; z-index: 1; }
.cp-super {
  width: 48px; height: 48px; flex: none; display: grid; place-content: center;
  background: var(--panel-2); border: 1px solid var(--el, var(--line-2)); border-radius: 10px; overflow: hidden;
}
.cp-super img { width: 34px; height: 34px; object-fit: contain; }
/* bare = no frame so the super silhouette itself reads large */
.cp-super.bare { background: none; border: none; border-radius: 0; width: 76px; height: 76px; overflow: visible; }
.cp-super.bare img { width: 76px; height: 76px; filter: drop-shadow(0 2px 7px rgba(0,0,0,0.65)); }
.cp-super.bare .el-svg svg { width: 66px; height: 66px; }
.cp-super.lg { width: 72px; height: 72px; border-radius: 14px; }
.cp-super.lg.bare { width: 86px; height: 86px; }
.cp-super.lg.bare img { width: 86px; height: 86px; }
.cp-super.lg.bare .el-svg svg { width: 74px; height: 74px; }
.cp-row .up-stats { margin-left: 4px; }
.cp-foot { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line-2); box-shadow: 0 -1px 0 rgba(0,0,0,0.35); }

/* detail: gear rows with plug columns (armor mods / weapon perks) — no dividers */
.d-gear-row {
  display: flex; align-items: center; gap: 14px; padding: 11px 0;
}
.d-gear-row .d-ico { width: 52px; height: 52px; }
.d-gear-row .d-meta { flex: 1; min-width: 0; }
.d-slotlab { font-size: 11.5px; }
.d-plugs { display: flex; gap: 8px; flex: none; flex-wrap: wrap; justify-content: flex-end; max-width: 380px; }
/* mods / perks / masterworks render at the same size as the gear thumbnail */
.d-plug {
  width: 52px; height: 52px; border-radius: 10px; overflow: hidden; flex: none;
  background: #12151a; border: 1px solid #3a4150; display: grid; place-content: center;
}
.d-plug img { width: 100%; height: 100%; object-fit: cover; }
.d-plug.empty { border-style: dashed; opacity: 0.35; }
/* armor pieces, their mods, weapon perks, and the masterwork / weapon mod /
   catalyst plugs all carry an in-game white square stroke. The .gear-link in the
   last selector is load-bearing: .gear-link.d-plug below sets the default border,
   so this has to out-specify it, not just follow it. */
.d-gear-row:not(.wpn) .d-ico:not(.exotic),
.d-gear-row:not(.wpn) .d-plug:not(.empty),
.d-plug-line .gear-link.d-plug {
  border-color: #e9edf3; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
/* weapon perk glyphs are white on transparency, so they sit on the same blue
   disc colour the build creator uses */
.d-plug-line.perks .d-plug { background: var(--perk-blue); }
/* weapons: everything on one line — the perks grouped, then a gap, then the
   masterwork + weapon mod flush to the right edge. The mw/mod area is a fixed
   width so the perk columns line up vertically across weapons no matter how
   many perks each one has. */
.d-gear-row.wpn .d-meta { flex: 1 1 auto; min-width: 110px; }
.d-wpn-plugs { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 30px; flex: none; }
.d-plug-line { display: flex; gap: 8px; }
.d-plug-line.perks { justify-content: flex-end; }
/* two fixed cells — masterwork (or an exotic's catalyst, which is its masterwork)
   then weapon mod — so both columns line up across weapons even when one is empty */
.d-plug-line.extras { width: 112px; flex: none; }
.d-plug-cell { width: 52px; height: 52px; flex: none; }

/* detail: armor set bonuses block — icons on the in-game light-blue disc */
.d-bonuses { display: flex; flex-direction: column; gap: 11px; }
.d-bonus { display: flex; gap: 15px; align-items: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 13px 16px; }
.d-bonus-ico {
  width: 58px; height: 58px; flex: none; border-radius: 50%; display: grid; place-content: center;
  background: radial-gradient(circle at 50% 38%, #7fb4e2 0%, #5b93cf 60%, #4576ac 100%);
  border: 1px solid #9cc5e8; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); overflow: hidden;
}
.d-bonus-ico .ico { width: 28px; height: 28px; color: #fff; }
.d-bonus-ico img { width: 40px; height: 40px; object-fit: contain; display: block; }
.d-bonus b { font-size: 14.5px; }
.d-bonus .dim { font-size: 12.5px; line-height: 1.5; margin-top: 3px; }

/* detail: archetype/tuning table + artifact */
.d-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.d-table th { text-align: left; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); padding: 0 8px 6px 0; font-weight: 600; }
.d-table td { padding: 6px 8px 6px 0; border-top: 1px solid var(--line); color: #dfe3e9; }
.d-table td.acc { color: var(--accent); font-family: var(--mono); font-size: 11.5px; }
.d-artifact { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.d-ico.lg { width: 76px; height: 76px; }
.d-art-perks { flex: 1; min-width: 240px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px 18px; }

/* Stats & armor plan: the archetype/mod/tuning plan on the left, the exact stats
   on the right, balanced to the same height */
.plan-two { align-items: stretch; }
.plan-cols { display: flex; flex-direction: column; }
.plan-stats { display: flex; flex-direction: column; }
/* Exact stats read like the in-game character screen: value then icon, one per
   line, no bars. The stack grows to fill the plan's height on the left. */
.ex-stats { display: flex; flex-direction: column; flex: 1; justify-content: space-between; align-items: flex-end; }
.ex-stat { display: flex; align-items: center; gap: 14px; padding: 4px 0; }
.ex-val { font: 700 27px/1 var(--mono); color: #f2f4f7; width: 62px; text-align: right; }
/* bare stat icon — no box or border */
.ex-ico { width: 34px; height: 34px; flex: none; display: grid; place-content: center; }
.ex-ico img.stat-ico { width: 30px; height: 30px; filter: brightness(1.35); }
.plan-dim { align-self: flex-start; margin-top: 16px; text-decoration: none; }

.plan-sec + .plan-sec { margin-top: 22px; }
/* section labels carry the structure — no divider lines needed */
.plan-h {
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: #8b93a0; margin-bottom: 11px;
}
/* 1 — archetypes: one airy line each — piece on the left, tertiary stat on the right */
.plan-arch { display: flex; flex-direction: column; gap: 9px; }
.pa-row {
  display: flex; align-items: center; gap: 13px;
  background: #12151a; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
}
.pa-ico {
  width: 38px; height: 38px; flex: none; border-radius: 9px; display: grid; place-content: center;
  background: #0f1216; border: 1px solid #333947;
}
.pa-ico img.stat-ico { width: 19px; height: 19px; filter: brightness(1.35); }
.pa-name { flex: 1; min-width: 0; font-weight: 700; font-size: 13.5px; }
.pa-count { color: var(--accent); font-weight: 800; margin-right: 3px; }
.pa-tert {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: 12.5px; color: #dfe3ea; background: #0f1216;
  border: 1px solid #333947; border-radius: 8px; padding: 6px 11px;
}
.pa-tert-lab { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #79818f; }
.pa-tert img.stat-ico { width: 15px; height: 15px; filter: brightness(1.3); }
.pa-empty { font-size: 12px; padding: 2px 0; }
/* 2 & 3 — mods and tunings as a wrap of count chips */
.plan-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.plan-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: #12151a; border: 1px solid var(--line-2); border-radius: 8px;
  padding: 7px 11px; font-size: 12px; color: #dfe3ea;
}
.plan-chip img.stat-ico { width: 15px; height: 15px; }
.plan-chip.tune { border-color: rgba(206, 174, 51, 0.4); }
.plan-chip .tune-sep { color: #6f7787; margin: 0 1px; }

/* subclass kit tiles on the character sheet */
/* same card as the community class filter, sized for a narrower column —
   auto-fit so the row wraps instead of squeezing the names */
.class-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)); gap: 8px; }
.cpick {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px;
  color: var(--text); font: 600 13px "Segoe UI", sans-serif; padding: 9px 11px; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.cpick .cc-glyph { width: 36px; height: 36px; background: var(--panel); }
.cpick .cls-ico { width: 24px; height: 24px; }
.cp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpick:hover { border-color: var(--line-2); }
.cpick.on { border-color: var(--accent); background: var(--accent-dim); }
.cpick.on .cc-glyph { border-color: var(--accent); color: var(--accent); }
.kit-tiles { display: flex; flex-direction: column; gap: 8px; }

/* build detail page */
.detail-page { display: flex; flex-direction: column; gap: 14px; }
.d-back { align-self: flex-start; }
.d-title { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; border-left: 3px solid var(--el); }
.d-title-main { flex: 1; min-width: 220px; }
.d-h1 { font-size: 26px; font-weight: 700; margin: 0 0 8px; color: #f2f4f7; }
.d-byline { font-size: 13px; margin: 8px 0; }
.d-byline .d-fav { color: var(--accent); }
.d-socials { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.d-social { text-decoration: none; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--text); }
.d-social.yt { color: #ff6b6b; border-color: rgba(255,107,107,0.4); }
.d-social.dc { color: #8ea1e8; border-color: rgba(142,161,232,0.4); }
.d-title-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 180px; }
.d-title-actions .btn, .d-title-actions .cp-fav { width: 100%; text-align: center; }

.d-sec { padding: 18px 20px; }
.d-sec-h { font-size: 15px; font-weight: 700; margin: 0 0 14px; color: #eef1f5; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.d-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.d-two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 820px) { .d-two, .d-grid { grid-template-columns: 1fr; } }
.d-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #99a1ad; margin-bottom: 8px; }
.d-label.good-t { color: var(--pos); }
.d-label.bad-t { color: var(--neg); }
.d-item { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.d-ico { width: 40px; height: 40px; flex: none; border-radius: 50%; overflow: hidden; background: #12151a; border: 1px solid #3a4150; display: grid; place-content: center; }
.d-ico.sq { border-radius: 8px; }
.d-ico.exotic { border-color: #e0a326; }
.d-ico img { width: 100%; height: 100%; object-fit: cover; }
.d-ico img.stat-ico { width: 22px; height: 22px; object-fit: contain; filter: brightness(1.3); }
.d-meta { min-width: 0; }
.d-name { font-size: 13.5px; font-weight: 600; color: #eef1f5; }
.d-weapon { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line); }
.d-weapon:last-child { border-bottom: none; }
.d-weapon .d-ico { width: 48px; height: 48px; }
.d-perks { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.d-perk { display: inline-flex; align-items: center; gap: 5px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 20px; padding: 3px 10px 3px 3px; font-size: 11.5px; }
.d-perk img { width: 20px; height: 20px; border-radius: 50%; }
.d-text { font-size: 14px; line-height: 1.6; color: #d6dbe2; }

/* strengths / weaknesses panels */
.sw-box { border-radius: 10px; padding: 14px 16px; border: 1px solid; }
.sw-box.good { background: rgba(74, 158, 74, 0.13); border-color: rgba(120, 200, 110, 0.45); }
.sw-box.bad { background: rgba(198, 78, 62, 0.13); border-color: rgba(224, 120, 104, 0.45); }
.sw-head { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 10px; }
.sw-box.good .sw-head { color: #a7dd97; }
.sw-box.bad .sw-head { color: #f0a99b; }
.sw-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.sw-list li { font-size: 13.5px; line-height: 1.5; color: #e6eaef; }
.sw-box.good .sw-list li::marker { color: #7fc46f; }
.sw-box.bad .sw-list li::marker { color: #e08878; }

/* hover tooltips */
#hoverTip {
  position: absolute; z-index: 200; max-width: 440px; pointer-events: none;
  background: #12151b; border: 1px solid #414a5b; border-radius: 10px;
  padding: 13px 15px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.72), 0 4px 12px rgba(0, 0, 0, 0.5);
  animation: rise 0.1s ease; overflow: hidden;
}
/* header: the item's own artwork beside its name, as the game shows it */
.ht-head { display: flex; align-items: center; gap: 10px; }
.ht-ico {
  width: 34px; height: 34px; flex: none; border-radius: 6px; object-fit: cover;
  background: #0f1216; border: 1px solid #3a4150;
}
.ht-name { font-size: 15px; font-weight: 700; color: #f2f4f7; }
.ht-desc { font-size: 13.5px; line-height: 1.6; color: #b9c0cc; margin-top: 9px; }

/* detailed write-up from the community Clarity database */
.ht-clarity { margin: 12px -15px -13px; padding: 11px 15px 13px; background: #171b22; border-top: 1px solid #2b3240; }
.ht-clarity-h {
  display: flex; align-items: center; gap: 5px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
  color: #7e8695; margin-bottom: 8px;
}
.ht-gem { color: #6fd3a8; font-size: 11px; letter-spacing: 0; }
.ht-line { font-size: 13.5px; line-height: 1.6; color: #ccd3de; }
/* Clarity groups its lines into paragraphs with explicit spacer lines, so the gap
   between plain consecutive lines stays tight and the spacer does the separating */
.ht-line + .ht-line { margin-top: 2px; }
.ht-gap { height: 9px; }
/* list rows keep their bullet in a hanging indent so wrapped text stays aligned */
.ht-line.ht-bullet { padding-left: 14px; position: relative; }
.ht-line.ht-bullet::before { content: '•'; position: absolute; left: 3px; color: #8b93a0; }
/* in-game symbols: element / ammo / champion / class markers that Clarity ships as
   a class with no text. Artwork is masked so the cl-* colour below tints it. */
.cl-sym {
  display: inline-block; width: 13px; height: 13px; flex: none;
  vertical-align: -2px; margin-right: 3px; background: currentColor;
}
.cl-sym.ico {
  -webkit-mask: var(--u) center / contain no-repeat; mask: var(--u) center / contain no-repeat;
}
/* the ones with no artwork: ammo types read as the in-game bar, the rest as a pip */
.cl-sym:not(.ico) { width: 12px; height: 9px; border-radius: 2px; vertical-align: 0; }
.cl-sym.cl-barrier, .cl-sym.cl-overload, .cl-sym.cl-unstoppable {
  width: 10px; height: 10px; border-radius: 50%; vertical-align: -1px;
}
.cl-bold { font-weight: 700; color: #f2f4f7; }
/* Clarity's "title" run is a heading inside the body text */
.cl-title { font-weight: 700; color: #f2f4f7; }
.cl-center { text-align: center; }
.cl-background { background: rgba(255, 255, 255, 0.09); }
.cl-breakSpaces { white-space: break-spaces; }
.cl-descriptionDivider { margin-top: 5px; padding-top: 5px; border-top: 1px solid #2b3240; }
.cl-enhancedArrow { color: #f2c75c; font-weight: 700; }
.cl-yellow { color: #f2c75c; }
.cl-blue { color: #6ba9e8; }
.cl-green { color: #74c98a; }
.cl-purple { color: #b98ae0; }
/* the PvE / PvP pair reads as one contrast, so they take opposing hues the way
   every other Clarity reader does — pve was green here, indistinguishable from
   cl-green, which is also used inside the same sentences */
.cl-pve { color: #84aff2; font-weight: 600; }
.cl-pvp { color: #e88a8a; font-weight: 600; }
.cl-solar { color: #f0793a; }
.cl-arc { color: #79bbe8; }
.cl-void { color: #b08ae0; }
.cl-stasis { color: #4d88d6; }
.cl-strand { color: #35c98a; }
.cl-kinetic { color: #d9dde4; }
.cl-primary { color: #d9dde4; }
.cl-special { color: #7fd6a0; }
.cl-heavy { color: #b98ae0; }
.cl-barrier { color: #d8c46a; }
.cl-overload { color: #7fc5c9; }
.cl-unstoppable { color: #d9865a; }
.cl-hunter { color: #7fd4c1; }
.cl-titan { color: #d05b5b; }
.cl-warlock { color: #f2c75c; }
/* Clarity ships reference URLs on some runs, but the hover card is pointer-events:
   none — nothing in it can be clicked, so this must not look like a link */
.cl-link { color: var(--accent); }

/* gear icons that link out to light.gg */
.gear-link { display: inline-grid; place-content: center; overflow: hidden; text-decoration: none; }
a.gear-link { cursor: alias; }
a.gear-link:hover { border-color: var(--accent); filter: brightness(1.12); }
.gear-link img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* keep the shapes these links replace */
.gear-link.cp-ico { width: 44px; height: 44px; border-radius: 6px; background: #12151a; border: 1px solid #333947; }
.gear-link.cp-ico.exotic { border-color: #d8b13d; box-shadow: 0 0 0 1px rgba(216, 177, 61, 0.4); }
.gear-link.d-ico { width: 40px; height: 40px; border-radius: 50%; background: #12151a; border: 1px solid #3a4150; }
.gear-link.d-ico.sq { border-radius: 8px; }
.gear-link.d-ico.lg { width: 76px; height: 76px; }
.d-gear-row .gear-link.d-ico { width: 52px; height: 52px; }
.gear-link.d-plug { width: 52px; height: 52px; border-radius: 10px; background: #12151a; border: 1px solid #3a4150; }
a.d-bonus-ico { text-decoration: none; cursor: alias; }
a.d-bonus-ico:hover { filter: brightness(1.12); }

/* ── micro animations ─────────────────────────────────────────────────────── */
.btn, .tab, .lockbtn, .chip.pick { transition: transform 0.1s ease, border-color 0.15s, background 0.15s, color 0.15s, filter 0.15s, opacity 0.15s; }
.btn:active, .tab:active, .chip.pick:active { transform: scale(0.96); }
.btn.big:disabled { animation: breathe 1.1s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: 0.55; } }

input[type="checkbox"]::before { transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1); }
input[type="checkbox"], input.switch::before { transition: border-color 0.15s, background 0.15s, left 0.15s cubic-bezier(0.34, 1.3, 0.64, 1); }

.frag { transition: background 0.15s, border-color 0.15s; }
.frag-ico { transition: transform 0.15s ease; }
.frag:hover .frag-ico { transform: scale(1.1); }

.t-slider::-webkit-slider-thumb { transition: transform 0.1s ease, box-shadow 0.15s; }
.t-slider::-webkit-slider-thumb:active { box-shadow: 0 0 0 5px var(--accent-dim), 0 0 0 1px var(--line-2); }

.lockbtn.pop { animation: pop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes pop { 45% { transform: scale(1.28); } }

.option { animation: rise 0.32s ease backwards; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes rise { from { opacity: 0; transform: translateY(7px); } }
.lv-fill { animation: growbar 0.45s ease-out backwards; animation-delay: calc(var(--i, 0) * 70ms + 0.15s); }
@keyframes growbar { from { width: 0; } }

.btn.saved { background: var(--pos); border-color: var(--pos); color: #0f1a0c; }
.build-card { transition: border-color 0.3s; }
.build-card.flash { animation: flash 1s ease; }
@keyframes flash { 0%, 45% { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } }

.b-progress, .pill, .acq-slot, .acq-desc { transition: color 0.2s, border-color 0.2s, text-decoration-color 0.2s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── account & profile ─────────────────────────────────────────────────────── */
.account-page { max-width: 820px; margin: 0 auto; padding: 0 8px; display: flex; flex-direction: column; gap: 14px; }
.acct-pagehead h2 { font-size: 15px; margin: 2px 0 0; }
.acct-tabs { display: flex; gap: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 3px; align-self: flex-start; }
.acct-tab {
  background: none; border: none; border-radius: 6px; color: var(--dim);
  font: inherit; font-size: 13px; font-weight: 500; padding: 6px 14px; cursor: pointer;
}
.acct-tab:hover { color: var(--text); }
.acct-tab.on { background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }

.acct-msg { font-size: 12.5px; padding: 9px 13px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--panel); }
.acct-msg.ok { color: var(--pos); border-color: rgba(143, 191, 130, 0.4); }
.acct-msg.err { color: var(--neg); border-color: rgba(217, 126, 111, 0.4); }

.acct-rows { padding: 0; overflow: hidden; }
.acct-row { padding: 13px 16px; }
.acct-row + .acct-row { border-top: 1px solid var(--line); }
.acct-row-head { display: flex; align-items: center; gap: 14px; }
.acct-row-label { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; }
.acct-row-value { font-weight: 400; color: var(--dim); font-size: 12.5px; margin-top: 2px; word-break: break-word; }
.acct-row-value a { color: var(--accent); text-decoration: none; }
.acct-row-value a:hover { text-decoration: underline; }
.acct-row.open { background: rgba(255, 255, 255, 0.015); }

.acct-form { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 2px; max-width: 380px; }
.acct-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--dim); }
.acct-field input, .acct-field textarea {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 8px 11px; font: inherit; font-size: 13px; resize: vertical;
}
.acct-field input:focus, .acct-field textarea:focus { outline: none; border-color: var(--accent); }
.acct-hint { font-size: 11.5px; line-height: 1.45; }
.acct-actions { display: flex; gap: 8px; }

.acct-swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.acct-swatch {
  width: 24px; height: 24px; border-radius: 50%; background: var(--av);
  border: 2px solid transparent; box-shadow: 0 0 0 1px var(--line-2); cursor: pointer; padding: 0;
}
.acct-swatch:hover { border-color: var(--line-2); }
.acct-swatch.on { border-color: var(--bg); box-shadow: 0 0 0 2px var(--accent); }

/* profile preview — the card as other guardians would see it */
.acct-card { padding: 0; overflow: hidden; }
.acct-cover { height: 92px; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.acct-id { display: flex; align-items: flex-end; gap: 14px; padding: 0 20px 16px; margin-top: -34px; }
.acct-avatar {
  width: 72px; height: 72px; border-radius: 50%; background: var(--av); color: #fff;
  border: 3px solid var(--panel); display: grid; place-content: center;
  font: 700 30px "Segoe UI", sans-serif; flex: none;
}
.acct-id-text { padding-bottom: 4px; min-width: 0; }
.acct-id-name { font-size: 18px; font-weight: 600; }
.acct-id-sub { font-size: 12.5px; margin-top: 2px; }
.acct-id-sub b { color: var(--text); font-weight: 500; }
.acct-bio { padding: 0 20px 18px; font-size: 13px; line-height: 1.55; color: var(--text); white-space: normal; }

@media (max-width: 560px) {
  .acct-row-head { flex-wrap: wrap; }
  .acct-form { max-width: none; }
}

/* ── public profile page ───────────────────────────────────────────────────── */
.profile-page { max-width: 1120px; margin: 0 auto; padding: 0 8px; display: flex; flex-direction: column; gap: 14px; }

.prof-card { padding: 0; overflow: hidden; max-width: 580px; }
.prof-cover { height: 96px; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.prof-body { padding: 0 20px 18px; }
.prof-avatar {
  width: 74px; height: 74px; border-radius: 50%; background: var(--av); color: #fff;
  border: 3px solid var(--panel); display: grid; place-content: center;
  font: 700 30px "Segoe UI", sans-serif; margin: -37px 0 10px;
}
.prof-name { font-size: 21px; font-weight: 600; line-height: 1.2; }
.prof-sub { font-size: 13px; margin-top: 6px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.prof-sub b { color: var(--text); font-weight: 600; }
.prof-handle { color: var(--dim); }
.prof-dot { color: var(--line-2); }
.prof-bio { font-size: 13px; line-height: 1.55; color: var(--text); margin-top: 12px; }

.prof-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.prof-chip {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 11px 6px 7px; color: var(--text); font-size: 12.5px; font-weight: 500;
}
.prof-chip:hover { border-color: var(--line-2); }
.pc-ico {
  width: 22px; height: 22px; border-radius: 5px; flex: none;
  display: grid; place-content: center; color: #fff; font: 700 12px "Segoe UI", sans-serif;
}
.pc-ico svg { width: 18px; height: 18px; fill: #fff; }
.prof-chip.discord .pc-ico { background: #5865f2; }
.prof-chip.youtube .pc-ico { background: #ff0000; }
.prof-chip.x .pc-ico { background: #0a0a0a; box-shadow: inset 0 0 0 1px var(--line-2); }

.prof-head { margin-top: 6px; }
/* a page title, not one of the small uppercase section labels the global h2 is */
.prof-head h2 {
  font-size: 21px; font-weight: 600; margin: 0;
  color: var(--text); text-transform: none; letter-spacing: 0;
}
.prof-updated { font-size: 12.5px; margin-top: 4px; }

.prof-divider {
  display: flex; align-items: center; gap: 14px; margin: 4px 0 -2px;
  color: var(--dim); font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
}
.prof-divider::before, .prof-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.cp-author { text-decoration: none; }
.cp-author:hover { text-decoration: underline; }
.cp-favs { white-space: nowrap; }

@media (max-width: 560px) {
  .prof-card { max-width: none; }
  .prof-head h2 { font-size: 18px; }
}

/* ── tooltip: plug stat changes ────────────────────────────────────────────── */
/* Plugs get a short description and a handful of numbers. Kept narrow so the
   list reads as a column, the way the in-game inspect panel shows it. */
#hoverTip.narrow { max-width: 268px; }
.ht-bullets { margin-top: 6px; }
.ht-stats {
  margin-top: 11px; padding-top: 10px; border-top: 1px solid #2b3240;
  display: flex; flex-direction: column; gap: 3px;
}
.ht-stat { display: flex; gap: 10px; font-size: 13px; line-height: 1.5; color: #b9c0cc; }
.ht-stat b { min-width: 32px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.ht-stat b.pos { color: #f2f4f7; }
.ht-stat b.neg { color: #d97e6f; }

/* Optimizer class selector: sits above the subclass tabs, because the two
   class-conditional fragments make the totals meaningless without a class. */
/* Glyph left, name beside it — the .class-card pattern, scaled to the sidebar's
   115px columns. The original spacing was off because the glyph and label were
   shrunk without shrinking the button, leaving ~60px of content adrift in 103px
   of space with a different sized void after each name. The name now takes the
   remaining width (flex: 1) so the content spans the button edge to edge, and
   the padding is symmetric rather than 7px/6px. */
#classPick { margin-bottom: 8px; grid-template-columns: repeat(3, 1fr); }
#classPick .cpick { gap: 8px; padding: 8px 10px; }
#classPick .cpick .cc-glyph { width: 30px; height: 30px; }
#classPick .cpick .cls-ico { width: 19px; height: 19px; }
/* .cp-name carries margin-bottom: 6px for the saved-build card that also uses
   it. align-items centres the *margin box*, so that margin lifted the label 3px
   above the glyph's centre line. */
#classPick .cp-name { flex: 1; min-width: 0; font-size: 12px; margin: 0; }
/* a manual chip pick that disagrees with the selected class */
.chip.pick.ovr { border-style: dashed; border-color: var(--accent); }
.chip.pick.ovr::after { content: '*'; margin-left: 1px; color: var(--accent); font-weight: 700; }

/* share: a copyable link to the build's page (QR codes retired) */
.share-modal { min-width: 380px; }
.share-row { display: flex; gap: 8px; margin-top: 12px; }
.share-row input {
  flex: 1; min-width: 0; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; padding: 9px 12px;
  font: inherit; font-size: 13px;
}
.share-row input:focus { outline: none; border-color: var(--accent); }
@media (max-width: 480px) { .share-modal { min-width: 0; } }

/* contact: header button + the message form it opens */
.contact-btn { display: inline-flex; align-items: center; gap: 6px; }
.contact-btn svg {
  width: 14px; height: 14px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}
.contact-modal { min-width: 420px; max-width: 460px; }
.contact-form { display: flex; flex-direction: column; gap: 11px; }
.contact-intro { font-size: 12px; line-height: 1.5; margin-top: -2px; }
.contact-field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--dim); }
.contact-field select, .contact-field input, .contact-field textarea {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 9px 11px; font: inherit; font-size: 13px; width: 100%;
}
.contact-field textarea { resize: vertical; min-height: 108px; line-height: 1.5; }
.contact-field select:focus, .contact-field input:focus, .contact-field textarea:focus {
  outline: none; border-color: var(--accent);
}
.contact-signed { font-size: 12px; line-height: 1.45; margin-top: -4px; }
.contact-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.contact-foot .dim { font-size: 11.5px; font-variant-numeric: tabular-nums; }
.contact-foot .dim.over { color: var(--neg); }
@media (max-width: 480px) { .contact-modal { min-width: 0; } }