/* ===== Global XR App Theme ===== */

@import url("https://fonts.googleapis.com/css2?family=Goudy+Bookletter+1911&family=MedievalSharp&family=Orbitron:wght@400..900&display=swap&family=Share+Tech&display=swap&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");

:root {
  /* dark mode — matches xeonrapture.com dark */
  --bg: #1e1e1e;
  --panel: #272727;
  --text: #dadada;
  --muted: #999999;
  --accent: #7aa2ff;
  --border: #3c3c3c;
  --shadow: 0 18px 45px rgba(16, 6, 22, 0.45);
  --link: #8fd6ff;
  --link-visited: #c4a0ff;
  --nav-link: #e3dd6f;
  --input-bg: rgba(30, 30, 30, 0.92);
  --overlay-bg: rgba(10, 10, 10, 0.78);
  --spinner-track: rgba(255, 255, 255, 0.22);
  --bubble-border: rgba(255, 255, 255, 0.08);
  --bubble-bg: rgba(255, 255, 255, 0.03);

  --background-primary: #1e1e1e;
  --h1-color: #71ff39;
  --h2-color: #39e8ff;
  --h3-color: #fc4646;
  --h4-color: #6371f8;
  --h5-color: #ff39b3;
  --h6-color: #9539ff;
  --h1-font: "Orbitron", cursive;
  --h2-font: "Orbitron", cursive;
  --h3-font: "Orbitron", cursive;
  --h4-font: "Orbitron", cursive;
  --h5-font: "Orbitron", cursive;
  --h6-font: "Orbitron", cursive;
  --font-text-theme: "Share Tech", sans-serif;
  --font-text-weight: 300;
  --toast-bg: rgba(38, 38, 48, 0.96);
  --toast-text: #e8e8e8;
  --toast-border: rgba(255, 255, 255, 0.12);
  --toast-success-bg: rgba(30, 55, 35, 0.97);
  --toast-success-border: rgba(76, 175, 80, 0.65);
  --toast-error-bg: rgba(55, 28, 28, 0.97);
  --toast-error-border: rgba(244, 67, 54, 0.65);
  --toast-warning-bg: rgba(50, 42, 20, 0.97);
  --toast-warning-border: rgba(255, 193, 7, 0.65);
}

/* light mode — matches xeonrapture.com light */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #ffffff;
    --panel: #f2f2f2;
    --text: #222222;
    --muted: #666666;
    --accent: #2255cc;
    --border: #cccccc;
    --shadow: 0 4px 20px rgba(9, 16, 83, 0.185);
    --link: #1a44cc;
    --link-visited: #7733bb;
    --nav-link: #2244aa;
    --input-bg: rgba(255, 255, 255, 0.95);
    --overlay-bg: rgba(180, 185, 200, 0.78);
    --spinner-track: rgba(0, 0, 0, 0.15);
    --bubble-border: rgba(0, 0, 0, 0.18);
    --bubble-bg: rgba(0, 0, 0, 0.04);

    --background-primary: #fcf5e5;
    --h1-color: #2a9600;
    --h2-color: #008a9c;
    --h3-color: #a00028;
    --h4-color: #4b59dd;
    --h5-color: #ba2278;
    --h6-color: #4d00a5;
    --h1-font: "MedievalSharp", sans-serif;
    --h2-font: "MedievalSharp", sans-serif;
    --h3-font: "MedievalSharp", sans-serif;
    --h4-font: "MedievalSharp", sans-serif;
    --h5-font: "MedievalSharp", sans-serif;
    --h6-font: "MedievalSharp", sans-serif;
    --font-text-theme: "Goudy Bookletter 1911", serif;
    --toast-bg: rgba(255, 255, 255, 0.97);
    --toast-text: #1a1a1a;
    --toast-border: rgba(0, 0, 0, 0.15);
    --toast-success-bg: rgba(232, 250, 234, 0.98);
    --toast-success-border: rgba(34, 139, 34, 0.6);
    --toast-error-bg: rgba(254, 235, 234, 0.98);
    --toast-error-border: rgba(200, 0, 0, 0.55);
    --toast-warning-bg: rgba(255, 248, 220, 0.98);
    --toast-warning-border: rgba(180, 130, 0, 0.55);
  }
}

/* explicit dark override (user selected) */
html[data-theme="dark"] {
  --bg: #1e1e1e;
  --panel: #272727;
  --text: #dadada;
  --muted: #999999;
  --accent: #7aa2ff;
  --border: #3c3c3c;
  --shadow: 0 18px 45px rgba(16, 6, 22, 0.45);
  --link: #8fd6ff;
  --link-visited: #c4a0ff;
  --nav-link: #e3dd6f;
  --input-bg: rgba(30, 30, 30, 0.92);
  --overlay-bg: rgba(10, 10, 10, 0.78);
  --spinner-track: rgba(255, 255, 255, 0.22);
  --bubble-border: rgba(255, 255, 255, 0.08);
  --bubble-bg: rgba(255, 255, 255, 0.03);

  --background-primary: #1e1e1e;
  --h1-color: #71ff39;
  --h2-color: #39e8ff;
  --h3-color: #fc4646;
  --h4-color: #6371f8;
  --h5-color: #ff39b3;
  --h6-color: #9539ff;
  --h1-font: "Orbitron", cursive;
  --h2-font: "Orbitron", cursive;
  --h3-font: "Orbitron", cursive;
  --h4-font: "Orbitron", cursive;
  --h5-font: "Orbitron", cursive;
  --h6-font: "Orbitron", cursive;
  --font-text-theme: "Share Tech", sans-serif;
  --font-text-weight: 300;
  --toast-bg: rgba(38, 38, 48, 0.96);
  --toast-text: #e8e8e8;
  --toast-border: rgba(255, 255, 255, 0.12);
  --toast-success-bg: rgba(30, 55, 35, 0.97);
  --toast-success-border: rgba(76, 175, 80, 0.65);
  --toast-error-bg: rgba(55, 28, 28, 0.97);
  --toast-error-border: rgba(244, 67, 54, 0.65);
  --toast-warning-bg: rgba(50, 42, 20, 0.97);
  --toast-warning-border: rgba(255, 193, 7, 0.65);
}

/* explicit light override (user selected) */
html[data-theme="light"] {
  --bg: #ffffff;
  --panel: #f2f2f2;
  --text: #222222;
  --muted: #666666;
  --accent: #2255cc;
  --border: #cccccc;
  --shadow: 0 4px 20px rgba(9, 16, 83, 0.185);
  --link: #1a44cc;
  --link-visited: #7733bb;
  --nav-link: #2244aa;
  --input-bg: rgba(255, 255, 255, 0.95);
  --overlay-bg: rgba(180, 185, 200, 0.78);
  --spinner-track: rgba(0, 0, 0, 0.15);
  --bubble-border: rgba(0, 0, 0, 0.18);
  --bubble-bg: rgba(0, 0, 0, 0.04);

  --background-primary: #fcf5e5;
  --h1-color: #2a9600;
  --h2-color: #008a9c;
  --h3-color: #a00028;
  --h4-color: #4b59dd;
  --h5-color: #ba2278;
  --h6-color: #4d00a5;
  --h1-font: "MedievalSharp", sans-serif;
  --h2-font: "MedievalSharp", sans-serif;
  --h3-font: "MedievalSharp", sans-serif;
  --h4-font: "MedievalSharp", sans-serif;
  --h5-font: "MedievalSharp", sans-serif;
  --h6-font: "MedievalSharp", sans-serif;
  --font-text-theme: "Goudy Bookletter 1911", serif;
  --toast-bg: rgba(255, 255, 255, 0.97);
  --toast-text: #1a1a1a;
  --toast-border: rgba(0, 0, 0, 0.15);
  --toast-success-bg: rgba(232, 250, 234, 0.98);
  --toast-success-border: rgba(34, 139, 34, 0.6);
  --toast-error-bg: rgba(254, 235, 234, 0.98);
  --toast-error-border: rgba(200, 0, 0, 0.55);
  --toast-warning-bg: rgba(255, 248, 220, 0.98);
  --toast-warning-border: rgba(180, 130, 0, 0.55);
}



