:root {
  --bg: #f6f1e8;
  --bg-strong: #efe5d5;
  --panel: rgba(255, 252, 246, 0.9);
  --panel-strong: #f9f5ed;
  --ink: #1d1912;
  --muted: #6c6559;
  --line: rgba(54, 43, 28, 0.12);
  --blue: #4a87d7;
  --blue-soft: rgba(74, 135, 215, 0.12);
  --green: #6a9e59;
  --green-soft: rgba(106, 158, 89, 0.14);
  --amber: #d18e34;
  --amber-soft: rgba(209, 142, 52, 0.12);
  --rose: #ba6152;
  --rose-soft: rgba(186, 97, 82, 0.12);
  --shadow: 0 24px 60px rgba(60, 45, 18, 0.08);
  --radius: 22px;
}

body[data-theme="financial-editorial"] {
  --bg: #f5f1e8;
  --bg-strong: #e8dfcf;
  --panel: rgba(255, 250, 242, 0.92);
  --panel-strong: #fffaf2;
  --ink: #1b1d1f;
  --muted: #62605a;
  --line: rgba(40, 36, 28, 0.12);
  --blue: #476c9b;
  --blue-soft: rgba(71, 108, 155, 0.12);
  --green: #295c4a;
  --green-soft: rgba(41, 92, 74, 0.14);
  --amber: #c58a2f;
  --amber-soft: rgba(197, 138, 47, 0.14);
  --rose: #9b554a;
  --rose-soft: rgba(155, 85, 74, 0.14);
}

body[data-theme="trading-desk"] {
  --bg: #eef1f4;
  --bg-strong: #dde4ea;
  --panel: rgba(255, 255, 255, 0.94);
  --panel-strong: #ffffff;
  --ink: #111418;
  --muted: #5e6772;
  --line: rgba(27, 36, 48, 0.12);
  --blue: #2d6cdf;
  --blue-soft: rgba(45, 108, 223, 0.12);
  --green: #1f8a5b;
  --green-soft: rgba(31, 138, 91, 0.14);
  --amber: #d97706;
  --amber-soft: rgba(217, 119, 6, 0.14);
  --rose: #c25442;
  --rose-soft: rgba(194, 84, 66, 0.14);
}

body[data-theme="sand-copper"] {
  --bg: #f3eadb;
  --bg-strong: #eadcc6;
  --panel: rgba(255, 248, 238, 0.92);
  --panel-strong: #fff8ee;
  --ink: #2a2118;
  --muted: #746556;
  --line: rgba(64, 48, 31, 0.12);
  --blue: #4b7a78;
  --blue-soft: rgba(75, 122, 120, 0.12);
  --green: #6f7f43;
  --green-soft: rgba(111, 127, 67, 0.14);
  --amber: #b96f3b;
  --amber-soft: rgba(185, 111, 59, 0.14);
  --rose: #a65f4b;
  --rose-soft: rgba(166, 95, 75, 0.14);
}

body[data-theme="blackstone-light"] {
  --bg: #f7f8fa;
  --bg-strong: #e8ecf1;
  --panel: rgba(255, 255, 255, 0.96);
  --panel-strong: #ffffff;
  --ink: #0f1115;
  --muted: #636b75;
  --line: rgba(22, 28, 37, 0.12);
  --blue: #2457ff;
  --blue-soft: rgba(36, 87, 255, 0.12);
  --green: #6ca300;
  --green-soft: rgba(108, 163, 0, 0.14);
  --amber: #d37a12;
  --amber-soft: rgba(211, 122, 18, 0.14);
  --rose: #b4493f;
  --rose-soft: rgba(180, 73, 63, 0.14);
}

body[data-theme="navy-brass"] {
  --bg: #f4efe6;
  --bg-strong: #e8dfcf;
  --panel: rgba(255, 250, 244, 0.94);
  --panel-strong: #fffaf4;
  --ink: #1e2a39;
  --muted: #5f6871;
  --line: rgba(32, 44, 61, 0.12);
  --blue: #274c77;
  --blue-soft: rgba(39, 76, 119, 0.12);
  --green: #6e8b68;
  --green-soft: rgba(110, 139, 104, 0.14);
  --amber: #b8912f;
  --amber-soft: rgba(184, 145, 47, 0.14);
  --rose: #a05b49;
  --rose-soft: rgba(160, 91, 73, 0.14);
}

body[data-theme="pantone-cloud-ink"] {
  --bg: #e9ecef;
  --bg-strong: #dfe4e8;
  --panel: rgba(248, 249, 250, 0.94);
  --panel-strong: #fdfdfc;
  --ink: #17222f;
  --muted: #5e6976;
  --line: rgba(23, 34, 47, 0.12);
  --blue: #3e73c8;
  --blue-soft: rgba(62, 115, 200, 0.14);
  --green: #5d8d68;
  --green-soft: rgba(93, 141, 104, 0.14);
  --amber: #c69a45;
  --amber-soft: rgba(198, 154, 69, 0.14);
  --rose: #9d665d;
  --rose-soft: rgba(157, 102, 93, 0.14);
}

body[data-theme="pantone-cloud-oxblood"] {
  --bg: #efe7e4;
  --bg-strong: #e4d8d3;
  --panel: rgba(252, 248, 246, 0.94);
  --panel-strong: #fffaf8;
  --ink: #2c1f25;
  --muted: #6e5c63;
  --line: rgba(44, 31, 37, 0.12);
  --blue: #6d8fc8;
  --blue-soft: rgba(109, 143, 200, 0.14);
  --green: #7c9774;
  --green-soft: rgba(124, 151, 116, 0.14);
  --amber: #c09454;
  --amber-soft: rgba(192, 148, 84, 0.14);
  --rose: #8e4149;
  --rose-soft: rgba(142, 65, 73, 0.16);
}

body[data-theme="pantone-cloud-afterhours"] {
  --bg: #e6ece8;
  --bg-strong: #d7e1db;
  --panel: rgba(248, 251, 249, 0.94);
  --panel-strong: #fcfefd;
  --ink: #163128;
  --muted: #61796e;
  --line: rgba(22, 49, 40, 0.12);
  --blue: #4a8fb8;
  --blue-soft: rgba(74, 143, 184, 0.14);
  --green: #4f8c6a;
  --green-soft: rgba(79, 140, 106, 0.16);
  --amber: #c2a04c;
  --amber-soft: rgba(194, 160, 76, 0.14);
  --rose: #a7675e;
  --rose-soft: rgba(167, 103, 94, 0.14);
}

