:root {
  /* ===== Surfaces (near-black, blue cast) ===== */
  --bg: #08090c;
  --bg-elev: #0e1015;
  --bg-elev-2: #14171e;
  --bg-elev-3: #1b1f28;
  --border: rgba(255,255,255,0.07);
  --border-bright: rgba(255,255,255,0.15);

  /* ===== Text ===== */
  --text: #f4f6fb;
  --text-dim: #a7afbe;
  --text-muted: #6b7280;

  /* ===== Accent (electric blue → violet) ===== */
  --accent: #5b8cff;
  --accent-2: #8b6bff;
  --accent-ink: #eaf0ff;          /* text that sits on the accent fill */
  --accent-dim: #2c3a63;
  --glow: rgba(91,140,255,0.35);
  --grad-accent: linear-gradient(135deg, #5b8cff 0%, #8b6bff 100%);

  /* ===== Semantic ===== */
  --cyan: #6fd3ff;
  --green: #3ddc97;
  --red: #ff5d6c;
  --purple: #8b6bff;

  /* ===== Archetype identity ===== */
  --c-wizard: #8b6bff;
  --c-businessman: #3ddc97;
  --c-warrior: #ff5d6c;
  --c-producer: #5b8cff;

  /* ===== Spacing scale ===== */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* ===== Radii ===== */
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 28px; --r-pill: 999px;

  /* ===== Elevation ===== */
  --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 34px rgba(0,0,0,0.45);
  --shadow-pop: 0 20px 60px rgba(0,0,0,0.55);
  --shadow-glow: 0 0 0 1px rgba(91,140,255,0.35), 0 10px 34px rgba(91,140,255,0.22);

  /* ===== Motion ===== */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 0.12s;
  --dur: 0.2s;
  --dur-slow: 0.36s;

  /* ===== Type ===== */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Space Grotesk', var(--font-sans);
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Menlo', 'Consolas', monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Ambient: two slow-drifting accent glows over a whisper-fine grid */
body {
  position: relative;
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px);
  background-size: 40px 40px;
}
body::before {
  content: "";
  position: fixed;
  inset: -20% -20% auto -20%;
  height: 80vh;
  background:
    radial-gradient(60% 60% at 20% 10%, rgba(91,140,255,0.14), transparent 70%),
    radial-gradient(50% 50% at 85% 0%, rgba(139,107,255,0.12), transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: ambient-drift 26s var(--ease) infinite alternate;
}
@keyframes ambient-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0.9; }
  100% { transform: translate3d(-3%, 4%, 0) scale(1.08); opacity: 1; }
}
/* Keep real content above the ambient layer */
.hud, main, .page-nav { position: relative; z-index: 1; }

/* Mono utility for HUD / labels / codenames */
.logo, .callsign, .data-mode, .stat-label, .nav-pill, .tab,
.btn-primary, .btn-ghost, .btn-sm { font-family: var(--font-mono); }

/* Display face for headings + big numbers */
h1, h2, h3, .stat-value { font-family: var(--font-display); }
.stat-value, .money, .xp-num { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ===== HUD HEADER ===== */
.hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px;
  border-bottom: 1px solid var(--border);
  background: rgba(8, 9, 12, 0.62);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  position: sticky;
  top: 0;
  z-index: 20;
}

.hud-left .logo {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.logo-bracket {
  color: var(--accent);
  font-weight: 500;
  opacity: 0.9;
}
.callsign {
  margin-top: 5px;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--text-muted);
}
#callsign {
  color: var(--accent);
  cursor: pointer;
  transition: color var(--dur) var(--ease), text-shadow var(--dur) var(--ease);
}
#callsign:hover { color: var(--accent-2); text-shadow: 0 0 12px var(--glow); }

.data-mode {
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 0.15em;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
}
.data-mode .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.data-mode.server { color: var(--green); }
.data-mode.server .dot { background: var(--green); box-shadow: 0 0 6px var(--green); }
.data-mode.local  { color: var(--text-muted); }
.data-mode.local .dot { background: var(--text-muted); }
.data-mode .mono-em { color: var(--accent); font-weight: 600; }
.data-mode .hint { color: var(--text-muted); margin-left: 4px; }

.hud-right {
  display: flex;
  gap: 24px;
}
.stat {
  text-align: right;
  padding-left: 24px;
  border-left: 1px solid var(--border);
}
.stat:first-child { border-left: none; padding-left: 0; }
.stat-label {
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.stat-value {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--text);
  margin-top: 3px;
  letter-spacing: -0.01em;
}
/* Credits stat carries the accent */
#stat-bounty {
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.unit { font-size: 12px; color: var(--text-dim); margin-left: 2px; -webkit-text-fill-color: var(--text-dim); }

/* ===== PAGE NAV ===== */
.page-nav {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 22px 32px 0;
  max-width: 1280px;
  margin: 0 auto;
}
.nav-pill {
  position: relative;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  padding: 9px 20px;
  cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease),
              border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.nav-pill:hover {
  color: var(--text);
  background: rgba(255,255,255,0.04);
}
.nav-pill.active {
  color: var(--accent-ink);
  background: var(--grad-accent);
  border-color: transparent;
  box-shadow: var(--shadow-glow);
}

/* ===== PAGES ===== */
.page { display: none; }
.page.active {
  display: block;
  animation: page-enter var(--dur-slow) var(--ease) both;
}
@keyframes page-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Stagger-fade for direct children of any grid on the active page
   (mission cards, dashboard widgets, character cards, knowledge cards) */
.page.active .mission-grid > *,
.page.active .dashboard-content > *,
.page.active .characters-page-content > *,
.page.active .knowledge-page-content > *,
.page.active .char-content > * {
  animation: card-in var(--dur-slow) var(--ease) both;
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(10px) scale(0.995); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.page.active .mission-grid > *:nth-child(1),
.page.active .dashboard-content > *:nth-child(1) { animation-delay: 0.02s; }
.page.active .mission-grid > *:nth-child(2),
.page.active .dashboard-content > *:nth-child(2) { animation-delay: 0.06s; }
.page.active .mission-grid > *:nth-child(3),
.page.active .dashboard-content > *:nth-child(3) { animation-delay: 0.10s; }
.page.active .mission-grid > *:nth-child(4),
.page.active .dashboard-content > *:nth-child(4) { animation-delay: 0.14s; }
.page.active .mission-grid > *:nth-child(5),
.page.active .dashboard-content > *:nth-child(5) { animation-delay: 0.18s; }
.page.active .mission-grid > *:nth-child(6),
.page.active .dashboard-content > *:nth-child(6) { animation-delay: 0.22s; }
.page.active .mission-grid > *:nth-child(n+7) { animation-delay: 0.26s; }

/* ===== MAIN ===== */
main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}

.tabs {
  display: flex;
  gap: 2px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 4px;
}
.tab {
  background: transparent;
  border: none;
  border-radius: var(--r-pill);
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  padding: 8px 18px;
  cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.tab:hover { color: var(--text); }
.tab.active {
  background: rgba(91,140,255,0.14);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(91,140,255,0.25);
}

/* ===== BUTTONS ===== */
.btn-primary {
  background: var(--grad-accent);
  color: var(--accent-ink);
  border: none;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  padding: 11px 22px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(91,140,255,0.25);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.btn-primary:hover { filter: brightness(1.08); box-shadow: var(--shadow-glow); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0) scale(0.98); }
.plus { font-size: 14px; margin-right: 4px; }

.btn-ghost {
  background: rgba(255,255,255,0.02);
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  padding: 11px 22px;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.btn-ghost:hover {
  color: var(--text);
  border-color: var(--border-bright);
  background: rgba(255,255,255,0.05);
}
.btn-ghost:active { transform: scale(0.98); }

.btn-sm {
  font-size: 10px;
  padding: 7px 14px;
  background: rgba(255,255,255,0.02);
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.btn-sm:hover { color: var(--text); border-color: var(--border-bright); background: rgba(255,255,255,0.05); }
.btn-sm:active { transform: scale(0.97); }
.btn-sm.success:hover { color: var(--green); border-color: var(--green); }
.btn-sm.danger:hover { color: var(--red); border-color: var(--red); }

.icon-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 14px;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.icon-btn:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.icon-btn:active { transform: scale(0.9); }

/* ===== MISSION GRID ===== */
.mission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.mission-card {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mission-card:hover {
  border-color: var(--border-bright);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card), 0 0 30px rgba(91,140,255,0.10);
}
.mission-card.completed { opacity: 0.55; }
.mission-card.failed { opacity: 0.6; }

.mission-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--border-bright);
}
.mission-card[data-priority="LOW"]::before { background: var(--text-dim); }
.mission-card[data-priority="MEDIUM"]::before { background: var(--cyan); }
.mission-card[data-priority="HIGH"]::before { background: var(--accent); }
.mission-card[data-priority="CRITICAL"]::before {
  background: var(--red);
  box-shadow: 0 0 16px rgba(255,93,108,0.5);
}

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.card-codename {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.05em;
  word-break: break-word;
}
.card-tags {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-items: center;
}

.card-edit {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-left: 2px;
  transition: all 0.15s;
}
.card-edit:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.tag {
  font-size: 9px;
  font-family: var(--font-mono);
  letter-spacing: 0.16em;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--text-dim);
}
.tag.main { color: var(--accent); border-color: var(--accent-dim); }
.tag.side { color: var(--text-dim); }
.tag.priority-CRITICAL { color: var(--red); border-color: var(--red); }
.tag.priority-HIGH { color: var(--accent); border-color: var(--accent-dim); }
.tag.priority-MEDIUM { color: var(--cyan); border-color: var(--border-bright); }
.tag.priority-LOW { color: var(--text-dim); }