*, *::before, *::after {
  box-sizing: border-box;
}

h1 {
  color: var(--h1-color);
  font-family: var(--h1-font);
}

h2 {
  color: var(--h2-color);
  font-family: var(--h2-font);
}

h3 {
  color: var(--h3-color);
  font-family: var(--h3-font);
}

h4 {
  color: var(--h4-color);
  font-family: var(--h4-font);
}

h5 {
  color: var(--h5-color);
  font-family: var(--h5-font);
}

h6 {
  color: var(--h6-color);
  font-family: var(--h6-font);
}


body {
  margin: 0;
  /*font-family: "Share Tech", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;*/
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  padding: 0;
  overflow-x: hidden;
  background-color: var(--background-primary);
  font-family: var(--font-text-theme);
  font-weight: var(--font-text-weight);
}

a:link {
  color: var(--link);
}

a:visited {
  color: var(--link-visited);
}

p {
  margin: 0.5em 0;
}

/* ===== Shared Nav ===== */
.xr-nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
  padding: 0.9rem 1.5rem;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: relative;
  box-shadow: var(--shadow);
}

.xr-brand, .xr-brand:visited {
  font-weight: 700;
  font-size: 1.15rem;
  text-decoration: none;
  color: #76de91
}

.xr-logo {
  height: 2rem;
  width: auto;
  display: block;
}
/* Default (dark): show white logo, hide black logo */
.xr-logo-light { display: none; }
.xr-logo-dark  { display: block; }

/* Light mode via OS preference */
@media (prefers-color-scheme: light) {
  .xr-logo-dark  { display: none; }
  .xr-logo-light { display: block; }
}
/* Light mode via explicit theme attribute */
html[data-theme="light"] .xr-logo-dark  { display: none; }
html[data-theme="light"] .xr-logo-light { display: block; }
/* Dark mode via explicit theme attribute (override any media query) */
html[data-theme="dark"] .xr-logo-dark  { display: block; }
html[data-theme="dark"] .xr-logo-light { display: none; }

  .xr-nav-toggle {
  margin-left: 0;
  display: none;
  max-width: 520px;
  width: auto;
  flex: 0 0 auto;
  padding: 0.35rem 0.5rem;
  line-height: 1;
}


.xr-nav-right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.xr-nav-icons {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.xr-nav-icon-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  width: 2rem;
  height: 2rem;
  color: var(--text);
  text-decoration: none;
}

.xr-nav-icon-link:hover {
  border-color: var(--accent);
}

.xr-badge {
  position: absolute;
  top: -0.3rem;
  right: -0.2rem;
  border-radius: 999px;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.25rem;
  font-size: 0.7rem;
  line-height: 1.1rem;
  text-align: center;
  background: #b21f2d;
  color: #fff;
}

.xr-nav-groups {
  display: flex;
  gap: 18px;
  margin-left: auto;
  align-items: flex-start;
  max-width: 520px;
}

.xr-nav-group {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.xr-nav-title {
  opacity: 0.75;
  font-weight: 600;
  margin-right: 6px;
}

.xr-nav-a, .xr-nav-a:visited {
  text-decoration: none;
  color: var(--nav-link);
}

button.xr-nav-a {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 0;
  box-shadow: none;
  font: inherit;
  width: auto;
}

button.xr-nav-a:hover {
  border: 0;
  box-shadow: none;
  transform: none;
  text-decoration: underline;
}

.xr-nav-group-toggle {
  background: transparent;
  border: 0;
  color: var(--text);
  padding: 0;
  font: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
}

.xr-nav-group-toggle:hover,
.xr-nav-group-toggle:active {
  border: 0;
  box-shadow: none;
  transform: none;
}

.xr-nav-group-toggle::after {
  content: "▸";
  font-size: 0.85em;
  opacity: 0.9;
  transition: transform 0.15s ease;
}

.xr-nav-group-toggle[aria-expanded="true"]::after {
  transform: rotate(90deg);
}

.xr-nav-group-links {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: max-content;
  align-items: flex-end;
}

/* Mobile dropdown */
@media (max-width: 900px) {
  .xr-nav-toggle { display: inline-block; }

  .xr-nav-groups {
    display: none;
    position: absolute;
    top: 56px;
    left: 12px;
    right: 12px;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel);
    z-index: 9999;
  }

  .xr-nav.xr-open .xr-nav-groups { display: flex; }

  .xr-nav-group {
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }

  .xr-nav-title {
    margin: 0 0 4px 0;
    opacity: 0.85;
  }
}


/* ===== Page Layout ===== */
main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 3.5rem;
}

/* ===== Output blocks ===== */
.xr-output {
  background: #111;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  white-space: pre-wrap;
}

/* ===== Buttons / Inputs ===== */
button, input, select, textarea {
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.55rem 0.75rem;
  margin: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

button:hover {
  border-color: var(--accent);
  cursor: pointer;
  box-shadow: 0 0 0 3px rgba(122, 162, 255, 0.15);
}

button:active {
  transform: translateY(1px);
}

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.xr-nav-toggle {
  font: inherit;
}

.btn-icon {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(122, 162, 255, 0.2);
}

label textarea {
  display: block;
  margin-top: 0.35rem;
}

#tools-list {
  list-style: none;
  padding: 0;
}

#tools-list li {
  margin: 0.5rem 0;
}

#tools-list a {
  font-size: 1.1rem;
  color: var(--accent);
  text-decoration: none;
}

#tools-list a:hover {
  text-decoration: underline;
}

/* ===== Tool / Appendix Lists ===== */
.tools-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tools-list li {
  margin: 0.5rem 0;
}

.tools-list a {
  font-size: 1.1rem;
  color: var(--accent);
  text-decoration: none;
}

.tools-list a:hover {
  text-decoration: underline;
}

/* ===== FORCE DROPDOWN NAV ALWAYS ===== */

.xr-nav-toggle {
  display: inline-block !important;
  margin-left: 0;
}

.xr-nav-groups {
  display: none !important;
  position: absolute;
  top: 56px;
  right: 12px;
  left: auto;
  width: max-content;
  max-width: calc(100vw - 24px);
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  z-index: 9999;
}

.xr-nav.xr-open .xr-nav-groups {
  display: flex !important;
}

.xr-nav-group {
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  width: max-content;
  max-width: 100%;
}

.xr-nav-title {
  margin: 0 0 4px 0;
  opacity: 0.85;
  text-align: right;
  width: 100%;
}

.xr-nav-group-links {
  align-items: flex-end;
  text-align: right;
}

/* ===== modal styles ===== */
.xr-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.xr-modal.hidden {
  display: none;
}

.xr-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
}