body[data-theme="pantone-mocha-mousse"] {
  --bg: #efe6df;
  --bg-strong: #e5d7cc;
  --panel: rgba(253, 248, 244, 0.94);
  --panel-strong: #fffaf6;
  --ink: #34261f;
  --muted: #766459;
  --line: rgba(52, 38, 31, 0.12);
  --blue: #6d8bb6;
  --blue-soft: rgba(109, 139, 182, 0.14);
  --green: #7b9271;
  --green-soft: rgba(123, 146, 113, 0.14);
  --amber: #b68457;
  --amber-soft: rgba(182, 132, 87, 0.16);
  --rose: #9a6557;
  --rose-soft: rgba(154, 101, 87, 0.14);
}

body[data-theme="pantone-mind-bend"] {
  --bg: #16151f;
  --bg-strong: #221f30;
  --panel: rgba(31, 29, 45, 0.9);
  --panel-strong: #2c2942;
  --ink: #f5f2ff;
  --muted: #b8afcf;
  --line: rgba(236, 226, 255, 0.1);
  --blue: #7d8dff;
  --blue-soft: rgba(125, 141, 255, 0.16);
  --green: #7ad0a7;
  --green-soft: rgba(122, 208, 167, 0.14);
  --amber: #ffb86c;
  --amber-soft: rgba(255, 184, 108, 0.14);
  --rose: #d36ef0;
  --rose-soft: rgba(211, 110, 240, 0.18);
  --shadow: 0 26px 64px rgba(8, 5, 16, 0.52);
}

body[data-theme="pantone-aurora-glow"] {
  --bg: #101821;
  --bg-strong: #15212c;
  --panel: rgba(23, 34, 45, 0.9);
  --panel-strong: #1a2935;
  --ink: #f5fbff;
  --muted: #a7b7c4;
  --line: rgba(227, 242, 255, 0.1);
  --blue: #5dc3ff;
  --blue-soft: rgba(93, 195, 255, 0.16);
  --green: #6ce3b4;
  --green-soft: rgba(108, 227, 180, 0.15);
  --amber: #ffd166;
  --amber-soft: rgba(255, 209, 102, 0.14);
  --rose: #ff7fb7;
  --rose-soft: rgba(255, 127, 183, 0.16);
  --shadow: 0 26px 64px rgba(3, 9, 15, 0.5);
}

body[data-theme="obsidian-mystery"] {
  --bg: #0d0d11;
  --bg-strong: #15151c;
  --panel: rgba(20, 20, 28, 0.92);
  --panel-strong: #1b1b24;
  --ink: #f7f5f1;
  --muted: #aaa7b3;
  --line: rgba(240, 238, 233, 0.1);
  --blue: #8da4ff;
  --blue-soft: rgba(141, 164, 255, 0.14);
  --green: #86b88e;
  --green-soft: rgba(134, 184, 142, 0.12);
  --amber: #d3ad6d;
  --amber-soft: rgba(211, 173, 109, 0.12);
  --rose: #8d5f74;
  --rose-soft: rgba(141, 95, 116, 0.16);
  --shadow: 0 28px 70px rgba(2, 2, 6, 0.56);
}

body[data-theme="atelier-minimal"] {
  --bg: #f5f3ee;
  --bg-strong: #ece8e0;
  --panel: rgba(255, 255, 252, 0.95);
  --panel-strong: #fffefa;
  --ink: #191919;
  --muted: #6e6a63;
  --line: rgba(25, 25, 25, 0.1);
  --blue: #4d6580;
  --blue-soft: rgba(77, 101, 128, 0.12);
  --green: #6f8671;
  --green-soft: rgba(111, 134, 113, 0.12);
  --amber: #aa8653;
  --amber-soft: rgba(170, 134, 83, 0.12);
  --rose: #8a6d69;
  --rose-soft: rgba(138, 109, 105, 0.12);
}

body[data-theme="acid-cabaret"] {
  --bg: #120f1a;
  --bg-strong: #1d1728;
  --panel: rgba(31, 21, 44, 0.92);
  --panel-strong: #291d39;
  --ink: #f8f6ff;
  --muted: #beb2d7;
  --line: rgba(245, 236, 255, 0.1);
  --blue: #55d4ff;
  --blue-soft: rgba(85, 212, 255, 0.18);
  --green: #c7ff49;
  --green-soft: rgba(199, 255, 73, 0.16);
  --amber: #ffb347;
  --amber-soft: rgba(255, 179, 71, 0.16);
  --rose: #ff4fd8;
  --rose-soft: rgba(255, 79, 216, 0.18);
  --shadow: 0 30px 80px rgba(6, 0, 14, 0.6);
}

body[data-theme="midnight-terminal"] {
  --bg: #0f1318;
  --bg-strong: #171d25;
  --panel: rgba(24, 31, 40, 0.9);
  --panel-strong: #1a222c;
  --ink: #eef4ff;
  --muted: #9aa7b6;
  --line: rgba(193, 214, 255, 0.12);
  --blue: #59a8ff;
  --blue-soft: rgba(89, 168, 255, 0.16);
  --green: #45d483;
  --green-soft: rgba(69, 212, 131, 0.16);
  --amber: #f0b24b;
  --amber-soft: rgba(240, 178, 75, 0.16);
  --rose: #ee6d62;
  --rose-soft: rgba(238, 109, 98, 0.16);
  --shadow: 0 24px 60px rgba(2, 6, 13, 0.45);
}

body[data-theme="oxblood-noir"] {
  --bg: #181112;
  --bg-strong: #231819;
  --panel: rgba(34, 24, 25, 0.9);
  --panel-strong: #2a1d1e;
  --ink: #f8eeeb;
  --muted: #bea9a2;
  --line: rgba(255, 225, 214, 0.11);
  --blue: #7da2ff;
  --blue-soft: rgba(125, 162, 255, 0.14);
  --green: #91b96e;
  --green-soft: rgba(145, 185, 110, 0.14);
  --amber: #d6a15e;
  --amber-soft: rgba(214, 161, 94, 0.14);
  --rose: #c45a56;
  --rose-soft: rgba(196, 90, 86, 0.18);
  --shadow: 0 24px 60px rgba(8, 3, 4, 0.5);
}

