/* =============================================================================
   Characters CSS
   ============================================================================= */

/* -----------------------------------------------------------------------------
   List Page
   ----------------------------------------------------------------------------- */

.characters-list-page {
  max-width: 900px;
}

.characters-list-page .page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.characters-list-page .page-header h2 {
  margin: 0;
  color: var(--text-primary);
}

/* -----------------------------------------------------------------------------
   Create Page
   ----------------------------------------------------------------------------- */

.character-new-page {
  max-width: 900px;
}

.character-new-page h2 {
  margin-bottom: 1.5rem;
  color: var(--text-primary);
}

.character-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.character-form textarea {
  min-height: 100px;
  resize: vertical;
}

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

/* -----------------------------------------------------------------------------
   Create Character: Two-Column Header
   ----------------------------------------------------------------------------- */

.character-create-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  padding: 1rem;
  border: 1px solid var(--border-emphasis);
  border-radius: 6px;
}

.create-header-left,
.create-header-right {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mode-toggle {
  display: flex;
  gap: 0.75rem;
}

.mode-option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.15s;
}

.mode-option:hover {
  border-color: var(--accent-red);
  color: var(--text-primary);
}

.mode-option.selected {
  border-color: var(--accent-red);
  color: var(--text-primary);
  background: rgba(230, 57, 70, 0.1);
}

.mode-option input[type="radio"] {
  accent-color: var(--accent-red);
}

.create-header-right .form-field {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.create-header-right textarea {
  flex: 1;
  min-height: 80px;
}

.game-system-label {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-top: -0.5rem;
}

/* -----------------------------------------------------------------------------
   Accordion Sections
   ----------------------------------------------------------------------------- */

.create-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.create-accordion-section {
  border: 1px solid var(--border-emphasis);
  border-radius: 6px;
  overflow: hidden;
}

.create-accordion-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--bg-secondary);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}

.create-accordion-header:hover {
  background: var(--bg-hover);
}

.create-accordion-title {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.95rem;
}

.create-accordion-summary {
  color: var(--text-muted);
  font-size: 0.85rem;
  flex: 1;
}

.create-accordion-chevron {
  color: var(--text-muted);
  font-size: 0.9rem;
  width: 0.75rem;
  flex-shrink: 0;
}

.create-accordion-body {
  padding: 1rem;
  border-top: 1px solid var(--border-primary);
}

/* Split layout within accordion body: selector left, preview right */
.create-section-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.create-section-left,
.create-section-right {
  min-width: 0;
}

.create-section-right .text-secondary {
  font-size: 0.85rem;
}

.method-description {
  padding: 0.5rem 0;
}

.race-detail,
.class-detail {
  font-size: 0.9rem;
}

