/* src/styles/tokens.css */
:root {
  --bg-primary: #1e1e2e;
  --bg-panel: #2a2a40;
  --text-primary: #e0e0e0;
  --text-muted: #a6adc8;
  --panel-border: #313244;
  --panel-shadow: 0 1px 0 #00000040, 0 0 0 1px var(--panel-border);
  --accent-a: #89dceb;
  --accent-b: #a6e3a1;
  --accent-c: #f38ba8;
  --accent-d: #94e2d5;
  --accent-e: #f9e2af;
  --panel-gap: .75rem;
  --panel-padding: .75rem;
  --panel-radius: .5rem;
  --scrollbox-pad: .75rem;
  --scrollbox-pad-top: .25rem;
  --scrollbox-pad-x: .5rem;
  --sidebar-width: 280px;
  --transition-fast: .15s;
  --buncss-light: ;
  --buncss-dark: initial;
  color-scheme: dark;
}

/* src/styles/base.css */
*, *:before, *:after {
  box-sizing: border-box;
}

html {
  font-family: IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
}

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  margin: 0;
  line-height: 1.35;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  font-weight: 400;
}

a {
  color: inherit;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}

ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

#app {
  min-height: 100vh;
}

/* src/styles/layout.css */
.app-wrapper {
  display: flex;
  gap: var(--panel-gap);
  max-width: 1400px;
  margin: 0 auto;
  padding: 1rem;
}

.sidebar {
  width: var(--sidebar-width);
  display: flex;
  gap: var(--panel-gap);
  flex-direction: column;
  flex-shrink: 0;
}

.sidebar-panel {
  background: var(--bg-panel);
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
  padding: var(--panel-padding);
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.sidebar-title {
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-size: .7rem;
}

.nav-list {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.nav-button {
  display: block;
  text-align: left;
  transition: background var(--transition-fast), color var(--transition-fast);
  cursor: pointer;
  border-radius: .35rem;
  padding: .4rem .5rem;
  font-size: .8rem;
  font-weight: 500;
}

.nav-button[data-active="true"] {
  color: var(--accent-a);
  background: #89dceb1f;
}

.content-region {
  display: flex;
  gap: var(--panel-gap);
  flex-direction: column;
  flex: 1;
}

.panel {
  background: var(--bg-panel);
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
  padding: var(--panel-padding);
  display: flex;
  flex-direction: column;
  min-height: 200px;
}

.panel.compact {
  min-height: auto;
}

.panel-heading {
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  margin-bottom: .6rem;
  font-size: .7rem;
}

.panel-body {
  flex: 1;
}

.scrollbox {
  overflow: auto;
  padding: var(--scrollbox-pad-top) var(--scrollbox-pad-x) var(--scrollbox-pad);
  scrollbar-color: var(--panel-border) transparent;
}

@media (max-width: 1200px) {
  .app-wrapper {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
  }
}

/* src/styles/components.css */
.button {
  border: 1px solid var(--panel-border);
  color: var(--text-primary);
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  background: #89dceb14;
  border-radius: .35rem;
  padding: .35rem .6rem;
  font-size: .75rem;
}

.button:hover {
  border-color: var(--accent-a);
  background: #89dceb33;
}

.button.danger {
  background: #f38ba81a;
  border-color: #f38ba866;
}

.button.danger:hover {
  background: #f38ba840;
}

.input {
  border: 1px solid var(--panel-border);
  background: var(--bg-primary);
  color: var(--text-primary);
  border-radius: .35rem;
  width: 100%;
  padding: .4rem .5rem;
  font-size: .8rem;
}

.input:focus {
  outline: none;
  border-color: var(--accent-a);
}

.label {
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  display: block;
  margin-bottom: .3rem;
  font-size: .65rem;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: .35rem;
}

.stat {
  border: 1px solid var(--panel-border);
  text-align: left;
  border-radius: .35rem;
  padding: .4rem;
}

.stat-label {
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .65;
  font-size: .6rem;
}

.stat-value {
  margin-top: .1rem;
  font-size: .95rem;
  font-weight: 600;
}

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

.timestamp {
  opacity: .4;
  font-size: 10px;
  font-style: italic;
}

.toast-stack {
  position: fixed;
  display: flex;
  z-index: 2000;
  pointer-events: none;
  flex-direction: column;
  gap: .5rem;
  top: 1rem;
  right: 1rem;
}

.toast {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--panel-border);
  box-shadow: var(--panel-shadow);
  pointer-events: auto;
  border-radius: .4rem;
  min-width: 220px;
  max-width: 320px;
  padding: .75rem 2.25rem .75rem .75rem;
}

.toast[data-variant="success"] {
  border-color: #89ebb6b3;
}

.toast[data-variant="warning"] {
  border-color: #fcd34d80;
}

.toast[data-variant="danger"] {
  border-color: #f38ba8b3;
}

.toast-title {
  margin-bottom: .25rem;
  font-size: .8rem;
  font-weight: 600;
}

.toast-message {
  color: var(--text-muted);
  font-size: .75rem;
}

.toast-dismiss {
  position: absolute;
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  font-size: 1rem;
  top: .15rem;
  right: .25rem;
}

.modal-overlay {
  position: fixed;
  display: flex;
  z-index: 3000;
  opacity: 0;
  backdrop-filter: blur(2px);
  background: #000000a6;
  justify-content: center;
  align-items:  center;
  padding: 1rem;
  transition: opacity .15s ease-out;
  inset: 0;
}

.modal-overlay.modal-visible {
  opacity: 1;
}

.modal-overlay.modal-closing {
  opacity: 0;
}

.modal-dialog {
  background: var(--bg-panel);
  border: 1px solid var(--panel-border);
  display: flex;
  border-radius: .5rem;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  transition: transform .15s ease-out;
  transform: translateY(8px);
  box-shadow: 0 8px 32px #0006;
}

.modal-visible .modal-dialog {
  transform: translateY(0);
}

.modal-header {
  display: flex;
  border-bottom: 1px solid var(--panel-border);
  justify-content: space-between;
  align-items:  center;
  padding: .75rem 1rem;
}

.modal-title {
  letter-spacing: .03em;
  color: var(--accent-a);
  font-size: .9rem;
  font-weight: 600;
}

.modal-close {
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: .25rem;
  margin: -.25rem;
  padding: .25rem;
  transition: color .15s, background .15s;
  font-size: 1.5rem;
  line-height: 1;
}

.modal-close:hover {
  color: var(--text-primary);
  background: #ffffff0d;
}

.modal-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1rem;
}