body[data-theme="emerald-afterhours"] {
  --bg: #0d1713;
  --bg-strong: #13201a;
  --panel: rgba(19, 31, 25, 0.9);
  --panel-strong: #18261f;
  --ink: #eff9f2;
  --muted: #a1b7aa;
  --line: rgba(206, 243, 219, 0.1);
  --blue: #59b6c9;
  --blue-soft: rgba(89, 182, 201, 0.14);
  --green: #4fc47e;
  --green-soft: rgba(79, 196, 126, 0.18);
  --amber: #d7b255;
  --amber-soft: rgba(215, 178, 85, 0.14);
  --rose: #d66f68;
  --rose-soft: rgba(214, 111, 104, 0.16);
  --shadow: 0 24px 60px rgba(3, 10, 7, 0.46);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Manrope", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, var(--green-soft), transparent 28%),
    radial-gradient(circle at top right, var(--blue-soft), transparent 24%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 68%, white 32%) 0%, var(--bg) 100%);
}

button,
input {
  font: inherit;
}

.page-shell {
  width: min(1440px, calc(100vw - 32px));
  margin: 24px auto 40px;
}

.hero {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 20px;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 32px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.68), rgba(255, 250, 240, 0.92)),
    var(--panel);
  box-shadow: var(--shadow);
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--green);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero h1 {
  margin: 0;
  max-width: 10ch;
  font-size: clamp(2.6rem, 4vw, 4.5rem);
  line-height: 0.96;
  letter-spacing: -0.05em;
}

.hero-text {
  max-width: 60ch;
  margin: 18px 0 0;
  color: var(--muted);
  line-height: 1.65;
  font-size: 1.02rem;
}

.hero-bottom {
  display: grid;
  justify-items: start;
  gap: 14px;
  margin-top: 22px;
}

.hero-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.theme-switcher {
  display: grid;
  gap: 10px;
}

.theme-switcher-label {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.theme-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.theme-button {
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.68);
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
}

.theme-button.active {
  background: var(--ink);
  color: #fffaf2;
  border-color: transparent;
}

.theme-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 40;
  min-height: 46px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(20, 20, 28, 0.88);
  color: #f7f5f1;
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  backdrop-filter: blur(12px);
}

.theme-drawer {
  position: fixed;
  right: 18px;
  bottom: 74px;
  z-index: 39;
  width: min(420px, calc(100vw - 28px));
  padding: 16px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    var(--panel-strong);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(16px);
}

.theme-drawer[hidden] {
  display: none;
}

.hero-chip {
  display: inline-flex;
  align-items: center;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.62);
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hero-chip-link {
  text-decoration: none;
}

.hero-chip-active {
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  border-color: color-mix(in srgb, var(--blue) 32%, var(--line));
}

.hero-rules {
  display: grid;
  gap: 14px;
  align-content: stretch;
}

.hero-summary .journal-summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hero-summary .journal-summary-card {
  min-height: 168px;
}

.rule-card,
.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 10px 24px rgba(60, 45, 18, 0.04);
}

.rule-card {
  display: grid;
  gap: 6px;
  align-content: center;
  padding: 22px;
}

.rule-label {
  color: var(--muted);
  font-size: 0.83rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.rule-card strong {
  font-size: 1.8rem;
  letter-spacing: -0.04em;
}

.rule-card span:last-child {
  color: var(--muted);
}

.dashboard {
  display: grid;
  gap: 24px;
  margin-top: 24px;
}

.controls,
.results {
  display: grid;
  gap: 20px;
}

.journal-story {
  display: grid;
  gap: 20px;
}

.journal-toolbar {
  display: grid;
  gap: 16px;
}

.journal-history-overview {
  display: grid;
}

.week-select-wrap {
  display: grid;
  gap: 8px;
}

.week-select-wrap span {
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.week-select-wrap select {
  min-width: 220px;
  min-height: 54px;
  padding: 0 48px 0 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.74)),
    var(--panel-strong);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 24px) calc(50% - 3px),
    calc(100% - 18px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.week-select-wrap select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--blue) 60%, white 18%);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--blue) 18%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.hero-week-select {
  min-width: 280px;
  justify-self: start;
}

.hero-week-select span {
  color: var(--muted);
}

.hero-week-select select {
  min-width: 280px;
}

.journal-history-charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.journal-summary,
.journal-hero,
.capital-flows,
.journal-split,
.journal-patterns,
.journal-days,
.journal-lessons,
.journal-future {
  display: grid;
  gap: 16px;
}

.journal-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.journal-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.journal-summary-card {
  padding: 20px;
  background: linear-gradient(180deg, rgba(74, 135, 215, 0.08), rgba(255, 255, 255, 0.84));
}

.journal-summary-card .journal-kicker {
  color: var(--blue);
}

.journal-card {
  padding: 20px;
}

.journal-card h3,
.journal-day-card h3,
.future-card h3 {
  margin: 0;
  letter-spacing: -0.04em;
}

.journal-card p,
.journal-day-card p,
.future-card p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.journal-kicker {
  color: var(--green);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 800;
}

.journal-value {
  display: block;
  margin-top: 8px;
  font-size: 2rem;
  letter-spacing: -0.05em;
}

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

.split-card {
  padding: 22px;
}

.split-card.good {
  background: linear-gradient(180deg, rgba(106, 158, 89, 0.14), rgba(255, 255, 255, 0.84));
}

.split-card.caution {
  background: linear-gradient(180deg, rgba(186, 97, 82, 0.14), rgba(255, 255, 255, 0.84));
}

.split-stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.split-stat {
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.48);
}

.split-stat span {
  display: block;
  color: var(--muted);
  font-size: 0.83rem;
}

.split-stat strong {
  display: block;
  margin-top: 6px;
  font-size: 1.15rem;
  letter-spacing: -0.03em;
}

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

.journal-day-card {
  padding: 20px;
}

.journal-day-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.journal-pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.58);
  font-size: 0.86rem;
}

.journal-list {
  display: grid;
  gap: 10px;
}

.journal-list-item {
  padding: 16px 18px;
}

.journal-list-item strong {
  display: block;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.future-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.capital-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.capital-card {
  padding: 20px;
}

.pattern-shell {
  display: grid;
  gap: 16px;
}

.pattern-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
}

.pattern-method-controls {
  display: grid;
  gap: 10px;
  justify-items: end;
}