.race-reqs {
  margin-top: 0.25rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.race-detail ul {
  margin: 0.25rem 0 0 1.25rem;
  padding: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.class-detail .class-info {
  margin-bottom: 0.5rem;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

/* Template Preview */
.template-preview-group {
  margin-bottom: 0.5rem;
}

.template-preview-group strong {
  display: block;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.template-field-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.template-field {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 3px;
  font-size: 0.85rem;
  color: var(--text-primary);
  font-family: monospace;
}

/* Responsive: collapse to single column on narrow screens */
@media (max-width: 700px) {
  .character-create-header {
    grid-template-columns: 1fr;
  }

  .create-section-split {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------------------------------------
   Detail Page
   ----------------------------------------------------------------------------- */

.character-detail-page {
  max-width: 900px;
}

.character-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1rem;
  border: 1px solid var(--border-emphasis);
  border-radius: 6px;
  margin-bottom: 0.5rem;
}

.detail-header-left h2 {
  margin: 0 0 0.5rem 0;
  color: var(--text-primary);
}

.detail-header-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  font-size: 0.9rem;
}

.detail-campaign {
  color: var(--text-primary);
  font-weight: 500;
}

.detail-system {
  color: var(--text-secondary);
}

.detail-separator {
  color: var(--text-muted);
}

.detail-header-right {
  flex-shrink: 0;
}

.character-section {
  margin-top: 0.75rem;
  padding: 1.25rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-emphasis);
  border-radius: 6px;
}

.character-section h3 {
  margin: 0 0 1rem 0;
  color: var(--text-primary);
  font-size: 1rem;
}

/* -----------------------------------------------------------------------------
   Attributes Section
   ----------------------------------------------------------------------------- */

.character-section .section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.character-section .section-header h3 {
  margin: 0;
}

.attribute-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.attribute-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.attribute-row label {
  width: 130px;
  flex-shrink: 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.attribute-row input {
  width: 120px;
}

/* -----------------------------------------------------------------------------
   CP Pool Section
   ----------------------------------------------------------------------------- */

.cp-pool-section .cp-pool-display {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1rem;
}

.cp-available {
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent-red);
  line-height: 1;
}

.cp-meta {
  display: flex;
  gap: 0.5rem;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.cp-forms {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cp-form-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cp-form-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  width: 3.5rem;
  flex-shrink: 0;
}

.cp-amount-input {
  width: 70px;
}

.cp-reason-input {
  flex: 1;
  min-width: 120px;
}

/* --- Resource Pool Forms --- */

.pool-forms {
  margin-top: 0.75rem;
}

.pool-form-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.pool-amount-input {
  width: 60px;
}

.pool-reason-input {
  flex: 1;
  min-width: 100px;
}

.pool-set-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-primary);
}

.pool-set-input {
  width: 70px;
}

.pool-set-reason-input {
  flex: 1;
  min-width: 100px;
}

/* -----------------------------------------------------------------------------
   Advancement Preview
   ----------------------------------------------------------------------------- */

.advance-preview {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* -----------------------------------------------------------------------------
   Skills Section — Two-Column Grid
   ----------------------------------------------------------------------------- */

.skills-page-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

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

@media (max-width: 700px) {
  .skills-grid {
    grid-template-columns: 1fr;
  }
}

/* Skill groups: see components.css */

.skill-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.65rem;
  border-bottom: 1px solid var(--border-primary);
  font-size: 0.85rem;
}

.skill-item:last-child {
  border-bottom: none;
}

.skill-item.skill-spec {
  padding-left: 1.4rem;
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.skill-item.skill-clickable {
  cursor: pointer;
}

.skill-item.skill-clickable:hover {
  background: var(--bg-hover);
}

.skill-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.skill-code {
  font-family: monospace;
  color: var(--accent-red);
  min-width: 3.5rem;
  text-align: right;
  font-size: 0.85rem;
}

.skill-spec .skill-code {
  color: var(--text-secondary);
}

.skill-code-derived {
  color: var(--text-muted);
  font-style: italic;
}

.skill-advance-inline {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.skill-advance-inline .advance-preview {
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.skill-advance-inline .button.small {
  padding: 0.1rem 0.45rem;
  font-size: 0.75rem;
  line-height: 1.4;
}

.skill-advance-form {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-primary);
}

.skill-advance-form h4 {
  margin: 0 0 0.75rem 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.skill-advance-fields {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.skill-advance-fields input,
.skill-advance-fields select {
  flex: 1;
  min-width: 130px;
}

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

/* -----------------------------------------------------------------------------
   BFRPG: Character Creation Form
   ----------------------------------------------------------------------------- */

.race-info,
.class-info {
  margin-top: 0.25rem;
  font-size: 0.8rem;
}

.ability-scores-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.ability-score-input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ability-score-input label {
  min-width: 80px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.ability-score-input label.prime-req {
  color: var(--accent-red);
  font-weight: 600;
}

.ability-score-input .prime-marker {
  color: var(--accent-red);
}

.ability-score-input input {
  width: 70px;
}

.ability-bonus {
  font-size: 0.85rem;
  font-weight: 600;
  min-width: 28px;
  text-align: center;
}

.ability-bonus.positive {
  color: var(--success);
}

.ability-bonus.negative {
  color: var(--error);
}

.validation-hints {
  margin-top: 0.5rem;
}

.validation-hint {
  color: var(--warning);
  font-size: 0.85rem;
  padding: 0.25rem 0;
}

/* -----------------------------------------------------------------------------
   Ability Score Rolling UI
   ----------------------------------------------------------------------------- */

.score-roll-buttons {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.roll-hint {
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.roll-scores-section {
  background: var(--bg-hover);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.roll-scores-section h4 {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.rolled-scores-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.rolled-value {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  text-align: center;
}

.rolled-attr-name {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 0.15rem;
}

.rolled-total {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--success);
}

.rolled-dice-detail {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.roll-actions {
  display: flex;
  gap: 0.5rem;
}

@media (max-width: 600px) {
  .rolled-scores-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .score-roll-buttons {
    flex-wrap: wrap;
  }
}

/* -----------------------------------------------------------------------------
   BFRPG: Ability Scores Section (Detail Page)
   ----------------------------------------------------------------------------- */

.ability-scores-section .admin-table {
  max-width: 400px;
}

/* -----------------------------------------------------------------------------
   BFRPG: Level & XP Section
   ----------------------------------------------------------------------------- */

.level-xp-display {
  margin-bottom: 1rem;
}

.level-xp-stats {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.level-badge {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
}

.hp-badge {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--accent-red);
}

.xp-display {
  font-size: 0.9rem;
}

.xp-total {
  color: var(--text-primary);
  font-weight: 600;
}

.xp-award-form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.xp-award-form input[type="number"] {
  width: 100px;
}

.xp-award-form input[type="text"] {
  flex: 1;
  min-width: 150px;
}

.level-up-form {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-primary);
}

.level-up-form h4 {
  margin: 0 0 0.75rem 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.level-up-fields {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.level-up-fields label {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.level-up-fields input {
  width: 80px;
}

/* -----------------------------------------------------------------------------
   Generation Method Selector
   ----------------------------------------------------------------------------- */

.generation-method-selector {
  margin-bottom: 1rem;
}

.generation-method-selector > label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
  font-weight: 500;
}

.method-options {
  display: flex;
  gap: 0.75rem;
}

.method-option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: border-color 0.2s, color 0.2s;
}

.method-option:hover {
  border-color: var(--accent-red);
  color: var(--text-primary);
}

.method-option.selected {
  border-color: var(--accent-red);
  color: var(--text-primary);
  background: rgba(230, 57, 70, 0.1);
}

.method-option input[type="radio"] {
  accent-color: var(--accent-red);
}

/* -----------------------------------------------------------------------------
   Dice Pool Allocation Form
   ----------------------------------------------------------------------------- */

.dice-pool-form {
  margin-bottom: 1rem;
}

.dice-pool-budget {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 1rem;
  border-radius: 4px;
  font-size: 0.95rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
}

.dice-pool-budget.valid {
  border-color: var(--success);
  color: var(--success);
}

.dice-pool-budget.over {
  border-color: var(--error);
  color: var(--error);
}

.dice-pool-budget.under {
  border-color: var(--warning);
  color: var(--warning);
}

.budget-total {
  font-weight: 500;
}

.budget-separator {
  color: var(--text-muted);
}

.budget-remaining {
  font-weight: 600;
}

.dice-pool-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dice-pool-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: 4px;
}

.dice-pool-row .attr-name {
  flex: 1;
  color: var(--text-primary);
  font-weight: 500;
  min-width: 100px;
}

.dice-pool-row .die-code-display {
  min-width: 50px;
  text-align: center;
  font-weight: 600;
  color: var(--text-primary);
  font-family: monospace;
  font-size: 1rem;
}

.dice-pool-row .pool-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: bold;
  min-width: unset;
}

/* AP → SP Conversion Section */

.ap-conversion-section {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  background: var(--bg-secondary);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ap-conversion-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ap-conversion-title {
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 600;
}

.ap-conversion-rate {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.ap-conversion-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ap-conversion-value {
  min-width: 100px;
  color: var(--text-primary);
  font-family: monospace;
  font-size: 0.95rem;
}

.ap-conversion-gain {
  color: var(--success);
  font-size: 0.85rem;
}

/* Conversion note on skills advancement page */

.conversion-note {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
  padding: 0.4rem 0.75rem;
  border-left: 2px solid var(--border-primary);
}

/* Responsive: stack ability scores on small screens */
@media (max-width: 600px) {
  .ability-scores-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .method-options {
    flex-direction: column;
  }
}

/* -----------------------------------------------------------------------------
   Resource Pools Section
   ----------------------------------------------------------------------------- */

.resource-pools-section .section-header {
  margin-bottom: 1rem;
}

.resource-pools-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.pool-card {
  min-width: 220px;
  max-width: 480px;
  flex: 1;
  padding: 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
}

.pool-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.pool-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.95rem;
}

.pool-abbrev {
  font-size: 0.75rem;
  padding: 0.1rem 0.4rem;
  background: var(--bg-hover);
  border: 1px solid var(--border-primary);
  border-radius: 3px;
  color: var(--text-secondary);
  font-weight: 500;
}

.pool-refresh {
  margin-left: auto;
  font-size: 0.75rem;
  padding: 0.1rem 0.4rem;
  background: rgba(96, 165, 250, 0.15);
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 3px;
  color: var(--info);
}

.pool-current-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent-red);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.pool-effect {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 0.75rem;
}

.pool-controls {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.pool-set-form {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-primary);
}

.pool-set-form input[type="number"] {
  width: 70px;
}

.pool-set-form input[type="text"] {
  flex: 1;
  min-width: 80px;
}

@media (max-width: 600px) {
  .resource-pools-grid {
    flex-direction: column;
  }

  .pool-card {
    max-width: none;
  }
}

/* -----------------------------------------------------------------------------
   Decline Form (GM decline with reason input)
   ----------------------------------------------------------------------------- */

.decline-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.decline-form input {
  padding: 0.35rem 0.5rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 0.85rem;
  width: 200px;
}

.decline-form input::placeholder {
  color: var(--text-disabled);
}

/* -----------------------------------------------------------------------------
   Draft Edit — Action Button Layout
   ----------------------------------------------------------------------------- */

.draft-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.draft-actions-left {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.draft-actions-right {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.character-draft-edit .read-only-field {
  background: var(--bg-disabled);
  color: var(--text-muted);
  cursor: not-allowed;
}

/* -----------------------------------------------------------------------------
   Character Sidebar Navigation
   ----------------------------------------------------------------------------- */

.character-nav {
  background: var(--bg-primary);
  padding: 1.5rem;
  border-radius: 8px;
  border: 1px solid var(--border-primary);
}

.character-nav .nav-header {
  border-bottom: 2px solid var(--accent-red);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.character-nav h3 {
  margin: 0 0 0.25rem 0;
  font-size: 1.1rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.character-nav .nav-status {
  margin-top: 0.25rem;
}

.character-nav .nav-status .badge {
  font-size: 0.6rem;
  padding: 0.15rem 0.35rem;
}

.character-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.character-nav li {
  margin-bottom: 0.25rem;
}

.character-nav a {
  display: block;
  padding: 0.6rem 1rem;
  text-decoration: none;
  color: var(--text-secondary);
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
  font-size: 0.9rem;
}

.character-nav a:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.character-nav a.active {
  background: var(--accent-red);
  color: #ffffff;
  font-weight: 500;
}

/* -----------------------------------------------------------------------------
   Class Progression Tables
   ----------------------------------------------------------------------------- */

.progression-table {
  font-size: 0.85rem;
}

.progression-table th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.progression-table td {
  padding: 0.35rem 0.6rem;
  text-align: center;
}

.progression-table td:first-child {
  text-align: center;
  font-weight: 600;
}

.progression-table .current-level {
  background: rgba(230, 57, 70, 0.15);
  border-left: 3px solid var(--accent-red);
}

.progression-table .current-level td {
  color: var(--text-primary);
  font-weight: 600;
}

.progression-table td.zero-spell {
  color: var(--text-muted);
}

/* BFRPG Current Stats Summary */
.bfrpg-current-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  margin-bottom: 1.5rem;
}

.current-stat-group h4 {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.save-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.save-badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  background: var(--bg-hover);
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  font-size: 0.8rem;
  white-space: nowrap;
}

.save-badge strong {
  color: var(--text-secondary);
  margin-right: 0.2rem;
}

/* -----------------------------------------------------------------------------
   Currency Section
   ----------------------------------------------------------------------------- */

.currency-section {
  margin-bottom: 2rem;
}

.currency-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.currency-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 1rem;
  min-width: 160px;
  flex: 1;
}

.currency-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.currency-name {
  font-weight: 600;
  color: var(--text-primary);
}

.currency-abbrev {
  font-size: 0.75rem;
  padding: 0.125rem 0.375rem;
  background: var(--bg-hover);
  border-radius: 4px;
  color: var(--text-secondary);
}

.currency-current-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.currency-controls {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.currency-set-form {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  margin-top: 0.5rem;
}

.currency-set-form input[type="number"] {
  width: 70px;
}

.currency-set-form input[type="text"] {
  width: 100px;
}

/* Horizontal controls table for currency and resource pools */
.resource-controls-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.75rem;
}

.resource-controls-table thead th {
  background: #000;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.resource-controls-table td {
  padding: 0.4rem 0.5rem;
  vertical-align: middle;
}

.resource-controls-table td input {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  color: var(--text-primary);
  border-radius: 3px;
  padding: 0.3rem 0.4rem;
  font-size: 0.9rem;
}

.resource-controls-table td input:focus {
  outline: none;
  border-color: var(--accent-red);
}

.resource-controls-table .col-amount {
  width: calc(5ch + 3.4rem);
}

.resource-controls-table .col-reason {
  width: 80%;
}

.resource-controls-table .col-actions {
  white-space: nowrap;
}

.resource-controls-table .col-actions .button + .button {
  margin-left: 0.375rem;
}

/* -----------------------------------------------------------------------------
   Inventory Section
   ----------------------------------------------------------------------------- */

.inventory-section {
  margin-bottom: 2rem;
}

.inventory-section .section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.inventory-group {
  margin-bottom: 1.5rem;
}

.inventory-category-header {
  color: var(--text-secondary);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-primary);
  padding-bottom: 0.25rem;
}

.inventory-section .admin-table td.center,
.inventory-section .admin-table th.center {
  text-align: center;
}

.inventory-section .admin-table td .badge {
  margin-left: 0.5rem;
  font-size: 0.625rem;
}

.inventory-row-equipped {
  background: rgba(74, 222, 128, 0.05);
}

.inventory-section .admin-table td .button {
  margin-right: 0.25rem;
}

.inventory-item-description {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
  font-style: italic;
}

.inventory-edit-row td {
  padding: 0.75rem;
  background: var(--bg-secondary);
}

.inventory-edit-row .special-item-form-table {
  margin-bottom: 0.5rem;
}

.inventory-edit-row textarea {
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
}

/* Inventory Filter */

.inventory-filter {
  margin-bottom: 0.75rem;
}

.inventory-filter input {
  width: 100%;
  max-width: 300px;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.9rem;
}

/* Add Item Form */

.add-item-form {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.add-item-mode-toggle {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.custom-item-fields,
.catalog-item-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.custom-item-fields .form-field,
.catalog-item-fields .form-field {
  flex: 1;
  min-width: 150px;
}

.add-item-actions {
  display: flex;
  gap: 0.5rem;
}

.add-item-form .special-item-form-table th {
  background: #000;
}

.add-item-form .special-item-form-table td input,
.add-item-form .special-item-form-table td select {
  background: var(--bg-hover);
  border-color: var(--border-emphasis);
}

/* =============================================================================
   Special Items Section
   ============================================================================= */

.special-items-section {
  margin-bottom: 2rem;
}

.special-item-card {
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  margin-bottom: 0.75rem;
  background: var(--bg-primary);
}

.special-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  cursor: pointer;
  user-select: none;
}

.special-item-header:hover {
  background: var(--bg-hover);
}

.special-item-title {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.special-item-name {
  font-weight: 600;
  color: var(--text-primary);
}

.special-item-type {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-style: italic;
}

.special-item-owner {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.special-item-toggle {
  color: var(--text-muted);
  font-size: 0.75rem;
  flex-shrink: 0;
}

.special-item-description {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
  border-top: 1px solid var(--border-primary);
}

.special-item-quote {
  margin: 0;
  padding: 0.5rem 1rem 0.5rem 1.5rem;
  border-left: 3px solid var(--accent-red);
  font-style: italic;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.special-item-actions {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 1rem 0.75rem;
}

.special-item-edit-form {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border-primary);
}

/* Table-layout form for grant/edit special items */
.special-item-form-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0.75rem;
}

.special-item-form-table th,
.special-item-form-table td {
  padding: 0.35rem 0.5rem;
  vertical-align: middle;
  border: none;
  background: none;
  color: var(--text-primary);
  font-weight: normal;
  text-align: left;
}

.special-item-form-table th {
  width: 7rem;
  white-space: nowrap;
  color: var(--text-secondary);
  font-size: 0.85rem;
  padding-right: 0.75rem;
}

.special-item-form-table td input,
.special-item-form-table td textarea,
.special-item-form-table td select {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  color: var(--text-primary);
  border-radius: 3px;
  padding: 0.3rem 0.5rem;
  font-size: 0.9rem;
}

.special-item-form-table td textarea {
  min-height: 3.5rem;
  resize: vertical;
}

.special-item-form-table td input:focus,
.special-item-form-table td textarea:focus,
.special-item-form-table td select:focus {
  outline: none;
  border-color: var(--accent-red);
}

.special-item-edit-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.special-item-add-form {
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  padding: 1rem;
  margin-bottom: 1rem;
  background: var(--bg-secondary);
}

.special-item-add-form h4 {
  margin: 0 0 0.75rem;
  color: var(--text-primary);
}

.special-item-add-form .form-field {
  margin-bottom: 0.5rem;
}

.special-item-add-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.special-item-form-layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Game Effects Editor */
.game-effects-editor {
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  padding: 0.75rem;
  background: var(--bg-primary);
}

.game-effects-editor h4 {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.game-effect-entry {
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  background: var(--bg-secondary);
}

.game-effect-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.game-effect-fields {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.game-effect-fields .form-field {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.game-effect-fields .form-field label {
  min-width: 120px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  padding-top: 0.3rem;
}

.game-effect-fields .form-field input,
.game-effect-fields .form-field textarea,
.game-effect-fields .form-field select {
  flex: 1;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: 3px;
  color: var(--text-primary);
  padding: 0.3rem 0.5rem;
  font-size: 0.85rem;
}

.game-effect-fields .form-field textarea {
  min-height: 2.5rem;
  resize: vertical;
}

.game-effect-add-buttons {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* Game Effects Display (card view) */
.game-effects-list {
  padding: 0.25rem 0.5rem;
}

.game-effect-display {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.25rem 0;
  font-size: 0.85rem;
}

.game-effect-display .effect-detail {
  color: var(--text-secondary);
}

.game-effect-display .usage-badge {
  color: var(--text-muted);
  font-style: italic;
}

.game-effect-display .stat-override-chips {
  display: inline-flex;
  gap: 0.25rem;
  margin-left: 0.25rem;
}

/* Interactive ability/mode buttons within effect display */
.game-effect-display .use-ability-btn {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
}

/* Check window modifier condition label */
.modifier-condition {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-style: italic;
  margin-left: 0.25rem;
}

/* =============================================================================
   Wound Level
   ============================================================================= */

.wound-current {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.wound-label {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.wound-status-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.wound-penalty {
  color: var(--error);
  font-style: italic;
}

.soak-btn {
  margin-left: auto;
}

.wound-controls {
  margin-top: 0.25rem;
}

.wound-select {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  color: var(--text-primary);
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  max-width: 220px;
  cursor: pointer;
}

.wound-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* =============================================================================
   Check Window
   ============================================================================= */

.check-row {
  cursor: pointer;
  transition: background 0.1s, outline 0.1s;
}

.check-row:hover {
  background: rgba(230, 57, 70, 0.08);
  outline: 1px solid rgba(230, 57, 70, 0.3);
  outline-offset: -1px;
}

.check-row:hover td,
.check-row:hover th {
  color: var(--text-primary);
}

.check-window-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.check-window {
  background: var(--bg-primary);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  width: 100%;
  max-width: 480px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.check-window-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.check-window-header h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.1rem;
}

.check-window-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 0 0.25rem;
  line-height: 1;
}

.check-window-close:hover {
  color: var(--text-primary);
}

.check-window-pool {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.check-window-pool.total {
  border: 1px solid var(--accent-red);
}

.pool-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.pool-label {
  color: var(--text-secondary);
  font-size: 0.85rem;
  min-width: 110px;
}

.pool-value {
  color: var(--text-primary);
  font-weight: 600;
  font-family: monospace;
  font-size: 1rem;
}

.pool-value.wound {
  color: var(--error);
}

.pool-value.total {
  color: var(--accent-red);
  font-size: 1.1rem;
}

.check-window-modifiers {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.modifiers-label {
  margin: 0 0 0.25rem;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.modifier-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.modifier-row input[type="checkbox"] {
  cursor: pointer;
}

.modifier-name {
  font-weight: 500;
}

.modifier-stats {
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.check-window-situational {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.situational-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.situational-chip {
  background: var(--bg-hover);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  padding: 0.25rem 0.65rem;
  transition: all 0.15s;
}

.situational-chip:hover {
  border-color: var(--accent-red);
  color: var(--text-primary);
}

.situational-chip.active {
  background: rgba(230, 57, 70, 0.15);
  border-color: var(--accent-red);
  color: var(--text-primary);
}

.chip-modifier {
  color: var(--error);
  font-size: 0.75rem;
  font-weight: 600;
}

.situational-chip.active .chip-modifier {
  color: var(--error);
}

.check-window-weapons {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.weapon-context {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
}

.weapon-context-header {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  margin-bottom: 0.4rem;
}

.weapon-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.weapon-damage {
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.weapon-ranges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.range-label {
  color: var(--text-secondary);
  font-size: 0.8rem;
  margin-right: 0.25rem;
}

.range-chip {
  background: var(--bg-hover);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.78rem;
  padding: 0.2rem 0.6rem;
  transition: all 0.15s;
}

.range-chip:hover {
  border-color: var(--accent-red);
  color: var(--text-primary);
}

.range-chip.selected {
  background: var(--accent-red);
  border-color: var(--accent-red);
  color: #fff;
}

.weapon-difficulty {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.weapon-difficulty strong {
  color: var(--text-primary);
}

.check-window-target {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.pool-value.target {
  color: var(--info);
  font-size: 1.1rem;
  font-weight: 700;
}

.check-window-free-mod {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.check-window-free-mod label {
  color: var(--text-secondary);
  font-size: 0.85rem;
  min-width: 110px;
}

.check-window-free-mod input {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  color: var(--text-primary);
  padding: 0.35rem 0.6rem;
  font-family: monospace;
  width: 120px;
}

.check-window-cp-bonus {
  padding: 0.4rem 1rem;
}

.cp-bonus-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--text-primary);
  cursor: pointer;
}

.cp-bonus-label input[type="checkbox"] {
  accent-color: var(--accent-red);
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.cp-bonus-hint {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.check-window-roll-results {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.5rem 0;
}

.die-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--bg-secondary);
  border: 2px solid var(--border-primary);
  color: var(--text-primary);
  font-weight: 700;
  font-size: 0.95rem;
}

.die-chip.wild {
  border-color: var(--accent-red);
  color: var(--accent-red);
}

.roll-total {
  color: var(--text-primary);
  font-weight: 700;
  font-size: 1.1rem;
  margin-left: 0.5rem;
}

.complication-badge {
  color: var(--error);
  font-weight: 700;
  font-size: 0.85rem;
  margin-left: 0.5rem;
}

.check-window-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.or-label {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.manual-result-input {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  color: var(--text-primary);
  padding: 0.35rem 0.5rem;
  width: 70px;
  font-size: 0.9rem;
  text-align: center;
}

/* -----------------------------------------------------------------------------
   Skill Creation Pool (draft characters)
   ----------------------------------------------------------------------------- */

.skill-pool-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.skill-pool-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-primary);
}

.skill-pool-header h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Budget display */

.skill-pool-budget {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.85rem;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  border: 1px solid var(--border-primary);
  background: var(--bg-secondary);
}

.skill-pool-budget.valid {
  border-color: var(--success);
  color: var(--success);
}

.skill-pool-budget.over {
  border-color: var(--error);
  color: var(--error);
  background: var(--error-bg);
}

.skill-pool-budget.under {
  color: var(--text-secondary);
}

.budget-total {
  font-weight: 600;
}

.budget-separator {
  color: var(--text-muted);
}

.budget-remaining {
  font-size: 0.8rem;
}

/* AP→SP Exchange */

.skill-pool-exchange {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  font-size: 0.85rem;
}

.exchange-label {
  color: var(--text-secondary);
  white-space: nowrap;
}

.exchange-controls {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.exchange-count {
  min-width: 10rem;
  text-align: center;
  color: var(--text-primary);
  font-size: 0.8rem;
}

/* Per-skill pool rows */

.skill-pool-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid var(--border-primary);
}

.skill-pool-row:last-child {
  border-bottom: none;
}

.skill-pool-row.skill-spec {
  padding-left: 1.5rem;
  background: rgba(255, 255, 255, 0.02);
}

.skill-pool-parent {
  font-size: 0.75rem;
  color: var(--text-muted);
  min-width: 3rem;
  text-align: right;
}

.skill-pool-controls {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.skill-pool-controls .die-code-display {
  min-width: 4rem;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.skill-pool-controls .die-code-display.skill-allocated {
  color: var(--accent-red);
}

.skill-code-derived {
  color: var(--text-muted);
  font-weight: 400;
}

.pool-btn {
  min-width: 1.75rem;
  padding: 0.2rem 0.4rem;
  line-height: 1;
  font-size: 1rem;
  font-weight: 700;
}

/* =============================================================================
   Collapsible overview sections (Physicality, Notes, Biography)
   Uses .character-section as base — lighter border, same padding feel
   ============================================================================= */

.overview-collapsible {
  padding: 0 !important;
  overflow: hidden;
}

.overview-collapsible-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  cursor: pointer;
  user-select: none;
}

.overview-collapsible-header:hover {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px 6px 0 0;
}

.overview-collapsible-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.overview-collapsible-body {
  padding: 0 1.25rem 1.25rem;
  border-top: 1px solid var(--border-emphasis);
}

.collapse-icon {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
}

/* Physicality table — horizontal labels + inputs */

.physicality-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0.75rem;
  margin-top: 0.75rem;
}

.physicality-table th {
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: right;
  padding: 0.4rem 0.75rem 0.4rem 0.5rem;
  white-space: nowrap;
  width: 5rem;
}

.physicality-table td {
  padding: 0.4rem 1rem 0.4rem 0;
}

.physicality-table td:last-child {
  padding-right: 0;
}

.physicality-table .edit-input {
  width: 100%;
}

/* Physical Description form-field — label left, textarea fills remaining width */
.overview-collapsible-body .form-field {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0;
}

.overview-collapsible-body .form-field label {
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  padding-top: 0.5rem;
  text-align: right;
  width: 8.5rem;
}

.overview-collapsible-body .form-field textarea {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  width: 100%;
}

.overview-notes-textarea {
  width: 100%;
  min-height: 5rem;
  resize: vertical;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  color: var(--text-primary);
  border-radius: 4px;
  padding: 0.5rem;
  font-family: inherit;
  font-size: 0.9rem;
  box-sizing: border-box;
  margin-top: 0.75rem;
}

.overview-notes-textarea:focus {
  outline: none;
  border-color: var(--accent-red);
}

.overview-info-panel {
  margin-top: 0;
}

.profile-save-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.75rem;
}

/* Biography page */

.biography-page {
  display: flex;
  flex-direction: column;
}

.biography-textarea {
  width: 100%;
  min-height: 8rem;
  resize: vertical;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  color: var(--text-primary);
  border-radius: 4px;
  padding: 0.5rem;
  font-family: inherit;
  font-size: 0.9rem;
  box-sizing: border-box;
}

.biography-textarea:focus {
  outline: none;
  border-color: var(--accent-red);
}

/* Dossier page — portrait + physicality header */
.dossier-page {
  display: flex;
  flex-direction: column;
}

.dossier-header {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.dossier-portrait {
  flex-shrink: 0;
  width: 160px;
}

.dossier-portrait .image-placeholder {
  width: 160px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  font-size: 3rem;
  color: var(--text-muted);
}

.dossier-physicality {
  flex: 1;
}

.dossier-physicality .physicality-table {
  width: 100%;
}

.dossier-physicality .physicality-table th {
  text-align: left;
  padding: 0.4rem 0.5rem;
  color: var(--text-secondary);
  font-weight: 600;
  width: 5rem;
}

.dossier-physicality .physicality-table td {
  padding: 0.4rem 0.5rem;
}

.dossier-physicality .physicality-table input {
  width: 100%;
}

@media (max-width: 480px) {
  .dossier-header {
    flex-direction: column;
    align-items: center;
  }

  .dossier-portrait {
    width: 120px;
  }

  .dossier-portrait .image-placeholder {
    width: 120px;
    height: 150px;
  }

  .dossier-physicality {
    width: 100%;
  }
}

/* =============================================================================
   Body Points
   ============================================================================= */

.body-points-display {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.body-points-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}

.body-points-bar {
  flex: 1;
  height: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  overflow: hidden;
}

.body-points-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.3s ease;
}

.body-points-fill.bp-ok       { background: var(--success); }
.body-points-fill.bp-danger   { background: var(--warning); }
.body-points-fill.bp-critical { background: var(--error); }
.body-points-fill.bp-dead     { background: var(--text-muted); }

.body-points-controls { margin-top: 0.75rem; }

.bp-form-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.bp-amount-input { width: 80px; }
.bp-reason-input { flex: 1; }

.bp-buttons {
  display: flex;
  gap: 0.5rem;
}

.bp-derived-wound {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* A/D/SA */
.adsa-add-form {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  padding: 1rem;
  margin-top: 1rem;
}

.adsa-add-form h4 {
  margin: 0 0 1rem 0;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.form-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0.25rem 0 0 0;
}

/* -----------------------------------------------------------------------------
   A/D/SA Catalog Picker
   ----------------------------------------------------------------------------- */

.adsa-cp-budget {
  margin-bottom: 1rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 4px;
}

.adsa-cp-budget .cp-label {
  font-weight: 600;
  color: var(--text-primary);
}

.adsa-cp-budget .cp-detail {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-left: 0.5rem;
}

.adsa-catalog-picker {
  margin-top: 1.5rem;
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  padding: 1rem;
  background: var(--bg-secondary);
}

.adsa-catalog-picker h4 {
  margin: 0 0 0.75rem 0;
  color: var(--text-primary);
}

.adsa-type-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.adsa-catalog-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 500px;
  overflow-y: auto;
}

.adsa-catalog-card {
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  padding: 0.75rem;
  background: var(--bg-primary);
}

.adsa-catalog-card.already-selected {
  opacity: 0.6;
  border-color: var(--text-muted);
}

.adsa-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.adsa-card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.adsa-card-body {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-primary);
}

.adsa-description {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin: 0 0 0.75rem 0;
  line-height: 1.4;
}

.adsa-ranks-table {
  margin-bottom: 0.75rem;
}

.adsa-ranks-table .highlight-row {
  background: rgba(230, 57, 70, 0.1);
}

.adsa-card-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.adsa-card-actions .form-field.inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.adsa-card-actions .form-field.inline label {
  margin: 0;
  font-size: 0.85rem;
}

.adsa-card-actions .form-field.inline select {
  width: auto;
  min-width: 60px;
}

.cp-cost-preview {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

/* A/D/SA Modifier Checkboxes */
.adsa-modifiers-section {
  margin: 0.5rem 0;
  padding: 0.5rem 0;
  border-top: 1px solid var(--border-primary);
}

.adsa-modifiers-section .modifier-label {
  display: block;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.modifier-checkbox {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0;
  cursor: pointer;
  font-size: 0.85rem;
}

.modifier-checkbox input[type="checkbox"] {
  accent-color: var(--accent-red);
}

.modifier-checkbox .modifier-name {
  color: var(--text-primary);
}

.modifier-checkbox .modifier-cost {
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.modifier-checkbox .modifier-desc {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-left: 0.25rem;
}

/* Modifier badges on read-only entries */
.modifier-badges {
  display: inline;
  margin-left: 0.4rem;
}

.modifier-badges .badge {
  font-size: 0.7rem;
  margin-left: 0.2rem;
  vertical-align: middle;
}

/* Submission Checklist */
.submission-checklist {
  margin: 1rem 0 1.5rem;
  padding: 1rem;
  background: var(--bg-secondary);
  border-radius: 6px;
  border: 1px solid var(--border-primary);
}

.submission-checklist h4 {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
}

.checklist-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.checklist-item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.35rem 0;
  font-size: 0.9rem;
}

.checklist-icon {
  font-size: 0.85rem;
  width: 1.2rem;
  text-align: center;
  flex-shrink: 0;
}

.checklist-item.complete .checklist-icon { color: var(--success); }
.checklist-item.incomplete .checklist-icon { color: var(--error); }
.checklist-item.warning .checklist-icon { color: var(--warning); }

.checklist-label {
  font-weight: 500;
}

.checklist-message {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-left: 0.25rem;
}

.checklist-message::before {
  content: "— ";
}

.checklist-warning {
  color: var(--warning);
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

/* Session View (Play Mode) */
.session-view {
  max-width: 600px;
  margin: 0 auto;
}

.session-header {
  margin-bottom: 1.5rem;
}

.session-name-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.session-char-name {
  margin: 0;
}

.session-wound-badge {
  font-size: 0.8rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}
.session-wound-badge.healthy { background: var(--success-bg); color: var(--success); }
.session-wound-badge.wounded { background: var(--error-bg); color: var(--error); }

.session-meta {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

.session-section {
  margin-bottom: 1.5rem;
}

.session-section h3 {
  margin-bottom: 0.75rem;
  font-size: 1rem;
}

.session-primary {
  background: var(--bg-secondary);
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid var(--border-primary);
}

.session-action-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border-primary);
}

.session-action-row:last-child {
  border-bottom: none;
}

.session-action-row.pinned {
  font-weight: 500;
}

.session-action-info {
  flex: 1;
  min-width: 0;
}

.session-action-name {
  text-transform: capitalize;
}

.session-action-parent {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-left: 0.35rem;
}

.session-action-dice {
  font-family: monospace;
  font-weight: 600;
  min-width: 50px;
  text-align: right;
}

.session-modifier {
  color: var(--text-secondary);
  font-weight: 400;
}

.session-roll-btn {
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  background: var(--accent-red);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.session-roll-btn:hover {
  background: var(--accent-red-hover);
}

.session-roll-result {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  padding: 0.15rem 0.4rem;
  background: var(--success-bg);
  border-radius: 4px;
  font-size: 0.85rem;
}

.session-roll-total {
  font-weight: 700;
  color: var(--success);
}

.session-roll-detail {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.session-skill-group {
  margin-bottom: 1rem;
}

.session-skill-group-header {
  display: flex;
  justify-content: space-between;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--border-primary);
  margin-bottom: 0.25rem;
}

.session-attr-name {
  font-weight: 600;
  font-size: 0.9rem;
}

.session-attr-code {
  font-family: monospace;
  color: var(--text-secondary);
}

.session-resource {
  display: flex;
  justify-content: space-between;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--border-primary);
}

.session-resource:last-child {
  border-bottom: none;
}

.session-resource-name {
  text-transform: capitalize;
}

.session-resource-value.wounded {
  color: var(--error);
}
.session-resource-value.healthy {
  color: var(--success);
}

.session-notes {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* OSR Combat & Saves section */
.session-combat-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.session-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  min-width: 100px;
}

.session-stat-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.session-stat-value {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
}

.session-subsection-title {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0.75rem 0 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.roll-pass .session-roll-total {
  color: var(--success);
}

.roll-fail .session-roll-total {
  color: var(--error);
}

.session-footer {
  margin-top: 2rem;
  text-align: center;
}

/* =============================================================================
   Mobile Responsive — Character Detail + Session View
   ============================================================================= */

@media (max-width: 480px) {
  .character-detail-page,
  .character-new-page {
    max-width: 100%;
  }

  /* Character header: wrap meta items */
  .character-detail-header {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .detail-header-meta {
    font-size: 0.8rem;
  }

  /* UUIDs and long values */
  .character-detail-page code {
    word-break: break-all;
    font-size: 0.8rem;
  }

  /* Attribute table: hide advance columns, truncate names */
  .admin-table .check-row td:nth-child(2) ~ td {
    display: none;
  }

  .admin-table .check-row th {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Attribute rows (edit mode): stack label above input */
  .attribute-row {
    flex-wrap: wrap;
  }

  .attribute-row label {
    width: 100%;
    margin-bottom: 0.25rem;
  }

  .attribute-row input {
    width: 100%;
  }

  /* Physicality table: stack cells */
  .physicality-table td,
  .physicality-table th {
    display: block;
    width: 100%;
    padding: 0.2rem 0.5rem;
  }

  .physicality-table tr {
    display: block;
    margin-bottom: 0.5rem;
  }

  /* Resource pools: tighter on mobile */
  .pool-card {
    min-width: 0;
    padding: 0.75rem;
  }

  .resource-pools-grid {
    gap: 0.5rem;
  }

  .pool-header {
    font-size: 0.9rem;
  }

  /* Resource/currency controls: stack reason + actions */
  .resource-controls-table thead {
    display: none;
  }

  .resource-controls-table,
  .resource-controls-table tbody,
  .resource-controls-table tr,
  .resource-controls-table td {
    display: block;
    width: 100%;
  }

  .resource-controls-table .col-amount {
    width: 100%;
    margin-bottom: 0.25rem;
  }

  .resource-controls-table .col-reason {
    width: 100%;
    margin-bottom: 0.25rem;
  }

  .resource-controls-table .col-actions {
    white-space: normal;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .resource-controls-table .col-actions .button + .button {
    margin-left: 0;
  }

  /* CP form rows: wrap */
  .cp-form-row {
    flex-wrap: wrap;
  }

  /* Body points: wrap */
  .bp-form-row {
    flex-wrap: wrap;
  }

  .bp-amount-input {
    width: 100%;
  }

  .bp-buttons {
    flex-wrap: wrap;
  }

  /* Currency grid: single column */
  .currency-grid {
    flex-direction: column;
  }

  /* Skill rows: hide inline advance on mobile */
  .skill-advance-inline {
    display: none;
  }

  /* Skill advance form: full-width inputs */
  .skill-advance-fields input,
  .skill-advance-fields select {
    min-width: 0;
    flex: 1 1 100%;
  }

  .skill-advance-actions {
    flex-wrap: wrap;
  }

  /* Skill groups: prevent overflow */
  .skill-group {
    overflow: hidden;
  }

  /* Ability scores: hide bonus column */
  .ability-scores-table th:nth-child(3),
  .ability-scores-table td:nth-child(3) {
    display: none;
  }

  /* Skill tables: tighter padding */
  .skill-table td,
  .skill-table th {
    padding: 0.4rem 0.5rem;
    font-size: 0.85rem;
  }

  /* Draft actions: wrap */
  .draft-actions-left,
  .draft-actions-right {
    flex-wrap: wrap;
  }

  /* Session View: tighter layout */
  .session-header {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .session-header h2 {
    font-size: 1.2rem;
  }

  .session-primary-actions {
    gap: 0.4rem;
  }

  .session-action-btn {
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
  }

  .session-resources {
    gap: 0.5rem;
  }

  .session-resource-card {
    min-width: 0;
    flex: 1 1 45%;
  }

  /* Detail actions: stack buttons */
  .detail-actions {
    flex-wrap: wrap;
  }

  .detail-actions .button {
    flex: 1 1 auto;
  }
}

/* -----------------------------------------------------------------------------
   Character Creation Progress Bar
   ----------------------------------------------------------------------------- */

.creation-progress {
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
}
.creation-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.creation-progress-bar {
  height: 6px;
  background: var(--border-primary);
  border-radius: 3px;
  overflow: hidden;
}
.creation-progress-fill {
  height: 100%;
  background: var(--success);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.creation-progress-next {
  margin-top: 0.5rem;
  font-size: 0.85rem;
}

/* -----------------------------------------------------------------------------
   Level-Up Wizard
   ----------------------------------------------------------------------------- */

.level-up-wizard {
  margin-top: 1rem;
  padding: 1.25rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
}

.wizard-step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-primary);
}

.wizard-dot {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.8rem;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-primary);
  transition: all 0.2s ease;
}

.wizard-dot.active {
  color: var(--text-primary);
  background: var(--bg-hover);
  border-color: var(--accent-red);
}

.wizard-dot.complete {
  color: var(--success);
  border-color: var(--success);
}

.wizard-dot-label {
  white-space: nowrap;
}

.wizard-step-content {
  min-height: 120px;
  margin-bottom: 1rem;
}

.wizard-step-content h4 {
  margin: 0 0 0.75rem 0;
  color: var(--text-primary);
  font-size: 1.1rem;
}

.wizard-step-content p {
  color: var(--text-secondary);
  margin: 0 0 0.75rem 0;
  line-height: 1.5;
}

/* HP Step — option cards */
.wizard-hp-options {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.wizard-hp-card {
  flex: 1;
  padding: 1rem;
  background: var(--bg-primary);
  border: 2px solid var(--border-primary);
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
}

.wizard-hp-card:hover {
  border-color: var(--accent-red);
  background: var(--bg-hover);
}

.wizard-hp-card.selected {
  border-color: var(--success);
  background: rgba(74, 222, 128, 0.1);
}

.wizard-hp-card-title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.wizard-hp-card-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.wizard-hp-card.selected .wizard-hp-card-desc {
  color: var(--success);
}

/* HP Result */
.wizard-hp-result {
  padding: 0.75rem 1rem;
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.3);
  border-radius: 6px;
  color: var(--success);
  font-weight: 500;
}

/* Features Step */
.wizard-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.wizard-feature-item {
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
}

.wizard-feature-item strong {
  color: var(--text-primary);
}

.wizard-feature-desc {
  margin: 0.5rem 0 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Spell Diff Step */
.wizard-spell-diff {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.spell-diff-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
}

.spell-diff-label {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.spell-diff-change {
  color: var(--info);
  font-weight: 600;
}

/* Summary Step */
.wizard-summary {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
}

.wizard-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.25rem 0;
}

.wizard-summary-row:not(:last-child) {
  border-bottom: 1px solid var(--bg-hover);
  padding-bottom: 0.5rem;
}

.wizard-summary-label {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.wizard-summary-value {
  color: var(--text-primary);
  font-weight: 500;
}

/* Wizard Navigation */
.wizard-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-primary);
}

.wizard-nav-spacer {
  flex: 1;
}

/* Level-Up Badge / Indicator */
.level-up-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: rgba(74, 222, 128, 0.15);
  border: 1px solid var(--success);
  border-radius: 12px;
  color: var(--success);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  animation: level-up-pulse 2s ease-in-out infinite;
  transition: background 0.2s ease;
}

.level-up-badge:hover {
  background: rgba(74, 222, 128, 0.25);
  color: var(--success);
  text-decoration: none;
}

button.level-up-badge {
  font-size: 0.85rem;
  padding: 0.5rem 1rem;
}

@keyframes level-up-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.4);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(74, 222, 128, 0);
  }
}

/* Responsive: stack HP options vertically on small screens */
@media (max-width: 480px) {
  .wizard-hp-options {
    flex-direction: column;
  }
}