.retainer-picker {
  display: grid;
  gap: .5rem;
}

.retainer-option {
  display: flex;
  border: 1px solid var(--panel-border);
  background: var(--bg-primary);
  cursor: pointer;
  text-align: left;
  border-radius: .4rem;
  flex-direction: column;
  gap: .35rem;
  padding: .65rem .75rem;
  transition: border-color .15s, background .15s, transform .1s;
}

.retainer-option:hover {
  border-color: var(--accent-a);
  background: #89dceb0f;
}

.retainer-option:active {
  transform: scale(.98);
}

.retainer-option-header {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: .5rem;
}

.retainer-option-name {
  color: var(--text-primary);
  font-size: .85rem;
  font-weight: 600;
}

.retainer-option-wage {
  color: var(--accent-e);
  white-space: nowrap;
  background: #f9e2af1f;
  border-radius: .25rem;
  padding: .15rem .4rem;
  font-size: .7rem;
}

.retainer-option-desc {
  color: var(--text-muted);
  font-size: .72rem;
  line-height: 1.4;
}

.retainer-option-stats {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .15rem;
}

.retainer-stat {
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  opacity: .8;
  font-size: .65rem;
}

.retainer-stat strong {
  color: var(--accent-d);
  margin-right: .15rem;
}

.retainer-section {
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--panel-border);
  margin-top: .75rem;
  margin-bottom: .25rem;
  padding-bottom: .25rem;
  font-size: .65rem;
}

.retainer-section:first-child {
  margin-top: 0;
}

/* src/styles/utilities.css */
.visually-hidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.gap-sm {
  gap: .35rem;
}

.gap-md {
  gap: var(--panel-gap);
}

.w-full {
  width: 100%;
}

/* src/features/party/party.css */
.character-card {
  display: flex;
  background: linear-gradient(155deg, #11111c 0%, #19192a 55%, #0d0d16 100%);
  border: 1px solid #ffffff14;
  border-left: 3px solid #89dcebe6;
  border-radius: .75rem;
  flex-direction: column;
  gap: .65rem;
  padding: 1rem 1.15rem;
  box-shadow: 0 22px 45px #0000008c;
}

.character-card + .character-card {
  margin-top: var(--panel-gap);
}

.character-card .card-header {
  display: flex;
  border-bottom: 1px solid #ffffff0d;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .35rem;
  padding-bottom: .4rem;
}

.character-card .card-title {
  letter-spacing: -.02em;
  color: var(--accent-a);
  margin: 0;
  font-size: 1.05rem;
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
}

.chip {
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-muted);
  border: 1px solid #ffffff1f;
  border-radius: 999px;
  padding: .15rem .45rem;
  font-size: .6rem;
}

.chip-deceased {
  color: var(--accent-c);
  border-color: #f38ba880;
}

.chip-level {
  color: var(--accent-e);
  border-color: #f9e2af66;
}

.chip-class {
  color: var(--accent-d);
  border-color: #94e2d54d;
}

.chip-align {
  color: var(--accent-c);
  border-color: #f38ba84d;
}

.stat-section {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.section-title {
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--text-muted);
  margin-bottom: .35rem;
  font-size: .62rem;
}

.stat-grid {
  display: grid;
  gap: .35rem;
}

.ability-grid .stat {
  background: #ffffff05;
  border: 1px solid #ffffff0d;
}

.ability-grid .stat:nth-child(2n) {
  background: #ffffff0a;
}

.stat {
  border: 1px solid var(--panel-border);
  border-radius: .4rem;
  padding: .45rem;
}

.ability-grid {
  grid-template-columns: repeat(6, minmax(65px, 1fr));
}

.derived-grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .45rem;
}

.stat-label {
  text-transform: uppercase;
  letter-spacing: .12em;
  opacity: .65;
  font-size: .62rem;
}

.stat-value {
  letter-spacing: .05em;
  font-variant-numeric: tabular-nums;
  margin-top: .15rem;
  font-size: .95rem;
  font-weight: 600;
}

.stat-mod {
  margin-top: .1rem;
  font-size: .7rem;
}

.stat-mod.mod-positive {
  color: var(--accent-b);
}

.stat-mod.mod-negative {
  color: var(--accent-c);
}

.derived-grid .stat-hp {
  border-color: #a6e3a180;
}

.derived-grid .stat-ac {
  border-color: #89dceb73;
}

.derived-grid .stat-thac0 {
  border-color: #f9e2af73;
}

.save-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: .35rem;
}

.save-grid .stat {
  background: #89dceb0f;
  border-color: #89dceb26;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .45rem;
}

.info-block {
  background: #ffffff05;
  border: 1px solid #ffffff14;
  border-radius: .4rem;
  min-height: 70px;
  padding: .5rem;
  font-size: .75rem;
  line-height: 1.35;
}

.info-block.info-equipment {
  background: #f9e2af14;
  border-color: #f9e2af66;
}

.info-block.info-spells {
  background: #94e2d514;
  border-color: #94e2d559;
}

.info-block.info-thief {
  background: #f38ba817;
  border-color: #f38ba859;
}

@media (max-width: 900px) {
  .ability-grid {
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  }
}

/* src/features/dominion/dominion.css */
.dominion-cooldown {
  color: #bfdbfe;
  background: #3b82f614;
  border-left: 3px solid #3b82f6cc;
  border-radius: .4rem;
  margin-top: .5rem;
  padding: .5rem .75rem;
  font-size: .85rem;
}

/* src/features/wilderness/wilderness.css */
.wilderness-grid {
  display: grid;
  grid-template-columns: 280px minmax(360px, 1fr) 280px;
  gap: var(--panel-gap);
  width: 100%;
}

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

  .wilderness-grid .wilderness-map-card {
    grid-column: span 2;
  }
}

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

  .wilderness-grid .wilderness-map-card {
    grid-column: span 1;
  }
}