.xr-modal-card {
  position: relative;
  max-width: 420px;
  margin: 10vh auto;
  background: var(--panel, #161821);
  border: 1px solid var(--border, #333);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: var(--shadow);
}

.xr-modal-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.xr-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  background: var(--overlay-bg);
  backdrop-filter: blur(2px);
}

.xr-loading-spinner {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 999px;
  border: 0.26rem solid var(--spinner-track);
  border-top-color: var(--accent);
  animation: xr-spin 0.75s linear infinite;
}

@keyframes xr-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ===== Utility spacing ===== */
.wr-mt-1 {
  margin-top: 1rem;
}

.wr-mt-0-5 {
  margin-top: 0.5rem;
}

.wr-inline-flex {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ===== Webrunning styles (scoped) ===== */
.wr-scope .gear-history {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.wr-scope .gear-entry {
  border: 1px solid var(--border, #333);
  border-radius: 10px;
  background: var(--panel, #161821);
  padding: 0.5rem 0.75rem;
}

.wr-scope .gear-entry summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.wr-scope .gear-entry summary::-webkit-details-marker {
  display: none;
}

.wr-scope .gear-entry summary::before {
  content: "▾ ";
}

.wr-scope .gear-entry[open] summary::before {
  content: "▴ ";
}

.wr-scope .gear-details {
  margin-top: 0.5rem;
  white-space: pre-wrap;
  font-family: ui-monospace, monospace;
  font-size: 0.9rem;
  opacity: 0.9;
}

.wr-scope .gear-actions {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  flex-wrap: wrap;
}

/* Webrunning character manager */
.wr-scope .table-full {
  width: 100%;
  border-collapse: collapse;
}

.wr-scope .table-full th,
.wr-scope .table-full td {
  padding: 0.5rem;
  border-bottom: 1px solid var(--border, #333);
  text-align: left;
  font-size: 0.9rem;
  /* Ok so here's the TABLE WRAPPING FIX maybe */
  word-break: break-word;
  white-space: normal;
}

.wr-scope .table-full th {
  opacity: 0.8;
}

/* ── Table sort buttons ── */
.wr-scope .table-sort {
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0.15rem 0.3rem;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
  width: auto;
}
.wr-scope .table-sort:hover {
  color: var(--accent);
  background: rgba(122, 162, 255, 0.07);
  box-shadow: none;
}
.wr-scope .table-sort .sort-icon {
  font-size: 0.7em;
  line-height: 1;
  color: var(--muted);
  transition: color 0.15s;
  min-width: 0.75em;
  display: inline-block;
  text-align: center;
}
.wr-scope .table-sort[data-dir] .sort-icon {
  color: var(--accent);
}

/* ── Character manager sort bar (mobile) ── */
.wr-scope .char-sort-bar {
  display: none;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.6rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.wr-scope .char-sort-label {
  font-size: 0.82rem;
  color: var(--muted);
  margin-right: 0.1rem;
}

/* ── Character cards (mobile) ── */
.wr-scope .char-card-grid {
  display: none;
  flex-direction: column;
  gap: 0.75rem;
}
.wr-scope .char-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.85rem 0.95rem;
}
.wr-scope .char-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}
.wr-scope .char-card-info {
  flex: 1;
  min-width: 0;
}
.wr-scope .char-card-name {
  font-size: 1.05rem;
  font-weight: 600;
  word-break: break-word;
  margin-bottom: 0.25rem;
}
.wr-scope .char-card-sub {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.3rem;
}
.wr-scope .char-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.wr-scope .char-card-stat {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.15rem 0.45rem;
  font-size: 0.8rem;
}
.wr-scope .char-card-actions {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
  align-items: center;
}
.wr-scope .char-card-actions .action-btn {
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
}

.wr-scope .actions {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.wr-scope .action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border, #333);
  background: var(--panel, #111);
  color: var(--text, #e6e6eb);
  border-radius: 6px;
  padding: 0.3rem 0.5rem;
  text-decoration: none;
  line-height: 1;
}

.wr-scope .action-btn:hover {
  border-color: var(--accent, #7aa2ff);
}

.wr-scope .mono {
  font-family: ui-monospace, monospace;
}

.wr-scope .character-actions {
  margin-bottom: 1rem;
}

/* Webrunning character sheet */
.wr-scope .sheet {
  display: grid;
  gap: 1.75rem;
}

.wr-scope .card {
  border: 1px solid var(--border, #333);
  border-radius: 16px;
  padding: 1.25rem;
  background: var(--panel, #161821);
  box-shadow: var(--shadow);
}

.wr-scope .card h2 {
  margin-top: 0;
}

.wr-scope .collapsible-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.wr-scope .collapse-toggle {
  font-size: 0.85rem;
  padding: 0.35rem 0.6rem;
  margin: 0;
}

.wr-scope .collapsible-body {
  margin-top: 0.75rem;
}

.wr-scope .collapsible-body > * + * {
  margin-top: 0.9rem;
}

.wr-scope .collapsible.collapsed .collapsible-body {
  display: none;
}

.wr-scope .stats-grid {
  display: grid;
  gap: 0.5rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.wr-scope .core-info dl {
  grid-template-columns: max-content minmax(160px, 1fr);
  row-gap: 0.35rem;
  column-gap: 0.35rem;
  align-items: center;
}

.wr-scope .core-info dd {
  display: flex;
  align-items: center;
  min-height: 2rem;
}

.wr-scope .core-info dd input {
  width: 100%;
}

.wr-scope dl {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 0.75rem;
}

.wr-scope dt {
  font-weight: 600;
}

.wr-scope dd {
  margin: 0;
  color: var(--muted, #b6b6b6);
}


.wr-scope .stat-value-row {
  display: flex;
  width: 100%;
  align-items: baseline;
  gap: 0.6rem;
}

.wr-scope .stat-main-group {
  display: inline-flex;
  align-items: baseline;
}

.wr-scope .stat-limit-value {
  margin-left: auto;
  font-size: 0.8em;
  text-align: right;
  white-space: nowrap;
  opacity: 0.7;
}

.wr-scope .stat-summary {
  display: inline;
  margin-left: 0.4rem;
}

.wr-scope .levelup-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

.wr-scope .levelup-table th,
.wr-scope .levelup-table td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border, #333);
  text-align: left;
  font-size: 0.9rem;
}

.wr-scope .levelup-table th {
  opacity: 0.8;
}

.wr-scope .hidden {
  display: none;
}

.wr-scope .placeholder {
  min-height: 2rem;
  border: 1px dashed var(--border, #333);
  border-radius: 6px;
  padding: 0.75rem;
  color: var(--muted, #b6b6b6);
}

.wr-scope .sheet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
}

.wr-scope .sheet-actions input {
  max-width: 240px;
}

.wr-scope .stat-inputs {
  display: grid;
  gap: 0.75rem 1rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.wr-scope .stat-inputs label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.9rem;
}

.wr-scope .stat-inputs input[type="number"] {
  width: 100%;
}

.wr-scope .xr-modal {
  overscroll-behavior: contain;
}

.wr-scope .xr-modal-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1rem;
}

.wr-scope .xr-modal-card {
  max-height: 80vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.wr-scope #hotkeysModal .xr-modal-card {
  max-width: 720px;
}

.wr-scope #hotkeysModal table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

.wr-scope #hotkeysModal th,
.wr-scope #hotkeysModal td {
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(148, 163, 184, 0.4);
  text-align: left;
}

.wr-scope .xr-modal-card h2 {
  margin-top: 0;
}

.wr-scope .hint {
  font-size: 0.85rem;
  color: var(--muted, #b6b6b6);
}

.wr-scope .muted {
  color: var(--muted, #b6b6b6);
}
.wr-scope .text-danger {
  color: #f08080;
}
.wr-scope .text-warn {
  color: #e0b060;
}

.wr-scope .divider {
  border: none;
  border-top: 1px solid var(--border, #333);
  margin: 1rem 0;
}

.wr-scope .sheet .row {
  display: grid;
  gap: 0.4rem;
}

.wr-scope .sheet .row label {
  font-size: 0.85rem;
  color: var(--muted, #b6b6b6);
}

.wr-scope .ability-list {
  display: grid;
  gap: 0.75rem;
}

.wr-scope .ability-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.5rem;
  align-items: end;
}

.wr-scope .ability-row input {
  width: 100%;
}

.wr-scope .ability-row button {
  margin-bottom: 0.1rem;
}


.wr-scope .section-stack {
  display: grid;
  gap: 0.9rem;
}

.wr-scope .section-card {
  margin: 0;
}


.wr-scope .class-detail-card-title {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.3;
}

.wr-scope .class-ability-subtitle {
  margin: 0.5rem 0 0.2rem;
  font-size: 0.95rem;
  line-height: 1.3;
}

.wr-scope .gear-grid {
  display: grid;
  gap: 1.25rem;
}

.wr-scope .gear-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr auto;
  gap: 0.5rem;
  align-items: end;
}

.wr-scope .gear-row input {
  width: 100%;
}

.wr-scope .gear-row button {
  margin-bottom: 0.1rem;
}

.wr-scope .gear-details-list {
  display: grid;
  gap: 0.5rem;
}

.wr-scope .gear-details {
  display: grid;
  gap: 0.35rem;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  border: 1px solid var(--border, #333);
  background: var(--panel, #161821);
}

.wr-scope .gear-details h4 {
  margin: 0;
}

.wr-scope .gear-details textarea {
  min-height: 80px;
}

.wr-scope .paste-area {
  display: grid;
  gap: 0.5rem;
}

.wr-scope .paste-area textarea {
  min-height: 120px;
}

.wr-scope .paste-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.wr-scope .dice-controls {
  display: grid;
  gap: 0.5rem 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  align-items: end;
}

.wr-scope .dice-output {
  white-space: pre-wrap;
  background: var(--panel, #161821);
  border: 1px solid var(--border, #333);
  border-radius: 12px;
  padding: 0.9rem;
  min-height: 120px;
}

.wr-scope header h1 {
  margin-bottom: 0.35rem;
}

.wr-scope header p {
  margin-top: 0;
  color: var(--muted, #b6b6b6);
}

.wr-scope .card h2,
.wr-scope .card h3 {
  letter-spacing: 0.02em;
}

.wr-scope .gear-item {
  border: 1px solid var(--border, #333);
  border-radius: 14px;
  padding: 0.85rem;
  background: var(--bubble-bg);
  display: grid;
  gap: 0.65rem;
}

.wr-scope .gear-summary {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.75rem 1rem;
  align-items: flex-start;
  justify-content: space-between;
}

.wr-scope .gear-meta {
  display: grid;
  gap: 0.2rem;
  font-size: 0.9rem;
  flex: 1;
  min-width: 0;
}

.wr-scope .gear-stat-summary {
  overflow-wrap: anywhere;
}

.wr-scope .gear-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 0.45rem;
}

.wr-scope .gear-actions button {
  width: 100%;
}

.wr-scope .gear-actions .gear-action-wide {
  grid-column: 1 / -1;
}

.wr-scope .gear-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.85rem;
}


.wr-scope .gear-modification-panel .collapsible-body {
  display: grid;
  gap: 0.6rem;
}

.wr-scope #openGearModificationHub {
  margin-bottom: 0.2rem;
}

.wr-scope .gear-mod-upgrade-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}

.wr-scope .gear-mod-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(170px, 1fr));
  gap: 0.5rem;
}

.wr-scope #gearModificationBody table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.4rem 0 0.8rem;
}

.wr-scope #gearModificationBody th,
.wr-scope #gearModificationBody td {
  border: 1px solid var(--border, #333);
  padding: 0.35rem 0.45rem;
  text-align: left;
}
.wr-scope .gear-tag {
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--tag-color, var(--border, #333));
  background: var(--tag-bg, rgba(255, 255, 255, 0.04));
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.wr-scope .gear-tag--type {
  border-style: dotted;
}

.wr-scope .gear-tag--rarity {
  border-style: solid;
}

.wr-scope .gear-tag--color {
  border-style: dashed;
}

.wr-scope .gear-tag.dual {
  background: linear-gradient(135deg, var(--tag-color), var(--tag-color-secondary));
  border-color: var(--tag-color);
  color: var(--text);
}

.wr-scope .gear-stat--base {
  color: var(--text, #f1f5ff);
}

.wr-scope .gear-stat--bonus {
  color: var(--muted, #9aa3b2);
}

.wr-scope .gear-generator-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.wr-scope .gear-generator-header {
  display: block;
}

.wr-scope .gear-generator-header h2 {
  margin: 0;
}

.wr-scope .gear-generator-header-actions {
  margin-top: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.wr-scope .gear-actions--stack {
  grid-template-columns: 1fr;
}

.wr-scope .gear-details-list {
  display: grid;
  gap: 0.5rem;
}

.wr-scope .gear-details-list ul {
  margin: 0;
  padding-left: 1.25rem;
}

.wr-scope .gear-json-list {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.wr-scope .gear-json-entry {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--border, #333);
  background: var(--panel);
}

.wr-scope .gear-modal-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.wr-scope .gear-detail-notes {
  justify-self: end;
  width: min(100%, 340px);
}

.wr-scope .gear-modal-actions .right-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.wr-scope .gear-item--equipped {
  position: relative;
  padding-left: 3.25rem;
  overflow: hidden;
}

.wr-scope .gear-item--equipped::before {
  content: "";
  position: absolute;
  left: 0.6rem;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 2.2rem;
  border-radius: 14px;
  background: var(--bubble-bg);
  border: 1px solid rgba(148, 163, 184, 0.35);
}

.wr-scope .gear-slot-badge {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%) rotate(-180deg);
  writing-mode: vertical-rl;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text);
  z-index: 1;
}

.wr-scope .manual-gear-section {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 0.9rem;
  border-radius: 14px;
  border: 1px solid var(--border, #333);
  background: var(--panel);
}

.wr-scope .manual-gear-section summary {
  cursor: pointer;
  font-weight: 600;
}

.wr-scope .manual-gear-grid {
  display: grid;
  gap: 0.75rem 1rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.wr-scope .manual-gear-grid textarea {
  min-height: 90px;
}

.wr-scope .manual-gear-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.wr-scope .manual-gear-list {
  display: grid;
  gap: 0.6rem;
}

.wr-scope .manual-gear-row {
  display: grid;
  grid-template-columns: 1fr 140px auto;
  gap: 0.5rem;
  align-items: center;
}

.wr-scope .manual-gear-row select,
.wr-scope .manual-gear-row input {
  width: 100%;
}

.wr-scope .manual-gear-row button {
  justify-self: start;
}

.wr-scope .gear-controls {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.wr-scope .gear-controls-section {
  display: grid;
  gap: 0.75rem;
}

.wr-scope .gear-controls-divider {
  height: 1px;
  background: var(--border, #333);
  border-radius: 999px;
}

.wr-scope .gear-controls-row {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  align-items: end;
}

.wr-scope .notes-area textarea {
  min-height: 140px;
  width: 100%;
}

.wr-scope .slot-count {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--muted, #b6b6b6);
}

.wr-scope .modal-grid {
  display: grid;
  gap: 1rem;
}

.wr-scope .modal-section {
  display: grid;
  gap: 0.6rem;
}

.wr-scope .starting-gear-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.wr-scope .level-preview {
  border: 1px solid var(--border, #333);
  border-radius: 10px;
  padding: 0.85rem;
  background: var(--panel);
}

.wr-scope .level-preview ul {
  margin: 0;
  padding-left: 1.25rem;
}

.wr-scope .energy-inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 0.6rem;
}

.wr-scope .energy-inputs label {
  display: flex;
  flex-direction: column;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  gap: 0.2rem;
}

.wr-scope .energy-inputs input {
  width: 100%;
}

.wr-scope .slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 0.6rem 1rem;
}

.wr-scope .slot-item {
  display: flex;
  gap: 0.35rem;
  align-items: baseline;
}

.wr-scope .slot-item dt {
  font-weight: 600;
}

.wr-scope .slot-item dd {
  margin: 0;
  color: var(--muted, #b6b6b6);
}

.wr-scope .gear-details-list ul,
.wr-scope .ability-dropdown ul {
  margin: 0;
}

.wr-scope .ability-tier--locked {
  color: var(--muted, #b6b6b6);
  opacity: 0.7;
}

.wr-scope .ability-tier--locked strong {
  text-decoration: line-through;
}

.wr-scope .paste-area {
  display: grid;
  gap: 0.6rem;
}

.wr-scope .paste-area textarea {
  width: 100%;
  min-height: 120px;
  font-family: ui-monospace, monospace;
}

.wr-scope .ability-section {
  display: grid;
  gap: 1rem;
  text-align: left;
}

.wr-scope .ability-group {
  border: 1px solid var(--border, #333);
  border-radius: 14px;
  padding: 0.9rem 1rem;
  background: var(--bubble-bg);
}

.wr-scope .ability-group h3 {
  margin-top: 0;
  text-align: left;
}

.wr-scope .ability-dropdown {
  border-top: 1px solid var(--border, #333);
  padding-top: 0.5rem;
}

.wr-scope .ability-dropdown + .ability-dropdown {
  margin-top: 0.5rem;
}

.wr-scope .ability-summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  color: inherit;
  width: 100%;
  text-align: left;
}

.wr-scope .ability-summary::before {
  content: "▸";
  display: inline-block;
  transition: transform 0.2s ease;
}

.wr-scope .ability-dropdown.is-open .ability-summary::before {
  transform: rotate(90deg);
}

.wr-scope .ability-dropdown .ability-details {
  margin-top: 0.5rem;
  display: grid;
  gap: 0.5rem;
  text-align: left;
  justify-items: start;
}

.wr-scope .ability-dropdown .ability-details ul,
.wr-scope .ability-dropdown .ability-details li {
  text-align: left;
}

.wr-scope .ability-dropdown .ability-details[hidden] {
  display: none;
}

.wr-scope .status-popup,
.xr-scope .status-popup {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: min(360px, 90vw);
  pointer-events: none;
}

.wr-scope .status-toast,
.xr-scope .status-toast {
  background: var(--toast-bg, rgba(38, 38, 48, 0.96));
  color: var(--toast-text, #e8e8e8);
  border: 1px solid var(--toast-border, rgba(255, 255, 255, 0.12));
  border-radius: 10px;
  padding: 0.65rem 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  pointer-events: auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  font-size: 0.875rem;
  line-height: 1.4;
  cursor: pointer;
}

.wr-scope .status-toast button,
.xr-scope .status-toast button {
  font-size: 0.8rem;
  padding: 0.3rem 0.55rem;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: inherit;
  cursor: pointer;
  flex-shrink: 0;
}

.wr-scope .status-toast.success,
.xr-scope .status-toast.success {
  background: var(--toast-success-bg, rgba(30, 55, 35, 0.97));
  border-color: var(--toast-success-border, rgba(76, 175, 80, 0.65));
}

.wr-scope .status-toast.error,
.xr-scope .status-toast.error {
  background: var(--toast-error-bg, rgba(55, 28, 28, 0.97));
  border-color: var(--toast-error-border, rgba(244, 67, 54, 0.65));
}

.wr-scope .status-toast.warning,
.xr-scope .status-toast.warning {
  background: var(--toast-warning-bg, rgba(50, 42, 20, 0.97));
  border-color: var(--toast-warning-border, rgba(255, 193, 7, 0.65));
}

.wr-scope .status-toast .status-message,
.xr-scope .status-toast .status-message {
  flex: 1;
}

.wr-scope .deletion-history {
  display: grid;
  gap: 0.5rem;
}

.wr-scope .deletion-history-item {
  border: 1px solid var(--border, #333);
  border-radius: 12px;
  padding: 0.75rem;
  background: rgba(141, 184, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.wr-scope .with-top-gap {
  margin-top: 1rem;
}

.wr-scope .with-top-gap-sm {
  margin-top: 0.75rem;
}

/* ===== XR App styles (scoped) ===== */
.tools-scope .wrap {
  max-width: 760px;
  margin: 2rem auto;
  padding: 1rem;
}

.tools-scope .card {
  border: 1px solid var(--border, #333);
  border-radius: 12px;
  background: var(--panel, #9caeff);
  padding: 1rem;
}

.tools-scope .row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 0.75rem;
  align-items: center;
  margin: 0.5rem 0;
}

.tools-scope .row-compact {
  margin: 0.25rem 0;
}

.tools-scope .actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.tools-scope button {
  padding: 0.45rem 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--border, #333);
  background: var(--input-bg);
  color: var(--text);
  cursor: pointer;
}

.tools-scope button:hover {
  border-color: var(--accent, #7aa2ff);
}

.tools-scope .xr-nav-group-toggle {
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}

.tools-scope .xr-nav-group-toggle:hover,
.tools-scope .xr-nav-group-toggle:active {
  border: 0;
  box-shadow: none;
  transform: none;
}

.tools-scope button.xr-nav-a {
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}

.tools-scope .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.tools-scope .muted {
  opacity: 0.75;
}

.tools-scope .inline {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

input[type="number"],
select,
.tools-scope input[type="text"] {
  width: 100%;
}

.tools-scope .resultGrid {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 0.75rem;
  align-items: center;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border, #333);
}

.tools-scope .details-block {
  margin-top: 0.75rem;
}

.tools-scope .details-output {
  margin-top: 0.5rem;
}

.tools-scope .divider {
  margin: 1rem 0;
  border-color: var(--border, #333);
}

.tools-scope .mod-sign {
  max-width: 110px;
}

.tools-scope .mod-value {
  max-width: 140px;
}

.tools-scope .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}

.tools-scope .grid .card {
  border-radius: 10px;
  padding: 0rem 1rem;
}

.tools-scope .grid .row {
  grid-template-columns: 140px 1fr;
}

.tools-scope label {
  opacity: 0.9;
}

.tools-scope .out {
  background: var(--panel);
  border: 1px solid var(--border, #333);
  border-radius: 10px;
  padding: 1rem;
  white-space: pre-wrap;
  min-height: 80px;
}

@media (max-width: 900px) {
.tools-scope .grid {
    grid-template-columns: 1fr;
  }
}

.tools-scope .calendar-grid {
  grid-template-columns: 1fr 1fr;
}

.tools-scope .calendar-grid .card {
  padding: 1rem;
}

.tools-scope .calendar-grid .row {
  grid-template-columns: 160px 1fr;
}

.tools-scope .calendar-out {
  min-height: 120px;
}

.tools-scope .is-hidden {
  display: none;
}

.tools-scope .clock {
  max-width: 600px;
  margin: 2rem auto;
  padding: 1.5rem;
  background: var(--panel, #a3b4ff);
  border: 1px solid var(--border, #333);
  border-radius: 12px;
  text-align: center;
  font-family: "Ubuntu", sans-serif;
}

.tools-scope .real {
  font-size: 1rem;
  opacity: 0.75;
  margin-bottom: 0.75rem;
}

.tools-scope .xeon {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.4;
}

.tools-scope .season {
  margin-top: 0.4rem;
  opacity: 0.75;
}

.tools-scope .time {
  font-size: 1.25rem;
  letter-spacing: 0.05em;
  margin-top: 0.4rem;
}

.tools-scope .table-wrap {
  width: 100%;
  overflow: visible;
}

.tools-scope .table-wrap table {
  width: 100%;
  margin-top: 0.75rem;
  overflow: hidden;
  border-radius: 12px;
  min-width: 520px;
  border-collapse: collapse;
  table-layout: fixed;
}

.tools-scope .table-wrap th,
.tools-scope .table-wrap td {
  border-bottom: 1px solid var(--border, #333);
  padding: 0.5rem 0.6rem;
  text-align: left;
  word-break: break-word;
  white-space: normal;
}

.tools-scope .table-wrap th {
  opacity: 0.85;
}

.tools-scope .bad {
  color: #ff6b6b;
}

.tools-scope .col-roll {
  width: 13%;
}

.tools-scope .col-meaning {
  width: 25%;
  min-width: 90px;
}

.tools-scope .col-belief,
.tools-scope .col-count,
.tools-scope .col-results {
  width: 20%;
}

@media (max-width: 600px) {
.tools-scope .row {
    grid-template-columns: 1fr;
  }

.tools-scope label {
    font-size: 0.9rem;
    opacity: 0.85;
  }

.tools-scope input {
    width: 100%;
    min-width: 0;
  }

.tools-scope .table-wrap table {
    font-size: 0.85rem;
    min-width: 0;
  }

  .tools-scope .table-wrap th,
.tools-scope .table-wrap td {
    padding: 0.35rem 0.4rem;
  }
}

@media (max-width: 720px) {
  main {
    padding: 1.75rem 1rem 2.5rem;
  }

  h1 {
    font-size: 1.9rem;
  }

  .xr-nav {
    padding: 0.75rem 1rem;
    flex-wrap: wrap;
  }

  .xr-brand {
    font-size: 1rem;
  }

  .xr-nav-groups {
    top: 64px;
  }

  button {
    width: auto;
  }

  input,
  select,
  textarea {
    width: 100%;
  }

  .wr-inline-flex {
    flex-direction: column;
    align-items: stretch;
  }

  .wr-scope .sheet-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .wr-scope .sheet-actions input {
    max-width: none;
  }

  .wr-scope .actions,
  .wr-scope .gear-generator-actions,
  .wr-scope .gear-summary,
  .wr-scope .paste-actions,
  .wr-scope .gear-modal-actions,
  .wr-scope .manual-gear-actions {
    flex-direction: column;
    align-items: stretch;
  }


  .wr-scope .gear-actions {
    grid-template-columns: 1fr;
  }
  .wr-scope .ability-row,
  .wr-scope .gear-row,
  .wr-scope .manual-gear-row {
    grid-template-columns: 1fr;
  }

  .wr-scope .gear-item--equipped {
    padding-left: 1.25rem;
  }

  .wr-scope .gear-item--equipped::before {
    display: none;
  }

  .wr-scope .gear-slot-badge {
    position: static;
    transform: none;
    writing-mode: horizontal-tb;
  }

  .wr-scope .table-full {
    display: block;
    overflow-x: auto;
  }

  /* .wr-scope .table-full th,
  .wr-scope .table-full td {
    white-space: nowrap;
  } */

  /* Character manager: hide table, show cards */
  .wr-scope .char-manager-table {
    display: none !important;
  }
  .wr-scope .char-card-grid {
    display: flex;
  }
  .wr-scope .char-sort-bar {
    display: flex;
  }
  /* Sort buttons inside table-sort-bar: keep compact */
  .wr-scope .char-sort-bar .table-sort {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.82rem;
  }
  .wr-scope .char-sort-bar .table-sort[data-dir] {
    border-color: var(--accent);
    color: var(--accent);
  }

  .wr-scope .xr-modal-card {
    width: calc(100% - 2rem);
    margin: 10vh auto;
  }

  .tools-scope .row,
  .tools-scope .resultGrid,
  .tools-scope .calendar-grid .row {
    grid-template-columns: 1fr;
  }

  .tools-scope .grid .row {
    grid-template-columns: 1fr;
  }

  .tools-scope .grid .card {
    padding: 0.75rem;
  }
}


.hidden {
  display: none !important;
}

.assigned-character-list,
.wr-scope .assigned-character-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (max-width: 820px) {
  .assigned-character-list,
  .wr-scope .assigned-character-list {
    grid-template-columns: 1fr;
  }
}

.assigned-character-card,
.wr-scope .assigned-character-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.8rem 0.9rem;
  background: var(--panel);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.assigned-character-header,
.wr-scope .assigned-character-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 0.45rem;
}

.assigned-character-name,
.wr-scope .assigned-character-name {
  font-weight: 700;
  text-decoration: none;
}

.assigned-character-role,
.wr-scope .assigned-character-role {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.8;
}

.assigned-character-stats,
.wr-scope .assigned-character-stats {
  display: grid;
  gap: 0.45rem;
}

.assigned-character-stats-row,
.wr-scope .assigned-character-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 0.45rem;
}

.assigned-stat,
.wr-scope .assigned-stat {
  border: 1px solid var(--bubble-border);
  border-radius: 9px;
  padding: 0.35rem 0.45rem;
  background: var(--bubble-bg);
  display: flex;
  justify-content: space-between;
  gap: 0.35rem;
  font-size: 0.84rem;
}

.assigned-stat-label,
.wr-scope .assigned-stat-label {
  opacity: 0.72;
}

.assigned-stat-value,
.wr-scope .assigned-stat-value {
  font-weight: 700;
  font-family: var(--mono-font, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
}


.xr-site-legal {
  border-top: 1px solid var(--border);
  margin-top: 2rem;
  padding: 1rem 1.5rem 2rem;
  color: var(--muted);
  text-align: center;
}

.xr-site-legal a {
  color: var(--link);
}

/* ===== Theme Toggle ===== */
.xr-theme-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  font: inherit;
  font-size: 0.85rem;
  padding: 0.35rem 0.65rem;
  cursor: pointer;
  width: 100%;
  justify-content: flex-end;
  margin-top: 4px;
}

.xr-theme-toggle:hover {
  border-color: var(--accent);
  color: var(--text);
}

.xr-theme-toggle-icon {
  font-size: 1rem;
  line-height: 1;
}


/* ===== XRRPG helpers ===== */
.wr-scope .xrrpg-help-link {
  font-size: 0.78rem;
  margin-left: 0.35rem;
}

.wr-scope .xrrpg-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.8rem 1rem;
}

.wr-scope .xrrpg-row {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
  align-items: end;
}

.wr-scope .xrrpg-inline-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: end;
}

.wr-scope .xrrpg-inline-fields label {
  min-width: 130px;
}

.wr-scope .xrrpg-stat-line {
  display: grid;
  grid-template-columns: repeat(8, minmax(90px, 1fr));
  gap: 0.7rem;
}

.wr-scope .xrrpg-stat-line--compact {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

/* Labels inside stat lines must stack text + input vertically so
   the global width:100% on inputs at narrow widths doesn't overflow. */
.wr-scope .xrrpg-stat-line label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.88rem;
}
.wr-scope .xrrpg-stat-line label input,
.wr-scope .xrrpg-stat-line label select {
  width: 100%;
}

.wr-scope .xrrpg-core-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0.9rem;
  margin-bottom: 0.9rem;
}

.wr-scope .xrrpg-core-stats-card {
  border: 1px solid var(--border, #333);
  border-radius: 12px;
  padding: 0.75rem;
  background: var(--bubble-bg);
}

.wr-scope .xrrpg-core-stats-card h3 {
  margin: 0 0 0.55rem;
}

.wr-scope .xrrpg-core-stats-card--full {
  grid-column: 1 / -1;
}

.wr-scope .xrrpg-resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.9rem;
}

.wr-scope .xrrpg-resource-card {
  border: 1px solid var(--border, #333);
  border-radius: 12px;
  padding: 0.75rem;
  background: var(--bubble-bg);
}

.wr-scope .xrrpg-resource-card h3 {
  margin: 0 0 0.55rem;
}

.wr-scope .xrrpg-resource-fields {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* Resource field labels stack text + input vertically */
.wr-scope .xrrpg-resource-fields label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.88rem;
}
.wr-scope .xrrpg-resource-fields label input,
.wr-scope .xrrpg-resource-fields label select {
  width: 100%;
}

/* sheet-actions labels also stack on any width to prevent inline overflow */
.wr-scope .sheet-actions label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.wr-scope .xrrpg-subtitle {
  margin: 0.2rem 0 0.8rem;
}

.wr-scope .xrrpg-notes-stack {
  display: grid;
  gap: 0.8rem;
}

.wr-scope .xrrpg-notes-stack textarea {
  width: 100%;
  min-height: 7rem;
}

.wr-scope .xrrpg-injury-tracker {
  display: grid;
  gap: 0.8rem;
  margin-top: 1rem;
}

.wr-scope .xrrpg-injury-group {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem;
}

.wr-scope .xrrpg-injury-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.wr-scope .xrrpg-stat-column {
  display: grid;
  grid-template-columns: 1fr;
}

.wr-scope .xrrpg-text-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.8rem;
}

.wr-scope .xrrpg-text-grid textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
}

.wr-scope .xrrpg-note-full {
  grid-column: 1 / -1;
}

@media (max-width: 980px) {
  .wr-scope .xrrpg-stat-line {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
}

@media (max-width: 700px) {
  .wr-scope .xrrpg-core-stats-grid,
  .wr-scope .xrrpg-resource-grid,
  .wr-scope .xrrpg-resource-fields {
    grid-template-columns: 1fr;
  }

  .wr-scope .xrrpg-inline-fields {
    flex-direction: column;
    align-items: stretch;
  }

  .wr-scope .xrrpg-inline-fields label {
    min-width: 0;
  }

  .wr-scope .xrrpg-injury-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .wr-scope .xrrpg-stat-line {
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  }

  .wr-scope .table-full {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .wr-scope .xrrpg-resource-tracker {
    flex-wrap: wrap;
  }
}

@media (max-width: 450px) {
  main {
    padding: 1rem 0.5rem 2rem;
  }

  .wr-scope .card {
    padding: 0.75rem;
  }

  .wr-scope .xrrpg-core-stats-card {
    padding: 0.5rem;
  }

  .wr-scope .xrrpg-stat-line--compact {
    grid-template-columns: 1fr;
  }

  .wr-scope .xrrpg-resource-fields,
  .wr-scope .stat-inputs {
    grid-template-columns: 1fr;
  }
}

/* ── Vertical (sideways) table headers on small screens ── */
@media (max-width: 600px) {
  .wr-scope .table-full th,
  .wr-scope .levelup-table th {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    white-space: nowrap;
    padding: 0.5rem 0.2rem;
    vertical-align: bottom;
    text-align: left;
    max-height: 7rem;
    font-size: 0.82rem;
  }
}

/* === Class Abilities Section === */
.xrrpg-class-ability-subsection {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-color, #333);
  overflow: hidden;
}
.xrrpg-class-ability-subsection:last-of-type { border-bottom: none; }

.xrrpg-ability-bubble {
  border: 1px solid var(--bubble-border);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  background: var(--bubble-bg);
  word-break: break-word;
  overflow-wrap: break-word;
  min-width: 0;
  overflow: hidden;
  max-width: 100%;
}

.xrrpg-class-ability-subsection .collapsible-body > * + * {
  margin-top: 0.4rem;
}

.xrrpg-ability-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0;
  flex-wrap: wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}

.xrrpg-ability-row > * {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.xrrpg-ability-desc {
  margin: 0 0 0.5rem 0;
  font-size: 0.875rem;
  color: var(--text-muted, #aaa);
  word-break: break-word;
  overflow-wrap: break-word;
}

.xrrpg-tier-badge {
  font-size: 0.75rem;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  background: var(--accent, #555);
  color: #fff;
}

.xrrpg-resource-tracker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.4rem 0;
}

.xrrpg-resource-tracker .value {
  min-width: 3rem;
  text-align: center;
}

/* Drug tracking card */
.xrrpg-drug-row {
  border: 1px solid var(--border, #333);
  border-radius: 8px;
  padding: 0.5rem 0.65rem;
  margin-bottom: 0.5rem;
}
.xrrpg-drug-row-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}
.xrrpg-drug-row-header .drug-name {
  font-weight: 600;
  flex: 1;
  min-width: 0;
}
.drug-type-badge {
  font-size: 0.72rem;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.drug-type-soft {
  background: var(--accent-muted, #3a5a3a);
  color: #c6f0c6;
}
.drug-type-hard {
  background: var(--danger-muted, #5a2a2a);
  color: #f0c6c6;
}
.drug-active-btn {
  font-size: 0.78rem;
  padding: 0.1rem 0.5rem;
}
.drug-active-btn.active {
  background: var(--accent, #4a8a4a);
  color: #fff;
  border-color: var(--accent, #4a8a4a);
}
.drug-remove-btn {
  font-size: 0.85rem;
  padding: 0.05rem 0.4rem;
  opacity: 0.6;
}
.drug-remove-btn:hover {
  opacity: 1;
}
.xrrpg-drug-row-fields {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.drug-tracker-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
}
.drug-tracker-row .drug-tracker-label {
  min-width: 6rem;
  color: var(--muted, #aaa);
}
.drug-tracker-row .drug-tracker-val {
  min-width: 1.8rem;
  text-align: center;
  font-weight: 600;
}
.drug-dep-threshold {
  font-size: 0.75rem;
  opacity: 0.55;
}
.drug-description {
  font-size: 0.78rem;
  margin: 0.2rem 0 0.35rem;
  line-height: 1.4;
}

/* Drug card 2-column span in resource grid */
.wr-scope .xrrpg-drug-card {
  grid-column: span 2;
}
@media (max-width: 700px) {
  .wr-scope .xrrpg-drug-card { grid-column: span 1; }
}

/* Reputation card 2-column span */
.wr-scope .xrrpg-rep-card {
  grid-column: span 2;
}
@media (max-width: 700px) {
  .wr-scope .xrrpg-rep-card { grid-column: span 1; }
}

/* Rules reference note (small link below card titles) */
.wr-scope .xrrpg-rules-note {
  font-size: 0.78rem;
  margin: 0 0 0.5rem;
  opacity: 0.65;
}
.wr-scope .xrrpg-rules-note a {
  color: var(--accent, #7aa2ff);
  text-decoration: none;
}
.wr-scope .xrrpg-rules-note a:hover { text-decoration: underline; }

/* Reputation entries */
.wr-scope .xrrpg-rep-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.wr-scope .xrrpg-rep-name-stack {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 1;
  min-width: 0;
}
.wr-scope .xrrpg-rep-entry .rep-name {
  font-weight: 600;
}
.wr-scope .xrrpg-rep-controls {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}
.wr-scope .xrrpg-rep-level {
  font-size: 0.9rem;
  font-weight: 600;
  min-width: 2.5rem;
  text-align: center;
}
.wr-scope .xrrpg-rep-label {
  font-size: 0.75rem;
  opacity: 0.65;
}
.wr-scope .xrrpg-rep-remove {
  opacity: 0.55;
  font-size: 0.8rem;
}
.wr-scope .xrrpg-rep-add-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}
.wr-scope .xrrpg-rep-add-row input { flex: 1; min-width: 120px; }

/* Stress meter */
.wr-scope .xrrpg-stress-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0.5rem 0;
}
.wr-scope .xrrpg-stress-value {
  font-size: 1.75rem;
  font-weight: bold;
  min-width: 2.5rem;
  text-align: center;
}
.wr-scope .xrrpg-stress-label {
  font-size: 0.82rem;
  margin-top: 0.25rem;
  line-height: 1.4;
  text-align: center;
}

/* Currency tracker */
.wr-scope .xrrpg-currency-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}
.wr-scope .xrrpg-currency-entry {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.wr-scope .xrrpg-currency-name {
  flex: 1;
  min-width: 100px;
}
.wr-scope .xrrpg-currency-controls {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}
.wr-scope .xrrpg-currency-amount {
  width: 70px;
  text-align: center;
}

/* Manual buffs */
.wr-scope .xrrpg-manual-buffs-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}
.wr-scope .xrrpg-manual-buff-entry {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.wr-scope .xrrpg-manual-buff-text {
  flex: 1;
}

/* Inventory system */
.wr-scope .xrrpg-active-buffs {
  background: var(--bubble-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--border, #333);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: 0.84rem;
  margin-bottom: 0.75rem;
}
.wr-scope .xrrpg-active-buffs-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
  font-size: 0.8rem;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.wr-scope .xrrpg-active-buffs-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.75rem;
}
.wr-scope .xrrpg-inv-item-card {
  border: 1px solid var(--border, #333);
  border-radius: 10px;
  padding: 0.65rem 0.8rem;
  margin-bottom: 0.5rem;
}
.wr-scope .xrrpg-inv-item-card.equipped {
  border-color: var(--accent, #7aa2ff);
}
.wr-scope .xrrpg-inv-item-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.3rem;
}
.wr-scope .xrrpg-inv-item-name {
  font-weight: 600;
  flex: 1;
  min-width: 80px;
}
.wr-scope .xrrpg-inv-item-buffs {
  font-size: 0.78rem;
  opacity: 0.7;
  margin: 0.15rem 0;
}
.wr-scope .xrrpg-inv-item-notes-preview {
  font-size: 0.78rem;
  opacity: 0.55;
  margin: 0.1rem 0 0.3rem;
  font-style: italic;
}
.wr-scope .xrrpg-inv-item-btns {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-top: 0.35rem;
}
.wr-scope .xrrpg-inv-item-btns button {
  font-size: 0.8rem;
  padding: 0.15rem 0.55rem;
}
.wr-scope .xrrpg-inv-edit-pane {
  background: var(--bubble-bg, rgba(255,255,255,0.04));
  border-top: 1px solid var(--border, #333);
  margin-top: 0.5rem;
  padding-top: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.wr-scope .xrrpg-inv-edit-pane label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.85rem;
}
.wr-scope .xrrpg-inv-edit-pane textarea {
  min-height: 60px;
}
.wr-scope .xrrpg-inv-edit-pane .xrrpg-effect-text {
  font-size: 0.82rem;
  opacity: 0.75;
  line-height: 1.45;
  border: 1px solid var(--border, #333);
  border-radius: 6px;
  padding: 0.4rem 0.55rem;
  background: var(--bg, #1e1e1e);
}
.wr-scope .xrrpg-buff-selector {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.3rem 0.75rem;
  font-size: 0.84rem;
}
.wr-scope .xrrpg-buff-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.wr-scope .xrrpg-buff-row input[type="number"] {
  width: 58px;
}
.wr-scope .xrrpg-inv-add-controls {
  margin-top: 0.65rem;
}
.wr-scope .xrrpg-inv-add-panel {
  border: 1px solid var(--border, #333);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  margin-top: 0.45rem;
  cursor: pointer;
}
.wr-scope .xrrpg-inv-add-panel summary {
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.wr-scope .xrrpg-inv-add-form {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.55rem;
}
.wr-scope .xrrpg-inv-add-form input,
.wr-scope .xrrpg-inv-add-form textarea,
.wr-scope .xrrpg-inv-add-form select {
  width: 100%;
  box-sizing: border-box;
}
.wr-scope .cybermod-tier-badge {
  font-size: 0.68rem;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background: var(--accent-muted, #2a3a5a);
  color: var(--accent, #7aa2ff);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.wr-scope .inv-equipped-badge {
  font-size: 0.68rem;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent, #7aa2ff) 20%, transparent);
  color: var(--accent, #7aa2ff);
  font-weight: 600;
}
.wr-scope .xrrpg-inv-cybermod-preview {
  font-size: 0.82rem;
  opacity: 0.7;
  padding: 0.35rem 0;
  line-height: 1.45;
}

.xrrpg-choice-block {
  margin: 0.5rem 0;
}

.xrrpg-pick-fieldset {
  border: 1px solid var(--border-color, #444);
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  margin: 0.5rem 0;
  min-width: 0;          /* override fieldset default min-width: min-content */
  width: 100%;
  box-sizing: border-box;
}

.xrrpg-pick-fieldset legend {
  font-weight: bold;
  padding: 0 0.25rem;
}

.xrrpg-spell-option {
  display: block;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--border-color, #333);
  cursor: pointer;
  word-break: break-word;
  overflow-wrap: break-word;
}

.xrrpg-spell-option:last-child { border-bottom: none; }

.xrrpg-spell-option input[type=checkbox] {
  margin-right: 0.4rem;
}

.xrrpg-spell-option input[type=checkbox]:disabled + strong {
  opacity: 0.6;
}

/* ── Inventory item details preview ──────────────────────────────────────── */
.wr-scope .xrrpg-inv-item-details-preview {
  font-size: 0.8rem;
  color: var(--text-muted, rgba(255,255,255,0.55));
  line-height: 1.45;
  margin: 0.2rem 0 0.25rem;
}

/* ── Class edit button ───────────────────────────────────────────────────── */
.wr-scope .xrrpg-class-edit-btn {
  font-size: 0.78rem;
  padding: 0.15rem 0.45rem;
  opacity: 0.7;
  border-radius: 5px;
  margin-left: auto;
  margin-right: 0.3rem;
  flex-shrink: 0;
  line-height: 1;
}
.wr-scope .xrrpg-class-edit-btn:hover:not(:disabled) {
  opacity: 1;
}

/* ── Class edit modal ────────────────────────────────────────────────────── */
.xrrpg-class-edit-modal-card {
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.xrrpg-class-edit-body {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding-right: 0.25rem;
}
.xrrpg-cedit-ap-row {
  margin-bottom: 0.4rem;
}
.xrrpg-cedit-ap-row select {
  margin-left: 0.4rem;
  min-width: 180px;
}
.xrrpg-cedit-count {
  font-weight: 400;
  font-size: 0.85em;
  opacity: 0.75;
}