.pattern-method-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.pattern-method-button {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel-strong) 82%, transparent);
  color: var(--ink);
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.pattern-method-button.active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 88%, white 10%), color-mix(in srgb, var(--blue) 74%, black 12%));
  color: #fffaf2;
  border-color: transparent;
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.pattern-header h3,
.pattern-chart-panel h3 {
  margin: 0;
  letter-spacing: -0.04em;
}

.pattern-header p,
.pattern-chart-panel p,
.pattern-summary-card p,
.pattern-note {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.pattern-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.pattern-summary-card {
  padding: 20px;
}

.pattern-summary-card .journal-kicker {
  color: var(--blue);
}

.pattern-summary-card .journal-value {
  font-size: 1.7rem;
}

.pattern-summary-card .pattern-subvalue {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.86rem;
  font-family: "IBM Plex Mono", monospace;
}

.pattern-empty-card,
.pattern-empty-state {
  padding: 20px;
  border-radius: 20px;
  border: 1px dashed var(--line);
  background: color-mix(in srgb, var(--panel-strong) 76%, transparent);
}

.pattern-empty-card .journal-value {
  font-size: 1.5rem;
}

.pattern-empty-state {
  display: grid;
  gap: 8px;
  align-content: center;
  min-height: 220px;
  color: var(--muted);
}

.pattern-empty-state strong {
  color: var(--ink);
  font-size: 1.05rem;
}

.pattern-chart-copy {
  margin-bottom: 14px;
}

.pattern-chart-panel {
  padding: 20px;
}

.pattern-chart-panel .bar-label {
  font-size: 0.78rem;
}

.pattern-note {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px dashed var(--line);
  background: color-mix(in srgb, var(--panel-strong) 70%, transparent);
  display: grid;
  gap: 4px;
}

.pattern-note strong {
  color: var(--ink);
}

.pattern-note-secondary {
  background: color-mix(in srgb, var(--panel-strong) 54%, transparent);
}

body[data-theme="obsidian-mystery"] .pattern-method-button,
body[data-theme="acid-cabaret"] .pattern-method-button,
body[data-theme="pantone-mind-bend"] .pattern-method-button,
body[data-theme="pantone-aurora-glow"] .pattern-method-button,
body[data-theme="midnight-terminal"] .pattern-method-button,
body[data-theme="oxblood-noir"] .pattern-method-button,
body[data-theme="emerald-afterhours"] .pattern-method-button {
  background: color-mix(in srgb, var(--panel-strong) 92%, rgba(255, 255, 255, 0.04));
  color: color-mix(in srgb, var(--ink) 96%, white 4%);
  border-color: rgba(255, 255, 255, 0.1);
}

body[data-theme="obsidian-mystery"] .pattern-method-button:hover,
body[data-theme="acid-cabaret"] .pattern-method-button:hover,
body[data-theme="pantone-mind-bend"] .pattern-method-button:hover,
body[data-theme="pantone-aurora-glow"] .pattern-method-button:hover,
body[data-theme="midnight-terminal"] .pattern-method-button:hover,
body[data-theme="oxblood-noir"] .pattern-method-button:hover,
body[data-theme="emerald-afterhours"] .pattern-method-button:hover {
  background: color-mix(in srgb, var(--panel-strong) 96%, rgba(255, 255, 255, 0.08));
}

body[data-theme="obsidian-mystery"] .pattern-method-button.active,
body[data-theme="acid-cabaret"] .pattern-method-button.active,
body[data-theme="pantone-mind-bend"] .pattern-method-button.active,
body[data-theme="pantone-aurora-glow"] .pattern-method-button.active,
body[data-theme="midnight-terminal"] .pattern-method-button.active,
body[data-theme="oxblood-noir"] .pattern-method-button.active,
body[data-theme="emerald-afterhours"] .pattern-method-button.active {
  color: #fbfcff;
}

body[data-theme="obsidian-mystery"] .pattern-empty-card,
body[data-theme="obsidian-mystery"] .pattern-empty-state,
body[data-theme="obsidian-mystery"] .pattern-note,
body[data-theme="obsidian-mystery"] .pattern-note-secondary,
body[data-theme="acid-cabaret"] .pattern-empty-card,
body[data-theme="acid-cabaret"] .pattern-empty-state,
body[data-theme="acid-cabaret"] .pattern-note,
body[data-theme="acid-cabaret"] .pattern-note-secondary,
body[data-theme="pantone-mind-bend"] .pattern-empty-card,
body[data-theme="pantone-mind-bend"] .pattern-empty-state,
body[data-theme="pantone-mind-bend"] .pattern-note,
body[data-theme="pantone-mind-bend"] .pattern-note-secondary,
body[data-theme="pantone-aurora-glow"] .pattern-empty-card,
body[data-theme="pantone-aurora-glow"] .pattern-empty-state,
body[data-theme="pantone-aurora-glow"] .pattern-note,
body[data-theme="pantone-aurora-glow"] .pattern-note-secondary,
body[data-theme="midnight-terminal"] .pattern-empty-card,
body[data-theme="midnight-terminal"] .pattern-empty-state,
body[data-theme="midnight-terminal"] .pattern-note,
body[data-theme="midnight-terminal"] .pattern-note-secondary,
body[data-theme="oxblood-noir"] .pattern-empty-card,
body[data-theme="oxblood-noir"] .pattern-empty-state,
body[data-theme="oxblood-noir"] .pattern-note,
body[data-theme="oxblood-noir"] .pattern-note-secondary,
body[data-theme="emerald-afterhours"] .pattern-empty-card,
body[data-theme="emerald-afterhours"] .pattern-empty-state,
body[data-theme="emerald-afterhours"] .pattern-note,
body[data-theme="emerald-afterhours"] .pattern-note-secondary {
  background: color-mix(in srgb, var(--panel-strong) 94%, rgba(255, 255, 255, 0.03));
  border-color: rgba(255, 255, 255, 0.1);
}

body[data-theme="obsidian-mystery"] .pattern-empty-state strong,
body[data-theme="acid-cabaret"] .pattern-empty-state strong,
body[data-theme="pantone-mind-bend"] .pattern-empty-state strong,
body[data-theme="pantone-aurora-glow"] .pattern-empty-state strong,
body[data-theme="midnight-terminal"] .pattern-empty-state strong,
body[data-theme="oxblood-noir"] .pattern-empty-state strong,
body[data-theme="emerald-afterhours"] .pattern-empty-state strong,
body[data-theme="obsidian-mystery"] .pattern-note strong,
body[data-theme="acid-cabaret"] .pattern-note strong,
body[data-theme="pantone-mind-bend"] .pattern-note strong,
body[data-theme="pantone-aurora-glow"] .pattern-note strong,
body[data-theme="midnight-terminal"] .pattern-note strong,
body[data-theme="oxblood-noir"] .pattern-note strong,
body[data-theme="emerald-afterhours"] .pattern-note strong {
  color: color-mix(in srgb, var(--ink) 96%, white 4%);
}

.capital-card h3 {
  margin: 0;
  letter-spacing: -0.04em;
}

.capital-card p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.capital-card .capital-value {
  display: block;
  margin-top: 10px;
  font-size: 1.9rem;
  letter-spacing: -0.05em;
}

.forecast-scenario-panel {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.scenario-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.scenario-button {
  min-height: 46px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel-strong) 82%, transparent);
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.scenario-button.active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 88%, white 12%), color-mix(in srgb, var(--blue) 72%, black 12%));
  color: #fffaf2;
  border-color: transparent;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 12px;
}

.chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.chart-legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.forecast-summary-grid .journal-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.forecast-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.compare-chart-panel canvas {
  width: 100%;
  height: auto;
  display: block;
}

.future-card {
  padding: 20px;
  min-height: 180px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.72), rgba(243, 235, 223, 0.82)),
    repeating-linear-gradient(
      135deg,
      rgba(74, 135, 215, 0.03),
      rgba(74, 135, 215, 0.03) 10px,
      rgba(106, 158, 89, 0.03) 10px,
      rgba(106, 158, 89, 0.03) 20px
    );
}

.future-card .placeholder-tag {
  display: inline-block;
  margin-top: 14px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(29, 25, 18, 0.06);
  color: var(--muted);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

body[data-theme="obsidian-mystery"] .hero,
body[data-theme="acid-cabaret"] .hero,
body[data-theme="pantone-mind-bend"] .hero,
body[data-theme="pantone-aurora-glow"] .hero,
body[data-theme="midnight-terminal"] .hero,
body[data-theme="oxblood-noir"] .hero,
body[data-theme="emerald-afterhours"] .hero {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.08)),
    var(--panel);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow);
}

body[data-theme="obsidian-mystery"] .panel,
body[data-theme="obsidian-mystery"] .rule-card,
body[data-theme="acid-cabaret"] .panel,
body[data-theme="acid-cabaret"] .rule-card,
body[data-theme="pantone-mind-bend"] .panel,
body[data-theme="pantone-mind-bend"] .rule-card,
body[data-theme="pantone-aurora-glow"] .panel,
body[data-theme="pantone-aurora-glow"] .rule-card,
body[data-theme="midnight-terminal"] .panel,
body[data-theme="midnight-terminal"] .rule-card,
body[data-theme="oxblood-noir"] .panel,
body[data-theme="oxblood-noir"] .rule-card,
body[data-theme="emerald-afterhours"] .panel,
body[data-theme="emerald-afterhours"] .rule-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
    var(--panel);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
}

body[data-theme="obsidian-mystery"] .hero-chip,
body[data-theme="obsidian-mystery"] .theme-button,
body[data-theme="obsidian-mystery"] .journal-pill,
body[data-theme="obsidian-mystery"] .legend-pill,
body[data-theme="acid-cabaret"] .hero-chip,
body[data-theme="acid-cabaret"] .theme-button,
body[data-theme="acid-cabaret"] .journal-pill,
body[data-theme="acid-cabaret"] .legend-pill,
body[data-theme="pantone-mind-bend"] .hero-chip,
body[data-theme="pantone-mind-bend"] .theme-button,
body[data-theme="pantone-mind-bend"] .journal-pill,
body[data-theme="pantone-mind-bend"] .legend-pill,
body[data-theme="pantone-aurora-glow"] .hero-chip,
body[data-theme="pantone-aurora-glow"] .theme-button,
body[data-theme="pantone-aurora-glow"] .journal-pill,
body[data-theme="pantone-aurora-glow"] .legend-pill,
body[data-theme="midnight-terminal"] .hero-chip,
body[data-theme="midnight-terminal"] .theme-button,
body[data-theme="midnight-terminal"] .journal-pill,
body[data-theme="midnight-terminal"] .legend-pill,
body[data-theme="oxblood-noir"] .hero-chip,
body[data-theme="oxblood-noir"] .theme-button,
body[data-theme="oxblood-noir"] .journal-pill,
body[data-theme="oxblood-noir"] .legend-pill,
body[data-theme="emerald-afterhours"] .hero-chip,
body[data-theme="emerald-afterhours"] .theme-button,
body[data-theme="emerald-afterhours"] .journal-pill,
body[data-theme="emerald-afterhours"] .legend-pill,
body[data-theme="obsidian-mystery"] .week-select-wrap select,
body[data-theme="acid-cabaret"] .week-select-wrap select,
body[data-theme="pantone-mind-bend"] .week-select-wrap select,
body[data-theme="pantone-aurora-glow"] .week-select-wrap select,
body[data-theme="midnight-terminal"] .week-select-wrap select,
body[data-theme="oxblood-noir"] .week-select-wrap select,
body[data-theme="emerald-afterhours"] .week-select-wrap select {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--ink);
}

body[data-theme="obsidian-mystery"] .week-select-wrap span,
body[data-theme="acid-cabaret"] .week-select-wrap span,
body[data-theme="pantone-mind-bend"] .week-select-wrap span,
body[data-theme="pantone-aurora-glow"] .week-select-wrap span,
body[data-theme="midnight-terminal"] .week-select-wrap span,
body[data-theme="oxblood-noir"] .week-select-wrap span,
body[data-theme="emerald-afterhours"] .week-select-wrap span {
  color: #ded6f3;
}

body[data-theme="obsidian-mystery"] .theme-button.active,
body[data-theme="acid-cabaret"] .theme-button.active,
body[data-theme="pantone-mind-bend"] .theme-button.active,
body[data-theme="pantone-aurora-glow"] .theme-button.active,
body[data-theme="midnight-terminal"] .theme-button.active,
body[data-theme="oxblood-noir"] .theme-button.active,
body[data-theme="emerald-afterhours"] .theme-button.active {
  background: linear-gradient(135deg, var(--blue), color-mix(in srgb, var(--blue) 55%, white 45%));
  color: #071019;
}