.wilderness-card {
  background: var(--bg-panel);
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
  padding: var(--panel-padding);
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.wilderness-map-wrapper {
  position: relative;
  border-radius: var(--panel-radius);
  border: 1px solid var(--panel-border);
  overflow: hidden;
  background: var(--bg-primary);
}

.wilderness-map-meta {
  position: absolute;
  background: #0009;
  border-radius: .3rem;
  padding: .2rem .4rem;
  font-size: .75rem;
  top: .5rem;
  left: .5rem;
}

.wilderness-recenter {
  position: absolute;
  font-size: .7rem;
  bottom: .5rem;
  right: .5rem;
}

.wilderness-dpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .3rem;
  width: 140px;
  margin: 0 auto;
}

.wilderness-dpad button {
  padding: .35rem;
  font-size: 1rem;
}

.wilderness-log {
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  overflow-y: auto;
  height: 260px;
  padding: .5rem;
  font-family: IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .75rem;
}

.wilderness-log-entry {
  border-bottom: 1px dashed #ffffff1a;
  margin-bottom: .35rem;
  padding-bottom: .35rem;
}

.wilderness-log-entry:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.wilderness-weather {
  display: flex;
  background: #60a5fa14;
  border-left: 3px solid #60a5fa;
  border-radius: .35rem;
  flex-direction: column;
  gap: .25rem;
  padding: .5rem;
}

.wilderness-weather-row {
  display: flex;
  justify-content: space-between;
  font-size: .8rem;
}

.wilderness-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(100px, 1fr));
  gap: .4rem;
}

.wilderness-stat {
  border: 1px solid var(--panel-border);
  text-align: center;
  border-radius: .35rem;
  padding: .4rem;
}

.wilderness-resources {
  border: 1px dashed var(--panel-border);
  border-radius: var(--panel-radius);
  padding: .5rem;
  font-size: .8rem;
}