.card-briefing {
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.card-bounty { color: var(--accent); font-weight: 600; font-size: 12px; letter-spacing: 0.1em; }
.card-deadline.overdue { color: var(--red); }

.card-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.status-stamp {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 10px;
  letter-spacing: 0.25em;
  padding: 3px 8px;
  border: 1px solid;
}
.status-stamp.completed { color: var(--green); border-color: var(--green); }
.status-stamp.failed { color: var(--red); border-color: var(--red); }

/* ===== EMPTY STATE ===== */
.empty-state {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-muted);
}
.empty-state.hidden { display: none; }
.empty-glyph {
  font-size: 48px;
  color: var(--border-bright);
  margin-bottom: 16px;
}
.empty-title {
  font-size: 14px;
  letter-spacing: 0.25em;
  color: var(--text-dim);
}
.empty-sub {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

/* ===== DIALOG ===== */
.dialog {
  background: var(--bg-elev-2);
  border: 1px solid var(--border-bright);
  border-radius: var(--r-lg);
  color: var(--text);
  padding: 0;
  overflow: hidden;
  width: min(560px, 92vw);
  box-shadow: var(--shadow-pop);
  font-family: inherit;
}
.dialog[open] { animation: dialog-in var(--dur-slow) var(--ease) both; }
@keyframes dialog-in {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.dialog::backdrop {
  background: rgba(4, 5, 8, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev-2);
}
.dialog-header h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--accent);
}

#mission-form { padding: 24px; }

.field {
  margin-bottom: 16px;
  flex: 1;
}
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 7px;
}
.field .muted { color: var(--text-muted); font-weight: normal; }

.field input,
.field textarea,
.field select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  padding: 11px 13px;
  outline: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--text-muted); }
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--accent);
  background: var(--bg-elev);
  box-shadow: 0 0 0 3px rgba(91,140,255,0.15);
}
.field textarea { resize: vertical; min-height: 80px; }

.field-row {
  display: flex;
  gap: 12px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

/* ===== CHARACTER NAV (sub-pills) ===== */
.char-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.char-pill {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  padding: 10px 20px;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.char-pill .char-glyph { font-size: 14px; }
.char-pill:hover { color: var(--text); border-color: var(--border-bright); }

.char-pill.active[data-char="wizard"]      { border-color: var(--purple); color: var(--purple); }
.char-pill.active[data-char="businessman"] { border-color: var(--green);  color: var(--green); }
.char-pill.active[data-char="warrior"]     { border-color: var(--red);    color: var(--red); }

/* ===== CHARACTER PAGE ===== */
.char-content {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  padding: 32px;
}

.char-header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.char-emblem {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  border: 2px solid;
  flex-shrink: 0;
}
.char-emblem.wizard      { color: var(--purple); border-color: var(--purple); }
.char-emblem.businessman { color: var(--green);  border-color: var(--green); }
.char-emblem.warrior     { color: var(--red);    border-color: var(--red); }

.char-title { flex: 1; }
.char-name {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--text);
}
.char-blurb {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.6;
}

.char-level-block {
  text-align: right;
  flex-shrink: 0;
}
.char-level-label {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--text-muted);
}
.char-level-value {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  margin-top: 4px;
}
.char-level-value.wizard      { color: var(--purple); }
.char-level-value.businessman { color: var(--green); }
.char-level-value.warrior     { color: var(--red); }
.char-rank {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--text);
}

/* XP bar */
.xp-section { padding: 24px 0; border-bottom: 1px solid var(--border); }
.xp-row {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.xp-row .xp-value { color: var(--text); font-weight: 600; }
.xp-bar {
  height: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.xp-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}
.xp-fill.wizard      { background: linear-gradient(90deg, var(--purple), #c4b5fd); }
.xp-fill.businessman { background: linear-gradient(90deg, var(--green),  #86efac); }
.xp-fill.warrior     { background: linear-gradient(90deg, var(--red),    #fca5a5); }

/* Char stats */
.char-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
}
.char-stat {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.char-stat-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-muted);
}
.char-stat-value {
  font-size: 20px;
  font-weight: 600;
  color: var(--accent);
  margin-top: 4px;
  word-break: break-word;
}
.char-stat-value .stat-unit {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 500;
  margin-left: 2px;
  letter-spacing: 0.1em;
  text-transform: lowercase;
}

/* Request banner */
.request-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 18px 22px;
  margin: 24px 0;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--bg-elev-2), var(--bg-elev));
  flex-wrap: wrap;
}
.request-banner.wizard      { border-color: rgba(167, 139, 250, 0.4); }
.request-banner.businessman { border-color: rgba(74, 222, 128, 0.4); }
.request-banner.warrior     { border-color: rgba(248, 113, 113, 0.4); }

.request-title {
  font-size: 12px;
  letter-spacing: 0.25em;
  font-weight: 600;
  color: var(--text);
}
.request-sub {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-dim);
}

.request-btn.wizard      { background: var(--purple); border-color: var(--purple); color: #1a0f2e; }
.request-btn.businessman { background: var(--green);  border-color: var(--green);  color: #0a1f12; }
.request-btn.warrior     { background: var(--red);    border-color: var(--red);    color: #2a0a0a; }
.request-btn.wizard:hover      { background: #c4b5fd; border-color: #c4b5fd; }
.request-btn.businessman:hover { background: #86efac; border-color: #86efac; }
.request-btn.warrior:hover     { background: #fca5a5; border-color: #fca5a5; }

/* Active contracts section */
.contracts-section { padding: 24px 0; border-bottom: 1px solid var(--border); }
.section-title {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--text-dim);
  margin-bottom: 16px;
}
.contracts-empty {
  text-align: center;
  padding: 36px 16px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 0.1em;
}
.contracts-empty-glyph { font-size: 28px; color: var(--border-bright); margin-bottom: 10px; }
.contracts-empty-sub { font-size: 11px; margin-top: 6px; color: var(--text-muted); }

/* ===== Dashboard page ===== */
.dashboard-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 20px;
}

/* ===== Recent Knowledge widget (dashboard) ===== */
.recent-knowledge-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  grid-column: 1 / -1;
}
.recent-knowledge-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
}
.recent-knowledge-title-wrap { flex: 1; }
.recent-knowledge-title {
  font-size: 12px;
  letter-spacing: 0.2em;
  font-weight: 600;
  color: var(--text);
}
.recent-knowledge-sub {
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  margin-top: 4px;
}

.recent-knowledge-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.recent-knowledge-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.recent-knowledge-item:hover {
  border-color: var(--purple);
  background: var(--bg-elev-2);
}

.recent-knowledge-item-attr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--border);
}
.recent-knowledge-subject {
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--text-dim);
  font-weight: 600;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recent-knowledge-char {
  font-size: 14px;
  flex-shrink: 0;
}
.recent-knowledge-char.wizard      { color: var(--purple); }
.recent-knowledge-char.businessman { color: var(--green); }
.recent-knowledge-char.warrior     { color: var(--red); }
.recent-knowledge-char.unassigned  { color: var(--text-muted); }

.recent-knowledge-takeaways {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rk;
  flex: 1;
}
.recent-knowledge-takeaways li {
  counter-increment: rk;
  position: relative;
  padding-left: 22px;
  margin: 8px 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text);
}
.recent-knowledge-takeaways li::before {
  content: counter(rk);
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  border: 1px solid var(--purple);
  border-radius: 50%;
  font-size: 9px;
  color: var(--purple);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.recent-knowledge-empty {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  padding: 8px 0;
}

.recent-knowledge-item-source {
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-style: italic;
  line-height: 1.4;
}

/* ===== Goals widget (weekly + monthly) ===== */
.goals-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  grid-column: 1 / -1; /* span full row on the dashboard grid */
}
.goals-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
}
.goals-title {
  font-size: 12px;
  letter-spacing: 0.2em;
  font-weight: 600;
  color: var(--text);
}
.goals-sub {
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--text-muted);
}

.goals-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.goals-column {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}
.goals-column-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border);
}
.goals-column-title {
  font-size: 11px;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--accent);
  flex: 1;
}
.goals-column-count {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.goals-add {
  width: 26px;
  height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.goals-column-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.goals-empty {
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  padding: 14px 0;
}

.goal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  border-radius: 6px;
  transition: background 0.15s;
}
.goal-row:hover {
  background: var(--bg-elev-2);
}
.goal-check {
  background: transparent;
  border: 1.5px solid var(--border-bright);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 11px;
  color: var(--green);
  font-weight: 700;
  flex-shrink: 0;
  transition: all 0.15s;
}
.goal-check:hover { border-color: var(--cyan); }
.goal-check.done {
  background: var(--green);
  border-color: var(--green);
  color: #0a1f12;
}
.goal-text {
  flex: 1;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text);
}
.goal-row.completed .goal-text {
  text-decoration: line-through;
  color: var(--text-muted);
}
.goal-delete {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11px;
  padding: 2px 4px;
  opacity: 0;
  transition: opacity 0.15s;
}
.goal-row:hover .goal-delete { opacity: 0.6; }
.goal-delete:hover { color: var(--red); opacity: 1; }

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

/* ===== Daily Habits widget ===== */
.habits-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.habits-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.habits-title-wrap { flex: 1; }
.habits-title {
  font-size: 12px;
  letter-spacing: 0.2em;
  font-weight: 600;
  color: var(--text);
}
.habits-sub {
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  margin-top: 4px;
}

.habits-overall-bar {
  height: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.habits-overall-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--green));
  border-radius: 999px;
  transition: width 0.3s ease;
}

.habits-empty {
  text-align: center;
  padding: 24px 12px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 12px;
}
.habits-empty-sub {
  font-size: 11px;
  margin-top: 6px;
  color: var(--text-muted);
}

.habits-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.habit-block {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.15s, background 0.15s;
}
.habit-block.complete {
  border-color: var(--green);
  background: rgba(74, 222, 128, 0.04);
}