body[data-theme="obsidian-mystery"] .hero-text,
body[data-theme="obsidian-mystery"] .panel-heading p,
body[data-theme="obsidian-mystery"] .control-header p,
body[data-theme="obsidian-mystery"] .section-heading p,
body[data-theme="obsidian-mystery"] .chart-title-row p,
body[data-theme="obsidian-mystery"] .journal-card p,
body[data-theme="obsidian-mystery"] .journal-day-card p,
body[data-theme="obsidian-mystery"] .capital-card p,
body[data-theme="obsidian-mystery"] .future-card p,
body[data-theme="obsidian-mystery"] .metric-card p,
body[data-theme="obsidian-mystery"] .logic-card p,
body[data-theme="obsidian-mystery"] .fact span,
body[data-theme="obsidian-mystery"] .control span,
body[data-theme="obsidian-mystery"] .rule-card span:last-child,
body[data-theme="acid-cabaret"] .hero-text,
body[data-theme="acid-cabaret"] .panel-heading p,
body[data-theme="acid-cabaret"] .control-header p,
body[data-theme="acid-cabaret"] .section-heading p,
body[data-theme="acid-cabaret"] .chart-title-row p,
body[data-theme="acid-cabaret"] .journal-card p,
body[data-theme="acid-cabaret"] .journal-day-card p,
body[data-theme="acid-cabaret"] .capital-card p,
body[data-theme="acid-cabaret"] .future-card p,
body[data-theme="acid-cabaret"] .metric-card p,
body[data-theme="acid-cabaret"] .logic-card p,
body[data-theme="acid-cabaret"] .fact span,
body[data-theme="acid-cabaret"] .control span,
body[data-theme="acid-cabaret"] .rule-card span:last-child,
body[data-theme="pantone-mind-bend"] .hero-text,
body[data-theme="pantone-mind-bend"] .panel-heading p,
body[data-theme="pantone-mind-bend"] .control-header p,
body[data-theme="pantone-mind-bend"] .section-heading p,
body[data-theme="pantone-mind-bend"] .chart-title-row p,
body[data-theme="pantone-mind-bend"] .journal-card p,
body[data-theme="pantone-mind-bend"] .journal-day-card p,
body[data-theme="pantone-mind-bend"] .capital-card p,
body[data-theme="pantone-mind-bend"] .future-card p,
body[data-theme="pantone-mind-bend"] .metric-card p,
body[data-theme="pantone-mind-bend"] .logic-card p,
body[data-theme="pantone-mind-bend"] .fact span,
body[data-theme="pantone-mind-bend"] .control span,
body[data-theme="pantone-mind-bend"] .rule-card span:last-child,
body[data-theme="pantone-aurora-glow"] .hero-text,
body[data-theme="pantone-aurora-glow"] .panel-heading p,
body[data-theme="pantone-aurora-glow"] .control-header p,
body[data-theme="pantone-aurora-glow"] .section-heading p,
body[data-theme="pantone-aurora-glow"] .chart-title-row p,
body[data-theme="pantone-aurora-glow"] .journal-card p,
body[data-theme="pantone-aurora-glow"] .journal-day-card p,
body[data-theme="pantone-aurora-glow"] .capital-card p,
body[data-theme="pantone-aurora-glow"] .future-card p,
body[data-theme="pantone-aurora-glow"] .metric-card p,
body[data-theme="pantone-aurora-glow"] .logic-card p,
body[data-theme="pantone-aurora-glow"] .fact span,
body[data-theme="pantone-aurora-glow"] .control span,
body[data-theme="pantone-aurora-glow"] .rule-card span:last-child,
body[data-theme="midnight-terminal"] .hero-text,
body[data-theme="midnight-terminal"] .panel-heading p,
body[data-theme="midnight-terminal"] .control-header p,
body[data-theme="midnight-terminal"] .section-heading p,
body[data-theme="midnight-terminal"] .chart-title-row p,
body[data-theme="midnight-terminal"] .journal-card p,
body[data-theme="midnight-terminal"] .journal-day-card p,
body[data-theme="midnight-terminal"] .capital-card p,
body[data-theme="midnight-terminal"] .future-card p,
body[data-theme="midnight-terminal"] .metric-card p,
body[data-theme="midnight-terminal"] .logic-card p,
body[data-theme="midnight-terminal"] .fact span,
body[data-theme="midnight-terminal"] .control span,
body[data-theme="midnight-terminal"] .rule-card span:last-child,
body[data-theme="oxblood-noir"] .hero-text,
body[data-theme="oxblood-noir"] .panel-heading p,
body[data-theme="oxblood-noir"] .control-header p,
body[data-theme="oxblood-noir"] .section-heading p,
body[data-theme="oxblood-noir"] .chart-title-row p,
body[data-theme="oxblood-noir"] .journal-card p,
body[data-theme="oxblood-noir"] .journal-day-card p,
body[data-theme="oxblood-noir"] .capital-card p,
body[data-theme="oxblood-noir"] .future-card p,
body[data-theme="oxblood-noir"] .metric-card p,
body[data-theme="oxblood-noir"] .logic-card p,
body[data-theme="oxblood-noir"] .fact span,
body[data-theme="oxblood-noir"] .control span,
body[data-theme="oxblood-noir"] .rule-card span:last-child,
body[data-theme="emerald-afterhours"] .hero-text,
body[data-theme="emerald-afterhours"] .panel-heading p,
body[data-theme="emerald-afterhours"] .control-header p,
body[data-theme="emerald-afterhours"] .section-heading p,
body[data-theme="emerald-afterhours"] .chart-title-row p,
body[data-theme="emerald-afterhours"] .journal-card p,
body[data-theme="emerald-afterhours"] .journal-day-card p,
body[data-theme="emerald-afterhours"] .capital-card p,
body[data-theme="emerald-afterhours"] .future-card p,
body[data-theme="emerald-afterhours"] .metric-card p,
body[data-theme="emerald-afterhours"] .logic-card p,
body[data-theme="emerald-afterhours"] .fact span,
body[data-theme="emerald-afterhours"] .control span,
body[data-theme="emerald-afterhours"] .rule-card span:last-child {
  color: color-mix(in srgb, var(--ink) 72%, var(--muted) 28%);
}