/* src/features/dungeon/dungeon.css */
.dungeon-shell .panel {
  background: linear-gradient(#101223 0%, #0b0d18 100%);
  border: 1px solid #94e2d514;
  box-shadow: 0 18px 35px #00000073;
}

.dungeon-shell .panel-heading {
  color: var(--accent-d);
  letter-spacing: .15em;
}

.dungeon-shell .stat {
  background: #ffffff05;
  border: 1px solid #ffffff1a;
}

.dungeon-shell .button {
  background: linear-gradient(135deg, #89dceb1f, #89dceb0d);
  border: 1px solid #89dceb4d;
}

.dungeon-shell .scrollbox {
  border-radius: var(--panel-radius);
  background: radial-gradient(circle at top, #0f172a99, #020617e6);
}

/* src/features/merchant/merchant.css */
.merchant-grid {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(360px, 1fr) minmax(260px, 320px);
  gap: var(--panel-gap);
  width: 100%;
}

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

  .merchant-ledger {
    grid-column: span 2;
  }
}

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

  .merchant-ledger {
    grid-column: span 1;
  }
}

.merchant-card {
  background: var(--bg-panel);
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
  padding: var(--panel-padding);
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.merchant-stat-band {
  border: 1px solid var(--panel-border);
  display: flex;
  text-align: center;
  border-radius: .4rem;
  flex-direction: column;
  gap: .15rem;
  padding: .4rem .6rem;
}

.merchant-stat-value {
  font-size: 1rem;
  font-weight: 600;
}

.merchant-log {
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-height: 460px;
  padding: .5rem;
}

.merchant-log-entry {
  border-bottom: 1px dashed #ffffff14;
  padding-bottom: .4rem;
}

.merchant-badge {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-radius: .3rem;
  padding: .1rem .4rem;
  font-size: .65rem;
}

.merchant-badge.profit {
  color: #4ade80;
  background: #22c55e26;
}

.merchant-badge.loss {
  color: #f87171;
  background: #f8717126;
}

.merchant-badge.transit {
  color: #93c5fd;
  background: #3b82f626;
}

.merchant-badge.delivered {
  color: #c4b5fd;
  background: #8b5cf626;
}

.merchant-grid .input-group {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.merchant-preview-panel {
  border: 1px solid var(--panel-border);
  display: flex;
  background: #ffffff05;
  border-radius: .4rem;
  flex-direction: column;
  gap: .35rem;
  padding: .6rem;
}

.merchant-transit-banner {
  color: #bfdbfe;
  background: #3b82f614;
  border-left: 3px solid #3b82f6cc;
  border-radius: .4rem;
  padding: .5rem .75rem;
  font-size: .85rem;
}

/* src/features/stronghold/stronghold.css */
.stronghold-grid {
  display: grid;
  grid-template-columns: minmax(260px, 320px) 1fr;
  gap: 1.25rem;
}

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

.stronghold-column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.stronghold-card {
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  background: var(--bg-primary);
  box-shadow: var(--panel-shadow);
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1rem;
}

.stronghold-card.summary {
  background: #89dceb0a;
}

.stronghold-field {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.stronghold-actions {
  display: flex;
  flex-flow: column wrap;
  gap: .5rem;
}

@media (min-width: 520px) {
  .stronghold-actions {
    flex-direction: row;
  }
}

.stronghold-status {
  color: var(--text-muted);
  background: #6366f10a;
  border-left: 3px solid #6366f199;
  border-radius: .4rem;
  padding: .5rem .65rem;
  font-size: .85rem;
}

.stronghold-status[data-state="active"] {
  color: #fca5a5;
  background: #f8717114;
  border-left-color: #f87171cc;
}

.stronghold-add {
  display: flex;
  border-radius: var(--panel-radius);
  border: 1px dashed var(--panel-border);
  background: #89dceb0a;
  flex-direction: column;
  gap: .75rem;
  padding: .75rem;
}

.stronghold-add-grid {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(80px, 120px);
  gap: .75rem;
}

@media (max-width: 520px) {
  .stronghold-add-grid {
    grid-template-columns: 1fr;
  }
}

.stronghold-component-desc {
  margin: 0;
  font-size: .75rem;
}

.stronghold-list {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

.stronghold-empty {
  border: 1px dashed var(--panel-border);
  border-radius: var(--panel-radius);
  text-align: center;
  padding: 1rem;
}

.stronghold-item {
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  display: flex;
  background: var(--bg-primary);
  flex-direction: column;
  gap: .75rem;
  padding: .85rem;
}

.stronghold-item-header {
  display: flex;
  justify-content: space-between;
  align-items:  flex-start;
  gap: .75rem;
}

.stronghold-item-title {
  font-size: .9rem;
  font-weight: 600;
}

.stronghold-item-body {
  display: flex;
  flex-wrap: wrap;
  align-items:  flex-end;
  gap: 1rem;
}

.stronghold-item-cost {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 140px;
}

.stronghold-item-cost .stat-value {
  margin: 0;
}

.stronghold-projects-section {
  border-bottom: 1px solid var(--panel-border);
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
}

.stronghold-projects-header {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  margin-bottom: .75rem;
}

.stronghold-projects-header .section-title {
  margin: 0;
}

.stronghold-projects-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: .75rem;
}

.stronghold-projects-empty {
  grid-column: 1 / -1;
  text-align: center;
  border: 1px dashed var(--panel-border);
  border-radius: var(--panel-radius);
  padding: 1rem;
}

.stronghold-project-card {
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  background: var(--bg-primary);
  cursor: pointer;
  padding: .75rem 1rem;
  transition: border-color .15s, background .15s;
}

.stronghold-project-card:hover {
  border-color: var(--text-secondary);
  background: #89dceb0a;
}

.stronghold-project-card.selected {
  border-color: var(--accent);
  background: #6366f114;
}

.stronghold-project-card-header {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: .5rem;
  margin-bottom: .5rem;
}

.stronghold-project-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .95rem;
  font-weight: 600;
}

.stronghold-project-meta {
  display: flex;
  color: var(--text-muted);
  gap: 1rem;
  font-size: .8rem;
}

.badge {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: .025em;
  border-radius: .25rem;
  padding: .15rem .5rem;
  font-size: .7rem;
  font-weight: 600;
}

.badge-success {
  color: #4ade80;
  background: #22c55e26;
}

.badge-warning {
  color: #fbbf24;
  background: #fbbf2426;
}

.badge-info {
  color: #a5b4fc;
  background: #6366f126;
}

.button.small {
  padding: .35rem .75rem;
  font-size: .8rem;
}

/* src/features/treasure/treasure.css */
.treasure-grid {
  display: grid;
  grid-template-columns: minmax(260px, 320px) 1fr;
  gap: 1.25rem;
}

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

.treasure-column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.treasure-card {
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  background: var(--bg-primary);
  box-shadow: var(--panel-shadow);
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1rem;
}

.treasure-field {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.treasure-type-desc {
  margin: 0;
  font-size: .8rem;
}

.treasure-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.treasure-actions .button {
  flex: auto;
  min-width: -moz-fit-content;
  min-width: fit-content;
}

.treasure-result {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.treasure-meta {
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  display: flex;
  background: #89dceb0d;
  flex-direction: column;
  gap: .3rem;
  padding: .75rem;
}

.treasure-meta-title {
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-size: .85rem;
}

.treasure-meta-value {
  font-size: 1.25rem;
  font-weight: 600;
}

.treasure-meta-sub {
  color: var(--text-muted);
  font-size: .7rem;
}

.treasure-section {
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  padding: .75rem;
}

.treasure-section-title {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .35rem;
  font-size: .75rem;
}

.treasure-list {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  margin: 0;
  padding-left: 1rem;
}

.treasure-history {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.treasure-history-item {
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .75rem;
}

.treasure-history-title {
  font-size: .9rem;
  font-weight: 600;
}

.treasure-history-sub {
  color: var(--text-muted);
  font-size: .7rem;
}

.treasure-history-actions {
  display: flex;
  gap: .4rem;
}

.treasure-history-actions .button {
  flex: 1;
}

/* src/features/lab/lab.css */
.lab-grid {
  display: grid;
  grid-template-columns: minmax(260px, 320px) 1fr minmax(260px, 320px);
  gap: 1.25rem;
}

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

  .lab-grid .lab-column:last-child {
    grid-column: span 2;
  }
}

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

  .lab-grid .lab-column:last-child {
    grid-column: span 1;
  }
}

.lab-column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.lab-card {
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  background: var(--bg-primary);
  box-shadow: var(--panel-shadow);
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1rem;
}

.lab-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .75rem;
}

.lab-field {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.lab-formula-field, .lab-components-field, .lab-spell-type-field {
  align-items:  flex-start;
}

.lab-checkbox {
  width: auto;
}

.lab-components-field {
  display: flex;
  flex-direction: row;
  align-items:  center;
  gap: .5rem;
}

.lab-components-field .button {
  flex-shrink: 0;
}

.lab-actions {
  display: flex;
  gap: .5rem;
}

.lab-actions .button {
  flex: 1;
}

.lab-mode-toggle {
  display: flex;
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  background: #89dceb14;
  gap: .5rem;
  padding: .35rem;
}

.lab-radio {
  display: flex;
  letter-spacing: .05em;
  text-transform: uppercase;
  flex: 1;
  align-items:  center;
  gap: .35rem;
  font-size: .75rem;
}

.lab-summary {
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  display: flex;
  background: #89dceb0a;
  flex-direction: column;
  gap: .75rem;
  padding: .85rem;
}

.lab-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: .6rem;
}

.lab-stat {
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  padding: .6rem;
}

.lab-stat-label {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-size: .65rem;
}

.lab-stat-value {
  margin-top: .2rem;
  font-size: 1rem;
  font-weight: 600;
}

.lab-chance {
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  text-align: center;
  padding: .75rem;
}

.lab-chance-label {
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  font-size: .7rem;
}

.lab-chance-value {
  margin: .3rem 0;
  font-size: 2rem;
  font-weight: 700;
}

.lab-chance-value[data-state="fail"] {
  color: #f38ba8e6;
}

.lab-chance-value[data-state="ok"] {
  color: #89ebb6e6;
}

.lab-chance-breakdown {
  color: var(--text-muted);
  font-size: .75rem;
}

.lab-chance-warning {
  color: #f38ba8d9;
  margin-top: .35rem;
  font-size: .75rem;
}

.lab-requirements-info {
  color: var(--text-muted);
  font-size: .75rem;
}

.lab-active-notice {
  color: #f3d34dd9;
  font-size: .8rem;
}

.lab-error {
  color: #f38ba8d9;
  min-height: 1em;
  font-size: .8rem;
}

.lab-log-header {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: .5rem;
}

.lab-log-list {
  display: flex;
  overflow-y: auto;
  flex-direction: column;
  gap: .75rem;
  max-height: 520px;
}

.lab-log-entry {
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: .75rem;
}

.lab-log-entry[data-outcome="success"] {
  border-color: #89ebb666;
}

.lab-log-entry[data-outcome="fail"] {
  border-color: #f38ba866;
}

.lab-log-entry-header {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: .4rem;
}

.lab-badge {
  text-transform: uppercase;
  letter-spacing: .08em;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: .15rem .4rem;
  font-size: .65rem;
}

.lab-log-entry-time {
  color: var(--text-muted);
  font-size: .65rem;
}

.lab-log-entry-text {
  color: var(--text-primary);
  margin: 0;
  font-size: .85rem;
}

/* src/features/siege/siege.css */
.siege-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

.siege-column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.siege-card {
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  background: var(--bg-primary);
  box-shadow: var(--panel-shadow);
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1rem;
}

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

.siege-card-title {
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
}

.siege-pill {
  letter-spacing: .08em;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: .2rem .6rem;
  font-size: .65rem;
}

.pill-att {
  background: #fca5a526;
  border-color: #fca5a566;
}

.pill-def {
  background: #93c5fd26;
  border-color: #93c5fd66;
}

.siege-field {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.siege-row {
  display: flex;
  gap: .5rem;
}

.siege-row .siege-field {
  flex: 1;
}

.siege-details-body {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .75rem .1rem .25rem;
}

details {
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  background: #89dceb0a;
}

summary {
  cursor: pointer;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: .4rem .6rem;
  font-size: .8rem;
}

.siege-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .35rem;
}

.siege-checkbox {
  display: flex;
  align-items:  center;
  gap: .4rem;
  font-size: .75rem;
}

.siege-stat-box {
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  display: flex;
  background: #89dceb0a;
  flex-direction: column;
  gap: .35rem;
  padding: .6rem;
}

.siege-stat-row {
  display: flex;
  justify-content: space-between;
  font-size: .8rem;
}

.siege-tactics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .6rem;
}

.siege-tactic-advantage {
  text-align: center;
  color: var(--text-muted);
  font-size: .8rem;
}

.siege-modifiers {
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  display: flex;
  background: #89dceb0a;
  flex-direction: column;
  gap: .5rem;
  padding: .6rem;
}

.siege-action-row {
  display: flex;
  gap: .5rem;
}

.siege-action-row .button {
  flex: 1;
}

.siege-log {
  display: flex;
  overflow-y: auto;
  flex-direction: column;
  gap: .75rem;
  max-height: 520px;
}

.siege-log-entry {
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: .75rem;
}

.siege-log-header {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
}

.siege-log-totals, .siege-log-losses {
  font-size: .8rem;
}

.siege-log-notes {
  color: var(--text-muted);
  margin: 0;
  font-size: .8rem;
}

.siege-log-recovery {
  color: #bfdbfe;
  background: #3b82f614;
  border-left: 3px solid #3b82f6cc;
  border-radius: .35rem;
  padding: .35rem .5rem;
  font-size: .75rem;
}

.siege-log-recovery[data-state="ready"] {
  color: #bbf7d0;
  background: #22c55e14;
  border-left-color: #22c55ecc;
}

.siege-log-actions {
  display: flex;
  justify-content: flex-end;
}

.siege-turn-info {
  background: var(--bg-secondary);
  border-radius: var(--border-radius);
  padding: .5rem;
  font-size: .875rem;
}

.siege-turn-display {
  display: flex;
  justify-content: space-between;
  align-items:  center;
}

.siege-fortification-info {
  background: var(--bg-secondary);
  border-radius: var(--border-radius);
  padding: .5rem;
  font-size: .875rem;
}

.siege-fort-display {
  line-height: 1.4;
}

.siege-turn-controls {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* src/features/calendar/calendar.css */
.calendar-shell .calendar-grid {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: var(--panel-gap);
  width: 100%;
}

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

.calendar-column {
  display: flex;
  gap: var(--panel-gap);
  flex-direction: column;
}

.calendar-card {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.calendar-time-display {
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  text-align: center;
  background: #ffffff05;
  padding: .75rem;
}

.calendar-date {
  font-size: 1rem;
  font-weight: 600;
}

.calendar-time {
  font-family: IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .95rem;
}

.calendar-badge {
  display: inline-flex;
  border: 1px solid var(--panel-border);
  text-transform: uppercase;
  letter-spacing: .08em;
  border-radius: 999px;
  justify-content: center;
  align-items:  center;
  margin-top: .35rem;
  padding: .1rem .4rem;
  font-size: .65rem;
}

.calendar-controls-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: .35rem;
}

.calendar-divider {
  border-top: 1px solid var(--panel-border);
  margin-top: .5rem;
  padding-top: .5rem;
}

.calendar-section-label {
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin-bottom: .25rem;
  font-size: .65rem;
}

.calendar-trackers {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.calendar-tracker {
  border: 1px solid var(--panel-border);
  border-left: 3px solid var(--accent-a);
  border-radius: var(--panel-radius);
  display: flex;
  background: #ffffff05;
  justify-content: space-between;
  align-items:  center;
  gap: .5rem;
  padding: .5rem .65rem;
}

.calendar-tracker .button {
  white-space: nowrap;
}

.calendar-tracker[data-kind="lab"] {
  border-left-color: #c084fce6;
}

.calendar-tracker[data-kind="stronghold"] {
  border-left-color: #fbbf24e6;
}

.calendar-tracker[data-kind="merchant"] {
  border-left-color: #3b82f6e6;
}

.calendar-tracker[data-kind="dominion"] {
  border-left-color: #10b981e6;
}

.calendar-tracker[data-kind="siege"] {
  border-left-color: #f87171e6;
}

.calendar-tracker[data-kind="wilderness"] {
  border-left-color: #2dd4bfe6;
}

.calendar-tracker[data-kind="dungeon"] {
  border-left-color: #94a3b8e6;
}

.calendar-tracker-info {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.calendar-tracker-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.calendar-kind-badge {
  display: inline-flex;
  border: 1px solid var(--panel-border);
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 999px;
  align-items:  center;
  padding: .1rem .4rem;
  font-size: .6rem;
}

.calendar-log {
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-height: 360px;
  padding: .5rem;
}

.calendar-log-entry {
  border-bottom: 1px dashed #ffffff14;
  padding-bottom: .4rem;
}

.calendar-log-entry:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* src/features/ledger/ledger.css */
.ledger-shell {
  --ledger-income: var(--color-success, #22c55e);
  --ledger-expense: var(--color-danger, #ef4444);
  --ledger-neutral: var(--color-text-muted, #9ca3af);
}

.ledger-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-lg, 1.5rem);
}

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

.ledger-column {
  display: flex;
  gap: var(--space-md, 1rem);
  flex-direction: column;
}

.ledger-balance-card {
  text-align: center;
  padding: var(--space-xl, 2rem);
  background: linear-gradient(135deg, var(--color-surface-elevated, #1e1e2e), var(--color-surface, #181825));
  border-radius: var(--radius-lg, 12px);
  border: 1px solid var(--color-border, #313244);
}

.ledger-balance-label {
  font-size: var(--text-sm, .875rem);
  color: var(--color-text-muted, #9ca3af);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: var(--space-xs, .25rem);
}

.ledger-balance-amount {
  color: var(--color-gold, #fbbf24);
  text-shadow: 0 2px 10px #fbbf244d;
  font-variant-numeric: tabular-nums;
  font-size: 3rem;
  font-weight: 700;
}

.ledger-balance-amount:after {
  content: " gp";
  opacity: .7;
  font-size: 1.25rem;
  font-weight: 500;
}

.ledger-quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm, .5rem);
  margin-top: var(--space-md, 1rem);
}

.ledger-manual-form {
  display: flex;
  gap: var(--space-sm, .5rem);
  margin-top: var(--space-md, 1rem);
}

.ledger-manual-form .input {
  flex: 1;
}

.ledger-transactions {
  overflow-y: auto;
  display: flex;
  gap: var(--space-xs, .25rem);
  flex-direction: column;
  max-height: 400px;
}

.ledger-transaction {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-sm, .5rem);
  padding: var(--space-sm, .5rem) var(--space-md, 1rem);
  background: var(--color-surface, #181825);
  border-radius: var(--radius-sm, 4px);
  border-left: 3px solid #0000;
  align-items:  center;
}

.ledger-transaction.income {
  border-left-color: var(--ledger-income);
}

.ledger-transaction.expense {
  border-left-color: var(--ledger-expense);
}

.ledger-transaction-icon {
  display: flex;
  border-radius: var(--radius-sm, 4px);
  justify-content: center;
  align-items:  center;
  width: 24px;
  height: 24px;
  font-size: .75rem;
  font-weight: 700;
}

.ledger-transaction.income .ledger-transaction-icon {
  color: var(--ledger-income);
  background: #22c55e33;
}

.ledger-transaction.expense .ledger-transaction-icon {
  color: var(--ledger-expense);
  background: #ef444433;
}

.ledger-transaction-info {
  min-width: 0;
}

.ledger-transaction-description {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.ledger-transaction-meta {
  font-size: var(--text-xs, .75rem);
  color: var(--color-text-muted, #9ca3af);
  display: flex;
  gap: var(--space-sm, .5rem);
}

.ledger-transaction-amount {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 600;
}

.ledger-transaction.income .ledger-transaction-amount {
  color: var(--ledger-income);
}

.ledger-transaction.income .ledger-transaction-amount:before {
  content: "+";
}

.ledger-transaction.expense .ledger-transaction-amount {
  color: var(--ledger-expense);
}

.ledger-category-badge {
  display: inline-block;
  font-size: var(--text-xs, .75rem);
  border-radius: var(--radius-sm, 4px);
  background: var(--color-surface-elevated, #1e1e2e);
  color: var(--color-text-muted, #9ca3af);
  padding: .125rem .5rem;
}

.ledger-category-badge.loot {
  color: #fbbf24;
  background: #fbbf2433;
}

.ledger-category-badge.tax {
  color: #3b82f6;
  background: #3b82f633;
}

.ledger-category-badge.trade {
  color: #a855f7;
  background: #a855f733;
}

.ledger-category-badge.wage {
  color: #ec4899;
  background: #ec489933;
}

.ledger-category-badge.construction {
  color: #9ca3af;
  background: #6b728033;
}

.ledger-category-badge.research {
  color: #06b6d4;
  background: #06b6d433;
}

.ledger-category-badge.equipment {
  color: #eab308;
  background: #eab30833;
}

.ledger-category-badge.supplies {
  color: #22c55e;
  background: #22c55e33;
}

.ledger-shop {
  display: flex;
  gap: var(--space-md, 1rem);
  flex-direction: column;
}

.ledger-shop-header {
  display: flex;
  gap: var(--space-sm, .5rem);
  flex-wrap: wrap;
}

.ledger-shop-search {
  flex: 1;
  min-width: 200px;
}

.ledger-shop-category {
  min-width: 180px;
}

.ledger-shop-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-sm, .5rem);
  overflow-y: auto;
  max-height: 500px;
}

.ledger-shop-item {
  display: flex;
  padding: var(--space-md, 1rem);
  background: var(--color-surface, #181825);
  border-radius: var(--radius-sm, 4px);
  border: 1px solid var(--color-border, #313244);
  flex-direction: column;
  transition: border-color .15s;
}

.ledger-shop-item:hover {
  border-color: var(--color-gold, #fbbf24);
}

.ledger-shop-item-header {
  display: flex;
  justify-content: space-between;
  align-items:  flex-start;
  gap: var(--space-sm, .5rem);
  margin-bottom: var(--space-xs, .25rem);
}

.ledger-shop-item-name {
  flex: 1;
  font-weight: 600;
}

.ledger-shop-item-price {
  color: var(--color-gold, #fbbf24);
  white-space: nowrap;
  font-weight: 600;
}

.ledger-shop-item-price:after {
  content: " gp";
  opacity: .7;
  font-weight: 400;
}

.ledger-shop-item-details {
  font-size: var(--text-xs, .75rem);
  color: var(--color-text-muted, #9ca3af);
  margin-bottom: var(--space-sm, .5rem);
}

.ledger-shop-item-actions {
  display: flex;
  gap: var(--space-xs, .25rem);
  margin-top: auto;
}

.ledger-shop-item-actions .button {
  padding: var(--space-xs, .25rem) var(--space-sm, .5rem);
  font-size: var(--text-xs, .75rem);
  flex: 1;
}

.ledger-shop-item-qty {
  text-align: center;
  width: 60px;
}

.ledger-recurring {
  display: flex;
  gap: var(--space-xs, .25rem);
  flex-direction: column;
}

.ledger-recurring-item {
  display: flex;
  padding: var(--space-sm, .5rem) var(--space-md, 1rem);
  background: var(--color-surface, #181825);
  border-radius: var(--radius-sm, 4px);
  justify-content: space-between;
  align-items:  center;
}

.ledger-recurring-info {
  flex: 1;
}

.ledger-recurring-name {
  font-weight: 500;
}

.ledger-recurring-meta {
  font-size: var(--text-xs, .75rem);
  color: var(--color-text-muted, #9ca3af);
}

.ledger-recurring-amount {
  color: var(--ledger-expense);
  margin-right: var(--space-sm, .5rem);
  font-weight: 600;
}

.ledger-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm, .5rem);
}

.ledger-stat {
  padding: var(--space-md, 1rem);
  background: var(--color-surface, #181825);
  border-radius: var(--radius-sm, 4px);
  text-align: center;
}

.ledger-stat-value {
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  font-weight: 700;
}

.ledger-stat-value.income {
  color: var(--ledger-income);
}

.ledger-stat-value.expense {
  color: var(--ledger-expense);
}

.ledger-stat-label {
  font-size: var(--text-xs, .75rem);
  color: var(--color-text-muted, #9ca3af);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.ledger-tabs {
  display: flex;
  gap: var(--space-xs, .25rem);
  margin-bottom: var(--space-md, 1rem);
  border-bottom: 1px solid var(--color-border, #313244);
  padding-bottom: var(--space-xs, .25rem);
}

.ledger-tab {
  padding: var(--space-sm, .5rem) var(--space-md, 1rem);
  color: var(--color-text-muted, #9ca3af);
  cursor: pointer;
  background: none;
  border: none;
  border-bottom: 2px solid #0000;
  transition: color .15s, border-color .15s;
  font-weight: 500;
}

.ledger-tab:hover {
  color: var(--color-text, #e5e5e5);
}

.ledger-tab[data-active="true"] {
  color: var(--color-gold, #fbbf24);
  border-bottom-color: var(--color-gold, #fbbf24);
}

.ledger-empty {
  text-align: center;
  padding: var(--space-xl, 2rem);
  color: var(--color-text-muted, #9ca3af);
}

.ledger-empty-icon {
  margin-bottom: var(--space-md, 1rem);
  opacity: .5;
  font-size: 3rem;
}

/* src/features/faction/faction.css */
.faction-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}

.faction-container {
  display: grid;
  grid-template-columns: 300px 1fr;
  flex: 1;
  gap: 1rem;
  min-height: 0;
}

.faction-list-column {
  display: flex;
  background: var(--surface-1);
  overflow: hidden;
  border-radius: 8px;
  flex-direction: column;
}

.faction-list-header {
  display: flex;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  align-items:  center;
  padding: .75rem 1rem;
}

.faction-list-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.btn-add-faction {
  border: 1px solid var(--border);
  background: var(--surface-3);
  color: var(--text-1);
  cursor: pointer;
  display: flex;
  border-radius: 6px;
  justify-content: center;
  align-items:  center;
  width: 28px;
  height: 28px;
  transition: all .15s;
  font-size: 1.2rem;
}

.btn-add-faction:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.faction-list {
  overflow-y: auto;
  flex: 1;
  padding: .5rem;
}

.faction-empty {
  text-align: center;
  color: var(--text-2);
  padding: 1.5rem;
}

.faction-empty p:first-child {
  margin-bottom: .5rem;
}

.faction-group {
  margin-bottom: .75rem;
}

.faction-group-header {
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
  margin-bottom: .5rem;
  padding: .5rem .5rem .25rem;
  font-size: .75rem;
  font-weight: 600;
}

.faction-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  cursor: pointer;
  border-radius: 8px;
  margin-bottom: .5rem;
  padding: .75rem;
  transition: all .15s;
}

.faction-card:hover {
  border-color: var(--accent);
  background: var(--surface-3);
}

.faction-card.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.faction-card-header {
  display: flex;
  align-items:  center;
  gap: .5rem;
  margin-bottom: .5rem;
}

.faction-icon {
  font-size: 1.25rem;
}

.faction-icon.large {
  font-size: 2rem;
}

.faction-icon.small {
  font-size: .9rem;
}

.faction-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .9rem;
  font-weight: 600;
}

.faction-card-stats {
  display: flex;
  gap: 1rem;
  margin-bottom: .5rem;
  font-size: .75rem;
}

.faction-stat {
  display: flex;
  flex-direction: column;
}

.stat-label {
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .65rem;
}

.stat-value {
  font-weight: 600;
}

.stat-value.positive {
  color: #22c55e;
}

.stat-value.negative {
  color: #ef4444;
}

.faction-power-bar {
  position: relative;
  background: var(--surface-1);
  overflow: hidden;
  border-radius: 8px;
  height: 16px;
}

.faction-power-fill {
  position: absolute;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-hover) 100%);
  border-radius: 8px;
  height: 100%;
  transition: width .3s;
  top: 0;
  left: 0;
}

.faction-power-label {
  position: absolute;
  display: flex;
  color: var(--text-1);
  text-shadow: 0 1px 2px #0000004d;
  justify-content: center;
  align-items:  center;
  height: 100%;
  font-size: .65rem;
  font-weight: 600;
  top: 0;
  left: 0;
  right: 0;
}

.faction-detail-column {
  display: flex;
  overflow-y: auto;
  flex-direction: column;
  gap: 1rem;
  padding-right: .5rem;
}

.faction-placeholder {
  display: flex;
  background: var(--surface-1);
  border: 2px dashed var(--border);
  color: var(--text-2);
  text-align: center;
  border-radius: 8px;
  flex-direction: column;
  justify-content: center;
  align-items:  center;
  height: 200px;
}

.faction-detail-header {
  display: flex;
  background: var(--surface-1);
  border-radius: 8px;
  justify-content: space-between;
  align-items:  center;
  padding: 1rem;
}

.faction-detail-title {
  display: flex;
  align-items:  center;
  gap: .75rem;
}

.faction-name-input {
  color: var(--text-1);
  background: none;
  border: 1px solid #0000;
  border-radius: 4px;
  width: 300px;
  padding: .25rem .5rem;
  font-size: 1.25rem;
  font-weight: 600;
}

.faction-name-input:hover, .faction-name-input:focus {
  border-color: var(--border);
  background: var(--surface-2);
}

.btn-delete-faction {
  border: 1px solid var(--border);
  cursor: pointer;
  opacity: .6;
  background: none;
  border-radius: 6px;
  padding: .5rem;
  transition: all .15s;
}

.btn-delete-faction:hover {
  opacity: 1;
  background: #ef44441a;
  border-color: #ef4444;
}

.faction-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
}

.stat-row {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.stat-row label {
  color: var(--text-2);
  font-size: .75rem;
  font-weight: 500;
}

.stat-row input, .stat-row select {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-1);
  border-radius: 4px;
  padding: .5rem;
  font-size: .875rem;
}

.stat-row input:focus, .stat-row select:focus {
  outline: none;
  border-color: var(--accent);
}

.faction-rel-table {
  border-collapse: collapse;
  width: 100%;
  font-size: .875rem;
}

.faction-rel-table th, .faction-rel-table td {
  text-align: left;
  border-bottom: 1px solid var(--border);
  padding: .5rem;
}

.faction-rel-table th {
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-2);
  font-size: .75rem;
  font-weight: 600;
}

.rel-status-select {
  border: 1px solid var(--border);
  background: var(--surface-2);
  cursor: pointer;
  border-radius: 4px;
  padding: .25rem .5rem;
  font-size: .8rem;
  font-weight: 600;
}

.rel-reason-input {
  color: var(--text-1);
  background: none;
  border: 1px solid #0000;
  border-radius: 4px;
  width: 100%;
  padding: .25rem .5rem;
  font-size: .8rem;
}

.rel-reason-input:hover, .rel-reason-input:focus {
  border-color: var(--border);
  background: var(--surface-2);
}

.faction-rel-summary {
  display: flex;
  border-top: 1px solid var(--border);
  gap: 1rem;
  margin-top: .75rem;
  padding-top: .75rem;
  font-size: .875rem;
}

.faction-rel-summary .allies {
  color: #22c55e;
}

.faction-rel-summary .enemies {
  color: #ef4444;
}

.faction-territory-list {
  margin-bottom: 1rem;
}

.territory-list {
  margin: .5rem 0 0 1.5rem;
  padding: 0;
}

.territory-list li {
  color: var(--text-1);
  margin-bottom: .25rem;
}

.faction-attitudes {
  margin-top: 1rem;
}

.attitude-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
  margin-top: .5rem;
}

.attitude-entry {
  display: flex;
  background: var(--surface-2);
  border-radius: 4px;
  justify-content: space-between;
  padding: .25rem .5rem;
  font-size: .8rem;
}

.attitude-target {
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attitude-value {
  margin-left: .5rem;
  font-weight: 600;
}

.faction-operations-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.operation-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .75rem;
}

.operation-card.active {
  border-left: 3px solid #f59e0b;
}

.operation-card.complete {
  opacity: .7;
  border-left: 3px solid #22c55e;
}

.operation-card.failed {
  opacity: .7;
  border-left: 3px solid #ef4444;
}

.operation-card.cancelled {
  opacity: .5;
  border-left: 3px solid #94a3b8;
}

.operation-header {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  margin-bottom: .5rem;
}

.operation-type {
  font-size: .9rem;
  font-weight: 600;
}

.operation-status {
  color: var(--text-2);
  font-size: .75rem;
}

.operation-target {
  color: var(--text-2);
  margin-bottom: .5rem;
  font-size: .8rem;
}

.operation-meta {
  display: flex;
  color: var(--text-2);
  gap: 1rem;
  font-size: .75rem;
}

.operation-actions {
  display: flex;
  border-top: 1px solid var(--border);
  gap: .5rem;
  margin-top: .75rem;
  padding-top: .75rem;
}

.operation-actions button {
  border: 1px solid var(--border);
  background: var(--surface-3);
  color: var(--text-1);
  cursor: pointer;
  border-radius: 4px;
  padding: .25rem .5rem;
  transition: all .15s;
  font-size: .75rem;
}

.operation-actions button:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.faction-notes {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-1);
  resize: vertical;
  border-radius: 6px;
  width: 100%;
  min-height: 100px;
  padding: .75rem;
  font-family: inherit;
  font-size: .875rem;
}

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

.faction-data-actions {
  flex-shrink: 0;
}

.faction-data-actions .button-row {
  display: flex;
  gap: .5rem;
}

.faction-data-actions button, .faction-data-actions .file-button {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-1);
  cursor: pointer;
  border-radius: 6px;
  padding: .5rem 1rem;
  transition: all .15s;
  font-size: .875rem;
}

.faction-data-actions button:hover, .faction-data-actions .file-button:hover {
  background: var(--surface-3);
  border-color: var(--accent);
}

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

  .faction-list-column {
    max-height: 300px;
  }

  .faction-stats-grid, .attitude-grid {
    grid-template-columns: 1fr;
  }
}