@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/poppins-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/poppins-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/poppins-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Slab";
  src: url("/assets/fonts/roboto-slab.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --void: #14101f;
  --panel: #201a2d;
  --panel-2: #2a2138;
  --line: rgba(181, 157, 220, 0.18);
  --paper: #f5ead6;
  --paper-2: #e2cfad;
  --ink: #24190e;
  --muted: #cbc1d8;
  --text: #fbf8ff;
  --purple: #7d5cc6;
  --orange: #f28c28;
  --cyan: #27c6cf;
  --green: #58d36b;
  --red: #dc3525;
  --shadow: 0 18px 52px rgba(0, 0, 0, 0.36);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 9% 7%, rgba(39, 198, 207, 0.16), transparent 18rem),
    radial-gradient(circle at 93% 18%, rgba(242, 140, 40, 0.13), transparent 20rem),
    linear-gradient(135deg, #14101f 0%, #1e1830 46%, #10272c 100%);
  color: var(--text);
  font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  letter-spacing: 0;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 0;
  border-radius: 7px;
  padding: 0.72rem 0.95rem;
  background: linear-gradient(180deg, #ffac46, var(--orange));
  color: #1a1010;
  font-weight: 800;
  cursor: pointer;
}

button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(12, 10, 19, 0.72);
  color: var(--text);
  padding: 0.72rem 0.8rem;
}

textarea {
  min-height: 7rem;
  resize: vertical;
}

label {
  display: grid;
  gap: 0.42rem;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

code {
  color: #dffcff;
}

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
}

.login-panel {
  position: relative;
  overflow: hidden;
  width: min(100%, 760px);
  padding: clamp(1.35rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(32, 26, 45, 0.94);
  box-shadow: var(--shadow);
}

.login-panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.45rem;
  background: linear-gradient(var(--cyan), var(--orange), var(--green));
}

.hub-mark,
.eyeline {
  margin: 0 0 0.35rem;
  color: var(--cyan);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.login-panel h1 {
  color: var(--orange);
  font-size: clamp(1.85rem, 4.5vw, 2.8rem);
  line-height: 1;
}

.login-copy,
.bot-line,
.form-status,
.empty {
  color: var(--muted);
}

.login-form,
.dm-form {
  display: grid;
  gap: 1rem;
}

.login-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1.35rem;
}

.login-form button,
.login-form .notice {
  grid-column: 1 / -1;
}

.notice {
  margin: 1rem 0;
  padding: 0.8rem 0.9rem;
  border-radius: 7px;
}

.error,
.inline-error {
  color: #ffe2e2;
  background: rgba(220, 53, 37, 0.25);
}

.app-shell {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 0.9rem 0.72rem;
  background: rgba(17, 13, 27, 0.95);
  border-right: 1px solid var(--line);
}

.hub-logo-link {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 0.8rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.hub-logo-link img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.portal-switcher {
  display: grid;
  grid-template-columns: repeat(2, 42px);
  gap: 0.4rem;
  justify-content: center;
}

.nav-square {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.045);
  font-size: 0.78rem;
  font-weight: 900;
}

.nav-square.active {
  border-color: rgba(39, 198, 207, 0.72);
  background: rgba(39, 198, 207, 0.14);
  color: #dffcff;
}

.nav-square:hover {
  border-color: rgba(242, 140, 40, 0.78);
}

.nav-square::after {
  content: attr(aria-label);
  position: absolute;
  left: calc(100% + 0.55rem);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  padding: 0.38rem 0.55rem;
  border-radius: 6px;
  background: #0f0b18;
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 0.75rem;
  transition: opacity 140ms ease;
  z-index: 8;
}

.nav-square:hover::after {
  opacity: 1;
}

.logout-square {
  color: #ffe6cf;
}

.logout-square svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bot-help {
  width: 66px;
  position: relative;
}

.bot-help summary {
  min-height: 44px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.4rem;
  padding: 0.48rem;
  border: 1px solid rgba(88, 211, 107, 0.34);
  border-radius: 8px;
  background: rgba(88, 211, 107, 0.08);
  cursor: pointer;
  list-style: none;
}

.bot-help summary::-webkit-details-marker {
  display: none;
}

.bot-help summary strong {
  font-size: 0.62rem;
  line-height: 1.05;
}

.bot-light {
  width: 0.68rem;
  height: 0.68rem;
  border-radius: 999px;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(88, 211, 107, 0.16), 0 0 18px rgba(88, 211, 107, 0.55);
}

.bot-help-body {
  position: absolute;
  left: calc(100% + 0.75rem);
  bottom: 0;
  width: min(310px, calc(100vw - 125px));
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #171222;
  box-shadow: var(--shadow);
  z-index: 10;
}

.bot-help-body p,
.bot-help-body li {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.bot-help-body ul {
  margin: 0.65rem 0 0;
  padding-left: 1rem;
}

.portal {
  min-width: 0;
  padding: 1rem 1rem 1rem 1.45rem;
}

.portal-header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.portal-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.95rem;
}

.profile-avatar {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  border: 2px solid rgba(39, 198, 207, 0.62);
}

.portal-header h1 {
  color: var(--orange);
  font-size: clamp(1.2rem, 2.2vw, 1.9rem);
  line-height: 1;
}

.portal-header h2 {
  color: var(--text);
  font-family: "Roboto Slab", "Poppins", serif;
  font-size: clamp(0.9rem, 1.45vw, 1.18rem);
  line-height: 1.18;
}

.quick-stats {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(72px, 1fr));
  gap: 0.42rem;
  width: min(100%, 310px);
}

.quick-stats div {
  min-height: 56px;
  display: grid;
  align-content: center;
  gap: 0.1rem;
  padding: 0.52rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.quick-stats strong {
  color: var(--orange);
  font-size: 1.16rem;
  line-height: 1;
}

.quick-stats span {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
}

.characters,
.bounty-section,
.dm-rail {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(32, 26, 45, 0.76);
  box-shadow: var(--shadow);
}

.characters {
  padding: 0.85rem;
  margin-bottom: 0.9rem;
}

.character-strip {
  display: flex;
  gap: 0.8rem;
  overflow-x: auto;
  padding-top: 0.8rem;
}

.character-card {
  min-width: 214px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.62rem;
  border: 1px solid rgba(39, 198, 207, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}

.character-card img {
  width: 46px;
  height: 46px;
  border-radius: 7px;
  object-fit: cover;
}

.character-card span,
.character-card em {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
  font-style: normal;
}

.character-card em {
  width: fit-content;
  margin-top: 0.3rem;
  padding: 0.16rem 0.48rem;
  border-radius: 999px;
  background: rgba(39, 198, 207, 0.13);
  color: #bff9ff;
  font-weight: 800;
}

.board-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 286px;
  gap: 0.9rem;
  align-items: start;
}

.bounty-lists {
  min-width: 0;
  display: grid;
  gap: 1rem;
}

.bounty-section {
  padding: 0.85rem;
}

.bounty-section h3,
.dm-rail h3,
.characters h3 {
  color: #e8dcff;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.section-heading button {
  padding: 0.48rem 0.68rem;
  border: 1px solid rgba(39, 198, 207, 0.28);
  background: rgba(39, 198, 207, 0.12);
  color: #dffcff;
}

.bounty-stack {
  display: grid;
  gap: 0.8rem;
  margin-top: 0.8rem;
}

.completed-extra {
  display: grid;
  gap: 0.8rem;
}

.completed-extra[hidden] {
  display: none;
}

.bounty-card {
  min-width: 0;
  max-width: 100%;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 146px;
  gap: 0.72rem;
  align-items: start;
  padding: 0.72rem;
  border: 1px solid rgba(82, 53, 27, 0.28);
  border-radius: 8px;
  background: linear-gradient(90deg, var(--paper), var(--paper-2));
  color: var(--ink);
}

.bounty-logo {
  min-width: 0;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--panel);
  color: var(--paper);
  overflow: hidden;
  font-family: "Roboto Slab", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 900;
}

.bounty-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bounty-topline,
.bounty-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  align-items: center;
}

.bounty-topline span,
.bounty-meta span {
  border-radius: 999px;
  padding: 0.22rem 0.52rem;
  background: rgba(36, 25, 14, 0.12);
  font-size: 0.66rem;
  font-weight: 800;
}

.bounty-card h4 {
  margin: 0.3rem 0 0.18rem;
  color: #1f140b;
  font-family: "Roboto Slab", "Poppins", serif;
  font-size: 1rem;
}

.bounty-card p {
  margin: 0 0 0.55rem;
  color: #513920;
  font-size: 0.86rem;
  line-height: 1.45;
}

.bounty-date-options {
  display: grid;
  gap: 0.34rem;
  margin-top: 0.55rem;
}

.bounty-date-option {
  min-width: 0;
  display: grid;
  grid-template-columns: 1.45rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.5rem;
  border-radius: 7px;
  background: rgba(36, 25, 14, 0.09);
}

.bounty-date-option strong {
  display: grid;
  place-items: center;
  width: 1.24rem;
  height: 1.24rem;
  border-radius: 999px;
  background: rgba(39, 198, 207, 0.18);
  color: #0d5860;
  font-size: 0.72rem;
}

.bounty-date-option span,
.bounty-date-option em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
}

.bounty-date-option em {
  color: #6d451b;
  font-style: normal;
  font-weight: 800;
}

.status.open {
  color: #135a25;
}

.status.full {
  color: #5537a8;
}

.status.cancelled {
  color: var(--red);
}

.status.completed {
  color: #1d6a2d;
}

.accept-form,
.dm-actions {
  min-width: 0;
  display: grid;
  gap: 0.55rem;
}

.accept-form select {
  background: rgba(255, 255, 255, 0.58);
  color: var(--ink);
  border-color: rgba(36, 25, 14, 0.24);
}

.date-preference-controls {
  display: grid;
  gap: 0.42rem;
}

.date-preference-controls label {
  gap: 0.22rem;
  color: #4a321f;
  font-size: 0.68rem;
}

.dm-actions button {
  padding: 0.46rem 0.58rem;
}

.dm-actions button.danger:not(:disabled) {
  background: rgba(115, 38, 42, 0.84);
  border-color: rgba(255, 118, 118, 0.44);
  color: #ffe1e1;
}

.signup-roster {
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(36, 25, 14, 0.16);
}

.signup-roster > strong {
  display: block;
  margin-bottom: 0.45rem;
  color: #37200e;
  font-size: 0.78rem;
  text-transform: uppercase;
}

.signup-roster p {
  margin: 0;
  font-size: 0.82rem;
}

.roster-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) minmax(96px, auto);
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.35rem;
  padding: 0.38rem;
  border-radius: 7px;
  background: rgba(36, 25, 14, 0.08);
}

.roster-row img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  object-fit: cover;
}

.roster-row span,
.roster-row em {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.8rem;
}

.roster-row span {
  display: grid;
  gap: 0.08rem;
}

.roster-row span small {
  overflow: hidden;
  color: #6b5139;
  font-size: 0.68rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-row em {
  white-space: nowrap;
}

.roster-row em {
  color: #5e3b12;
  font-style: normal;
  font-weight: 800;
}

.dm-rail {
  position: sticky;
  top: 1rem;
  padding: 0.8rem;
  display: grid;
  gap: 0.72rem;
}

.dm-launch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.dm-launch-grid button,
.dm-launch-grid .dm-tool-link {
  min-height: 88px;
  display: grid;
  align-content: center;
  gap: 0.12rem;
  padding: 0.72rem;
  border: 1px solid rgba(39, 198, 207, 0.2);
  background:
    linear-gradient(145deg, rgba(39, 198, 207, 0.12), rgba(125, 92, 198, 0.15)),
    rgba(255, 255, 255, 0.04);
  color: var(--text);
  text-align: left;
  text-decoration: none;
}

.dm-launch-grid button:hover,
.dm-launch-grid .dm-tool-link:hover,
.editor-tabs button:hover,
.editor-tabs button.active {
  border-color: rgba(242, 140, 40, 0.62);
  background:
    linear-gradient(145deg, rgba(242, 140, 40, 0.22), rgba(39, 198, 207, 0.1)),
    rgba(255, 255, 255, 0.06);
}

.dm-launch-grid button span,
.dm-launch-grid .dm-tool-link span {
  color: var(--cyan);
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.dm-launch-grid button strong,
.dm-launch-grid .dm-tool-link strong {
  font-size: 0.88rem;
}

.editor-open {
  overflow: hidden;
}

.bounty-award-open {
  overflow: hidden;
}

.bounty-award-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(7, 8, 15, 0.8);
  backdrop-filter: blur(10px);
}

.bounty-award-dialog {
  width: min(680px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: 1.15rem;
  border: 1px solid rgba(39, 198, 207, 0.42);
  border-radius: 8px;
  background: #171222;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.58);
}

.bounty-award-header,
.bounty-award-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.bounty-award-header h2 {
  margin: 0.12rem 0 0;
  color: var(--orange);
  font-size: 1.35rem;
}

.bounty-award-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}

.bounty-award-grid label {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  color: var(--muted);
  font-weight: 800;
}

.bounty-award-grid .is-wide {
  grid-column: 1 / -1;
}

.bounty-award-grid small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 500;
}

.bounty-award-actions {
  justify-content: flex-end;
}

@media (max-width: 640px) {
  .bounty-award-grid {
    grid-template-columns: 1fr;
  }

  .bounty-award-grid .is-wide {
    grid-column: auto;
  }
}

.editor-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 0.75rem;
  background: rgba(10, 8, 16, 0.74);
  backdrop-filter: blur(12px);
}

.editor-overlay[hidden] {
  display: none;
}

.editor-shell {
  width: min(calc(100vw - 1.5rem), 1320px);
  height: min(calc(100vh - 1.5rem), 920px);
  max-height: calc(100vh - 1.5rem);
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(181, 157, 220, 0.26);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(39, 198, 207, 0.08), transparent 42%),
    #171222;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.52);
}

.editor-tabs {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  padding: 0.85rem;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
}

.editor-tabs button {
  padding: 0.62rem 0.7rem;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  text-align: left;
}

.editor-panel {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem 1.1rem 1.4rem;
  scrollbar-width: thin;
  scrollbar-color: var(--cyan) rgba(255, 255, 255, 0.06);
}

.editor-panel::-webkit-scrollbar,
.editor-tabs::-webkit-scrollbar {
  width: 8px;
}

.editor-panel::-webkit-scrollbar-track,
.editor-tabs::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
}

.editor-panel::-webkit-scrollbar-thumb,
.editor-tabs::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--cyan), var(--purple));
  border-radius: 999px;
}

.editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}

.editor-header h3 {
  color: var(--orange);
  font-size: 1.25rem;
}

.editor-page h4 {
  margin-bottom: 0.85rem;
  color: #e8dcff;
  font-size: 1rem;
}

.editor-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
}

.editor-form label:has(textarea),
.editor-form .template-field-slot,
.editor-form .checkbox,
.editor-form button,
.editor-form .form-status {
  grid-column: 1 / -1;
}

.editor-form .field-note {
  display: block;
  margin-top: 0.38rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
}

.editor-form select option:disabled {
  color: #6f7785;
}

.icon-button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border: 1px solid var(--line);
}

.icon-button svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.datetime-editor {
  grid-column: 1 / -1;
  position: relative;
  display: grid;
  gap: 0.58rem;
}

.datetime-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.datetime-button {
  width: 100%;
  min-height: 64px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  padding: 0.72rem 0.82rem;
  border: 1px solid rgba(39, 198, 207, 0.22);
  background:
    linear-gradient(145deg, rgba(39, 198, 207, 0.13), rgba(125, 92, 198, 0.12)),
    rgba(255, 255, 255, 0.045);
  color: var(--text);
  text-align: left;
}

.datetime-button:hover,
.datetime-button[aria-expanded="true"] {
  border-color: rgba(242, 140, 40, 0.68);
  background:
    linear-gradient(145deg, rgba(242, 140, 40, 0.2), rgba(39, 198, 207, 0.12)),
    rgba(255, 255, 255, 0.07);
}

.datetime-button svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--cyan);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.datetime-button span {
  display: grid;
  gap: 0.12rem;
}

.datetime-button strong {
  color: #fff8ff;
  font-size: 0.95rem;
}

.datetime-button em {
  color: var(--muted);
  font-size: 0.78rem;
  font-style: normal;
}

.datetime-popover {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(300px, 1fr) 260px;
  gap: 0.8rem;
  margin-top: 0.58rem;
  padding: 0.85rem;
  border: 1px solid rgba(181, 157, 220, 0.26);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(39, 198, 207, 0.09), rgba(242, 140, 40, 0.06)),
    #171222;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.32);
}

.datetime-popover[hidden] {
  display: none;
}

.calendar-head {
  grid-column: 1;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 0.4rem;
}

.calendar-head button,
.datetime-actions button {
  grid-column: auto;
  padding: 0.55rem 0.62rem;
  background: rgba(255, 255, 255, 0.065);
  border: 1px solid var(--line);
  color: var(--text);
}

.calendar-head strong {
  color: #f7eaff;
  font-size: 0.92rem;
  text-align: center;
}

.calendar-weekdays,
.calendar-grid {
  grid-column: 1;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.28rem;
}

.calendar-grid {
  grid-auto-rows: 34px;
  align-self: start;
}

.calendar-weekdays {
  align-items: center;
  margin-top: 0.38rem;
}

.calendar-weekdays span {
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.calendar-grid button {
  grid-column: auto;
  min-height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.045);
  color: #f8f2ff;
  font-size: 0.78rem;
}

.calendar-grid button:hover {
  border-color: rgba(39, 198, 207, 0.62);
}

.calendar-grid button.muted {
  color: rgba(203, 193, 216, 0.42);
}

.calendar-grid button.today {
  border-color: rgba(88, 211, 107, 0.5);
}

.calendar-grid button.selected {
  background: linear-gradient(180deg, #ffac46, var(--orange));
  color: #1a1010;
  box-shadow: 0 0 0 3px rgba(242, 140, 40, 0.16);
}

.time-wheel {
  grid-column: 2;
  grid-row: 1 / span 3;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  align-content: start;
  min-height: 0;
  padding: 0.72rem;
  border: 1px solid rgba(39, 198, 207, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)),
    rgba(39, 198, 207, 0.04);
}

.time-picker-heading {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(39, 198, 207, 0.2);
}

.time-picker-heading strong {
  color: #fff8ff;
  font-size: 0.88rem;
}

.time-picker-heading span {
  color: var(--cyan);
  font-size: 0.56rem;
  font-weight: 900;
  text-transform: uppercase;
}

.time-stepper,
.time-period,
.time-presets {
  min-width: 0;
  display: grid;
  gap: 0.32rem;
}

.time-stepper > span,
.time-period > span,
.time-presets > span {
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 900;
  text-transform: uppercase;
}

.time-stepper > div {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: stretch;
  gap: 0.3rem;
}

.time-stepper button,
.time-period button,
.time-presets button {
  grid-column: auto;
  min-height: 34px;
  padding: 0.42rem;
  border: 1px solid rgba(39, 198, 207, 0.24);
  background: rgba(5, 12, 22, 0.62);
  color: var(--text);
}

.time-stepper button {
  width: 34px;
  padding: 0;
  display: grid;
  place-items: center;
}

.time-stepper button .vx-ui-svg-icon {
  width: 13px;
  height: 13px;
}

.time-stepper strong {
  display: grid;
  place-items: center;
  min-width: 0;
  border: 1px solid rgba(181, 157, 220, 0.24);
  border-radius: 6px;
  background: rgba(125, 92, 198, 0.1);
  color: #fff8ff;
  font-size: 0.95rem;
}

.time-period {
  grid-column: 1 / -1;
}

.time-period > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
}

.time-period button.selected {
  border-color: rgba(39, 198, 207, 0.72);
  background: rgba(39, 198, 207, 0.16);
  color: #dffcff;
  font-weight: 900;
}

.time-presets {
  grid-column: 1 / -1;
  padding-top: 0.15rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.time-presets > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
}

.time-presets button {
  color: var(--cyan);
  font-size: 0.7rem;
}

.time-stepper button:hover,
.time-period button:hover,
.time-presets button:hover {
  border-color: rgba(242, 140, 40, 0.65);
  background: rgba(242, 140, 40, 0.12);
}

.datetime-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.user-management-form {
  margin-top: 0.7rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.setup-tools {
  display: grid;
  gap: 0.7rem;
}

.setup-tools details {
  border-top: 1px solid var(--line);
  padding-top: 0.7rem;
}

.setup-tools summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 800;
}

.setup-tools form {
  margin-top: 0.8rem;
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.checkbox input {
  width: auto;
}

.inline-ok,
.inline-error {
  display: block;
  border-radius: 7px;
  padding: 0.45rem 0.55rem;
  font-size: 0.78rem;
}

.inline-ok {
  color: #dfffe5;
  background: rgba(88, 211, 107, 0.23);
}

.is-syncing .bounty-lists {
  opacity: 0.76;
}

@media (max-width: 1080px) {
  .board-grid,
  .bounty-card {
    grid-template-columns: 1fr;
  }

  .dm-rail {
    position: static;
  }
}

@media (max-width: 850px) {
  .datetime-popover {
    grid-template-columns: minmax(0, 1fr);
  }

  .time-wheel {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 760px) {
  .app-shell {
    grid-template-columns: 1fr;
    min-width: 0;
  }

  .sidebar {
    position: static;
    height: auto;
    flex-direction: row;
    justify-content: space-between;
    padding: 0.75rem;
  }

  .hub-logo-link {
    margin: 0;
  }

  .portal-switcher {
    grid-template-columns: repeat(2, 42px);
  }

  .logout-square {
    justify-self: auto;
  }

  .bot-help {
    width: 72px;
  }

  .bot-help-body {
    left: auto;
    right: 0;
    bottom: auto;
    top: calc(100% + 0.55rem);
    width: min(310px, calc(100vw - 1.5rem));
  }

  .portal {
    width: 100%;
    max-width: 100vw;
    padding: 0.9rem;
  }

  .portal-header {
    align-items: stretch;
    flex-direction: column;
  }

  .quick-stats {
    width: 100%;
  }

  .login-form,
  .editor-form,
  .editor-shell {
    grid-template-columns: 1fr;
  }

  .datetime-popover {
    grid-template-columns: 1fr;
    max-height: none;
  }

  .time-wheel {
    grid-column: 1;
    grid-row: auto;
    min-height: 0;
  }

  .editor-overlay {
    padding: 0.65rem;
  }

  .editor-shell {
    max-height: 94vh;
  }

  .editor-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 460px) {
  .portal-title {
    align-items: flex-start;
  }

  .profile-avatar {
    width: 48px;
    height: 48px;
  }

  .quick-stats {
    grid-template-columns: 1fr;
  }

  .character-card {
    min-width: 210px;
  }
}

.sheet-link {
  display: inline-flex;
  width: fit-content;
  margin-top: 0.45rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid rgba(242, 140, 40, 0.42);
  border-radius: 7px;
  color: #ffe3c2;
  background: rgba(242, 140, 40, 0.12);
  font-size: 0.72rem;
  font-weight: 900;
  text-decoration: none;
}

.sheet-link:hover {
  border-color: rgba(39, 198, 207, 0.72);
  color: #dffcff;
}

.vortex-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  background:
    linear-gradient(90deg, rgba(39, 198, 207, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(39, 198, 207, 0.055) 1px, transparent 1px),
    radial-gradient(circle at 78% 9%, rgba(242, 140, 40, 0.14), transparent 18rem),
    radial-gradient(circle at 14% 72%, rgba(88, 211, 107, 0.1), transparent 18rem),
    linear-gradient(135deg, #0d0b15 0%, #171222 46%, #10252d 100%);
  background-size: auto, 34px 34px, auto, auto, auto;
}

.vortex-nav {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-auto-rows: max-content;
  gap: 0.75rem;
  justify-items: center;
  padding: 0.9rem 0.72rem;
  border-right: 1px solid rgba(39, 198, 207, 0.18);
  background: rgba(10, 8, 16, 0.9);
}

.vortex-mark {
  width: 58px;
  height: 58px;
  object-fit: contain;
  padding: 0.35rem;
  border: 1px solid rgba(39, 198, 207, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  filter: invert(1) drop-shadow(0 0 12px rgba(39, 198, 207, 0.18));
}

.vortex-app {
  min-width: 0;
  padding: clamp(0.9rem, 2vw, 1.4rem);
}

.vortex-header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid rgba(181, 157, 220, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(39, 198, 207, 0.14), rgba(125, 92, 198, 0.1)),
    rgba(23, 18, 34, 0.78);
  box-shadow: var(--shadow);
}

.vortex-header h1 {
  color: #fff8ff;
  font-family: "Roboto Slab", "Poppins", serif;
  font-size: clamp(1.45rem, 3vw, 2.35rem);
  line-height: 1.04;
}

.vortex-header span {
  display: block;
  color: var(--muted);
  margin-top: 0.22rem;
}

.vortex-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.save-state {
  min-width: 132px;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.045);
  font-size: 0.78rem;
  font-weight: 900;
  text-align: center;
}

.save-state[data-state="dirty"] {
  color: #ffe3c2;
  border-color: rgba(242, 140, 40, 0.42);
}

.save-state[data-state="saved"] {
  color: #dcffe4;
  border-color: rgba(88, 211, 107, 0.42);
}

.save-state[data-state="error"] {
  color: #ffe2e2;
  border-color: rgba(220, 53, 37, 0.5);
}

.vortex-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0.9rem 0;
}

.vortex-tabs button {
  border: 1px solid rgba(181, 157, 220, 0.2);
  background: rgba(255, 255, 255, 0.055);
  color: var(--text);
}

.vortex-tabs button.active,
.vortex-tabs button:hover {
  border-color: rgba(39, 198, 207, 0.62);
  background:
    linear-gradient(145deg, rgba(39, 198, 207, 0.16), rgba(242, 140, 40, 0.11)),
    rgba(255, 255, 255, 0.06);
}

.vortex-page {
  display: none;
}

.vortex-page.active {
  display: block;
}

.sheet-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 0.85rem;
  margin-bottom: 0.9rem;
}

.identity-grid,
.xp-panel,
.sheet-panel {
  min-width: 0;
  border: 1px solid rgba(181, 157, 220, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(39, 198, 207, 0.06), transparent 48%),
    rgba(32, 26, 45, 0.82);
  box-shadow: var(--shadow);
}

.identity-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 0.9rem;
}

.xp-panel {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: 0.9rem;
}

.xp-panel p {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.sheet-grid {
  display: grid;
  grid-template-columns: minmax(250px, 0.55fr) minmax(420px, 1fr);
  gap: 0.9rem;
  align-items: start;
}

.sheet-panel {
  padding: 0.9rem;
}

.skills-panel,
.motivation-panel {
  grid-column: 1 / -1;
}

.panel-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.62rem;
  border-bottom: 1px solid rgba(181, 157, 220, 0.16);
}

.panel-title h2 {
  color: #f4ecff;
  font-size: 1rem;
}

.panel-title span {
  color: var(--cyan);
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.characteristics-grid,
.derived-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.58rem;
}

.stat-tile,
.derived-tile {
  min-width: 0;
  padding: 0.62rem;
  border: 1px solid rgba(39, 198, 207, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.stat-tile span,
.derived-tile span {
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 900;
  text-transform: uppercase;
}

.stat-tile input {
  padding: 0.45rem;
  color: #dffcff;
  font-size: 1.35rem;
  font-weight: 900;
  text-align: center;
}

.derived-tile input {
  padding: 0.48rem;
  font-weight: 800;
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.skill-group {
  min-width: 0;
  display: grid;
  gap: 0.38rem;
  align-content: start;
}

.skill-group h3 {
  color: var(--orange);
  font-size: 0.82rem;
  text-transform: uppercase;
}

.skill-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(126px, 1fr) 78px 76px 54px;
  gap: 0.38rem;
  align-items: center;
  padding: 0.42rem;
  border: 1px solid rgba(181, 157, 220, 0.14);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
}

.skill-row.psionic {
  border-color: rgba(39, 198, 207, 0.3);
  background: rgba(39, 198, 207, 0.075);
}

.skill-row > span {
  min-width: 0;
  overflow: hidden;
  color: #f9f3ff;
  font-size: 0.8rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill-row em {
  color: var(--cyan);
  font-size: 0.62rem;
  font-style: normal;
  text-transform: uppercase;
}

.skill-row label {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.62rem;
}

.skill-row input[type="checkbox"] {
  width: auto;
}

.skill-row input[type="number"] {
  padding: 0.36rem;
  text-align: center;
}

.motivation-grid,
.description-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.motivation-grid textarea {
  min-height: 5.3rem;
}

.library-layout,
.notes-layout {
  display: grid;
  gap: 0.9rem;
}

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

.content-list {
  display: grid;
  gap: 0.65rem;
}

.content-card {
  min-width: 0;
  padding: 0.72rem;
  border: 1px solid rgba(39, 198, 207, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.content-card strong {
  display: block;
  color: #fff8ff;
}

.content-card span,
.content-card em {
  display: block;
  color: var(--cyan);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
}

.content-card p {
  margin: 0.5rem 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.sheet-table {
  display: grid;
  gap: 0.42rem;
  margin: 0.5rem 0 0.7rem;
  overflow-x: auto;
}

.repeat-head,
.repeat-row {
  min-width: 620px;
  display: grid;
  grid-template-columns: repeat(var(--repeat-cols), minmax(80px, 1fr));
  gap: 0.4rem;
  align-items: center;
}

.repeat-head span {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.repeat-row input {
  padding: 0.52rem;
}

.repeat-row button {
  padding: 0.52rem;
  background: rgba(220, 53, 37, 0.24);
  border: 1px solid rgba(220, 53, 37, 0.3);
  color: #ffe2e2;
}

.big-notes {
  min-height: 18rem;
}

@media (max-width: 1180px) {
  .sheet-hero,
  .sheet-grid,
  .library-layout {
    grid-template-columns: 1fr;
  }

  .skills-panel,
  .motivation-panel {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  .vortex-shell {
    grid-template-columns: 1fr;
  }

  .vortex-nav {
    position: static;
    height: auto;
    display: flex;
    justify-content: space-between;
    padding: 0.75rem;
  }

  .vortex-mark {
    width: 52px;
    height: 52px;
  }

  .vortex-header,
  .vortex-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .identity-grid,
  .characteristics-grid,
  .derived-grid,
  .skills-grid,
  .motivation-grid,
  .description-grid {
    grid-template-columns: 1fr;
  }

  .skill-row {
    grid-template-columns: minmax(0, 1fr) 66px 66px 54px;
  }
}

.vortex-console {
  --vx-bg: #050912;
  --vx-panel: rgba(13, 24, 34, 0.86);
  --vx-panel-2: rgba(20, 27, 42, 0.92);
  --vx-line: rgba(119, 151, 180, 0.2);
  --vx-line-strong: rgba(39, 198, 207, 0.46);
  --vx-muted: #9ba8ba;
  --vx-text: #f5f8ff;
  --vx-purple: #a96bff;
  --vx-orange: #ff861f;
  --vx-cyan: #20d9e7;
  --vx-green: #54df6a;
  --vx-blue: #5fb0ff;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 238px minmax(0, 1fr);
  color: var(--vx-text);
  background:
    radial-gradient(circle at 58% 9%, rgba(169, 107, 255, 0.18), transparent 25rem),
    radial-gradient(circle at 74% 42%, rgba(32, 217, 231, 0.09), transparent 24rem),
    linear-gradient(140deg, #050912 0%, #09131c 52%, #06080f 100%);
}

.vortex-console button,
.vortex-console input,
.vortex-console select,
.vortex-console textarea {
  font-size: 0.88rem;
}

.vortex-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto auto;
  gap: 1rem;
  padding: 1rem 0.85rem;
  border-right: 1px solid rgba(119, 151, 180, 0.18);
  background: rgba(3, 7, 12, 0.92);
  box-shadow: 16px 0 50px rgba(0, 0, 0, 0.28);
}

.vortex-hub-mark {
  display: grid;
  gap: 0;
  color: var(--vx-orange);
  text-decoration: none;
  line-height: 0.9;
  font-weight: 900;
}

.vortex-hub-mark span {
  font-size: 1.4rem;
}

.vortex-hub-mark strong {
  font-size: 1.8rem;
}

.vortex-system-mark {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  padding: 0.8rem 0 1rem;
  border-bottom: 1px solid var(--vx-line);
  color: var(--vx-muted);
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.64rem;
  letter-spacing: 0.12em;
}

.vortex-system-mark img {
  width: 96px;
  height: 64px;
  object-fit: contain;
  filter: invert(1) drop-shadow(0 0 14px rgba(169, 107, 255, 0.28));
}

.vortex-side-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}

.vortex-side-actions a,
.vortex-quick-links a,
.vortex-quick-links button,
.vortex-logout {
  display: flex;
  align-items: center;
  gap: 0.62rem;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--vx-muted);
  background: transparent;
  text-decoration: none;
  font-weight: 700;
}

.vortex-side-actions a {
  min-height: 70px;
  justify-content: center;
  flex-direction: column;
  padding: 0.65rem;
  border-color: var(--vx-line);
  background: rgba(255, 255, 255, 0.035);
  font-size: 0.68rem;
  text-transform: uppercase;
}

.vortex-side-actions svg,
.vortex-logout svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vortex-side-actions a:hover,
.vortex-quick-links a:hover,
.vortex-quick-links button:hover,
.vortex-quick-links .active {
  color: var(--vx-text);
  border-color: rgba(169, 107, 255, 0.48);
  background: rgba(169, 107, 255, 0.11);
  box-shadow: 0 0 24px rgba(169, 107, 255, 0.12);
}

.vortex-quick-links {
  display: grid;
  align-content: start;
  gap: 0.34rem;
  padding-top: 0.35rem;
}

.vortex-quick-links a,
.vortex-quick-links button,
.vortex-logout {
  width: 100%;
  padding: 0.72rem 0.78rem;
  text-align: left;
}

.vortex-quick-links span {
  color: var(--vx-cyan);
  width: 1rem;
}

.vortex-quick-links .quick-icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  color: var(--vx-cyan);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vortex-quick-links .quick-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vortex-bot-card {
  align-self: end;
  padding: 0.75rem;
  border: 1px solid var(--vx-line);
  border-radius: 8px;
  background: rgba(9, 17, 26, 0.84);
}

.vortex-bot-card summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  list-style: none;
}

.vortex-bot-card summary::-webkit-details-marker {
  display: none;
}

.vortex-bot-card strong {
  font-size: 0.72rem;
  text-transform: uppercase;
}

.vortex-bot-card p {
  margin-top: 0.65rem;
  color: var(--vx-muted);
  font-size: 0.76rem;
  line-height: 1.5;
}

.vortex-logout {
  border-top: 1px solid var(--vx-line);
  border-radius: 0;
  padding-top: 1rem;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.vortex-workbench {
  min-width: 0;
  padding: 0 0.9rem 1rem;
}

.vortex-topbar {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--vx-line);
}

.vortex-topbar nav {
  display: flex;
  gap: 1.5rem;
}

.vortex-topbar nav a {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 70px;
  color: var(--vx-muted);
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.vortex-topbar nav a.active {
  color: var(--vx-cyan);
}

.vortex-topbar nav a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--vx-cyan);
}

.vortex-user {
  display: flex;
  align-items: center;
  gap: 0.72rem;
}

.vortex-user > span {
  min-width: 118px;
  padding: 0.48rem 0.7rem;
  border: 1px solid var(--vx-line);
  border-radius: 7px;
  color: var(--vx-muted);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.74rem;
  font-weight: 900;
  text-align: center;
}

.vortex-user > span[data-state="dirty"] {
  color: #ffd8a8;
  border-color: rgba(255, 134, 31, 0.5);
}

.vortex-user > span[data-state="saved"] {
  color: #dfffe5;
  border-color: rgba(84, 223, 106, 0.5);
}

.vortex-user > span[data-state="error"] {
  color: #ffd2d2;
  border-color: rgba(220, 53, 37, 0.5);
}

.vortex-user button {
  background: linear-gradient(180deg, #ffb14b, var(--vx-orange));
}

.vortex-user img {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--vx-line);
}

.vortex-character-banner {
  min-width: 0;
  display: grid;
  grid-template-columns: 174px minmax(0, 1fr) minmax(390px, 0.72fr);
  gap: 1rem;
  align-items: center;
  min-height: 182px;
  margin: 0.9rem 0 0;
  padding: 1rem;
  border: 1px solid var(--vx-line);
  border-radius: 8px 8px 0 0;
  background:
    linear-gradient(90deg, rgba(7, 12, 20, 0.72), rgba(10, 15, 28, 0.64)),
    radial-gradient(circle at 58% 35%, rgba(169, 107, 255, 0.4), transparent 18rem),
    linear-gradient(135deg, rgba(32, 217, 231, 0.08), rgba(169, 107, 255, 0.12));
  box-shadow: var(--shadow);
}

.vortex-portrait {
  width: 156px;
  height: 156px;
  border: 1px solid rgba(119, 151, 180, 0.36);
  border-radius: 8px;
  object-fit: cover;
  background: #111827;
}

.vortex-identity {
  min-width: 0;
}

.inline-edit {
  display: block;
}

.inline-edit input {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--vx-text);
  font-family: "Roboto Slab", "Poppins", serif;
  font-size: clamp(2rem, 4vw, 3.15rem);
  font-weight: 900;
  line-height: 1;
}

.vortex-identity p {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  margin-top: 0.45rem;
  color: #dce6f4;
  font-size: 1.1rem;
}

.vortex-identity p i {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--vx-muted);
}

.vortex-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1rem;
}

.vortex-tags label {
  min-width: 120px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.42rem;
  padding: 0.45rem 0.62rem;
  border: 1px solid var(--vx-line);
  border-radius: 8px;
  background: rgba(7, 12, 20, 0.54);
  color: var(--vx-cyan);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.vortex-tags input {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--vx-muted);
}

.vortex-vitals {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(70px, 1fr));
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem;
  border: 1px solid rgba(119, 151, 180, 0.16);
  border-radius: 8px;
  background: rgba(3, 7, 12, 0.42);
}

.vortex-vitals label,
.threat-meter,
.edge-pool {
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  color: var(--vx-muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.vortex-vitals label input {
  width: 52px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--vx-text);
  font-size: 2rem;
  font-weight: 900;
  text-align: center;
}

.vortex-vitals label span {
  display: flex;
  align-items: center;
  color: var(--vx-muted);
}

.vortex-vitals label span input {
  width: 34px;
  color: var(--vx-muted);
  font-size: 0.9rem;
}

.threat-meter strong {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 7px solid var(--vx-orange);
  border-radius: 999px;
  color: var(--vx-text);
  font-size: 1.8rem;
}

.edge-pool > div,
.dice-row {
  display: flex;
  align-items: center;
  gap: 0.28rem;
}

.vortex-main-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 0;
  align-items: start;
}

.vortex-center {
  min-width: 0;
}

.vortex-sheet-tabs,
.library-tabs {
  display: flex;
  gap: 1.5rem;
  min-height: 62px;
  align-items: end;
  padding: 0 1.6rem;
  border-bottom: 1px solid var(--vx-line);
  background: rgba(3, 7, 12, 0.44);
}

.vortex-sheet-tabs button,
.library-tabs button {
  position: relative;
  padding: 0 0 0.9rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--vx-muted);
  text-transform: uppercase;
}

.vortex-sheet-tabs button.active,
.library-tabs button.active {
  color: #dba8ff;
}

.vortex-sheet-tabs button.active::after,
.library-tabs button.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--vx-purple);
}

.vortex-page {
  display: none;
}

.vortex-page.active {
  display: block;
}

.vortex-sheet-layout {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  gap: 0.9rem;
  padding: 0.9rem;
}

.vortex-left-stack,
.notes-layout {
  display: grid;
  gap: 0.9rem;
}

.vx-panel {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--vx-line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(32, 217, 231, 0.035), rgba(84, 223, 106, 0.025)),
    var(--vx-panel);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.24);
}

.vx-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  margin-bottom: 0.8rem;
  padding-bottom: 0.68rem;
  border-bottom: 1px solid var(--vx-line);
}

.vx-panel-title h2 {
  color: #d8e4f4;
  font-size: 1rem;
  text-transform: uppercase;
}

.vx-panel-title span {
  color: var(--vx-cyan);
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.vx-characteristics {
  display: grid;
  gap: 0.42rem;
}

.vortex-console .stat-tile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px 34px;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0;
  border: 0;
  border-bottom: 1px solid rgba(119, 151, 180, 0.1);
  background: transparent;
}

.vortex-console .stat-tile span {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--vx-text);
  font-size: 0.92rem;
  text-transform: none;
}

.vortex-console .stat-tile i,
.skill-name i {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-style: normal;
}

.vortex-console .stat-tile.purple i,
.skill-row.purple .skill-name i {
  color: var(--vx-purple);
}

.vortex-console .stat-tile.cyan i,
.skill-row.cyan .skill-name i {
  color: var(--vx-cyan);
}

.vortex-console .stat-tile.blue i,
.skill-row.blue .skill-name i {
  color: var(--vx-blue);
}

.vortex-console .stat-tile.orange i,
.skill-row.orange .skill-name i {
  color: var(--vx-orange);
}

.vortex-console .stat-tile.green i,
.skill-row.green .skill-name i {
  color: var(--vx-green);
}

.vortex-console .stat-tile.violet i,
.skill-row.violet .skill-name i {
  color: var(--vx-purple);
}

.vortex-console .stat-tile input {
  padding: 0.34rem;
  border-color: rgba(119, 151, 180, 0.22);
  background: rgba(3, 7, 12, 0.62);
  font-size: 1rem;
}

.vortex-console .stat-tile button {
  height: 32px;
  padding: 0;
  border: 1px solid rgba(119, 151, 180, 0.22);
  background: rgba(255, 255, 255, 0.035);
  color: var(--vx-muted);
}

.vx-derived {
  display: grid;
}

.vortex-console .derived-tile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px;
  align-items: center;
  padding: 0.42rem 0;
  border: 0;
  border-bottom: 1px solid rgba(119, 151, 180, 0.1);
  background: transparent;
}

.vortex-console .derived-tile span {
  color: var(--vx-muted);
  font-size: 0.86rem;
  text-transform: none;
}

.vortex-console .derived-tile input {
  padding: 0.3rem;
  border: 0;
  background: transparent;
  text-align: right;
}

.vx-skill-table {
  display: grid;
}

.vx-skill-head,
.vortex-console .skill-row {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) 76px 94px 72px 64px 140px 46px;
  gap: 0.5rem;
  align-items: center;
}

.vx-skill-head {
  padding: 0.4rem 0.62rem;
  color: var(--vx-muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.vortex-console .skill-row {
  min-height: 46px;
  padding: 0.44rem 0.62rem;
  border: 0;
  border-top: 1px solid rgba(119, 151, 180, 0.12);
  border-radius: 0;
  background: transparent;
}

.vortex-console .skill-row:hover {
  background: rgba(32, 217, 231, 0.055);
}

.vortex-console .skill-row.psionic {
  background: rgba(32, 217, 231, 0.055);
}

.skill-name {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 0.55rem;
  align-items: center;
}

.skill-name strong,
.skill-name em {
  grid-column: 2;
}

.skill-name i {
  grid-row: 1 / span 2;
}

.skill-name strong {
  overflow: hidden;
  color: var(--vx-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill-name em {
  color: var(--vx-muted);
  font-size: 0.72rem;
  font-style: normal;
}

.career-dot {
  display: grid;
  place-items: center;
}

.career-dot input {
  position: absolute;
  opacity: 0;
}

.career-dot span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(119, 151, 180, 0.28);
}

.career-dot input:checked + span {
  background: var(--vx-purple);
  box-shadow: 0 0 12px rgba(169, 107, 255, 0.6);
}

.rank-marks {
  display: flex;
  gap: 0.22rem;
}

.rank-marks span {
  width: 10px;
  height: 10px;
  border: 1px solid rgba(155, 168, 186, 0.8);
  transform: rotate(45deg);
}

.rank-marks .filled {
  background: #a9b8ca;
}

.vortex-console .skill-row input[type="number"] {
  padding: 0.35rem;
  background: rgba(3, 7, 12, 0.66);
  text-align: center;
}

.vortex-console .skill-row button {
  padding: 0.3rem;
  background: transparent;
  color: var(--vx-muted);
}

.die {
  width: 13px;
  height: 13px;
  display: inline-block;
  border: 1px solid rgba(155, 168, 186, 0.72);
  transform: rotate(45deg);
}

.die.ability {
  background: var(--vx-green);
  border-color: var(--vx-green);
  box-shadow: 0 0 10px rgba(84, 223, 106, 0.32);
}

.die.proficiency {
  background: #ffd24a;
  border-color: #ffd24a;
  box-shadow: 0 0 10px rgba(255, 210, 74, 0.32);
}

.die.edge {
  width: 24px;
  height: 24px;
  border-color: var(--vx-green);
  background: rgba(84, 223, 106, 0.18);
}

.die.empty {
  background: transparent;
}

.dice-preview {
  display: grid;
  gap: 0.45rem;
}

.dice-preview > span {
  color: var(--vx-text);
  font-weight: 900;
}

.dice-preview em,
.vx-help-text {
  color: var(--vx-muted);
  font-size: 0.78rem;
  font-style: normal;
}

.vortex-library-panel {
  position: sticky;
  top: 0;
  max-height: calc(100vh - 1rem);
  overflow-y: auto;
  border-left: 1px solid var(--vx-line);
  background: rgba(7, 14, 22, 0.86);
  scrollbar-width: thin;
  scrollbar-color: var(--vx-purple) rgba(255, 255, 255, 0.04);
}

.vortex-library-panel section {
  padding: 0.85rem 0.95rem;
  border-bottom: 1px solid rgba(119, 151, 180, 0.12);
}

.library-tabs {
  position: sticky;
  top: 0;
  z-index: 4;
  padding-inline: 1rem;
  background: rgba(7, 14, 22, 0.96);
}

.library-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.55rem;
}

.library-heading h3 {
  color: var(--vx-muted);
  font-size: 0.9rem;
  text-transform: uppercase;
}

.library-heading button {
  padding: 0.2rem;
  background: transparent;
  color: var(--vx-muted);
}

.library-search {
  margin-bottom: 0.55rem;
  padding: 0.58rem 0.7rem;
  background: rgba(3, 7, 12, 0.54);
}

.content-list {
  display: grid;
  gap: 0.45rem;
}

.vortex-console .content-card {
  display: grid;
  gap: 0.42rem;
  padding: 0.65rem;
  border: 1px solid rgba(119, 151, 180, 0.14);
  border-radius: 8px;
  background: rgba(10, 18, 28, 0.68);
}

.vortex-console .content-card.applied {
  border-color: rgba(32, 217, 231, 0.7);
  background: rgba(32, 217, 231, 0.08);
}

.vortex-console .content-card strong {
  color: var(--vx-text);
}

.vortex-console .content-card span,
.vortex-console .content-card em {
  color: var(--vx-muted);
  font-size: 0.75rem;
}

.vortex-console .content-card p {
  margin: 0;
  color: var(--vx-muted);
  font-size: 0.78rem;
  line-height: 1.38;
}

.vortex-console .content-card button {
  justify-self: stretch;
  padding: 0.48rem;
  border: 1px solid rgba(169, 107, 255, 0.48);
  background: rgba(169, 107, 255, 0.12);
  color: #d9b6ff;
}

.inventory-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.inventory-columns h3 {
  margin-bottom: 0.5rem;
  color: var(--vx-orange);
  font-size: 0.9rem;
  text-transform: uppercase;
}

.vortex-console .sheet-table {
  display: grid;
  gap: 0.42rem;
  overflow-x: auto;
}

.vortex-console .repeat-head,
.vortex-console .repeat-row {
  min-width: 580px;
  display: grid;
  grid-template-columns: repeat(var(--repeat-cols), minmax(90px, 1fr));
  gap: 0.42rem;
  align-items: center;
}

.vortex-console .repeat-head span {
  color: var(--vx-muted);
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
}

.vortex-console .repeat-row input {
  padding: 0.52rem;
}

.vortex-console .repeat-row button {
  padding: 0.5rem;
  border: 1px solid rgba(220, 53, 37, 0.38);
  background: rgba(220, 53, 37, 0.18);
  color: #ffd2d2;
}

.talent-pyramid {
  display: grid;
  grid-template-columns: repeat(5, minmax(160px, 1fr));
  gap: 0.72rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
}

.talent-tier {
  display: grid;
  align-content: start;
  gap: 0.48rem;
}

.talent-tier h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--vx-orange);
  font-size: 0.85rem;
  text-transform: uppercase;
}

.talent-tier h3 span {
  color: var(--vx-muted);
  font-size: 0.72rem;
}

.talent-slots {
  display: grid;
  gap: 0.45rem;
}

.talent-slots article {
  min-height: 96px;
  padding: 0.62rem;
  border: 1px solid rgba(169, 107, 255, 0.3);
  border-radius: 8px;
  background: rgba(169, 107, 255, 0.09);
}

.talent-slots .empty-slot {
  border-style: dashed;
  background: rgba(255, 255, 255, 0.025);
  opacity: 0.72;
}

.talent-slots strong,
.talent-slots span,
.talent-slots p {
  display: block;
}

.talent-slots strong {
  color: var(--vx-text);
}

.talent-slots span {
  color: var(--vx-cyan);
  font-size: 0.72rem;
}

.talent-slots p {
  margin-top: 0.4rem;
  color: var(--vx-muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.applied-list {
  display: grid;
  gap: 0.6rem;
  padding: 1rem;
}

.applied-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.72rem;
  border: 1px solid var(--vx-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.applied-list strong {
  color: var(--vx-text);
}

.applied-list span {
  color: var(--vx-cyan);
}

.motivation-grid,
.identity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.identity-grid label:has(textarea) {
  grid-column: 1 / -1;
}

.vortex-sector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.8rem;
  padding: 1rem;
  border: 1px solid var(--vx-line);
  border-radius: 8px;
  background: rgba(7, 14, 22, 0.8);
}

.vortex-sector strong {
  color: var(--vx-cyan);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.vortex-sector span,
.vortex-sector em {
  color: var(--vx-muted);
}

.vortex-hub-mark img {
  width: 154px;
  height: auto;
  object-fit: contain;
}

.vortex-side-actions span.disabled {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.62rem;
  padding: 0.65rem;
  border: 1px solid rgba(119, 151, 180, 0.12);
  border-radius: 8px;
  color: rgba(155, 168, 186, 0.42);
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  cursor: not-allowed;
}

.vortex-side-actions span.disabled svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.vortex-sheet-layout {
  align-items: start;
}

.vortex-left-stack {
  align-self: start;
  align-content: start;
}

.vortex-console:not(.library-open) .vortex-main-grid {
  grid-template-columns: minmax(0, 1fr);
}

.vortex-console:not(.library-open) .vortex-library-panel {
  display: none;
}

.vortex-library-panel[aria-hidden="true"] {
  display: none;
}

.library-tabs [data-close-library] {
  margin-left: auto;
  padding: 0 0 0.9rem;
  color: var(--vx-muted);
}

.active-pool-dock {
  position: sticky;
  top: 70px;
  z-index: 12;
  display: grid;
  grid-template-columns: minmax(260px, 0.38fr) minmax(0, 1fr);
  gap: 0.9rem;
  margin: 0.9rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--vx-line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(32, 217, 231, 0.06), rgba(169, 107, 255, 0.05)),
    rgba(7, 14, 22, 0.86);
}

.active-pool-dock .dice-preview {
  margin-top: 0.25rem;
}

.dice-reference {
  display: grid;
  gap: 0.55rem;
  align-content: center;
}

.library-mode {
  margin: 0.85rem 0.95rem 0;
  padding: 0.5rem 0.65rem;
  border: 1px solid rgba(32, 217, 231, 0.28);
  border-radius: 7px;
  color: var(--vx-cyan);
  background: rgba(32, 217, 231, 0.07);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.dice-ref-group,
.result-ref-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.dice-ref-group span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.46rem;
  border: 1px solid rgba(119, 151, 180, 0.16);
  border-radius: 7px;
  color: var(--vx-muted);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.72rem;
  font-weight: 800;
}

.die {
  transform: none;
}

.dice-row .die.ability,
.dice-ref-group .die.ability {
  transform: rotate(45deg);
}

.die.boost {
  background: #78c6ff;
  border-color: #78c6ff;
  border-radius: 3px;
}

.die.ability {
  background: var(--vx-green);
  border-color: var(--vx-green);
}

.die.proficiency {
  background: #ffd24a;
  border-color: #ffd24a;
  clip-path: polygon(25% 0, 75% 0, 100% 28%, 100% 72%, 75% 100%, 25% 100%, 0 72%, 0 28%);
}

.die.setback {
  background: #10151d;
  border-color: #6c7785;
  border-radius: 3px;
}

.die.difficulty {
  background: #8b5cff;
  border-color: #8b5cff;
  transform: rotate(45deg);
}

.die.challenge {
  background: #d94141;
  border-color: #d94141;
  clip-path: polygon(25% 0, 75% 0, 100% 28%, 100% 72%, 75% 100%, 25% 100%, 0 72%, 0 28%);
}

.die.force {
  background: #f4f7ff;
  border-color: #f4f7ff;
  border-radius: 999px;
}

.result-symbol {
  min-width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(119, 151, 180, 0.22);
  border-radius: 7px;
  color: var(--vx-text);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.66rem;
  font-weight: 900;
}

.result-symbol svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.result-symbol.success,
.result-symbol.advantage,
.result-symbol.triumph,
.result-symbol.light {
  color: #dbffe1;
  border-color: rgba(84, 223, 106, 0.36);
}

.result-symbol.failure,
.result-symbol.threat,
.result-symbol.despair,
.result-symbol.dark {
  color: #ffd2d2;
  border-color: rgba(217, 65, 65, 0.36);
}

.inventory-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  margin-bottom: 0.5rem;
}

.inventory-heading button {
  padding: 0.45rem 0.62rem;
  border: 1px solid rgba(169, 107, 255, 0.45);
  background: rgba(169, 107, 255, 0.12);
  color: #d9b6ff;
}

.identity-grid label button {
  width: fit-content;
  padding: 0.42rem 0.62rem;
  border: 1px solid rgba(169, 107, 255, 0.45);
  background: rgba(169, 107, 255, 0.12);
  color: #d9b6ff;
}

.portal-system-spacer {
  width: 64px;
  height: 76px;
  margin: 0.25rem auto 0.8rem;
  border-bottom: 1px solid rgba(119, 151, 180, 0.18);
}

.app-shell {
  grid-template-columns: 238px minmax(0, 1fr);
  background:
    radial-gradient(circle at 80% 8%, rgba(242, 140, 40, 0.1), transparent 20rem),
    linear-gradient(140deg, #050912 0%, #09131c 52%, #06080f 100%);
}

.sidebar {
  align-items: stretch;
  padding: 1rem 0.85rem;
  background: rgba(3, 7, 12, 0.92);
  border-right-color: rgba(119, 151, 180, 0.18);
}

.hub-logo-link {
  width: 154px;
  height: auto;
  margin-bottom: 0.6rem;
  background: transparent;
}

.hub-logo-link img {
  width: 154px;
  height: auto;
}

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

.nav-square {
  width: auto;
  height: 52px;
  border-color: rgba(119, 151, 180, 0.2);
  background: rgba(255, 255, 255, 0.035);
}

.nav-square.disabled {
  color: rgba(203, 193, 216, 0.34);
  border-color: rgba(119, 151, 180, 0.12);
  cursor: not-allowed;
}

.nav-square.disabled:hover {
  border-color: rgba(119, 151, 180, 0.12);
}

.portal {
  padding: 1rem 1.1rem 1.2rem;
}

.portal-header,
.characters,
.bounty-section,
.dm-rail {
  border-color: rgba(119, 151, 180, 0.2);
  background:
    linear-gradient(135deg, rgba(32, 217, 231, 0.035), rgba(84, 223, 106, 0.025)),
    rgba(13, 24, 34, 0.86);
}

.dm-character-access {
  margin-top: -0.15rem;
}

.character-card .sheet-link {
  width: fit-content;
  margin-top: 0.3rem;
  color: var(--cyan);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  text-decoration: none;
}

.character-card .sheet-link:hover {
  color: var(--green);
}

.character-card .sheet-link-disabled {
  color: rgba(169, 182, 199, 0.55);
  cursor: default;
}

.character-card .sheet-link-disabled:hover {
  color: rgba(169, 182, 199, 0.55);
}

@media (max-width: 1280px) {
  .vortex-console {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .vortex-sidebar {
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    overflow: hidden;
  }

  .vortex-hub-mark strong,
  .vortex-hub-mark span,
  .vortex-system-mark span,
  .vortex-side-actions a,
  .vortex-side-actions span.disabled,
  .vortex-quick-links a,
  .vortex-quick-links button,
  .vortex-bot-card,
  .vortex-logout {
    font-size: 0;
  }

  .vortex-quick-links a,
  .vortex-quick-links button,
  .vortex-logout {
    width: 100%;
    min-width: 0;
    justify-content: center;
    padding-inline: 0;
    overflow: hidden;
  }

  .vortex-quick-links {
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .vortex-side-actions {
    grid-template-columns: 1fr;
  }

  .vortex-quick-links span {
    width: auto;
    font-size: 1rem;
  }

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

  .vortex-hub-mark {
    justify-items: center;
  }

  .vortex-hub-mark img {
    width: 58px;
  }

  .vortex-system-mark img {
    width: 58px;
    height: 42px;
  }

  .vortex-library-panel {
    position: static;
    max-height: none;
    border-left: 0;
    border-top: 1px solid var(--vx-line);
  }

  .app-shell {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .hub-logo-link,
  .hub-logo-link img {
    width: 58px;
  }

  .portal-system-spacer {
    width: 58px;
    height: 58px;
  }

  .portal-switcher {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .vortex-character-banner,
  .vortex-sheet-layout,
  .active-pool-dock,
  .inventory-columns {
    grid-template-columns: 1fr;
  }

  .vortex-vitals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .vortex-console {
    grid-template-columns: 1fr;
  }

  .vortex-sidebar {
    position: static;
    height: auto;
    grid-template-columns: repeat(4, auto);
    grid-template-rows: auto;
    align-items: center;
    gap: 0.55rem;
  }

  .vortex-system-mark,
  .vortex-bot-card,
  .vortex-quick-links {
    display: none;
  }

  .vortex-hub-mark span {
    font-size: 0.74rem;
  }

  .vortex-hub-mark strong {
    font-size: 0.96rem;
  }

  .vortex-side-actions {
    display: flex;
  }

  .vortex-side-actions a {
    min-height: 42px;
    min-width: 54px;
    gap: 0.22rem;
    padding: 0.36rem;
    font-size: 0.52rem;
  }

  .vortex-side-actions svg {
    width: 17px;
    height: 17px;
  }

  .vortex-logout {
    width: 42px;
    height: 42px;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--vx-line);
    border-radius: 8px;
    font-size: 0;
  }

  .vortex-workbench {
    padding: 0.55rem;
  }

  .vortex-topbar,
  .vortex-user,
  .vortex-sector {
    align-items: stretch;
    flex-direction: column;
  }

  .vortex-sheet-tabs {
    overflow-x: auto;
    padding-inline: 0.7rem;
  }

  .vx-skill-head {
    display: none;
  }

  .vortex-console .skill-row {
    grid-template-columns: minmax(0, 1fr) 48px;
    gap: 0.35rem;
  }

  .vortex-console .skill-row > :nth-child(n + 3):not(.dice-row) {
    display: none;
  }

  .vortex-console .skill-row .dice-row {
    grid-column: 1 / -1;
  }

  .motivation-grid,
  .identity-grid {
    grid-template-columns: 1fr;
  }
}


/* Bounty portal Vortex menu parity pass */
.app-shell[data-dashboard] {
  --vx-bg: #050912;
  --vx-panel: rgba(13, 24, 34, 0.86);
  --vx-panel-2: rgba(20, 27, 42, 0.92);
  --vx-line: rgba(119, 151, 180, 0.2);
  --vx-line-strong: rgba(39, 198, 207, 0.46);
  --vx-muted: #9ba8ba;
  --vx-text: #f5f8ff;
  --vx-purple: #a96bff;
  --vx-orange: #ff861f;
  --vx-cyan: #20d9e7;
  --vx-green: #54df6a;
  grid-template-columns: 238px minmax(0, 1fr);
  background:
    radial-gradient(circle at 58% 9%, rgba(169, 107, 255, 0.16), transparent 25rem),
    radial-gradient(circle at 78% 38%, rgba(32, 217, 231, 0.08), transparent 24rem),
    linear-gradient(140deg, #050912 0%, #09131c 52%, #06080f 100%);
}

.app-shell[data-dashboard] .bounty-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto auto;
  gap: 1rem;
  align-items: stretch;
  padding: 1rem 0.85rem;
  border-right: 1px solid rgba(119, 151, 180, 0.18);
  background: rgba(3, 7, 12, 0.92);
  box-shadow: 16px 0 50px rgba(0, 0, 0, 0.28);
}

.bounty-hub-mark {
  display: grid;
  justify-items: start;
  text-decoration: none;
}

.bounty-hub-mark img {
  width: 154px;
  height: auto;
  object-fit: contain;
}

.bounty-system-mark {
  display: grid;
  justify-items: center;
  gap: 0.22rem;
  padding: 0.35rem 0 1rem;
  border-bottom: 1px solid var(--vx-line);
  color: var(--vx-muted);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.bounty-system-mark span {
  color: var(--vx-text);
  font-size: 0.76rem;
  font-weight: 900;
}

.bounty-system-mark strong {
  color: var(--vx-cyan);
  font-size: 0.58rem;
}

.bounty-side-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}

.bounty-side-actions a,
.bounty-side-actions span.disabled,
.bounty-quick-links a,
.bounty-bot-card,
.bounty-logout {
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--vx-muted);
  background: transparent;
  text-decoration: none;
  font-weight: 800;
}

.bounty-side-actions a,
.bounty-side-actions span.disabled {
  min-height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.65rem;
  border-color: var(--vx-line);
  background: rgba(255, 255, 255, 0.035);
  font-size: 0.68rem;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
}

.bounty-side-actions span.disabled {
  opacity: 0.45;
}

.bounty-side-actions svg,
.bounty-logout svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bounty-side-actions a:hover,
.bounty-side-actions a.active,
.bounty-quick-links a:hover,
.bounty-quick-links a.active,
.bounty-logout:hover {
  color: var(--vx-text);
  border-color: rgba(169, 107, 255, 0.48);
  background: rgba(169, 107, 255, 0.11);
  box-shadow: 0 0 24px rgba(169, 107, 255, 0.12);
}

.bounty-side-actions a.active {
  color: var(--vx-cyan);
  border-color: rgba(32, 217, 231, 0.46);
}

.bounty-quick-links {
  display: grid;
  align-content: start;
  gap: 0.34rem;
  padding-top: 0.25rem;
}

.bounty-quick-links a,
.bounty-logout {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.62rem;
  padding: 0.72rem 0.78rem;
  text-align: left;
}

.bounty-quick-links span {
  width: 1rem;
  color: var(--vx-cyan);
}

.bounty-bot-card {
  align-self: end;
  width: 100%;
  padding: 0.75rem;
  border-color: var(--vx-line);
  background: rgba(9, 17, 26, 0.84);
}

.bounty-bot-card summary {
  min-height: unset;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.bounty-bot-card summary strong {
  color: var(--vx-text);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.bounty-bot-card .bot-help-body {
  left: calc(100% + 0.9rem);
  bottom: 0;
  background: #09111a;
  border-color: var(--vx-line);
}

.bounty-logout {
  border-top: 1px solid var(--vx-line);
  border-radius: 0;
  padding-top: 1rem;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.app-shell[data-dashboard] .portal {
  padding: 0 0.9rem 1rem;
}

.app-shell[data-dashboard] .portal-header {
  min-height: 70px;
  margin: 0;
  padding: 0 0.2rem;
  border: 0;
  border-bottom: 1px solid var(--vx-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.app-shell[data-dashboard] .portal-title {
  gap: 0.72rem;
}

.app-shell[data-dashboard] .profile-avatar {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--vx-line);
}

.app-shell[data-dashboard] .portal-header h1 {
  color: var(--vx-orange);
  font-size: clamp(1.08rem, 1.6vw, 1.48rem);
}

.app-shell[data-dashboard] .portal-header h2,
.app-shell[data-dashboard] .portal-header .eyeline {
  color: var(--vx-cyan);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.app-shell[data-dashboard] .quick-stats {
  width: auto;
  min-width: 260px;
}

.app-shell[data-dashboard] .quick-stats div,
.app-shell[data-dashboard] .characters,
.app-shell[data-dashboard] .bounty-section,
.app-shell[data-dashboard] .dm-rail {
  border-color: var(--vx-line);
  background:
    linear-gradient(135deg, rgba(32, 217, 231, 0.035), rgba(84, 223, 106, 0.025)),
    rgba(13, 24, 34, 0.86);
}

.app-shell[data-dashboard] .characters {
  margin-top: 0.9rem;
}

.app-shell[data-dashboard] .bounty-section h3,
.app-shell[data-dashboard] .characters h3,
.app-shell[data-dashboard] .dm-rail h3 {
  color: var(--vx-text);
  text-transform: none;
}

@media (max-width: 840px) {
  .app-shell[data-dashboard] {
    grid-template-columns: 1fr;
  }

  .app-shell[data-dashboard] .bounty-sidebar {
    position: static;
    height: auto;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
  }

  .bounty-system-mark,
  .bounty-quick-links,
  .bounty-bot-card {
    display: none;
  }

  .bounty-hub-mark img {
    width: 94px;
  }

  .bounty-side-actions {
    grid-column: 2;
  }

  .bounty-logout {
    grid-column: 3;
    border-top: 0;
    padding: 0.72rem;
  }

  .bounty-logout span {
    display: none;
  }

  .app-shell[data-dashboard] .portal-header {
    flex-direction: column;
    align-items: stretch;
    padding: 0.8rem 0;
  }
}


/* Safe topbar parity pass 2026 */
.bounty-workbench-topbar {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 0 0.25rem;
  border-bottom: 1px solid rgba(119, 151, 180, 0.2);
}

.bounty-workbench-topbar nav {
  display: flex;
  align-items: stretch;
  gap: 1.55rem;
  height: 70px;
}

.bounty-workbench-topbar nav a,
.bounty-workbench-topbar nav span.disabled {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: #a9b6c7;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  font-size: 0.82rem;
  font-weight: 950;
}

.bounty-workbench-topbar nav span.disabled {
  color: rgba(169, 182, 199, 0.42);
  cursor: not-allowed;
}

.bounty-workbench-topbar nav a:hover,
.bounty-workbench-topbar nav a.active {
  color: #20d9e7;
}

.bounty-workbench-topbar nav a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: #20d9e7;
  box-shadow: 0 0 18px rgba(32, 217, 231, 0.55);
}

.bounty-workbench-user {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.72rem;
  color: #f5f8ff;
  font-weight: 950;
}

.bounty-workbench-user img {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(32, 217, 231, 0.38);
  background: rgba(32, 217, 231, 0.12);
}

.app-shell[data-dashboard] .portal-header {
  margin-top: 0.9rem;
}

.app-shell[data-dashboard] .portal-header .profile-avatar,
.app-shell[data-dashboard] .portal-header .eyeline {
  display: none;
}

.vortex-matched-actions .nav-square {
  min-height: 70px;
  height: auto;
  width: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.48rem;
  padding: 0.65rem;
  line-height: 1.1;
}

.vortex-matched-actions .nav-square svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vortex-matched-actions .nav-square span {
  display: block;
  font-size: 0.68rem;
  text-align: center;
  text-transform: uppercase;
}

.vortex-matched-actions .logout-square {
  grid-column: 1 / -1;
  min-height: 48px;
  flex-direction: row;
}

.bounty-quick-links {
  display: grid;
  align-content: start;
  gap: 0.34rem;
  padding-top: 0.8rem;
}

.bounty-quick-links a {
  display: flex;
  align-items: center;
  gap: 0.62rem;
  width: 100%;
  padding: 0.72rem 0.78rem;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #9ba8ba;
  text-decoration: none;
  font-weight: 800;
}

.bounty-quick-links a:hover,
.bounty-quick-links a.active {
  color: #f5f8ff;
  border-color: rgba(169, 107, 255, 0.48);
  background: rgba(169, 107, 255, 0.11);
}

.bounty-quick-links span {
  width: 1rem;
  color: #20d9e7;
}

.vortex-empty-state {
  min-height: calc(100vh - 90px);
  display: grid;
  place-items: center;
  padding: 2rem;
}

.vortex-empty-state > div {
  width: min(720px, 100%);
  padding: 2.3rem;
  text-align: center;
  border: 1px solid rgba(119, 151, 180, 0.2);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 0%, rgba(169, 107, 255, 0.2), transparent 24rem),
    rgba(13, 24, 34, 0.86);
}

.vortex-empty-state h1 {
  margin: 0.5rem 0 0.65rem;
  color: #f7fbff;
  font-family: "Roboto Slab", "Poppins", serif;
  font-size: clamp(1.8rem, 4vw, 3rem);
}

.vortex-empty-state p {
  color: #a9b6c7;
}

.vortex-empty-state a {
  display: inline-flex;
  margin-top: 1.2rem;
  padding: 0.85rem 1rem;
  border-radius: 7px;
  color: #061018;
  background: #ff861f;
  text-decoration: none;
  font-weight: 950;
}

@media (max-width: 840px) {
  .bounty-workbench-topbar {
    flex-wrap: wrap;
    padding: 0.65rem 0;
  }

  .bounty-workbench-topbar nav {
    height: auto;
    min-height: 44px;
    gap: 1rem;
  }

  .bounty-workbench-user {
    width: 100%;
    justify-content: flex-start;
  }
}


/* Bounty Board scale parity pass 2026-06-24 */
.app-shell[data-dashboard] {
  grid-template-columns: 168px minmax(0, 1fr);
}

.app-shell[data-dashboard] .bounty-sidebar,
.app-shell[data-dashboard] .sidebar {
  padding: 1.1rem 0.75rem;
}

.app-shell[data-dashboard] .bounty-hub-mark img,
.app-shell[data-dashboard] .hub-logo,
.app-shell[data-dashboard] .sidebar-logo img {
  width: 128px;
  max-width: 128px;
}

.app-shell[data-dashboard] .bounty-system-mark {
  padding-top: 0.95rem;
  padding-bottom: 1.15rem;
}

.app-shell[data-dashboard] .bounty-system-mark span {
  font-size: 0.74rem;
  letter-spacing: 0.13em;
}

.app-shell[data-dashboard] .bounty-system-mark strong {
  font-size: 0.56rem;
  letter-spacing: 0.16em;
}

.app-shell[data-dashboard] .portal {
  padding: 0 1rem 1.25rem;
}

.bounty-workbench-topbar {
  min-height: 54px;
}

.bounty-workbench-topbar nav {
  height: 54px;
}

.bounty-workbench-topbar nav a {
  font-size: 0.82rem;
}

.bounty-workbench-user {
  font-size: 0.92rem;
}

.bounty-workbench-user img {
  width: 34px;
  height: 34px;
}

.app-shell[data-dashboard] .portal-header {
  min-height: 136px;
  align-items: center;
  padding: 1.15rem 1rem;
  margin-top: 0.65rem;
  background:
    radial-gradient(circle at 72% 45%, rgba(169, 107, 255, 0.24), transparent 30rem),
    linear-gradient(90deg, rgba(7, 14, 23, 0.95), rgba(24, 20, 58, 0.86));
}

.app-shell[data-dashboard] .portal-title {
  gap: 0.85rem;
}

.app-shell[data-dashboard] .portal-header h1 {
  color: #ff861f;
  font-size: clamp(2.05rem, 3vw, 2.9rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
}

.app-shell[data-dashboard] .portal-header h2 {
  color: #20d9e7;
  font-size: 0.86rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.app-shell[data-dashboard] .quick-stats {
  min-width: 340px;
  gap: 0.5rem;
}

.app-shell[data-dashboard] .quick-stats div {
  min-width: 78px;
  padding: 0.85rem 0.9rem;
  border-radius: 7px;
}

.app-shell[data-dashboard] .quick-stats strong {
  font-size: 1.18rem;
  line-height: 1;
}

.app-shell[data-dashboard] .quick-stats span,
.app-shell[data-dashboard] .quick-stats small {
  font-size: 0.55rem;
  letter-spacing: 0.08em;
}

.app-shell[data-dashboard] .characters,
.app-shell[data-dashboard] .bounty-section,
.app-shell[data-dashboard] .dm-rail {
  padding: 1rem;
  border-radius: 6px;
}

.app-shell[data-dashboard] .characters h3,
.app-shell[data-dashboard] .bounty-section h3,
.app-shell[data-dashboard] .dm-rail h3 {
  margin-bottom: 0.9rem;
  font-size: 1.08rem;
  line-height: 1;
}

.app-shell[data-dashboard] .character-grid {
  gap: 0.8rem;
}

.app-shell[data-dashboard] .character-card {
  min-width: 170px;
  padding: 0.78rem;
  gap: 0.72rem;
  border-radius: 7px;
}

.app-shell[data-dashboard] .character-card img,
.app-shell[data-dashboard] .character-card .portrait {
  width: 48px;
  height: 48px;
}

.app-shell[data-dashboard] .character-card strong {
  font-size: 0.96rem;
}

.app-shell[data-dashboard] .character-card p,
.app-shell[data-dashboard] .character-card small,
.app-shell[data-dashboard] .character-card em {
  font-size: 0.72rem;
}

.app-shell[data-dashboard] .character-card a,
.app-shell[data-dashboard] .character-card button,
.app-shell[data-dashboard] .bounty-card button,
.app-shell[data-dashboard] .bounty-card select {
  min-height: 32px;
  font-size: 0.72rem;
  border-radius: 6px;
}

.app-shell[data-dashboard] .bounty-section {
  margin-top: 0.85rem;
  max-width: none;
}

.app-shell[data-dashboard] .bounty-section > p,
.app-shell[data-dashboard] .empty-state,
.app-shell[data-dashboard] .bounty-section .empty {
  font-size: 0.92rem;
}

.app-shell[data-dashboard] .bounty-card {
  padding: 1rem;
  border-radius: 7px;
}

.app-shell[data-dashboard] .bounty-card h4 {
  font-size: 1.22rem;
}

.app-shell[data-dashboard] .bounty-card p {
  font-size: 0.9rem;
  line-height: 1.55;
}

.app-shell[data-dashboard] .bounty-meta,
.app-shell[data-dashboard] .bounty-fields,
.app-shell[data-dashboard] .signup-roster {
  font-size: 0.78rem;
}

.app-shell[data-dashboard] .vortex-matched-actions,
.app-shell[data-dashboard] .bounty-side-actions,
.app-shell[data-dashboard] .portal-switcher {
  gap: 0.55rem;
}

.app-shell[data-dashboard] .vortex-matched-actions .nav-square,
.app-shell[data-dashboard] .bounty-side-actions a,
.app-shell[data-dashboard] .bounty-side-actions span.disabled,
.app-shell[data-dashboard] .portal-switcher .nav-square {
  min-height: 76px;
  padding: 0.72rem 0.55rem;
  font-size: 0.68rem;
}

.app-shell[data-dashboard] .vortex-matched-actions .nav-square svg,
.app-shell[data-dashboard] .bounty-side-actions svg {
  width: 23px;
  height: 23px;
}

.app-shell[data-dashboard] .bounty-quick-links {
  gap: 0.46rem;
  padding-top: 0.85rem;
}

.app-shell[data-dashboard] .bounty-quick-links a {
  padding: 0.78rem 0.7rem;
  font-size: 0.86rem;
}

.app-shell[data-dashboard] .bounty-bot-card,
.app-shell[data-dashboard] .bot-help {
  padding: 0.75rem;
}

.app-shell[data-dashboard] .bounty-bot-card summary strong,
.app-shell[data-dashboard] .bot-help summary strong {
  font-size: 0.72rem;
}

.app-shell[data-dashboard] .bounty-logout,
.app-shell[data-dashboard] .vortex-logout {
  min-height: 48px;
  font-size: 0.78rem;
}

@media (max-width: 840px) {
  .app-shell[data-dashboard] {
    grid-template-columns: 1fr;
  }

  .app-shell[data-dashboard] .portal-header {
    min-height: auto;
  }

  .app-shell[data-dashboard] .quick-stats {
    min-width: 0;
  }
}


/* Seamless shared shell parity: Bounty Board and Character Sheet */
:root {
  --shared-sidebar-width: 180px;
  --shared-sidebar-pad-x: 0.75rem;
  --shared-sidebar-pad-y: 1rem;
  --shared-logo-width: 126px;
  --shared-panel-radius: 7px;
  --shared-sidebar-line: rgba(119, 151, 180, 0.18);
  --shared-sidebar-muted: #9ba8ba;
  --shared-sidebar-text: #f5f8ff;
  --shared-sidebar-cyan: #20d9e7;
  --shared-sidebar-purple: #a96bff;
}

.vortex-console,
.app-shell[data-dashboard] {
  grid-template-columns: var(--shared-sidebar-width) minmax(0, 1fr) !important;
}

/* Make both sidebars occupy the same physical space. */
.vortex-sidebar,
.app-shell[data-dashboard] .sidebar,
.app-shell[data-dashboard] .bounty-sidebar {
  width: var(--shared-sidebar-width) !important;
  min-width: var(--shared-sidebar-width) !important;
  max-width: var(--shared-sidebar-width) !important;
  box-sizing: border-box !important;
  padding: var(--shared-sidebar-pad-y) var(--shared-sidebar-pad-x) !important;
  gap: 0.92rem !important;
  border-right: 1px solid var(--shared-sidebar-line) !important;
  background: rgba(3, 7, 12, 0.94) !important;
}

/* Top hub logo should not jump between modes. */
.vortex-hub-mark,
.bounty-hub-mark,
.app-shell[data-dashboard] .hub-logo-link,
.app-shell[data-dashboard] .hub-logo,
.app-shell[data-dashboard] .sidebar-logo {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.vortex-hub-mark img,
.bounty-hub-mark img,
.app-shell[data-dashboard] .hub-logo-link img,
.app-shell[data-dashboard] .hub-logo img,
.app-shell[data-dashboard] .sidebar-logo img {
  width: var(--shared-logo-width) !important;
  max-width: var(--shared-logo-width) !important;
  height: auto !important;
  object-fit: contain !important;
}

/* System badge area should have the same height in Bounty and Sheet mode. */
.vortex-system-mark,
.bounty-system-mark {
  min-height: 72px !important;
  width: 100% !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 0.28rem !important;
  padding: 0.72rem 0 0.92rem !important;
  border-bottom: 1px solid var(--shared-sidebar-line) !important;
  color: var(--shared-sidebar-muted) !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
}

.vortex-system-mark img {
  width: 58px !important;
  height: auto !important;
  object-fit: contain !important;
}

.bounty-system-mark span,
.vortex-system-mark strong,
.vortex-system-mark span {
  font-size: 0.66rem !important;
  line-height: 1.05 !important;
  color: var(--shared-sidebar-text) !important;
  font-weight: 950 !important;
}

.bounty-system-mark strong,
.vortex-system-mark span {
  font-size: 0.5rem !important;
  color: var(--shared-sidebar-cyan) !important;
  letter-spacing: 0.16em !important;
}

/* Portal tiles should be identical between both modes. */
.vortex-side-actions,
.vortex-matched-actions,
.bounty-side-actions,
.app-shell[data-dashboard] .portal-switcher {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.55rem !important;
}

.vortex-side-actions a,
.vortex-side-actions span.disabled,
.vortex-matched-actions .nav-square,
.bounty-side-actions a,
.bounty-side-actions span.disabled,
.app-shell[data-dashboard] .portal-switcher .nav-square {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 72px !important;
  height: 72px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.42rem !important;
  padding: 0.58rem 0.42rem !important;
  border: 1px solid var(--shared-sidebar-line) !important;
  border-radius: var(--shared-panel-radius) !important;
  background: rgba(11, 18, 28, 0.72) !important;
  color: var(--shared-sidebar-muted) !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  font-size: 0.61rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.035em !important;
  line-height: 1.1 !important;
}

.vortex-side-actions a svg,
.vortex-side-actions span.disabled svg,
.vortex-matched-actions .nav-square svg,
.bounty-side-actions a svg,
.bounty-side-actions span.disabled svg,
.app-shell[data-dashboard] .portal-switcher .nav-square svg {
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 auto !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.vortex-side-actions a:hover,
.vortex-side-actions a.active,
.vortex-matched-actions .nav-square:hover,
.vortex-matched-actions .nav-square.active,
.bounty-side-actions a:hover,
.bounty-side-actions a.active,
.app-shell[data-dashboard] .portal-switcher .nav-square:hover,
.app-shell[data-dashboard] .portal-switcher .nav-square.active {
  color: var(--shared-sidebar-text) !important;
  border-color: rgba(169, 107, 255, 0.62) !important;
  background: rgba(169, 107, 255, 0.16) !important;
  box-shadow: inset 0 0 0 1px rgba(169, 107, 255, 0.16), 0 0 22px rgba(169, 107, 255, 0.12) !important;
}

.vortex-side-actions span.disabled,
.vortex-matched-actions .nav-square.disabled,
.bounty-side-actions span.disabled,
.app-shell[data-dashboard] .portal-switcher .nav-square.disabled {
  opacity: 0.42 !important;
}

/* Quick links should be the same row height and type size. */
.vortex-quick-links,
.bounty-quick-links {
  width: 100% !important;
  display: grid !important;
  align-content: start !important;
  gap: 0.38rem !important;
  padding-top: 0.55rem !important;
}

.vortex-quick-links a,
.vortex-quick-links button,
.bounty-quick-links a {
  width: 100% !important;
  min-height: 38px !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.56rem !important;
  box-sizing: border-box !important;
  padding: 0.58rem 0.62rem !important;
  border: 1px solid transparent !important;
  border-radius: var(--shared-panel-radius) !important;
  background: transparent !important;
  color: var(--shared-sidebar-muted) !important;
  text-align: left !important;
  text-decoration: none !important;
  text-transform: none !important;
  font-size: 0.83rem !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
}

.vortex-quick-links a span,
.vortex-quick-links button span,
.bounty-quick-links a span {
  width: 1rem !important;
  color: var(--shared-sidebar-cyan) !important;
  text-align: center !important;
  flex: 0 0 1rem !important;
}

.vortex-quick-links a:hover,
.vortex-quick-links a.active,
.bounty-quick-links a:hover,
.bounty-quick-links a.active {
  color: var(--shared-sidebar-text) !important;
  border-color: rgba(169, 107, 255, 0.52) !important;
  background: rgba(169, 107, 255, 0.14) !important;
}

/* Bottom bot card and logout should align exactly. */
.vortex-bot-card,
.bounty-bot-card,
.app-shell[data-dashboard] .bot-help {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0.65rem !important;
  border: 1px solid var(--shared-sidebar-line) !important;
  border-radius: var(--shared-panel-radius) !important;
  background: rgba(9, 17, 26, 0.84) !important;
}

.vortex-bot-card summary,
.bounty-bot-card summary,
.app-shell[data-dashboard] .bot-help summary {
  min-height: 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.vortex-bot-card summary strong,
.bounty-bot-card summary strong,
.app-shell[data-dashboard] .bot-help summary strong {
  font-size: 0.66rem !important;
  line-height: 1 !important;
  color: var(--shared-sidebar-text) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.035em !important;
}

.vortex-logout,
.bounty-logout,
.app-shell[data-dashboard] .bounty-logout {
  width: 100% !important;
  min-height: 42px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  padding: 0.8rem 0.62rem 0 !important;
  border-top: 1px solid var(--shared-sidebar-line) !important;
  color: var(--shared-sidebar-muted) !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  font-size: 0.66rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.04em !important;
}

.vortex-logout svg,
.bounty-logout svg,
.app-shell[data-dashboard] .bounty-logout svg {
  width: 19px !important;
  height: 19px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Keep the main workbench attached to the same x-position in both modes. */
.vortex-workbench,
.app-shell[data-dashboard] .portal {
  min-width: 0 !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

@media (max-width: 840px) {
  .vortex-console,
  .app-shell[data-dashboard] {
    grid-template-columns: 1fr !important;
  }

  .vortex-sidebar,
  .app-shell[data-dashboard] .sidebar,
  .app-shell[data-dashboard] .bounty-sidebar {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}


/* Bounty card Vortex color scheme pass */
.app-shell[data-dashboard] .bounty-card,
.bounty-card {
  position: relative;
  overflow: hidden;
  color: #f5f8ff !important;
  border: 1px solid rgba(119, 151, 180, 0.22) !important;
  border-radius: 8px !important;
  background:
    radial-gradient(circle at 12% 18%, rgba(32, 217, 231, 0.16), transparent 15rem),
    radial-gradient(circle at 92% 10%, rgba(169, 107, 255, 0.16), transparent 20rem),
    linear-gradient(135deg, rgba(10, 22, 32, 0.96), rgba(13, 17, 31, 0.98) 58%, rgba(7, 10, 18, 0.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 14px 36px rgba(0, 0, 0, 0.25) !important;
}

.app-shell[data-dashboard] .bounty-card::before,
.bounty-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-left: 3px solid rgba(32, 217, 231, 0.8);
  background:
    linear-gradient(90deg, rgba(32, 217, 231, 0.08), transparent 26%),
    linear-gradient(180deg, rgba(255, 134, 31, 0.055), transparent 48%);
}

.app-shell[data-dashboard] .bounty-card:hover,
.bounty-card:hover {
  border-color: rgba(32, 217, 231, 0.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 0 28px rgba(32, 217, 231, 0.08),
    0 18px 42px rgba(0, 0, 0, 0.32) !important;
}

.app-shell[data-dashboard] .bounty-card > *,
.bounty-card > * {
  position: relative;
  z-index: 1;
}

.app-shell[data-dashboard] .bounty-card h4,
.app-shell[data-dashboard] .bounty-card h3,
.app-shell[data-dashboard] .bounty-card .bounty-title,
.bounty-card h4,
.bounty-card h3,
.bounty-card .bounty-title {
  color: #ff861f !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-shadow: 0 0 16px rgba(255, 134, 31, 0.15);
}

.app-shell[data-dashboard] .bounty-card p,
.app-shell[data-dashboard] .bounty-card .bounty-description,
.app-shell[data-dashboard] .bounty-card .bounty-body,
.bounty-card p,
.bounty-card .bounty-description,
.bounty-card .bounty-body {
  color: #cbd7e7 !important;
}

.app-shell[data-dashboard] .bounty-card small,
.app-shell[data-dashboard] .bounty-card .muted,
.app-shell[data-dashboard] .bounty-card .bounty-meta,
.app-shell[data-dashboard] .bounty-card .bounty-fields,
.bounty-card small,
.bounty-card .muted,
.bounty-card .bounty-meta,
.bounty-card .bounty-fields {
  color: #9ba8ba !important;
}

.app-shell[data-dashboard] .bounty-card img,
.bounty-card img {
  border-radius: 7px !important;
  border: 1px solid rgba(32, 217, 231, 0.28) !important;
  background: rgba(7, 13, 22, 0.82) !important;
  box-shadow: 0 0 22px rgba(169, 107, 255, 0.12);
}

.app-shell[data-dashboard] .bounty-card .badge,
.app-shell[data-dashboard] .bounty-card .tag,
.app-shell[data-dashboard] .bounty-card .pill,
.app-shell[data-dashboard] .bounty-card .status,
.app-shell[data-dashboard] .bounty-card [class*="badge"],
.app-shell[data-dashboard] .bounty-card [class*="tag"],
.app-shell[data-dashboard] .bounty-card [class*="pill"],
.bounty-card .badge,
.bounty-card .tag,
.bounty-card .pill,
.bounty-card .status,
.bounty-card [class*="badge"],
.bounty-card [class*="tag"],
.bounty-card [class*="pill"] {
  color: #061018 !important;
  border: 1px solid rgba(32, 217, 231, 0.16) !important;
  background: rgba(32, 217, 231, 0.9) !important;
  box-shadow: 0 0 16px rgba(32, 217, 231, 0.12);
}

.app-shell[data-dashboard] .bounty-card .completed,
.app-shell[data-dashboard] .bounty-card .is-completed,
.app-shell[data-dashboard] .bounty-card [class*="complete"],
.bounty-card .completed,
.bounty-card .is-completed,
.bounty-card [class*="complete"] {
  color: #041008 !important;
  background: rgba(84, 223, 106, 0.92) !important;
  border-color: rgba(84, 223, 106, 0.32) !important;
}

.app-shell[data-dashboard] .bounty-card .standard,
.app-shell[data-dashboard] .bounty-card [class*="standard"],
.bounty-card .standard,
.bounty-card [class*="standard"] {
  color: #120906 !important;
  background: rgba(255, 134, 31, 0.92) !important;
  border-color: rgba(255, 134, 31, 0.35) !important;
}

.app-shell[data-dashboard] .bounty-card time,
.app-shell[data-dashboard] .bounty-card .date,
.app-shell[data-dashboard] .bounty-card .seats,
.bounty-card time,
.bounty-card .date,
.bounty-card .seats {
  color: #f5f8ff !important;
  background: rgba(7, 13, 22, 0.72) !important;
  border: 1px solid rgba(119, 151, 180, 0.24) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.app-shell[data-dashboard] .bounty-card button,
.app-shell[data-dashboard] .bounty-card .button,
.app-shell[data-dashboard] .bounty-card select,
.bounty-card button,
.bounty-card .button,
.bounty-card select {
  color: #061018 !important;
  border: 1px solid rgba(255, 134, 31, 0.35) !important;
  background: linear-gradient(180deg, #ff9a3c, #ff861f) !important;
  box-shadow: 0 0 18px rgba(255, 134, 31, 0.12);
}

.app-shell[data-dashboard] .bounty-card button:hover,
.app-shell[data-dashboard] .bounty-card .button:hover,
.bounty-card button:hover,
.bounty-card .button:hover {
  filter: brightness(1.08);
}

.app-shell[data-dashboard] .bounty-card .signup-roster,
.app-shell[data-dashboard] .bounty-card .roster,
.bounty-card .signup-roster,
.bounty-card .roster {
  color: #cbd7e7 !important;
  border-top: 1px solid rgba(119, 151, 180, 0.16) !important;
}


/* Player View cube icon parity 2026 */
.player-view-cube-icon {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.vortex-side-actions .player-view-cube-icon,
.vortex-matched-actions .player-view-cube-icon,
.bounty-side-actions .player-view-cube-icon,
.portal-switcher .player-view-cube-icon {
  width: 24px !important;
  height: 24px !important;
}


/* Psionics dice cleanup: Genesys magic-style checks, no Force die */
.psionic-reference-card {
  align-self: stretch;
  min-width: 260px;
  max-width: 360px;
  padding: 0.85rem;
  border: 1px solid rgba(32, 217, 231, 0.24);
  border-radius: 8px;
  background:
    radial-gradient(circle at 0% 0%, rgba(32, 217, 231, 0.13), transparent 12rem),
    radial-gradient(circle at 100% 0%, rgba(169, 107, 255, 0.13), transparent 13rem),
    rgba(7, 13, 22, 0.76);
  color: var(--vx-muted);
}

.psionic-reference-card .eyeline {
  margin: 0 0 0.35rem;
  color: var(--vx-cyan);
}

.psionic-reference-card strong {
  display: block;
  color: var(--vx-text);
  font-size: 0.86rem;
  margin-bottom: 0.4rem;
}

.psionic-reference-card p {
  margin: 0;
  color: #cbd7e7;
  font-size: 0.78rem;
  line-height: 1.45;
}

.psionic-reference-card div {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.65rem;
}

.psionic-reference-card span {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.38rem 0.5rem;
  border: 1px solid rgba(119, 151, 180, 0.16);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.035);
  font-size: 0.72rem;
}

.psionic-reference-card b {
  color: var(--vx-text);
}

.psionic-reference-card em {
  display: block;
  margin-top: 0.65rem;
  color: #ff861f;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
}

.dice-ref-group .die.force,
.die.force {
  display: none !important;
}

.result-symbol.light,
.result-symbol.dark {
  display: none !important;
}


/* Character portrait upload */
.vortex-portrait-wrap {
  width: 156px;
  height: 156px;
}

.vortex-portrait-button {
  position: relative;
  width: 156px;
  height: 156px;
  display: block;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.vortex-portrait-button .vortex-portrait {
  display: block;
}

.vortex-portrait-button span {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0.45rem 0.35rem;
  color: #061018;
  background: linear-gradient(180deg, rgba(32, 217, 231, 0.94), rgba(32, 217, 231, 0.78));
  font-size: 0.68rem;
  font-weight: 950;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 160ms ease, transform 160ms ease;
}

.vortex-portrait-button:hover span,
.vortex-portrait-button:focus-visible span {
  opacity: 1;
  transform: translateY(0);
}

.vortex-portrait-button:hover .vortex-portrait,
.vortex-portrait-button:focus-visible .vortex-portrait {
  border-color: rgba(32, 217, 231, 0.72);
  box-shadow: 0 0 28px rgba(32, 217, 231, 0.18);
}

.vortex-portrait-button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* Character portrait upload fix and Threat widget removal */
.vortex-vitals .threat-meter {
  display: none !important;
}

.vortex-portrait-wrap {
  width: 156px;
  height: 156px;
  position: relative;
  flex: 0 0 156px;
}

.vortex-portrait-button {
  position: relative;
  width: 156px;
  height: 156px;
  display: block;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.vortex-portrait-button .vortex-portrait {
  display: block;
  width: 156px;
  height: 156px;
}

.vortex-portrait-button span {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0.45rem 0.35rem;
  color: #061018;
  background: linear-gradient(180deg, rgba(32, 217, 231, 0.96), rgba(32, 217, 231, 0.78));
  font-size: 0.68rem;
  font-weight: 950;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: none;
}

.vortex-portrait-button:hover span,
.vortex-portrait-button:focus-visible span {
  opacity: 1;
  transform: translateY(0);
}

.vortex-portrait-button:hover .vortex-portrait,
.vortex-portrait-button:focus-visible .vortex-portrait {
  border-color: rgba(32, 217, 231, 0.72);
  box-shadow: 0 0 28px rgba(32, 217, 231, 0.18);
}

.portrait-file-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  left: 0 !important;
  top: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* Remove Edge and tighten Vortex vitals */
.vortex-vitals .edge-meter,
.vortex-vitals .edge-pool,
.vortex-vitals [data-edge],
.vortex-vitals [data-edge-pool],
.vortex-vitals [class*="edge"] {
  display: none !important;
}

.vortex-vitals {
  width: min(100%, 520px) !important;
  min-width: 0 !important;
  max-width: 520px !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(96px, 1fr)) !important;
  align-items: stretch !important;
  gap: 0.58rem !important;
  padding: 0.68rem !important;
  border: 1px solid rgba(119, 151, 180, 0.18) !important;
  border-radius: 8px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(169, 107, 255, 0.12), transparent 14rem),
    rgba(5, 10, 18, 0.78) !important;
}

.vortex-vitals > div {
  min-width: 0 !important;
  min-height: 76px !important;
  display: grid !important;
  align-content: center !important;
  gap: 0.22rem !important;
  padding: 0.58rem 0.72rem !important;
  border: 1px solid rgba(119, 151, 180, 0.16) !important;
  border-radius: 7px !important;
  background:
    linear-gradient(180deg, rgba(12, 21, 34, 0.92), rgba(6, 12, 22, 0.92)) !important;
}

.vortex-vitals > div span {
  color: #9ba8ba !important;
  font-size: 0.58rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.vortex-vitals > div strong {
  color: #f5f8ff !important;
  font-size: 1.58rem !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

.vortex-vitals > div em,
.vortex-vitals > div small {
  color: #b9c7d9 !important;
  font-size: 0.74rem !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

.vortex-vitals > div:nth-child(1) {
  border-color: rgba(255, 134, 31, 0.24) !important;
}

.vortex-vitals > div:nth-child(2) {
  border-color: rgba(32, 217, 231, 0.24) !important;
}

.vortex-vitals > div:nth-child(3) {
  border-color: rgba(169, 107, 255, 0.24) !important;
}

@media (max-width: 980px) {
  .vortex-vitals {
    width: 100% !important;
    max-width: none !important;
  }
}

@media (max-width: 640px) {
  .vortex-vitals {
    grid-template-columns: 1fr !important;
  }
}


/* Genesys Talent Pyramid Fix */
.talent-pyramid {
  display: block !important;
  overflow: visible !important;
  padding: 0 !important;
}

.talent-pyramid-shell {
  display: grid;
  grid-template-columns: minmax(240px, 0.35fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.talent-pyramid-rule {
  position: sticky;
  top: 0.75rem;
  padding: 1rem;
  border: 1px solid rgba(119, 151, 180, 0.22);
  border-radius: 9px;
  background:
    radial-gradient(circle at 0% 0%, rgba(32, 217, 231, 0.16), transparent 12rem),
    rgba(7, 13, 22, 0.84);
}

.talent-pyramid-rule.is-valid {
  border-color: rgba(84, 223, 106, 0.32);
}

.talent-pyramid-rule.is-invalid {
  border-color: rgba(220, 53, 37, 0.42);
  box-shadow: 0 0 28px rgba(220, 53, 37, 0.08);
}

.talent-pyramid-rule .eyeline {
  margin: 0 0 0.45rem;
  color: var(--vx-cyan);
}

.talent-pyramid-rule strong {
  display: block;
  color: var(--vx-text);
  font-size: 0.95rem;
  line-height: 1.15;
}

.talent-pyramid-rule p {
  margin: 0.65rem 0 0;
  color: #cbd7e7;
  font-size: 0.8rem;
  line-height: 1.45;
}

.talent-pyramid-rule em {
  display: block;
  margin-top: 0.8rem;
  color: var(--vx-orange);
  font-style: normal;
  font-weight: 950;
}

.talent-count-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.8rem;
}

.talent-count-strip span {
  padding: 0.34rem 0.48rem;
  border: 1px solid rgba(119, 151, 180, 0.18);
  border-radius: 999px;
  color: var(--vx-muted);
  background: rgba(255, 255, 255, 0.035);
  font-size: 0.7rem;
  font-weight: 850;
}

.talent-count-strip b {
  color: var(--vx-text);
}

.talent-count-strip span.is-invalid {
  color: #ffd2d2;
  border-color: rgba(220, 53, 37, 0.42);
  background: rgba(220, 53, 37, 0.12);
}

.talent-pyramid-columns {
  display: grid;
  grid-template-columns: repeat(5, minmax(168px, 1fr));
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
}

.talent-column {
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: end;
  gap: 0.65rem;
  min-width: 168px;
}

.talent-column-slots {
  display: grid;
  align-content: end;
  gap: 0.52rem;
}

.talent-column footer {
  min-height: 58px;
  display: grid;
  place-items: center;
  gap: 0.1rem;
  padding: 0.55rem;
  border: 1px solid rgba(119, 151, 180, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025)),
    rgba(7, 13, 22, 0.88);
  text-align: center;
}

.talent-column footer strong {
  color: var(--vx-text);
  font-size: 0.9rem;
  text-transform: uppercase;
}

.talent-column footer span {
  color: var(--vx-orange);
  font-size: 0.78rem;
  font-weight: 950;
}

.talent-column footer small {
  color: var(--vx-muted);
  font-size: 0.68rem;
}

.talent-slot {
  min-height: 132px !important;
  display: grid;
  align-content: start;
  gap: 0.35rem;
  padding: 0.66rem !important;
  border: 1px solid rgba(119, 151, 180, 0.24) !important;
  border-radius: 9px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(169, 107, 255, 0.14), transparent 8rem),
    rgba(8, 16, 26, 0.84) !important;
}

.talent-slot.is-filled {
  border-color: rgba(32, 217, 231, 0.34) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(32, 217, 231, 0.12), transparent 10rem),
    radial-gradient(circle at 100% 0%, rgba(169, 107, 255, 0.15), transparent 10rem),
    rgba(8, 16, 26, 0.92) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.talent-slot.is-open {
  border-style: dashed !important;
  border-color: rgba(84, 223, 106, 0.34) !important;
  background: rgba(84, 223, 106, 0.055) !important;
}

.talent-slot.is-locked {
  border-style: dashed !important;
  border-color: rgba(119, 151, 180, 0.14) !important;
  background: rgba(255, 255, 255, 0.018) !important;
  opacity: 0.58;
}

.talent-column.is-invalid .talent-slot.is-filled {
  border-color: rgba(220, 53, 37, 0.48) !important;
  box-shadow: 0 0 22px rgba(220, 53, 37, 0.08);
}

.talent-slot-topline {
  display: flex;
  justify-content: space-between;
  gap: 0.45rem;
  align-items: center;
  color: var(--vx-muted);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 950;
}

.talent-slot-topline b {
  color: var(--vx-cyan);
  font-size: 0.6rem;
  text-align: right;
}

.talent-slot strong {
  color: var(--vx-text) !important;
  font-size: 0.9rem;
  line-height: 1.15;
}

.talent-slot em {
  color: var(--vx-orange);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
}

.talent-slot p {
  margin: 0 !important;
  color: var(--vx-muted) !important;
  font-size: 0.72rem !important;
  line-height: 1.32 !important;
}

@media (max-width: 1080px) {
  .talent-pyramid-shell {
    grid-template-columns: 1fr;
  }

  .talent-pyramid-rule {
    position: static;
  }
}


/* Remove redundant bounty quick links from sidebars */
.bounty-quick-links a[href="#current-bounties"],
.bounty-quick-links a[href="#your-bounties"],
.bounty-quick-links a[href="#completed"],
.vortex-quick-links a[href="/player"],
.vortex-quick-links a[href="/player#your-bounties"],
.vortex-quick-links a[href="/player#completed"] {
  display: none !important;
}

.bounty-quick-links,
.vortex-quick-links {
  padding-top: 0.35rem !important;
}


/* Skill table sorting */
.vx-skill-head.is-sortable {
  align-items: stretch;
}

.skill-sort-button {
  min-width: 0;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.skill-sort-button:hover,
.skill-sort-button.active {
  color: var(--vx-cyan);
}

.skill-sort-button i {
  min-width: 0.75rem;
  color: var(--vx-orange);
  font-style: normal;
  font-size: 0.62rem;
  line-height: 1;
}

.vx-skill-head.is-sortable > span,
.vx-skill-head.is-sortable > button {
  align-self: center;
}

.vx-skill-head.is-sortable button:nth-child(1) {
  justify-content: flex-start;
}

.vx-skill-head.is-sortable button:nth-child(4),
.vx-skill-head.is-sortable button:nth-child(5) {
  justify-content: center;
}

.vx-skill-head.is-sortable button:focus-visible {
  outline: 2px solid rgba(32, 217, 231, 0.75);
  outline-offset: 3px;
  border-radius: 4px;
}


/* XP overlay, Soak, split Defense, and Critical Injuries parity */
.vortex-tags {
  position: relative;
  align-items: stretch;
}

.xp-popover-wrap {
  position: relative;
  z-index: 12;
}

.xp-summary-button {
  height: 100%;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
  padding: 0.42rem 0.66rem;
  border: 1px solid rgba(32, 217, 231, 0.22);
  border-radius: 7px;
  color: #f5f8ff;
  background: rgba(7, 13, 22, 0.82);
  cursor: pointer;
  font-weight: 950;
}

.xp-summary-button span {
  color: #20d9e7;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.xp-summary-button strong {
  color: #ff861f;
  font-size: 0.86rem;
}

.xp-summary-button i {
  color: #9ba8ba;
  font-style: normal;
  font-size: 0.85rem;
}

.xp-summary-button:hover,
.xp-summary-button[aria-expanded="true"] {
  border-color: rgba(169, 107, 255, 0.55);
  background: rgba(169, 107, 255, 0.14);
}

.xp-popover {
  position: absolute;
  top: calc(100% + 0.55rem);
  left: 0;
  width: min(360px, 88vw);
  padding: 0.9rem;
  border: 1px solid rgba(32, 217, 231, 0.28);
  border-radius: 9px;
  background:
    radial-gradient(circle at 0 0, rgba(32, 217, 231, 0.18), transparent 12rem),
    radial-gradient(circle at 100% 0, rgba(169, 107, 255, 0.18), transparent 13rem),
    #07101a;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.42);
}

.xp-popover[hidden] {
  display: none !important;
}

.xp-popover header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
}

.xp-popover header strong {
  color: #f5f8ff;
  font-size: 0.95rem;
}

.xp-popover header button {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(119, 151, 180, 0.2);
  border-radius: 6px;
  color: #f5f8ff;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
}

.xp-popover p {
  margin: 0 0 0.7rem;
  color: #9ba8ba;
  font-size: 0.78rem;
}

.xp-popover label {
  display: grid;
  gap: 0.28rem;
  color: #20d9e7;
  font-size: 0.66rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.xp-popover input {
  width: 100%;
  min-height: 34px;
  padding: 0.38rem 0.48rem;
  border: 1px solid rgba(119, 151, 180, 0.18);
  border-radius: 6px;
  color: #f5f8ff;
  background: rgba(3, 8, 14, 0.82);
}

.xp-adjust-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  margin-top: 0.7rem;
}

.xp-adjust-row label {
  grid-column: 1 / -1;
}

.xp-adjust-row button {
  min-height: 32px;
  border: 1px solid rgba(255, 134, 31, 0.28);
  border-radius: 6px;
  color: #061018;
  background: #ff861f;
  font-weight: 950;
  cursor: pointer;
}

.vortex-vitals {
  width: min(100%, 680px) !important;
  max-width: 680px !important;
  grid-template-columns: repeat(4, minmax(104px, 1fr)) !important;
  gap: 0.58rem !important;
}

.vortex-vitals .vital-card {
  min-width: 0 !important;
  min-height: 82px !important;
  display: grid !important;
  align-content: center !important;
  gap: 0.24rem !important;
  padding: 0.62rem 0.7rem !important;
  border: 1px solid rgba(119, 151, 180, 0.16) !important;
  border-radius: 7px !important;
  background:
    linear-gradient(180deg, rgba(12, 21, 34, 0.92), rgba(6, 12, 22, 0.92)) !important;
}

.vortex-vitals .vital-card > span {
  color: #9ba8ba !important;
  font-size: 0.56rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.vortex-vitals .vital-card strong,
.vortex-vitals .vital-card em {
  color: #f5f8ff !important;
  font-style: normal !important;
}

.vortex-vitals .vital-card strong input {
  color: #f5f8ff !important;
  font-size: 1.55rem !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

.vortex-vitals .vital-card em {
  display: flex;
  align-items: baseline;
  gap: 0.15rem;
  color: #b9c7d9 !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
}

.vortex-vitals .vital-card input {
  width: 3rem !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
}

.vortex-vitals .vital-soak strong input {
  color: #ff861f !important;
}

.defense-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}

.defense-split label {
  display: grid;
  gap: 0.14rem;
  color: #9ba8ba;
  font-size: 0.58rem;
  font-weight: 950;
  text-transform: uppercase;
}

.defense-split input {
  width: 100% !important;
  color: #f5f8ff !important;
  font-size: 1.3rem !important;
  font-weight: 950 !important;
}

.sheet-table[data-repeat-list="injuries"] .repeat-row,
.sheet-table[data-repeat-list="injuries"] .repeat-head {
  grid-template-columns: 1fr 0.5fr 1fr 1.4fr auto !important;
}

@media (max-width: 980px) {
  .vortex-vitals {
    max-width: none !important;
    grid-template-columns: repeat(2, minmax(120px, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  .vortex-vitals {
    grid-template-columns: 1fr !important;
  }

  .xp-popover {
    left: auto;
    right: 0;
  }
}


/* Vitals X/X redo and safe XP popover layer */
.vortex-vitals {
  width: min(100%, 720px) !important;
  max-width: 720px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(118px, 1fr)) !important;
  gap: 0.62rem !important;
  padding: 0.72rem !important;
  border: 1px solid rgba(119, 151, 180, 0.18) !important;
  border-radius: 10px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(169, 107, 255, 0.10), transparent 15rem),
    rgba(5, 10, 18, 0.82) !important;
}

.vortex-vitals .vital-card {
  min-width: 0 !important;
  min-height: 104px !important;
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  align-content: stretch !important;
  gap: 0.45rem !important;
  padding: 0.68rem 0.72rem !important;
  border: 1px solid rgba(119, 151, 180, 0.16) !important;
  border-radius: 9px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.025), transparent 7rem),
    linear-gradient(180deg, rgba(10, 19, 31, 0.96), rgba(6, 12, 22, 0.96)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
}

.vortex-vitals .vital-card header {
  display: grid;
  gap: 0.12rem;
}

.vortex-vitals .vital-card header span {
  color: #dce8f7 !important;
  font-size: 0.62rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
}

.vortex-vitals .vital-card header small {
  color: #7f91a8 !important;
  font-size: 0.5rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.vital-wounds {
  border-color: rgba(255, 134, 31, 0.28) !important;
}

.vital-strain {
  border-color: rgba(32, 217, 231, 0.28) !important;
}

.vital-soak {
  border-color: rgba(255, 134, 31, 0.22) !important;
}

.vital-defense {
  border-color: rgba(169, 107, 255, 0.30) !important;
}

.vital-ratio {
  align-self: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: baseline;
  gap: 0.28rem;
  padding: 0.35rem 0.45rem;
  border: 1px solid rgba(119, 151, 180, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.022);
}

.vital-ratio input,
.vital-single input,
.defense-split input {
  min-height: 0 !important;
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #f5f8ff !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-align: center !important;
}

.vital-ratio input {
  font-size: 1.62rem !important;
}

.vital-ratio i {
  color: #8fa2b8;
  font-style: normal;
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1;
  opacity: 0.9;
}

.vital-single {
  align-self: center;
  display: grid;
  place-items: center;
  padding: 0.36rem 0.45rem;
  border: 1px solid rgba(119, 151, 180, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.022);
}

.vital-single input {
  color: #ff861f !important;
  font-size: 1.8rem !important;
}

.defense-split {
  align-self: center;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}

.defense-split label {
  min-width: 0;
  display: grid;
  gap: 0.18rem;
  padding: 0.42rem 0.45rem;
  border: 1px solid rgba(119, 151, 180, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.022);
}

.defense-split small {
  color: #8fa2b8 !important;
  font-size: 0.52rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

.defense-split input {
  font-size: 1.35rem !important;
}

/* Keep XP above nearby sheet sections without touching Active Pool styles */
.vortex-tags,
.xp-popover-wrap {
  position: relative !important;
  overflow: visible !important;
}

.xp-popover-wrap {
  z-index: 5000 !important;
}

.xp-popover {
  z-index: 5001 !important;
  pointer-events: auto !important;
}

.vortex-header,
.vortex-hero,
.vortex-identity,
.vortex-sheet-header,
.portal-header {
  overflow: visible !important;
}

@media (max-width: 1080px) {
  .vortex-vitals {
    max-width: none !important;
    grid-template-columns: repeat(2, minmax(170px, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  .vortex-vitals {
    grid-template-columns: 1fr !important;
  }
}


/* Wound/Strain X/X alignment cleanup */
.vital-wounds .vital-ratio,
.vital-strain .vital-ratio {
  width: min(100%, 152px) !important;
  margin: 0 auto !important;
  padding: 0.45rem 0.8rem 0.45rem 1rem !important;
  justify-content: center !important;
  justify-items: center !important;
  align-items: center !important;
}

.vital-wounds .vital-ratio input,
.vital-strain .vital-ratio input {
  width: 100% !important;
  text-align: center !important;
}

.vital-wounds .vital-ratio i,
.vital-strain .vital-ratio i {
  margin: 0 0.1rem 0 0.18rem !important;
  transform: translateX(1px) !important;
}


/* Static vitals + override popovers */
.vortex-vitals {
  width: min(100%, 740px) !important;
  max-width: 740px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(130px, 1fr)) !important;
  gap: 0.68rem !important;
  padding: 0.72rem !important;
  border: 1px solid rgba(119, 151, 180, 0.18) !important;
  border-radius: 10px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(169, 107, 255, 0.10), transparent 15rem),
    rgba(5, 10, 18, 0.82) !important;
}

.vortex-vitals .vital-card {
  position: relative;
  min-width: 0 !important;
  min-height: 112px !important;
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  gap: 0.48rem !important;
  padding: 0.72rem !important;
  border: 1px solid rgba(119, 151, 180, 0.16) !important;
  border-radius: 9px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,255,255,0.02), transparent 7rem),
    linear-gradient(180deg, rgba(10, 19, 31, 0.96), rgba(6, 12, 22, 0.96)) !important;
}

.vital-wounds { border-color: rgba(255, 134, 31, 0.28) !important; }
.vital-strain { border-color: rgba(32, 217, 231, 0.28) !important; }
.vital-soak { border-color: rgba(255, 196, 84, 0.22) !important; }
.vital-defense { border-color: rgba(169, 107, 255, 0.30) !important; }

.vortex-vitals .vital-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.vortex-vitals .vital-card header > div {
  display: grid;
  gap: 0.1rem;
}

.vortex-vitals .vital-card header span {
  color: #dce8f7 !important;
  font-size: 0.62rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
}

.vortex-vitals .vital-card header small {
  color: #7f91a8 !important;
  font-size: 0.5rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.vital-gear {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(119, 151, 180, 0.16);
  border-radius: 7px;
  background: rgba(255,255,255,0.03);
  color: #9fb2ca;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
}

.vital-gear:hover {
  color: #f5f8ff;
  border-color: rgba(169, 107, 255, 0.38);
  background: rgba(169, 107, 255, 0.12);
}

.vital-ratio-display {
  align-self: center;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.22rem;
  width: min(100%, 158px);
  margin: 0 auto;
  padding: 0.48rem 0.78rem 0.48rem 0.94rem;
  border: 1px solid rgba(119, 151, 180, 0.12);
  border-radius: 8px;
  background: rgba(255,255,255,0.022);
}

.vital-ratio-display strong {
  color: #f5f8ff;
  font-size: 1.62rem;
  font-weight: 950;
  line-height: 1;
  text-align: center;
}

.vital-ratio-display i {
  color: #8fa2b8;
  font-style: normal;
  font-size: 1.28rem;
  font-weight: 900;
  transform: translateX(2px);
}

.vital-value-display {
  align-self: center;
  display: grid;
  place-items: center;
  min-height: 58px;
  width: min(100%, 120px);
  margin: 0 auto;
  padding: 0.4rem 0.6rem;
  border: 1px solid rgba(119, 151, 180, 0.12);
  border-radius: 8px;
  background: rgba(255,255,255,0.022);
}

.vital-value-display strong {
  color: #ff861f;
  font-size: 1.9rem;
  font-weight: 950;
  line-height: 1;
}

.defense-display {
  align-self: center;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.defense-display > div {
  display: grid;
  gap: 0.18rem;
  min-height: 58px;
  padding: 0.44rem 0.45rem;
  border: 1px solid rgba(119, 151, 180, 0.12);
  border-radius: 8px;
  background: rgba(255,255,255,0.022);
}

.defense-display small {
  color: #8fa2b8 !important;
  font-size: 0.52rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

.defense-display strong {
  color: #f5f8ff;
  font-size: 1.35rem;
  font-weight: 950;
  line-height: 1;
  text-align: center;
}

.vital-popover {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  z-index: 9000;
  width: min(260px, 88vw);
  padding: 0.82rem;
  border: 1px solid rgba(32, 217, 231, 0.24);
  border-radius: 9px;
  background:
    radial-gradient(circle at 0 0, rgba(32, 217, 231, 0.16), transparent 12rem),
    radial-gradient(circle at 100% 0, rgba(169, 107, 255, 0.16), transparent 12rem),
    #07101a;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
}

.vital-popover[hidden] {
  display: none !important;
}

.vital-popover > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.55rem;
}

.vital-popover > header strong {
  color: #f5f8ff;
  font-size: 0.92rem;
}

.vital-popover > header button {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(119, 151, 180, 0.16);
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  color: #f5f8ff;
  cursor: pointer;
}

.vital-popover label {
  display: grid;
  gap: 0.24rem;
  margin-bottom: 0.52rem;
  color: #20d9e7;
  font-size: 0.64rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.vital-popover input {
  width: 100%;
  min-height: 34px;
  padding: 0.36rem 0.48rem;
  border: 1px solid rgba(119, 151, 180, 0.16);
  border-radius: 6px;
  background: rgba(3, 8, 14, 0.84);
  color: #f5f8ff;
}

.vital-popover p {
  margin: 0 0 0.6rem;
  color: #9fb2ca;
  font-size: 0.75rem;
}

.vital-popover p b {
  color: #ffb468;
}

.vital-clear {
  width: 100%;
  min-height: 32px;
  margin-top: 0.24rem;
  border: 1px solid rgba(255, 134, 31, 0.26);
  border-radius: 6px;
  background: rgba(255, 134, 31, 0.12);
  color: #ffd4b4;
  font-weight: 900;
  cursor: pointer;
}

.vx-derived {
  display: grid;
  gap: 0.45rem;
}

.derived-readonly {
  display: grid;
  gap: 0.14rem;
}

.derived-readonly span {
  color: #9fb2ca !important;
}

.derived-readonly strong {
  color: #f5f8ff !important;
  font-size: 1.08rem !important;
}

.derived-readonly em {
  color: #6ed3df !important;
  font-size: 0.68rem !important;
  font-style: normal !important;
}

.derived-readonly.is-overridden em {
  color: #ffb468 !important;
}

@media (max-width: 1080px) {
  .vortex-vitals {
    max-width: none !important;
    grid-template-columns: repeat(2, minmax(170px, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  .vortex-vitals {
    grid-template-columns: 1fr !important;
  }

  .vital-popover {
    left: 0;
    right: auto;
  }
}


/* Reliable SVG gear icons */
.sheet-gear-icon {
  width: 16px;
  height: 16px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sheet-gear-wrap {
  display: inline-grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  color: inherit;
  font-style: normal;
}

.vital-gear .sheet-gear-icon {
  width: 15px;
  height: 15px;
}

.xp-summary-button .sheet-gear-icon {
  width: 15px;
  height: 15px;
}


/* Icon and popover cleanup pass */
.sheet-gear-icon,
.sheet-close-icon {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sheet-gear-icon {
  width: 15px;
  height: 15px;
  stroke-width: 1.65;
}

.sheet-close-icon {
  width: 15px;
  height: 15px;
  stroke-width: 2.2;
}

.sheet-gear-wrap {
  display: inline-grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  color: inherit;
  font-style: normal;
  line-height: 1;
}

.vital-gear {
  flex: 0 0 auto !important;
  width: 30px !important;
  height: 30px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid rgba(119, 151, 180, 0.18) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: #9fb2ca !important;
  font-size: 0 !important;
  line-height: 0 !important;
  cursor: pointer !important;
}

.vital-gear:hover,
.vital-gear:focus-visible {
  color: #f5f8ff !important;
  border-color: rgba(169, 107, 255, 0.5) !important;
  background: rgba(169, 107, 255, 0.14) !important;
}

.xp-summary-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.xp-summary-button .sheet-gear-wrap {
  flex: 0 0 auto !important;
  margin-left: 0.05rem !important;
  color: #9fb2ca !important;
}

.xp-summary-button:hover .sheet-gear-wrap,
.xp-summary-button:focus-visible .sheet-gear-wrap {
  color: #f5f8ff !important;
}

.xp-popover header button,
.vital-popover > header button {
  flex: 0 0 auto !important;
  width: 30px !important;
  height: 30px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid rgba(119, 151, 180, 0.18) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #9fb2ca !important;
  font-size: 0 !important;
  line-height: 0 !important;
  cursor: pointer !important;
}

.xp-popover header button:hover,
.vital-popover > header button:hover,
.xp-popover header button:focus-visible,
.vital-popover > header button:focus-visible {
  color: #f5f8ff !important;
  border-color: rgba(32, 217, 231, 0.44) !important;
  background: rgba(32, 217, 231, 0.12) !important;
}

/* Keep popovers attached to their cards and above lower sections. */
.vortex-character-banner,
.vortex-identity,
.vortex-tags,
.xp-popover-wrap,
.vortex-vitals,
.vortex-vitals .vital-card {
  overflow: visible !important;
}

.vortex-character-banner {
  position: relative !important;
  z-index: 90 !important;
}

.vortex-main-grid {
  position: relative !important;
  z-index: 1 !important;
}

/* VORTEX reroll tracker */
.reroll-tracker-panel {
  overflow: hidden !important;
  padding: 0.78rem 0.86rem 0.86rem !important;
}

.reroll-tracker-title {
  align-items: center !important;
  gap: 0.45rem !important;
  padding-bottom: 0.55rem !important;
  border-bottom: 1px solid rgba(80, 112, 134, 0.28);
}

.reroll-tracker-title button {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  min-width: 0;
  flex: 0 1 auto;
}

.reroll-tracker-title button:disabled {
  cursor: default;
}

.reroll-tracker-title h2 {
  margin: 0 !important;
  font-size: 0.84rem !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  white-space: nowrap;
}

.reroll-tracker-title span {
  margin-left: auto;
  max-width: 7.45rem;
  padding: 0.12rem 0.44rem !important;
  border: 1px solid rgba(0, 238, 255, 0.54);
  border-radius: 0.55rem !important;
  background: linear-gradient(180deg, rgba(10, 77, 91, 0.82), rgba(6, 32, 43, 0.92));
  box-shadow: inset 0 0 0 1px rgba(14, 205, 224, 0.18), 0 0 10px rgba(0, 238, 255, 0.18);
  color: #26f7ff !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.52rem !important;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reroll-tracker-title span::first-letter {
  color: #ff8b20;
}

.reroll-tracker {
  margin-top: 0.54rem;
  position: relative;
}

.reroll-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.95rem;
  gap: 0.42rem;
  align-items: end;
}

.reroll-hand-area {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.reroll-label {
  color: #b8c4d8;
  font-weight: 950;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 #243242;
  line-height: 1;
}

.hand-label {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  justify-self: end;
  padding: 0 0.12rem 0 0;
  font-size: 0.82rem;
  transform: translateY(-0.42rem);
  z-index: 2;
}

.reroll-hand-grid {
  grid-column: 1 / -1;
  grid-row: 1;
  position: relative;
  width: 12.18rem;
  height: 6.36rem;
  margin-top: 0.28rem;
  background-image: url("/assets/rerolls/hexes.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.reroll-hex {
  position: absolute;
  display: grid;
  place-items: center;
  border: 0;
  box-sizing: border-box;
  padding: 0;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  width: 2.34rem;
  height: 2.34rem;
}

.reroll-hex:hover,
.reroll-hex:focus,
.reroll-hex:active,
.reroll-hex.filled,
.reroll-hex.filled:hover,
.reroll-hex.filled:focus,
.reroll-hex.filled:active {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.reroll-hex:focus-visible {
  outline: 1px solid rgba(0, 238, 255, 0.76);
  outline-offset: 2px;
}

.reroll-hex:nth-child(1) {
  left: 1.56rem;
  top: 0.84rem;
}

.reroll-hex:nth-child(2) {
  left: 4.2rem;
  top: 0.84rem;
}

.reroll-hex:nth-child(3) {
  left: 6.88rem;
  top: 0.84rem;
}

.reroll-hex:nth-child(4) {
  left: 9.54rem;
  top: 0.84rem;
}

.reroll-hex:nth-child(5) {
  left: 0.22rem;
  top: 3.14rem;
}

.reroll-hex:nth-child(6) {
  left: 2.88rem;
  top: 3.14rem;
}

.reroll-hex:nth-child(7) {
  left: 5.54rem;
  top: 3.14rem;
}

.reroll-hex:nth-child(8) {
  left: 8.2rem;
  top: 3.14rem;
}

.reroll-hex:not(.filled) {
  opacity: 0;
}

.reroll-hex.filled {
  overflow: visible;
}

.reroll-token {
  width: 2.36rem !important;
  height: 2.36rem !important;
  min-width: 2.36rem;
  max-width: none !important;
  display: block;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.45));
}

.reroll-token.small,
.reroll-token.bank {
  width: 1.38rem !important;
  height: 1.38rem !important;
  min-width: 1.38rem;
}

.reroll-bank-divider {
  grid-column: 1 / -1;
  height: 1px;
  margin: 0.02rem 0 0.14rem;
  background: rgba(80, 112, 134, 0.26);
}

.bank-label {
  grid-column: 1 / -1;
  justify-self: center;
  margin: 0 0 -0.02rem;
  font-size: 0.88rem;
}

.reroll-bank {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  justify-self: center;
  gap: 0.28rem;
  padding: 0.19rem 0.42rem;
  border: 1px solid rgba(91, 119, 136, 0.38);
  border-radius: 0.36rem;
  background: #030a11;
}

.reroll-bank-item {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: center;
  gap: 0.08rem;
  min-width: 0;
  padding: 0.1rem 0;
  border: 0;
  background: transparent;
  color: #f7fbff;
  font-size: 0.82rem;
  font-weight: 950;
  text-shadow: 2px 2px 0 #1b2635;
}

.reroll-bank-item:disabled {
  opacity: 0.52;
  cursor: not-allowed;
}

.reroll-story-area {
  display: grid;
  justify-items: center;
  gap: 0.08rem;
  padding-left: 0.4rem;
  border-left: 1px solid rgba(80, 112, 134, 0.28);
}

.story-label,
.points-label {
  font-size: 0.76rem;
}

.story-stack {
  position: relative;
  width: 3.38rem;
  height: 5.28rem;
  padding: 0;
  border: 1px solid rgba(91, 119, 136, 0.32);
  border-radius: 0.7rem;
  background-color: #030a11;
  background-image: var(--story-art);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 2.74rem 4.28rem;
  margin-bottom: 0.42rem;
}

.story-point-hotspot {
  position: absolute;
  width: 1.12rem;
  height: 1.12rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.story-point-hotspot:disabled {
  cursor: not-allowed;
}

.story-point-hotspot-1,
.story-point-hotspot-3,
.story-point-hotspot-5 {
  left: 0.58rem;
}

.story-point-hotspot-2,
.story-point-hotspot-4,
.story-point-hotspot-6 {
  left: 1.68rem;
}

.story-point-hotspot-1 {
  top: 0.62rem;
}

.story-point-hotspot-2 {
  top: 1.25rem;
}

.story-point-hotspot-3 {
  top: 1.86rem;
}

.story-point-hotspot-4 {
  top: 2.5rem;
}

.story-point-hotspot-5 {
  top: 3.12rem;
}

.story-point-hotspot-6 {
  top: 3.75rem;
}

.reroll-mode {
  display: none;
}

.reroll-mode.locked {
  color: #ffb45f;
}

.reroll-mode.setup {
  color: #29e6ef;
}

.reroll-manager {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 200000;
  width: min(760px, calc(100vw - 2rem));
  max-height: min(760px, calc(100vh - 2rem));
  overflow: auto;
  transform: translate(-50%, -50%);
  padding: 1rem;
  border: 1px solid rgba(0, 238, 255, 0.38);
  border-radius: 0.65rem;
  background: linear-gradient(180deg, rgba(8, 31, 43, 0.98), rgba(7, 14, 27, 0.98));
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.58), 0 0 40px rgba(0, 238, 255, 0.16);
}

.reroll-manager header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.reroll-manager header strong,
.reroll-manager h3 {
  color: #f1f6ff;
  text-transform: uppercase;
}

.reroll-manager header button {
  width: 2rem;
  height: 2rem;
  padding: 0;
}

.reroll-manager-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.95fr) minmax(0, 0.95fr);
  gap: 0.75rem;
}

.reroll-manager-grid section {
  display: grid;
  gap: 0.55rem;
  align-content: start;
  padding: 0.75rem;
  border: 1px solid rgba(39, 198, 207, 0.22);
  border-radius: 0.5rem;
  background: rgba(4, 19, 29, 0.8);
}

.reroll-manager-type {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.32rem 0.5rem;
  align-items: center;
}

.reroll-manager-type button {
  min-height: 2rem;
}

.reroll-manager-fields {
  display: grid;
  gap: 0.45rem;
}

.reroll-manager-fields label,
.reroll-lock-toggle {
  display: grid;
  gap: 0.2rem;
  color: #9fb2ca;
  font-weight: 800;
}

.reroll-manager-fields input {
  min-width: 0;
}

.reroll-lock-toggle {
  grid-template-columns: auto 1fr;
  align-items: center;
}

@media (max-width: 760px) {
  .reroll-body {
    grid-template-columns: 1fr;
  }

  .reroll-story-area {
    grid-template-columns: auto auto auto;
    justify-content: start;
    border-left: 0;
    border-top: 1px solid rgba(80, 112, 134, 0.28);
    padding: 0.5rem 0 0;
  }

  .reroll-manager-grid {
    grid-template-columns: 1fr;
  }
}

.xp-popover-wrap {
  position: relative !important;
  z-index: 7000 !important;
}

.xp-popover {
  z-index: 7001 !important;
  left: 0 !important;
  right: auto !important;
}

.vital-popover {
  z-index: 7200 !important;
}

.vital-wounds .vital-popover,
.vital-strain .vital-popover {
  left: 0 !important;
  right: auto !important;
}

.vital-soak .vital-popover,
.vital-defense .vital-popover {
  left: auto !important;
  right: 0 !important;
}

/* Clean up card header alignment after SVG replacement. */
.vortex-vitals .vital-card > header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 0.65rem !important;
}

.vortex-vitals .vital-card > header > div {
  min-width: 0 !important;
}

.vital-ratio-display {
  justify-self: center !important;
  align-self: center !important;
}

.vital-value-display,
.defense-display {
  justify-self: center !important;
  align-self: center !important;
}


/* Sheet cleanup: stat minus buttons, derived meta cleanup, talent help */
.stat-tile {
  grid-template-columns: minmax(0, 1fr) auto auto auto !important;
}

.stat-step,
.stat-tile [data-stat-bump] {
  width: 30px !important;
  height: 30px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid rgba(119, 151, 180, 0.18) !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #9fb2ca !important;
  font-weight: 950 !important;
  cursor: pointer !important;
}

.stat-step:hover,
.stat-tile [data-stat-bump]:hover {
  color: #f5f8ff !important;
  border-color: rgba(32, 217, 231, 0.42) !important;
  background: rgba(32, 217, 231, 0.12) !important;
}

.stat-minus {
  color: #ffb468 !important;
}

.derived-readonly em,
.derived-tile em {
  display: none !important;
}

.talent-pyramid-rule strong {
  color: #f5f8ff !important;
}

.talent-pyramid-rule p {
  max-width: 46rem;
}


/* XP economy plumbing */
.xp-summary-button {
  min-width: 158px;
  display: inline-grid !important;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 0.5rem !important;
  row-gap: 0.1rem;
  align-items: center !important;
}

.xp-summary-button > span {
  grid-column: 1;
  grid-row: 1;
}

.xp-summary-button > strong {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
}

.xp-summary-button > small {
  grid-column: 1 / 3;
  grid-row: 2;
  color: #9fb2ca;
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.xp-summary-button > i {
  grid-column: 3;
  grid-row: 1 / 3;
}

.xp-summary-button.is-overspent {
  border-color: rgba(220, 53, 37, 0.55) !important;
  background: rgba(220, 53, 37, 0.13) !important;
}

.xp-summary-button.is-overspent small,
.xp-ledger-summary b.danger {
  color: #ff8f8f !important;
}

.xp-popover {
  width: min(430px, 92vw) !important;
}

.xp-adjust-row.compact {
  grid-template-columns: 1fr 1fr 1fr;
}

.xp-warning-toggle {
  margin-top: 0.65rem;
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 0.5rem !important;
  color: #cbd7e7 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.78rem !important;
}

.xp-warning-toggle input {
  width: auto !important;
  min-height: 0 !important;
}

.xp-warning {
  margin-top: 0.7rem;
  padding: 0.62rem 0.7rem;
  border: 1px solid rgba(220, 53, 37, 0.42);
  border-radius: 7px;
  color: #ffd2d2;
  background: rgba(220, 53, 37, 0.12);
  font-size: 0.82rem;
  font-weight: 850;
}

.xp-ledger {
  margin-top: 0.75rem;
  border-top: 1px solid rgba(119, 151, 180, 0.18);
  padding-top: 0.75rem;
}

.xp-ledger-summary,
.xp-ledger-details {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.38rem 0.75rem;
  align-items: center;
}

.xp-ledger span {
  color: #9fb2ca;
  font-size: 0.76rem;
}

.xp-ledger b {
  color: #f5f8ff;
  font-size: 0.78rem;
}

.xp-ledger details {
  margin-top: 0.65rem;
}

.xp-ledger summary {
  cursor: pointer;
  color: #20d9e7;
  font-size: 0.78rem;
  font-weight: 900;
}

.sheet-table[data-repeat-list="weapons"] .repeat-row,
.sheet-table[data-repeat-list="weapons"] .repeat-head {
  grid-template-columns: 1fr 0.72fr 0.55fr 0.48fr 0.7fr 0.55fr 0.72fr 1.35fr auto !important;
}

.sheet-table[data-repeat-list="equipment"] .repeat-row,
.sheet-table[data-repeat-list="equipment"] .repeat-head {
  grid-template-columns: 1fr 0.48fr 0.62fr 0.72fr 1.5fr auto !important;
}


/* XP plumbing part 2A: purchase controls and equipment effects */
.rank-buy-controls {
  display: grid;
  grid-template-columns: 30px 42px minmax(70px, auto);
  gap: 0.28rem;
  align-items: center;
}

.rank-buy-controls input {
  width: 42px !important;
  text-align: center !important;
  pointer-events: none;
}

.rank-buy-controls button {
  min-height: 30px;
  display: grid;
  place-items: center;
  padding: 0.2rem 0.34rem;
  border: 1px solid rgba(119, 151, 180, 0.18);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  color: #dce8f7;
  font-weight: 950;
  cursor: pointer;
}

.rank-buy-controls button:hover:not(:disabled) {
  color: #f5f8ff;
  border-color: rgba(32, 217, 231, 0.42);
  background: rgba(32, 217, 231, 0.12);
}

.rank-buy-controls button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.rank-buy-controls button small {
  margin-left: 0.16rem;
  color: #ffb468;
  font-size: 0.58rem;
  font-weight: 950;
}

.repeat-check {
  min-height: 34px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
  padding: 0.26rem 0.34rem;
  border: 1px solid rgba(119, 151, 180, 0.16);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  color: #cbd7e7;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.repeat-check input {
  width: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
}

.sheet-table[data-repeat-list="weapons"] .repeat-row,
.sheet-table[data-repeat-list="weapons"] .repeat-head {
  grid-template-columns: 1fr 0.7fr 0.52fr 0.48fr 0.66fr 0.82fr 0.55fr 0.72fr 0.52fr 0.72fr 0.72fr 1.35fr auto !important;
}

.sheet-table[data-repeat-list="equipment"] .repeat-row,
.sheet-table[data-repeat-list="equipment"] .repeat-head {
  grid-template-columns: 1fr 0.48fr 0.82fr 0.58fr 0.72fr 0.52fr 0.72fr 0.72fr 0.8fr 0.8fr 1.35fr auto !important;
}

.sheet-table[data-repeat-list="talents"] .repeat-row,
.sheet-table[data-repeat-list="talents"] .repeat-head {
  grid-template-columns: 1fr 0.42fr 0.62fr 0.74fr 0.9fr 1.6fr auto !important;
}

.sheet-table[data-repeat-list="weapons"],
.sheet-table[data-repeat-list="equipment"],
.sheet-table[data-repeat-list="talents"] {
  overflow-x: auto;
  padding-bottom: 0.35rem;
}

.sheet-table[data-repeat-list="weapons"] .repeat-row,
.sheet-table[data-repeat-list="equipment"] .repeat-row,
.sheet-table[data-repeat-list="talents"] .repeat-row,
.sheet-table[data-repeat-list="weapons"] .repeat-head,
.sheet-table[data-repeat-list="equipment"] .repeat-head,
.sheet-table[data-repeat-list="talents"] .repeat-head {
  min-width: max-content;
}


/* Skill purchase grid repair */
.vx-skill-head,
.skill-row {
  display: grid !important;
  grid-template-columns:
    minmax(180px, 1.55fr)
    72px
    150px
    70px
    58px
    minmax(150px, 1.1fr)
    48px !important;
  align-items: center !important;
  gap: 0.62rem !important;
}

.vx-skill-head > span,
.skill-row > span,
.skill-row > strong,
.skill-row > div,
.skill-row > label,
.skill-row > button {
  min-width: 0 !important;
}

.rank-buy-controls {
  display: grid !important;
  grid-template-columns: 30px 38px 70px !important;
  gap: 0.28rem !important;
  align-items: center !important;
  justify-content: start !important;
}

.rank-buy-controls .rank-number {
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(119, 151, 180, 0.18);
  border-radius: 7px;
  background: rgba(3, 8, 14, 0.74);
  color: #f5f8ff;
  font-size: 0.94rem;
  font-weight: 950;
  line-height: 1;
}

.rank-buy-controls button {
  height: 30px !important;
  min-height: 30px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid rgba(119, 151, 180, 0.18) !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #dce8f7 !important;
  font-weight: 950 !important;
  cursor: pointer !important;
}

.rank-buy-controls button[data-skill-rank-up] {
  grid-template-columns: auto;
  gap: 0;
}

.rank-buy-controls button[data-skill-rank-up] span {
  line-height: 0.8;
}

.rank-buy-controls button[data-skill-rank-up] small {
  display: block;
  margin: -0.08rem 0 0 !important;
  color: #ffb468 !important;
  font-size: 0.54rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

.rank-buy-controls button:hover:not(:disabled) {
  color: #f5f8ff !important;
  border-color: rgba(32, 217, 231, 0.42) !important;
  background: rgba(32, 217, 231, 0.12) !important;
}

.rank-buy-controls button:disabled {
  opacity: 0.42;
  cursor: not-allowed !important;
}

.ability-readout,
.prof-readout {
  color: #dce8f7 !important;
  font-weight: 950 !important;
  text-align: center !important;
}

.prof-readout {
  color: #20d9e7 !important;
}

.skill-row .dice-row {
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 0.16rem !important;
}

.skill-info-button {
  width: 36px !important;
  height: 30px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid rgba(119, 151, 180, 0.18) !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #9fb2ca !important;
  font-size: 0.78rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.03em !important;
  cursor: pointer !important;
}

.skill-info-button:hover,
.skill-info-button:focus-visible {
  color: #f5f8ff !important;
  border-color: rgba(169, 107, 255, 0.42) !important;
  background: rgba(169, 107, 255, 0.12) !important;
}

@media (max-width: 980px) {
  .vx-skill-table {
    overflow-x: auto;
  }

  .vx-skill-head,
  .skill-row {
    min-width: 780px;
  }
}


/* Skill sorting repair */
.skill-sort-button {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.32rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #9fb2ca;
  font: inherit;
  font-size: inherit;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.skill-sort-button small {
  min-width: 2.4rem;
  color: #ffb468;
  font-size: 0.58rem;
  font-weight: 950;
  letter-spacing: 0.04em;
}

.skill-sort-button.active span {
  color: #20d9e7;
}

.skill-sort-button:hover span,
.skill-sort-button:focus-visible span {
  color: #f5f8ff;
}

.vx-skill-head > span {
  min-width: 0;
}

.vx-skill-head > span:nth-child(6) .skill-sort-button {
  justify-content: flex-start;
}

.skill-row .dice-row {
  min-width: 0;
  overflow: visible;
}


/* Inventory gear overflow containment */
.vortex-page[data-vortex-page="inventory"],
.vortex-page[data-vortex-page="inventory"] .vx-panel,
.inventory-columns,
.inventory-columns > div,
.sheet-table[data-repeat-list="weapons"],
.sheet-table[data-repeat-list="equipment"] {
  min-width: 0 !important;
  max-width: 100% !important;
}

.vortex-page[data-vortex-page="inventory"] .vx-panel {
  overflow: hidden !important;
}

.inventory-columns {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 1rem !important;
}

.sheet-table[data-repeat-list="weapons"],
.sheet-table[data-repeat-list="equipment"] {
  position: relative !important;
  display: block !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding-bottom: 0.75rem !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(32, 217, 231, 0.45) rgba(3, 8, 14, 0.62);
}

.sheet-table[data-repeat-list="weapons"]::-webkit-scrollbar,
.sheet-table[data-repeat-list="equipment"]::-webkit-scrollbar {
  height: 10px;
}

.sheet-table[data-repeat-list="weapons"]::-webkit-scrollbar-track,
.sheet-table[data-repeat-list="equipment"]::-webkit-scrollbar-track {
  background: rgba(3, 8, 14, 0.62);
  border-radius: 999px;
}

.sheet-table[data-repeat-list="weapons"]::-webkit-scrollbar-thumb,
.sheet-table[data-repeat-list="equipment"]::-webkit-scrollbar-thumb {
  background: rgba(32, 217, 231, 0.45);
  border-radius: 999px;
}

.sheet-table[data-repeat-list="weapons"] .repeat-head,
.sheet-table[data-repeat-list="weapons"] .repeat-row,
.sheet-table[data-repeat-list="equipment"] .repeat-head,
.sheet-table[data-repeat-list="equipment"] .repeat-row {
  width: max-content !important;
  max-width: none !important;
  min-width: 100% !important;
}

/* Weapons stay a single wide row, but are contained by the local scrollbar. */
.sheet-table[data-repeat-list="weapons"] .repeat-row,
.sheet-table[data-repeat-list="weapons"] .repeat-head {
  grid-template-columns:
    150px
    105px
    68px
    60px
    90px
    94px
    70px
    88px
    68px
    88px
    88px
    180px
    38px !important;
}

/* Gear is also contained, but compacted much harder than before. */
.sheet-table[data-repeat-list="equipment"] .repeat-row,
.sheet-table[data-repeat-list="equipment"] .repeat-head {
  grid-template-columns:
    150px
    72px
    94px
    72px
    90px
    68px
    92px
    92px
    112px
    112px
    180px
    38px !important;
}

.sheet-table[data-repeat-list="weapons"] input,
.sheet-table[data-repeat-list="equipment"] input {
  min-width: 0 !important;
  width: 100% !important;
}

.sheet-table[data-repeat-list="weapons"] .repeat-check,
.sheet-table[data-repeat-list="equipment"] .repeat-check {
  min-width: 0 !important;
  width: 100% !important;
  padding-inline: 0.28rem !important;
  white-space: nowrap !important;
}

.sheet-table[data-repeat-list="weapons"] .repeat-check span,
.sheet-table[data-repeat-list="equipment"] .repeat-check span {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Keep the orange create buttons from contributing to overflow. */
.inventory-columns button[data-add-repeat] {
  max-width: 220px;
}


/* UI stability pass: compact active pool, skills, talents, inventory */
.vortex-page.active {
  min-width: 0 !important;
}

.active-pool-dock {
  width: fit-content !important;
  max-width: calc(100% - 1.1rem) !important;
  min-height: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.85rem !important;
  margin: 0.65rem 0.55rem 0.75rem !important;
  padding: 0.62rem 0.72rem !important;
  position: sticky !important;
  top: 56px !important;
}

.active-pool-dock > * {
  min-width: 0 !important;
}

.active-pool-dock .dice-preview {
  margin-top: 0.15rem !important;
}

.dice-reference {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  align-content: center !important;
  gap: 0.4rem !important;
  max-width: 620px !important;
}

.dice-reference > * {
  flex: 0 0 auto !important;
}

.vortex-sheet-layout {
  gap: 0.75rem !important;
  align-items: start !important;
}

.vx-skill-head,
.skill-row {
  display: grid !important;
  grid-template-columns:
    minmax(220px, 1.45fr)
    74px
    150px
    72px
    66px
    minmax(145px, 0.8fr)
    46px !important;
  gap: 0.58rem !important;
  align-items: center !important;
}

.vx-skill-head {
  min-height: 42px !important;
  padding-block: 0.42rem !important;
  overflow: visible !important;
}

.vx-skill-head > span,
.skill-row > span,
.skill-row > strong,
.skill-row > div,
.skill-row > label,
.skill-row > button {
  min-width: 0 !important;
}

.skill-sort-button {
  width: 100% !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  gap: 0.38rem !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #9fb2ca !important;
  font: inherit !important;
  font-size: inherit !important;
  font-weight: 950 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

.skill-sort-button span {
  display: inline-block !important;
}

.skill-sort-button small {
  position: static !important;
  display: inline-block !important;
  min-width: 2.15rem !important;
  color: #ffb468 !important;
  font-size: 0.58rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  transform: translateY(-0.05rem);
}

.skill-sort-button.active span {
  color: #20d9e7 !important;
}

.skill-sort-button:hover span,
.skill-sort-button:focus-visible span {
  color: #f5f8ff !important;
}

.rank-buy-controls {
  display: grid !important;
  grid-template-columns: 30px 38px 72px !important;
  gap: 0.28rem !important;
  align-items: center !important;
  justify-content: start !important;
}

.rank-buy-controls .rank-number {
  height: 30px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(119, 151, 180, 0.18) !important;
  border-radius: 7px !important;
  background: rgba(3, 8, 14, 0.74) !important;
  color: #f5f8ff !important;
  font-size: 0.94rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

.ability-readout,
.prof-readout {
  text-align: center !important;
  font-weight: 950 !important;
}

.prof-readout {
  color: #20d9e7 !important;
}

.skill-row .dice-row {
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 0.16rem !important;
  min-width: 0 !important;
  overflow: visible !important;
}

.skill-info-button {
  width: 36px !important;
  height: 30px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid rgba(119, 151, 180, 0.18) !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #9fb2ca !important;
  font-size: 0.78rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.03em !important;
  cursor: pointer !important;
}

.skill-info-button:hover,
.skill-info-button:focus-visible {
  color: #f5f8ff !important;
  border-color: rgba(169, 107, 255, 0.42) !important;
  background: rgba(169, 107, 255, 0.12) !important;
}

.talent-pyramid {
  margin-bottom: 1.35rem !important;
  padding-bottom: 0.9rem !important;
  overflow: visible !important;
}

.talent-pyramid-shell {
  margin-bottom: 1.45rem !important;
}

.talent-pyramid-columns {
  padding-bottom: 0.9rem !important;
}

.talent-compendium-button {
  margin-top: 0.85rem !important;
  width: 100% !important;
  min-height: 38px !important;
  border: 1px solid rgba(32, 217, 231, 0.38) !important;
  border-radius: 8px !important;
  background: rgba(32, 217, 231, 0.11) !important;
  color: #20d9e7 !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.talent-compendium-button:hover,
.talent-compendium-button:focus-visible {
  background: rgba(32, 217, 231, 0.18) !important;
  border-color: rgba(32, 217, 231, 0.62) !important;
  color: #f5f8ff !important;
}

.vortex-page[data-vortex-page="talents"] .sheet-table[data-repeat-list="talents"] {
  margin-top: 1.15rem !important;
}

.vortex-page[data-vortex-page="inventory"],
.vortex-page[data-vortex-page="inventory"] .vx-panel,
.inventory-columns,
.inventory-columns > div,
.sheet-table[data-repeat-list="weapons"],
.sheet-table[data-repeat-list="equipment"] {
  min-width: 0 !important;
  max-width: 100% !important;
}

.vortex-page[data-vortex-page="inventory"] .vx-panel {
  overflow: hidden !important;
}

.sheet-table[data-repeat-list="weapons"],
.sheet-table[data-repeat-list="equipment"] {
  display: block !important;
  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding-bottom: 0.75rem !important;
}

.sheet-table[data-repeat-list="weapons"] .repeat-head,
.sheet-table[data-repeat-list="weapons"] .repeat-row,
.sheet-table[data-repeat-list="equipment"] .repeat-head,
.sheet-table[data-repeat-list="equipment"] .repeat-row {
  width: max-content !important;
  min-width: 0 !important;
  max-width: none !important;
}

.sheet-table[data-repeat-list="equipment"] .repeat-row,
.sheet-table[data-repeat-list="equipment"] .repeat-head {
  grid-template-columns:
    132px
    64px
    112px
    64px
    76px
    58px
    84px
    84px
    104px
    104px
    170px
    38px !important;
}

.sheet-table[data-repeat-list="weapons"] .repeat-row,
.sheet-table[data-repeat-list="weapons"] .repeat-head {
  grid-template-columns:
    140px
    100px
    62px
    56px
    82px
    104px
    64px
    76px
    58px
    84px
    84px
    170px
    38px !important;
}

.sheet-table[data-repeat-list="equipment"] input,
.sheet-table[data-repeat-list="weapons"] input {
  width: 100% !important;
  min-width: 0 !important;
}

.repeat-check {
  min-width: 98px !important;
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.34rem !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

.repeat-check .repeat-check-label,
.repeat-check span {
  display: inline-block !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: none !important;
}

.sheet-table[data-repeat-list="equipment"] .repeat-row > button[data-remove-repeat],
.sheet-table[data-repeat-list="weapons"] .repeat-row > button[data-remove-repeat] {
  justify-self: start !important;
}

@media (max-width: 980px) {
  .vx-skill-table {
    overflow-x: auto !important;
  }

  .vx-skill-head,
  .skill-row {
    min-width: 840px !important;
  }

  .active-pool-dock {
    width: calc(100% - 1.1rem) !important;
    display: grid !important;
  }
}


/* UI bugfix pass: requested layout repairs and skill manager */
.active-pool-dock {
  width: min(900px, calc(100% - 1.1rem)) !important;
  max-width: 900px !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(220px, 320px) minmax(260px, 1fr) !important;
  gap: 0.65rem !important;
  align-items: center !important;
  margin: 0.65rem 0.55rem 0.85rem !important;
  padding: 0.62rem 0.75rem !important;
}

.active-pool-dock .eyeline,
.active-pool-dock .vx-help-text {
  margin-block: 0.1rem !important;
}

.active-pool-dock .dice-preview {
  margin-top: 0.18rem !important;
}

.dice-reference {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.35rem !important;
  align-items: center !important;
  align-content: center !important;
  justify-content: flex-start !important;
}

.vortex-sheet-layout {
  gap: 0.75rem !important;
  align-items: start !important;
  margin-top: 0 !important;
}

.vx-skill-head,
.skill-row {
  display: grid !important;
  grid-template-columns:
    minmax(230px, 1.45fr)
    74px
    152px
    74px
    64px
    minmax(150px, 0.85fr)
    46px !important;
  gap: 0.58rem !important;
  align-items: center !important;
}

.vx-skill-head {
  min-height: 42px !important;
  padding-block: 0.42rem !important;
  overflow: visible !important;
}

.vx-skill-head > span,
.skill-row > span,
.skill-row > strong,
.skill-row > div,
.skill-row > label,
.skill-row > button {
  min-width: 0 !important;
}

.skill-sort-button {
  width: auto !important;
  max-width: 100% !important;
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  gap: 0.36rem !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #9fb2ca !important;
  font: inherit !important;
  font-size: inherit !important;
  font-weight: 950 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

.skill-sort-button small {
  position: static !important;
  display: inline-block !important;
  min-width: 2.15rem !important;
  margin: 0 !important;
  color: #ffb468 !important;
  font-size: 0.58rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
  transform: translateY(-0.05rem) !important;
}

.skill-sort-button.active span {
  color: #20d9e7 !important;
}

.rank-buy-controls {
  display: grid !important;
  grid-template-columns: 30px 38px 72px !important;
  gap: 0.28rem !important;
  align-items: center !important;
  justify-content: start !important;
}

.rank-buy-controls .rank-number {
  height: 30px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(119, 151, 180, 0.18) !important;
  border-radius: 7px !important;
  background: rgba(3, 8, 14, 0.74) !important;
  color: #f5f8ff !important;
  font-size: 0.94rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

.skill-row.has-open-manager {
  border-color: rgba(32, 217, 231, 0.38) !important;
  background: rgba(32, 217, 231, 0.055) !important;
}

.skill-info-button.active {
  color: #f5f8ff !important;
  border-color: rgba(169, 107, 255, 0.62) !important;
  background: rgba(169, 107, 255, 0.18) !important;
}

.skill-manager-panel {
  grid-column: 1 / -1;
  margin: -0.25rem 0 0.7rem;
  padding: 0.85rem;
  border: 1px solid rgba(32, 217, 231, 0.28);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(32, 217, 231, 0.09), rgba(169, 107, 255, 0.08)),
    rgba(4, 12, 19, 0.96);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.24);
}

.skill-manager-panel > header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 0.8rem;
}

.skill-manager-panel > header strong {
  display: block;
  color: #f5f8ff;
  font-size: 1rem;
  font-weight: 950;
}

.skill-manager-panel > header span {
  color: #9fb2ca;
  font-size: 0.75rem;
  font-weight: 850;
}

.skill-manager-close {
  min-height: 30px;
  padding: 0.35rem 0.65rem;
  border: 1px solid rgba(119, 151, 180, 0.18);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  color: #cbd7e7;
  font-weight: 900;
  cursor: pointer;
}

.skill-manager-grid {
  display: grid;
  grid-template-columns: minmax(150px, 0.9fr) minmax(170px, 1.05fr) repeat(3, minmax(92px, 0.6fr)) minmax(150px, 1fr);
  gap: 0.65rem;
  align-items: stretch;
}

.skill-manager-grid > div,
.skill-manager-career {
  display: grid !important;
  gap: 0.28rem !important;
  align-content: center;
  padding: 0.58rem 0.62rem;
  border: 1px solid rgba(119, 151, 180, 0.14);
  border-radius: 8px;
  background: rgba(3, 8, 14, 0.62);
}

.skill-manager-grid span,
.skill-manager-career span {
  color: #20d9e7;
  font-size: 0.64rem;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.skill-manager-grid strong {
  color: #f5f8ff;
  font-size: 0.95rem;
  font-weight: 950;
}

.skill-manager-career input {
  width: 20px !important;
  min-height: 20px !important;
}

.skill-manager-dice .dice-row {
  justify-content: flex-start !important;
}

.skill-manager-panel > p {
  margin: 0.75rem 0 0;
  max-width: 70rem;
  color: #9fb2ca;
  font-size: 0.8rem;
  line-height: 1.45;
}

.skill-manager-panel > footer {
  margin-top: 0.75rem;
  display: flex;
  justify-content: flex-end;
}

.skill-manager-panel > footer button {
  min-height: 34px;
  padding: 0.4rem 0.85rem;
  border: 1px solid rgba(32, 217, 231, 0.38);
  border-radius: 7px;
  background: rgba(32, 217, 231, 0.1);
  color: #20d9e7;
  font-weight: 950;
  cursor: pointer;
}

.talent-pyramid {
  margin-bottom: 2rem !important;
  padding-bottom: 1.35rem !important;
  overflow: visible !important;
}

.talent-pyramid-shell {
  margin-bottom: 1.85rem !important;
}

.talent-pyramid-columns {
  padding-bottom: 1.15rem !important;
}

.talent-compendium-button {
  margin-top: 0.9rem !important;
  width: 100% !important;
  min-height: 38px !important;
  border: 1px solid rgba(32, 217, 231, 0.38) !important;
  border-radius: 8px !important;
  background: rgba(32, 217, 231, 0.11) !important;
  color: #20d9e7 !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.vortex-page[data-vortex-page="talents"] .sheet-table[data-repeat-list="talents"] {
  margin-top: 1.75rem !important;
}

.vortex-page[data-vortex-page="inventory"],
.vortex-page[data-vortex-page="inventory"] .vx-panel,
.inventory-columns,
.inventory-columns > div,
.sheet-table[data-repeat-list="weapons"],
.sheet-table[data-repeat-list="equipment"] {
  min-width: 0 !important;
  max-width: 100% !important;
}

.vortex-page[data-vortex-page="inventory"] .vx-panel {
  overflow: hidden !important;
}

.sheet-table[data-repeat-list="weapons"],
.sheet-table[data-repeat-list="equipment"] {
  display: block !important;
  width: fit-content !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding-bottom: 0.75rem !important;
}

.sheet-table[data-repeat-list="weapons"] .repeat-head,
.sheet-table[data-repeat-list="weapons"] .repeat-row,
.sheet-table[data-repeat-list="equipment"] .repeat-head,
.sheet-table[data-repeat-list="equipment"] .repeat-row {
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
}

.sheet-table[data-repeat-list="equipment"] .repeat-row,
.sheet-table[data-repeat-list="equipment"] .repeat-head {
  grid-template-columns:
    132px
    64px
    116px
    64px
    76px
    58px
    84px
    84px
    104px
    104px
    170px
    38px !important;
}

.sheet-table[data-repeat-list="weapons"] .repeat-row,
.sheet-table[data-repeat-list="weapons"] .repeat-head {
  grid-template-columns:
    140px
    100px
    62px
    56px
    82px
    108px
    64px
    76px
    58px
    84px
    84px
    170px
    38px !important;
}

.sheet-table[data-repeat-list="equipment"] input,
.sheet-table[data-repeat-list="weapons"] input {
  width: 100% !important;
  min-width: 0 !important;
}

.repeat-check {
  min-width: 106px !important;
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.34rem !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

.repeat-check .repeat-check-label,
.repeat-check span {
  display: inline-block !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: none !important;
}

.sheet-table[data-repeat-list="equipment"] .repeat-row > button[data-remove-repeat],
.sheet-table[data-repeat-list="weapons"] .repeat-row > button[data-remove-repeat] {
  justify-self: start !important;
}

@media (max-width: 1100px) {
  .active-pool-dock {
    width: calc(100% - 1.1rem) !important;
    max-width: none !important;
    grid-template-columns: 1fr !important;
  }

  .skill-manager-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vx-skill-table {
    overflow-x: auto !important;
  }

  .vx-skill-head,
  .skill-row {
    min-width: 860px !important;
  }
}


/* Active pool pinning and padding cleanup */
.active-pool-dock {
  position: sticky !important;
  box-sizing: border-box !important;
  padding: 0.88rem 1.15rem 0.88rem 2.95rem !important;
  overflow: visible !important;
}

.active-pool-dock > div:first-child {
  position: relative !important;
  min-width: 0 !important;
}

.dice-preview[data-active-dice-pool] {
  position: relative !important;
  min-width: 0 !important;
}

.active-pool-main {
  display: grid !important;
  gap: 0.16rem !important;
  min-width: 0 !important;
}

.active-pool-title-line {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  min-width: 0 !important;
}

.active-pool-title-line > span {
  color: #f5f8ff !important;
  font-size: 0.98rem !important;
  font-weight: 950 !important;
}

.active-pool-title-line > b {
  padding: 0.13rem 0.38rem !important;
  border: 1px solid rgba(32, 217, 231, 0.28) !important;
  border-radius: 999px !important;
  background: rgba(32, 217, 231, 0.11) !important;
  color: #20d9e7 !important;
  font-size: 0.56rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.active-pool-pin {
  position: absolute !important;
  top: -0.16rem !important;
  left: -2.32rem !important;
  width: 28px !important;
  height: 28px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid rgba(119, 151, 180, 0.2) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #9fb2ca !important;
  cursor: pointer !important;
}

.active-pool-pin:hover,
.active-pool-pin:focus-visible {
  color: #f5f8ff !important;
  border-color: rgba(32, 217, 231, 0.45) !important;
  background: rgba(32, 217, 231, 0.12) !important;
}

.active-pool-pin.is-pinned {
  color: #20d9e7 !important;
  border-color: rgba(32, 217, 231, 0.55) !important;
  background: rgba(32, 217, 231, 0.15) !important;
  box-shadow: 0 0 18px rgba(32, 217, 231, 0.12) !important;
}

.active-pool-pin-svg {
  width: 15px !important;
  height: 15px !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.dice-reference {
  box-sizing: border-box !important;
  padding: 0.18rem 0.55rem 0.18rem 0.15rem !important;
  min-width: 0 !important;
}

.dice-ref-group {
  padding-right: 0.3rem !important;
}

.dice-ref-group span:last-child {
  margin-right: 0.2rem !important;
}

.skill-manager-panel > footer button[data-skill-use-active] {
  border-color: rgba(32, 217, 231, 0.44) !important;
  background: rgba(32, 217, 231, 0.12) !important;
  color: #20d9e7 !important;
}

.skill-manager-panel > footer button[data-skill-use-active]:hover,
.skill-manager-panel > footer button[data-skill-use-active]:focus-visible {
  border-color: rgba(32, 217, 231, 0.68) !important;
  background: rgba(32, 217, 231, 0.2) !important;
  color: #f5f8ff !important;
}

@media (max-width: 1100px) {
  .active-pool-dock {
    padding-left: 2.95rem !important;
    padding-right: 1rem !important;
  }

  .active-pool-pin {
    left: -2.32rem !important;
  }
}


/* Active pool containment fix */
.active-pool-dock {
  width: calc(100% - 1.1rem) !important;
  max-width: none !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr) !important;
  gap: 0.85rem !important;
  align-items: center !important;
  padding: 0.9rem 1rem 0.9rem 3rem !important;
  overflow: hidden !important;
}

.active-pool-dock > * {
  min-width: 0 !important;
  max-width: 100% !important;
}

.dice-preview[data-active-dice-pool],
.active-pool-main {
  min-width: 0 !important;
  max-width: 100% !important;
}

.dice-reference {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  align-content: center !important;
  gap: 0.42rem !important;
  padding: 0.2rem 0.35rem 0.2rem 0 !important;
  overflow: hidden !important;
}

.dice-reference > *,
.dice-ref-group {
  flex: 0 1 auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.dice-ref-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.28rem !important;
  white-space: nowrap !important;
}

.dice-ref-group span,
.dice-ref-group strong,
.dice-ref-group b {
  min-width: 0 !important;
  max-width: 100% !important;
}

.active-pool-pin {
  top: 0.05rem !important;
  left: -2.35rem !important;
}

/* On narrower available widths, stack instead of forcing the labels to fight the border. */
@media (max-width: 1280px) {
  .active-pool-dock {
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }

  .dice-reference {
    padding-top: 0.45rem !important;
  }
}


/* Safe compact vitals retry */
.vortex-vitals {
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns:
    minmax(150px, 1fr)
    minmax(150px, 1fr)
    minmax(130px, 0.82fr)
    minmax(168px, 1.05fr) !important;
  gap: 0.62rem !important;
  align-items: stretch !important;
  padding: 0.64rem !important;
  overflow: visible !important;
}

.vortex-vitals .vital-card {
  position: relative !important;
  min-width: 0 !important;
  min-height: 104px !important;
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  gap: 0.42rem !important;
  padding: 0.66rem 0.68rem !important;
  overflow: visible !important;
}

.vortex-vitals .vital-card > header {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 30px !important;
  align-items: start !important;
  gap: 0.48rem !important;
}

.vortex-vitals .vital-card > header > div {
  min-width: 0 !important;
  display: grid !important;
  gap: 0.12rem !important;
  align-content: start !important;
  overflow: hidden !important;
}

.vortex-vitals .vital-card header span {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

.vortex-vitals .vital-card header small {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  line-height: 1.05 !important;
  font-size: 0.48rem !important;
  letter-spacing: 0.07em !important;
}

.vital-soak header small {
  display: none !important;
}

.vital-gear {
  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  justify-self: end !important;
  align-self: start !important;
  z-index: 2 !important;
}

.vital-ratio-display {
  width: 100% !important;
  max-width: 146px !important;
  min-height: 52px !important;
  align-self: center !important;
  justify-self: center !important;
  padding: 0.38rem 0.62rem !important;
}

.vital-ratio-display strong {
  font-size: 1.48rem !important;
  line-height: 1 !important;
}

.vital-ratio-display i {
  font-size: 1.22rem !important;
  line-height: 1 !important;
}

.vital-value-display {
  width: 100% !important;
  max-width: 138px !important;
  min-height: 52px !important;
  align-self: center !important;
  justify-self: center !important;
  padding: 0.38rem 0.62rem !important;
}

.vital-value-display strong {
  font-size: 1.7rem !important;
  line-height: 1 !important;
}

.defense-display {
  width: 100% !important;
  max-width: 150px !important;
  align-self: center !important;
  justify-self: center !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.42rem !important;
}

.defense-display > div {
  min-width: 0 !important;
  min-height: 52px !important;
  padding: 0.36rem 0.38rem !important;
}

.defense-display small {
  font-size: 0.44rem !important;
  letter-spacing: 0.06em !important;
  line-height: 1 !important;
}

.defense-display strong {
  font-size: 1.2rem !important;
  line-height: 1 !important;
}

.vital-popover {
  z-index: 9500 !important;
}

/* Let popovers escape the card/header area. */
.vortex-character-banner,
.vortex-hero,
.vortex-identity,
.vortex-vitals,
.vortex-vitals .vital-card {
  overflow: visible !important;
}

@media (max-width: 1080px) {
  .vortex-vitals {
    max-width: none !important;
    grid-template-columns: repeat(2, minmax(170px, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  .vortex-vitals {
    grid-template-columns: 1fr !important;
  }
}


/* Remove Soak subtitle */
.vital-soak header small {
  display: none !important;
}


/* Mobile stability formatting pass */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
svg,
canvas,
video {
  max-width: 100%;
}

button,
input,
select,
textarea {
  max-width: 100%;
}

.vortex-console,
.app-shell,
.app-shell[data-dashboard],
.vortex-workbench,
.app-shell[data-dashboard] .portal,
.portal,
.vortex-main-grid,
.vortex-center,
.vortex-page,
.vx-panel,
.vortex-character-banner,
.vortex-identity,
.vortex-tags,
.vortex-vitals,
.vortex-sheet-layout,
.vortex-left-stack,
.active-pool-dock,
.vx-skill-table,
.sheet-table,
.inventory-columns,
.inventory-columns > div,
.talent-pyramid,
.talent-pyramid-shell,
.talent-pyramid-columns,
.vortex-library-panel,
.characters,
.character-grid,
.bounty-section,
.dm-rail,
.portal-header {
  min-width: 0 !important;
  max-width: 100%;
}

.vx-skill-table,
.sheet-table,
.talent-pyramid,
.talent-pyramid-columns,
.vortex-library-panel {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(32, 217, 231, 0.48) rgba(3, 8, 14, 0.68);
}

.vx-skill-table::-webkit-scrollbar,
.sheet-table::-webkit-scrollbar,
.talent-pyramid::-webkit-scrollbar,
.talent-pyramid-columns::-webkit-scrollbar,
.vortex-library-panel::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

.vx-skill-table::-webkit-scrollbar-track,
.sheet-table::-webkit-scrollbar-track,
.talent-pyramid::-webkit-scrollbar-track,
.talent-pyramid-columns::-webkit-scrollbar-track,
.vortex-library-panel::-webkit-scrollbar-track {
  background: rgba(3, 8, 14, 0.68);
  border-radius: 999px;
}

.vx-skill-table::-webkit-scrollbar-thumb,
.sheet-table::-webkit-scrollbar-thumb,
.talent-pyramid::-webkit-scrollbar-thumb,
.talent-pyramid-columns::-webkit-scrollbar-thumb,
.vortex-library-panel::-webkit-scrollbar-thumb {
  background: rgba(32, 217, 231, 0.48);
  border-radius: 999px;
}

/* Tablet: preserve the desktop identity, but stop wide panels from pushing the viewport. */
@media (max-width: 1180px) {
  .vortex-character-banner {
    grid-template-columns: 150px minmax(0, 1fr) !important;
    align-items: center !important;
  }

  .vortex-character-banner .vortex-vitals {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .vortex-portrait,
  .vortex-portrait-button {
    width: 138px !important;
    height: 138px !important;
  }

  .vortex-main-grid {
    grid-template-columns: 1fr !important;
  }

  .vortex-library-panel {
    position: static !important;
    max-height: none !important;
    border-left: 0 !important;
    border-top: 1px solid var(--vx-line) !important;
  }

  .vortex-sheet-layout {
    grid-template-columns: minmax(260px, 0.4fr) minmax(0, 1fr) !important;
  }
}

/* Mobile shell: sidebars become compact top rails instead of squeezing the page. */
@media (max-width: 900px) {
  .vortex-console,
  .app-shell,
  .app-shell[data-dashboard] {
    grid-template-columns: 1fr !important;
  }

  .vortex-sidebar,
  .sidebar,
  .app-shell[data-dashboard] .sidebar,
  .app-shell[data-dashboard] .bounty-sidebar {
    position: sticky !important;
    top: 0 !important;
    z-index: 80 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.55rem !important;
    padding: 0.55rem 0.65rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(119, 151, 180, 0.18) !important;
  }

  .vortex-system-mark,
  .bounty-system-mark,
  .portal-system-spacer,
  .vortex-bot-card,
  .bounty-bot-card,
  .bot-help,
  .app-shell[data-dashboard] .bot-help,
  .vortex-quick-links,
  .bounty-quick-links {
    display: none !important;
  }

  .vortex-hub-mark,
  .bounty-hub-mark,
  .hub-logo-link,
  .hub-logo,
  .sidebar-logo {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
  }

  .vortex-hub-mark img,
  .bounty-hub-mark img,
  .hub-logo-link img,
  .hub-logo img,
  .sidebar-logo img {
    width: 46px !important;
    max-width: 46px !important;
    height: auto !important;
  }

  .vortex-side-actions,
  .vortex-matched-actions,
  .bounty-side-actions,
  .portal-switcher,
  .app-shell[data-dashboard] .portal-switcher {
    flex: 0 0 auto !important;
    width: auto !important;
    display: flex !important;
    grid-template-columns: none !important;
    gap: 0.42rem !important;
  }

  .vortex-side-actions a,
  .vortex-side-actions span.disabled,
  .vortex-matched-actions .nav-square,
  .bounty-side-actions a,
  .bounty-side-actions span.disabled,
  .portal-switcher .nav-square,
  .app-shell[data-dashboard] .portal-switcher .nav-square {
    flex: 0 0 auto !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0.35rem !important;
    font-size: 0 !important;
    gap: 0 !important;
  }

  .vortex-side-actions svg,
  .vortex-matched-actions .nav-square svg,
  .bounty-side-actions svg,
  .portal-switcher .nav-square svg {
    width: 19px !important;
    height: 19px !important;
  }

  .vortex-logout,
  .bounty-logout,
  .app-shell[data-dashboard] .bounty-logout {
    flex: 0 0 auto !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 1px solid rgba(119, 151, 180, 0.18) !important;
    border-radius: 8px !important;
    font-size: 0 !important;
  }

  .vortex-workbench,
  .portal,
  .app-shell[data-dashboard] .portal {
    padding: 0.65rem !important;
  }

  .vortex-topbar,
  .portal-header,
  .app-shell[data-dashboard] .portal-header {
    min-height: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.65rem !important;
    padding: 0.55rem 0 !important;
  }

  .vortex-topbar nav {
    max-width: 100% !important;
    display: flex !important;
    gap: 1rem !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .vortex-topbar nav a {
    min-height: 46px !important;
    flex: 0 0 auto !important;
  }

  .vortex-user {
    margin-left: auto !important;
    min-width: 0 !important;
    gap: 0.48rem !important;
  }

  .vortex-user > span {
    min-width: 82px !important;
    padding-inline: 0.48rem !important;
  }

  .vortex-user button {
    min-height: 34px !important;
    padding: 0.42rem 0.7rem !important;
  }

  .vortex-sheet-tabs,
  .library-tabs {
    min-height: 50px !important;
    padding-inline: 0.75rem !important;
    gap: 1rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }

  .vortex-sheet-tabs button,
  .library-tabs button {
    flex: 0 0 auto !important;
    padding-bottom: 0.68rem !important;
  }

  .vortex-character-banner {
    grid-template-columns: 112px minmax(0, 1fr) !important;
    gap: 0.75rem !important;
    min-height: 0 !important;
    padding: 0.8rem !important;
  }

  .vortex-portrait,
  .vortex-portrait-button {
    width: 104px !important;
    height: 104px !important;
  }

  .inline-edit input {
    font-size: clamp(1.7rem, 8vw, 2.4rem) !important;
  }

  .vortex-identity p {
    font-size: 0.92rem !important;
  }

  .vortex-tags {
    gap: 0.42rem !important;
  }

  .vortex-tags label,
  .xp-summary-button {
    min-width: 0 !important;
    flex: 1 1 150px !important;
  }

  .vortex-vitals {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: repeat(2, minmax(160px, 1fr)) !important;
  }

  .active-pool-dock {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0.65rem 0 !important;
    grid-template-columns: 1fr !important;
    padding: 0.78rem 0.8rem 0.78rem 3rem !important;
    overflow: hidden !important;
  }

  .active-pool-pin {
    left: -2.32rem !important;
    top: 0.02rem !important;
  }

  .dice-reference {
    justify-content: flex-start !important;
    overflow: hidden !important;
  }

  .vortex-sheet-layout {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
    padding: 0.75rem 0 !important;
  }

  .vortex-left-stack {
    grid-template-columns: 1fr !important;
  }

  .motivation-grid,
  .identity-grid,
  .notes-layout {
    grid-template-columns: 1fr !important;
  }

  .vx-panel {
    padding: 0.8rem !important;
  }

  .vx-panel-title {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }

  .vortex-sector {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .quick-stats,
  .character-grid,
  .bounty-meta,
  .bounty-fields,
  .signup-roster {
    grid-template-columns: 1fr !important;
  }

  .bounty-card,
  .character-card {
    min-width: 0 !important;
  }
}

/* 2.02 compact records: purpose-built display rows with gear-only editing. */
.sheet-table.repeat-compact-table {
  display: grid;
  gap: 0.58rem;
  overflow: visible;
}

.compact-record {
  --record-accent: var(--vx-cyan);
  --record-accent-rgb: 32, 217, 231;
  position: relative;
  min-width: 0;
  border: 1px solid rgba(var(--record-accent-rgb), 0.32);
  border-radius: 8px;
  background:
    linear-gradient(110deg, rgba(var(--record-accent-rgb), 0.115), transparent 42%),
    rgba(7, 15, 25, 0.94);
  box-shadow: inset 3px 0 0 rgba(var(--record-accent-rgb), 0.82);
  overflow: hidden;
}

.compact-record--weapons,
.compact-record--vehicle-weapons {
  --record-accent: var(--vx-orange);
  --record-accent-rgb: 255, 134, 31;
}

.compact-record--equipment {
  --record-accent: var(--vx-green);
  --record-accent-rgb: 84, 223, 106;
}

.compact-record--body-modifications {
  --record-accent: var(--vx-purple);
  --record-accent-rgb: 169, 107, 255;
}

.compact-record--talents {
  --record-accent: #d28cff;
  --record-accent-rgb: 210, 140, 255;
}

.compact-record--magic-actions {
  --record-accent: var(--vx-cyan);
  --record-accent-rgb: 32, 217, 231;
}

.compact-record--hacking-actions {
  --record-accent: #58f09a;
  --record-accent-rgb: 88, 240, 154;
}

.compact-record-display {
  position: relative;
  min-width: 0;
  padding: 0.72rem 3.25rem 0.72rem 0.82rem;
}

.compact-record-main {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(210px, 0.8fr) minmax(300px, 1.2fr);
  gap: 0.7rem;
  align-items: center;
}

.compact-record-identity {
  min-width: 0;
}

.compact-record-kicker,
.compact-record-text small,
.compact-record-attachments small,
.compact-record-editor > header small {
  display: block;
  color: var(--record-accent);
  font-size: 0.56rem;
  font-weight: 950;
  letter-spacing: 0.065em;
  text-transform: uppercase;
}

.compact-record-identity h3,
.compact-record-editor > header h3 {
  margin: 0.1rem 0;
  color: #fff;
  font-size: 0.98rem;
  line-height: 1.1;
}

.compact-record-identity p {
  margin: 0;
  color: #aebbd0;
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1.25;
}

.compact-record-metrics {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 0.34rem;
}

.compact-record-metrics--action {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.compact-record-metrics--talent {
  grid-template-columns: repeat(4, minmax(84px, 1fr));
}

.compact-record-metric {
  min-width: 0;
  min-height: 44px;
  display: grid;
  align-content: center;
  padding: 0.35rem 0.46rem;
  border: 1px solid rgba(119, 151, 180, 0.14);
  border-radius: 7px;
  background: rgba(2, 8, 14, 0.54);
}

.compact-record-metric small {
  color: #8394aa;
  font-size: 0.51rem;
  font-weight: 950;
  text-transform: uppercase;
}

.compact-record-metric b {
  min-width: 0;
  margin-top: 0.05rem;
  color: #f4f8ff;
  font-size: 0.76rem;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.compact-record-metric.orange b { color: #ffad62; }
.compact-record-metric.purple b { color: #c9a1ff; }
.compact-record-metric.cyan b { color: #76edf4; }
.compact-record-metric.green b { color: #8bf49b; }

.compact-record-details {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.42rem;
  margin-top: 0.52rem;
  padding-top: 0.52rem;
  border-top: 1px solid rgba(119, 151, 180, 0.12);
}

.compact-record-details--action {
  grid-template-columns: minmax(260px, 1.15fr) minmax(220px, 0.85fr) minmax(150px, 0.55fr);
}

.compact-record-details--talent {
  grid-template-columns: minmax(280px, 1.4fr) repeat(auto-fit, minmax(150px, 0.55fr));
}

@media (max-width: 900px) {
  .compact-record-metrics--talent,
  .compact-record-details--talent {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 580px) {
  .compact-record-metrics--talent,
  .compact-record-details--talent {
    grid-template-columns: 1fr;
  }
}

.compact-record-text {
  min-width: 0;
}

.compact-record-text p {
  margin: 0.12rem 0 0;
  color: #d9e3f1;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.34;
  overflow-wrap: anywhere;
}

.compact-record-text.is-primary p {
  color: #f4f7fc;
}

.compact-record-text.is-mechanical {
  padding-left: 0.5rem;
  border-left: 2px solid rgba(var(--record-accent-rgb), 0.46);
}

.compact-record-gear {
  position: absolute;
  top: 0.66rem;
  right: 0.68rem;
  color: var(--record-accent);
  border-color: rgba(var(--record-accent-rgb), 0.38);
}

.compact-record-attachments {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(120px, 0.3fr) minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
  margin-top: 0.52rem;
  padding-top: 0.52rem;
  border-top: 1px solid rgba(119, 151, 180, 0.12);
}

.compact-record-attachments > div span {
  display: block;
  margin-top: 0.1rem;
  color: #9eabc0;
  font-size: 0.64rem;
  font-weight: 800;
}

.compact-record-attachments ul {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.compact-record-attachments li {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.42rem;
  border: 1px solid rgba(var(--record-accent-rgb), 0.24);
  border-radius: 6px;
  background: rgba(var(--record-accent-rgb), 0.07);
  color: #e8eef8;
  font-size: 0.66rem;
}

.compact-record-attachments li span {
  color: #9eabc0;
}

.compact-record-editor {
  min-width: 0;
  margin: 0 0.58rem 0.58rem;
  border-color: rgba(var(--record-accent-rgb), 0.3);
  background: rgba(3, 9, 16, 0.9);
}

.compact-record-editor > header {
  margin-bottom: 0.5rem;
  padding-bottom: 0.42rem;
  border-bottom: 1px solid rgba(119, 151, 180, 0.12);
}

.compact-record-editor .repeat-editor-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.attachment-panel {
  border-color: rgba(var(--record-accent-rgb), 0.22);
}

.attachment-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.45fr) minmax(220px, 1fr) 34px;
  gap: 0.65rem;
  align-items: center;
  padding: 0.55rem 0;
}

.attachment-row-summary,
.attachment-row-detail {
  min-width: 0;
}

.attachment-row-summary {
  display: grid;
  gap: 0.08rem;
}

.attachment-row-summary .attachment-type {
  color: var(--record-accent);
  font-size: 0.54rem;
  text-transform: uppercase;
}

.attachment-row-detail em,
.attachment-row-detail p {
  display: block;
  margin: 0.08rem 0;
  color: #cbd7e8;
  font-size: 0.7rem;
  line-height: 1.3;
}

.attachment-row .attachment-actions {
  justify-self: end;
}

.attachment-edit-grid {
  grid-column: 1 / -1;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  padding: 0.55rem;
  border: 1px solid rgba(var(--record-accent-rgb), 0.2);
  border-radius: 7px;
  background: rgba(2, 8, 14, 0.56);
}

.attachment-remove-button {
  align-self: end;
  min-height: 36px !important;
  border-color: rgba(220, 53, 37, 0.42) !important;
  background: rgba(220, 53, 37, 0.14) !important;
  color: #ffd9d9 !important;
}

/* The drawer reserves real space instead of layering over or compressing sheet regions. */
@media (min-width: 1025px) {
  .vortex-console.library-open {
    --active-drawer-width: clamp(350px, 30vw, 430px);
  }

  .vortex-console.library-open .vortex-workbench {
    min-width: 0;
    margin-right: var(--active-drawer-width);
  }

  .vortex-console.library-open .vortex-character-banner,
  .vortex-console.library-open .vortex-center,
  .vortex-console.library-open .vortex-sheet-tabs,
  .vortex-console.library-open .vortex-page,
  .vortex-console.library-open .active-pool-dock {
    width: auto !important;
    max-width: none !important;
  }

  .vortex-console.library-open .vortex-character-banner {
    grid-template-columns: clamp(104px, 9vw, 150px) minmax(260px, 1fr) minmax(390px, 0.78fr) !important;
    align-items: center !important;
  }

  .vortex-console.library-open .vortex-portrait-wrap {
    align-self: center;
  }

  .vortex-console.library-open .vortex-portrait {
    width: min(100%, 142px) !important;
    height: auto !important;
    aspect-ratio: 1;
  }

  .vortex-console.library-open .vortex-character-banner .vortex-vitals {
    grid-column: auto !important;
    justify-self: end !important;
    width: 100% !important;
    max-width: 680px !important;
    grid-template-columns: repeat(4, minmax(88px, 1fr)) !important;
  }

  .vortex-console.library-open .active-pool-dock {
    position: relative !important;
    top: auto !important;
    z-index: 4 !important;
  }

  .vortex-console.library-open.is-sheet-tab .vortex-page.active .active-pool-dock,
  .vortex-console.library-open.is-sheet-tab:not(.has-pinned-active-pool) .vortex-page.active .active-pool-dock {
    position: static !important;
    top: auto !important;
    z-index: 4 !important;
  }
}

@media (min-width: 1025px) and (max-width: 1560px) {
  .vortex-console.library-open {
    --active-drawer-width: clamp(340px, 32vw, 400px);
  }

  .vortex-console.library-open .vortex-character-banner {
    grid-template-columns: 142px minmax(0, 1fr) !important;
  }

  .vortex-console.library-open .vortex-character-banner .vortex-vitals {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    max-width: none !important;
  }

  .vortex-console.library-open .vx-skill-head {
    display: none !important;
  }

  .vortex-console.library-open .skill-row {
    grid-template-columns: minmax(0, 1fr) auto 38px !important;
    grid-template-areas:
      "name rank manage"
      "career ability prof"
      "dice dice dice" !important;
    gap: 0.38rem 0.5rem !important;
    align-items: center !important;
    margin-top: 0.32rem;
    padding: 0.55rem !important;
    border: 1px solid rgba(119, 151, 180, 0.13) !important;
    border-radius: 7px !important;
    background: rgba(5, 13, 21, 0.62) !important;
  }

  .vortex-console.library-open .skill-row .skill-name { grid-area: name !important; }
  .vortex-console.library-open .skill-row .rank-buy-controls { grid-area: rank !important; justify-self: end !important; }
  .vortex-console.library-open .skill-row .skill-info-button { grid-area: manage !important; justify-self: end !important; }
  .vortex-console.library-open .skill-row .career-dot { grid-area: career !important; }
  .vortex-console.library-open .skill-row .ability-readout { grid-area: ability !important; }
  .vortex-console.library-open .skill-row .prof-readout { grid-area: prof !important; }
  .vortex-console.library-open .skill-row .dice-row {
    grid-area: dice !important;
    justify-self: stretch !important;
    overflow: visible !important;
  }

  .vortex-console.library-open .compact-record-main,
  .vortex-console.library-open .compact-record-details--action {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 900px) {
  .compact-record-main,
  .compact-record-details--action,
  .compact-record-attachments,
  .attachment-row {
    grid-template-columns: 1fr;
  }

  .compact-record-display {
    padding-right: 3.05rem;
  }

  .attachment-row .attachment-actions {
    position: absolute;
    top: 0.55rem;
    right: 0;
  }

  .attachment-row {
    position: relative;
    padding-right: 2.5rem;
  }
}

/* Complex sheet grids use local scrolling on mobile instead of breaking the viewport. */
@media (max-width: 760px) {
  .vx-skill-table {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  .vx-skill-head {
    display: grid !important;
  }

  .vx-skill-head,
  .vortex-console .skill-row {
    min-width: 860px !important;
    display: grid !important;
  }

  .vortex-console .skill-row > .rank-buy-controls {
    display: grid !important;
  }

  .vortex-console .skill-row > .ability-readout,
  .vortex-console .skill-row > .prof-readout {
    display: block !important;
  }

  .vortex-console .skill-row > .dice-row {
    display: flex !important;
  }

  .vortex-console .skill-row > .skill-info-button {
    display: grid !important;
  }

  .skill-manager-panel {
    min-width: 860px !important;
  }

  .skill-manager-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .sheet-table {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  .repeat-head,
  .repeat-row,
  .sheet-table[data-repeat-list="weapons"] .repeat-head,
  .sheet-table[data-repeat-list="weapons"] .repeat-row,
  .sheet-table[data-repeat-list="equipment"] .repeat-head,
  .sheet-table[data-repeat-list="equipment"] .repeat-row,
  .sheet-table[data-repeat-list="talents"] .repeat-head,
  .sheet-table[data-repeat-list="talents"] .repeat-row,
  .sheet-table[data-repeat-list="injuries"] .repeat-head,
  .sheet-table[data-repeat-list="injuries"] .repeat-row {
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
  }

  .inventory-heading {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }

  .inventory-heading button {
    width: 100% !important;
  }

  .talent-pyramid {
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding-bottom: 0.75rem !important;
  }

  .talent-pyramid-shell {
    min-width: 900px !important;
  }

  .vortex-library-panel {
    width: 100% !important;
    max-width: 100% !important;
  }

  .library-tabs {
    width: 100% !important;
  }

  .xp-popover,
  .vital-popover {
    width: min(320px, calc(100vw - 1.5rem)) !important;
    max-width: calc(100vw - 1.5rem) !important;
  }
}

/* Phone width: stack simple cards, keep complex editor tables scrollable. */
@media (max-width: 560px) {
  .vortex-workbench,
  .portal,
  .app-shell[data-dashboard] .portal {
    padding: 0.48rem !important;
  }

  .vortex-topbar nav {
    width: 100% !important;
  }

  .vortex-user {
    width: 100% !important;
    justify-content: space-between !important;
  }

  .vortex-user > span {
    flex: 1 1 auto !important;
  }

  .vortex-character-banner {
    grid-template-columns: 1fr !important;
  }

  .vortex-portrait-wrap,
  .vortex-portrait,
  .vortex-portrait-button {
    justify-self: start !important;
  }

  .vortex-vitals {
    grid-template-columns: 1fr !important;
  }

  .vortex-vitals .vital-card {
    min-height: 96px !important;
  }

  .vital-ratio-display,
  .vital-value-display,
  .defense-display {
    max-width: none !important;
  }

  .active-pool-dock {
    padding-left: 2.8rem !important;
  }

  .active-pool-pin {
    left: -2.16rem !important;
  }

  .dice-ref-group span {
    font-size: 0.68rem !important;
  }

  .vx-panel {
    padding: 0.7rem !important;
  }

  .stat-tile {
    grid-template-columns: minmax(0, 1fr) 30px 52px 30px !important;
  }

  .stat-step,
  .stat-tile [data-stat-bump] {
    width: 28px !important;
    height: 28px !important;
  }

  .xp-popover {
    left: 0 !important;
    right: auto !important;
  }

  .skill-manager-grid {
    grid-template-columns: 1fr !important;
  }

  .portal-header h1,
  .app-shell[data-dashboard] .portal-header h1 {
    font-size: clamp(1.55rem, 9vw, 2.4rem) !important;
  }

  .character-card,
  .bounty-card {
    padding: 0.78rem !important;
  }
}


/* Responsive structural fix pass: cards, stacked talents, catalogue drawer */
@media (max-width: 1024px) {
  html,
  body,
  .vortex-console,
  .vortex-workbench,
  .vortex-center,
  .vortex-main-grid,
  .vortex-page,
  .vx-panel {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .vortex-main-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .sheet-catalogue-button {
    margin-left: auto !important;
    padding: 0 0 0.9rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--vx-cyan) !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  .vortex-sheet-tabs {
    gap: 1rem !important;
    align-items: end !important;
  }

  .vortex-sheet-tabs .sheet-catalogue-button {
    display: inline-flex !important;
    flex: 0 0 auto !important;
  }

  .vortex-console.library-open .vortex-library-panel {
    position: fixed !important;
    inset: 0 !important;
    z-index: 5000 !important;
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-left: 0 !important;
    background:
      radial-gradient(circle at 0 0, rgba(32, 217, 231, 0.12), transparent 18rem),
      radial-gradient(circle at 100% 0, rgba(169, 107, 255, 0.16), transparent 18rem),
      rgba(4, 10, 17, 0.98) !important;
    box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.56) !important;
  }

  .vortex-library-panel[aria-hidden="true"],
  .vortex-console:not(.library-open) .vortex-library-panel {
    display: none !important;
  }

  .vortex-library-panel .library-tabs {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    min-height: 58px !important;
    padding: 0 0.85rem !important;
    gap: 1rem !important;
    background: rgba(4, 10, 17, 0.98) !important;
  }

  .vortex-library-panel section {
    padding: 0.9rem !important;
  }

  .skill-mobile-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.45rem 0 0.75rem !important;
    border-bottom: 1px solid rgba(119, 151, 180, 0.14) !important;
  }

  .skill-mobile-toolbar > span {
    flex: 0 0 100% !important;
    color: var(--vx-cyan) !important;
    font-size: 0.68rem !important;
    font-weight: 950 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }

  .skill-mobile-toolbar .skill-sort-button {
    width: auto !important;
    min-height: 32px !important;
    padding: 0.36rem 0.55rem !important;
    border: 1px solid rgba(119, 151, 180, 0.18) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.035) !important;
  }

  .vx-skill-table {
    display: grid !important;
    gap: 0.62rem !important;
    width: 100% !important;
    overflow: visible !important;
  }

  .vx-skill-head {
    display: none !important;
  }

  .vortex-console .skill-row {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "name manage"
      "dice dice"
      "career rank"
      "ability prof" !important;
    gap: 0.58rem 0.75rem !important;
    align-items: center !important;
    padding: 0.78rem !important;
    border: 1px solid rgba(119, 151, 180, 0.14) !important;
    border-radius: 10px !important;
    background: rgba(3, 12, 20, 0.54) !important;
  }

  .vortex-console .skill-row.psionic {
    background: rgba(32, 217, 231, 0.08) !important;
  }

  .skill-row .skill-name { grid-area: name !important; }
  .skill-row .skill-info-button { grid-area: manage !important; justify-self: end !important; }
  .skill-row .dice-row { grid-area: dice !important; }
  .skill-row .career-dot { grid-area: career !important; }
  .skill-row .rank-buy-controls { grid-area: rank !important; justify-self: end !important; }
  .skill-row .ability-readout { grid-area: ability !important; }
  .skill-row .prof-readout { grid-area: prof !important; justify-self: end !important; }

  .skill-row .career-dot,
  .skill-row .ability-readout,
  .skill-row .prof-readout,
  .skill-row .rank-buy-controls,
  .skill-row .dice-row {
    min-width: 0 !important;
  }

  .skill-row .career-dot,
  .skill-row .ability-readout,
  .skill-row .prof-readout {
    display: flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    color: var(--vx-text) !important;
    text-align: left !important;
  }

  .skill-row .career-dot::before,
  .skill-row .rank-buy-controls::before,
  .skill-row .ability-readout::before,
  .skill-row .prof-readout::before,
  .skill-row .dice-row::before {
    content: attr(data-mobile-label) !important;
    color: var(--vx-muted) !important;
    font-size: 0.64rem !important;
    font-weight: 950 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
  }

  .skill-row .rank-buy-controls {
    display: grid !important;
    grid-template-columns: auto 30px 38px 74px !important;
    gap: 0.3rem !important;
    align-items: center !important;
  }

  .skill-row .dice-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.26rem !important;
    padding-top: 0.1rem !important;
  }

  .skill-info-button {
    width: auto !important;
    min-width: 78px !important;
    height: 32px !important;
    padding: 0.35rem 0.58rem !important;
    font-size: 0.72rem !important;
  }

  .skill-info-button i {
    display: none !important;
  }

  .skill-info-button span {
    display: inline !important;
  }

  .skill-manager-panel {
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .skill-manager-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .talent-pyramid {
    overflow: visible !important;
  }

  .talent-pyramid-shell {
    min-width: 0 !important;
    display: grid !important;
    gap: 0.9rem !important;
  }

  .talent-pyramid-rule {
    max-width: none !important;
  }

  .talent-pyramid-columns {
    display: none !important;
  }

  .talent-mobile-tiers {
    display: grid !important;
    gap: 0.75rem !important;
  }

  .talent-mobile-tier {
    min-width: 0 !important;
    padding: 0.72rem !important;
    border: 1px solid rgba(119, 151, 180, 0.14) !important;
    border-radius: 10px !important;
    background: rgba(3, 12, 20, 0.48) !important;
  }

  .talent-mobile-tier > header {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 0.45rem 0.75rem !important;
    margin-bottom: 0.62rem !important;
    padding-bottom: 0.5rem !important;
    border-bottom: 1px solid rgba(119, 151, 180, 0.14) !important;
  }

  .talent-mobile-tier > header strong {
    color: var(--vx-text) !important;
    font-size: 1rem !important;
    font-weight: 950 !important;
  }

  .talent-mobile-tier > header span {
    color: var(--vx-orange) !important;
    font-weight: 950 !important;
  }

  .talent-mobile-tier > header small {
    margin-left: auto !important;
    color: var(--vx-muted) !important;
    font-size: 0.72rem !important;
    font-weight: 850 !important;
  }

  .talent-mobile-slots {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 0.58rem !important;
  }

  .talent-mobile-slot {
    min-height: 96px !important;
    display: grid !important;
    align-content: start !important;
    gap: 0.25rem !important;
    padding: 0.62rem !important;
    border: 1px dashed rgba(119, 151, 180, 0.16) !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, 0.018) !important;
  }

  .talent-mobile-slot.is-open {
    border-color: rgba(84, 223, 106, 0.4) !important;
    background: rgba(84, 223, 106, 0.06) !important;
  }

  .talent-mobile-slot.is-filled {
    border-style: solid !important;
    border-color: rgba(32, 217, 231, 0.38) !important;
    background: rgba(32, 217, 231, 0.08) !important;
  }

  .talent-mobile-slot strong {
    color: var(--vx-text) !important;
  }

  .talent-mobile-slot p,
  .talent-mobile-slot em {
    color: var(--vx-muted) !important;
    font-size: 0.76rem !important;
    font-style: normal !important;
  }

  .sheet-table[data-repeat-list="weapons"],
  .sheet-table[data-repeat-list="equipment"] {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    gap: 0.75rem !important;
    overflow: visible !important;
  }

  .sheet-table[data-repeat-list="weapons"] .repeat-head,
  .sheet-table[data-repeat-list="equipment"] .repeat-head {
    display: none !important;
  }

  .sheet-table[data-repeat-list="weapons"] .repeat-row,
  .sheet-table[data-repeat-list="equipment"] .repeat-row {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto !important;
    gap: 0.55rem !important;
    align-items: end !important;
    padding: 0.72rem !important;
    border: 1px solid rgba(119, 151, 180, 0.14) !important;
    border-radius: 10px !important;
    background: rgba(3, 12, 20, 0.5) !important;
  }

  .sheet-table[data-repeat-list="weapons"] .repeat-field-name,
  .sheet-table[data-repeat-list="equipment"] .repeat-field-name,
  .sheet-table[data-repeat-list="weapons"] .repeat-field-special,
  .sheet-table[data-repeat-list="equipment"] .repeat-field-notes {
    grid-column: 1 / -2 !important;
  }

  .sheet-table[data-repeat-list="weapons"] .repeat-row > button[data-remove-repeat],
  .sheet-table[data-repeat-list="equipment"] .repeat-row > button[data-remove-repeat] {
    grid-column: -2 / -1 !important;
    grid-row: 1 !important;
    align-self: start !important;
    justify-self: end !important;
  }

  .repeat-field {
    min-width: 0 !important;
    display: grid !important;
    gap: 0.22rem !important;
  }

  .repeat-mobile-label {
    display: block !important;
    color: var(--vx-muted) !important;
    font-size: 0.62rem !important;
    font-weight: 950 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
  }

  .repeat-field input {
    width: 100% !important;
    min-width: 0 !important;
  }

  .repeat-check {
    min-width: 0 !important;
    width: 100% !important;
  }
}

@media (min-width: 1025px) {
  .sheet-catalogue-button,
  .skill-mobile-toolbar,
  .talent-mobile-tiers,
  .repeat-mobile-label,
  .skill-info-button span {
    display: none !important;
  }

  .skill-info-button i {
    display: inline !important;
    font-style: normal !important;
  }
}

@media (max-width: 560px) {
  .skill-manager-grid,
  .talent-mobile-slots,
  .sheet-table[data-repeat-list="weapons"] .repeat-row,
  .sheet-table[data-repeat-list="equipment"] .repeat-row {
    grid-template-columns: 1fr !important;
  }

  .sheet-table[data-repeat-list="weapons"] .repeat-field-name,
  .sheet-table[data-repeat-list="equipment"] .repeat-field-name,
  .sheet-table[data-repeat-list="weapons"] .repeat-field-special,
  .sheet-table[data-repeat-list="equipment"] .repeat-field-notes,
  .sheet-table[data-repeat-list="weapons"] .repeat-row > button[data-remove-repeat],
  .sheet-table[data-repeat-list="equipment"] .repeat-row > button[data-remove-repeat] {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .skill-row .rank-buy-controls {
    justify-self: stretch !important;
    grid-template-columns: auto 30px 38px minmax(72px, 1fr) !important;
  }

  .skill-row .ability-readout,
  .skill-row .prof-readout,
  .skill-row .career-dot {
    justify-self: stretch !important;
  }
}


/* Responsive polish fix after 1024 and 430 QA */
@media (max-width: 1024px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  .vortex-console,
  .vortex-workbench,
  .vortex-center,
  .vortex-page,
  .vx-panel,
  .portal,
  .portal-main,
  .bounty-section,
  .character-grid,
  .bounty-card-grid,
  .bounty-list,
  .bounty-hero,
  .portal-hero,
  .dashboard-hero {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .active-pool-dock {
    margin-bottom: 1.15rem !important;
  }

  .vortex-sheet-layout {
    margin-top: 0.7rem !important;
  }

  /* Make the content library a real overlay at tablet/mobile sizes. */
  .vortex-console.library-open .vortex-library-panel {
    position: fixed !important;
    inset: 0 !important;
    z-index: 60000 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    isolation: isolate !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      radial-gradient(circle at 0 0, rgba(32, 217, 231, 0.11), transparent 18rem),
      radial-gradient(circle at 100% 0, rgba(169, 107, 255, 0.15), transparent 18rem),
      #040a11 !important;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.78) !important;
  }

  .vortex-console.library-open .vortex-library-panel::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: -1 !important;
    background: rgba(0, 0, 0, 0.72) !important;
  }

  .vortex-console.library-open .vortex-library-panel .library-tabs {
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    background: #040a11 !important;
    border-bottom: 1px solid rgba(119, 151, 180, 0.18) !important;
  }

  .vortex-console.library-open .vortex-character-banner,
  .vortex-console.library-open .vortex-vitals,
  .vortex-console.library-open .active-pool-dock,
  .vortex-console.library-open .vital-popover,
  .vortex-console.library-open .xp-popover {
    z-index: auto !important;
  }

  /* Mobile skill cards: fix label/value collisions. */
  .vortex-console .skill-row .ability-readout,
  .vortex-console .skill-row .prof-readout,
  .vortex-console .skill-row .career-dot {
    gap: 0.42rem !important;
  }

  .vortex-console .skill-row .ability-readout::before,
  .vortex-console .skill-row .prof-readout::before,
  .vortex-console .skill-row .career-dot::before,
  .vortex-console .skill-row .rank-buy-controls::before,
  .vortex-console .skill-row .dice-row::before {
    margin-right: 0.42rem !important;
    flex: 0 0 auto !important;
  }

  .vortex-console .skill-row .ability-readout,
  .vortex-console .skill-row .prof-readout {
    display: inline-flex !important;
    align-items: baseline !important;
    white-space: nowrap !important;
    line-height: 1.1 !important;
  }

  .vortex-console .skill-row .prof-readout {
    justify-content: flex-end !important;
  }

  .vortex-console .skill-row .dice-row {
    row-gap: 0.26rem !important;
  }

  .vortex-console .skill-row .skill-name {
    padding-right: 0.4rem !important;
  }

  /* Talent log and injury log should become cards too, not mini tables. */
  .sheet-table[data-repeat-list="talents"],
  .sheet-table[data-repeat-list="injuries"] {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    gap: 0.75rem !important;
    overflow: visible !important;
  }

  .sheet-table[data-repeat-list="talents"] .repeat-head,
  .sheet-table[data-repeat-list="injuries"] .repeat-head {
    display: none !important;
  }

  .sheet-table[data-repeat-list="talents"] .repeat-row,
  .sheet-table[data-repeat-list="injuries"] .repeat-row {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto !important;
    gap: 0.55rem !important;
    align-items: end !important;
    padding: 0.72rem !important;
    border: 1px solid rgba(119, 151, 180, 0.14) !important;
    border-radius: 10px !important;
    background: rgba(3, 12, 20, 0.5) !important;
  }

  .sheet-table[data-repeat-list="talents"] .repeat-field-name,
  .sheet-table[data-repeat-list="talents"] .repeat-field-summary,
  .sheet-table[data-repeat-list="injuries"] .repeat-field-name,
  .sheet-table[data-repeat-list="injuries"] .repeat-field-result,
  .sheet-table[data-repeat-list="injuries"] .repeat-field-notes {
    grid-column: 1 / -2 !important;
  }

  .sheet-table[data-repeat-list="talents"] .repeat-row > button[data-remove-repeat],
  .sheet-table[data-repeat-list="injuries"] .repeat-row > button[data-remove-repeat] {
    grid-column: -2 / -1 !important;
    grid-row: 1 !important;
    align-self: start !important;
    justify-self: end !important;
  }

  .sheet-table[data-repeat-list="talents"] .repeat-mobile-label,
  .sheet-table[data-repeat-list="injuries"] .repeat-mobile-label {
    display: block !important;
  }

  /* Bounty Board tablet/mobile cleanup. */
  .portal-hero,
  .bounty-hero,
  .dashboard-hero,
  .player-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: stretch !important;
    text-align: left !important;
    gap: 1rem !important;
    padding: 1rem !important;
    overflow: hidden !important;
  }

  .portal-hero h1,
  .bounty-hero h1,
  .dashboard-hero h1,
  .player-hero h1 {
    text-align: left !important;
    justify-self: start !important;
  }

  .portal-hero .quick-stats,
  .bounty-hero .quick-stats,
  .dashboard-hero .quick-stats,
  .player-hero .quick-stats,
  .hero-stats,
  .bounty-stats {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.65rem !important;
    justify-items: stretch !important;
  }

  .portal-hero .quick-stats > *,
  .bounty-hero .quick-stats > *,
  .dashboard-hero .quick-stats > *,
  .player-hero .quick-stats > *,
  .hero-stats > *,
  .bounty-stats > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .character-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 0.75rem !important;
  }

  .character-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .bounty-section,
  .portal-panel,
  .dashboard-panel {
    padding: 0.9rem !important;
  }
}

@media (max-width: 620px) {
  /* Let tabs stay readable, then put Browse Catalogue on its own row. */
  .vortex-sheet-tabs {
    display: grid !important;
    grid-template-columns: repeat(5, max-content) !important;
    justify-content: start !important;
    align-items: end !important;
    gap: 0.78rem 0.9rem !important;
    overflow: visible !important;
    white-space: normal !important;
    padding-inline: 0.65rem !important;
  }

  .vortex-sheet-tabs > button:not(.sheet-catalogue-button) {
    min-width: 0 !important;
    padding-bottom: 0.55rem !important;
  }

  .vortex-sheet-tabs .sheet-catalogue-button {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 40px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0.1rem 0 0 !important;
    padding: 0.58rem 0.75rem !important;
    border: 1px solid rgba(32, 217, 231, 0.34) !important;
    border-radius: 8px !important;
    background: rgba(32, 217, 231, 0.09) !important;
    color: var(--vx-cyan) !important;
    text-align: center !important;
    line-height: 1 !important;
  }

  .vortex-sheet-tabs .sheet-catalogue-button:hover,
  .vortex-sheet-tabs .sheet-catalogue-button:focus-visible {
    background: rgba(32, 217, 231, 0.16) !important;
    color: var(--vx-text) !important;
  }

  .vortex-console .skill-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "name manage"
      "dice dice"
      "career career"
      "rank rank"
      "ability prof" !important;
  }

  .vortex-console .skill-row .rank-buy-controls {
    width: 100% !important;
    justify-self: stretch !important;
    grid-template-columns: auto 30px 40px minmax(76px, 1fr) !important;
  }

  .vortex-console .skill-row .ability-readout {
    justify-self: start !important;
  }

  .vortex-console .skill-row .prof-readout {
    justify-self: end !important;
  }

  .sheet-table[data-repeat-list="weapons"] .repeat-row,
  .sheet-table[data-repeat-list="equipment"] .repeat-row,
  .sheet-table[data-repeat-list="talents"] .repeat-row,
  .sheet-table[data-repeat-list="injuries"] .repeat-row {
    grid-template-columns: 1fr !important;
  }

  .sheet-table[data-repeat-list="weapons"] .repeat-field-name,
  .sheet-table[data-repeat-list="equipment"] .repeat-field-name,
  .sheet-table[data-repeat-list="weapons"] .repeat-field-special,
  .sheet-table[data-repeat-list="equipment"] .repeat-field-notes,
  .sheet-table[data-repeat-list="talents"] .repeat-field-name,
  .sheet-table[data-repeat-list="talents"] .repeat-field-summary,
  .sheet-table[data-repeat-list="injuries"] .repeat-field-name,
  .sheet-table[data-repeat-list="injuries"] .repeat-field-result,
  .sheet-table[data-repeat-list="injuries"] .repeat-field-notes,
  .sheet-table[data-repeat-list="weapons"] .repeat-row > button[data-remove-repeat],
  .sheet-table[data-repeat-list="equipment"] .repeat-row > button[data-remove-repeat],
  .sheet-table[data-repeat-list="talents"] .repeat-row > button[data-remove-repeat],
  .sheet-table[data-repeat-list="injuries"] .repeat-row > button[data-remove-repeat] {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .sheet-table[data-repeat-list="weapons"] .repeat-row > button[data-remove-repeat],
  .sheet-table[data-repeat-list="equipment"] .repeat-row > button[data-remove-repeat],
  .sheet-table[data-repeat-list="talents"] .repeat-row > button[data-remove-repeat],
  .sheet-table[data-repeat-list="injuries"] .repeat-row > button[data-remove-repeat] {
    justify-self: end !important;
  }

  .portal-hero .quick-stats,
  .bounty-hero .quick-stats,
  .dashboard-hero .quick-stats,
  .player-hero .quick-stats,
  .hero-stats,
  .bounty-stats {
    grid-template-columns: 1fr !important;
  }

  .character-grid {
    grid-template-columns: 1fr !important;
  }

  .character-card {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 0.75rem !important;
    align-items: center !important;
  }

  .character-card img,
  .character-card .portrait,
  .character-card .character-avatar {
    width: 64px !important;
    height: 64px !important;
    object-fit: cover !important;
  }
}

@media (max-width: 430px) {
  .vortex-sheet-tabs {
    gap: 0.72rem 0.7rem !important;
  }

  .vortex-sheet-tabs > button:not(.sheet-catalogue-button) {
    font-size: 0.76rem !important;
  }

  .vortex-console .skill-row {
    padding: 0.68rem !important;
  }

  .skill-mobile-toolbar {
    gap: 0.42rem !important;
  }

  .skill-mobile-toolbar .skill-sort-button {
    padding: 0.34rem 0.5rem !important;
  }

  .skill-mobile-toolbar .skill-sort-button small {
    min-width: auto !important;
  }

  .vortex-console .skill-row .ability-readout::before,
  .vortex-console .skill-row .prof-readout::before {
    margin-right: 0.34rem !important;
  }
}


/* Catalogue modal isolation fix */
html.library-modal-open,
body.library-modal-open {
  overflow: auto !important;
  overscroll-behavior: auto !important;
}

@media (max-width: 1024px) {
  .vortex-console.library-open {
    isolation: isolate !important;
  }

  .vortex-console.library-open .vortex-character-banner,
  .vortex-console.library-open .vortex-center,
  .vortex-console.library-open .vortex-sheet-tabs,
  .vortex-console.library-open .vortex-page,
  .vortex-console.library-open .active-pool-dock,
  .vortex-console.library-open .xp-popover,
  .vortex-console.library-open .xp-popover-wrap,
  .vortex-console.library-open .vital-popover,
  .vortex-console.library-open .vital-gear {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .vortex-console.library-open .vortex-main-grid,
  .vortex-console.library-open .vortex-library-panel,
  .vortex-console.library-open .vortex-library-panel * {
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .vortex-console.library-open .vortex-library-panel {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    display: block !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      radial-gradient(circle at 0 0, rgba(32, 217, 231, 0.10), transparent 18rem),
      radial-gradient(circle at 100% 0, rgba(169, 107, 255, 0.14), transparent 18rem),
      #040a11 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
    contain: paint !important;
  }

  .vortex-console.library-open .vortex-library-panel::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: -1 !important;
    background: #040a11 !important;
  }

  .vortex-console:not(.library-open) .vortex-library-panel,
  .vortex-library-panel[aria-hidden="true"] {
    display: none !important;
  }

  .vortex-console.library-open .vortex-library-panel .library-tabs {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    min-height: 62px !important;
    display: flex !important;
    align-items: end !important;
    gap: 1rem !important;
    padding: 0.75rem 0.9rem 0 !important;
    border-bottom: 1px solid rgba(119, 151, 180, 0.18) !important;
    background:
      linear-gradient(180deg, #040a11 0%, #040a11 82%, rgba(4, 10, 17, 0.94) 100%) !important;
  }

  .vortex-console.library-open .vortex-library-panel .library-tabs button {
    flex: 0 0 auto !important;
    min-height: 44px !important;
    padding: 0 0 0.8rem !important;
    white-space: nowrap !important;
  }

  .vortex-console.library-open .vortex-library-panel .library-tabs [data-close-library] {
    margin-left: auto !important;
    padding: 0.45rem 0.7rem 0.65rem !important;
    border: 1px solid rgba(119, 151, 180, 0.18) !important;
    border-radius: 8px 8px 0 0 !important;
    background: rgba(255, 255, 255, 0.035) !important;
  }

  .vortex-console.library-open .vortex-library-panel [data-library-view] {
    position: relative !important;
    z-index: 1 !important;
    padding: 0.75rem 0.85rem 1.25rem !important;
    background: #040a11 !important;
  }

  .vortex-console.library-open .vortex-library-panel section {
    padding: 0.75rem 0 !important;
    background: transparent !important;
  }

  .vortex-console.library-open .vortex-library-panel .library-mode {
    margin: 0.1rem 0 0.65rem !important;
    padding: 0.58rem 0.75rem !important;
    border: 1px solid rgba(32, 217, 231, 0.34) !important;
    border-radius: 8px !important;
    background: rgba(32, 217, 231, 0.08) !important;
    color: var(--vx-cyan) !important;
    font-size: 0.72rem !important;
    font-weight: 950 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
  }

  .vortex-console.library-open .vortex-library-panel .content-card,
  .vortex-console.library-open .vortex-library-panel .library-search,
  .vortex-console.library-open .vortex-library-panel .library-heading {
    position: relative !important;
    z-index: 1 !important;
  }
}

/* Phone catalogue button placement */
@media (max-width: 620px) {
  .vortex-console .vortex-sheet-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: end !important;
    justify-content: flex-start !important;
    gap: 0.72rem 0.8rem !important;
    overflow: visible !important;
    white-space: normal !important;
    padding: 0.55rem 0.65rem 0.65rem !important;
  }

  .vortex-console .vortex-sheet-tabs > button:not(.sheet-catalogue-button) {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: max-content !important;
    padding: 0 0 0.5rem !important;
    white-space: nowrap !important;
  }

  .vortex-console .vortex-sheet-tabs .sheet-catalogue-button {
    order: 20 !important;
    flex: 1 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 40px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0.1rem 0 0 !important;
    padding: 0.6rem 0.75rem !important;
    border: 1px solid rgba(32, 217, 231, 0.36) !important;
    border-radius: 8px !important;
    background: rgba(32, 217, 231, 0.09) !important;
    color: var(--vx-cyan) !important;
    font-size: 0.78rem !important;
    font-weight: 950 !important;
    letter-spacing: 0.05em !important;
    text-align: center !important;
    text-transform: uppercase !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }

  .vortex-console .vortex-sheet-tabs .sheet-catalogue-button:hover,
  .vortex-console .vortex-sheet-tabs .sheet-catalogue-button:focus-visible {
    background: rgba(32, 217, 231, 0.16) !important;
    color: var(--vx-text) !important;
  }
}

@media (max-width: 430px) {
  .vortex-console.library-open .vortex-library-panel .library-tabs {
    gap: 0.7rem !important;
    padding-inline: 0.75rem !important;
  }

  .vortex-console.library-open .vortex-library-panel .library-tabs button {
    font-size: 0.74rem !important;
  }

  .vortex-console.library-open .vortex-library-panel [data-library-view] {
    padding-inline: 0.65rem !important;
  }
}


/* Sticky desktop sidebar pass */
@media (min-width: 901px) {
  .vortex-console,
  .app-shell,
  .app-shell[data-dashboard] {
    align-items: start !important;
  }

  .vortex-sidebar,
  .sidebar,
  .bounty-sidebar,
  .app-shell[data-dashboard] .sidebar,
  .app-shell[data-dashboard] .bounty-sidebar {
    position: sticky !important;
    top: 0 !important;
    align-self: start !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    z-index: 60 !important;
  }

  .vortex-sidebar,
  .bounty-sidebar,
  .app-shell[data-dashboard] .bounty-sidebar {
    display: flex !important;
    flex-direction: column !important;
  }

  .vortex-sidebar .vortex-bot-card,
  .vortex-sidebar .vortex-logout,
  .bounty-sidebar .bounty-bot-card,
  .bounty-sidebar .bounty-logout,
  .sidebar .bot-help,
  .sidebar .logout,
  .app-shell[data-dashboard] .bot-help,
  .app-shell[data-dashboard] .bounty-bot-card,
  .app-shell[data-dashboard] .bounty-logout {
    flex: 0 0 auto !important;
  }

  .vortex-sidebar .vortex-bot-card,
  .bounty-sidebar .bounty-bot-card,
  .sidebar .bot-help,
  .app-shell[data-dashboard] .bot-help,
  .app-shell[data-dashboard] .bounty-bot-card {
    margin-top: auto !important;
  }

  .vortex-sidebar > *,
  .bounty-sidebar > *,
  .sidebar > * {
    min-width: 0 !important;
  }

  .vortex-workbench,
  .portal,
  .app-shell[data-dashboard] .portal {
    min-width: 0 !important;
  }
}

/* Preserve the compact mobile rail. */
@media (max-width: 900px) {
  .vortex-sidebar,
  .sidebar,
  .bounty-sidebar,
  .app-shell[data-dashboard] .sidebar,
  .app-shell[data-dashboard] .bounty-sidebar {
    position: sticky !important;
    top: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    z-index: 80 !important;
  }
}


/* Fixed desktop sidebar rails pass */
@media (min-width: 901px) {
  .vortex-console,
  .app-shell[data-dashboard] {
    --fixed-sidebar-width: var(--shared-sidebar-width, 180px);
    display: grid !important;
    grid-template-columns: var(--fixed-sidebar-width) minmax(0, 1fr) !important;
    align-items: start !important;
  }

  .vortex-console > .vortex-sidebar,
  .app-shell[data-dashboard] > .sidebar,
  .app-shell[data-dashboard] > .bounty-sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: var(--fixed-sidebar-width) !important;
    min-width: var(--fixed-sidebar-width) !important;
    max-width: var(--fixed-sidebar-width) !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    z-index: 1000 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .vortex-console > .vortex-workbench,
  .app-shell[data-dashboard] > .portal,
  .app-shell[data-dashboard] main.portal {
    grid-column: 2 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .vortex-console > .vortex-sidebar .vortex-bot-card,
  .app-shell[data-dashboard] > .sidebar .bot-help,
  .app-shell[data-dashboard] > .bounty-sidebar .bounty-bot-card,
  .app-shell[data-dashboard] > .bounty-sidebar .bot-help {
    margin-top: auto !important;
  }

  .vortex-console > .vortex-sidebar .vortex-logout,
  .app-shell[data-dashboard] > .sidebar .logout,
  .app-shell[data-dashboard] > .bounty-sidebar .bounty-logout {
    flex: 0 0 auto !important;
  }
}

/* Keep tablet and phone rails as top navigation, not fixed sidebars. */
@media (max-width: 900px) {
  .vortex-console,
  .app-shell[data-dashboard] {
    grid-template-columns: 1fr !important;
  }

  .vortex-console > .vortex-sidebar,
  .app-shell[data-dashboard] > .sidebar,
  .app-shell[data-dashboard] > .bounty-sidebar {
    position: sticky !important;
    inset: auto !important;
    top: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    display: flex !important;
    flex-direction: row !important;
    z-index: 80 !important;
  }

  .vortex-console > .vortex-workbench,
  .app-shell[data-dashboard] > .portal,
  .app-shell[data-dashboard] main.portal {
    grid-column: auto !important;
    width: 100% !important;
  }
}


/* Content pack compendium support */
.content-card-titleline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.42rem;
}

.content-card-record-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 1.7rem;
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid rgba(32, 217, 231, 0.28);
  border-radius: 4px;
  background: rgba(32, 217, 231, 0.08);
  color: var(--vx-cyan) !important;
}

.content-card-record-icon .content-record-svg {
  width: 1.05rem;
  height: 1.05rem;
}

.content-source-badge {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  padding: 0.16rem 0.42rem;
  border: 1px solid rgba(32, 217, 231, 0.26);
  border-radius: 999px;
  background: rgba(32, 217, 231, 0.09);
  color: var(--vx-cyan) !important;
  font-size: 0.62rem !important;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.content-source-file {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  opacity: 0.78;
}

.vortex-console .content-card.from-pack {
  border-color: rgba(32, 217, 231, 0.22);
  background:
    linear-gradient(135deg, rgba(32, 217, 231, 0.05), rgba(169, 107, 255, 0.04)),
    rgba(10, 18, 28, 0.68);
}

.vortex-console [data-library-section="content_packs"] .content-card {
  border-color: rgba(255, 143, 31, 0.24);
}

.vortex-console [data-library-section="content_packs"] .content-source-badge {
  border-color: rgba(255, 143, 31, 0.32);
  background: rgba(255, 143, 31, 0.11);
  color: var(--vx-orange) !important;
}

.vortex-console .content-card.locked {
  opacity: 0.72;
}

.vortex-console .content-card.locked button {
  border-color: rgba(148, 163, 184, 0.32);
  background: rgba(15, 23, 42, 0.72);
}

.species-features-panel {
  align-self: start;
}

.species-feature-card {
  display: grid;
  gap: 0.5rem;
  padding: 0.72rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(8, 18, 24, 0.62);
}

.species-feature-card + .species-feature-card {
  margin-top: 0.6rem;
}

.species-feature-card div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.species-feature-card strong {
  color: #f8fafc;
}

.species-feature-card span,
.species-feature-card p {
  color: rgba(226, 232, 240, 0.74);
}

.species-feature-card p {
  margin: 0;
  line-height: 1.45;
}

.species-feature-card.is-used {
  border-color: rgba(249, 115, 22, 0.42);
  background: rgba(67, 32, 16, 0.34);
}

.species-feature-use,
.species-fixed-grants {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(226, 232, 240, 0.82);
}

.species-fixed-grants {
  flex-wrap: wrap;
  margin: 0.7rem 0;
}

.species-fixed-grants span {
  border: 1px solid rgba(34, 211, 238, 0.32);
  border-radius: 999px;
  padding: 0.36rem 0.6rem;
  color: #67e8f9;
  background: rgba(8, 145, 178, 0.12);
}

.species-reset-button {
  margin-top: 0.7rem;
}

.setback-removal-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
  margin-left: 0.25rem;
  border: 1px solid rgba(248, 113, 113, 0.86);
  border-radius: 4px;
  background: #030712;
  color: #fecaca;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
}

.setback-removal-icon::after {
  content: "";
  position: absolute;
  width: 145%;
  height: 2px;
  border-radius: 999px;
  background: #ef4444;
  transform: rotate(-38deg);
}

.setback-removal-icon b {
  position: relative;
  z-index: 1;
}


/* Career creation automation UI */
.career-creation-panel {
  margin-bottom: 1rem;
}

.career-creation-panel .vx-panel-title strong {
  color: var(--vx-orange);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.creation-mode-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
  justify-content: space-between;
  margin: 0.75rem 0;
  padding: 0.7rem;
  border: 1px solid rgba(119, 151, 180, 0.14);
  border-radius: 10px;
  background: rgba(3, 12, 20, 0.48);
}

.creation-mode-row label {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  color: var(--vx-text);
  font-weight: 900;
}

.creation-mode-row button,
.career-free-rank {
  border: 1px solid rgba(32, 217, 231, 0.28);
  border-radius: 9px;
  background: rgba(32, 217, 231, 0.08);
  color: var(--vx-cyan);
  font-weight: 950;
  cursor: pointer;
}

.creation-mode-row button {
  min-height: 36px;
  padding: 0.45rem 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.career-builder-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.38fr);
  gap: 0.75rem;
  margin-bottom: 0.8rem;
}

.career-builder-summary > div {
  padding: 0.75rem;
  border: 1px solid rgba(119, 151, 180, 0.14);
  border-radius: 10px;
  background: rgba(3, 12, 20, 0.52);
}

.career-builder-summary strong {
  display: block;
  color: var(--vx-text);
  font-size: 1rem;
}

.career-builder-summary span {
  color: var(--vx-muted);
  font-size: 0.8rem;
}

.career-free-rank-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.65rem;
  margin-bottom: 0.8rem;
}

.career-free-rank {
  min-height: 92px;
  display: grid;
  gap: 0.16rem;
  align-content: start;
  padding: 0.7rem;
  text-align: left;
}

.career-free-rank span {
  color: var(--vx-text);
  font-weight: 950;
}

.career-free-rank small,
.career-free-rank em {
  color: var(--vx-muted);
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 850;
}

.career-free-rank b {
  width: fit-content;
  margin-top: 0.2rem;
  padding: 0.16rem 0.44rem;
  border-radius: 999px;
  background: rgba(255, 143, 31, 0.12);
  color: var(--vx-orange);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.career-free-rank.selected {
  border-color: rgba(84, 223, 106, 0.48);
  background: rgba(84, 223, 106, 0.08);
}

.career-free-rank.selected b {
  background: rgba(84, 223, 106, 0.14);
  color: #54df6a;
}

.creation-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.55rem;
}

.creation-checklist article {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 0.1rem 0.5rem;
  align-items: center;
  padding: 0.55rem;
  border: 1px solid rgba(119, 151, 180, 0.12);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.025);
}

.creation-checklist b {
  grid-row: 1 / span 2;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 143, 31, 0.12);
  color: var(--vx-orange);
  font-size: 0.78rem;
}

.creation-checklist article.complete b {
  background: rgba(84, 223, 106, 0.12);
  color: #54df6a;
}

.creation-checklist span {
  color: var(--vx-text);
  font-weight: 950;
}

.creation-checklist em {
  color: var(--vx-muted);
  font-size: 0.72rem;
  font-style: normal;
}

@media (max-width: 760px) {
  .career-builder-summary {
    grid-template-columns: 1fr;
  }

  .creation-mode-row {
    align-items: stretch;
  }

  .creation-mode-row button {
    width: 100%;
  }
}


/* Notes currency wallet and builder cleanup */
.notes-wallet-panel {
  position: relative;
  margin: 0.85rem 0 1rem;
  max-width: 440px;
  z-index: 15;
}

.notes-wallet-panel.inventory-trackers-panel {
  max-width: 920px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.75rem;
}

.notes-wallet-card {
  position: relative;
}

.encumbrance-wallet-card.is-over .notes-wallet-main {
  border-color: rgba(255, 99, 99, 0.55);
  background:
    linear-gradient(135deg, rgba(255, 99, 99, 0.12), rgba(169, 107, 255, 0.06)),
    rgba(3, 12, 20, 0.72);
}

.notes-wallet-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 34px;
  gap: 0.75rem;
  align-items: center;
  padding: 0.72rem 0.78rem;
  border: 1px solid rgba(32, 217, 231, 0.22);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(32, 217, 231, 0.08), rgba(169, 107, 255, 0.06)),
    rgba(3, 12, 20, 0.72);
}

.notes-wallet-main strong {
  display: block;
  color: var(--vx-text);
  font-size: 1rem;
  font-weight: 950;
}

.notes-wallet-value {
  display: grid;
  justify-items: end;
  line-height: 1;
}

.notes-wallet-value b {
  color: var(--vx-orange);
  font-size: 1.42rem;
  font-weight: 950;
}

.notes-wallet-value span {
  color: var(--vx-muted);
  font-size: 0.62rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.notes-wallet-gear {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(119, 151, 180, 0.2);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--vx-muted);
  cursor: pointer;
}

.notes-wallet-gear:hover,
.notes-wallet-gear:focus-visible {
  color: var(--vx-text);
  border-color: rgba(32, 217, 231, 0.44);
  background: rgba(32, 217, 231, 0.12);
}

.notes-wallet-gear-svg {
  width: 17px;
  height: 17px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notes-wallet-popover {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  width: min(360px, calc(100vw - 2rem));
  display: none;
  gap: 0.65rem;
  padding: 0.78rem;
  border: 1px solid rgba(32, 217, 231, 0.32);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(32, 217, 231, 0.08), rgba(169, 107, 255, 0.08)),
    #06111b;
  box-shadow: 0 24px 52px rgba(0, 0, 0, 0.42);
  z-index: 9500;
}

.notes-wallet-popover input[readonly] {
  opacity: 0.82;
  cursor: default;
}

.notes-wallet-popover.open {
  display: grid;
}

.notes-wallet-popover header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.notes-wallet-popover header strong {
  color: var(--vx-text);
  font-size: 1rem;
}

.notes-wallet-popover header button {
  min-height: 30px;
  padding: 0.35rem 0.6rem;
  border: 1px solid rgba(119, 151, 180, 0.18);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--vx-muted);
  font-weight: 900;
  cursor: pointer;
}

.notes-wallet-popover label {
  display: grid;
  gap: 0.25rem;
}

.notes-wallet-popover label span {
  color: var(--vx-cyan);
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.notes-wallet-popover input {
  width: 100%;
  min-height: 38px;
}

.notes-wallet-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.notes-wallet-actions button {
  min-height: 38px;
  border: 1px solid rgba(255, 143, 31, 0.26);
  border-radius: 8px;
  background: rgba(255, 143, 31, 0.12);
  color: var(--vx-orange);
  font-weight: 950;
  cursor: pointer;
}

.notes-wallet-actions button:hover,
.notes-wallet-actions button:focus-visible {
  background: rgba(255, 143, 31, 0.2);
  color: var(--vx-text);
}

.career-creation-panel .vx-panel-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: start;
}

.creation-mode-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 0.8rem !important;
  padding: 0.72rem 0.8rem !important;
}

.creation-mode-row label {
  justify-self: start !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  max-width: 320px !important;
  line-height: 1.18 !important;
}

.creation-mode-row label input {
  flex: 0 0 auto !important;
}

.creation-mode-row label span {
  color: var(--vx-text) !important;
  font-size: 0.88rem !important;
  font-weight: 950 !important;
}

.career-builder-summary {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.36fr) !important;
}

.career-skills-empty,
.career-free-rank-grid > .empty {
  margin: 0 !important;
  padding: 0.85rem !important;
  border: 1px dashed rgba(119, 151, 180, 0.18) !important;
  border-radius: 10px !important;
  background: rgba(3, 12, 20, 0.42) !important;
  color: var(--vx-muted) !important;
  font-size: 0.85rem !important;
}

.creation-checklist {
  margin-top: 0.9rem !important;
}

@media (max-width: 760px) {
  .notes-wallet-panel {
    max-width: none;
  }

  .creation-mode-row,
  .career-creation-panel .vx-panel-title,
  .career-builder-summary {
    grid-template-columns: 1fr !important;
  }

  .creation-mode-row button {
    width: 100% !important;
  }

  .notes-wallet-actions {
    grid-template-columns: 1fr;
  }
}


/* Builder panel cleanup and reliable Notes wallet */
.career-creation-panel {
  margin-bottom: 1rem;
}

.career-builder-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: start;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(119, 151, 180, 0.16);
}

.career-builder-header h2 {
  margin: 0;
  color: var(--vx-text);
  font-size: 1rem;
  font-weight: 950;
  text-transform: uppercase;
}

.career-builder-header span {
  display: block;
  margin-top: 0.35rem;
  color: var(--vx-cyan);
  font-size: 0.65rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.career-builder-header > strong {
  color: var(--vx-orange);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.creation-mode-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 0.8rem !important;
  margin: 0.85rem 0 !important;
  padding: 0.72rem 0.8rem !important;
  border: 1px solid rgba(119, 151, 180, 0.14) !important;
  border-radius: 10px !important;
  background: rgba(3, 12, 20, 0.48) !important;
}

.creation-limit-toggle {
  justify-self: start !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  min-width: 0 !important;
  max-width: none !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.creation-limit-toggle input {
  flex: 0 0 auto !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
}

.creation-limit-toggle span {
  display: inline !important;
  color: var(--vx-text) !important;
  font-size: 0.88rem !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

.creation-mode-row button {
  min-height: 38px !important;
  padding: 0.45rem 0.85rem !important;
  border: 1px solid rgba(32, 217, 231, 0.32) !important;
  border-radius: 9px !important;
  background: rgba(32, 217, 231, 0.08) !important;
  color: var(--vx-cyan) !important;
  font-weight: 950 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

.career-builder-summary {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.36fr) !important;
  gap: 0.75rem !important;
  margin-bottom: 0.8rem !important;
}

.career-builder-summary > div {
  padding: 0.75rem !important;
  border: 1px solid rgba(119, 151, 180, 0.14) !important;
  border-radius: 10px !important;
  background: rgba(3, 12, 20, 0.52) !important;
}

.career-builder-summary strong {
  display: block !important;
  color: var(--vx-text) !important;
  font-size: 1rem !important;
  font-weight: 950 !important;
}

.career-builder-summary span {
  color: var(--vx-muted) !important;
  font-size: 0.8rem !important;
}

.career-free-rank-grid.empty {
  display: block !important;
}

.career-empty-state {
  padding: 0.9rem !important;
  border: 1px dashed rgba(119, 151, 180, 0.18) !important;
  border-radius: 10px !important;
  background: rgba(3, 12, 20, 0.42) !important;
}

.career-empty-state strong {
  display: block !important;
  color: var(--vx-text) !important;
  font-size: 0.95rem !important;
  margin-bottom: 0.25rem !important;
}

.career-empty-state p {
  margin: 0 !important;
  max-width: 70rem !important;
  color: var(--vx-muted) !important;
  font-size: 0.85rem !important;
  line-height: 1.4 !important;
}

.creation-checklist {
  display: none !important;
}

/* Notes wallet */
.notes-wallet-panel {
  position: relative;
  margin: 0.85rem 0 1rem;
  max-width: 440px;
  z-index: 15;
}

.notes-wallet-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 34px;
  gap: 0.75rem;
  align-items: center;
  padding: 0.72rem 0.78rem;
  border: 1px solid rgba(32, 217, 231, 0.22);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(32, 217, 231, 0.08), rgba(169, 107, 255, 0.06)),
    rgba(3, 12, 20, 0.72);
}

.notes-wallet-main strong {
  display: block;
  color: var(--vx-text);
  font-size: 1rem;
  font-weight: 950;
}

.notes-wallet-value {
  display: grid;
  justify-items: end;
  line-height: 1;
}

.notes-wallet-value b {
  color: var(--vx-orange);
  font-size: 1.42rem;
  font-weight: 950;
}

.notes-wallet-value span {
  color: var(--vx-muted);
  font-size: 0.62rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.notes-wallet-gear {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(119, 151, 180, 0.2);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--vx-muted);
  cursor: pointer;
}

.notes-wallet-gear:hover,
.notes-wallet-gear:focus-visible {
  color: var(--vx-text);
  border-color: rgba(32, 217, 231, 0.44);
  background: rgba(32, 217, 231, 0.12);
}

.notes-wallet-gear-svg {
  width: 17px;
  height: 17px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notes-wallet-popover {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  width: min(360px, calc(100vw - 2rem));
  display: none;
  gap: 0.65rem;
  padding: 0.78rem;
  border: 1px solid rgba(32, 217, 231, 0.32);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(32, 217, 231, 0.08), rgba(169, 107, 255, 0.08)),
    #06111b;
  box-shadow: 0 24px 52px rgba(0, 0, 0, 0.42);
  z-index: 9500;
}

.notes-wallet-popover.open {
  display: grid;
}

.notes-wallet-popover header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.notes-wallet-popover header strong {
  color: var(--vx-text);
  font-size: 1rem;
}

.notes-wallet-popover header button {
  min-height: 30px;
  padding: 0.35rem 0.6rem;
  border: 1px solid rgba(119, 151, 180, 0.18);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--vx-muted);
  font-weight: 900;
  cursor: pointer;
}

.notes-wallet-popover label {
  display: grid;
  gap: 0.25rem;
}

.notes-wallet-popover label span {
  color: var(--vx-cyan);
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.notes-wallet-popover input {
  width: 100%;
  min-height: 38px;
}

.notes-wallet-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.notes-wallet-actions button {
  min-height: 38px;
  border: 1px solid rgba(255, 143, 31, 0.26);
  border-radius: 8px;
  background: rgba(255, 143, 31, 0.12);
  color: var(--vx-orange);
  font-weight: 950;
  cursor: pointer;
}

@media (max-width: 760px) {
  .career-builder-header,
  .creation-mode-row,
  .career-builder-summary {
    grid-template-columns: 1fr !important;
  }

  .creation-limit-toggle,
  .creation-limit-toggle span {
    white-space: normal !important;
  }

  .creation-mode-row button {
    width: 100% !important;
  }

  .notes-wallet-panel {
    max-width: none;
  }

  .notes-wallet-actions {
    grid-template-columns: 1fr;
  }
}


/* Dossier code label styling */
.dossier-code-host {
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  justify-self: end !important;
  margin-left: auto !important;
  color: inherit !important;
  text-align: right !important;
}

.dossier-code {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.46rem;
  border: 1px solid rgba(32, 217, 231, 0.28);
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(32, 217, 231, 0.08), rgba(169, 107, 255, 0.055)),
    rgba(3, 12, 20, 0.72);
  color: var(--vx-cyan);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.045em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 0 18px rgba(32, 217, 231, 0.045);
}

.dossier-code::before {
  content: ">";
  color: var(--vx-orange);
  font-weight: 950;
}

.vx-panel-title .dossier-code-host,
.inventory-heading .dossier-code-host,
.library-heading .dossier-code-host {
  align-self: center !important;
}

.eyeline.dossier-code-host {
  margin: 0 !important;
  justify-self: start !important;
}

.eyeline.dossier-code-host .dossier-code {
  font-size: 0.56rem;
  padding: 0.18rem 0.36rem;
}

@media (max-width: 760px) {
  .dossier-code-host {
    justify-self: start !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    text-align: left !important;
  }

  .dossier-code {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.2;
  }
}


/* Per-character custom skills */
.skill-category-row {
  min-width: 860px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.7rem 0 0.16rem;
  padding: 0.48rem 0.62rem;
  border: 1px solid rgba(32, 217, 231, 0.18);
  border-radius: 7px;
  background:
    linear-gradient(90deg, rgba(32, 217, 231, 0.1), rgba(169, 107, 255, 0.06)),
    rgba(6, 12, 20, 0.82);
}

.skill-category-row strong {
  color: var(--vx-cyan);
  font-size: 0.74rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.skill-category-row button {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255, 134, 31, 0.42);
  border-radius: 8px;
  background: rgba(255, 134, 31, 0.13);
  color: var(--vx-orange);
  font-size: 1rem;
  font-weight: 950;
  cursor: pointer;
}

.skill-category-row button:hover,
.skill-category-row button:focus-visible {
  border-color: rgba(255, 134, 31, 0.72);
  background: rgba(255, 134, 31, 0.22);
}

.skill-category-empty {
  min-width: 860px;
  margin: 0;
  padding: 0.55rem 0.7rem;
  color: rgba(210, 219, 238, 0.62);
  font-size: 0.76rem;
  font-weight: 800;
}

.custom-skill-editor,
.skill-customize-panel {
  min-width: 860px;
  margin: 0.2rem 0 0.55rem;
  padding: 0.75rem;
  border: 1px solid rgba(169, 107, 255, 0.32);
  border-radius: 8px;
  background:
    radial-gradient(circle at 0 0, rgba(169, 107, 255, 0.16), transparent 14rem),
    rgba(8, 13, 23, 0.92);
}

.custom-skill-editor > div,
.skill-customize-panel > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.62rem;
}

.custom-skill-editor label,
.skill-customize-panel label {
  display: grid;
  gap: 0.32rem;
  color: var(--vx-muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.custom-skill-editor input,
.custom-skill-editor select,
.custom-skill-editor textarea,
.skill-customize-panel input,
.skill-customize-panel select,
.skill-customize-panel textarea {
  width: 100%;
  min-width: 0;
  padding: 0.55rem 0.62rem;
  border: 1px solid rgba(119, 151, 180, 0.2);
  border-radius: 7px;
  background: rgba(3, 7, 14, 0.88);
  color: #fff8ff;
  font-weight: 850;
}

.custom-skill-check {
  align-self: end;
  min-height: 38px;
  display: flex !important;
  align-items: center;
  gap: 0.5rem !important;
  padding: 0.5rem 0.6rem;
  border: 1px solid rgba(119, 151, 180, 0.16);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.03);
}

.custom-skill-check input {
  width: auto;
}

.custom-skill-notes,
.skill-customize-notes {
  grid-column: 1 / -1;
}

.custom-skill-editor textarea,
.skill-customize-panel textarea {
  min-height: 5rem;
  resize: vertical;
  text-transform: none;
}

.custom-skill-editor footer,
.skill-manager-panel footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.custom-skill-editor footer {
  justify-content: flex-end;
  margin-top: 0.62rem;
}

.custom-skill-editor footer button,
.skill-customize-panel > button,
.skill-customize-toggle {
  min-height: 36px;
  padding: 0.45rem 0.85rem;
  border-radius: 8px;
  font-weight: 950;
  cursor: pointer;
}

.custom-skill-editor footer button:first-child,
.skill-customize-toggle {
  border: 1px solid rgba(255, 134, 31, 0.4);
  background: rgba(255, 134, 31, 0.15);
  color: var(--vx-orange);
}

.custom-skill-editor footer button:last-child,
.skill-customize-panel > button {
  border: 1px solid rgba(119, 151, 180, 0.2);
  background: rgba(255, 255, 255, 0.04);
  color: var(--vx-muted);
}

.skill-customize-panel {
  min-width: 0;
  margin-top: 0.65rem;
}

.skill-customize-panel header {
  margin-bottom: 0.58rem;
}

.skill-customize-panel header strong {
  display: block;
  color: #fff8ff;
}

.skill-customize-panel header span {
  color: var(--vx-muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.skill-customize-panel > button {
  margin-top: 0.62rem;
}

.skill-marker,
.skill-pill {
  display: inline-flex;
  align-items: center;
  margin-left: 0.4rem;
  padding: 0.12rem 0.38rem;
  border: 1px solid rgba(169, 107, 255, 0.34);
  border-radius: 999px;
  background: rgba(169, 107, 255, 0.13);
  color: var(--vx-purple);
  font-size: 0.54rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}

.skill-marker.custom,
.skill-pill.custom {
  border-color: rgba(32, 217, 231, 0.32);
  background: rgba(32, 217, 231, 0.1);
  color: var(--vx-cyan);
}

.skill-row.is-customized {
  box-shadow: inset 3px 0 0 rgba(169, 107, 255, 0.7);
}

.skill-row.is-custom-skill {
  box-shadow: inset 3px 0 0 rgba(32, 217, 231, 0.65);
}

@media (max-width: 760px) {
  .skill-category-row,
  .skill-category-empty,
  .custom-skill-editor {
    min-width: 680px;
  }

  .custom-skill-editor > div,
  .skill-customize-panel > div {
    grid-template-columns: 1fr;
  }
}


/* Compact repeat rows for Gear, Actions, and Vehicles */
.sheet-table.repeat-compact-table {
  overflow-x: auto;
  gap: 0.32rem;
}

.repeat-compact-head,
.repeat-compact-row {
  min-width: 720px;
  display: grid;
  grid-template-columns: repeat(var(--compact-repeat-data-cols), minmax(96px, 1fr)) 42px;
  gap: 0.35rem;
  align-items: stretch;
}

.repeat-compact-head {
  padding: 0 0.24rem;
}

.repeat-compact-head span {
  color: var(--vx-cyan);
  font-size: 0.58rem;
  font-weight: 950;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.repeat-compact-row {
  padding: 0.45rem;
  border: 1px solid rgba(169, 107, 255, 0.34);
  border-radius: 7px;
  background:
    linear-gradient(90deg, rgba(169, 107, 255, 0.22), rgba(32, 217, 231, 0.055)),
    rgba(11, 14, 31, 0.9);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.repeat-compact-row.is-editing {
  border-color: rgba(32, 217, 231, 0.58);
  background:
    linear-gradient(90deg, rgba(169, 107, 255, 0.28), rgba(32, 217, 231, 0.1)),
    rgba(11, 14, 31, 0.95);
}

.repeat-compact-cell {
  min-width: 0;
  color: #fff8ff;
  font-size: 0.74rem;
  font-weight: 850;
  line-height: 1.25;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.repeat-compact-name {
  color: #fff;
  text-transform: uppercase;
}

.repeat-compact-effects,
.repeat-compact-effect,
.repeat-compact-modifiers,
.repeat-compact-qualities,
.repeat-compact-special,
.repeat-compact-notes {
  white-space: normal;
  display: block;
}

.repeat-gear-button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  line-height: 0;
  align-self: center;
  justify-self: end;
  border: 1px solid rgba(32, 217, 231, 0.28);
  border-radius: 8px;
  background:
    radial-gradient(circle at 45% 30%, rgba(32, 217, 231, 0.16), transparent 62%),
    rgba(9, 15, 28, 0.9);
  color: var(--vx-cyan);
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.repeat-gear-button:hover,
.repeat-gear-button[aria-expanded="true"] {
  border-color: rgba(169, 107, 255, 0.78);
  box-shadow: 0 0 18px rgba(169, 107, 255, 0.22);
  transform: translateY(-1px);
}

.repeat-gear-svg {
  width: 17px;
  height: 17px;
  margin: 0;
  fill: currentColor;
}

.repeat-editor-row {
  min-width: 720px;
  padding: 0.62rem;
  border: 1px solid rgba(32, 217, 231, 0.26);
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgba(32, 217, 231, 0.09), rgba(169, 107, 255, 0.07)),
    rgba(6, 11, 21, 0.94);
}

.repeat-editor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.48rem;
}

.repeat-editor-grid .repeat-field {
  min-width: 0;
}

.repeat-editor-grid textarea {
  min-height: 5.5rem;
  resize: vertical;
}

.repeat-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.55rem;
}

.repeat-editor-actions button {
  min-height: 36px;
  border-radius: 8px;
  font-weight: 950;
  cursor: pointer;
}

.repeat-editor-done {
  padding: 0.45rem 0.9rem;
  border: 1px solid rgba(32, 217, 231, 0.36);
  background: rgba(32, 217, 231, 0.12);
  color: var(--vx-cyan);
}

.repeat-editor-remove {
  padding: 0.45rem 0.9rem;
  border: 1px solid rgba(220, 53, 37, 0.38);
  background: rgba(220, 53, 37, 0.18);
  color: #ffe2e2;
}

.repeat-empty {
  min-width: 300px;
  margin: 0.2rem 0 0.35rem;
  color: rgba(210, 219, 238, 0.72);
  font-size: 0.78rem;
  font-weight: 800;
}

@media (max-width: 760px) {
  .repeat-compact-head,
  .repeat-compact-row,
  .repeat-editor-row {
    min-width: 680px;
  }

  .repeat-compact-cell {
    font-size: 0.7rem;
  }
}


/* VORTEX inventory editor stat labels styling */
.vortex-item-stat-editor {
  align-items: stretch !important;
}

.vortex-item-stat-field {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  gap: 0.35rem !important;
  min-height: 4.8rem !important;
  padding-top: 1.35rem !important;
}

.vortex-item-stat-field::before {
  content: attr(data-item-stat-label);
  position: absolute;
  top: 0.45rem;
  left: 0.6rem;
  right: 0.6rem;
  overflow: hidden;
  color: var(--vx-cyan, #20d9e7);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.58rem;
  font-weight: 950;
  letter-spacing: 0.07em;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.95;
  pointer-events: none;
}

.vortex-item-stat-field input,
.vortex-item-stat-field select,
.vortex-item-stat-field textarea {
  width: 100% !important;
}

.vortex-item-stat-checkbox-field {
  align-items: center !important;
  justify-content: center !important;
}

.vortex-item-stat-checkbox-field::before {
  text-align: center;
}

.vortex-item-stat-notes-field {
  min-width: min(24rem, 100%) !important;
}

.vortex-item-stat-notes-field textarea {
  min-height: 4.4rem !important;
  resize: vertical !important;
}

@media (max-width: 900px) {
  .vortex-item-stat-field {
    min-height: 4.4rem !important;
  }

  .vortex-item-stat-field::before {
    font-size: 0.56rem;
  }

  .vortex-item-stat-notes-field {
    min-width: 100% !important;
  }
}


/* VORTEX quality hover reminders styling */
.quality-reminder-token {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.05rem 0.18rem;
  border: 1px solid rgba(32, 217, 231, 0.28);
  border-radius: 5px;
  background: rgba(32, 217, 231, 0.07);
  color: inherit;
  font-weight: 950;
  cursor: help;
  text-decoration: underline;
  text-decoration-color: rgba(32, 217, 231, 0.65);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16rem;
}

.vortex-floating-tooltip {
  position: fixed;
  z-index: 2147483647;
  max-width: min(28rem, calc(100vw - 24px));
  padding: 0.66rem 0.78rem;
  border: 1px solid rgba(32, 217, 231, 0.58);
  border-radius: 10px;
  background:
    radial-gradient(circle at 0 0, rgba(169, 107, 255, 0.14), transparent 11rem),
    linear-gradient(180deg, rgba(10, 19, 31, 0.99), rgba(4, 8, 14, 0.99));
  box-shadow:
    0 18px 52px rgba(0, 0, 0, 0.58),
    0 0 24px rgba(32, 217, 231, 0.18);
  color: #eaf8ff;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.74rem;
  font-weight: 850;
  line-height: 1.38;
  pointer-events: none;
  white-space: normal;
}

.vortex-floating-tooltip[hidden] {
  display: none;
}

html,
body {
  overflow-x: hidden;
}

.vortex-console,
.app-shell[data-dashboard] {
  min-height: 100vh;
}

.app-version-chip {
  align-self: flex-start;
  width: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #9aa4b4;
  box-shadow: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.2;
  margin: auto 0 0.25rem;
  min-height: 0;
  overflow: hidden;
  padding: 0 0.18rem;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.app-version-chip:hover,
.app-version-chip:focus-visible {
  color: #22f0ff;
  outline: none;
}

.app-version-chip + .vortex-bot-card,
.app-version-chip + .bounty-bot-card,
.app-version-chip + .bot-help,
.app-shell[data-dashboard] .app-version-chip + .bot-help,
.app-shell[data-dashboard] .app-version-chip + .bounty-bot-card {
  margin-top: 0 !important;
}

@media (min-width: 901px) {
  .vortex-console > .vortex-sidebar .app-version-chip,
  .app-shell[data-dashboard] > .sidebar .app-version-chip,
  .app-shell[data-dashboard] > .bounty-sidebar .app-version-chip {
    margin-top: auto !important;
    margin-bottom: 0.25rem !important;
  }

  .vortex-console > .vortex-sidebar .app-version-chip + .vortex-bot-card,
  .app-shell[data-dashboard] > .sidebar .app-version-chip + .bot-help,
  .app-shell[data-dashboard] > .bounty-sidebar .app-version-chip + .bounty-bot-card,
  .app-shell[data-dashboard] > .bounty-sidebar .app-version-chip + .bot-help {
    margin-top: 0 !important;
  }
}

.version-info-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(2, 7, 15, 0.72);
  backdrop-filter: blur(9px);
}

.version-info-overlay[hidden] {
  display: none;
}

.version-info-card {
  width: min(860px, calc(100vw - 2rem));
  max-height: min(86vh, 820px);
  overflow: auto;
  border: 1px solid rgba(34, 211, 238, 0.45);
  border-radius: 12px;
  background:
    radial-gradient(circle at top left, rgba(34, 211, 238, 0.13), transparent 30%),
    linear-gradient(145deg, rgba(10, 22, 33, 0.98), rgba(17, 12, 31, 0.98));
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.62), inset 0 0 0 1px rgba(255, 139, 35, 0.12);
  color: #d9e7f5;
}

.version-info-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid rgba(147, 197, 253, 0.18);
  background: rgba(8, 17, 28, 0.96);
  padding: 1rem 1.15rem;
}

.version-info-header h2 {
  margin: 0;
  color: #ffffff;
  font-size: 1.45rem;
  line-height: 1.1;
}

.version-info-header button {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid rgba(203, 213, 225, 0.25);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: #e5edf7;
  cursor: pointer;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 900;
}

.version-info-header button:hover,
.version-info-header button:focus-visible {
  border-color: rgba(34, 211, 238, 0.75);
  color: #22f0ff;
  outline: none;
}

.version-info-body {
  display: grid;
  gap: 1.1rem;
  padding: 1.15rem;
}

.version-info-body h3 {
  margin: 0 0 0.65rem;
  color: #ff8b23;
  font-size: 0.92rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

.version-breakdown {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0;
}

.version-breakdown div {
  min-width: 0;
  border: 1px solid rgba(34, 211, 238, 0.22);
  border-radius: 8px;
  background: rgba(5, 16, 26, 0.72);
  padding: 0.65rem;
}

.version-breakdown dt {
  color: #22f0ff;
  font-size: 1.02rem;
  font-weight: 900;
  line-height: 1.1;
}

.version-breakdown dd {
  margin: 0.25rem 0 0;
  color: #a9b7c8;
  font-size: 0.76rem;
  line-height: 1.35;
}

.version-changelog {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding-left: 1.05rem;
  color: #cbd7e7;
  font-size: 0.9rem;
  line-height: 1.45;
}

.version-changelog li::marker {
  color: #22f0ff;
}

.version-info-footer {
  border-top: 1px solid rgba(147, 197, 253, 0.14);
  padding-top: 0.85rem;
}

.version-info-footer a {
  color: #9f7aea;
  font-size: 0.84rem;
  font-weight: 900;
  text-decoration: none;
}

.version-info-footer a:hover,
.version-info-footer a:focus-visible {
  color: #22f0ff;
  outline: none;
}

@media (max-width: 760px) {
  .version-info-card {
    width: min(100%, calc(100vw - 1rem));
    max-height: calc(100vh - 1rem);
  }

  .version-info-header {
    padding: 0.85rem;
  }

  .version-info-body {
    padding: 0.85rem;
  }

  .version-breakdown {
    grid-template-columns: 1fr;
  }

  .app-version-chip {
    margin: 0.35rem 0 0.2rem;
  }
}

.rules-reference-button {
  width: 1.8rem;
  min-width: 1.8rem;
  height: 1.8rem;
  min-height: 1.8rem;
  display: inline-grid;
  place-items: center;
  margin-left: 0.34rem;
  padding: 0;
  border: 1px solid rgba(32, 217, 231, 0.72);
  border-radius: 8px;
  background: rgba(32, 217, 231, 0.12);
  color: var(--vx-cyan, #20d9e7);
  box-shadow: 0 0 16px rgba(32, 217, 231, 0.16);
  font-size: 0.82rem;
  font-weight: 950;
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
}

.rules-reference-button:hover,
.rules-reference-button:focus-visible {
  border-color: rgba(32, 217, 231, 0.95);
  background: rgba(32, 217, 231, 0.2);
  outline: none;
}

.rules-reference-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483600 !important;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background: rgba(2, 5, 10, 0.72);
  backdrop-filter: blur(10px);
}

body > .rules-reference-overlay {
  z-index: 2147483600 !important;
}

.rules-reference-overlay[hidden] {
  display: none;
}

.rules-reference-card {
  width: min(980px, calc(100vw - 2rem));
  max-height: min(86vh, 860px);
  overflow: auto;
  border: 1px solid rgba(32, 217, 231, 0.28);
  border-radius: 12px;
  background:
    radial-gradient(circle at 12% 0%, rgba(169, 107, 255, 0.18), transparent 20rem),
    radial-gradient(circle at 88% 12%, rgba(32, 217, 231, 0.12), transparent 18rem),
    linear-gradient(180deg, rgba(10, 19, 31, 0.98), rgba(5, 9, 16, 0.98));
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.65),
    0 0 34px rgba(32, 217, 231, 0.12);
}

.rules-reference-card > header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid rgba(119, 151, 180, 0.16);
  background: rgba(7, 14, 22, 0.95);
}

.rules-reference-card h2 {
  margin: 0.1rem 0 0;
  color: #fff8ff;
  font-size: 1.35rem;
  line-height: 1;
}

.rules-reference-card [data-rules-reference-close] {
  width: 2.2rem;
  min-width: 2.2rem;
  height: 2.2rem;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(119, 151, 180, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--vx-text, #eaf8ff);
  font-size: 1.2rem;
  cursor: pointer;
}

.rules-reference-body {
  display: grid;
  gap: 0.9rem;
  padding: 1rem 1.1rem 1.1rem;
}

.rules-reference-summary,
.rules-reference-card footer {
  margin: 0;
  color: var(--vx-muted, #9ba8ba);
  line-height: 1.5;
}

.rules-reference-summary {
  padding: 0.76rem 0.85rem;
  border: 1px solid rgba(32, 217, 231, 0.18);
  border-radius: 9px;
  background: rgba(32, 217, 231, 0.055);
  color: var(--vx-text, #eaf8ff);
  font-weight: 850;
}

.rules-reference-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.rules-reference-grid article,
.rules-reference-table {
  padding: 0.82rem;
  border: 1px solid rgba(119, 151, 180, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
}

.rules-reference-grid h3,
.rules-reference-table h3 {
  margin: 0 0 0.55rem;
  color: var(--vx-orange, #ff8f1f);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.rules-reference-grid ul {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding-left: 1rem;
}

.rules-reference-grid li,
.rules-reference-table p {
  color: var(--vx-muted, #9ba8ba);
  font-size: 0.82rem;
  line-height: 1.45;
}

.rules-reference-table {
  display: grid;
  gap: 0.55rem;
}

.rules-reference-table > div {
  display: grid;
  grid-template-columns: minmax(9rem, 0.72fr) minmax(13rem, 1.1fr) minmax(0, 1.6fr);
  gap: 0.65rem;
  align-items: start;
  padding: 0.55rem 0;
  border-top: 1px solid rgba(119, 151, 180, 0.1);
}

.rules-reference-table strong {
  color: #fff8ff;
}

.rules-reference-table span {
  color: var(--vx-cyan, #20d9e7);
  font-size: 0.78rem;
  font-weight: 900;
}

.rules-reference-table p {
  margin: 0;
}

.rules-reference-card footer {
  padding-top: 0.35rem;
  border-top: 1px solid rgba(119, 151, 180, 0.12);
  font-size: 0.74rem;
  font-weight: 850;
}

@media (max-width: 840px) {
  .rules-reference-grid,
  .rules-reference-table > div {
    grid-template-columns: 1fr;
  }

  .rules-reference-card {
    max-height: 88vh;
  }
}

.genesys-inline-symbol {
  display: inline-grid;
  place-items: center;
  vertical-align: -0.18em;
  margin-inline: 0.08em;
}

.genesys-inline-symbol.result-symbol {
  min-width: 1.25em;
  width: 1.25em;
  height: 1.25em;
  padding: 0;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.035);
}

.genesys-inline-symbol.result-symbol svg {
  width: 0.9em;
  height: 0.9em;
}

.genesys-die-token .die {
  width: 1em;
  height: 1em;
}

.euphorium-token {
  min-width: 1.45em;
  height: 1.45em;
  border: 1px solid rgba(32, 217, 231, 0.7);
  border-radius: 999px;
  color: var(--vx-cyan, #20d9e7);
  background: rgba(32, 217, 231, 0.1);
  font-size: 0.62em;
  font-weight: 950;
  letter-spacing: 0.02em;
}

.talent-rank-controls,
.talent-skill-choices {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.48rem;
}

.talent-rank-controls {
  grid-template-columns: auto 1.7rem auto 1.7rem;
  align-items: center;
  max-width: 9rem;
}

.talent-rank-controls span,
.talent-skill-choices > span {
  color: var(--vx-cyan, #20d9e7);
  font-size: 0.58rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.talent-rank-controls button,
.talent-skill-choices button {
  min-height: 1.65rem;
  border: 1px solid rgba(32, 217, 231, 0.34);
  border-radius: 6px;
  background: rgba(32, 217, 231, 0.1);
  color: var(--vx-text, #eaf8ff);
  font-weight: 950;
}

.talent-rank-controls strong {
  text-align: center;
  color: var(--vx-text, #eaf8ff);
}

.talent-skill-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
}

.talent-skill-chips button,
.talent-skill-chips em {
  padding: 0.24rem 0.42rem;
  border-radius: 999px;
  font-size: 0.62rem;
}

.talent-skill-chips em {
  color: var(--vx-muted, #9ba8ba);
  font-style: normal;
}

.talent-skill-choices label {
  display: grid;
  gap: 0.25rem;
}

.talent-skill-choices select {
  min-height: 2rem;
}

.talent-slot.is-filled,
.talent-mobile-slot.is-filled {
  position: relative;
  overflow: visible;
}

.talent-slot-status {
  display: grid;
  justify-items: end;
  gap: 0.28rem;
}

.talent-rank-gear {
  width: 1.65rem;
  min-width: 1.65rem;
  height: 1.65rem;
  min-height: 1.65rem;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(32, 217, 231, 0.34);
  border-radius: 7px;
  background: rgba(32, 217, 231, 0.08);
  color: var(--vx-cyan, #20d9e7);
  cursor: pointer;
}

.talent-rank-gear:hover,
.talent-rank-gear:focus-visible,
.talent-rank-gear[aria-expanded="true"] {
  border-color: rgba(32, 217, 231, 0.78);
  background: rgba(32, 217, 231, 0.16);
  outline: none;
}

.talent-rank-gear .repeat-gear-svg {
  width: 0.88rem;
  height: 0.88rem;
}

.talent-rank-badge {
  justify-self: start;
  margin-top: -0.1rem;
  color: var(--vx-cyan, #20d9e7);
  font-size: 0.64rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.talent-rank-popover {
  position: absolute;
  top: 2.55rem;
  right: 0.55rem;
  z-index: 80;
  width: min(18rem, calc(100vw - 2rem));
  display: grid;
  gap: 0.62rem;
  padding: 0.72rem;
  border: 1px solid rgba(32, 217, 231, 0.42);
  border-radius: 10px;
  background:
    radial-gradient(circle at 100% 0, rgba(169, 107, 255, 0.16), transparent 9rem),
    linear-gradient(180deg, rgba(10, 19, 31, 0.98), rgba(5, 9, 16, 0.98));
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.52),
    0 0 22px rgba(32, 217, 231, 0.12);
}

.floating-talent-rank-popover {
  position: fixed !important;
  z-index: 2147483400 !important;
}

.talent-rank-popover header {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
}

.talent-rank-popover header div {
  display: grid;
  gap: 0.14rem;
}

.talent-rank-popover header span,
.talent-rank-popover p {
  color: var(--vx-muted, #9ba8ba);
  font-size: 0.68rem;
  font-weight: 850;
}

.talent-rank-popover header strong {
  color: #fff8ff;
  font-size: 0.84rem;
  line-height: 1.1;
}

.talent-rank-popover [data-talent-rank-close] {
  width: 1.8rem;
  min-width: 1.8rem;
  height: 1.8rem;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(119, 151, 180, 0.22);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--vx-text, #eaf8ff);
  cursor: pointer;
}

.talent-rank-popover .talent-rank-controls {
  grid-template-columns: 2.25rem minmax(3rem, 1fr) 2.25rem;
  align-items: center;
  margin: 0;
}

.talent-rank-popover .talent-rank-controls button {
  min-height: 2.25rem;
}

.talent-rank-popover .talent-rank-controls button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.talent-rank-popover .talent-rank-controls strong {
  padding: 0.46rem 0.7rem;
  border: 1px solid rgba(119, 151, 180, 0.18);
  border-radius: 8px;
  background: rgba(3, 8, 16, 0.72);
  text-align: center;
}

.talent-rank-popover p {
  margin: 0;
  line-height: 1.35;
}

.repeat-compact-row {
  align-items: stretch;
}

.repeat-compact-cell {
  min-height: 2.4rem;
  white-space: normal;
  overflow: visible;
  line-height: 1.35;
}

.repeat-editor-grid textarea {
  min-height: 7.25rem;
}

.app-shell[data-dashboard] .dm-character-access .character-strip {
  gap: 0.72rem;
  padding: 0.85rem 0.1rem 0.72rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(155, 168, 186, 0.78) rgba(255, 255, 255, 0.08);
}

.app-shell[data-dashboard] .dm-character-access .character-card {
  flex: 0 0 154px;
  min-width: 154px;
  min-height: 182px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr auto;
  align-items: start;
  padding: 0.78rem 0.66rem;
  gap: 0.38rem 0.48rem;
  scroll-snap-align: start;
}

.app-shell[data-dashboard] .dm-character-access .character-card > div {
  display: contents;
}

.app-shell[data-dashboard] .dm-character-access .character-card img,
.app-shell[data-dashboard] .dm-character-access .character-card .portrait {
  grid-column: 1;
  grid-row: 2 / span 3;
  width: 50px;
  height: 50px;
  align-self: center;
}

.app-shell[data-dashboard] .dm-character-access .character-card strong {
  grid-column: 1 / -1;
  grid-row: 1;
  min-width: 0;
  text-align: center;
  font-size: 0.92rem;
  line-height: 1.12;
}

.app-shell[data-dashboard] .dm-character-access .character-card span {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  font-size: 0.68rem;
  line-height: 1.2;
}

.app-shell[data-dashboard] .dm-character-access .character-card em {
  grid-column: 2;
  grid-row: 3;
  justify-self: start;
  max-width: 100%;
  font-size: 0.58rem;
  line-height: 1.1;
}

.app-shell[data-dashboard] .dm-character-access .character-card .sheet-link {
  grid-column: 2;
  grid-row: 5;
  justify-self: stretch;
  min-height: 36px;
  padding-inline: 0.5rem;
}

.quality-reminder-token::after {
  content: attr(data-quality-definition);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.55rem);
  z-index: 5000;
  width: max-content;
  max-width: min(24rem, 78vw);
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(32, 217, 231, 0.45);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(12, 22, 35, 0.98), rgba(5, 9, 16, 0.98));
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.45),
    0 0 18px rgba(32, 217, 231, 0.12);
  color: #eaf8ff;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  text-align: left;
  text-transform: none;
  transform: translate(-50%, 0.3rem);
  transition: opacity 120ms ease, transform 120ms ease;
  white-space: normal;
}

.quality-reminder-token::before {
  content: attr(data-quality-name);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 3.05rem);
  z-index: 5001;
  padding: 0.18rem 0.42rem;
  border: 1px solid rgba(255, 143, 31, 0.35);
  border-radius: 999px;
  background: rgba(255, 143, 31, 0.14);
  color: var(--vx-orange, #ff8f1f);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.56rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  text-transform: uppercase;
  transform: translate(-50%, 0.3rem);
  transition: opacity 120ms ease, transform 120ms ease;
  white-space: nowrap;
}

.quality-reminder-token:hover,
.quality-reminder-token:focus {
  border-color: rgba(32, 217, 231, 0.7);
  background: rgba(32, 217, 231, 0.15);
  outline: none;
}

.quality-reminder-token:hover::after,
.quality-reminder-token:focus::after,
.quality-reminder-token:hover::before,
.quality-reminder-token:focus::before {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 760px) {
  .quality-reminder-token::after {
    max-width: min(20rem, 86vw);
    font-size: 0.68rem;
  }

  .quality-reminder-token::before {
    display: none;
  }
}


/* VORTEX custom skill category formatting */
[data-vortex-page="skills"] .skill-category-row,
[data-vortex-page="skills"] .skills-category-row,
[data-vortex-page="skills"] .skill-category-header,
[data-vortex-page="skills"] .skills-category-header,
[data-vortex-page="skills"] .skill-group-header,
[data-vortex-page="skills"] .skills-group-header,
[data-vortex-page="skills"] [data-skill-category],
[data-vortex-page="skills"] [data-skill-category-header] {
  min-height: 2.9rem !important;
  padding: 0.65rem 0.85rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  border-radius: 10px !important;
}

[data-vortex-page="skills"] .skill-category-row > *,
[data-vortex-page="skills"] .skills-category-row > *,
[data-vortex-page="skills"] .skill-category-header > *,
[data-vortex-page="skills"] .skills-category-header > *,
[data-vortex-page="skills"] .skill-group-header > *,
[data-vortex-page="skills"] .skills-group-header > *,
[data-vortex-page="skills"] [data-skill-category] > *,
[data-vortex-page="skills"] [data-skill-category-header] > * {
  min-width: 0 !important;
}

[data-vortex-page="skills"] .skill-category-row h2,
[data-vortex-page="skills"] .skill-category-row h3,
[data-vortex-page="skills"] .skill-category-row h4,
[data-vortex-page="skills"] .skills-category-row h2,
[data-vortex-page="skills"] .skills-category-row h3,
[data-vortex-page="skills"] .skills-category-row h4,
[data-vortex-page="skills"] .skill-category-header h2,
[data-vortex-page="skills"] .skill-category-header h3,
[data-vortex-page="skills"] .skill-category-header h4,
[data-vortex-page="skills"] .skills-category-header h2,
[data-vortex-page="skills"] .skills-category-header h3,
[data-vortex-page="skills"] .skills-category-header h4,
[data-vortex-page="skills"] [data-skill-category] h2,
[data-vortex-page="skills"] [data-skill-category] h3,
[data-vortex-page="skills"] [data-skill-category] h4,
[data-vortex-page="skills"] [data-skill-category-header] h2,
[data-vortex-page="skills"] [data-skill-category-header] h3,
[data-vortex-page="skills"] [data-skill-category-header] h4 {
  margin: 0 !important;
  line-height: 1 !important;
}

[data-vortex-page="skills"] button[data-add-custom-skill],
[data-vortex-page="skills"] button[data-skill-add],
[data-vortex-page="skills"] button[data-add-skill],
[data-vortex-page="skills"] .add-custom-skill,
[data-vortex-page="skills"] .skill-add-button,
[data-vortex-page="skills"] .custom-skill-add,
[data-vortex-page="skills"] .skill-category-add {
  width: 2rem !important;
  min-width: 2rem !important;
  height: 2rem !important;
  min-height: 2rem !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  border-radius: 8px !important;
  line-height: 1 !important;
  font-size: 1rem !important;
}

[data-vortex-page="skills"] .skill-category-row .add-custom-skill,
[data-vortex-page="skills"] .skills-category-row .add-custom-skill,
[data-vortex-page="skills"] .skill-category-header .add-custom-skill,
[data-vortex-page="skills"] .skills-category-header .add-custom-skill {
  margin-left: auto !important;
}

[data-vortex-page="skills"] .skill-row,
[data-vortex-page="skills"] .skills-row,
[data-vortex-page="skills"] [data-skill-key],
[data-vortex-page="skills"] [data-custom-skill-id] {
  align-items: center !important;
}

/* If Codex rendered category headers inside grid/table columns, force the header to span cleanly. */
[data-vortex-page="skills"] .skill-category-row,
[data-vortex-page="skills"] .skills-category-row,
[data-vortex-page="skills"] .skill-category-header,
[data-vortex-page="skills"] .skills-category-header {
  grid-column: 1 / -1 !important;
}

/* Mobile keeps the plus visible without stretching the whole section. */
@media (max-width: 760px) {
  [data-vortex-page="skills"] .skill-category-row,
  [data-vortex-page="skills"] .skills-category-row,
  [data-vortex-page="skills"] .skill-category-header,
  [data-vortex-page="skills"] .skills-category-header,
  [data-vortex-page="skills"] .skill-group-header,
  [data-vortex-page="skills"] .skills-group-header,
  [data-vortex-page="skills"] [data-skill-category],
  [data-vortex-page="skills"] [data-skill-category-header] {
    padding: 0.65rem !important;
  }
}


/* VORTEX skill plus button alignment */
[data-vortex-page="skills"] .skill-category-header button,
[data-vortex-page="skills"] .skills-category-header button,
[data-vortex-page="skills"] .skill-category-row button,
[data-vortex-page="skills"] .skills-category-row button,
[data-vortex-page="skills"] button[data-add-custom-skill],
[data-vortex-page="skills"] button[data-skill-add],
[data-vortex-page="skills"] button[data-add-skill],
[data-vortex-page="skills"] .add-custom-skill,
[data-vortex-page="skills"] .skill-add-button,
[data-vortex-page="skills"] .custom-skill-add,
[data-vortex-page="skills"] .skill-category-add {
  position: relative !important;
  width: 2rem !important;
  min-width: 2rem !important;
  max-width: 2rem !important;
  height: 2rem !important;
  min-height: 2rem !important;
  max-height: 2rem !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  align-items: center !important;
  justify-items: center !important;
  flex: 0 0 2rem !important;
  border-radius: 8px !important;
  line-height: 1 !important;
  overflow: hidden !important;
  vertical-align: middle !important;
  font-size: 0 !important;
  color: transparent !important;
  text-indent: 0 !important;
}

[data-vortex-page="skills"] .skill-category-header button::before,
[data-vortex-page="skills"] .skills-category-header button::before,
[data-vortex-page="skills"] .skill-category-row button::before,
[data-vortex-page="skills"] .skills-category-row button::before,
[data-vortex-page="skills"] button[data-add-custom-skill]::before,
[data-vortex-page="skills"] button[data-skill-add]::before,
[data-vortex-page="skills"] button[data-add-skill]::before,
[data-vortex-page="skills"] .add-custom-skill::before,
[data-vortex-page="skills"] .skill-add-button::before,
[data-vortex-page="skills"] .custom-skill-add::before,
[data-vortex-page="skills"] .skill-category-add::before {
  content: "+" !important;
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: var(--vx-orange, #ff8f1f) !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important;
  font-size: 1rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  transform: translateY(-1px) !important;
}

[data-vortex-page="skills"] .skill-category-header button > *,
[data-vortex-page="skills"] .skills-category-header button > *,
[data-vortex-page="skills"] .skill-category-row button > *,
[data-vortex-page="skills"] .skills-category-row button > *,
[data-vortex-page="skills"] button[data-add-custom-skill] > *,
[data-vortex-page="skills"] button[data-skill-add] > *,
[data-vortex-page="skills"] button[data-add-skill] > *,
[data-vortex-page="skills"] .add-custom-skill > *,
[data-vortex-page="skills"] .skill-add-button > *,
[data-vortex-page="skills"] .custom-skill-add > *,
[data-vortex-page="skills"] .skill-category-add > * {
  font-size: 0 !important;
  color: transparent !important;
}


/* VORTEX skill plus button hard-center v2 */
[data-vortex-page="skills"] .vortex-skill-category-add-button {
  position: relative !important;
  width: 2rem !important;
  min-width: 2rem !important;
  max-width: 2rem !important;
  height: 2rem !important;
  min-height: 2rem !important;
  max-height: 2rem !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 2rem !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  line-height: 1 !important;
  font-size: 0 !important;
  color: transparent !important;
  text-indent: -9999px !important;
}

[data-vortex-page="skills"] .vortex-skill-category-add-button * {
  display: none !important;
}

[data-vortex-page="skills"] .vortex-skill-category-add-button::after {
  display: none !important;
  content: none !important;
}

[data-vortex-page="skills"] .vortex-skill-category-add-button::before {
  content: "+" !important;
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  color: var(--vx-orange, #ff8f1f) !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important;
  font-size: 1.05rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  transform: none !important;
}

[data-vortex-page="skills"] .skill-category-header,
[data-vortex-page="skills"] .skills-category-header,
[data-vortex-page="skills"] .skill-category-row,
[data-vortex-page="skills"] .skills-category-row {
  align-items: center !important;
}

[data-vortex-page="skills"] .skill-category-header .vortex-skill-category-add-button,
[data-vortex-page="skills"] .skills-category-header .vortex-skill-category-add-button,
[data-vortex-page="skills"] .skill-category-row .vortex-skill-category-add-button,
[data-vortex-page="skills"] .skills-category-row .vortex-skill-category-add-button {
  margin-left: auto !important;
}


/* Live VORTEX fixes: custom skills, body mods, attachments, reminders */
[data-vortex-page="sheet"] .skill-category-row button[data-add-custom-skill] {
  position: relative !important;
  width: 2rem !important;
  min-width: 2rem !important;
  height: 2rem !important;
  min-height: 2rem !important;
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
  font-size: 1rem !important;
}

.content-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.vortex-console .content-card .quality-keyword,
.vortex-console .content-card .quality-reminder-token,
.vortex-console .content-card .genesys-inline-symbol,
.vortex-console .content-card .genesys-inline-symbol.result-symbol,
.vortex-console .content-card .setback-removal-icon,
.content-card .quality-keyword,
.content-card .quality-reminder-token,
.content-card .genesys-inline-symbol,
.content-card .genesys-inline-symbol.result-symbol,
.content-card .setback-removal-icon {
  display: inline-grid !important;
  width: auto !important;
  min-width: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  vertical-align: -0.16em !important;
}

.vortex-console .content-card .quality-keyword,
.vortex-console .content-card .quality-reminder-token,
.content-card .quality-keyword,
.content-card .quality-reminder-token {
  display: inline !important;
  padding: 0 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  line-height: inherit !important;
}

.vortex-console .content-card .genesys-inline-symbol.result-symbol svg,
.content-card .genesys-inline-symbol.result-symbol svg {
  display: block !important;
}

.content-card-actions button[data-buy-content] {
  border-color: rgba(32, 217, 231, 0.38);
  background: rgba(32, 217, 231, 0.11);
  color: var(--vx-cyan);
}

.talent-version-toggle {
  width: 1.55rem;
  height: 1.55rem;
  min-width: 1.55rem;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center;
  justify-self: end !important;
  margin-left: auto;
  border-radius: 7px;
  border: 1px solid rgba(32, 217, 231, 0.55) !important;
  background: rgba(32, 217, 231, 0.12) !important;
  color: var(--vx-cyan) !important;
  font-size: 1rem;
  line-height: 1;
}

.talent-version-toggle[aria-expanded="true"] {
  border-color: rgba(169, 107, 255, 0.7) !important;
  background: rgba(169, 107, 255, 0.18) !important;
  color: #d9b6ff !important;
}

.content-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
}

.content-card .content-tag,
.vortex-console .content-card .content-tag {
  display: inline-flex !important;
  width: fit-content;
  padding: 0.12rem 0.36rem;
  border: 1px solid rgba(32, 217, 231, 0.28);
  border-radius: 999px;
  background: rgba(32, 217, 231, 0.08);
  color: var(--vx-cyan) !important;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0;
}

.talent-variant-panel {
  display: grid;
  gap: 0.42rem;
  padding: 0.5rem;
  border: 1px solid rgba(169, 107, 255, 0.28);
  border-radius: 8px;
  background: rgba(169, 107, 255, 0.08);
}

.talent-variant-row {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr) auto;
  gap: 0.45rem;
  align-items: start;
  padding: 0.45rem;
  border: 1px solid rgba(119, 151, 180, 0.16);
  border-radius: 7px;
  background: rgba(10, 18, 28, 0.58);
}

.talent-variant-row.is-default {
  border-color: rgba(32, 217, 231, 0.34);
}

.talent-variant-row p {
  margin: 0 !important;
}

.talent-variant-row button {
  align-self: center;
  white-space: nowrap;
}

.quality-keyword {
  display: inline;
  padding: 0;
  border: 0;
  border-bottom: 1px dotted currentColor;
  border-radius: 0;
  background: transparent;
  color: var(--vx-cyan);
  cursor: help;
  text-decoration: none;
}

.quality-keyword:focus-visible {
  outline: 2px solid rgba(32, 217, 231, 0.65);
  outline-offset: 2px;
  border-radius: 3px;
}

.attachment-panel {
  margin-top: 0.7rem;
  padding: 0.72rem;
  border: 1px solid rgba(32, 217, 231, 0.25);
  border-radius: 8px;
  background: rgba(4, 10, 18, 0.72);
}

.attachment-panel header,
.attachment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.attachment-panel header {
  margin-bottom: 0.55rem;
}

.attachment-panel header strong,
.attachment-row strong {
  color: #fff8ff;
}

.attachment-panel header span,
.attachment-row span,
.attachment-row em,
.attachment-empty {
  color: var(--vx-muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
}

.attachment-panel header button,
.attachment-row button {
  min-height: 32px;
  padding: 0.35rem 0.62rem;
  border: 1px solid rgba(169, 107, 255, 0.32);
  border-radius: 7px;
  background: rgba(169, 107, 255, 0.1);
  color: var(--vx-purple);
  font-weight: 950;
  cursor: pointer;
}

.attachment-row {
  flex-wrap: wrap;
  padding: 0.52rem 0;
  border-top: 1px solid rgba(119, 151, 180, 0.12);
}

.attachment-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.attachment-gear-button {
  width: 32px;
  min-width: 32px;
  padding: 0;
  display: inline-grid;
  place-items: center;
}

.attachment-gear-button .repeat-gear-svg {
  width: 15px;
  height: 15px;
}

.attachment-row.is-editing {
  border-color: rgba(32, 217, 231, 0.18);
}

.attachment-row p {
  margin: 0.25rem 0 0;
  color: var(--vx-muted);
  font-size: 0.76rem;
}

.attachment-edit-grid {
  flex: 1 0 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 0.5rem;
  margin-top: 0.55rem;
}

.attachment-edit-field {
  display: grid;
  gap: 0.25rem;
}

.attachment-edit-field span {
  color: var(--vx-muted);
  font-size: 0.66rem;
  font-weight: 950;
  text-transform: uppercase;
}

.attachment-edit-field input,
.attachment-edit-field textarea {
  width: 100%;
  min-height: 34px;
  border: 1px solid rgba(119, 151, 180, 0.2);
  border-radius: 7px;
  background: rgba(6, 8, 18, 0.88);
  color: #fff8ff;
  padding: 0.42rem 0.5rem;
  font: inherit;
  font-weight: 850;
}

.attachment-edit-field textarea {
  min-height: 70px;
  resize: vertical;
}

.attachment-edit-qualities,
.attachment-edit-effects,
.attachment-edit-notes {
  grid-column: span 2;
}

.skill-rank-override {
  display: inline-grid;
  place-items: center;
  min-width: 1.8em;
  margin-left: 0.24rem;
  padding: 0.08rem 0.34rem;
  border: 1px solid rgba(32, 217, 231, 0.42);
  border-radius: 999px;
  color: var(--vx-cyan);
  background: rgba(32, 217, 231, 0.1);
  font-size: 0.68em;
  vertical-align: middle;
}

.skill-manager-override {
  display: grid;
  gap: 0.25rem;
}

.skill-manager-override input {
  width: 100%;
  min-height: 34px;
  border: 1px solid rgba(119, 151, 180, 0.22);
  border-radius: 8px;
  background: rgba(3, 8, 16, 0.86);
  color: var(--vx-text);
  padding: 0.35rem 0.5rem;
  font: inherit;
  font-weight: 900;
}

.skill-manager-override small {
  color: var(--vx-muted);
  font-size: 0.66rem;
  font-weight: 800;
}

.dice-override-note {
  align-self: center;
  padding: 0.12rem 0.36rem;
  border: 1px solid rgba(255, 143, 31, 0.38);
  border-radius: 999px;
  color: var(--vx-orange);
  background: rgba(255, 143, 31, 0.1);
  font-size: 0.62rem;
  font-weight: 950;
  white-space: nowrap;
}

/* Keep reminder keywords inline in compendium/library prose. */
.quality-reminder-token {
  display: inline;
  align-items: baseline;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  line-height: inherit;
}

.species-builder-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.62rem;
  margin: 0.7rem 0;
}

.species-builder-features article,
.species-builder-notes {
  padding: 0.7rem;
  border: 1px solid rgba(119, 151, 180, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.species-builder-features strong {
  display: block;
  color: #fff8ff;
}

.species-builder-features span,
.species-builder-notes em {
  color: var(--vx-cyan);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 850;
}

.species-builder-features p,
.species-builder-notes p {
  margin: 0.35rem 0 0;
  color: var(--vx-muted);
  line-height: 1.45;
}

.vortex-console .active-pool-dock {
  position: static !important;
}

.vortex-console.is-sheet-tab:not(.has-pinned-active-pool) .active-pool-dock {
  position: sticky !important;
  top: 78px !important;
  z-index: 18 !important;
}

.vortex-console.has-pinned-active-pool .active-pool-dock {
  position: static !important;
}

@media (max-width: 760px) {
  .vortex-console.is-sheet-tab:not(.has-pinned-active-pool) .active-pool-dock {
    position: static !important;
  }

  .attachment-panel header,
  .attachment-row {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Bounty Board mobile repair */
@media (max-width: 1024px) {
  .app-shell[data-dashboard] {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .app-shell[data-dashboard] .portal,
  .app-shell[data-dashboard] .portal-header,
  .app-shell[data-dashboard] .characters,
  .app-shell[data-dashboard] .bounty-section,
  .app-shell[data-dashboard] .dm-rail {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .app-shell[data-dashboard] .portal-header {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  .app-shell[data-dashboard] .portal-title {
    min-width: 0 !important;
  }
}

@media (max-width: 768px) {
  .app-shell[data-dashboard] .bounty-sidebar {
    position: sticky;
    top: 0;
    z-index: 30;
    width: 100%;
    max-width: 100%;
  }

  .app-shell[data-dashboard] .portal {
    padding-inline: 0.85rem !important;
  }

  .app-shell[data-dashboard] .bounty-card,
  .app-shell[data-dashboard] .character-card {
    min-width: 0 !important;
  }

  .app-shell[data-dashboard] .character-card {
    grid-template-columns: 58px minmax(0, 1fr) !important;
  }

  .app-shell[data-dashboard] button,
  .app-shell[data-dashboard] a {
    min-height: 40px;
  }
}

@media (max-width: 430px) {
  .app-shell[data-dashboard] .portal {
    padding-inline: 0.55rem !important;
  }

  .app-shell[data-dashboard] .quick-stats,
  .app-shell[data-dashboard] .bounty-lists,
  .app-shell[data-dashboard] .characters {
    grid-template-columns: 1fr !important;
  }

  .app-shell[data-dashboard] .portal-header h1 {
    font-size: 1.35rem !important;
    overflow-wrap: anywhere;
  }
}

/* DM Campaign Characters draft-style stacked grid */
.app-shell[data-dashboard] .dm-character-access {
  overflow: visible !important;
}

.app-shell[data-dashboard] .dm-character-access .character-strip {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)) !important;
  gap: 0.62rem !important;
  overflow: visible !important;
  padding: 0.45rem 0 0.2rem !important;
  scroll-snap-type: none !important;
  scrollbar-width: none !important;
}

.app-shell[data-dashboard] .dm-character-access .character-strip::-webkit-scrollbar {
  display: none !important;
}

.app-shell[data-dashboard] .dm-character-access .character-card {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 82px !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto 1fr !important;
  align-items: center !important;
  gap: 0.16rem 0.58rem !important;
  padding: 0.52rem 0.58rem !important;
  border-radius: 8px !important;
  background:
    linear-gradient(135deg, rgba(32, 217, 231, 0.055), rgba(169, 107, 255, 0.035)),
    rgba(18, 38, 47, 0.88) !important;
  scroll-snap-align: unset !important;
}

.app-shell[data-dashboard] .dm-character-access .character-card > div {
  display: contents !important;
}

.app-shell[data-dashboard] .dm-character-access .character-card img,
.app-shell[data-dashboard] .dm-character-access .character-card .portrait,
.app-shell[data-dashboard] .dm-character-access .character-card .character-avatar {
  grid-column: 1 !important;
  grid-row: 1 / 4 !important;
  width: 42px !important;
  height: 42px !important;
  align-self: center !important;
  justify-self: center !important;
  border-radius: 8px !important;
}

.app-shell[data-dashboard] .dm-character-access .character-card strong {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: end !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: #fff8ff !important;
  font-size: 0.98rem !important;
  line-height: 1.05 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.app-shell[data-dashboard] .dm-character-access .character-card span {
  grid-column: 2 !important;
  grid-row: 2 !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: rgba(205, 217, 232, 0.62) !important;
  font-size: 0.72rem !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.app-shell[data-dashboard] .dm-character-access .character-card em {
  grid-column: 3 !important;
  grid-row: 1 / 3 !important;
  align-self: start !important;
  justify-self: end !important;
  max-width: 9.2rem !important;
  margin: 0 !important;
  padding: 0.23rem 0.42rem !important;
  border: 1px solid rgba(32, 217, 231, 0.3) !important;
  border-radius: 999px !important;
  color: #d9faff !important;
  background: rgba(32, 217, 231, 0.12) !important;
  font-size: 0.58rem !important;
  line-height: 1.05 !important;
  text-align: center !important;
  white-space: normal !important;
}

.app-shell[data-dashboard] .dm-character-access .character-card .sheet-link {
  grid-column: 3 !important;
  grid-row: 3 !important;
  align-self: end !important;
  justify-self: end !important;
  min-width: 84px !important;
  min-height: 30px !important;
  padding: 0.34rem 0.58rem !important;
  border-radius: 7px !important;
  font-size: 0.62rem !important;
  line-height: 1.05 !important;
}

@media (min-width: 1600px) {
  .app-shell[data-dashboard] .dm-character-access .character-strip {
    grid-template-columns: repeat(auto-fill, minmax(292px, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  .app-shell[data-dashboard] .dm-character-access .character-strip {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
  }

  .app-shell[data-dashboard] .dm-character-access .character-card {
    grid-template-columns: 46px minmax(0, 1fr) !important;
  }

  .app-shell[data-dashboard] .dm-character-access .character-card em,
  .app-shell[data-dashboard] .dm-character-access .character-card .sheet-link {
    grid-column: 2 !important;
    justify-self: start !important;
  }

  .app-shell[data-dashboard] .dm-character-access .character-card em {
    grid-row: 3 !important;
  }

  .app-shell[data-dashboard] .dm-character-access .character-card .sheet-link {
    grid-row: 4 !important;
    margin-top: 0.3rem !important;
  }
}

/* DM Campaign Characters portrait-card refinement */
.app-shell[data-dashboard] .dm-character-access .character-strip {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(390px, 1fr)) !important;
  align-items: stretch !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  max-width: 100% !important;
}

.app-shell[data-dashboard] .dm-character-access .dm-managed-character-card {
  position: relative !important;
  width: 100% !important;
  min-height: 128px !important;
  display: grid !important;
  grid-template-columns: 112px minmax(0, 1fr) auto !important;
  grid-template-rows: auto 1fr auto !important;
  gap: 0.35rem 1rem !important;
  align-items: center !important;
  padding: 0.9rem 1rem !important;
  border: 1px solid rgba(32, 217, 231, 0.22) !important;
  border-radius: 12px !important;
  background:
    radial-gradient(circle at 0% 50%, rgba(32, 217, 231, 0.12), transparent 42%),
    linear-gradient(135deg, rgba(20, 60, 72, 0.9), rgba(17, 43, 53, 0.86)) !important;
  box-shadow: inset 0 0 0 1px rgba(32, 217, 231, 0.06) !important;
}

.app-shell[data-dashboard] .dm-character-access .dm-managed-character-card > .character-portrait {
  grid-column: 1 !important;
  grid-row: 1 / 4 !important;
  width: 88px !important;
  height: 88px !important;
  align-self: center !important;
  justify-self: center !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 151, 36, 0.25) !important;
  background: rgba(6, 15, 22, 0.65) !important;
}

.app-shell[data-dashboard] .dm-character-access .dm-managed-character-card > .dm-character-copy {
  grid-column: 2 !important;
  grid-row: 1 / 4 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 0.28rem !important;
}

.app-shell[data-dashboard] .dm-character-access .dm-managed-character-card .character-name {
  grid-column: auto !important;
  grid-row: auto !important;
  max-width: 100% !important;
  color: #fff8ff !important;
  font-size: clamp(1.25rem, 1.4vw, 1.75rem) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.app-shell[data-dashboard] .dm-character-access .dm-managed-character-card .character-player-line {
  grid-column: auto !important;
  grid-row: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  color: rgba(190, 205, 224, 0.72) !important;
  font-size: 0.9rem !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.app-shell[data-dashboard] .dm-character-access .dm-managed-character-card .character-player-line span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.app-shell[data-dashboard] .dm-character-access .dm-managed-character-card .player-avatar {
  grid-column: auto !important;
  grid-row: auto !important;
  flex: 0 0 auto !important;
  width: 34px !important;
  height: 34px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  border: 1px solid rgba(32, 217, 231, 0.18) !important;
  background: rgba(4, 10, 16, 0.78) !important;
}

.app-shell[data-dashboard] .dm-character-access .dm-managed-character-card .character-status {
  grid-column: auto !important;
  grid-row: auto !important;
  display: block !important;
  max-width: 100% !important;
  color: rgba(220, 230, 239, 0.58) !important;
  font-size: 1.08rem !important;
  line-height: 1.12 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.app-shell[data-dashboard] .dm-character-access .dm-managed-character-card .campaign-pill {
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-self: start !important;
  justify-self: end !important;
  max-width: 13rem !important;
  padding: 0.36rem 0.78rem !important;
  border: 1px solid rgba(32, 217, 231, 0.4) !important;
  border-radius: 999px !important;
  color: #e8fcff !important;
  background: rgba(32, 217, 231, 0.12) !important;
  box-shadow: inset 0 0 18px rgba(32, 217, 231, 0.07) !important;
  font-size: 0.78rem !important;
  line-height: 1.05 !important;
  text-align: center !important;
  white-space: normal !important;
}

.app-shell[data-dashboard] .dm-character-access .dm-managed-character-card .sheet-link {
  grid-column: 3 !important;
  grid-row: 3 !important;
  align-self: end !important;
  justify-self: end !important;
  min-width: 116px !important;
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  font-size: 0.74rem !important;
}

.app-shell[data-dashboard] .dm-character-access .dm-managed-character-card .character-delete-button {
  grid-column: 3 !important;
  grid-row: 2 !important;
  align-self: center !important;
  justify-self: end !important;
  min-width: 84px !important;
  min-height: 28px !important;
  padding: 0.28rem 0.5rem !important;
  border: 1px solid rgba(220, 53, 37, 0.48) !important;
  border-radius: 7px !important;
  color: #ffb2ad !important;
  background: rgba(122, 21, 18, 0.18) !important;
  font-size: 0.56rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

.app-shell[data-dashboard] .dm-character-access .dm-managed-character-card .character-delete-button.is-confirming {
  color: #fff !important;
  background: #a5211c !important;
}

.app-shell[data-dashboard] .dm-character-access .dm-managed-character-card.is-deleting {
  opacity: 0 !important;
  transform: scale(0.96) !important;
  transition: 0.18s ease !important;
}

@media (max-width: 1280px) {
  .app-shell[data-dashboard] .dm-character-access .character-strip {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important;
  }

  .app-shell[data-dashboard] .dm-character-access .dm-managed-character-card {
    grid-template-columns: 96px minmax(0, 1fr) !important;
  }

  .app-shell[data-dashboard] .dm-character-access .dm-managed-character-card .campaign-pill,
  .app-shell[data-dashboard] .dm-character-access .dm-managed-character-card .sheet-link {
    grid-column: 2 !important;
    justify-self: start !important;
  }

  .app-shell[data-dashboard] .dm-character-access .dm-managed-character-card .campaign-pill {
    grid-row: 3 !important;
  }

  .app-shell[data-dashboard] .dm-character-access .dm-managed-character-card .sheet-link {
    grid-row: 4 !important;
    margin-top: 0.45rem !important;
  }
}

@media (max-width: 560px) {
  .app-shell[data-dashboard] .dm-character-access .character-strip {
    grid-template-columns: 1fr !important;
  }

  .app-shell[data-dashboard] .dm-character-access .dm-managed-character-card {
    grid-template-columns: 84px minmax(0, 1fr) !important;
    padding: 0.75rem !important;
  }

  .app-shell[data-dashboard] .dm-character-access .dm-managed-character-card > .character-portrait {
    width: 72px !important;
    height: 72px !important;
  }

  .app-shell[data-dashboard] .dm-character-access .dm-managed-character-card .character-delete-button {
    grid-column: 2 !important;
    grid-row: 5 !important;
    justify-self: start !important;
  }
}

/* DM Campaign Characters compact scale */
.app-shell[data-dashboard] .dm-character-access .character-strip {
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)) !important;
  gap: 0.5rem !important;
}

.app-shell[data-dashboard] .dm-character-access .dm-managed-character-card {
  min-height: 94px !important;
  grid-template-columns: 72px minmax(0, 1fr) auto !important;
  gap: 0.18rem 0.62rem !important;
  padding: 0.58rem 0.64rem !important;
  border-radius: 9px !important;
}

.app-shell[data-dashboard] .dm-character-access .dm-managed-character-card > .character-portrait {
  width: 58px !important;
  height: 58px !important;
  border-radius: 8px !important;
}

.app-shell[data-dashboard] .dm-character-access .dm-managed-character-card > .dm-character-copy {
  gap: 0.18rem !important;
}

.app-shell[data-dashboard] .dm-character-access .dm-managed-character-card .character-name {
  font-size: 1.02rem !important;
  line-height: 1.02 !important;
}

.app-shell[data-dashboard] .dm-character-access .dm-managed-character-card .character-player-line {
  gap: 0.34rem !important;
  font-size: 0.7rem !important;
  line-height: 1.05 !important;
}

.app-shell[data-dashboard] .dm-character-access .dm-managed-character-card .player-avatar {
  width: 22px !important;
  height: 22px !important;
  border-radius: 5px !important;
}

.app-shell[data-dashboard] .dm-character-access .dm-managed-character-card .character-status {
  font-size: 0.82rem !important;
  line-height: 1.08 !important;
}

.app-shell[data-dashboard] .dm-character-access .dm-managed-character-card .campaign-pill {
  max-width: 8.9rem !important;
  padding: 0.22rem 0.52rem !important;
  font-size: 0.58rem !important;
}

.app-shell[data-dashboard] .dm-character-access .dm-managed-character-card .sheet-link {
  min-width: 84px !important;
  min-height: 30px !important;
  padding: 0.3rem 0.5rem !important;
  border-radius: 7px !important;
  font-size: 0.58rem !important;
}

@media (max-width: 1280px) {
  .app-shell[data-dashboard] .dm-character-access .character-strip {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)) !important;
  }

  .app-shell[data-dashboard] .dm-character-access .dm-managed-character-card {
    grid-template-columns: 72px minmax(0, 1fr) auto !important;
  }

  .app-shell[data-dashboard] .dm-character-access .dm-managed-character-card > .dm-character-copy {
    grid-column: 2 !important;
    grid-row: 1 / 4 !important;
  }

  .app-shell[data-dashboard] .dm-character-access .dm-managed-character-card .campaign-pill {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
  }

  .app-shell[data-dashboard] .dm-character-access .dm-managed-character-card .sheet-link {
    grid-column: 3 !important;
    grid-row: 3 !important;
    justify-self: end !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 560px) {
  .app-shell[data-dashboard] .dm-character-access .character-strip {
    grid-template-columns: 1fr !important;
  }

  .app-shell[data-dashboard] .dm-character-access .dm-managed-character-card {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    min-height: 88px !important;
  }

  .app-shell[data-dashboard] .dm-character-access .dm-managed-character-card > .character-portrait {
    width: 52px !important;
    height: 52px !important;
  }
}

/* DM Campaign Characters left-anchored copy */
.app-shell[data-dashboard] .dm-character-access .dm-managed-character-card > .dm-character-copy {
  justify-self: stretch !important;
  text-align: left !important;
}

.app-shell[data-dashboard] .dm-character-access .dm-managed-character-card .character-name,
.app-shell[data-dashboard] .dm-character-access .dm-managed-character-card .character-player-line,
.app-shell[data-dashboard] .dm-character-access .dm-managed-character-card .character-status {
  align-self: flex-start !important;
  justify-self: start !important;
  text-align: left !important;
}

/* VORTEX SVG dice and shared roller */
.vortex-console .die,
.genesys-die-token .die,
.dice-ref-group .die {
  width: 18px !important;
  height: 18px !important;
  display: inline-block !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  transform: none !important;
  background-color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  box-shadow: none !important;
  vertical-align: -0.18em;
}

.vortex-console .die.boost,
.genesys-die-token .die.boost,
.dice-ref-group .die.boost {
  background-image: url("/assets/dice/boost.svg") !important;
}

.vortex-console .die.ability,
.genesys-die-token .die.ability,
.dice-ref-group .die.ability {
  background-image: url("/assets/dice/ability.svg") !important;
}

.vortex-console .die.proficiency,
.genesys-die-token .die.proficiency,
.dice-ref-group .die.proficiency {
  background-image: url("/assets/dice/proficiency.svg") !important;
}

.vortex-console .die.setback,
.genesys-die-token .die.setback,
.dice-ref-group .die.setback {
  background-image: url("/assets/dice/setback.svg") !important;
}

.vortex-console .die.difficulty,
.genesys-die-token .die.difficulty,
.dice-ref-group .die.difficulty {
  background-image: url("/assets/dice/difficulty.svg") !important;
}

.vortex-console .die.challenge,
.genesys-die-token .die.challenge,
.dice-ref-group .die.challenge {
  background-image: url("/assets/dice/challenge.svg") !important;
}

.sweote-console .die.force,
.genesys-die-token .die.force,
.sweote-console .dice-ref-group .die.force {
  display: inline-block !important;
  background: transparent url("/assets/dice/force.svg") center / contain no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.sweote-console .result-symbol.light,
.sweote-console .result-symbol.dark {
  display: inline-grid !important;
}

.vortex-console .die.empty,
.genesys-die-token .die.empty,
.dice-ref-group .die.empty {
  background-image: url("/assets/dice/empty.svg") !important;
}

.euphorium-token {
  display: inline-block !important;
  width: 1.35em !important;
  height: 1.35em !important;
  min-width: 1.35em !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("/assets/dice/euphorium.svg") center / contain no-repeat !important;
  vertical-align: -0.26em;
}

.vortex-console .rollable-pool {
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: inherit;
  min-height: 28px;
  cursor: pointer;
}

.vortex-console .rollable-pool:hover,
.vortex-console .rollable-pool:focus-visible {
  filter: drop-shadow(0 0 8px rgba(32, 217, 231, 0.36));
  outline: none;
}

.dice-roller-panel {
  display: grid;
  gap: 1rem;
}

.dice-roller-card {
  border: 1px solid rgba(32, 217, 231, 0.18);
  border-radius: 8px;
  background: rgba(8, 27, 35, 0.78);
  padding: 1rem;
}

.dice-roller-label {
  display: grid;
  gap: 0.35rem;
  color: var(--vx-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dice-roller-current {
  display: grid;
  gap: 0.45rem;
  margin: 0.85rem 0;
  padding: 0.75rem;
  border: 1px solid rgba(119, 151, 180, 0.14);
  border-radius: 8px;
  background: rgba(5, 12, 20, 0.7);
}

.dice-roller-current .dice-row {
  gap: 0.38rem;
}

.dice-roller-current .die,
.dice-roller-controls .die {
  width: 24px !important;
  height: 24px !important;
}

.dice-roller-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
  gap: 0.55rem;
}

.dice-roller-die-control {
  position: relative;
  display: block;
  min-width: 0;
}

.dice-roller-die-add {
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 3rem !important;
  padding: 0.55rem;
  border: 1px solid rgba(119, 151, 180, 0.14);
  border-radius: 8px;
  background: rgba(3, 10, 18, 0.54);
  text-align: left;
}

.dice-roller-die-remove {
  position: absolute;
  right: 0.35rem;
  top: -0.35rem;
  width: 1.25rem !important;
  min-width: 1.25rem !important;
  height: 1.25rem !important;
  min-height: 1.25rem !important;
  border-radius: 999px !important;
  background: rgba(5, 15, 24, 0.96);
  border: 1px solid rgba(32, 217, 231, 0.28);
  color: var(--vx-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 0.8rem;
  line-height: 1;
}

.dice-roller-die-remove:disabled {
  opacity: 0;
  pointer-events: none;
}

.dice-roller-die-add:hover,
.dice-roller-die-remove:hover {
  border-color: rgba(32, 217, 231, 0.62);
  box-shadow: 0 0 14px rgba(32, 217, 231, 0.18);
}

.dice-roller-die-add span {
  color: var(--vx-text);
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dice-roller-die-add strong {
  color: var(--vx-cyan);
  text-align: center;
  padding-right: 1.1rem;
}

.dice-roller-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 0.9rem;
}

.dice-roller-actions [data-roller-roll] {
  background: var(--vx-orange);
  color: #130b06;
}

.dice-roller-actions [data-roller-story-proficiency].armed {
  border-color: rgba(88, 214, 141, 0.75);
  background: rgba(88, 214, 141, 0.16);
  color: #d9ffe7;
}

.dice-roll-log {
  display: grid;
  gap: 0.75rem;
  max-height: min(54vh, 620px);
  overflow: auto;
  padding-right: 0.2rem;
}

@media (min-width: 1025px) {
  .vortex-console.library-open .vortex-main-grid {
    grid-template-columns: minmax(0, 1fr) minmax(430px, 460px) !important;
  }

  .vortex-console.library-open .library-tabs {
    flex-wrap: wrap !important;
    overflow: visible !important;
    row-gap: 0.3rem !important;
    min-height: auto !important;
    padding-top: 0.65rem !important;
  }

  .vortex-console.library-open .library-tabs button {
    flex: 1 1 5.6rem !important;
    max-width: none !important;
    min-height: 2.55rem !important;
    white-space: normal !important;
  }

  .vortex-console.library-open .library-tabs [data-close-library] {
    flex: 0 0 4.6rem !important;
    margin-left: 0 !important;
  }
}

.dice-roll-entry {
  display: grid;
  gap: 0.35rem;
  padding: 0.75rem;
  border: 1px solid rgba(166, 105, 255, 0.3);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(28, 18, 58, 0.88), rgba(4, 18, 26, 0.88));
}

.dice-roll-entry > div {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  color: var(--vx-muted);
  font-size: 0.78rem;
}

.dice-roll-entry strong {
  color: var(--vx-text);
}

.dice-roll-entry p {
  margin: 0;
}

.dice-roll-badges,
.dice-roll-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start !important;
  gap: 0.4rem;
}

.dice-roll-badges b,
.dice-roll-badges span,
.dice-roll-actions button {
  width: auto;
  padding: 0.28rem 0.5rem;
  border: 1px solid rgba(32, 217, 231, 0.22);
  border-radius: 999px;
  background: rgba(4, 16, 26, 0.72);
  color: var(--vx-text);
  font-size: 0.72rem;
  line-height: 1.1;
}

.dice-roll-badges b {
  border-color: rgba(242, 140, 40, 0.36);
  color: #ffd1a0;
}

.dice-roll-actions button {
  border-radius: 7px;
  color: var(--vx-cyan);
  cursor: pointer;
}

.dice-roll-actions button:hover {
  border-color: rgba(32, 217, 231, 0.58);
  box-shadow: 0 0 14px rgba(32, 217, 231, 0.16);
}

.dice-roll-attempts {
  display: grid !important;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.dice-roll-attempt {
  display: grid !important;
  gap: 0.42rem;
  padding: 0.55rem;
  border: 1px solid rgba(119, 151, 180, 0.18);
  border-radius: 7px;
  background: rgba(2, 11, 18, 0.7);
}

.dice-roll-attempt.kept {
  border-color: rgba(88, 211, 107, 0.5);
  box-shadow: inset 3px 0 0 rgba(88, 211, 107, 0.72);
}

.dice-roll-attempt > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--vx-muted);
  font-size: 0.76rem;
}

.dice-roll-attempt > div:first-child b {
  color: var(--vx-green);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rolled-dice-strip {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start !important;
  gap: 0.35rem;
}

.rolled-die {
  width: 46px;
  min-height: 44px;
  display: grid;
  grid-template-rows: 22px minmax(14px, auto);
  place-items: center;
  gap: 0.12rem;
  padding: 0.28rem;
  border: 1px solid rgba(119, 151, 180, 0.2);
  border-radius: 7px;
  background: rgba(5, 16, 26, 0.84);
}

.rolled-die .die {
  width: 22px !important;
  height: 22px !important;
}

.rolled-die > span {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.06rem;
  min-height: 0.85rem;
}

.rolled-die .genesys-inline-symbol.result-symbol {
  width: 0.82rem;
  min-width: 0.82rem;
  height: 0.82rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  vertical-align: middle;
}

.rolled-die .genesys-inline-symbol.result-symbol svg {
  width: 0.82rem;
  height: 0.82rem;
}

.rolled-face-empty {
  color: rgba(166, 181, 201, 0.7);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.dice-roll-empty {
  color: var(--vx-muted);
}

/* Sheet drawer and dice-roller repair pass */
.vortex-quick-links .quick-icon circle,
.vortex-quick-links .quick-icon rect,
.rules-reference-button svg path,
.rules-reference-button svg rect,
.library-heading [data-collapse-library] svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rules-reference-button {
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
}

.rules-reference-button svg {
  width: 1rem;
  height: 1rem;
}

.library-heading [data-collapse-library] {
  display: inline-grid;
  place-items: center;
}

.library-heading [data-collapse-library] svg {
  width: 1rem;
  height: 1rem;
  transition: transform 140ms ease;
}

[data-library-section].is-collapsed > :not(.library-heading) {
  display: none !important;
}

[data-library-section].is-collapsed .library-heading [data-collapse-library] svg {
  transform: rotate(-90deg);
}

.library-tabs {
  gap: clamp(0.45rem, 1vw, 0.85rem);
  overflow-x: auto;
  scrollbar-width: thin;
}

.library-tabs button {
  flex: 0 0 auto;
  min-width: 0;
  max-width: 7.2rem;
  font-size: clamp(0.68rem, 0.76vw, 0.82rem);
  line-height: 1.12;
  white-space: normal;
  text-align: center;
}

.library-tabs [data-close-library] {
  max-width: 4.8rem;
}

.vortex-character-banner,
.vortex-vitals,
.vortex-main-grid,
.vortex-center,
.vortex-page {
  max-width: 100%;
}

.vortex-vitals {
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
}

.vortex-console.library-open .vortex-character-banner {
  grid-template-columns: minmax(118px, 150px) minmax(0, 1fr);
  align-items: start;
}

.vortex-console.library-open .vortex-vitals {
  grid-column: 1 / -1;
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
}

.vortex-console.library-open .vortex-portrait {
  width: min(142px, 100%);
  height: auto;
  aspect-ratio: 1;
}

.vortex-console.library-open .vortex-center,
.vortex-console.library-open .vortex-page,
.vortex-console.library-open .vx-panel,
.vortex-console.library-open .sheet-table {
  min-width: 0;
  overflow-x: hidden;
}

.vortex-console.library-open .vx-skill-head,
.vortex-console.library-open .skill-row {
  grid-template-columns:
    minmax(150px, 1fr)
    minmax(46px, 60px)
    minmax(112px, 132px)
    minmax(44px, 54px)
    minmax(40px, 48px)
    minmax(104px, 122px)
    38px !important;
  gap: 0.35rem !important;
}

.vortex-console.library-open .skill-row {
  padding-inline: 0.48rem !important;
}

.vortex-console.library-open .skill-row .rank-buy-controls {
  min-width: 0;
  gap: 0.22rem;
}

.vortex-console.library-open .skill-row .rank-buy-controls button,
.vortex-console.library-open .skill-row .rank-buy-controls strong {
  min-width: 30px;
}

.vortex-console.library-open .skill-row .dice-row {
  min-width: 0;
  overflow: hidden;
}

.vortex-console.library-open .skill-row .die,
.vortex-console.library-open .skill-row .empty-die {
  width: 16px !important;
  height: 16px !important;
}

@media (max-width: 1180px) {
  .vortex-character-banner {
    grid-template-columns: minmax(104px, 136px) minmax(0, 1fr);
  }

  .vortex-vitals {
    grid-column: 1 / -1;
  }
}

/* Responsive sheet/drawer stability pass */
.vortex-console {
  overflow-x: clip;
}

.vortex-workbench,
.vortex-center,
.vortex-page,
.vx-panel,
.vx-skill-table {
  min-width: 0 !important;
}

.vortex-character-banner {
  max-width: 100%;
  overflow: visible;
}

.vortex-character-banner .vortex-vitals {
  justify-self: end;
  max-width: min(100%, 720px) !important;
}

.vortex-console.library-open .vortex-library-panel {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  z-index: 5000 !important;
  width: min(430px, 34vw) !important;
  max-width: calc(100vw - 1rem) !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  border-left: 1px solid rgba(32, 217, 231, 0.28) !important;
  box-shadow: -28px 0 64px rgba(0, 0, 0, 0.5) !important;
}

.vortex-console.library-open .vortex-main-grid {
  grid-template-columns: minmax(0, 1fr) !important;
}

.vortex-console.library-open .vortex-character-banner,
.vortex-console.library-open .vortex-center,
.vortex-console.library-open .vortex-sheet-tabs,
.vortex-console.library-open .vortex-page,
.vortex-console.library-open .active-pool-dock {
  max-width: calc(100vw - var(--sidebar-width, 178px) - min(430px, 34vw) - 2.25rem) !important;
}

.vortex-console.library-open .vortex-character-banner .vortex-vitals {
  grid-column: 1 / -1 !important;
  justify-self: stretch !important;
  width: 100% !important;
}

.vortex-console.library-open .library-tabs {
  min-height: 56px;
  display: flex;
  align-items: end;
  gap: 0.45rem;
  overflow: visible;
  padding: 0.7rem 0.75rem 0;
}

.vortex-console.library-open .library-tabs button {
  flex: 1 1 0;
  max-width: none;
  min-height: 42px;
  padding-inline: 0.2rem;
  font-size: 0.66rem;
}

.vortex-console.library-open .library-tabs [data-close-library] {
  flex: 0 0 auto;
  max-width: none;
}

@media (max-width: 1360px) {
  .vortex-console.library-open .vortex-library-panel {
    width: min(390px, 36vw) !important;
  }

  .vortex-console.library-open .vortex-character-banner,
  .vortex-console.library-open .vortex-center,
  .vortex-console.library-open .vortex-sheet-tabs,
  .vortex-console.library-open .vortex-page,
  .vortex-console.library-open .active-pool-dock {
    max-width: calc(100vw - var(--sidebar-width, 178px) - min(390px, 36vw) - 2rem) !important;
  }

  .vortex-console.library-open .vx-skill-head {
    display: none !important;
  }

  .vortex-console.library-open .skill-row,
  .vortex-console .vx-skill-table .skill-row {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    grid-template-areas:
      "name rank manage"
      "career ability prof"
      "dice dice dice" !important;
    gap: 0.42rem 0.58rem !important;
    align-items: center !important;
    padding: 0.65rem !important;
    border: 1px solid rgba(119, 151, 180, 0.14) !important;
    border-radius: 8px !important;
    background: rgba(8, 19, 28, 0.72) !important;
  }

  .vortex-console.library-open .skill-row + .skill-row,
  .vortex-console .vx-skill-table .skill-row + .skill-row {
    margin-top: 0.35rem;
  }

  .skill-row .skill-name { grid-area: name !important; min-width: 0 !important; }
  .skill-row .rank-buy-controls { grid-area: rank !important; justify-self: end !important; }
  .skill-row .skill-info-button { grid-area: manage !important; justify-self: end !important; }
  .skill-row .career-dot { grid-area: career !important; }
  .skill-row .ability-readout { grid-area: ability !important; }
  .skill-row .prof-readout { grid-area: prof !important; }
  .skill-row .dice-row { grid-area: dice !important; justify-self: stretch !important; min-width: 0 !important; overflow: visible !important; }

  .skill-row .career-dot::before,
  .skill-row .ability-readout::before,
  .skill-row .prof-readout::before,
  .skill-row .dice-row::before {
    display: inline-block;
    margin-right: 0.35rem;
    color: var(--vx-cyan);
    font-size: 0.62rem;
    font-weight: 950;
    text-transform: uppercase;
  }

  .skill-row .career-dot::before { content: "Career"; }
  .skill-row .ability-readout::before { content: "Ability"; }
  .skill-row .prof-readout::before { content: "Prof"; }
  .skill-row .dice-row::before { content: "Pool"; }
}

@media (max-width: 1160px) {
  .vortex-console.library-open .vortex-library-panel {
    width: min(360px, 42vw) !important;
  }

  .vortex-console.library-open .vortex-character-banner,
  .vortex-console.library-open .vortex-center,
  .vortex-console.library-open .vortex-sheet-tabs,
  .vortex-console.library-open .vortex-page,
  .vortex-console.library-open .active-pool-dock {
    max-width: calc(100vw - var(--sidebar-width, 178px) - min(360px, 42vw) - 1.5rem) !important;
  }
}

@media (max-width: 1024px) {
  .vortex-console.library-open .vortex-library-panel {
    left: 0 !important;
    width: 100vw !important;
  }

  .vortex-console.library-open .vortex-character-banner,
  .vortex-console.library-open .vortex-center,
  .vortex-console.library-open .vortex-sheet-tabs,
  .vortex-console.library-open .vortex-page,
  .vortex-console.library-open .active-pool-dock {
    max-width: 100% !important;
  }
}

.xp-log-open-button {
  width: 100%;
  justify-content: center;
}

.xp-log-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483200;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(1, 4, 8, 0.74);
  backdrop-filter: blur(12px);
}

.xp-log-overlay[hidden] {
  display: none !important;
}

.xp-log-card {
  width: min(920px, 94vw);
  max-height: min(780px, 88dvh);
  overflow: auto;
  border: 1px solid rgba(32, 217, 231, 0.36);
  border-radius: 10px;
  background:
    radial-gradient(circle at 0 0, rgba(32, 217, 231, 0.12), transparent 18rem),
    radial-gradient(circle at 100% 0, rgba(169, 107, 255, 0.14), transparent 18rem),
    #07111b;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.58);
}

.xp-log-card > header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
  padding: 1rem;
  border-bottom: 1px solid rgba(119, 151, 180, 0.18);
  background: rgba(7, 17, 27, 0.96);
}

.xp-log-card h2 {
  margin: 0;
  color: #fff;
  text-transform: uppercase;
}

.xp-log-card [data-xp-log-close] {
  min-width: 42px;
  min-height: 42px;
}

.xp-log-body {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

.xp-log-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(110px, 1fr));
  gap: 0.75rem;
}

.xp-log-summary article,
.xp-log-table {
  border: 1px solid rgba(119, 151, 180, 0.15);
  border-radius: 8px;
  background: rgba(4, 10, 17, 0.62);
}

.xp-log-summary article {
  display: grid;
  gap: 0.25rem;
  padding: 0.85rem;
}

.xp-log-summary span,
.xp-log-table h3,
.xp-log-table span {
  color: var(--vx-cyan);
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
}

.xp-log-summary strong {
  color: #fff;
  font-size: 1.7rem;
  line-height: 1;
}

.xp-log-summary small {
  color: var(--vx-muted);
  font-size: 0.72rem;
}

.xp-log-table {
  padding: 0.85rem;
}

.xp-log-table h3 {
  margin: 0 0 0.6rem;
}

.xp-log-table div {
  display: grid;
  grid-template-columns: minmax(120px, 0.45fr) minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.48rem 0;
  border-top: 1px solid rgba(119, 151, 180, 0.1);
}

.xp-log-table strong {
  min-width: 0;
  color: #dce8ff;
}

.xp-log-table b,
.xp-log-summary .danger {
  color: var(--vx-orange);
}

@media (max-width: 760px) {
  .xp-log-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .xp-log-table div {
    grid-template-columns: 1fr auto;
  }

  .xp-log-table div span {
    grid-column: 1 / -1;
  }
}


/* Hotfix 1.02.10072600.03: XP manager, drawer, and skill responsiveness */
.xp-popover {
  width: min(430px, 92vw) !important;
}

.xp-popover .xp-adjust-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.5rem !important;
}

.xp-popover .xp-adjust-row label {
  grid-column: 1 / -1 !important;
}

.xp-popover .xp-adjust-row button,
.xp-popover .xp-log-open-button {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.58rem 0.75rem !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 134, 31, 0.42) !important;
  background: linear-gradient(180deg, #ffa235, #ff861f) !important;
  color: #071018 !important;
  font-size: 0.82rem !important;
  font-weight: 950 !important;
  line-height: 1.08 !important;
  text-align: center !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

.xp-popover .xp-log-open-button {
  margin-top: 0.5rem !important;
  width: 100% !important;
  border-color: rgba(32, 217, 231, 0.42) !important;
  background:
    linear-gradient(180deg, rgba(32, 217, 231, 0.18), rgba(32, 217, 231, 0.08)),
    rgba(7, 19, 30, 0.92) !important;
  color: var(--vx-cyan) !important;
}

.xp-popover .xp-adjust-row button:hover,
.xp-popover .xp-log-open-button:hover,
.xp-popover .xp-adjust-row button:focus-visible,
.xp-popover .xp-log-open-button:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.xp-popover .xp-warning-toggle {
  min-height: 34px;
  margin-top: 0.55rem;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center;
  padding: 0.42rem 0.55rem;
  border: 1px solid rgba(119, 151, 180, 0.16);
  border-radius: 8px;
  background: rgba(3, 8, 14, 0.58);
  color: #dce8f7;
  text-transform: none;
  letter-spacing: 0;
}

.xp-popover .xp-warning-toggle input {
  width: auto;
  min-height: 0;
}

.vortex-console.library-open .vortex-character-banner,
.vortex-console.library-open .vortex-center,
.vortex-console.library-open .vortex-sheet-tabs,
.vortex-console.library-open .vortex-page,
.vortex-console.library-open .active-pool-dock {
  max-width: 100% !important;
}

.vortex-console.library-open .vortex-character-banner .vortex-vitals {
  grid-column: auto !important;
  justify-self: end !important;
  width: min(100%, 680px) !important;
  max-width: 680px !important;
}

.vortex-console.library-open .vortex-library-panel {
  width: min(400px, 32vw) !important;
}

@media (max-width: 1280px) {
  .vortex-console.library-open .vortex-library-panel {
    width: min(340px, 36vw) !important;
  }
}

@media (max-width: 1120px) {
  .vortex-console.library-open .vortex-library-panel {
    width: min(330px, 38vw) !important;
  }
}

.rank-buy-controls {
  grid-template-columns: 28px 34px 48px !important;
  width: max-content !important;
  gap: 0.24rem !important;
}

.manager-rank-controls {
  grid-template-columns: 30px 42px 56px !important;
}

.rank-buy-controls button[data-skill-rank-up] {
  min-width: 0 !important;
  width: 48px !important;
  padding: 0.1rem 0.16rem !important;
}

.manager-rank-controls button[data-skill-rank-up] {
  width: 56px !important;
}

.rank-buy-controls button[data-skill-rank-up] small {
  max-width: 100%;
  font-size: 0.5rem !important;
  white-space: nowrap;
}

.skill-mobile-toolbar {
  align-items: center;
}

.skill-section-toggle {
  min-width: max-content;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.42rem;
  color: #b9c6d8;
  font-size: 0.62rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.skill-section-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.skill-section-toggle span {
  width: 36px;
  height: 20px;
  position: relative;
  display: inline-block;
  border: 1px solid rgba(255, 134, 31, 0.5);
  border-radius: 999px;
  background: rgba(255, 134, 31, 0.14);
  box-shadow: inset 0 0 0 1px rgba(3, 8, 14, 0.52);
}

.skill-section-toggle span::after {
  content: "";
  width: 14px;
  height: 14px;
  position: absolute;
  top: 2px;
  left: 3px;
  border-radius: 999px;
  background: var(--vx-orange);
  box-shadow: 0 0 12px rgba(255, 134, 31, 0.38);
  transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.skill-section-toggle input:checked + span {
  border-color: rgba(32, 217, 231, 0.62);
  background: rgba(32, 217, 231, 0.14);
}

.skill-section-toggle input:checked + span::after {
  transform: translateX(15px);
  background: var(--vx-cyan);
  box-shadow: 0 0 12px rgba(32, 217, 231, 0.42);
}

.skill-section-toggle input:focus-visible + span {
  outline: 2px solid rgba(32, 217, 231, 0.7);
  outline-offset: 3px;
}

.vx-skill-head.is-sortable > span:last-child {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.skill-category-row,
.skill-category-empty {
  min-width: 0 !important;
}

@media (max-width: 1360px) {
  .skill-mobile-toolbar {
    display: flex !important;
    flex-wrap: wrap;
  }

  .skill-mobile-toolbar .skill-section-toggle {
    margin-left: auto;
  }
}

/* Hotfix 2.02.10072600.04: XP sources, beta compact rows, vehicle cards, and drawer spacing */
.xp-source-log {
  padding: 0.85rem;
  border: 1px solid rgba(32, 217, 231, 0.18);
  border-radius: 8px;
  background: rgba(3, 10, 18, 0.62);
}

.xp-source-log > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.xp-source-log h3 {
  margin: 0;
  color: #f5f8ff;
  font-size: 0.98rem;
}

.xp-source-log header span,
.xp-source-empty {
  color: var(--vx-muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.xp-source-form {
  display: grid;
  grid-template-columns: 90px minmax(150px, 0.8fr) minmax(180px, 1fr) minmax(180px, 1fr) auto;
  gap: 0.5rem;
  align-items: end;
}

.xp-source-form label {
  display: grid;
  gap: 0.22rem;
  color: var(--vx-cyan);
  font-size: 0.62rem;
  font-weight: 950;
  text-transform: uppercase;
}

.xp-source-form input,
.xp-source-form select {
  min-width: 0;
  min-height: 38px;
}

.xp-source-form button,
.xp-source-row button {
  min-height: 38px;
  border: 1px solid rgba(32, 217, 231, 0.36);
  border-radius: 8px;
  background: rgba(32, 217, 231, 0.12);
  color: var(--vx-cyan);
  font-size: 0.74rem;
  font-weight: 950;
  cursor: pointer;
}

.xp-source-list {
  display: grid;
  gap: 0.42rem;
  margin-top: 0.75rem;
}

.xp-source-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.65rem;
  align-items: center;
  padding: 0.5rem;
  border: 1px solid rgba(119, 151, 180, 0.14);
  border-radius: 8px;
  background: rgba(9, 15, 28, 0.72);
}

.xp-source-row strong,
.xp-source-row b {
  color: #f5f8ff;
}

.xp-source-row span {
  display: block;
  margin-top: 0.1rem;
  color: var(--vx-muted);
  font-size: 0.76rem;
}

.beta-ui-toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 0 0 0.55rem;
}

.beta-ui-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--vx-cyan);
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.beta-ui-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.beta-ui-toggle span {
  width: 42px;
  height: 22px;
  position: relative;
  border: 1px solid rgba(255, 134, 31, 0.6);
  border-radius: 999px;
  background: rgba(255, 134, 31, 0.14);
}

.beta-ui-toggle span::after {
  content: "";
  width: 16px;
  height: 16px;
  position: absolute;
  top: 2px;
  left: 3px;
  border-radius: 50%;
  background: var(--vx-orange);
  box-shadow: 0 0 12px rgba(255, 134, 31, 0.38);
  transition: transform 0.16s ease, background 0.16s ease;
}

.beta-ui-toggle input:checked + span {
  border-color: rgba(32, 217, 231, 0.72);
  background: rgba(32, 217, 231, 0.16);
}

.beta-ui-toggle input:checked + span::after {
  transform: translateX(18px);
  background: var(--vx-cyan);
}

.repeat-kind-weapons {
  border-color: rgba(255, 134, 31, 0.52);
  background: linear-gradient(90deg, rgba(255, 134, 31, 0.16), rgba(169, 107, 255, 0.11)), rgba(11, 14, 31, 0.9);
}

.repeat-kind-equipment {
  border-color: rgba(84, 223, 106, 0.42);
  background: linear-gradient(90deg, rgba(84, 223, 106, 0.12), rgba(32, 217, 231, 0.08)), rgba(8, 18, 26, 0.9);
}

.repeat-kind-body-modifications {
  border-color: rgba(169, 107, 255, 0.55);
  background: linear-gradient(90deg, rgba(169, 107, 255, 0.2), rgba(32, 217, 231, 0.08)), rgba(12, 11, 30, 0.92);
}

.repeat-kind-magic-actions {
  border-color: rgba(32, 217, 231, 0.5);
  background: linear-gradient(90deg, rgba(32, 217, 231, 0.12), rgba(169, 107, 255, 0.16)), rgba(7, 17, 26, 0.92);
}

.repeat-kind-hacking-actions {
  border-color: rgba(84, 223, 106, 0.46);
  background: linear-gradient(90deg, rgba(84, 223, 106, 0.12), rgba(32, 217, 231, 0.1)), rgba(7, 18, 18, 0.92);
}

.vehicle-card-list {
  display: grid;
  gap: 0.85rem;
  overflow: visible;
}

.vehicle-card {
  --record-accent: var(--vx-cyan);
  --record-accent-rgb: 32, 217, 231;
  padding: 0.95rem;
  border: 1px solid rgba(32, 217, 231, 0.28);
  border-radius: 8px;
  background:
    radial-gradient(circle at 82% 10%, rgba(32, 217, 231, 0.1), transparent 16rem),
    linear-gradient(135deg, rgba(14, 48, 59, 0.72), rgba(22, 17, 44, 0.72)),
    rgba(5, 13, 22, 0.96);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025), 0 18px 44px rgba(0, 0, 0, 0.22);
}

.vehicle-card.has-custom-color {
  --record-accent: var(--record-custom);
  --record-accent-rgb: var(--record-custom-rgb);
  border-color: rgba(var(--record-custom-rgb), 0.62);
  background:
    radial-gradient(circle at 82% 10%, rgba(var(--record-custom-rgb), 0.18), transparent 16rem),
    linear-gradient(135deg, rgba(var(--record-custom-rgb), 0.18), rgba(22, 17, 44, 0.72)),
    rgba(5, 13, 22, 0.96);
  box-shadow: inset 3px 0 0 var(--record-custom), 0 18px 44px rgba(0, 0, 0, 0.22);
}

.vehicle-card.is-unique {
  --record-accent: #ff668f;
  --record-accent-rgb: 255, 102, 143;
  --record-custom: #ff668f;
  --record-custom-rgb: 255, 102, 143;
  border-color: rgba(255, 92, 127, 0.72);
  background:
    radial-gradient(circle at 82% 10%, rgba(255, 102, 143, 0.22), transparent 16rem),
    linear-gradient(112deg, rgba(255, 51, 108, 0.3), rgba(172, 42, 109, 0.16) 48%, rgba(22, 17, 44, 0.72)),
    rgba(16, 7, 20, 0.97);
  box-shadow: inset 3px 0 0 #ff416f, 0 18px 44px rgba(0, 0, 0, 0.24);
}

.vehicle-card > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.vehicle-card-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.vehicle-card-identity > div {
  min-width: 0;
}

.vehicle-card-identity .compact-record-icon {
  width: 42px;
  height: 42px;
  color: var(--record-custom, var(--vx-cyan));
}

.vehicle-card-identity .compact-record-kicker > span:first-child {
  color: var(--record-custom, var(--vx-cyan));
}

.vehicle-card header span,
.vehicle-card h4 {
  color: var(--vx-cyan);
  font-size: 0.62rem;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.vehicle-card h3 {
  margin: 0.1rem 0;
  color: #fff;
  font-size: 1.18rem;
}

.vehicle-card header p {
  margin: 0;
  color: var(--vx-muted);
  font-weight: 800;
}

.vehicle-stat-grid,
.vehicle-capacity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 0.45rem;
  margin-bottom: 0.62rem;
}

.vehicle-stat {
  min-width: 0;
  padding: 0.5rem;
  border: 1px solid rgba(119, 151, 180, 0.13);
  border-radius: 8px;
  background: rgba(3, 8, 14, 0.5);
}

.vehicle-stat small {
  display: block;
  color: var(--vx-muted);
  font-size: 0.56rem;
  font-weight: 950;
  text-transform: uppercase;
}

.vehicle-stat b {
  display: block;
  margin-top: 0.12rem;
  color: #f5f8ff;
  font-size: 1rem;
}

.vehicle-stat.cyan b { color: var(--vx-cyan); }
.vehicle-stat.green b { color: var(--vx-green); }
.vehicle-stat.orange b { color: var(--vx-orange); }
.vehicle-stat.purple b { color: var(--vx-purple); }

.vehicle-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.65rem;
}

.vehicle-detail-grid section,
.vehicle-armory {
  padding: 0.62rem;
  border: 1px solid rgba(119, 151, 180, 0.12);
  border-radius: 8px;
  background: rgba(7, 14, 24, 0.58);
}

.vehicle-detail-grid p,
.vehicle-armory ul {
  margin: 0.28rem 0 0;
  color: #d6e3f5;
  font-size: 0.82rem;
  line-height: 1.35;
}

.vehicle-armory ul {
  display: grid;
  gap: 0.42rem;
  padding: 0;
  list-style: none;
}

.vehicle-armory li {
  display: grid;
  gap: 0.12rem;
}

.vehicle-armory span,
.vehicle-armory em {
  color: var(--vx-muted);
  font-size: 0.76rem;
  font-style: normal;
}

.vehicle-editor-row {
  min-width: 0;
  margin-top: 0.7rem;
}

@media (min-width: 1025px) {
  .vortex-console.library-open {
    --active-drawer-width: min(430px, 34vw);
  }

  .vortex-console.library-open .vortex-library-panel {
    width: var(--active-drawer-width) !important;
  }

  .vortex-console.library-open .vortex-character-banner,
  .vortex-console.library-open .vortex-center,
  .vortex-console.library-open .vortex-sheet-tabs,
  .vortex-console.library-open .vortex-page,
  .vortex-console.library-open .active-pool-dock {
    max-width: calc(100vw - var(--sidebar-width, 178px) - var(--active-drawer-width) - 2rem) !important;
  }

  .vortex-console.library-open .vortex-character-banner {
    grid-template-columns: minmax(96px, 128px) minmax(320px, 1fr) minmax(440px, 620px) !important;
    align-items: center !important;
  }

  .vortex-console.library-open .vortex-character-banner .vortex-vitals {
    grid-column: auto !important;
    justify-self: end !important;
    width: 100% !important;
    max-width: 620px !important;
    grid-template-columns: repeat(4, minmax(92px, 1fr)) !important;
  }
}

@media (min-width: 1025px) and (max-width: 1380px) {
  .vortex-console.library-open {
    --active-drawer-width: min(390px, 36vw);
  }

  .vortex-console.library-open .vortex-character-banner {
    grid-template-columns: minmax(86px, 110px) minmax(260px, 1fr) minmax(380px, 560px) !important;
  }
}

@media (max-width: 900px) {
  .xp-source-form {
    grid-template-columns: 1fr 1fr;
  }

  .xp-source-form button {
    grid-column: 1 / -1;
  }
}

/* Final compact-record and drawer authority. Keep this last. */
.sheet-table.repeat-compact-table {
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 0.58rem !important;
  overflow: visible !important;
}

.compact-record .repeat-editor-row,
.compact-record-editor {
  min-width: 0 !important;
}

.compact-record-editor .repeat-mobile-label {
  display: block !important;
  margin-bottom: 0.22rem;
  color: var(--record-accent) !important;
  font-size: 0.56rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.compact-record .attachment-row {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(150px, 0.45fr) minmax(220px, 1fr) 34px !important;
  gap: 0.65rem !important;
  align-items: center !important;
}

.compact-record .attachment-edit-grid {
  grid-column: 1 / -1;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
}

@media (min-width: 1025px) {
  .vortex-console.library-open {
    --active-drawer-width: clamp(350px, 30vw, 430px) !important;
  }

  .vortex-console.library-open .vortex-workbench {
    min-width: 0 !important;
    width: calc(100vw - var(--sidebar-width, 178px) - var(--active-drawer-width) - 1rem) !important;
    max-width: calc(100vw - var(--sidebar-width, 178px) - var(--active-drawer-width) - 1rem) !important;
    margin-right: 0 !important;
    justify-self: start !important;
  }

  .vortex-console.library-open .vortex-library-panel {
    width: var(--active-drawer-width) !important;
  }

  .vortex-console.library-open .vortex-character-banner,
  .vortex-console.library-open .vortex-center,
  .vortex-console.library-open .vortex-sheet-tabs,
  .vortex-console.library-open .vortex-page,
  .vortex-console.library-open .active-pool-dock {
    width: auto !important;
    max-width: none !important;
  }

  .vortex-console.library-open .vortex-character-banner {
    grid-template-columns: clamp(104px, 9vw, 150px) minmax(260px, 1fr) minmax(390px, 0.78fr) !important;
    align-items: center !important;
  }

  .vortex-console.library-open .vortex-portrait-wrap {
    align-self: center !important;
  }

  .vortex-console.library-open .vortex-portrait {
    width: min(100%, 142px) !important;
    height: auto !important;
    aspect-ratio: 1 !important;
  }

  .vortex-console.library-open .vortex-character-banner .vortex-vitals {
    grid-column: auto !important;
    justify-self: end !important;
    width: 100% !important;
    max-width: 680px !important;
    grid-template-columns: repeat(4, minmax(88px, 1fr)) !important;
  }

  .vortex-console.library-open .active-pool-dock {
    position: relative !important;
    top: auto !important;
    z-index: 4 !important;
  }
}

@media (min-width: 1025px) and (max-width: 1560px) {
  .vortex-console.library-open {
    --active-drawer-width: clamp(340px, 32vw, 400px) !important;
  }

  .vortex-console.library-open .vortex-character-banner {
    grid-template-columns: 142px minmax(0, 1fr) !important;
  }

  .vortex-console.library-open .vortex-character-banner .vortex-vitals {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    max-width: none !important;
  }
}

@media (max-width: 900px) {
  .compact-record .attachment-row {
    grid-template-columns: 1fr !important;
    padding-right: 2.5rem;
  }
}

/* Compact inventory affordances: collapsible gear, traits, armor, and conversion. */
.compact-record--armor {
  --record-accent: #6baeff;
  --record-accent-rgb: 107, 174, 255;
  background:
    linear-gradient(110deg, rgba(107, 174, 255, 0.16), transparent 44%),
    rgba(7, 15, 25, 0.96);
}

.compact-record--armor .compact-record-identity {
  position: relative;
  min-height: 38px;
  padding-left: 2.7rem;
}

.compact-armor-mark {
  position: absolute;
  left: 0;
  top: 0;
  width: 2.15rem;
  height: 2.15rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(107, 174, 255, 0.42);
  border-radius: 7px;
  background: rgba(38, 91, 149, 0.22);
  color: #9ac8ff;
}

.compact-armor-mark svg {
  width: 1.32rem;
  height: 1.32rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.compact-record-info-tags {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.48rem;
  padding-top: 0.48rem;
  border-top: 1px solid rgba(119, 151, 180, 0.12);
}

.compact-info-tag {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0.22rem 0.42rem;
  border: 1px solid rgba(var(--record-accent-rgb), 0.25);
  border-radius: 6px;
  background: rgba(var(--record-accent-rgb), 0.08);
  color: #dfe9f7;
  font-size: 0.63rem;
  font-weight: 850;
  line-height: 1.15;
}

.compact-info-tag.green { border-color: rgba(84, 223, 106, 0.35); color: #9bf5a8; }
.compact-info-tag.muted { border-color: rgba(143, 160, 184, 0.2); color: #9dabc0; }
.compact-info-tag.armor { border-color: rgba(107, 174, 255, 0.42); background: rgba(107, 174, 255, 0.12); color: #a8d0ff; }
.compact-info-tag.vital { border-color: rgba(169, 107, 255, 0.38); color: #d2b5ff; }
.compact-info-tag.cyan { border-color: rgba(32, 217, 231, 0.38); color: #82eff6; }
.compact-info-tag.quality { border-color: rgba(255, 134, 31, 0.34); color: #ffbd7b; }
.compact-info-tag.custom { border-color: rgba(84, 223, 106, 0.28); color: #c8f7cf; }

.compact-record-collapse {
  position: absolute;
  top: 0.66rem;
  right: 3.25rem;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(var(--record-accent-rgb), 0.32);
  border-radius: 7px;
  background: rgba(3, 12, 20, 0.72);
  color: var(--record-accent);
  cursor: pointer;
}

.compact-record-collapse svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 140ms ease;
}

.compact-record.is-collapsed .compact-record-collapse svg {
  transform: rotate(-90deg);
}

.compact-record.is-collapsed .compact-record-display {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.compact-record.is-collapsed .compact-record-main {
  grid-template-columns: minmax(0, 1fr);
}

.compact-record.is-collapsed .compact-record-metrics,
.compact-record.is-collapsed .compact-record-details,
.compact-record.is-collapsed .compact-record-attachments {
  display: none;
}

.compact-record.is-collapsed .compact-record-info-tags {
  margin-top: 0.32rem;
  padding-top: 0;
  border-top: 0;
}

.compact-record.is-collapsed .compact-record-info-tags .compact-info-tag:nth-child(n+7) {
  display: none;
}

.repeat-editor-convert {
  border-color: rgba(32, 217, 231, 0.38) !important;
  background: rgba(32, 217, 231, 0.1) !important;
  color: #87f1f7 !important;
}

@media (max-width: 700px) {
  .compact-record-collapse {
    right: 3.05rem;
  }

  .compact-record--armor .compact-record-identity {
    padding-left: 2.45rem;
  }
}

/* Galactic Map beta */
.beta-tag {
  position: absolute;
  top: -1.1rem;
  left: 50%;
  transform: translateX(-50%);
  color: #ff8b22;
  font-size: 0.58rem;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.galactic-topbar-link {
  position: relative;
}

.galactic-workbench {
  overflow-x: hidden;
}

.galactic-mobile-warning {
  display: none;
}

.galactic-desktop-stage {
  display: grid;
  gap: 0.65rem;
}

.galactic-hero {
  min-height: 118px;
  padding: 1.5rem 1.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #098edc;
  border: 1px solid rgba(0, 229, 255, 0.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

.galactic-hero h1 {
  margin: 0;
  color: #5ed15f;
  font-size: clamp(2.2rem, 4vw, 4.25rem);
  line-height: 0.95;
  text-transform: uppercase;
  text-shadow: 3px 4px 0 rgba(87, 45, 154, 0.95), 0 0 16px rgba(0,0,0,0.35);
}

.galactic-vortex-brand {
  display: grid;
  justify-items: center;
  gap: 0.1rem;
  color: #ffffff;
  font-family: Georgia, serif;
  font-size: 1.35rem;
  text-transform: uppercase;
}

.galactic-vortex-brand img {
  width: min(260px, 24vw);
  max-height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.35));
}

.galactic-map-shell {
  position: relative;
  min-height: calc(100vh - 205px);
  border: 1px solid rgba(0, 229, 255, 0.32);
  background: linear-gradient(90deg, rgba(32, 5, 58, 0.92), rgba(15, 32, 86, 0.9), rgba(29, 4, 50, 0.94));
  overflow: hidden;
}

.galactic-map-toolbar {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  right: 0.75rem;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: #b7c6db;
  pointer-events: none;
}

.galactic-map-toolbar > * {
  pointer-events: auto;
}

.galactic-map-toolbar strong {
  color: #00e5ff;
  text-transform: uppercase;
  letter-spacing: 0;
}

.galactic-map-toolbar span {
  margin-left: auto;
  font-size: 0.75rem;
  text-transform: uppercase;
}

.galactic-map-toolbar button,
.galactic-info-actions button,
.galactic-bounty-assignment button {
  border: 1px solid rgba(0, 229, 255, 0.45);
  background: rgba(6, 31, 46, 0.9);
  color: #00e5ff;
  border-radius: 6px;
  padding: 0.55rem 0.75rem;
  font-weight: 800;
  cursor: pointer;
}

.galactic-sector-map,
.galactic-system-view {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(125, 110, 255, 0.11) 2px, transparent 2px),
    linear-gradient(90deg, rgba(125, 110, 255, 0.11) 2px, transparent 2px),
    radial-gradient(circle at 52% 55%, rgba(0, 229, 255, 0.1), transparent 33%);
  background-size:
    calc(100% / var(--galactic-cols, 28)) calc(100% / var(--galactic-rows, 14)),
    calc(100% / var(--galactic-cols, 28)) calc(100% / var(--galactic-rows, 14)),
    100% 100%;
  background-position:
    var(--galactic-pan-x, 0) var(--galactic-pan-y, 0),
    var(--galactic-pan-x, 0) var(--galactic-pan-y, 0),
    center;
  cursor: grab;
  touch-action: none;
}

.galactic-map-panning .galactic-sector-map,
.galactic-map-panning .galactic-system-view {
  cursor: grabbing;
}

.galactic-sector-map[hidden],
.galactic-system-view[hidden] {
  display: none !important;
}

.galaxy-system-marker,
.galactic-vortex-marker,
.galactic-ship-token,
.system-object-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  border: 0;
  background: transparent;
  color: #dce8ff;
  cursor: pointer;
  z-index: 3;
  translate: var(--galactic-pan-x, 0) var(--galactic-pan-y, 0);
}

.galactic-sector-map .galactic-vortex-marker {
  z-index: 4;
  pointer-events: none;
}

.galactic-sector-map .galactic-ship-token {
  margin-left: calc((var(--ship-offset, 0) - 0.5) * 22px);
  margin-top: calc((var(--ship-offset, 0) - 0.5) * 12px);
  pointer-events: none;
}

.galaxy-system-marker {
  transform: none;
  display: grid;
  place-items: center;
}

.galaxy-system-marker strong {
  position: absolute;
  top: 0.28rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.78rem;
  text-shadow: 0 2px 8px #000;
}

.galaxy-system-marker.selected {
  outline: 2px solid rgba(167, 220, 255, 0.82);
  outline-offset: -2px;
  border-radius: 8px;
  background: rgba(0, 229, 255, 0.08);
}

.galaxy-system-marker.previewed,
.system-object-marker.previewed {
  filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.55));
}

.mini-orbits {
  width: 48px;
  height: 48px;
  position: relative;
  display: block;
}

.mini-orbits i {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #f8e91d;
  box-shadow: 0 0 8px currentColor;
}

.mini-orbits.dense i {
  width: 6px;
  height: 6px;
}

.system-body-count {
  position: absolute;
  right: 0.28rem;
  bottom: 0.16rem;
  color: rgba(220, 232, 255, 0.72);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 900;
  text-shadow: 0 2px 8px #000;
}

.galactic-vortex-marker {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  text-transform: uppercase;
  font-weight: 900;
}

.galactic-vortex-marker img {
  width: 118px;
  height: 118px;
  object-fit: contain;
  filter: opacity(0.88) drop-shadow(0 0 18px rgba(255,255,255,0.25));
}

.galactic-ship-token {
  z-index: 7;
  display: grid;
  justify-items: center;
  gap: 0.15rem;
}

.galactic-ship-token.in-system {
  pointer-events: none;
}

.galactic-ship-token span {
  width: 0;
  height: 0;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-bottom: 30px solid #ffffff;
  filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.75));
  transform: rotate(-38deg);
  animation: shipGlyphDrift 2.6s ease-in-out infinite;
}

.galactic-ship-token strong {
  max-width: 120px;
  color: #fff;
  font-size: 0.68rem;
  text-transform: uppercase;
  text-shadow: 0 2px 8px #000;
}

.galactic-ship-token.selected span {
  filter: drop-shadow(0 0 10px rgba(255, 139, 34, 0.95));
}

.galactic-ship-token.selected strong {
  color: #ff8b22;
}

.galactic-ship-selector {
  margin-top: 1rem;
  padding: 0.75rem;
  border: 1px solid rgba(0, 229, 255, 0.18);
  border-radius: 8px;
  background: rgba(3, 16, 24, 0.55);
}

.galactic-ship-selector label {
  display: grid;
  gap: 0.45rem;
}

.galactic-ship-selector span {
  color: #b9c8d8;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.galactic-ship-selector select {
  width: 100%;
}

@keyframes shipGlyphDrift {
  0%, 100% { transform: rotate(-38deg) translateY(0); }
  50% { transform: rotate(-38deg) translateY(-8px); }
}

.galactic-info-panel {
  position: absolute;
  top: 4rem;
  right: 1rem;
  z-index: 9;
  width: min(390px, 28vw);
  max-height: calc(100% - 5rem);
  overflow: auto;
  padding: 1rem;
  border: 1px solid rgba(0, 229, 255, 0.35);
  border-radius: 8px;
  background: rgba(5, 13, 26, 0.9);
  box-shadow: 0 18px 42px rgba(0,0,0,0.38);
}

.galactic-info-panel h2 {
  margin: 0 0 0.75rem;
  color: #fff;
  text-transform: uppercase;
}

.galactic-preview-note {
  margin: -0.35rem 0 0.85rem;
  color: #8fa2b8;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.galactic-info-panel dl {
  display: grid;
  gap: 0.45rem;
  margin: 0 0 1rem;
}

.galactic-info-panel dl div {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 0.35rem;
}

.galactic-info-panel dt {
  color: #00e5ff;
  font-size: 0.68rem;
  text-transform: uppercase;
}

.galactic-info-panel dd {
  margin: 0;
  color: #dce8ff;
  font-weight: 700;
}

.galactic-info-actions,
.galactic-bounty-assignment {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.85rem;
}

.galactic-bounty-assignment label {
  display: grid;
  gap: 0.35rem;
  color: #b7c6db;
  font-size: 0.78rem;
  text-transform: uppercase;
}

.galactic-bounty-assignment select {
  width: 100%;
  color: #fff;
  border: 1px solid rgba(151, 93, 255, 0.55);
  background: #090915;
  border-radius: 6px;
  padding: 0.65rem;
}

.system-map-title {
  position: absolute;
  left: 1.2rem;
  top: 4rem;
  z-index: 3;
}

.system-map-title h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(2rem, 4vw, 4rem);
  text-transform: uppercase;
}

.system-orbit-field {
  position: absolute;
  inset: 7rem 2rem 2rem;
  border: 1px solid rgba(0, 229, 255, 0.16);
  background: radial-gradient(circle at 50% 50%, rgba(255, 238, 70, 0.25), transparent 4%, rgba(0,0,0,0) 7%);
}

.system-object-marker span {
  width: 22px;
  height: 22px;
  display: block;
  border-radius: 999px;
  background: #58d66c;
  box-shadow: 0 0 14px currentColor;
}

.system-object-marker.object-main-sequence-star span {
  width: 34px;
  height: 34px;
  background: #ffe82a;
}

.system-object-marker.object-hyperjump-gate span,
.system-object-marker.object-orbital-station span {
  border-radius: 6px;
  background: #00e5ff;
}

.system-object-marker strong {
  position: absolute;
  left: 50%;
  top: 1.35rem;
  transform: translateX(-50%);
  white-space: nowrap;
  color: #fff;
  font-size: 0.7rem;
  text-shadow: 0 2px 8px #000;
}

.system-object-marker i {
  position: absolute;
  width: var(--orbit);
  height: var(--orbit);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  pointer-events: none;
}

.system-object-marker.selected span {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

@media (max-width: 900px), (pointer: coarse) {
  .galactic-map-sidebar-link,
  .galactic-topbar-link {
    display: none !important;
  }

  .galactic-mobile-warning {
    display: grid;
    place-items: start;
    gap: 1rem;
    margin: 1rem;
    padding: 1.25rem;
    border: 1px solid rgba(0, 229, 255, 0.35);
    border-radius: 8px;
    background: rgba(7, 28, 38, 0.88);
  }

  .galactic-mobile-warning h1 {
    margin: 0;
    color: #ff8b22;
  }

  .galactic-mobile-warning a {
    color: #00e5ff;
  }

  .galactic-desktop-stage {
    display: none;
  }
}

/* Inventory ordering, dense collapse summaries, and the shared supplied gear SVG. */
.sheet-gear-icon,
.repeat-gear-svg,
.notes-wallet-gear-svg {
  display: block;
}

.ui-gear-icon {
  background-color: currentColor;
  -webkit-mask: url('/assets/gear-icon.svg') center / contain no-repeat;
  mask: url('/assets/gear-icon.svg') center / contain no-repeat;
}

/* Shared 71326 VORTEX SVG library. Mask icons inherit their control color;
   colored characteristic and Euphorium art remains unchanged. */
.vx-ui-svg-icon {
  width: 1em;
  height: 1em;
  min-width: 1em;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  color: currentColor;
  line-height: 1;
  vertical-align: -0.14em;
}

.vx-ui-svg-icon.is-mask {
  background-color: currentColor;
  -webkit-mask: var(--vx-ui-icon) center / contain no-repeat;
  mask: var(--vx-ui-icon) center / contain no-repeat;
}

.vx-ui-svg-icon.is-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.genesys-inline-symbol.vx-inline-asset-icon {
  width: 1.3em;
  height: 1.3em;
  min-width: 1.3em;
  margin-inline: 0.08em;
  vertical-align: -0.24em;
}

.vortex-console .stat-tile i .characteristic-svg,
.skill-name i .characteristic-svg {
  width: 19px;
  height: 19px;
}

.skill-category-row strong {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.skill-category-row .skill-category-svg {
  width: 18px;
  height: 18px;
}

.control-svg {
  width: 14px;
  height: 14px;
}

.compact-record-pin .compact-record-pin-svg,
.compact-record-collapse .compact-record-chevron-svg {
  width: 16px;
  height: 16px;
}

.quick-icon.vx-ui-svg-icon,
.bounty-quick-links .vx-ui-svg-icon {
  width: 18px;
  height: 18px;
}

.vortex-side-actions .vx-ui-svg-icon,
.bounty-side-actions .vx-ui-svg-icon {
  width: 24px;
  height: 24px;
}

.datetime-button > .vx-ui-svg-icon {
  width: 26px;
  height: 26px;
  color: var(--cyan, #20d9e7);
}

.sheet-close-icon.vx-ui-svg-icon,
.icon-button .vx-ui-svg-icon {
  width: 18px;
  height: 18px;
}

.vortex-console .stat-tile i:has(.characteristic-svg),
.skill-name i:has(.characteristic-svg) {
  border: 0;
}

.calendar-head .vx-ui-svg-icon {
  width: 14px;
  height: 14px;
}

.dm-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
}

.dm-actions button .vx-ui-svg-icon {
  width: 15px;
  height: 15px;
}

.compact-armor-mark .compact-armor-svg {
  width: 18px;
  height: 18px;
}

.compact-info-tag.orange {
  border-color: rgba(255, 134, 31, 0.36);
  background: rgba(255, 134, 31, 0.09);
  color: #ffbd7b;
}

.compact-info-tag.purple {
  border-color: rgba(169, 107, 255, 0.38);
  background: rgba(169, 107, 255, 0.1);
  color: #d2b5ff;
}

.compact-record-pin {
  position: absolute;
  top: 0.66rem;
  right: 3.25rem;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(119, 151, 180, 0.22);
  border-radius: 7px;
  background: rgba(3, 12, 20, 0.72);
  color: #8293aa;
  cursor: pointer;
}

.compact-record--equipment .compact-record-pin {
  right: 5.75rem;
}

.compact-record-pin svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.compact-record-pin:hover,
.compact-record-pin:focus-visible,
.compact-record-pin.is-pinned {
  border-color: rgba(255, 134, 31, 0.64);
  background: rgba(255, 134, 31, 0.13);
  color: #ff9d45;
  outline: none;
}

.compact-record-pin.is-pinned {
  box-shadow: 0 0 14px rgba(255, 134, 31, 0.18);
}

.compact-record.is-collapsed .compact-record-display {
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(190px, 0.75fr) minmax(0, 2.25fr);
  align-items: center;
  gap: 0.6rem;
  padding: 0.38rem 8.15rem 0.38rem 0.65rem;
}

.compact-record.is-collapsed .compact-record-main {
  display: block;
  min-width: 0;
}

.compact-record.is-collapsed .compact-record-identity {
  min-width: 0;
  min-height: 0;
}

.compact-record.is-collapsed .compact-record-identity h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-record.is-collapsed .compact-record-identity p {
  display: none;
}

.compact-record.is-collapsed .compact-record-metrics,
.compact-record.is-collapsed .compact-record-details,
.compact-record.is-collapsed .compact-record-attachments {
  display: none;
}

.compact-record.is-collapsed .compact-record-info-tags {
  min-width: 0;
  flex-wrap: nowrap;
  align-items: center;
  overflow: hidden;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.compact-record.is-collapsed .compact-info-tag {
  flex: 0 0 auto;
  min-height: 22px;
  white-space: nowrap;
}

.compact-record.is-collapsed .compact-record-info-tags .compact-info-tag:nth-child(n+7) {
  display: inline-flex;
}

.compact-record.is-collapsed .compact-record-info-tags .compact-info-tag:nth-child(n+9) {
  display: none;
}

.compact-record.is-collapsed .compact-armor-mark {
  top: 50%;
  width: 1.8rem;
  height: 1.8rem;
  transform: translateY(-50%);
}

@media (max-width: 820px) {
  .compact-record.is-collapsed .compact-record-display {
    grid-template-columns: 1fr;
    gap: 0.28rem;
    padding-right: 7.85rem;
  }

  .compact-record.is-collapsed .compact-record-info-tags {
    grid-column: 1;
  }
}

/* DM record appearance, UNIQUE records, and collision-free record actions. */
.compact-record.has-custom-color {
  --record-accent: var(--record-custom);
  --record-accent-rgb: var(--record-custom-rgb);
}

.compact-record.is-unique {
  --record-accent: #ff668f;
  --record-accent-rgb: 255, 102, 143;
  border-color: rgba(255, 92, 127, 0.72);
  background:
    linear-gradient(112deg, rgba(255, 51, 108, 0.34), rgba(172, 42, 109, 0.2) 46%, rgba(74, 19, 69, 0.28)),
    rgba(16, 7, 20, 0.97);
  box-shadow: inset 3px 0 0 #ff416f, 0 0 18px rgba(255, 55, 112, 0.12);
}

.compact-record-display,
.compact-record.is-collapsed .compact-record-display {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.65rem;
  padding: 0.72rem 0.68rem 0.72rem 0.82rem;
}

.compact-record-content {
  min-width: 0;
}

.compact-record-actions {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.38rem;
  align-items: center;
  justify-content: flex-end;
}

.compact-record-actions .compact-record-pin,
.compact-record-actions .compact-record-collapse,
.compact-record-actions .compact-record-gear {
  position: static !important;
  inset: auto !important;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  margin: 0;
}

.compact-record.is-collapsed .compact-record-content {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(190px, 0.75fr) minmax(0, 2.25fr);
  align-items: center;
  gap: 0.6rem;
}

.compact-record-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.compact-record-unique-label {
  padding-left: 0.4rem;
  border-left: 1px solid rgba(255, 167, 192, 0.42);
  color: #ffb3c7;
  font: inherit;
}

.compact-record-subtype,
.compact-record-unique-label {
  padding-left: 0.4rem;
  border-left: 1px solid rgba(var(--record-accent-rgb), 0.36);
}

.compact-record-identity:has(.compact-record-icon) {
  display: grid;
  grid-template-columns: 2.3rem minmax(0, 1fr);
  column-gap: 0.55rem;
  align-items: center;
  padding-left: 0;
}

.compact-record-identity:has(.compact-record-icon) > .compact-record-icon {
  grid-column: 1;
  grid-row: 1 / 4;
}

.compact-record-identity:has(.compact-record-icon) > :not(.compact-record-icon) {
  grid-column: 2;
}

.compact-record-icon {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--record-accent-rgb), 0.42);
  border-radius: 7px;
  background: rgba(var(--record-accent-rgb), 0.13);
  color: var(--record-accent);
}

.compact-record-icon .vx-ui-svg-icon {
  width: 1.35rem;
  height: 1.35rem;
}

.dm-record-customizer {
  margin-bottom: 0.72rem;
  padding: 0.72rem;
  border: 1px solid rgba(255, 134, 31, 0.34);
  border-radius: 8px;
  background: linear-gradient(115deg, rgba(255, 134, 31, 0.1), rgba(169, 107, 255, 0.08));
}

.dm-record-customizer > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.62rem;
}

.dm-record-customizer > header small,
.dm-record-customizer label > span {
  display: block;
  color: #ffad62;
  font-size: 0.57rem;
  font-weight: 950;
  text-transform: uppercase;
}

.dm-record-customizer > header h4 {
  margin: 0.08rem 0 0;
  color: #fff;
  font-size: 0.92rem;
}

.dm-record-customizer > header > span,
.record-icon-upload-row small {
  color: #9eabc0;
  font-size: 0.65rem;
  font-weight: 700;
}

.dm-record-customizer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 0.55rem;
}

.dm-record-customizer input,
.dm-record-customizer select {
  width: 100%;
}

.record-color-control {
  display: grid;
  grid-template-columns: 52px minmax(88px, 1fr);
  gap: 0.35rem;
}

.record-color-control input[type="color"] {
  min-width: 0;
  height: 40px;
  padding: 0.22rem;
}

.record-color-control button,
.record-preset-controls button,
.record-icon-upload-button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.62rem;
  border: 1px solid rgba(255, 134, 31, 0.34);
  border-radius: 7px;
  background: rgba(255, 134, 31, 0.1);
  color: #ffd1a3;
  font-size: 0.69rem;
  font-weight: 900;
  cursor: pointer;
}

.record-unique-control > span:last-child {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.62rem;
  border: 1px solid rgba(255, 92, 127, 0.38);
  border-radius: 7px;
  background: rgba(255, 51, 108, 0.1);
  color: #ffb0c3;
}

.record-unique-control input {
  width: auto;
}

.record-icon-upload-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.58rem;
}

.record-icon-preview .compact-record-icon {
  width: 40px;
  height: 40px;
}

.record-preset-controls {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto auto minmax(160px, 1fr) auto;
  gap: 0.42rem;
  align-items: end;
  margin-top: 0.62rem;
  padding-top: 0.62rem;
  border-top: 1px solid rgba(255, 134, 31, 0.18);
}

@media (max-width: 1040px) {
  .dm-record-customizer-grid {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }

  .record-preset-controls {
    grid-template-columns: minmax(160px, 1fr) auto auto;
  }

  .record-preset-name {
    grid-column: 1 / 3;
  }
}

@media (max-width: 700px) {
  .compact-record-display,
  .compact-record.is-collapsed .compact-record-display {
    grid-template-columns: minmax(0, 1fr);
  }

  .compact-record-actions {
    grid-row: 1;
    justify-self: end;
  }

  .compact-record-content {
    grid-row: 2;
  }

  .compact-record.is-collapsed .compact-record-content,
  .dm-record-customizer-grid,
  .record-preset-controls {
    grid-template-columns: 1fr;
  }

  .record-preset-name {
    grid-column: auto;
  }
}

/* D&D VORTEX-shell banner pass */
.vortex-console[data-sheet-system=dnd5e] .vortex-character-banner {
  grid-template-columns: 174px minmax(0, 1fr) minmax(560px, 0.82fr);
}

.vortex-console[data-sheet-system=dnd5e] .vortex-tags {
  align-items: stretch;
}

.vortex-console[data-sheet-system=dnd5e] .xp-popover-wrap {
  flex: 0 1 330px;
}

.vortex-console[data-sheet-system=dnd5e] .xp-summary-button.dnd-progression-summary {
  min-width: min(100%, 330px);
  width: 100%;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  row-gap: 0.22rem;
}

.vortex-console[data-sheet-system=dnd5e] .dnd-progression-summary > small {
  text-transform: none;
  letter-spacing: 0.01em;
}

.vortex-console[data-sheet-system=dnd5e] .dnd-progression-track {
  grid-column: 1 / 4;
  grid-row: 3;
  height: 6px;
  overflow: hidden;
  border: 1px solid rgba(119, 151, 180, 0.18);
  border-radius: 999px;
  background: rgba(3, 8, 14, 0.82);
}

.vortex-console[data-sheet-system=dnd5e] .dnd-progression-track em {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--vx-cyan), var(--vx-orange));
  transition: width 180ms ease;
}

.vortex-console[data-sheet-system=dnd5e] .xp-summary-button.is-level-ready,
.vortex-console[data-sheet-system=dnd5e] .dnd-level-up-button.is-level-ready {
  border-color: rgba(255, 177, 75, 0.72) !important;
  background:
    linear-gradient(180deg, rgba(255, 177, 75, 0.26), rgba(255, 134, 31, 0.18)),
    rgba(7, 12, 20, 0.82) !important;
  color: #fff4df !important;
  box-shadow: 0 0 26px rgba(255, 134, 31, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

.vortex-console[data-sheet-system=dnd5e] .dnd-level-up-button {
  min-height: 48px;
  padding: 0.54rem 0.82rem;
  border: 1px solid rgba(255, 134, 31, 0.34);
  border-radius: 8px;
  background: rgba(255, 134, 31, 0.12);
  color: #ffd4b4;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.vortex-console[data-sheet-system=dnd5e] .dnd-progression-popover .dnd-progression-mode {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.vortex-console[data-sheet-system=dnd5e] .dnd-progression-popover .dnd-progression-mode[hidden] {
  display: none !important;
}

.vortex-console[data-sheet-system=dnd5e] .dnd-milestone-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.vortex-console[data-sheet-system=dnd5e] .dnd-milestone-actions button,
.vortex-console[data-sheet-system=dnd5e] .dnd-hp-adjust button {
  min-height: 36px;
  border: 1px solid rgba(255, 134, 31, 0.36);
  border-radius: 7px;
  background: rgba(255, 134, 31, 0.14);
  color: #ffd4b4;
  font-weight: 950;
  cursor: pointer;
}

.vortex-console[data-sheet-system=dnd5e] .dnd-progression-permission:empty {
  display: none;
}

.vortex-console[data-sheet-system=dnd5e] .dnd-progression-ledger {
  margin-top: 0.6rem;
}

.vortex-console[data-sheet-system=dnd5e] .dnd-progression-ledger article {
  display: grid;
  grid-template-columns: minmax(86px, auto) minmax(0, 1fr) auto;
  gap: 0.35rem 0.55rem;
  align-items: center;
  padding: 0.38rem 0;
  border-top: 1px solid rgba(119, 151, 180, 0.12);
  color: #dce8f7;
  font-size: 0.72rem;
}

.vortex-console[data-sheet-system=dnd5e] .dnd-progression-ledger article small {
  grid-column: 2 / 4;
  color: #7f91a8;
  font-size: 0.62rem;
}

.vortex-console[data-sheet-system=dnd5e] .vortex-vitals {
  width: min(100%, 900px) !important;
  max-width: 900px !important;
  grid-template-columns: minmax(150px, 1.2fr) minmax(104px, 0.82fr) minmax(136px, 1fr) minmax(132px, 1fr) minmax(112px, 0.86fr) !important;
}

.vortex-console[data-sheet-system=dnd5e] .vortex-vitals .vital-card {
  min-height: 108px !important;
}

.vortex-console[data-sheet-system=dnd5e] .vortex-vitals .dnd-inspiration-card {
  min-height: 92px !important;
}

.vortex-console[data-sheet-system=dnd5e] .dnd-hp-display {
  grid-template-rows: auto auto;
}

.vortex-console[data-sheet-system=dnd5e] .dnd-hp-display small {
  grid-column: 1 / -1;
  color: #8ee7ef !important;
  font-size: 0.62rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.02em !important;
  text-align: center !important;
  text-transform: none !important;
}

.vortex-console[data-sheet-system=dnd5e] .dnd-hp-adjust {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px 38px;
  gap: 0.45rem;
  align-items: end;
  margin-bottom: 0.55rem;
}

.vortex-console[data-sheet-system=dnd5e] .dnd-hp-adjust label {
  margin-bottom: 0;
}

.vortex-console[data-sheet-system=dnd5e] .dnd-clear-secondary {
  border-color: rgba(119, 151, 180, 0.22) !important;
  background: rgba(119, 151, 180, 0.08) !important;
  color: #9fb2ca !important;
}

.vortex-console[data-sheet-system=dnd5e] .vortex-vitals .vital-card > header > div {
  overflow: visible !important;
}

.vortex-console[data-sheet-system=dnd5e] .vortex-vitals .vital-card header span {
  overflow: visible !important;
  white-space: normal !important;
  line-height: 1.08 !important;
  letter-spacing: 0.065em !important;
}

.vortex-console[data-sheet-system=dnd5e] .vortex-vitals [data-vital-card="proficiency"] > header,
.vortex-console[data-sheet-system=dnd5e] .vortex-vitals [data-vital-card="inspiration"] > header {
  grid-template-columns: minmax(0, 1fr) !important;
}

.vortex-console[data-sheet-system=dnd5e] .vortex-vitals [data-vital-card="proficiency"] header span,
.vortex-console[data-sheet-system=dnd5e] .vortex-vitals [data-vital-card="speed"] header span,
.vortex-console[data-sheet-system=dnd5e] .vortex-vitals [data-vital-card="inspiration"] header span {
  font-size: 0.58rem !important;
}

.vortex-console[data-sheet-system=dnd5e] .dnd-inspiration-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  align-self: center;
  min-height: 66px;
  width: 100%;
  margin: 0 auto;
  padding: 0.34rem 0.28rem;
  border: 1px solid rgba(119, 151, 180, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.026);
  color: #9fb2ca;
  cursor: pointer;
}

.vortex-console[data-sheet-system=dnd5e] .dnd-inspiration-toggle img {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
  opacity: 0.78;
  filter: drop-shadow(0 0 8px rgba(119, 151, 180, 0.12));
}

.vortex-console[data-sheet-system=dnd5e] .dnd-inspiration-toggle span {
  color: inherit;
  font-size: 0.56rem;
  font-weight: 950;
  letter-spacing: 0.045em;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
}

.vortex-console[data-sheet-system=dnd5e] .dnd-inspiration-toggle.is-active {
  border-color: rgba(32, 217, 231, 0.46);
  background: rgba(32, 217, 231, 0.13);
  color: #dffcff;
  box-shadow: 0 0 18px rgba(32, 217, 231, 0.16);
}

.vortex-console[data-sheet-system=dnd5e] .dnd-inspiration-toggle.is-active img {
  opacity: 1;
  filter: drop-shadow(0 0 10px rgba(32, 217, 231, 0.28));
}

@media (max-width: 1320px) {
  .vortex-console[data-sheet-system=dnd5e] .vortex-character-banner {
    grid-template-columns: minmax(118px, 156px) minmax(0, 1fr);
  }

  .vortex-console[data-sheet-system=dnd5e] .vortex-vitals {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100% !important;
    grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .vortex-console[data-sheet-system=dnd5e] .xp-popover-wrap,
  .vortex-console[data-sheet-system=dnd5e] .xp-summary-button.dnd-progression-summary {
    width: 100%;
    min-width: 0;
  }

  .vortex-console[data-sheet-system=dnd5e] .dnd-milestone-actions {
    grid-template-columns: 1fr;
  }
}
/* D&D Sheet ability/save/skill pass */
.vortex-console[data-sheet-system="dnd5e"] .dnd-sheet-layout {
  grid-template-columns: minmax(250px, 330px) minmax(0, 1fr);
  align-items: start;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-sheet-main-stack {
  display: grid;
  grid-template-columns: minmax(390px, 1fr) minmax(250px, .48fr);
  gap: 18px;
  min-width: 0;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-panel-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-panel-gear,
.vortex-console[data-sheet-system="dnd5e"] .dnd-row-gear {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(32, 217, 231, .42);
  background: rgba(5, 12, 16, .72);
  color: #20d9e7;
  padding: 0;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-ability-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-ability-tile {
  min-height: 116px;
  grid-template-rows: auto 1fr auto auto;
  padding: 10px;
  text-align: center;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-ability-tile > span,
.vortex-console[data-sheet-system="dnd5e"] .dnd-skill-main > div,
.vortex-console[data-sheet-system="dnd5e"] .dnd-save-main > span {
  min-width: 0;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-ability-icon,
.vortex-console[data-sheet-system="dnd5e"] .dnd-save-icon,
.vortex-console[data-sheet-system="dnd5e"] .dnd-skill-icon,
.vortex-console[data-sheet-system="dnd5e"] .dnd-manager-icon {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-ability-icon img,
.vortex-console[data-sheet-system="dnd5e"] .dnd-save-icon img,
.vortex-console[data-sheet-system="dnd5e"] .dnd-skill-icon img,
.vortex-console[data-sheet-system="dnd5e"] .dnd-manager-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-ability-tile strong {
  font-size: 2.15rem;
  line-height: 1;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-roll-modifier,
.vortex-console[data-sheet-system="dnd5e"] .dnd-roll-total,
.vortex-console[data-sheet-system="dnd5e"] .dnd-action-rolls button {
  border: 1px solid rgba(32, 217, 231, .48);
  background: rgba(11, 28, 34, .82);
  color: #ecfbff;
  font-weight: 800;
  min-height: 30px;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-roll-modifier {
  width: 58px;
  justify-self: center;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-manager-panel {
  margin-top: 12px;
  border: 1px solid rgba(159, 92, 67, .55);
  background: rgba(4, 12, 16, .72);
  padding: 12px;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-manager-panel header,
.vortex-console[data-sheet-system="dnd5e"] .dnd-action-card header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-manager-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-manager-card,
.vortex-console[data-sheet-system="dnd5e"] .dnd-inline-manager,
.vortex-console[data-sheet-system="dnd5e"] .dnd-action-card {
  border: 1px solid rgba(159, 92, 67, .45);
  background: rgba(8, 15, 18, .72);
  padding: 10px;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-manager-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: .85rem;
  text-transform: uppercase;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-save-row,
.vortex-console[data-sheet-system="dnd5e"] .dnd-skill-row {
  border-bottom: 1px solid rgba(159, 92, 67, .25);
  padding: 7px 0;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-save-main,
.vortex-console[data-sheet-system="dnd5e"] .dnd-skill-main {
  display: grid;
  grid-template-columns: 28px 24px minmax(0, 1fr) 54px 30px;
  align-items: center;
  gap: 8px;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-skill-main div span {
  display: block;
  color: rgba(237, 231, 214, .62);
  font-size: .68rem;
  text-transform: uppercase;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-prof-dot {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(237, 231, 214, .55);
  background: transparent;
  padding: 0;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-prof-dot.is-proficient {
  background: #9f5c43;
  border-color: #d9a077;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-prof-dot.is-expertise {
  background: #9f5c43;
  border-color: #20d9e7;
  box-shadow: 0 0 0 3px rgba(32, 217, 231, .28);
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-inline-manager {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-inline-manager .dnd-wide-field,
.vortex-console[data-sheet-system="dnd5e"] .dnd-custom-skill-editor .custom-skill-notes {
  grid-column: 1 / -1;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-check-label {
  display: flex;
  align-items: center;
  gap: 7px;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-senses-card {
  position: relative;
  display: grid;
  gap: 9px;
  padding: 8px;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-sense-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(159, 92, 67, .5);
  background: rgba(7, 17, 22, .7);
  min-height: 34px;
  padding: 3px 9px;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-sense-row strong {
  color: #f3d4a0;
  font-size: 1rem;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-sense-row span {
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-senses-card p {
  margin: 8px 0 0;
  text-align: center;
  font-size: .78rem;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-sense-editor-list {
  display: grid;
  gap: 8px;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-sense-editor-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.2fr) 70px 70px minmax(120px, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-skill-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-skills-list {
  display: grid;
  gap: 2px;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-actions-list {
  display: grid;
  gap: 10px;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-action-card header strong {
  font-size: 1rem;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-action-rolls {
  display: grid;
  gap: 8px;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-die-button {
  display: inline-grid;
  grid-template-columns: 24px auto;
  align-items: center;
  gap: 6px;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-die-button img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

@media (max-width: 1050px) {
  .vortex-console[data-sheet-system="dnd5e"] .dnd-sheet-layout,
  .vortex-console[data-sheet-system="dnd5e"] .dnd-sheet-main-stack {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .vortex-console[data-sheet-system="dnd5e"] .dnd-ability-grid,
  .vortex-console[data-sheet-system="dnd5e"] .dnd-inline-manager,
  .vortex-console[data-sheet-system="dnd5e"] .dnd-sense-editor-row {
    grid-template-columns: 1fr;
  }
}
/* D&D ability visual repair */
.vortex-console[data-sheet-system="dnd5e"] .dnd-abilities-panel {
  overflow: visible;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-ability-grid {
  grid-template-columns: repeat(2, minmax(118px, 1fr));
  gap: 10px;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-ability-tile {
  display: grid;
  grid-template-rows: auto minmax(48px, 1fr) auto;
  gap: 8px;
  min-height: 104px;
  padding: 10px 9px;
  border: 1px solid rgba(32, 217, 231, .16);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(9, 24, 31, .9), rgba(7, 17, 22, .78));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.018);
  text-align: left;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-ability-tile header {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: #f4fbff;
  font-size: .66rem;
  font-weight: 950;
  letter-spacing: .04em;
  line-height: 1.05;
  text-transform: uppercase;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-ability-tile header span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-ability-values {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  align-items: center;
  gap: 8px;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-ability-values strong {
  color: #fff;
  font-family: inherit;
  font-size: 2.25rem;
  font-weight: 950;
  letter-spacing: 0;
  line-height: .9;
  text-align: right;
  text-shadow: 0 0 10px rgba(32, 217, 231, .14);
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-ability-tile .dnd-roll-modifier {
  width: 48px;
  min-width: 48px;
  height: 34px;
  justify-self: end;
  border-radius: 7px;
  font-size: .86rem;
  line-height: 1;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-ability-tile small {
  display: block;
  color: rgba(237, 231, 214, .72);
  font-size: .6rem;
  font-weight: 850;
  line-height: 1;
  text-align: right;
  text-transform: uppercase;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-ability-tile .dnd-ability-icon {
  width: 22px;
  height: 22px;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-management-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(2, 7, 12, .72);
  backdrop-filter: blur(3px);
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-management-dialog {
  width: min(900px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  border: 1px solid rgba(32, 217, 231, .34);
  border-radius: 8px;
  background: #071017;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .58), inset 0 0 0 1px rgba(255,255,255,.035);
  padding: 16px;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-management-dialog > header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 14px;
  margin-bottom: 14px;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-management-dialog > header strong {
  display: block;
  color: #f3fbff;
  font-size: 1rem;
  font-weight: 950;
  text-transform: uppercase;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-management-dialog > header span {
  display: block;
  color: #8fa6b7;
  font-size: .72rem;
  margin-top: 2px;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-overlay-close {
  border: 1px solid rgba(32, 217, 231, .38);
  border-radius: 7px;
  background: rgba(8, 28, 34, .78);
  color: #dffcff;
  font-weight: 900;
  min-height: 32px;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-management-dialog .dnd-manager-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-inspiration-toggle img {
  width: 42px;
  height: 42px;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-inspiration-toggle span {
  font-size: .58rem;
}

@media (max-width: 390px) {
  .vortex-console[data-sheet-system="dnd5e"] .dnd-ability-grid {
    grid-template-columns: 1fr;
  }
}
/* D&D skill header add button */
.vortex-console[data-sheet-system="dnd5e"] .dnd-skills-panel .dnd-panel-title {
  grid-template-columns: minmax(0, 1fr) auto;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-skill-header-add {
  min-width: 0;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(32, 217, 231, .42);
  border-radius: 7px;
  background: rgba(6, 28, 35, .78);
  color: #dffcff;
  font-size: .62rem;
  font-weight: 950;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-skill-header-add:hover,
.vortex-console[data-sheet-system="dnd5e"] .dnd-skill-header-add:focus-visible {
  border-color: rgba(32, 217, 231, .72);
  box-shadow: 0 0 12px rgba(32, 217, 231, .14);
}
/* D&D action concept cards */
.vortex-console[data-sheet-system="dnd5e"] .dnd-actions-panel {
  min-height: 520px;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-actions-list {
  gap: 14px;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-action-card {
  --dnd-action-accent: #20d9e7;
  --dnd-action-accent-soft: rgba(32, 217, 231, .14);
  --dnd-action-border: rgba(32, 217, 231, .72);
  --dnd-action-glow: rgba(32, 217, 231, .20);
  --dnd-action-bg: rgba(8, 27, 33, .72);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  min-height: 96px;
  border: 1px solid var(--dnd-action-border);
  border-radius: 8px;
  background: var(--dnd-action-bg);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.018);
  padding: 13px 12px;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-action-card.is-spell {
  --dnd-action-accent: #8f22d9;
  --dnd-action-accent-soft: rgba(143, 34, 217, .18);
  --dnd-action-border: rgba(143, 34, 217, .72);
  --dnd-action-glow: rgba(143, 34, 217, .20);
  --dnd-action-bg: rgba(24, 7, 39, .78);
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-action-copy {
  min-width: 0;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-action-copy h3 {
  margin: 0 0 4px;
  color: #fff;
  font-size: 1.14rem;
  font-weight: 950;
  line-height: 1.08;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-action-copy p {
  margin: 0 0 8px;
  color: #f1ebf6;
  font-size: .78rem;
  line-height: 1.2;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-action-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-action-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 18px;
  border: 1px solid var(--dnd-action-border);
  border-radius: 3px;
  background: rgba(2, 8, 13, .42);
  color: #f6fbff;
  font-size: .68rem;
  font-weight: 750;
  line-height: 1;
  padding: 2px 5px;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-action-tag-icon,
.vortex-console[data-sheet-system="dnd5e"] .dnd-action-die-icon {
  width: 13px;
  height: 13px;
  display: inline-block;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--dnd-action-icon) center / contain no-repeat;
  mask: var(--dnd-action-icon) center / contain no-repeat;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-action-controls {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-action-rolls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
  max-width: 132px;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-action-roll-button,
.vortex-console[data-sheet-system="dnd5e"] .dnd-action-save-button,
.vortex-console[data-sheet-system="dnd5e"] .dnd-action-gear {
  min-height: 24px;
  border: 1px solid var(--dnd-action-border);
  border-radius: 4px;
  background: rgba(4, 11, 18, .58);
  color: #f4fbff;
  font-size: .68rem;
  font-weight: 850;
  line-height: 1;
  padding: 0 6px;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-action-roll-button {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-action-roll-button.is-attack {
  min-width: 32px;
  justify-content: center;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-action-save-button {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-action-save-button strong {
  color: var(--dnd-action-accent);
  font-size: .72rem;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-action-gear {
  width: 28px;
  min-width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  color: var(--dnd-action-accent);
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-action-card button:hover,
.vortex-console[data-sheet-system="dnd5e"] .dnd-action-card button:focus-visible {
  background: var(--dnd-action-accent-soft);
  box-shadow: 0 0 12px var(--dnd-action-glow);
}

@media (max-width: 860px) {
  .vortex-console[data-sheet-system="dnd5e"] .dnd-action-card {
    grid-template-columns: 1fr;
  }

  .vortex-console[data-sheet-system="dnd5e"] .dnd-action-controls,
  .vortex-console[data-sheet-system="dnd5e"] .dnd-action-rolls {
    justify-content: flex-start;
  }
}
/* D&D resource tracker */
.vortex-console[data-sheet-system="dnd5e"] .dnd-resource-panel .reroll-tracker-title span {
  max-width: 8.6rem;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-resource-body {
  grid-template-columns: minmax(0, 1fr);
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-resource-hand-area {
  grid-template-columns: minmax(0, 1fr) auto;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-resource-slot {
  color: #20d9e7;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-resource-slot.is-setslot:not(.filled) {
  opacity: .88;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-resource-slot.is-setslot::after {
  content: "";
  position: absolute;
  inset: .22rem;
  border: 1px solid rgba(255, 210, 83, .7);
  clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%);
  filter: drop-shadow(0 0 6px rgba(255, 210, 83, .28));
  pointer-events: none;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-resource-slot.is-continuation {
  opacity: .58;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-resource-continuation-dot,
.vortex-console[data-sheet-system="dnd5e"] .dnd-resource-setslot-mark {
  display: grid;
  place-items: center;
  width: 1.38rem;
  height: 1.38rem;
  border: 1px solid rgba(32, 217, 231, .45);
  border-radius: 50%;
  background: rgba(4, 18, 27, .78);
  color: #20d9e7;
  font-size: .52rem;
  font-weight: 950;
  line-height: 1;
  text-shadow: none;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-resource-continuation-dot::before {
  content: "";
  width: .38rem;
  height: .38rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px rgba(32, 217, 231, .5);
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-resource-token {
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .48)) drop-shadow(0 0 8px rgba(32, 217, 231, .22));
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-resource-size,
.vortex-console[data-sheet-system="dnd5e"] .dnd-resource-uses {
  position: absolute;
  right: -.1rem;
  display: grid;
  place-items: center;
  min-width: 1rem;
  height: 1rem;
  padding: 0 .16rem;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  background: rgba(4, 10, 17, .92);
  color: #fff;
  font-size: .55rem;
  font-weight: 950;
  line-height: 1;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-resource-size {
  top: -.18rem;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-resource-uses {
  bottom: -.14rem;
  color: #20d9e7;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-resource-bank {
  grid-template-columns: repeat(5, auto);
  gap: .22rem;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-resource-bank-item {
  min-width: 2.42rem;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-resource-subpanel {
  display: grid;
  gap: .34rem;
  margin-top: .48rem;
  padding: .48rem;
  border: 1px solid rgba(32, 217, 231, .24);
  border-radius: .42rem;
  background: rgba(3, 12, 18, .72);
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-resource-subpanel > strong {
  color: #f1f6ff;
  font-size: .7rem;
  text-transform: uppercase;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-resource-claims button,
.vortex-console[data-sheet-system="dnd5e"] .dnd-resource-consent article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .35rem;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-resource-claims button {
  min-height: 2.1rem;
  padding: .24rem .36rem;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-resource-consent article {
  color: #d8e9f8;
  font-size: .72rem;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-resource-manager-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .82fr) minmax(0, .82fr);
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-resource-manager-type {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-resource-manager-type small {
  color: #8ea6ba;
  font-size: .62rem;
  font-weight: 850;
  text-transform: uppercase;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-resource-manager-type button {
  grid-column: 2 / 4;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-resource-bank-rows {
  display: grid;
  gap: .34rem;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-resource-bank-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .42rem;
  color: #d8e9f8;
  font-size: .72rem;
  font-weight: 850;
}

@media (max-width: 760px) {
  .vortex-console[data-sheet-system="dnd5e"] .dnd-resource-bank {
    grid-template-columns: repeat(3, auto);
  }

  .vortex-console[data-sheet-system="dnd5e"] .dnd-resource-manager-grid {
    grid-template-columns: 1fr;
  }
}

/* D&D proficiency and senses color correction */
.vortex-console[data-sheet-system="dnd5e"] .dnd-prof-dot.is-proficient {
  background: #20d9e7;
  border-color: #84f7ff;
  box-shadow: inset 0 0 0 2px rgba(3, 13, 18, .34), 0 0 10px rgba(32, 217, 231, .28);
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-prof-dot.is-expertise {
  background: #20d9e7;
  border-color: #ecfeff;
  box-shadow: inset 0 0 0 2px rgba(3, 13, 18, .34), 0 0 0 3px rgba(32, 217, 231, .38), 0 0 13px rgba(32, 217, 231, .38);
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-senses-panel .dnd-panel-title span {
  color: #20d9e7;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-senses-card {
  border: 1px solid rgba(32, 217, 231, .22);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(7, 22, 28, .78), rgba(4, 13, 18, .66));
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-sense-row {
  border-color: rgba(32, 217, 231, .58);
  background: rgba(6, 22, 28, .82);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 0 10px rgba(32, 217, 231, .08);
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-sense-row strong {
  color: #20d9e7;
  text-shadow: 0 0 9px rgba(32, 217, 231, .34);
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-sense-row span {
  color: #f5fbff;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-senses-card p {
  color: #f2fbff;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-senses-manager {
  border-color: rgba(32, 217, 231, .48);
  background: linear-gradient(180deg, rgba(6, 24, 31, .94), rgba(5, 13, 18, .9));
  box-shadow: 0 18px 40px rgba(0,0,0,.28), 0 0 20px rgba(32, 217, 231, .08);
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-senses-manager header strong,
.vortex-console[data-sheet-system="dnd5e"] .dnd-senses-manager label span {
  color: #f4fbff;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-senses-manager header span {
  color: rgba(32, 217, 231, .82);
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-senses-manager input,
.vortex-console[data-sheet-system="dnd5e"] .dnd-senses-manager select,
.vortex-console[data-sheet-system="dnd5e"] .dnd-senses-manager textarea {
  border-color: rgba(32, 217, 231, .36);
  background: rgba(4, 13, 18, .86);
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-sense-editor-row {
  padding: 8px;
  border: 1px solid rgba(32, 217, 231, .2);
  border-radius: 7px;
  background: rgba(5, 17, 23, .7);
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-sense-editor-empty {
  margin: 0;
  color: rgba(229, 246, 252, .72);
  font-size: .76rem;
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-sense-add-row {
  display: grid;
  grid-template-columns: minmax(130px, 1.1fr) 76px 76px minmax(130px, 1fr) auto;
  gap: 8px;
  align-items: end;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(32, 217, 231, .22);
}

.vortex-console[data-sheet-system="dnd5e"] .dnd-sense-add-row button,
.vortex-console[data-sheet-system="dnd5e"] .dnd-sense-editor-row button {
  border-color: rgba(32, 217, 231, .5);
  color: #ecfbff;
}

@media (max-width: 720px) {
  .vortex-console[data-sheet-system="dnd5e"] .dnd-sense-add-row {
    grid-template-columns: 1fr;
  }
}

.personal-set-coin-field {
  gap: 0.45rem;
}

.personal-set-coin-control {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
}

.personal-set-coin-control img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  padding: 4px;
  border: 1px solid rgba(39, 198, 207, 0.35);
  border-radius: 8px;
  background: rgba(7, 20, 28, 0.68);
}

.personal-set-coin-field small {
  color: var(--muted);
  font-size: 0.72rem;
}
/* D&D feature records and .dndpk feature plumbing */
[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-features-panel {
  min-height: 520px;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-feature-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  align-items: start;
  gap: 0;
  border-top: 1px solid rgba(32, 217, 231, 0.14);
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-feature-group {
  min-width: 0;
  padding: 10px 12px 22px;
  border-right: 1px solid rgba(32, 217, 231, 0.14);
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-feature-group:last-child {
  border-right: 0;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-feature-group > h3 {
  margin: 0 0 10px;
  color: #ff7a00;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-feature-group > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  align-items: start;
  gap: 10px;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-feature-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(32, 217, 231, 0.78);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(6, 25, 33, 0.97), rgba(8, 33, 41, 0.92));
  box-shadow: inset 0 0 0 1px rgba(32, 217, 231, 0.04);
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-feature-card > header {
  padding: 10px 11px 8px;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-feature-card > header p {
  margin: 0 0 3px;
  color: #7c919d;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-feature-card > header h3 {
  margin: 0;
  color: #f1f7fa;
  font-size: 14px;
  line-height: 1.05;
  text-transform: uppercase;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-feature-summary {
  margin: 0 10px;
  padding: 8px 0;
  border-top: 2px solid rgba(32, 217, 231, 0.72);
  color: #d2dde2;
  font-size: 9px;
  line-height: 1.45;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-feature-actions {
  display: grid;
  gap: 4px;
  padding: 2px 10px 6px;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-feature-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  color: #a9dbe1;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-feature-action-row > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-feature-pin,
[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-feature-more,
[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-feature-diamonds button,
[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-feature-use-count {
  appearance: none;
  border: 0;
  background: transparent;
  box-shadow: none;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-feature-pin {
  width: 20px;
  height: 20px;
  padding: 3px;
  color: #20d9e7;
  opacity: 0.58;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-feature-pin:hover,
[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-feature-pin.is-pinned {
  opacity: 1;
  color: #ff7a00;
  filter: drop-shadow(0 0 5px rgba(255, 122, 0, 0.5));
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-feature-pin svg,
[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-feature-pin img {
  width: 100%;
  height: 100%;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-feature-more {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  align-self: flex-end;
  margin: 0 8px 7px;
  padding: 2px 4px;
  color: #20d9e7;
  font-size: 7px;
  font-weight: 900;
  text-transform: uppercase;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-feature-more:hover {
  color: #f2fbfc;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-feature-chevron {
  width: 12px;
  height: 12px;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-feature-card > footer {
  display: grid;
  gap: 5px;
  margin-top: auto;
  padding: 7px 10px 9px;
  border-top: 1px solid rgba(32, 217, 231, 0.2);
  background: rgba(3, 18, 24, 0.6);
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-feature-usage {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-feature-diamonds {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-feature-diamonds button {
  width: 10px;
  height: 10px;
  padding: 1px;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-feature-diamonds button span {
  display: block;
  width: 7px;
  height: 7px;
  border: 1px solid #20d9e7;
  transform: rotate(45deg);
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-feature-diamonds button.is-available span {
  background: #20d9e7;
  box-shadow: 0 0 5px rgba(32, 217, 231, 0.5);
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-feature-diamonds button.is-spent span {
  background: transparent;
  opacity: 0.4;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-feature-reset,
[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-feature-use-count {
  color: #d9e6ea;
  font-size: 7px;
  font-weight: 900;
  text-transform: uppercase;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-feature-options {
  display: grid;
  gap: 2px;
  color: #cbd9de;
  font-size: 7px;
  line-height: 1.35;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-feature-options b {
  color: #20d9e7;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-feature-empty {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 24px;
  border: 1px dashed rgba(32, 217, 231, 0.35);
  border-radius: 12px;
  color: #9fb1ba;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-feature-empty strong {
  color: #edf6f8;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-feature-empty p {
  max-width: 680px;
  margin: 0;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-action-card.is-feature {
  border-color: rgba(255, 122, 0, 0.62);
  background: linear-gradient(135deg, rgba(38, 24, 10, 0.74), rgba(6, 28, 36, 0.94));
}

.dnd-feature-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(1, 7, 11, 0.82);
  backdrop-filter: blur(7px);
}

.dnd-feature-modal-card {
  width: min(760px, 96vw);
  max-height: min(780px, 90vh);
  overflow: auto;
  border: 1px solid rgba(32, 217, 231, 0.72);
  border-radius: 16px;
  background: #081923;
  box-shadow: 0 20px 90px rgba(0, 0, 0, 0.55), 0 0 30px rgba(32, 217, 231, 0.12);
}

.dnd-feature-modal-card > header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(32, 217, 231, 0.25);
  background: rgba(8, 25, 35, 0.96);
}

.dnd-feature-modal-card > header p {
  margin: 0 0 4px;
  color: #ff7a00;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.dnd-feature-modal-card > header h2 {
  margin: 0;
  color: #f3fbfc;
}

.dnd-feature-modal-card > header button {
  width: 34px;
  height: 34px;
  padding: 7px;
}

.dnd-feature-modal-body {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.dnd-feature-modal-body section {
  display: grid;
  gap: 8px;
}

.dnd-feature-modal-body h3 {
  margin: 0;
  color: #20d9e7;
  font-size: 12px;
  text-transform: uppercase;
}

.dnd-feature-modal-body p {
  margin: 0;
  color: #d4e0e5;
  line-height: 1.6;
}

.dnd-feature-modal-action {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) auto;
  gap: 4px 14px;
  padding: 12px;
  border: 1px solid rgba(32, 217, 231, 0.25);
  border-radius: 10px;
  background: rgba(3, 17, 23, 0.68);
}

.dnd-feature-modal-action strong {
  color: #f2f8fa;
}

.dnd-feature-modal-action > span {
  color: #ff7a00;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.dnd-feature-modal-action p,
.dnd-feature-modal-action code {
  grid-column: 1 / -1;
}

.dnd-feature-modal-action code {
  width: fit-content;
  padding: 3px 6px;
  border-radius: 5px;
  background: rgba(32, 217, 231, 0.1);
  color: #9ff6ff;
}

.dnd-feature-modal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dnd-feature-modal-tags span {
  padding: 4px 7px;
  border: 1px solid rgba(32, 217, 231, 0.3);
  border-radius: 999px;
  color: #c5d7dd;
  font-size: 10px;
}

@media (max-width: 900px) {
  [data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-feature-groups {
    grid-template-columns: 1fr;
  }

  [data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-feature-group {
    border-right: 0;
    border-bottom: 1px solid rgba(32, 217, 231, 0.14);
  }

  [data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-feature-group > div {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  }
}

/* D&D 5E inventory records */
[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-columns > div {
  min-width: 0;
  display: grid;
  gap: 10px;
  align-content: start;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-columns .inventory-heading {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(32, 217, 231, 0.22);
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-columns .inventory-heading h3 {
  color: #ff7a00;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-columns > div > [data-add-repeat] {
  justify-self: stretch;
  min-height: 38px;
  border-color: rgba(32, 217, 231, 0.35);
  background: rgba(32, 217, 231, 0.06);
  color: #a9f7fb;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .compact-record--weapons,
[data-vortex-sheet][data-sheet-system="dnd5e"] .compact-record--armor,
[data-vortex-sheet][data-sheet-system="dnd5e"] .compact-record--equipment {
  --record-accent: #20d9e7;
  --record-accent-rgb: 32, 217, 231;
  border-color: rgba(32, 217, 231, 0.42);
  background:
    linear-gradient(135deg, rgba(32, 217, 231, 0.055), transparent 42%),
    rgba(5, 20, 28, 0.9);
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-record-main {
  align-items: start;
  gap: 12px;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-record-main .compact-record-identity {
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-record-main .compact-record-identity > h3,
[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-record-main .compact-record-identity > p,
[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-record-main .compact-record-kicker {
  grid-column: 3;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-avatar {
  grid-row: 1 / span 3;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(32, 217, 231, 0.38);
  border-radius: 9px;
  background: rgba(1, 13, 19, 0.75);
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-avatar:hover,
[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-avatar:focus-visible {
  border-color: #20d9e7;
  box-shadow: 0 0 0 2px rgba(32, 217, 231, 0.13);
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-metrics {
  grid-template-columns: repeat(2, minmax(68px, 1fr));
  width: min(100%, 270px);
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-tags {
  margin-top: 8px;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-tags .compact-info-tag.weapon {
  border-color: rgba(255, 122, 0, 0.42);
  background: rgba(255, 122, 0, 0.1);
  color: #ffbd80;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-tags .compact-info-tag.damage {
  border-color: rgba(255, 92, 92, 0.4);
  background: rgba(255, 92, 92, 0.08);
  color: #ffaaaa;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-tags .compact-info-tag.range::before {
  content: "";
  width: 12px;
  height: 12px;
  margin-right: 4px;
  background: currentColor;
  -webkit-mask: url('/assets/dnd-icons/actions/bow-arrow.svg') center / contain no-repeat;
  mask: url('/assets/dnd-icons/actions/bow-arrow.svg') center / contain no-repeat;
  opacity: 0.9;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-tags .compact-info-tag.range {
  border-color: rgba(32, 217, 231, 0.42);
  color: #85f4fb;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-tags .compact-info-tag.armor {
  border-color: rgba(93, 163, 255, 0.42);
  background: rgba(93, 163, 255, 0.1);
  color: #afd1ff;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-tags .compact-info-tag.warning,
[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-tags .compact-info-tag.requirement {
  border-color: rgba(255, 190, 72, 0.44);
  background: rgba(255, 190, 72, 0.08);
  color: #ffd68d;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-tags .compact-info-tag.attuned {
  border-color: rgba(190, 115, 255, 0.46);
  background: rgba(190, 115, 255, 0.1);
  color: #ddb8ff;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-tags .compact-info-tag.equipped {
  border-color: rgba(84, 223, 106, 0.4);
  background: rgba(84, 223, 106, 0.08);
  color: #a9f3b5;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-tags .compact-info-tag.item {
  border-color: rgba(135, 150, 255, 0.38);
  color: #bdc5ff;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-details {
  grid-template-columns: 1fr;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-charge-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(32, 217, 231, 0.18);
  color: #b8cbd1;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-charge-footer > b {
  color: #f5fbfc;
  font-size: 11px;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-charge-footer > em {
  margin-left: auto;
  color: #20d9e7;
  font-style: normal;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-charge-footer > button:not(.is-filled) {
  min-width: 24px;
  min-height: 24px;
  padding: 2px 7px;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-charge-diamonds {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-charge-diamonds button {
  width: 11px;
  height: 11px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  transform: rotate(45deg);
  border: 1px solid rgba(32, 217, 231, 0.62);
  border-radius: 1px;
  background: transparent;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-charge-diamonds button.is-filled {
  background: #20d9e7;
  box-shadow: 0 0 8px rgba(32, 217, 231, 0.38);
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-media-field {
  grid-column: span 2;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-media-control {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-media-control > img,
[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-media-empty {
  width: 58px;
  height: 42px;
  display: grid;
  place-items: center;
  object-fit: cover;
  border: 1px solid rgba(32, 217, 231, 0.25);
  border-radius: 6px;
  background: rgba(3, 14, 20, 0.78);
  color: #738890;
  font-size: 9px;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-media-control input[type="file"] {
  max-width: 180px;
  font-size: 10px;
}

.dnd-inventory-media-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  place-items: center;
  padding: 24px;
}

.dnd-inventory-media-modal.is-open {
  display: grid;
}

.dnd-inventory-media-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 6, 10, 0.88);
  backdrop-filter: blur(5px);
}

.dnd-inventory-media-modal > section {
  position: relative;
  z-index: 1;
  width: min(900px, 94vw);
  max-height: 90vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(32, 217, 231, 0.48);
  border-radius: 12px;
  background: #071922;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.62);
}

.dnd-inventory-media-modal > section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 15px;
  border-bottom: 1px solid rgba(32, 217, 231, 0.22);
}

.dnd-inventory-media-modal > section > header h2 {
  margin: 0;
  color: #f2fafc;
  font-size: 15px;
}

.dnd-inventory-media-modal > section > header button {
  width: 34px;
  height: 34px;
  padding: 7px;
}

.dnd-inventory-media-modal > section > img {
  width: 100%;
  height: 100%;
  max-height: calc(90vh - 62px);
  object-fit: contain;
  background: rgba(0, 7, 11, 0.7);
}

@media (max-width: 1260px) {
  [data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-columns {
    grid-template-columns: 1fr 1fr;
  }

  [data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-columns > [data-dnd-inventory-section="equipment"] {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  [data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-columns {
    grid-template-columns: 1fr;
  }

  [data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-columns > [data-dnd-inventory-section="equipment"] {
    grid-column: auto;
  }

  [data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-record-main,
  [data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-media-control {
    grid-template-columns: 1fr;
  }

  [data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-record-main .compact-record-identity > h3,
  [data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-record-main .compact-record-identity > p,
  [data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-record-main .compact-record-kicker {
    grid-column: auto;
  }

  [data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-inventory-metrics {
    width: 100%;
  }
}

/* D&D inventory/action corrections: action pins are visible on the Actions tab,
   and DM record colors must outrank the default D&D inventory cyan treatment. */
[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-actions-page-columns {
  grid-template-columns: minmax(0, 1fr);
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-actions-page-panel [data-dnd-actions] {
  min-width: 0;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .dnd-spells-page-panel[hidden] {
  display: none !important;
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .compact-record--weapons.has-custom-color:not(.is-unique),
[data-vortex-sheet][data-sheet-system="dnd5e"] .compact-record--armor.has-custom-color:not(.is-unique),
[data-vortex-sheet][data-sheet-system="dnd5e"] .compact-record--equipment.has-custom-color:not(.is-unique) {
  --record-accent: var(--record-custom);
  --record-accent-rgb: var(--record-custom-rgb);
  border-color: rgba(var(--record-custom-rgb), 0.68);
  background:
    linear-gradient(135deg, rgba(var(--record-custom-rgb), 0.18), transparent 48%),
    rgba(5, 20, 28, 0.94);
  box-shadow: inset 3px 0 0 var(--record-custom), 0 0 18px rgba(var(--record-custom-rgb), 0.1);
}

[data-vortex-sheet][data-sheet-system="dnd5e"] .compact-record.has-custom-color:not(.is-unique) .compact-record-kicker > span:first-child,
[data-vortex-sheet][data-sheet-system="dnd5e"] .compact-record.has-custom-color:not(.is-unique) .compact-record-icon,
[data-vortex-sheet][data-sheet-system="dnd5e"] .compact-record.has-custom-color:not(.is-unique) .compact-record-pin.is-pinned {
  color: var(--record-custom);
}