:root {
  --bg: #0b0f17;
  --panel: #121a26;
  --panel-2: #172131;
  --ink: #eef5ff;
  --muted: #98a9bd;
  --line: #2b3b50;
  --accent: #39a0ff;
  --accent-2: #79c0ff;
  --accent-soft: rgba(57,160,255,.14);
  --danger: #ff5a65;
  --warning: #ffd56a;
  --good: #62d890;
  --shadow: 0 16px 48px rgba(0,0,0,.28);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 0%, rgba(57,160,255,.13), transparent 26rem),
    linear-gradient(180deg, #0b0f17 0%, #0c111a 45%, #090d14 100%);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.45;
}
body.theme-villain {
  --accent: #ef394b;
  --accent-2: #ff8791;
  --accent-soft: rgba(239,57,75,.15);
  background:
    radial-gradient(circle at 15% 0%, rgba(239,57,75,.13), transparent 26rem),
    linear-gradient(180deg, #100b10 0%, #120c12 45%, #0c090d 100%);
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
input, select, textarea {
  width: 100%;
  background: #0d141f;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .72rem .8rem;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea { resize: vertical; }
label > span, .compact-field > span {
  display: block;
  margin-bottom: .35rem;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hidden { display: none !important; }
.print-only { display: none; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1rem max(1rem, calc((100vw - 1380px) / 2));
  border-bottom: 1px solid var(--line);
  background: rgba(8,12,18,.89);
  backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand { display: flex; align-items: center; gap: .9rem; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 13px;
  background: linear-gradient(145deg, var(--accent), var(--accent-2));
  color: #07111b;
  font-weight: 1000;
  font-size: 1.25rem;
  box-shadow: 0 0 28px var(--accent-soft);
}
.brand h1 { margin: 0; font-size: 1.35rem; letter-spacing: .025em; }
.brand p { margin: .05rem 0 0; color: var(--muted); font-size: .9rem; }
.eyebrow, .step-kicker {
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--accent-2);
  font-weight: 900;
  font-size: .68rem;
}
.build-tag {
  display: inline-flex;
  padding: .08rem .4rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-2);
  font-size: .74rem;
  font-weight: 900;
}
.header-actions { display: flex; gap: .8rem; align-items: end; }
.compact-field { min-width: 180px; }
.segmented { display: flex; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: #0d141f; }
.seg {
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 8px;
  padding: .65rem .9rem;
  font-weight: 900;
}
.seg.active { color: #07111b; background: var(--accent); }

main { max-width: 1380px; margin: 0 auto; padding: 1.4rem 1rem 4rem; }
.game-picker { margin-bottom: 1.25rem; }
.section-heading h2 { margin: .2rem 0 1rem; font-size: clamp(1.4rem, 3vw, 2rem); }
.game-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .8rem; }
.game-card {
  text-align: left;
  min-height: 112px;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
}
.game-card strong { display: block; font-size: 1.25rem; }
.game-card span { display: block; margin-top: .35rem; color: var(--muted); font-weight: 700; }
.game-card.active-game { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), var(--shadow); background: linear-gradient(135deg, var(--accent-soft), var(--panel)); }
.game-card.coming { opacity: .55; }

.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-bottom: .8rem;
}
.quick-actions .btn, .quick-actions .file-button { border-radius: 12px; }
.summary-actions-bottom {
  margin-top: .25rem;
  padding-top: .55rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.summary-actions-bottom .btn, .summary-actions-bottom .file-button {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.sticky-actions {
  position: sticky;
  top: 86px;
  z-index: 14;
  padding: .7rem;
  background: rgba(9,14,21,.86);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.btn, .dice-button, .file-button {
  border: 1px solid var(--line);
  color: var(--ink);
  background: #172131;
  border-radius: 10px;
  padding: .66rem .9rem;
  font-weight: 850;
  transition: transform .1s ease, border-color .14s ease, background .14s ease;
}
.btn:hover, .dice-button:hover, .file-button:hover { border-color: var(--accent); transform: translateY(-1px); }
.btn.primary, .dice-button { background: var(--accent); border-color: var(--accent); color: #06101a; }
.btn.danger { color: #ff9aa1; border-color: rgba(255,90,101,.45); background: rgba(255,90,101,.08); }
.btn.big { padding: .78rem 1.05rem; }
.btn.small { padding: .42rem .65rem; font-size: .8rem; }
.file-button { position: relative; display: inline-flex; align-items: center; }
.file-button input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.status-bar {
  min-height: 0;
  padding: 0;
  border-radius: 10px;
  color: var(--muted);
  font-weight: 700;
  transition: all .2s ease;
}
.status-bar.show { margin-bottom: .8rem; padding: .65rem .8rem; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent-2); }
.status-bar.error { background: rgba(255,90,101,.1); border-color: rgba(255,90,101,.4); color: #ffabb1; }

.generator-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.panel {
  min-width: 0;
  background: linear-gradient(180deg, rgba(23,33,49,.92), rgba(15,23,35,.96));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
}
.panel.full-width { grid-column: 1 / -1; }
.panel-title { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: .85rem; }
.panel-title > div:first-child { display: flex; gap: .7rem; align-items: flex-start; }
.panel-title h2 { margin: .05rem 0 0; font-size: 1.28rem; }
.number {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  color: var(--accent-2);
  font-weight: 1000;
}
.rule-note { margin: .55rem 0 .9rem; color: var(--muted); font-size: .9rem; }
.form-grid { display: grid; gap: .7rem; }
.form-grid.two { grid-template-columns: repeat(2,minmax(0,1fr)); }

.roll-grid { display: grid; gap: .7rem; }
.roll-grid.three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.roll-card { background: #0d141f; border: 1px solid var(--line); border-radius: 14px; padding: .8rem; min-width: 0; }
.roll-card-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.dice-button { padding: .45rem .62rem; font-size: .74rem; letter-spacing: .05em; }
.result { margin-top: .65rem; font-size: 1.05rem; font-weight: 950; min-height: 1.55em; overflow-wrap: anywhere; }
.roll-number { color: var(--accent-2); font-size: .78rem; font-weight: 800; }
.subresult { color: var(--muted); font-size: .82rem; margin-top: .4rem; }
.roll-card label { display: block; margin-top: .75rem; }
.reconcile-box { margin-top: .8rem; padding: .8rem; background: rgba(255,255,255,.02); border: 1px dashed var(--line); border-radius: 14px; }
.warning-list { margin-top: .7rem; display: grid; gap: .45rem; }
.warning, .note {
  padding: .55rem .7rem;
  border-radius: 9px;
  border: 1px solid rgba(255,213,106,.35);
  background: rgba(255,213,106,.08);
  color: #ffe5a1;
  font-size: .83rem;
}
.note { border-color: var(--line); background: rgba(255,255,255,.025); color: var(--muted); }

.ability-meta { display: flex; gap: .65rem; align-items: end; flex-wrap: wrap; margin-bottom: .75rem; }
.ability-meta label { min-width: 160px; }
.derived-chip {
  min-width: 105px;
  padding: .62rem .75rem;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #0d141f;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.derived-chip strong { display: block; color: var(--ink); font-size: 1.2rem; letter-spacing: 0; }
.ability-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .55rem; }
.ability-card { position: relative; background: #0d141f; border: 1px solid var(--line); border-radius: 12px; padding: .68rem; }
.ability-card .abbr { color: var(--accent-2); font-weight: 1000; font-size: .74rem; }
.ability-card .ability-name { font-weight: 900; }
.ability-card .ability-value { display: block; margin-top: .35rem; font-size: 1.08rem; font-weight: 950; }
.ability-card .natural { color: var(--muted); font-size: .72rem; min-height: 1.1rem; }
.ability-card .roll-one { width: 100%; margin-top: .5rem; }
.ability-card.locked::after { content: "LOCKED"; position: absolute; right: .5rem; top: .5rem; color: var(--muted); font-size: .58rem; font-weight: 1000; letter-spacing: .08em; }

.power-budget, .talent-budget {
  display: flex;
  gap: .7rem;
  align-items: stretch;
  margin-bottom: .75rem;
}
.power-budget > div, .talent-budget > div {
  flex: 1;
  padding: .7rem .8rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0d141f;
}
.power-budget span, .talent-budget span { color: var(--muted); font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.power-budget strong, .talent-budget strong { display: block; font-size: 1.15rem; }
.power-budget small, .talent-budget small { display: block; color: var(--muted); margin-top: .1rem; }
.power-tools, .talent-tools { display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; margin-bottom: .7rem; }
.choose-inline { display: flex; gap: .45rem; flex: 1; min-width: 300px; }
.choose-inline select { flex: 1; }
.item-list { display: grid; gap: .55rem; }
.item-card { border: 1px solid var(--line); border-radius: 12px; background: #0d141f; padding: .72rem; }
.item-main { display: flex; justify-content: space-between; gap: .7rem; align-items: flex-start; }
.item-title { font-weight: 950; }
.item-meta { color: var(--muted); font-size: .78rem; margin-top: .2rem; }
.badge { display: inline-flex; align-items: center; padding: .14rem .42rem; border-radius: 999px; border: 1px solid var(--line); font-size: .66rem; font-weight: 900; color: var(--muted); margin-right: .28rem; }
.badge.major { border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent-2); background: var(--accent-soft); }
.item-actions { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
.item-actions .btn { padding: .38rem .55rem; font-size: .72rem; }
.item-edit-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .45rem; margin-top: .55rem; }
.automatic-block { margin-top: .65rem; }
.automatic-title { color: var(--accent-2); font-weight: 900; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.automatic-list { margin: .35rem 0 0; padding-left: 1.15rem; color: var(--muted); font-size: .85rem; }

.character-summary { display: grid; gap: .9rem; }
.summary-top { display: grid; grid-template-columns: 1.4fr .8fr; gap: .8rem; }
.summary-card { padding: .9rem; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, rgba(14,21,31,.98), rgba(10,16,24,.98)); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
.summary-card h3 { margin: 0 0 .65rem; font-size: 1rem; color: var(--accent-2); letter-spacing: .04em; text-transform: uppercase; }
.summary-name { margin: 0; font-size: 1.8rem; }
.summary-sub { color: var(--muted); margin-top: .15rem; }
.summary-stats { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: .4rem; }
.stat-box { text-align: center; border: 1px solid var(--line); border-radius: 14px; padding: .55rem .3rem; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); }
.stat-box b { display: block; color: var(--accent-2); }
.print-ability-name { display: none; }
.stat-box span { display: block; font-size: .72rem; font-weight: 850; }
.stat-box small { color: var(--muted); }
.summary-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; }
.summary-list { margin: 0; padding-left: 1.1rem; }
.summary-list li + li { margin-top: .35rem; }
.summary-kv { display: grid; grid-template-columns: minmax(120px,.38fr) 1fr; gap: .3rem .65rem; font-size: .86rem; }
.summary-kv dt { color: var(--muted); font-weight: 800; }
.summary-kv dd { margin: 0; overflow-wrap: anywhere; }

.power-entry + .power-entry { margin-top: .55rem; }
.power-line { font-weight: 900; }
.power-description {
  display: block;
  margin-top: .2rem;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.35;
}
.submit-panel { border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); }
.submit-row { display: flex; gap: .7rem; align-items: end; }
.submit-row label { flex: 1; }
.submit-result { margin-top: .65rem; font-weight: 800; color: var(--muted); }
.submit-result.success { color: var(--good); }
.submit-result.error { color: #ff9aa1; }
.log-panel details summary { cursor: pointer; font-weight: 900; color: var(--accent-2); }
.log-actions { margin: .6rem 0; }
.roll-log { margin: 0; padding-left: 1.3rem; color: var(--muted); font-size: .82rem; max-height: 320px; overflow: auto; }
.roll-log li + li { margin-top: .28rem; }
.roll-log code { color: var(--accent-2); }
footer { max-width: 1380px; margin: 0 auto; padding: 1rem; color: var(--muted); font-size: .8rem; text-align: center; }

.equipment-workspace {
  margin-top: 1rem;
  padding: .82rem;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(9,16,26,.72), rgba(9,14,22,.92));
}
.equipment-intro { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.equipment-intro h3 { margin: .1rem 0 0; font-size: 1.2rem; }
.equipment-launch { display: flex; gap: .65rem; align-items: center; }
.equipment-count { min-width: 92px; text-align: right; }
.equipment-count strong { display: block; color: var(--accent-2); font-size: 1.35rem; }
.equipment-count span { color: var(--muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.equipment-rule-line { margin: .5rem 0 .65rem; color: var(--muted); font-size: .8rem; }
.equipment-dialog {
  width: min(1180px, calc(100vw - 2rem));
  max-height: min(90vh, 920px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--ink);
  background: #0b121c;
  box-shadow: 0 28px 80px rgba(0,0,0,.65);
}
.equipment-dialog::backdrop { background: rgba(2,6,12,.78); backdrop-filter: blur(4px); }
.equipment-dialog-shell { padding: 1rem; }
.equipment-dialog-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: .85rem; }
.equipment-dialog-head h2 { margin: .08rem 0 0; }
.equipment-dialog-head p { margin: .25rem 0 0; color: var(--muted); font-size: .84rem; }
.equipment-resource-summary { display: flex; justify-content: space-between; gap: .75rem; align-items: center; margin: 0 0 .75rem; padding: .62rem .72rem; border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line)); border-radius: 11px; background: var(--accent-soft); }
.equipment-resource-summary strong { color: var(--accent-2); white-space: nowrap; }
.equipment-resource-summary span { color: var(--muted); font-size: .78rem; text-align: right; }
.equipment-filters { display: grid; grid-template-columns: minmax(220px,1.45fr) repeat(4,minmax(135px,.72fr)); gap: .55rem; }
.equipment-browser-status { display: flex; justify-content: space-between; gap: .7rem; align-items: center; margin: .65rem 0; color: var(--muted); font-size: .82rem; }
.equipment-results { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .5rem; max-height: min(62vh,650px); padding-right: .25rem; overflow: auto; }
.equipment-result { border: 1px solid var(--line); border-radius: 12px; background: #0d141f; overflow: hidden; }
.equipment-result summary { display: flex; justify-content: space-between; gap: .6rem; align-items: flex-start; padding: .7rem; cursor: pointer; list-style-position: outside; }
.equipment-result summary::marker { color: var(--accent-2); }
.equipment-result summary > span:first-child { min-width: 0; }
.equipment-result summary strong { display: block; overflow-wrap: anywhere; }
.equipment-result summary small { display: block; margin-top: .15rem; color: var(--muted); font-size: .72rem; }
.equipment-result-flags { display: flex; flex: 0 0 auto; gap: .3rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.equipment-result-body { padding: .75rem; border-top: 1px solid var(--line); background: rgba(255,255,255,.018); }
.equipment-result-body dl { display: grid; grid-template-columns: minmax(105px,.3fr) 1fr; gap: .35rem .6rem; margin: 0 0 .7rem; font-size: .8rem; }
.equipment-result-body dt { color: var(--muted); font-weight: 850; }
.equipment-result-body dd { margin: 0; overflow-wrap: anywhere; }
.access-flag { display: inline-flex; align-items: center; padding: .18rem .42rem; border-radius: 999px; border: 1px solid rgba(255,213,106,.4); color: #ffe5a1; background: rgba(255,213,106,.08); font-size: .65rem; font-weight: 900; white-space: nowrap; }
.access-flag.ordinary { border-color: rgba(73,209,144,.35); color: #9decc1; background: rgba(73,209,144,.07); }
.resource-flag { display: inline-flex; padding: .18rem .42rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.025); font-size: .65rem; font-weight: 900; white-space: nowrap; }
.resource-flag.automatic { border-color: rgba(73,209,144,.42); color: #9decc1; background: rgba(73,209,144,.08); }
.resource-flag.feat { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); color: var(--accent-2); background: var(--accent-soft); }
.resource-flag.blocked, .resource-flag.unknown, .resource-flag.unrolled { border-color: rgba(255,90,101,.38); color: #ffabb1; background: rgba(255,90,101,.08); }
.item-actions .btn:disabled { opacity: .46; cursor: not-allowed; filter: saturate(.35); }
.power-boundary { margin: .55rem 0; padding: .5rem .6rem; border-left: 3px solid var(--accent); background: var(--accent-soft); color: var(--accent-2); font-size: .76rem; font-weight: 750; }
.equipment-loadout-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .7rem; margin-top: .85rem; }
.equipment-loadout { min-width: 0; padding: .65rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.02); }
.equipment-loadout.signature { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.loadout-heading { display: flex; justify-content: space-between; gap: .7rem; align-items: center; }
.loadout-heading h4 { margin: 0; font-size: 1rem; }
.equipment-loadout > p { margin: .2rem 0 .5rem; color: var(--muted); font-size: .74rem; }
.selected-equipment-list { display: grid; gap: .45rem; }
.selected-equipment-card { padding: .65rem; border: 1px solid var(--line); border-radius: 11px; background: #0d141f; }
.selected-equipment-main { display: flex; justify-content: space-between; gap: .6rem; align-items: flex-start; }
.selected-equipment-main small { display: block; margin-top: .12rem; color: var(--muted); font-size: .7rem; }
.selected-equipment-profile { margin-top: .42rem; color: var(--muted); font-size: .78rem; }
.selected-equipment-controls { display: flex; justify-content: space-between; gap: .6rem; align-items: end; margin-top: .5rem; }
.selected-equipment-controls label { width: min(175px,55%); }
.selected-equipment-controls label span { font-size: .64rem; }
.finish-notes { margin-top: .85rem; }
.equipment-summary-list { margin-bottom: .25rem; }
.equipment-summary-list small { color: var(--muted); }
.equipment-manual-note { margin: .25rem 0 0; white-space: pre-line; }

@media (max-width: 1050px) {
  .generator-grid { grid-template-columns: 1fr; }
  .panel.full-width { grid-column: auto; }
  .roll-grid.three { grid-template-columns: 1fr; }
  .ability-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .summary-top, .summary-columns { grid-template-columns: 1fr; }
  .summary-stats { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .equipment-filters { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .site-header { position: static; align-items: flex-start; flex-direction: column; }
  .header-actions { width: 100%; flex-direction: column; align-items: stretch; }
  .compact-field { min-width: 0; }
  .segmented .seg { flex: 1; }
  .game-grid { grid-template-columns: 1fr; }
  .sticky-actions { position: static; }
  .form-grid.two, .item-edit-grid { grid-template-columns: 1fr; }
  .ability-grid { grid-template-columns: 1fr; }
  .power-budget, .talent-budget { flex-direction: column; }
  .choose-inline { min-width: 0; flex-direction: column; }
  .submit-row { flex-direction: column; align-items: stretch; }
  .summary-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .summary-kv { grid-template-columns: 1fr; }
  .equipment-filters, .equipment-results, .equipment-loadout-grid { grid-template-columns: 1fr; }
  .equipment-resource-summary { align-items: flex-start; flex-direction: column; }
  .equipment-resource-summary span { text-align: left; }
  .equipment-intro { align-items: stretch; flex-direction: column; }
  .equipment-launch { justify-content: space-between; }
  .equipment-count { text-align: left; }
  .equipment-result summary { flex-direction: column; }
}

@media print {
  @page { size: letter portrait; margin: .38in .42in .42in; }

  :root {
    --print-accent: #1d5fa7;
    --print-accent-soft: #e9f2fb;
    --print-dark: #102b4c;
    --print-ink: #111820;
    --print-muted: #53606f;
    --print-line: #aeb9c5;
    --print-paper: #ffffff;
  }
  body.theme-villain {
    --print-accent: #9d202b;
    --print-accent-soft: #f8e8ea;
    --print-dark: #3a0c12;
  }

  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  html { color-scheme: light; background: #fff !important; }
  body {
    background: #fff !important;
    color: var(--print-ink) !important;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 9.25pt;
    line-height: 1.28;
  }
  .no-print, body > footer { display: none !important; }
  .print-only { display: block !important; }
  main { max-width: none !important; padding: 0 !important; margin: 0 !important; }
  .generator-grid { display: block !important; }
  .panel { box-shadow: none !important; background: transparent !important; border: 0 !important; margin: 0 !important; padding: 0 !important; }
  .panel:not(#summaryPanel) { display: none !important; }
  #summaryPanel { display: block !important; }
  #summaryPanel > .panel-title { display: none !important; }
  #characterSummary { display: block !important; }

  /* Exact crop from the established Beyond Remarkable cover logo. */
  .print-character-header {
    display: grid !important;
    grid-template-columns: 2.65in 1fr;
    gap: .18in;
    align-items: stretch;
    margin: 0 0 .12in;
    border-bottom: .055in solid var(--print-accent);
    padding-bottom: .09in;
  }
  .print-logo-wrap {
    display: flex;
    align-items: center;
    background: transparent;
    min-height: .84in;
    padding: 0;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }
  .print-logo-wrap img { width: 100%; max-height: .78in; height: auto; object-fit: contain; object-position: left center; display: block; }
  .print-identity-block {
    position: relative;
    padding: .02in .02in 0 .08in;
  }
  .print-alignment-badge {
    display: inline-block;
    padding: .04in .095in;
    margin-bottom: .04in;
    color: #fff;
    background: var(--print-accent);
    border-radius: .12in;
    font-size: 7pt;
    font-weight: 900;
    letter-spacing: .16em;
  }
  .print-identity-block h1 {
    margin: 0;
    color: var(--print-dark);
    font-size: 22pt;
    line-height: .98;
    letter-spacing: -.025em;
  }
  .print-identity-meta { margin-top: .04in; color: var(--print-muted); font-size: 8.2pt; font-weight: 700; }
  .print-identity-meta span { color: var(--print-accent); padding: 0 .035in; }
  .print-identity-block p { margin: .045in 0 0; font-size: 8.3pt; color: #2c3640; font-style: italic; }

  .screen-summary-top { display: none !important; }

  .summary-card {
    background: #fff !important;
    color: var(--print-ink) !important;
    border: 0 !important;
    border-radius: .10in !important;
    padding: 0 !important;
    break-inside: auto;
  }
  .summary-card h3 {
    margin: 0 0 .055in;
    padding: .035in .065in;
    background: var(--print-dark) !important;
    color: #fff !important;
    border-left: .055in solid var(--print-accent);
    font-size: 8.8pt;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: .095em;
  }
  .summary-name { font-size: 17pt; }
  .summary-sub { color: var(--print-muted) !important; }

  .print-core-stats { margin-bottom: .10in; break-inside: avoid; }
  .summary-stats { display: grid !important; grid-template-columns: repeat(7, 1fr) !important; gap: .035in !important; }
  .stat-box {
    position: relative;
    min-height: .72in;
    padding: .045in .025in !important;
    border: 1px solid var(--print-line) !important;
    border-top: .032in solid var(--print-accent) !important;
    border-radius: .10in !important;
    background: #fff !important;
    text-align: center;
  }
  .stat-box b { color: var(--print-accent) !important; font-size: 9pt; line-height: 1; }
  .print-ability-name { display: block !important; margin: .018in 0 .035in; color: var(--print-muted); font-size: 5.9pt; font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: .035em; }
  .stat-box span { color: var(--print-dark); font-size: 7.4pt; font-weight: 900; line-height: 1.05; }
  .stat-box small { margin-top: .025in; color: var(--print-ink) !important; font-size: 11pt; font-weight: 900; }

  .print-derived-row {
    display: grid !important;
    grid-template-columns: .75fr .85fr 1.2fr 1.45fr;
    margin-top: .05in;
    border: 1px solid var(--print-line);
    border-top: 0;
    border-radius: 0 0 .10in .10in;
    overflow: hidden;
  }
  .print-derived-row > div { padding: .045in .065in; border-right: 1px solid var(--print-line); }
  .print-derived-row > div:last-child { border-right: 0; }
  .print-derived-row span { display: block; color: var(--print-muted); font-size: 6.2pt; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
  .print-derived-row strong { display: block; margin-top: .01in; color: var(--print-dark); font-size: 14pt; line-height: 1.05; }
  .print-derived-row strong.textual { font-size: 8.1pt; line-height: 1.2; padding-top: .02in; }
  .print-derived-row small { display: block; color: var(--print-muted); font-size: 5.8pt; }

  .summary-columns { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: .11in !important; }
  .print-primary-grid { grid-template-columns: .88fr 1.12fr !important; margin-bottom: .11in; }
  .print-secondary-grid, .print-tertiary-grid { margin-bottom: .11in; }
  .print-primary-grid > .summary-card,
  .print-secondary-grid > .summary-card,
  .print-tertiary-grid > .summary-card {
    border: 1px solid var(--print-line) !important;
    padding: .07in !important;
    break-inside: avoid;
    border-radius: .11in !important;
  }
  .print-primary-grid > .summary-card h3,
  .print-secondary-grid > .summary-card h3,
  .print-tertiary-grid > .summary-card h3 { margin: -.07in -.07in .06in; border-top-left-radius: .10in; border-top-right-radius: .10in; }

  .summary-kv { display: grid !important; grid-template-columns: minmax(.82in,.34fr) 1fr !important; gap: .025in .075in !important; font-size: 7.7pt !important; line-height: 1.22; }
  .summary-kv dt { color: var(--print-muted) !important; font-weight: 900; }
  .summary-kv dd { color: var(--print-ink) !important; margin: 0; overflow-wrap: anywhere; }
  .summary-list { margin: 0; padding-left: .16in; font-size: 7.9pt; line-height: 1.25; }
  .summary-list li + li { margin-top: .025in; }
  .summary-card p { margin: .035in 0; }

  .print-powers-card .summary-list { padding-left: .14in; }
  .print-powers-card .power-entry { margin-bottom: .04in; }
  .print-powers-card .power-line { font-weight: 900; }
  .print-powers-card .power-description { display: block; margin-top: .015in; color: #394656; font-size: 7.05pt; line-height: 1.22; }

  .print-powers-card .summary-list li { break-inside: avoid; }
  .print-powers-card .summary-list li::marker { color: var(--print-accent); font-weight: 900; }

  .print-continuation { display: none !important; }
  .print-continuation.force-page-break {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: .09in;
    border-bottom: .035in solid var(--print-accent);
    margin: 0 0 .10in;
    padding: 0 0 .045in;
    break-before: page;
  }
  .print-continuation span { color: var(--print-accent); font-size: 7pt; font-weight: 950; letter-spacing: .11em; }
  .print-continuation strong { color: var(--print-dark); font-size: 11pt; }
  .print-continuation small { color: var(--print-muted); font-size: 6.4pt; font-weight: 800; text-transform: uppercase; }

  .print-record-footer {
    display: flex !important;
    justify-content: space-between;
    gap: .1in;
    margin-top: .08in;
    padding-top: .045in;
    border-top: 1px solid var(--print-line);
    color: var(--print-muted);
    font-size: 6.2pt;
    font-weight: 700;
  }
  .print-record-footer span:last-child { text-align: right; }
}

.package-traits { margin-top: .7rem; }
.trait-box { border: 1px solid var(--line); border-radius: 12px; padding: .7rem; background: #0d141f; }
.trait-box + .trait-box { margin-top: .55rem; }
.trait-box h4 { margin: 0 0 .45rem; color: var(--accent-2); }
.trait-row { display: flex; gap: .55rem; align-items: end; flex-wrap: wrap; }
.trait-row label { flex: 1; min-width: 220px; }
.aspect-list { margin: .45rem 0 0; padding-left: 1.2rem; color: var(--muted); }

.mode-record-hint,
.field-help {
  display: block;
  margin-top: .3rem;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.mode-record-hint.integrity-lost { color: var(--warning); }
.submission-mode-record {
  margin: .65rem 0 .8rem;
  padding: .65rem .75rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0d141f;
  color: var(--muted);
  font-size: .85rem;
}
.submission-mode-record strong { color: var(--ink); }
.strict-lock-note { color: var(--accent-2); }
.power-link {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 0;
  font: inherit;
  font-weight: 950;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent) 62%, transparent);
}
.power-link:hover,
.power-link:focus-visible { color: var(--accent-2); }
.power-reference-dialog {
  width: min(760px, calc(100vw - 2rem));
  max-height: min(82vh, 880px);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 0;
  color: var(--ink);
  background: #0b111b;
  box-shadow: 0 28px 90px rgba(0,0,0,.62);
}
.power-reference-dialog::backdrop { background: rgba(2,6,12,.76); backdrop-filter: blur(4px); }
.power-reference-shell { padding: 1rem; }
.power-reference-head { display: flex; gap: 1rem; justify-content: space-between; align-items: flex-start; }
.power-reference-head h2 { margin: .1rem 0 0; font-size: 1.55rem; }
.power-reference-summary {
  margin-top: .85rem;
  padding: .85rem;
  border-radius: 12px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  font-size: .98rem;
  line-height: 1.55;
}
.power-reference-details {
  margin-top: .8rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0d141f;
  overflow: hidden;
}
.power-reference-details summary {
  cursor: pointer;
  padding: .75rem .85rem;
  color: var(--accent-2);
  font-weight: 900;
}
.power-reference-details > div {
  border-top: 1px solid var(--line);
  padding: .85rem;
  color: var(--muted);
  white-space: pre-line;
  line-height: 1.55;
}
.summary-power-link { color: var(--ink); }

@media (max-width: 720px) {
  .power-reference-head { flex-direction: column; }
  .power-reference-head #closePowerReference { width: 100%; }
}