body[data-theme="obsidian-mystery"] .journal-kicker,
body[data-theme="obsidian-mystery"] .rule-label,
body[data-theme="obsidian-mystery"] .theme-switcher-label,
body[data-theme="acid-cabaret"] .journal-kicker,
body[data-theme="acid-cabaret"] .rule-label,
body[data-theme="acid-cabaret"] .theme-switcher-label,
body[data-theme="pantone-mind-bend"] .journal-kicker,
body[data-theme="pantone-mind-bend"] .rule-label,
body[data-theme="pantone-mind-bend"] .theme-switcher-label,
body[data-theme="pantone-aurora-glow"] .journal-kicker,
body[data-theme="pantone-aurora-glow"] .rule-label,
body[data-theme="pantone-aurora-glow"] .theme-switcher-label,
body[data-theme="midnight-terminal"] .journal-kicker,
body[data-theme="midnight-terminal"] .rule-label,
body[data-theme="midnight-terminal"] .theme-switcher-label,
body[data-theme="oxblood-noir"] .journal-kicker,
body[data-theme="oxblood-noir"] .rule-label,
body[data-theme="oxblood-noir"] .theme-switcher-label,
body[data-theme="emerald-afterhours"] .journal-kicker,
body[data-theme="emerald-afterhours"] .rule-label,
body[data-theme="emerald-afterhours"] .theme-switcher-label {
  color: color-mix(in srgb, var(--green) 72%, white 28%);
}

body[data-theme="obsidian-mystery"] .journal-summary-card .journal-kicker,
body[data-theme="obsidian-mystery"] .journal-card .journal-kicker,
body[data-theme="obsidian-mystery"] .capital-card h3,
body[data-theme="acid-cabaret"] .journal-summary-card .journal-kicker,
body[data-theme="acid-cabaret"] .journal-card .journal-kicker,
body[data-theme="acid-cabaret"] .capital-card h3,
body[data-theme="pantone-mind-bend"] .journal-summary-card .journal-kicker,
body[data-theme="pantone-mind-bend"] .journal-card .journal-kicker,
body[data-theme="pantone-mind-bend"] .capital-card h3,
body[data-theme="pantone-aurora-glow"] .journal-summary-card .journal-kicker,
body[data-theme="pantone-aurora-glow"] .journal-card .journal-kicker,
body[data-theme="pantone-aurora-glow"] .capital-card h3,
body[data-theme="midnight-terminal"] .journal-summary-card .journal-kicker,
body[data-theme="midnight-terminal"] .journal-card .journal-kicker,
body[data-theme="midnight-terminal"] .capital-card h3,
body[data-theme="oxblood-noir"] .journal-summary-card .journal-kicker,
body[data-theme="oxblood-noir"] .journal-card .journal-kicker,
body[data-theme="oxblood-noir"] .capital-card h3,
body[data-theme="emerald-afterhours"] .journal-summary-card .journal-kicker,
body[data-theme="emerald-afterhours"] .journal-card .journal-kicker,
body[data-theme="emerald-afterhours"] .capital-card h3 {
  color: color-mix(in srgb, var(--blue) 76%, white 24%);
}

body[data-theme="obsidian-mystery"] .fact,
body[data-theme="obsidian-mystery"] .split-stat,
body[data-theme="acid-cabaret"] .fact,
body[data-theme="acid-cabaret"] .split-stat,
body[data-theme="pantone-mind-bend"] .fact,
body[data-theme="pantone-mind-bend"] .split-stat,
body[data-theme="pantone-aurora-glow"] .fact,
body[data-theme="pantone-aurora-glow"] .split-stat,
body[data-theme="midnight-terminal"] .fact,
body[data-theme="midnight-terminal"] .split-stat,
body[data-theme="oxblood-noir"] .fact,
body[data-theme="oxblood-noir"] .split-stat,
body[data-theme="emerald-afterhours"] .fact,
body[data-theme="emerald-afterhours"] .split-stat {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

body[data-theme="obsidian-mystery"] .split-card.good,
body[data-theme="acid-cabaret"] .split-card.good,
body[data-theme="pantone-mind-bend"] .split-card.good,
body[data-theme="pantone-aurora-glow"] .split-card.good,
body[data-theme="midnight-terminal"] .split-card.good,
body[data-theme="oxblood-noir"] .split-card.good,
body[data-theme="emerald-afterhours"] .split-card.good {
  background: linear-gradient(180deg, rgba(79, 196, 126, 0.14), rgba(255, 255, 255, 0.03));
}

body[data-theme="obsidian-mystery"] .split-card.caution,
body[data-theme="acid-cabaret"] .split-card.caution,
body[data-theme="pantone-mind-bend"] .split-card.caution,
body[data-theme="pantone-aurora-glow"] .split-card.caution,
body[data-theme="midnight-terminal"] .split-card.caution,
body[data-theme="oxblood-noir"] .split-card.caution,
body[data-theme="emerald-afterhours"] .split-card.caution {
  background: linear-gradient(180deg, rgba(214, 111, 104, 0.16), rgba(255, 255, 255, 0.03));
}

body[data-theme="obsidian-mystery"] canvas,
body[data-theme="acid-cabaret"] canvas,
body[data-theme="pantone-mind-bend"] canvas,
body[data-theme="pantone-aurora-glow"] canvas,
body[data-theme="midnight-terminal"] canvas,
body[data-theme="oxblood-noir"] canvas,
body[data-theme="emerald-afterhours"] canvas {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.08);
}

body[data-theme="obsidian-mystery"] .bar-value,
body[data-theme="obsidian-mystery"] .bar-label,
body[data-theme="acid-cabaret"] .bar-value,
body[data-theme="acid-cabaret"] .bar-label,
body[data-theme="pantone-mind-bend"] .bar-value,
body[data-theme="pantone-mind-bend"] .bar-label,
body[data-theme="pantone-aurora-glow"] .bar-value,
body[data-theme="pantone-aurora-glow"] .bar-label,
body[data-theme="midnight-terminal"] .bar-value,
body[data-theme="midnight-terminal"] .bar-label,
body[data-theme="oxblood-noir"] .bar-value,
body[data-theme="oxblood-noir"] .bar-label,
body[data-theme="emerald-afterhours"] .bar-value,
body[data-theme="emerald-afterhours"] .bar-label {
  color: color-mix(in srgb, var(--ink) 82%, var(--muted) 18%);
}

.panel-tinted {
  padding: 22px 24px;
}