.habit-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.habit-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.04em;
  flex: 1;
}
.habit-progress {
  display: flex;
  align-items: center;
  gap: 6px;
}
.habit-progress-count {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}
.habit-add-subtask, .habit-delete {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.habit-add-subtask:hover { color: var(--accent); border-color: var(--accent); }
.habit-delete:hover { color: var(--red); border-color: var(--red); }

.habit-bar {
  height: 4px;
  background: var(--bg-elev-2);
  border-radius: 999px;
  overflow: hidden;
}
.habit-bar-fill {
  height: 100%;
  background: var(--cyan);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.habit-block.complete .habit-bar-fill { background: var(--green); }

.habit-subtasks {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 4px;
}
.habit-subtask {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}
.habit-check {
  background: transparent;
  border: 1.5px solid var(--border-bright);
  border-radius: 4px;
  width: 18px;
  height: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 11px;
  color: var(--green);
  font-weight: 700;
  flex-shrink: 0;
  transition: all 0.15s;
}
.habit-check:hover { border-color: var(--cyan); }
.habit-check.done {
  background: var(--green);
  border-color: var(--green);
  color: #0a1f12;
}
.habit-subtask-name {
  font-size: 12px;
  color: var(--text);
  flex: 1;
  transition: all 0.15s;
}
.habit-subtask-name.done {
  text-decoration: line-through;
  color: var(--text-muted);
}
.habit-subtask-delete {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11px;
  padding: 2px 4px;
  opacity: 0;
  transition: opacity 0.15s;
}
.habit-subtask:hover .habit-subtask-delete { opacity: 0.7; }
.habit-subtask-delete:hover { color: var(--red); opacity: 1; }

.habit-empty-subtasks {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  padding: 4px 0;
}
.link-btn {
  background: transparent;
  border: none;
  color: var(--cyan);
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  text-decoration: underline;
  padding: 0;
}

/* ===== Key Tasks widget ===== */
.key-tasks-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.key-tasks-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.key-tasks-title {
  font-size: 12px;
  letter-spacing: 0.2em;
  font-weight: 600;
  color: var(--text);
}
.key-tasks-sub {
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  margin-top: 4px;
}

.key-tasks-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.key-tasks-empty {
  text-align: center;
  padding: 20px 12px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 12px;
}
.key-tasks-empty-sub {
  font-size: 11px;
  margin-top: 4px;
  color: var(--text-muted);
}

.key-task-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  position: relative;
}
.key-task-row[data-priority="CRITICAL"] { border-left: 3px solid var(--red); }
.key-task-row[data-priority="HIGH"]     { border-left: 3px solid var(--accent); }
.key-task-row[data-priority="MEDIUM"]   { border-left: 3px solid var(--cyan); }
.key-task-row[data-priority="LOW"]      { border-left: 3px solid var(--text-dim); }

.key-task-star {
  background: transparent;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 16px;
  width: 24px;
  height: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.key-task-star:hover { color: #ffc55a; }

.key-task-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.key-task-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.key-task-codename {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.04em;
  word-break: break-word;
  flex: 1;
  min-width: 80px;
}
.key-task-char {
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid;
}
.key-task-char.char-wizard      { color: var(--purple); border-color: var(--purple); }
.key-task-char.char-businessman { color: var(--green);  border-color: var(--green); }
.key-task-char.char-warrior     { color: var(--red);    border-color: var(--red); }

.key-task-deadline {
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--text-muted);
}
.key-task-deadline.overdue { color: var(--red); font-weight: 600; }

.key-task-complete {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Star button on mission cards (in the missions page + character pages) */
.mission-star {
  color: var(--text-muted);
  font-size: 13px;
}
.mission-star:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.mission-star.starred {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(245, 179, 71, 0.08);
}
.mission-star.starred:hover {
  color: var(--accent);
  background: rgba(245, 179, 71, 0.15);
}

/* ===== Finance Pulse widget ===== */
.finance-pulse-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.finance-pulse-card.hidden-state {
  /* compact mode when hidden */
  padding: 18px 22px;
}

.finance-pulse-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.finance-pulse-title-wrap {
  flex: 1;
}
.finance-glyph {
  color: var(--green);
  margin-right: 4px;
}
.finance-pulse-title {
  font-size: 12px;
  letter-spacing: 0.2em;
  font-weight: 600;
  color: var(--text);
}
.finance-pulse-sub {
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  margin-top: 4px;
}
.finance-pulse-actions {
  display: flex;
  gap: 6px;
}

.finance-pulse-figure {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
}
.finance-pulse-current {
  font-size: 40px;
  font-weight: 700;
  color: var(--green);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.finance-pulse-target {
  font-size: 14px;
  color: var(--text-dim);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.finance-pulse-bar {
  height: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.finance-pulse-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green), #86efac);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.finance-pulse-bar-meta {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-top: 2px;
}

.finance-pulse-stats-row {
  display: flex;
  justify-content: space-around;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.finance-stat {
  text-align: center;
  flex: 1;
}
.finance-stat-label {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--text-muted);
}
.finance-stat-value {
  font-size: 18px;
  font-weight: 600;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.finance-stat-value.positive { color: var(--green); }
.finance-stat-value.negative { color: var(--red); }
.finance-stat-value.neutral  { color: var(--text); }

/* Per-account breakdown */
.finance-accounts {
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.finance-accounts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.finance-accounts-label {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--text-dim);
  font-weight: 600;
}
.finance-accounts-synced {
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.finance-account-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  font-size: 12px;
}
.finance-account-provider {
  font-size: 9px;
  letter-spacing: 0.15em;
  font-weight: 700;
  text-align: center;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid;
}
.finance-account-provider.starling {
  color: #c084fc;  /* Starling purple */
  border-color: #c084fc;
}
.finance-account-provider.monzo {
  color: #fb7185;  /* Monzo pink/coral */
  border-color: #fb7185;
}
.finance-account-provider.unknown {
  color: var(--text-muted);
  border-color: var(--border);
}
.finance-account-name {
  color: var(--text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.finance-account-balance {
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-weight: 600;
}

/* ===== Finance Page (dedicated) ===== */
.finance-page-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.finance-header-card,
.finance-accounts-card,
.finance-history-card,
.finance-tx-card,
.finance-coming-soon {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 24px;
}

/* ===== Transactions ===== */
.tx-summary-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin: 14px 0 18px;
}
.tx-summary-item {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
}
.tx-summary-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.tx-summary-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.tx-summary-item.income .tx-summary-value { color: var(--green); }
.tx-summary-item.spend  .tx-summary-value { color: #ff6b8a; }

/* ===== Wave 2 additions ===== */

.finance-header-extras {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
@media (max-width: 900px) {
  .finance-header-extras { grid-template-columns: 1fr; }
}

/* Goal progress card */
.goal-progress-card {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}
.goal-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.goal-progress-title {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  font-weight: 600;
}
.goal-progress-deadline {
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0.08em;
}
.goal-progress-values {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.goal-progress-current {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.goal-progress-divider, .goal-progress-target {
  color: var(--text-muted);
  font-size: 12px;
}
.goal-progress-pct {
  margin-left: auto;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
}
.goal-progress-bar {
  height: 8px;
  background: var(--bg-elev);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
}
.goal-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--green) 100%);
  border-radius: 999px;
  transition: width 0.4s ease-out;
}
.goal-progress-foot {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}
.goal-progress-foot.done {
  color: var(--green);
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.15em;
}

/* Net worth sparkline */
.networth-sparkline-card {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
}
.networth-sparkline-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.networth-sparkline-title {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  font-weight: 600;
}
.networth-sparkline-change {
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.networth-sparkline-change.up { color: var(--green); }
.networth-sparkline-change.down { color: #ff6b8a; }
.networth-sparkline-svg {
  width: 100%;
  height: 60px;
  display: block;
}

/* Top 5 spends */
.top-spends-card {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}
.top-spends-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.top-spends-title {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  font-weight: 600;
}
.top-spends-sub {
  font-size: 10px;
  color: var(--text-muted);
}
.top-spends-list { display: flex; flex-direction: column; gap: 4px; }
.top-spends-row {
  display: grid;
  grid-template-columns: 28px 1fr 80px;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
  font-size: 11px;
}
.top-spends-rank { color: var(--accent); font-weight: 700; }
.top-spends-desc {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-spends-amount {
  text-align: right;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Recurring detected */
.recurring-detected-card {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 14px 18px;
  margin: 0 0 14px;
}
.recurring-detected-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.recurring-detected-title {
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--accent);
  font-weight: 600;
}
.recurring-detected-sub {
  font-size: 10px;
  color: var(--text-muted);
}
.recurring-detected-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.recurring-row {
  display: grid;
  grid-template-columns: 1fr 70px 80px 130px 30px;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  background: var(--bg-elev);
  border-radius: 6px;
  font-size: 11px;
}
.recurring-sig {
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recurring-cadence {
  font-size: 9px;
  letter-spacing: 0.12em;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  text-align: center;
  text-transform: uppercase;
}
.recurring-cadence.monthly { color: var(--accent); border-color: var(--accent); }
.recurring-cadence.weekly  { color: #ff6b8a; border-color: #ff6b8a55; }
.recurring-cadence.yearly  { color: var(--green); border-color: var(--green); }
.recurring-amt {
  text-align: right;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.recurring-next {
  font-size: 10px;
  color: var(--text-muted);
}
.recurring-count {
  text-align: right;
  color: var(--text-muted);
  font-size: 10px;
}

/* CSV export button row */
.tx-section-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

/* Pots breakdown */
.pots-card {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  margin-top: 14px;
}
.pots-header { margin-bottom: 8px; }
.pots-title {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  font-weight: 600;
}
.pots-list { display: flex; flex-direction: column; gap: 4px; }
.pot-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 12px;
  align-items: center;
  font-size: 11px;
  padding: 6px 0;
}
.pot-account { color: var(--text); font-weight: 600; }
.pot-main, .pot-extra, .pot-total {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.pot-total { color: var(--text); text-align: right; font-weight: 600; }

/* Anomalies card */
.anomalies-card {
  background: var(--bg-elev-2);
  border: 1px solid #ff6b8a55;
  border-left: 3px solid #ff6b8a;
  border-radius: 10px;
  padding: 14px 18px;
  margin-top: 14px;
}
.anomalies-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.anomalies-title {
  font-size: 11px;
  letter-spacing: 0.15em;
  color: #ff6b8a;
  font-weight: 600;
}
.anomalies-sub {
  font-size: 10px;
  color: var(--text-muted);
}
.anomalies-list { display: flex; flex-direction: column; gap: 4px; }
.anomaly-row {
  display: grid;
  grid-template-columns: 80px 1fr 80px 1.5fr;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  background: var(--bg-elev);
  border-radius: 6px;
  font-size: 11px;
}
.anomaly-date { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.anomaly-desc { color: var(--text); }
.anomaly-amount { color: #ff6b8a; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.anomaly-reason { color: var(--text-muted); font-style: italic; }

/* Velocity card */
.velocity-card {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}
.velocity-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.velocity-title {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  font-weight: 600;
}
.velocity-sub {
  font-size: 10px;
  color: var(--text-muted);
}
.velocity-body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.velocity-item {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
}
.velocity-item.highlight {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--bg-elev) 0%, rgba(255,170,40,0.06) 100%);
}
.velocity-label {
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.velocity-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.velocity-value.muted { color: var(--text-muted); }
.velocity-value.up { color: #ff6b8a; }
.velocity-value.down { color: var(--green); }
.velocity-delta {
  font-size: 9px;
  letter-spacing: 0.05em;
  margin-top: 2px;
}
.velocity-delta.up { color: #ff6b8a; }
.velocity-delta.down { color: var(--green); }

/* Invoice link button on tx row */
.tx-invoice-link {
  background: var(--bg-elev);
  border: 1px solid var(--green);
  color: var(--green);
  width: 18px;
  height: 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 4px;
  font-size: 9px;
  padding: 0;
  vertical-align: middle;
}
.tx-invoice-link:hover { background: var(--green); color: #1a1a1a; }

.tx-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 14px 0 18px;
}
@media (max-width: 900px) {
  .tx-charts-row { grid-template-columns: 1fr; }
}
.tx-cat-chart-card {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 0;
}
.tx-cat-chart-title.spend { color: #ff6b8a; }
.tx-cat-chart-title.income { color: var(--green); }
.tx-cat-bar-fill.spend {
  background: linear-gradient(90deg, var(--accent) 0%, #ff7a3a 100%);
}
.tx-cat-bar-fill.income {
  background: linear-gradient(90deg, var(--green) 0%, var(--accent) 100%);
}

/* Search box + entity-tagging pills */
.tx-search-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 10px 0 14px;
  flex-wrap: wrap;
}
.tx-search-wrap {
  position: relative;
  flex: 1;
  min-width: 220px;
}
.tx-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  opacity: 0.6;
  pointer-events: none;
}
.tx-search-input {
  width: 100%;
  padding: 8px 30px 8px 30px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
}
.tx-search-input:focus {
  outline: none;
  border-color: var(--accent);
}
.tx-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 18px;
  height: 18px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 9px;
  line-height: 1;
}
.tx-search-clear:hover { color: #ff6b8a; }

.tx-entity-tagging-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.tx-filter-label-inline {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  margin-right: 4px;
}
.char-pill.tx-entity-pill {
  font-size: 10px;
  padding: 4px 10px;
}
.char-pill.tx-entity-pill.active.business {
  background: var(--bg-elev-2);
  color: var(--accent);
  border-color: var(--accent);
}
.char-pill.tx-entity-pill.active.personal {
  background: var(--bg-elev-2);
  color: #6cb8ff;
  border-color: #6cb8ff;
}
.char-pill.tx-entity-pill.active.mixed {
  background: var(--bg-elev-2);
  color: var(--green);
  border-color: var(--green);
}
.char-pill.tx-entity-pill.active.all {
  background: var(--bg-elev-2);
  color: var(--text);
  border-color: var(--text);
}

/* Per-tx entity badge */
.tx-entity-badge {
  display: inline-block;
  width: 16px;
  height: 16px;
  line-height: 14px;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  border-radius: 4px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  margin-left: 6px;
  vertical-align: middle;
  font-family: inherit;
}
.tx-entity-badge.business { color: var(--accent); border-color: var(--accent); }
.tx-entity-badge.personal { color: #6cb8ff; border-color: #6cb8ff; }
.tx-entity-badge.mixed { color: var(--green); border-color: var(--green); }
.tx-entity-badge.override {
  background: rgba(255,170,40,0.15);
  font-weight: 700;
}
.tx-entity-badge:hover {
  filter: brightness(1.25);
}
.tx-make-rule {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 18px;
  height: 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 4px;
  font-size: 9px;
  padding: 0;
  vertical-align: middle;
}
.tx-make-rule:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Auto-tag rules section */
.tx-rules-section {
  margin-top: 22px;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}
.tx-rules-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.tx-rules-title {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  font-weight: 600;
}
.tx-rules-empty {
  font-size: 11px;
  color: var(--text-muted);
  padding: 12px;
  background: var(--bg-elev-2);
  border: 1px dashed var(--border);
  border-radius: 8px;
  text-align: center;
}
.tx-rules-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tx-rule-row {
  display: grid;
  grid-template-columns: 140px 1fr 18px 2fr 24px;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 11px;
}
.tx-rule-when {
  color: var(--text-muted);
  letter-spacing: 0.08em;
  font-size: 10px;
}
.tx-rule-pattern {
  font-family: ui-monospace, SF Mono, monospace;
  background: var(--bg-elev);
  padding: 2px 8px;
  border-radius: 3px;
  color: var(--accent);
}
.tx-rule-arrow {
  color: var(--text-muted);
  text-align: center;
}
.tx-rule-result strong {
  color: var(--text);
}

.rule-preview-note {
  margin: 8px 0;
  padding: 8px 12px;
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-elev-2);
  border-radius: 6px;
  border-left: 2px solid var(--accent);
  letter-spacing: 0.05em;
}
.tx-cat-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  gap: 12px;
  flex-wrap: wrap;
}
.tx-cat-chart-title {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  font-weight: 600;
}
.tx-cat-chart-sub {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.tx-cat-chart {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tx-cat-bar-row {
  display: grid;
  grid-template-columns: 140px 1fr 130px;
  align-items: center;
  gap: 12px;
  padding: 6px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.tx-cat-bar-row:hover {
  background: var(--bg-elev);
  border-color: var(--border);
}
.tx-cat-bar-row.active {
  background: var(--bg-elev);
  border-color: var(--accent);
}
.tx-cat-bar-label {
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tx-cat-bar-track {
  height: 10px;
  background: var(--bg-elev);
  border-radius: 999px;
  overflow: hidden;
}
.tx-cat-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, #ff7a3a 100%);
  border-radius: 999px;
  transition: width 0.3s ease-out;
}
.tx-cat-bar-row.active .tx-cat-bar-fill {
  background: linear-gradient(90deg, var(--green) 0%, var(--accent) 100%);
}
.tx-cat-bar-value {
  text-align: right;
  font-size: 12px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tx-cat-bar-share {
  color: var(--text-muted);
  font-size: 10px;
  margin-left: 4px;
}

@media (max-width: 720px) {
  .tx-cat-bar-row {
    grid-template-columns: 100px 1fr 100px;
    gap: 8px;
  }
  .tx-cat-bar-label {
    font-size: 11px;
  }
  .tx-cat-bar-value {
    font-size: 11px;
  }
}

.tx-filter-section {
  margin: 10px 0;
}
.tx-filter-label {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.tx-filter-nav {
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}
.tx-month-pill, .tx-cat-pill {
  font-size: 10px;
  padding: 4px 10px;
}
.char-pill.tx-month-pill.active,
.char-pill.tx-cat-pill.active {
  background: var(--bg-elev-2);
  color: var(--accent);
  border-color: var(--accent);
}
.char-pill.tx-dir-pill {
  font-size: 10px;
  padding: 4px 12px;
}
.char-pill.tx-dir-pill.active.in {
  background: var(--bg-elev-2);
  color: var(--green);
  border-color: var(--green);
}
.char-pill.tx-dir-pill.active.out {
  background: var(--bg-elev-2);
  color: #ff6b8a;
  border-color: #ff6b8a;
}
.char-pill.tx-dir-pill.active.all {
  background: var(--bg-elev-2);
  color: var(--accent);
  border-color: var(--accent);
}

.tx-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
}
.tx-row {
  display: grid;
  grid-template-columns: 56px 1fr 200px 100px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.tx-row.income {
  border-left: 2px solid var(--green);
}
.tx-row.spend {
  border-left: 2px solid #ff6b8a44;
}
.tx-row.pending {
  background: repeating-linear-gradient(
    -45deg,
    var(--bg-elev-2),
    var(--bg-elev-2) 6px,
    rgba(255, 170, 40, 0.04) 6px,
    rgba(255, 170, 40, 0.04) 12px
  );
  border-style: dashed;
  border-color: var(--accent);
}
.tx-pending-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  background: var(--accent);
  color: #1a1a1a;
  border-radius: 3px;
  font-size: 8px;
  letter-spacing: 0.1em;
  font-weight: 700;
  text-transform: uppercase;
  vertical-align: middle;
}
.tx-date {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.tx-desc-wrap {
  min-width: 0;
}
.tx-desc {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tx-acc {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  margin-top: 2px;
}
.tx-prov {
  font-size: 9px;
  letter-spacing: 0.15em;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
}
.tx-prov.starling { color: #6cb8ff; border-color: #6cb8ff55; }
.tx-prov.monzo    { color: #ff7a59; border-color: #ff7a5955; }

.tx-cat-wrap {
  position: relative;
}
.tx-cat-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  padding: 6px 10px;
  background: var(--bg-elev);
  border: 1px dashed var(--border);
  border-radius: 999px;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
}
.tx-cat-wrap.user-set .tx-cat-label {
  color: var(--accent);
  border-style: solid;
  border-color: var(--accent);
}
.tx-cat-wrap.provider-set .tx-cat-label {
  color: var(--text);
  border-style: solid;
}
.tx-cat-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.tx-amount {
  text-align: right;
  font-weight: 700;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.tx-amount.income { color: var(--green); }
.tx-amount.spend  { color: #ff6b8a; }

.tx-hidden-note {
  margin-top: 10px;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  text-align: center;
}

/* ===== Characters Roster Page ===== */
.characters-page-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.characters-header-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 24px;
}
.characters-title {
  font-size: 20px;
  letter-spacing: 0.2em;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.characters-subtitle {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.characters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 16px;
}
.character-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 24px;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.character-card:hover {
  transform: translateY(-2px);
}
/* Per-character accent borders on hover */
.character-card.wizard:hover { border-color: var(--purple); box-shadow: 0 6px 24px rgba(167,139,250,0.12); }
.character-card.businessman:hover { border-color: var(--accent); box-shadow: 0 6px 24px rgba(255,170,40,0.12); }
.character-card.warrior:hover { border-color: #ff6b8a; box-shadow: 0 6px 24px rgba(255,107,138,0.12); }
.character-card.producer:hover { border-color: var(--green); box-shadow: 0 6px 24px rgba(0,200,120,0.12); }

.character-card-top {
  display: flex;
  align-items: center;
  gap: 16px;
}
.character-emblem {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.character-emblem.wizard { color: var(--purple); border-color: var(--purple); }
.character-emblem.businessman { color: var(--accent); border-color: var(--accent); }
.character-emblem.warrior { color: #ff6b8a; border-color: #ff6b8a; }
.character-emblem.producer { color: var(--green); border-color: var(--green); }
.character-headline { flex: 1; min-width: 0; }
.character-name {
  font-size: 15px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--text);
}
.character-rank-now {
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  margin-top: 3px;
}
.character-level {
  text-align: center;
  flex-shrink: 0;
}
.character-level-num {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.character-level.wizard .character-level-num { color: var(--purple); }
.character-level.businessman .character-level-num { color: var(--accent); }
.character-level.warrior .character-level-num { color: #ff6b8a; }
.character-level.producer .character-level-num { color: var(--green); }
.character-level-lbl {
  font-size: 8px;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  margin-top: 2px;
}
.character-blurb {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
}
.character-progress-row {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 5px;
}
.character-progress-bar {
  height: 8px;
  background: var(--bg-elev-2);
  border-radius: 999px;
  overflow: hidden;
}
.character-progress-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s;
}
.character-progress-fill.wizard { background: linear-gradient(90deg, var(--purple), #c4b5fd); }
.character-progress-fill.businessman { background: linear-gradient(90deg, var(--accent), #ffd27a); }
.character-progress-fill.warrior { background: linear-gradient(90deg, #ff6b8a, #ffa0b4); }
.character-progress-fill.producer { background: linear-gradient(90deg, var(--green), #6ee7b7); }

.character-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.character-stat {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 6px;
  text-align: center;
}
.character-stat-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.character-stat-lbl {
  font-size: 8px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-top: 3px;
}

.character-ladder {
  display: flex;
  gap: 4px;
}
.cr-rank {
  flex: 1;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 4px;
  text-align: center;
  opacity: 0.5;
}
.cr-rank.unlocked { opacity: 1; }
.cr-rank.unlocked.wizard { border-color: var(--purple); }
.cr-rank.unlocked.businessman { border-color: var(--accent); }
.cr-rank.unlocked.warrior { border-color: #ff6b8a; }
.cr-rank.unlocked.producer { border-color: var(--green); }
.cr-rank-lvl {
  font-size: 9px;
  color: var(--text-muted);
  font-weight: 700;
}
.cr-rank-name {
  display: block;
  font-size: 7px;
  letter-spacing: 0.05em;
  color: var(--text);
  margin: 2px 0;
  line-height: 1.2;
  height: 16px;
  overflow: hidden;
}
.cr-rank-dot { font-size: 9px; color: var(--text-muted); }
.cr-rank.unlocked .cr-rank-dot { color: var(--green); }

.character-card-foot {
  text-align: right;
}
.character-enter {
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  font-weight: 600;
}
.character-card:hover .character-enter { color: var(--text); }

/* ===== Higher Faculties Page ===== */
.faculties-page-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
}

.faculties-header-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 28px;
}
.faculties-title {
  font-size: 20px;
  letter-spacing: 0.2em;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.faculties-subtitle {
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.faculties-intro {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text);
  margin: 0 0 12px;
}
.faculties-intro strong { color: var(--accent); }
.faculties-source {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.faculties-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 16px;
}

.faculty-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.faculty-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.faculty-glyph {
  font-size: 32px;
  line-height: 1;
  color: var(--accent);
  flex-shrink: 0;
}
.faculty-name {
  font-size: 14px;
  letter-spacing: 0.2em;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.faculty-oneliner {
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.4;
}
.faculty-definition {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text);
}
.faculty-quote {
  font-size: 12px;
  font-style: italic;
  color: var(--accent);
  padding: 10px 14px;
  background: var(--bg-elev-2);
  border-left: 2px solid var(--accent);
  border-radius: 4px;
  line-height: 1.5;
}
.faculty-exercises-header {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  margin-top: 8px;
  margin-bottom: -2px;
  font-weight: 600;
}
.faculty-exercises {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.faculty-exercise {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
}
.faculty-exercise-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.faculty-exercise-num {
  background: var(--accent);
  color: #1a1a1a;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
}
.faculty-exercise-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.05em;
}
.faculty-exercise-time {
  font-size: 10px;
  color: var(--text-muted);
  padding: 2px 8px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 999px;
  margin-left: auto;
  white-space: nowrap;
}
.faculty-exercise-steps {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text);
  margin-left: 32px;
}

.faculty-action-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.faculty-deepdive-btn {
  flex: 1;
  padding: 12px 16px;
  background: var(--bg-elev-2);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 10px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: all 0.15s;
}
.faculty-deepdive-btn:hover {
  background: var(--accent);
  color: #1a1a1a;
}
.faculty-practice-btn {
  flex: 1;
  padding: 12px 16px;
  background: var(--accent);
  color: #1a1a1a;
  border: 1px solid var(--accent);
  border-radius: 10px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: all 0.15s;
}
.faculty-practice-btn:hover {
  background: var(--green);
  border-color: var(--green);
  transform: translateY(-1px);
}

/* ===== Perception Gym ===== */
.perception-gym-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 820px;
  margin: 0 auto;
}
.pg-header-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 24px;
}
.pg-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.pg-streak-note {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}
.pg-title {
  font-size: 20px;
  letter-spacing: 0.2em;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.pg-subtitle {
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  line-height: 1.5;
}

.pg-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pg-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text-muted);
  transition: all 0.15s;
}
.pg-tab:hover { border-color: var(--accent); color: var(--text); }
.pg-tab.active {
  background: var(--bg-elev-2);
  border-color: var(--accent);
  color: var(--accent);
}
.pg-tab-glyph { font-size: 14px; }
.pg-tab-name { font-size: 11px; letter-spacing: 0.08em; font-weight: 600; }
.pg-tab-count {
  background: var(--accent);
  color: #1a1a1a;
  font-size: 9px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.pg-exercise-card {
  background: var(--bg-elev);
  border: 1px solid var(--accent);
  border-radius: 16px;
  padding: 24px;
}
.pg-exercise-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.pg-exercise-glyph { font-size: 28px; }
.pg-exercise-name {
  font-size: 16px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--text);
}
.pg-exercise-time {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  margin-top: 2px;
}
.pg-exercise-intro {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  font-style: italic;
  padding: 12px 14px;
  background: var(--bg-elev-2);
  border-left: 2px solid var(--accent);
  border-radius: 6px;
  margin-bottom: 18px;
}
.pg-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pg-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pg-field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}
.pg-field-input, .pg-field-textarea {
  width: 100%;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.55;
  resize: vertical;
}
.pg-field-input:focus, .pg-field-textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.pg-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.pg-history {
  margin-top: 4px;
}
.pg-history-empty {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  padding: 16px;
  background: var(--bg-elev);
  border: 1px dashed var(--border);
  border-radius: 10px;
  text-align: center;
}
.pg-session {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 10px;
}
.pg-session-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.pg-session-date {
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--accent);
  font-weight: 600;
}
.pg-session-field { margin-bottom: 10px; }
.pg-session-q {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 3px;
  line-height: 1.4;
}
.pg-session-a {
  font-size: 13px;
  color: var(--text);
  line-height: 1.55;
  white-space: pre-wrap;
}
.faculty-deepdive-stub {
  width: 100%;
  margin-top: 10px;
  padding: 12px 16px;
  text-align: center;
  background: var(--bg-elev-2);
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: 0.15em;
  font-style: italic;
}

.faculties-footer-card {
  background: var(--bg-elev);
  border: 1px solid var(--accent);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 16px 20px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
}
.faculties-footer-card strong {
  color: var(--accent);
  letter-spacing: 0.08em;
}

/* Faculty-specific glyph tints */
#faculty-reason .faculty-glyph { color: #ff7a3a; }
#faculty-memory .faculty-glyph { color: #6cb8ff; }
#faculty-perception .faculty-glyph { color: var(--green); }
#faculty-will .faculty-glyph { color: #ff6b8a; }
#faculty-intuition .faculty-glyph { color: var(--purple); }
#faculty-imagination .faculty-glyph { color: var(--accent); }

/* ===== Journal Page ===== */
.journal-page-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 760px;
  margin: 0 auto;
}
.journal-header-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 24px;
}
.journal-header-top {
  margin-bottom: 14px;
}
.journal-title {
  font-size: 18px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--text);
}
.journal-subtitle {
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  margin-top: 4px;
}
.journal-compose {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.journal-compose-input {
  width: 100%;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.55;
  resize: vertical;
  min-height: 80px;
}
.journal-compose-input:focus {
  outline: none;
  border-color: var(--accent);
}
.journal-compose-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.journal-compose-hint {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.journal-stream {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.journal-day-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 22px;
}
.journal-day-card.today {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--bg-elev) 0%, rgba(255,170,40,0.03) 100%);
}
.journal-day-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.journal-day-date {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  font-weight: 600;
}
.journal-day-today {
  font-size: 9px;
  letter-spacing: 0.18em;
  padding: 2px 8px;
  background: var(--accent);
  color: #1a1a1a;
  border-radius: 3px;
  font-weight: 700;
}
.journal-day-body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
}
.journal-day-body h4.journal-time,
.journal-day-body h2 {
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--accent);
  margin: 12px 0 6px;
  font-weight: 600;
}
.journal-day-body h4.journal-time:first-child,
.journal-day-body h2:first-child {
  margin-top: 0;
}
.journal-day-body p {
  margin: 0 0 10px;
}
.journal-day-body ul, .journal-day-body ol {
  padding-left: 22px;
  margin: 0 0 10px;
}
.journal-loading, .journal-empty-day {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  padding: 4px 0;
}

.journal-empty {
  text-align: center;
  padding: 60px 20px;
  background: var(--bg-elev);
  border: 1px dashed var(--border);
  border-radius: 14px;
}
.journal-empty-icon {
  font-size: 40px;
  margin-bottom: 10px;
}
.journal-empty-title {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--text);
  margin-bottom: 6px;
}
.journal-empty-sub {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
}
.journal-empty-sub code {
  background: var(--bg-elev-2);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11px;
  color: var(--accent);
}

/* ===== Invoices Page ===== */
.invoices-page-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Inbox banner */
.inv-inbox-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  border-left: 3px solid var(--text-muted);
}
.inv-inbox-banner.pending {
  border-left-color: var(--accent);
  background: linear-gradient(90deg, rgba(255,170,40,0.06) 0%, var(--bg-elev) 50%);
}
.inv-inbox-banner.failed-only {
  border-left-color: #ff6b8a;
}
.inv-inbox-icon {
  font-size: 24px;
  line-height: 1;
  margin-top: 2px;
}
.inv-inbox-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  color: var(--text-muted);
}
.inv-inbox-text strong {
  color: var(--text);
  font-size: 13px;
  letter-spacing: 0.05em;
}
.inv-inbox-text strong.failed-label {
  color: #ff6b8a;
  margin-top: 6px;
}
.inv-inbox-text code {
  font-family: ui-monospace, SF Mono, monospace;
  background: var(--bg-elev-2);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
  color: var(--accent);
}
.inv-inbox-files {
  margin: 4px 0 0;
  padding-left: 16px;
  font-size: 10px;
  list-style: '· ';
  color: var(--text-muted);
}
.inv-inbox-files li.more {
  color: var(--text-muted);
  font-style: italic;
}

/* Review pill on auto-parsed invoices */
.inv-row.needs-review {
  border-left-width: 4px;
  background: linear-gradient(90deg, rgba(255,170,40,0.04) 0%, var(--bg-elev-2) 100%);
}
.inv-review-pill {
  font-size: 9px;
  letter-spacing: 0.12em;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: #1a1a1a;
  border: none;
  cursor: pointer;
  font-weight: 700;
}
.inv-review-pill:hover {
  background: var(--green);
}
.inv-source {
  font-size: 9px;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.inv-header-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 24px;
}
.inv-quarter-nav {
  margin: 14px 0 18px;
}
.vat-box-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.vat-box {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 14px;
}
.vat-box.highlight {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--bg-elev-2) 0%, rgba(255,255,255,0.02) 100%);
}
.vat-box.highlight.owe { border-color: #ff6b8a; }
.vat-box.highlight.refund { border-color: var(--green); }
.vat-box-label {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.vat-box-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.vat-box.highlight.owe .vat-box-value { color: #ff6b8a; }
.vat-box.highlight.refund .vat-box-value { color: var(--green); }
.vat-box-sub {
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 4px;
  letter-spacing: 0.08em;
}

.inv-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 12px;
}
.inv-filter-nav {
  margin: 0;
  flex-wrap: wrap;
  gap: 6px;
}

.inv-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.inv-row {
  display: grid;
  grid-template-columns: 90px 1fr 120px 110px;
  align-items: start;
  gap: 14px;
  padding: 12px 14px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.inv-row.sales    { border-left: 3px solid var(--green); }
.inv-row.purchase { border-left: 3px solid #ff6b8a44; }
.inv-row.paid     { opacity: 0.7; }

.inv-date {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.inv-counterparty {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.inv-sub {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.inv-type-pill, .inv-vat-pill, .inv-ref, .inv-recurring {
  font-size: 9px;
  letter-spacing: 0.12em;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.inv-type-pill.sales { color: var(--green); border-color: var(--green); }
.inv-type-pill.purchase { color: #ff6b8a; border-color: #ff6b8a55; }
.inv-vat-pill { color: var(--accent); border-color: var(--accent); }
.inv-recurring { color: var(--accent); }

.inv-suggest {
  margin-top: 8px;
  padding: 8px;
  background: var(--bg-elev);
  border: 1px dashed var(--accent);
  border-radius: 8px;
  font-size: 11px;
}
.inv-suggest-label {
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  margin-right: 8px;
}
.inv-link-btn {
  display: inline-block;
  margin: 4px 4px 0 0;
  font-size: 10px;
}

.inv-linked {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.inv-linked-pill {
  font-size: 10px;
  padding: 3px 8px;
  background: var(--bg-elev);
  border: 1px solid var(--green);
  color: var(--green);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.inv-unlink {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 2px;
  font-size: 10px;
}
.inv-unlink:hover { color: #ff6b8a; }

.inv-amounts {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.inv-gross {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.inv-vat-amt {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  margin-top: 2px;
}

.inv-status-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.inv-status-badge {
  font-size: 9px;
  letter-spacing: 0.18em;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text-muted);
}
.inv-status-badge.paid {
  color: var(--green);
  border-color: var(--green);
}
.inv-status-badge.unpaid {
  color: var(--accent);
  border-color: var(--accent);
}

/* ===== Invoice Recon ===== */
.recon-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
}
.recon-summary-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--bg-elev);
}
.recon-summary-item.matched { border-color: var(--green); }
.recon-summary-item.needs   { border-color: #facc15; }
.recon-summary-item.na      { border-color: var(--border); }
.recon-summary-count {
  font-size: 26px;
  font-weight: 600;
}
.recon-summary-item.matched .recon-summary-count { color: var(--green); }
.recon-summary-item.needs .recon-summary-count   { color: #facc15; }
.recon-summary-item.na .recon-summary-count       { color: var(--text-muted); }
.recon-summary-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  margin-top: 4px;
}

.recon-table { margin-top: 14px; }
.recon-row {
  display: grid;
  grid-template-columns: 70px 1fr 110px 150px 1fr;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.recon-row.recon-head {
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-bright);
}
.recon-row:not(.recon-head):hover { background: var(--bg-elev); }
.recon-date { color: var(--text-dim); white-space: nowrap; }
.recon-desc { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recon-amt  { text-align: right; color: var(--text); }
.recon-match { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.recon-pill {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 0.14em;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  white-space: nowrap;
}
.recon-pill.matched { color: var(--green); border-color: var(--green); }
.recon-pill.needs   { color: #facc15; border-color: #facc15; }
.recon-pill.na      { color: var(--text-muted); border-color: var(--border); }
.recon-row.needs   { border-left: 3px solid #facc15; }
.recon-row.matched { border-left: 3px solid var(--green); }
.recon-row.na      { opacity: 0.6; }

.icon-btn-sm {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 22px;
  height: 22px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
}
.icon-btn-sm:hover {
  color: #ff6b8a;
  border-color: #ff6b8a;
}

/* Templates */
.tpl-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tpl-row {
  display: grid;
  grid-template-columns: 1fr 1fr 140px 28px;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.tpl-row.inactive { opacity: 0.5; }
.tpl-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.tpl-cadence {
  display: block;
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0.12em;
  margin-top: 3px;
}
.tpl-cp {
  font-size: 12px;
  color: var(--text-muted);
}
.tpl-amount {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.tpl-vat-pill {
  display: inline-block;
  margin-left: 6px;
  font-size: 9px;
  letter-spacing: 0.1em;
  padding: 2px 5px;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 3px;
  font-weight: 400;
}

.inv-workflow {
  margin: 8px 0 0;
  padding-left: 20px;
  font-size: 12px;
  color: var(--text);
  line-height: 1.7;
}
.inv-workflow li {
  margin-bottom: 4px;
}

@media (max-width: 900px) {
  .vat-box-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 720px) {
  .inv-row {
    grid-template-columns: 80px 1fr;
    grid-template-rows: auto auto;
  }
  .inv-amounts, .inv-status-col {
    grid-column: 1 / -1;
    text-align: left;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .inv-filters {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .tx-row {
    grid-template-columns: 50px 1fr 90px;
    grid-template-rows: auto auto;
  }
  .tx-cat-wrap {
    grid-column: 1 / -1;
  }
  .tx-summary-row {
    grid-template-columns: 1fr;
  }
}

.finance-header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
.finance-title {
  font-size: 18px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--text);
}
.finance-subtitle {
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  margin-top: 4px;
}
.finance-page-actions {
  display: flex;
  gap: 6px;
}

.finance-filter-nav {
  margin-bottom: 16px;
}
.char-pill.finance-filter.active {
  background: var(--bg-elev-2);
  color: var(--green);
  border-color: var(--green);
}
.char-pill.finance-filter.active[data-filter="business"] {
  border-color: var(--accent);
  color: var(--accent);
}
.char-pill.finance-filter.active[data-filter="personal"] {
  border-color: var(--cyan);
  color: var(--cyan);
}
.finance-filter-count {
  font-size: 9px;
  margin-left: 4px;
  opacity: 0.7;
}

/* Summary row — 3 totals */
.finance-summary-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 16px 0 4px;
  border-top: 1px dashed var(--border);
}
.finance-summary-item {
  text-align: center;
}
.finance-summary-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-muted);
}
.finance-summary-value {
  font-size: 26px;
  font-weight: 700;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.finance-summary-value.business { color: var(--accent); }
.finance-summary-value.personal { color: var(--cyan); }

/* Account rows */
.finance-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.finance-row {
  display: grid;
  grid-template-columns: 80px 1fr auto auto auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.finance-row.archived {
  opacity: 0.6;
}
.finance-archive-btn,
.finance-restore-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  cursor: pointer;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.15s;
}
.finance-archive-btn:hover {
  color: var(--red);
  border-color: var(--red);
}
.finance-restore-btn:hover {
  color: var(--green);
  border-color: var(--green);
}
.finance-archived-label {
  font-size: 9px;
  letter-spacing: 0.15em;
  font-weight: 700;
  color: var(--text-muted);
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px dashed var(--text-muted);
}
.finance-archived-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 24px;
}
.finance-row-name-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.finance-row-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.finance-account-pots {
  font-size: 10px;
  color: var(--text-muted);
}
.finance-entity-pill {
  font-size: 9px;
  letter-spacing: 0.15em;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.finance-entity-pill.business {
  color: var(--accent);
  border-color: var(--accent-dim);
}
.finance-entity-pill.business:hover { background: rgba(245, 179, 71, 0.1); }
.finance-entity-pill.personal {
  color: var(--cyan);
  border-color: var(--border-bright);
}
.finance-entity-pill.personal:hover { background: rgba(127, 219, 255, 0.08); }
.finance-row-balance {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  text-align: right;
}

/* Snapshot history */
.finance-snapshots {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}
.finance-snap-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
}
.finance-snap-date {
  color: var(--text-dim);
  letter-spacing: 0.05em;
}
.finance-snap-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.finance-snapshots-empty {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  padding: 10px;
}

.finance-coming-soon ul {
  margin: 8px 0 0;
  padding-left: 20px;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.7;
}

.streak-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  min-width: 0;
}

.streak-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.streak-card-title-wrap {
  flex: 1;
}
.streak-glyph {
  font-size: 18px;
  margin-right: 4px;
}
.streak-card-title {
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--text);
  font-weight: 600;
  line-height: 1.45;
  word-break: break-word;
}
.streak-card-sub {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  margin-top: 4px;
}

.streak-figure {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  padding: 16px 0;
}
.streak-number {
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
  color: var(--purple);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.streak-unit {
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--text-dim);
  font-weight: 500;
  text-transform: uppercase;
}

.streak-mark-row {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.streak-mark-btn {
  background: var(--purple);
  color: #1a0f2e;
  border: 1px solid var(--purple);
  border-radius: 999px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 10px 18px;
  cursor: pointer;
  transition: all 0.15s;
  max-width: 100%;
  white-space: normal;
  text-align: center;
  line-height: 1.3;
}
.streak-mark-btn:hover {
  background: #c4b5fd;
  border-color: #c4b5fd;
}
.streak-mark-btn.marked {
  background: transparent;
  color: var(--purple);
  border-color: var(--purple);
}
.streak-mark-btn.marked:hover {
  background: rgba(167, 139, 250, 0.1);
}

.streak-history-row {
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}
.streak-history-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.streak-dots {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.streak-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

.streak-card.theme-sober .streak-glyph { color: #6cb8ff; }
.streak-card.theme-sober .streak-dot.on {
  background: #6cb8ff;
  border-color: #6cb8ff;
}
.streak-card.theme-sober .streak-mark-btn.marked {
  background: #6cb8ff;
  border-color: #6cb8ff;
}
.streak-card.theme-sober .streak-number {
  color: #6cb8ff;
}

.streak-card.theme-clean .streak-glyph { color: var(--green); }
.streak-card.theme-clean .streak-dot.on {
  background: var(--green);
  border-color: var(--green);
}
.streak-card.theme-clean .streak-mark-btn.marked {
  background: var(--green);
  border-color: var(--green);
}
.streak-card.theme-clean .streak-number {
  color: var(--green);
}

.streak-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg);
  position: relative;
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s, border-color 0.15s;
}
.streak-dot:hover {
  transform: scale(1.25);
  border-color: var(--accent);
}
.streak-dot.on:hover {
  filter: brightness(1.15);
}
.streak-dot.on {
  background: var(--purple);
  border-color: var(--purple);
}
.streak-dot.today {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.streak-dot[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 10px;
  color: var(--text);
  white-space: nowrap;
  z-index: 5;
}

.streak-stats-row {
  display: flex;
  justify-content: space-around;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}
.streak-stat {
  text-align: center;
}
.streak-stat-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-muted);
}
.streak-stat-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin-top: 4px;
}

/* Knowledge page (top-level) */
.knowledge-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.knowledge-toolbar .char-nav { margin-bottom: 0; }

.char-pill.knowledge-filter.active[data-kfilter="all"] {
  border-color: var(--accent);
  color: var(--accent);
}

/* Subject-filter pill row (auto-generated from Research/ folders) */
.subject-nav {
  margin-top: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.subject-nav:empty { display: none; }

.char-pill.subject-filter {
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: none;
  font-size: 12px;
}
.char-pill.subject-filter[data-subject="all"] {
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 11px;
}
.char-pill.subject-filter.active {
  border-color: var(--cyan);
  color: var(--cyan);
  background: var(--bg-elev-2);
}
.char-pill.subject-filter.active[data-subject="all"] {
  border-color: var(--accent);
  color: var(--accent);
}
.subject-pill-count {
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  margin-left: 4px;
}
.char-pill.subject-filter.active .subject-pill-count {
  border-color: currentColor;
  color: currentColor;
  opacity: 0.85;
}
.char-pill.subject-filter .folder-glyph {
  font-size: 13px;
  margin-right: 2px;
}

.knowledge-page-content {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  padding: 28px;
}
.knowledge-page-content .knowledge-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.knowledge-group {
  margin-bottom: 36px;
}
.knowledge-group:last-child { margin-bottom: 0; }

.knowledge-group-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.knowledge-group-title .folder-glyph {
  font-size: 14px;
  filter: grayscale(0.3);
}
.knowledge-group-count {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  margin-left: auto;
}

.knowledge-card-char {
  font-size: 9px;
  letter-spacing: 0.2em;
  border: 1px solid;
  padding: 2px 6px;
  border-radius: 999px;
}
.knowledge-card-char.wizard      { color: var(--purple); border-color: var(--purple); }
.knowledge-card-char.businessman { color: var(--green);  border-color: var(--green); }
.knowledge-card-char.warrior     { color: var(--red);    border-color: var(--red); }
.knowledge-card-char.unassigned  { color: var(--text-muted); border-color: var(--border); }

/* Knowledge / Grimoire */
.knowledge-section { padding: 24px 0; border-bottom: 1px solid var(--border); }
.section-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.section-title-row .section-title { margin-bottom: 0; }

.knowledge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.knowledge-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.knowledge-card:hover {
  border-color: var(--purple);
  background: var(--bg-elev-2);
}
.knowledge-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.knowledge-type {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--purple);
  border: 1px solid var(--purple);
  padding: 2px 6px;
  border-radius: 999px;
}
.knowledge-title {
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
  line-height: 1.4;
}
.knowledge-source {
  font-size: 11px;
  color: var(--text-dim);
}
/* ===== Knowledge cards — takeaway-first layout ===== */

/* Takeaway list is now the dominant content; no box wrapper */
.knowledge-takeaways-list {
  margin: 6px 0 4px;
  padding: 0;
  list-style: none;
  counter-reset: ta;
}
.knowledge-takeaways-list li {
  counter-increment: ta;
  position: relative;
  padding-left: 24px;
  margin: 10px 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}
.knowledge-takeaways-list li::before {
  content: counter(ta);
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  border: 1px solid var(--purple);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  color: var(--purple);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(167, 139, 250, 0.08);
}
.knowledge-takeaways-empty-msg {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  padding: 8px 0;
}

/* Header row */
.knowledge-card-head {
  flex-wrap: wrap;
}
.knowledge-card-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}
.knowledge-copy {
  font-size: 11px;
}
.knowledge-subject-tag {
  font-size: 10px;
  letter-spacing: 0.15em;
  font-weight: 600;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent-dim);
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
}

/* Footer — muted attribution; click target for opening the viewer */
.knowledge-card-foot {
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px dashed var(--border);
  cursor: pointer;
  transition: color 0.15s;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.knowledge-card-foot:hover .knowledge-foot-title {
  color: var(--text);
}
.knowledge-foot-title {
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  font-weight: 500;
  font-style: italic;
}
.knowledge-foot-source {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Toolbar layout — add the action group on the right */
.knowledge-toolbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.knowledge-toolbar #kn-copy-all {
  font-size: 11px;
  padding: 10px 16px;
}

/* Global toast (used by Copy actions) */
.global-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-elev-2);
  border: 1px solid var(--purple);
  color: var(--text);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.1em;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.global-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.knowledge-foot {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  word-break: break-all;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}
.knowledge-remove {
  width: 20px;
  height: 20px;
  font-size: 10px;
}

/* Knowledge viewer dialog */
.viewer-dialog {
  width: min(820px, 94vw);
  max-height: 92vh;
  padding: 0;
  flex-direction: column;
}
.viewer-dialog:not([open]) { display: none; }
.viewer-dialog[open] {
  display: flex;
}
.viewer-header {
  align-items: flex-start;
}
.viewer-header h2 {
  font-size: 14px;
  letter-spacing: 0.15em;
  color: var(--purple);
  margin: 0;
  word-break: break-word;
}
.viewer-sub {
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  margin-top: 4px;
  word-break: break-all;
}
.viewer-body {
  padding: 28px 32px 32px;
  overflow-y: auto;
  flex: 1;
}
.viewer-loading, .viewer-error {
  padding: 40px;
  text-align: center;
  color: var(--text-dim);
}
.viewer-error { color: var(--red); }

/* Markdown body styles */
.markdown-body {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
}
.markdown-body h1 { font-size: 20px; letter-spacing: 0.05em; color: var(--text); margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.markdown-body h2 { font-size: 15px; letter-spacing: 0.12em; color: var(--accent); margin: 28px 0 12px; text-transform: uppercase; }
.markdown-body h3 { font-size: 13px; letter-spacing: 0.1em; color: var(--cyan); margin: 22px 0 10px; }
.markdown-body h4 { font-size: 12px; letter-spacing: 0.1em; color: var(--text-dim); margin: 18px 0 8px; }
.markdown-body p { margin: 10px 0; color: var(--text); }
.markdown-body strong { color: var(--text); font-weight: 700; }
.markdown-body em { color: var(--text-dim); font-style: italic; }
.markdown-body a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.markdown-body a:hover { color: var(--accent); }
.markdown-body code {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 12px;
  color: var(--accent);
}
.markdown-body pre {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  overflow-x: auto;
  margin: 14px 0;
}
.markdown-body pre code {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 12px;
  color: var(--text-dim);
  white-space: pre;
}
.markdown-body blockquote {
  border-left: 3px solid var(--purple);
  padding: 8px 18px;
  margin: 16px 0;
  color: var(--text-dim);
  font-style: italic;
  background: rgba(167, 139, 250, 0.06);
  border-radius: 0 8px 8px 0;
}
.markdown-body ul, .markdown-body ol {
  margin: 10px 0;
  padding-left: 22px;
  color: var(--text);
}
.markdown-body li { margin: 4px 0; }
.markdown-body hr { border: none; border-top: 1px dashed var(--border); margin: 24px 0; }
.markdown-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  font-size: 12px;
}
.markdown-body th, .markdown-body td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.markdown-body th {
  color: var(--text-dim);
  font-weight: 600;
  letter-spacing: 0.1em;
  font-size: 11px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-bright);
}
.markdown-body td { color: var(--text); }

/* Rank ladder */
.rank-section { padding-top: 24px; }
.rank-section-title {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--text-dim);
  margin-bottom: 16px;
}
.rank-ladder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.rank-node {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  position: relative;
  background: var(--bg);
  transition: all 0.15s;
}
.rank-node.unlocked {
  border-color: var(--border-bright);
  background: var(--bg-elev-2);
}
.rank-node.unlocked.wizard      { border-color: var(--purple); }
.rank-node.unlocked.businessman { border-color: var(--green); }
.rank-node.unlocked.warrior     { border-color: var(--red); }

.rank-lvl {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--text-muted);
}
.rank-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  margin-top: 4px;
}
.rank-node.unlocked .rank-name { color: var(--text); }
.rank-check {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 12px;
  color: var(--text-muted);
}
.rank-node.unlocked .rank-check { color: var(--green); }

/* Char badge on mission cards */
.tag.char-wizard      { color: var(--purple); border-color: var(--purple); }
.tag.char-businessman { color: var(--green);  border-color: var(--green); }
.tag.char-warrior     { color: var(--red);    border-color: var(--red); }

/* ===== MOBILE ===== */
@media (max-width: 720px) {
  .hud { flex-direction: column; align-items: flex-start; gap: 16px; padding: 16px 20px; }
  .hud-right { width: 100%; justify-content: space-between; gap: 8px; }
  .stat { padding-left: 12px; }
  main { padding: 20px 16px; }
  .field-row { flex-direction: column; gap: 0; }
  .page-nav { padding: 16px 16px 0; flex-wrap: wrap; }
  .char-content { padding: 20px; }
  .char-header { flex-direction: column; text-align: center; align-items: center; gap: 12px; }
  .char-level-block { text-align: center; }
}

/* ===== IDEAS / NOTEBOOK ===== */
.ideas-page-content { max-width: 1100px; margin: 0 auto; }

.idea-compose {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 20px;
  margin-bottom: 24px;
}
.idea-title-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 2px 0 10px;
}
.idea-title-input::placeholder { color: var(--text-muted); }
.idea-body-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  padding: 12px 14px;
  outline: none;
  resize: vertical;
  min-height: 92px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.idea-body-input::placeholder { color: var(--text-muted); }
.idea-body-input:focus {
  border-color: var(--accent);
  background: var(--bg-elev);
  box-shadow: 0 0 0 3px rgba(91,140,255,0.15);
}
.idea-compose-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.idea-char-input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 9px 14px;
  outline: none;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.idea-char-input:focus { border-color: var(--accent); color: var(--text); }

.idea-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.idea-filter-pill {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  padding: 7px 15px;
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.idea-filter-pill:hover { color: var(--text); border-color: var(--border-bright); }
.idea-filter-pill.active {
  color: var(--accent);
  border-color: transparent;
  background: rgba(91,140,255,0.14);
  box-shadow: inset 0 0 0 1px rgba(91,140,255,0.28);
}

.idea-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.idea-card {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.idea-card:hover {
  border-color: var(--border-bright);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card), 0 0 30px rgba(91,140,255,0.10);
}
.idea-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.idea-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  word-break: break-word;
}
.idea-card-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-items: center;
}
.idea-body {
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
.idea-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}
.idea-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  color: var(--text-dim);
}
.idea-tag--wizard      { color: var(--c-wizard);      border-color: color-mix(in srgb, var(--c-wizard) 45%, transparent); }
.idea-tag--businessman { color: var(--c-businessman); border-color: color-mix(in srgb, var(--c-businessman) 45%, transparent); }
.idea-tag--warrior     { color: var(--c-warrior);     border-color: color-mix(in srgb, var(--c-warrior) 45%, transparent); }
.idea-tag--producer    { color: var(--c-producer);    border-color: color-mix(in srgb, var(--c-producer) 45%, transparent); }
.idea-tag--unfiled     { color: var(--text-muted); }
.idea-date {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.idea-empty {
  text-align: center;
  padding: 72px 24px;
  color: var(--text-muted);
}
.idea-empty-glyph { font-size: 34px; color: var(--accent); opacity: 0.7; }
.idea-empty-title {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--text-dim);
}
.idea-empty-sub { margin-top: 8px; font-size: 13px; color: var(--text-muted); }

/* ============================================================= */
/* Auth: login page + sign-out control (cloud build)             */
/* ============================================================= */
.logout-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--border-bright);
  border-radius: var(--r-pill);
  padding: 5px 12px;
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background var(--dur) var(--ease);
  min-height: 28px;
}
.logout-btn:hover {
  color: var(--text);
  border-color: var(--accent);
  background: rgba(91, 140, 255, 0.08);
}

.login-body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(91,140,255,0.10), transparent 60%),
    var(--bg);
  padding: 24px;
}
.login-shell {
  width: 100%;
  max-width: 420px;
}
.login-card {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 40px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.login-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--text);
}
.login-logo .logo-bracket { color: var(--accent); }
.login-tagline {
  margin: -6px 0 6px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--text-muted);
}
.login-card .field { display: flex; flex-direction: column; gap: 6px; }
.login-card .field-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--text-dim);
}
.login-card input {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-elev);
  border: 1px solid var(--border-bright);
  border-radius: var(--r-md);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px; /* >=16px avoids iOS zoom-on-focus */
  padding: 12px 14px;
  min-height: 46px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.login-card input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(91,140,255,0.18);
}
.login-submit {
  margin-top: 6px;
  width: 100%;
  min-height: 48px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  letter-spacing: 0.16em;
}
.login-submit:disabled { opacity: 0.6; cursor: default; }
.login-error {
  background: rgba(255, 93, 108, 0.10);
  border: 1px solid rgba(255, 93, 108, 0.35);
  color: var(--red);
  border-radius: var(--r-md);
  padding: 10px 12px;
  font-size: 13px;
  text-align: center;
}

/* ============================================================= */
/* Mobile-responsive pass — first-class phone support (cloud)    */
/* Extends the existing 720px/900px rules; does not rename any    */
/* class/id. Targets clean, overflow-free layout at 375px.       */
/* ============================================================= */
@media (max-width: 768px) {
  html, body { max-width: 100%; overflow-x: hidden; }

  .hud { padding: 12px 16px; gap: 8px; }
  .hud-right { gap: 14px; }

  main { padding: 18px 14px; }

  /* Page nav becomes a horizontal scroll strip (no wrapping mess) */
  .page-nav {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 16px 14px 0;
    margin: 0;
    max-width: 100%;
  }
  .page-nav::-webkit-scrollbar { display: none; }
  .nav-pill { flex: 0 0 auto; }

  /* Collapse the widest dashboard grids to a single column */
  .dashboard-content { grid-template-columns: 1fr; }
  .recent-knowledge-list { grid-template-columns: 1fr; }

  /* Dialogs: near-full-width sheet */
  .dialog {
    width: calc(100vw - 24px);
    max-width: 560px;
    margin: 0;
  }
  .field-row { flex-direction: column; }

  /* Comfortable tap targets (>=44px) */
  .btn-primary, .btn-ghost, .nav-pill, .char-pill, .logout-btn,
  .tab, .subject-pill { min-height: 44px; }
}

@media (max-width: 480px) {
  main { padding: 14px 12px; }

  .hud { flex-direction: column; align-items: flex-start; }
  .hud-right { width: 100%; justify-content: space-between; gap: 8px; }
  .stat-value { font-size: 20px; }

  /* Force a single column on every card grid */
  .mission-grid, .idea-grid, .knowledge-grid,
  .knowledge-page-content .knowledge-grid, .dashboard-content {
    grid-template-columns: 1fr;
  }

  .dialog { width: calc(100vw - 16px); }

  /* Keep long HUD strings from forcing horizontal scroll */
  .callsign, .data-mode { max-width: 100%; }
}