.panel-tinted.blue {
  background: linear-gradient(180deg, rgba(74, 135, 215, 0.14), rgba(255, 255, 255, 0.84));
}

.panel-tinted.green {
  background: linear-gradient(180deg, rgba(106, 158, 89, 0.14), rgba(255, 255, 255, 0.84));
}

.panel-heading h2,
.control-header h3,
.section-heading h2,
.chart-title-row h3 {
  margin: 0;
  letter-spacing: -0.04em;
}

.panel-heading p,
.control-header p,
.section-heading p,
.chart-title-row p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.fact {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.48);
}

.fact span {
  color: var(--muted);
  font-size: 0.88rem;
}

.fact strong {
  font-size: 1.1rem;
  letter-spacing: -0.03em;
}

.input-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.control-panel {
  padding: 22px;
}

.control-list {
  display: grid;
  gap: 18px;
  margin-top: 16px;
}

.control {
  display: grid;
  gap: 8px;
}

.control span {
  color: var(--muted);
  font-size: 0.94rem;
}

.control strong {
  font-size: 1.08rem;
  letter-spacing: -0.03em;
}

input[type="range"] {
  width: 100%;
  appearance: none;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(74, 135, 215, 0.18), rgba(106, 158, 89, 0.18));
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--ink);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
  cursor: pointer;
}

input[type="range"]:disabled {
  opacity: 0.7;
}

.probability-bar-wrap {
  display: grid;
  gap: 10px;
}

.probability-bar {
  display: flex;
  overflow: hidden;
  min-height: 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.5);
}

.probability-segment {
  min-width: 0;
}

.probability-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.legend-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.6);
  font-size: 0.92rem;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.run-button {
  min-height: 60px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, #1e1a14, #3c3226);
  color: #f7f1e7;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
  box-shadow: 0 16px 32px rgba(33, 24, 10, 0.18);
}

.run-button:hover {
  transform: translateY(-1px);
}

.run-button:disabled {
  cursor: wait;
  opacity: 0.82;
}

.action-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
}

.export-button {
  min-height: 60px;
  padding: 0 22px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
}

.section-heading {
  display: grid;
  gap: 6px;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.logic-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.logic-card {
  padding: 18px;
}

.logic-card h3 {
  margin: 0 0 10px;
  letter-spacing: -0.03em;
}

.logic-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 0.94rem;
}

.metric-grid-streaks {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.metric-card {
  padding: 18px;
}

.metric-card span {
  display: block;
  color: var(--muted);
  font-size: 0.88rem;
}

.metric-card strong {
  display: block;
  margin-top: 8px;
  font-size: 2rem;
  letter-spacing: -0.05em;
}

.metric-card p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.45;
  font-size: 0.92rem;
}

.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

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

.chart-panel {
  padding: 20px;
}

.chart-panel.wide {
  grid-column: 1 / -1;
}

.chart-title-row {
  margin-bottom: 14px;
}

.chart,
canvas {
  width: 100%;
}

canvas {
  display: block;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.64), rgba(244, 236, 223, 0.7));
  border: 1px solid rgba(54, 43, 28, 0.08);
}

.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  min-height: 260px;
  padding: 16px 4px 4px;
}

.bar-column {
  flex: 1 1 0;
  display: grid;
  align-content: end;
  gap: 8px;
  min-width: 0;
}

.bar {
  width: 100%;
  border-radius: 14px 14px 6px 6px;
  min-height: 2px;
}

.bar-value {
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
  font-family: "IBM Plex Mono", monospace;
}

.bar-label {
  text-align: center;
  font-size: 0.83rem;
  color: var(--ink);
}

.histogram-bars {
  gap: 6px;
}

@media (max-width: 1120px) {
  .input-grid,
  .journal-toolbar,
  .journal-history-charts,
  .journal-grid,
  .pattern-summary-grid,
  .capital-grid,
  .journal-split-grid,
  .journal-days,
  .future-grid,
  .forecast-chart-grid,
  .action-row,
  .logic-summary,
  .metric-grid,
  .metric-grid-streaks,
  .chart-grid,
  .chart-grid-streaks {
    grid-template-columns: 1fr;
  }

  .page-shell {
    width: min(100vw - 20px, 960px);
  }

  .week-select-wrap select {
    min-width: 0;
  }

  .facts {
    grid-template-columns: 1fr;
  }

  .pattern-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .pattern-method-controls,
  .pattern-method-row {
    width: 100%;
    justify-items: start;
    justify-content: flex-start;
  }

  .hero-week-select,
  .hero-week-select select {
    min-width: 0;
  }
}

@media (max-width: 900px) {
  .hero {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
  }

  .hero-copy,
  .hero-summary,
  .hero-summary .journal-summary-grid {
    width: 100%;
    max-width: 100%;
  }

  .hero-summary .journal-summary-grid {
    grid-template-columns: 1fr;
  }

  .hero-bottom {
    justify-items: stretch;
  }

  .hero-week-select,
  .hero-week-select select {
    width: 100%;
  }
}

@media (max-width: 720px) {
  .page-shell {
    width: calc(100vw - 16px);
    margin-top: 8px;
  }

  .hero,
  .panel-tinted,
  .control-panel,
  .chart-panel {
    padding: 18px;
  }

  .hero {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
    width: min(100%, var(--mobile-hero-width, 100%));
    max-width: 100%;
    overflow: hidden;
  }

  .hero-copy,
  .hero-summary {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  .hero h1 {
    max-width: 100%;
    font-size: clamp(1.85rem, 7vw, 2.4rem);
    line-height: 0.94;
  }

  .hero-text {
    max-width: 100%;
    font-size: 0.94rem;
    line-height: 1.5;
  }

  .hero-summary .journal-summary-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    max-width: 100%;
  }

  .hero-summary .journal-summary-card {
    min-height: 0;
  }

  .hero-foot {
    gap: 8px;
  }

  .hero-bottom {
    gap: 14px;
  }

  .theme-toggle {
    right: 12px;
    bottom: 12px;
  }

  .theme-drawer {
    right: 12px;
    bottom: 66px;
  }

  .metric-card strong {
    font-size: 1.75rem;
  }

  .bar-chart {
    gap: 6px;
    min-height: 220px;
  }

  .pattern-summary-grid {
    grid-template-columns: 1fr;
  }

  .forecast-summary-grid .journal-summary-grid {
    grid-template-columns: 1fr;
  }
}