:root {
  color-scheme: light;
  --canvas: #ffffff;
  --bg: #f7f8fa;
  --surface: #ffffff;
  --surface-soft: #f2f5f8;
  --ink: #181d26;
  --body: #333840;
  --muted: #6b7280;
  --hairline: #d9dde4;
  --primary: #6b2018;
  --pink: #8d241b;
  --pink-dark: #6b2018;
  --pink-soft: #fff8ea;
  --coral: #aa2d00;
  --success-soft: #eef8f0;
  --shadow: 0 8px 24px rgba(17, 24, 39, 0.06);
}

/* Status dot — dùng chung với main app */
.statusDot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
  transition: background 0.3s;
}
.statusDot[data-mode="ready"]   { background: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,.2); }
.statusDot[data-mode="loading"] { background: #f59e0b; }
.statusDot[data-mode="error"]   { background: #ef4444; box-shadow: 0 0 0 2px rgba(239,68,68,.2); }

/* Nút reload nhỏ */
.reloadBtn { min-width: 36px; font-size: 16px; padding: 0 10px; }

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--body);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  min-height: 68px;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid var(--hairline);
  backdrop-filter: blur(14px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
}

.brandMark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--pink);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  font-size: 16px;
  font-weight: 600;
}

.brand small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.viewSwitch {
  display: flex;
  background: var(--surface-soft);
  padding: 4px;
  border-radius: 10px;
  gap: 4px;
}

.viewButton {
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: var(--body);
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
}

.viewButton.isActive {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.topbarActions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.syncStatus {
  font-size: 12px;
  color: var(--muted);
}

.secondaryAction {
  padding: 8px 16px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
}

.secondaryAction:hover {
  background: var(--surface-soft);
}

.disclaimerBanner {
  background: var(--pink-soft);
  border-bottom: 1px solid rgba(233, 30, 99, 0.15);
  padding: 10px 24px;
  color: var(--pink-dark);
  font-size: 13px;
}

.bannerContent {
  max-width: 1400px;
  margin: 0 auto;
}

.appShell {
  flex: 1;
  display: grid;
  grid-template-columns:
    minmax(240px, 0.82fr)
    minmax(390px, 1.42fr)
    minmax(300px, 1fr);
  max-width: 100%;
  height: calc(100vh - 108px);
}

.appShell.isSpreadMode {
  grid-template-columns: minmax(220px, 0.36fr) minmax(0, 2.64fr);
}

.appShell.isSpreadMode .workspace {
  grid-column: 2 / 3;
}

.appShell.isSpreadMode .workspaceHeader,
.appShell.isSpreadMode .metricGrid,
.appShell.isSpreadMode .recordToolbar,
.appShell.isSpreadMode .recordList,
.appShell.isSpreadMode .detailPane {
  display: none;
}

.appShell.isSpreadMode .filterRail .railSection:first-child {
  display: none;
}

.filterRail {
  background: var(--surface);
  border-right: 1px solid var(--hairline);
  padding: 24px;
  overflow-y: auto;
}

.railSection {
  margin-bottom: 28px;
}

.sectionLabel {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 0 0 16px 0;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.field span {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
}

.field input,
.field select {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font-size: 13px;
}

.field input:focus,
.field select:focus {
  outline: 2px solid var(--pink);
  background: var(--surface);
}

.sourcePolicy {
  background: var(--bg);
  padding: 14px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
}

.sourcePolicy strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
}

.workspace {
  background: var(--bg);
  min-width: 0;
  padding: 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.workspaceHeader {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--pink);
  margin: 0 0 8px 0;
}

.workspaceHeader h1 {
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px 0;
  line-height: 1.15;
}

.intro {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
  line-height: 1.5;
}

.metricGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(72px, 1fr));
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  padding: 16px;
  border-radius: 12px;
  min-width: 190px;
}

.metricGrid div {
  display: flex;
  flex-direction: column;
}

.metricGrid span {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}

.metricGrid small {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
}

.segmentedControl {
  display: flex;
  background: var(--hairline);
  padding: 3px;
  border-radius: 8px;
  margin-bottom: 24px;
  max-width: fit-content;
}

.tabButton {
  padding: 8px 20px;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  color: var(--body);
}

.tabButton.isActive {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.recordToolbar {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 16px;
}

.recordList {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.itemCard {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  min-height: 184px;
  padding: 15px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.2s;
}

.itemCard:hover, .itemCard.isSelected {
  border-color: var(--pink);
  box-shadow: var(--shadow);
}

.itemCard h3 {
  margin: 0 0 6px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}

.itemCard .viName {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 10px;
}

.cardSummary {
  display: -webkit-box;
  margin: 0 0 12px;
  overflow: hidden;
  color: var(--body);
  font-size: 13px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

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

.badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  display: inline-block;
  background: var(--surface-soft);
  color: var(--body);
}

.badge.major {
  background: var(--pink-soft);
  color: var(--pink-dark);
}

.badge.pending {
  background: #fef3c7;
  color: #92400e;
}

.detailPane {
  background: var(--surface);
  border-left: 1px solid var(--hairline);
  min-width: 0;
  padding: 24px;
  overflow-y: auto;
}

.detailEmpty {
  text-align: center;
  max-width: 560px;
  margin: 100px auto 0;
}

.detailEmpty h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}

.detailEmpty p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.detailContent h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px 0;
}

.detailSub {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 24px;
}

.detailMetaGroup {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.detailSection {
  border-top: 1px solid var(--hairline);
  padding-top: 20px;
  margin-top: 20px;
}

.detailSection h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 0 0 10px 0;
}

.detailSection p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  color: var(--body);
}

.methodBulletList {
  margin: 0;
  padding-left: 18px;
  color: var(--body);
  font-size: 14px;
  line-height: 1.6;
}

.methodBulletList li + li {
  margin-top: 6px;
}

.keywordList {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.keywordTag {
  background: var(--bg);
  border: 1px solid var(--hairline);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--ink);
}

.sourceBox {
  background: var(--bg);
  border-left: 4px solid var(--pink);
  padding: 12px;
  border-radius: 0 8px 8px 0;
  font-size: 13px;
}

.sourceBox strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
}

.errorState {
  text-align: center;
  padding: 40px;
  background: #fff;
  border-radius: 12px;
  border: 1px dashed var(--hairline);
}

.errorState p {
  color: var(--pink-dark);
  font-weight: 500;
}

@media (max-width: 1180px) {
  .appShell {
    grid-template-columns:
      minmax(220px, 0.72fr)
      minmax(360px, 1.35fr)
      minmax(280px, 0.95fr);
  }

  .filterRail,
  .workspace,
  .detailPane {
    padding: 20px;
  }

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

  .metricGrid {
    width: 100%;
    max-width: 260px;
  }
}

@media (max-width: 920px) {
  .appShell {
    height: auto;
    min-height: calc(100vh - 108px);
    grid-template-columns: 1fr;
  }

  .appShell.isSpreadMode {
    grid-template-columns: 1fr;
  }

  .appShell.isSpreadMode .workspace {
    grid-column: 1;
  }

  .filterRail,
  .detailPane {
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }

  .filterRail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.72fr);
    gap: 18px;
  }

  .detailPane {
    order: 3;
  }
}

@media (max-width: 680px) {
  .topbar,
  .topbarActions {
    align-items: stretch;
    flex-direction: column;
  }

  .viewSwitch {
    flex-wrap: wrap;
  }

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

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

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

/* Spread Workspace Styles */
.spreadWorkspace {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.spreadControlBar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 16px;
  align-items: end;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 18px;
}

.spreadTypeField {
  margin-bottom: 0;
}

.spreadHeader {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 22px;
}

.spreadHeader h2 {
  font-size: clamp(22px, 2vw, 30px);
  margin: 0;
  color: var(--ink);
  line-height: 1.2;
}

.spreadHeader p:last-child {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

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

.spreadPositionSelector {
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.spreadPositionSelector label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.spreadPositionSelector select {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: var(--surface);
  font-size: 13px;
}

.spreadDisclaimer {
  font-size: 12px;
  color: var(--muted);
  background: var(--surface-soft);
  padding: 12px;
  border-radius: 8px;
  line-height: 1.5;
}

.spreadCardList {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.spreadCardDetail {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--pink);
  border-radius: 0 8px 8px 0;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.spreadCardDetail h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
}

.spreadCardDetail .positionLabel {
  background: var(--pink-soft);
  color: var(--pink-dark);
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
}

.spreadCardDetail .cardMeta {
  font-size: 13px;
  color: var(--muted);
  display: flex;
  gap: 10px;
}

.spreadCardDetail p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  color: var(--body);
}

.spreadCardDetail .loveSection {
  background: #fdfaf2;
  border-top: 1px dashed var(--hairline);
  padding-top: 10px;
  margin-top: 5px;
}

.spreadCardDetail .loveSection strong {
  font-size: 12px;
  color: #b7791f;
  display: block;
  margin-bottom: 4px;
}

/* Shared red-brown paper theme to keep Tarot visually aligned with the
   main Tu Vi app. */
:root[data-theme="heritage"] {
  --canvas: #fffaf0;
  --bg: #f2dfb7;
  --surface: #fffaf0;
  --surface-soft: #fff3d7;
  --ink: #2b1712;
  --body: #2b1712;
  --muted: #7a6258;
  --hairline: rgba(211, 169, 88, .62);
  --primary: #6b2018;
  --pink: #982b22;
  --pink-dark: #6b2018;
  --pink-soft: #fff3d7;
  --shadow: 0 20px 52px rgba(92, 31, 24, .08);
}

body[data-theme="heritage"] {
  background:
    linear-gradient(rgba(128, 88, 31, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(128, 88, 31, .10) 1px, transparent 1px),
    var(--bg);
  background-size: 48px 48px;
}

body[data-theme="heritage"] .topbar {
  background: #641f17;
  border-bottom: 1px solid rgba(230, 190, 118, .42);
  color: #fff8e7;
}

body[data-theme="heritage"] .brand,
body[data-theme="heritage"] .brand strong,
body[data-theme="heritage"] .brand small,
body[data-theme="heritage"] .viewButton,
body[data-theme="heritage"] .syncStatus {
  color: #fff8e7;
}

body[data-theme="heritage"] .brandMark {
  background: #8c241d;
  color: #fff8e7;
  border: 1px solid rgba(241, 198, 103, .58);
  border-radius: 999px;
}

body[data-theme="heritage"] .viewSwitch {
  border: 1px solid rgba(230, 190, 118, .52);
  border-radius: 999px;
  background: #fff2cf;
}

body[data-theme="heritage"] .viewButton {
  color: #7a4c3b;
  border-radius: 999px;
}

body[data-theme="heritage"] .viewButton.isActive {
  background: #982b22;
  color: #fff8e7;
  box-shadow: none;
}

body[data-theme="heritage"] .disclaimerBanner,
body[data-theme="heritage"] .filterRail,
body[data-theme="heritage"] .workspace,
body[data-theme="heritage"] .detailPane,
body[data-theme="heritage"] .recordToolbar,
body[data-theme="heritage"] .record,
body[data-theme="heritage"] .spreadPanel,
body[data-theme="heritage"] .spreadCard,
body[data-theme="heritage"] .readingPanel,
body[data-theme="heritage"] .fieldGroup,
body[data-theme="heritage"] .spreadCardDetail {
  background: rgba(255, 250, 238, .94);
  border-color: rgba(211, 169, 88, .64);
  box-shadow: var(--shadow);
}

:root[data-theme="sage"] {
  --canvas: #fbfdf9;
  --bg: #edf6ee;
  --surface: #fbfdf9;
  --surface-soft: #f3faf4;
  --ink: #173326;
  --body: #1f352b;
  --muted: #61736a;
  --hairline: #cfe2d4;
  --primary: #1f6f45;
  --pink: #2f8f5b;
  --pink-dark: #1f6f45;
  --pink-soft: #f3faf4;
  --shadow: 0 18px 44px rgba(31, 111, 69, .08);
}

:root[data-theme="neutral"] {
  --canvas: #ffffff;
  --bg: #f3f4f6;
  --surface: #ffffff;
  --surface-soft: #f9fafb;
  --ink: #111827;
  --body: #1f2937;
  --muted: #6b7280;
  --hairline: #d1d5db;
  --primary: #374151;
  --pink: #4b5563;
  --pink-dark: #374151;
  --pink-soft: #f9fafb;
  --shadow: 0 12px 30px rgba(17, 24, 39, .08);
}

.themeToggle {
  position: relative;
  width: 44px;
  min-width: 44px;
  height: 36px;
  padding: 0;
  font-size: 0;
  line-height: 0;
}

.themeToggle::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  margin: auto;
  border-radius: 999px;
  background: #e83f6f;
  box-shadow: inset 0 0 0 4px #fff1f4, 0 0 0 1px rgba(232, 63, 111, .35);
}

:root[data-theme="heritage"] .themeToggle::before {
  background: #982b22;
  box-shadow: inset 0 0 0 4px #fff2cf, 0 0 0 1px rgba(152, 43, 34, .35);
}

:root[data-theme="sage"] .themeToggle::before {
  background: #2f8f5b;
  box-shadow: inset 0 0 0 4px #effaf3, 0 0 0 1px rgba(47, 143, 91, .35);
}

:root[data-theme="neutral"] .themeToggle::before {
  background: #4b5563;
  box-shadow: inset 0 0 0 4px #f2f3f5, 0 0 0 1px rgba(75, 85, 99, .35);
}

/* ══════════════════════════════════════════
   v1.02 DARK SIDEBAR LAYOUT OVERRIDES
   Adapts old light-themed tarot layout to the
   new tvApp/tvSidebar/tvMain shell.
   ══════════════════════════════════════════ */

/* Hide old topbar/disclaimerBanner (replaced by tvTopbar) */
.topbar,
.disclaimerBanner { display: none !important; }

/* body: reset old flex-column wrapper (tvApp handles layout) */
body {
  background: #09090b !important;
  color: #fafafa !important;
  display: block !important;
  min-height: 100vh !important;
  overflow: hidden !important;
}

/* TV App layout — self-contained fallback in case ../styles.css flex context is missing */
.tvApp {
  display: flex !important;
  height: 100vh !important;
  overflow: hidden !important;
  background: #09090b !important;
}
.tvMain {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* tvContent: linear layout scrolls via tvContent */
.tvContent {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  flex: 1 !important;
  min-height: 0 !important;
  -webkit-overflow-scrolling: touch !important;
}

/* ═══════════════════════════════════════════════
   TAROT: Linear page-scroll layout
   FilterRail → horizontal bar at top
   Workspace → full-width, page scrolls
   DetailPane → full-width section below cards
   ═══════════════════════════════════════════════ */

/* appShell: vertical flex column instead of fixed-height 3-column grid */
.appShell {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: 0 !important;
  grid-template-columns: unset !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* filterRail: horizontal toolbar bar at top */
:root[data-theme] .filterRail,
:root[data-theme="heritage"] .filterRail,
:root[data-theme="classic"] .filterRail,
:root[data-theme="neutral"] .filterRail,
.filterRail {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px 14px !important;
  padding: 10px 24px !important;
  border-right: none !important;
  border-top: none !important;
  border-left: none !important;
  border-bottom: 1px solid var(--tv-border, rgba(255,255,255,0.07)) !important;
  background: var(--tv-surface, #18181b) !important;
  box-shadow: none !important;
  overflow: visible !important;
  height: auto !important;
  min-height: unset !important;
}

/* Flatten railSection containers: children become direct flex items */
.filterRail .railSection { display: contents !important; }

/* Hide section labels + verbose source in horizontal bar */
.filterRail .sectionLabel { display: none !important; }
.filterRail .sourcePolicy { display: none !important; }

/* Field label text hidden (placeholder does the job) */
.filterRail .field > span { display: none !important; }

/* Field: inline flex */
.filterRail .field {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 180px !important;
  max-width: 280px !important;
}

/* [hidden] must remain hidden even inside flex bar */
.filterRail [hidden] { display: none !important; }

/* cardFilters / methodFilters / spreadFilters: row layout in bar (only when visible) */
.filterRail .cardFilters,
.filterRail .methodFilters:not([hidden]),
.filterRail .spreadFilters:not([hidden]) {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}
.filterRail .cardFilters .field,
.filterRail .methodFilters .field,
.filterRail .spreadFilters .field {
  flex: 0 1 150px !important;
  max-width: 170px !important;
}

/* Stats chips: inline, compact — remove box styling */
.metricGrid {
  display: flex !important;
  flex-direction: row !important;
  gap: 14px !important;
  align-items: center !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: unset !important;
  border-radius: 0 !important;
}
.metricGrid > div,
.metricGrid div {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 4px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.metricGrid span  { font-size: 16px !important; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.metricGrid small { font-size: 11px !important; color: #71717a !important; text-transform: uppercase !important; }
.sourcePolicy strong { color: #fafafa !important; }
.sourcePolicy span   { color: #71717a !important; }

/* Workspace: full-width, natural height (page scrolls) */
:root[data-theme] .workspace,
:root[data-theme="heritage"] .workspace,
.workspace {
  width: 100% !important;
  height: auto !important;
  min-height: unset !important;
  overflow: visible !important;
  flex: none !important;
  background: var(--tv-bg, #0e0e11) !important;
}

/* workspaceHeader: single-column (no side stat panel) */
.workspaceHeader {
  grid-template-columns: 1fr !important;
  margin-bottom: 14px !important;
}

/* Card grid: full width, more columns */
#entriesList {
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)) !important;
  gap: 14px !important;
}

/* detailPane: full-width section below workspace */
:root[data-theme] .detailPane,
:root[data-theme="heritage"] .detailPane,
.detailPane {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: unset !important;
  flex: none !important;
  background: var(--tv-bg, #0e0e11) !important;
  border-left: none !important;
  border-right: none !important;
  border-top: 1px solid var(--tv-border, rgba(255,255,255,0.07)) !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* detailEmpty: show as a slim banner, not full-screen */
.detailEmpty {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px 24px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.detailEmpty svg { margin-bottom: 0 !important; opacity: 0.15 !important; }
.detailEmpty p { margin: 0 !important; }

/* Text colors */
.workspaceHeader h1 { color: #fafafa !important; }
.eyebrow { color: #52525b !important; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; }
.intro   { color: #a1a1aa !important; }

/* Mobile (<= 640px): stack filters vertically */
@media (max-width: 640px) {
  .filterRail { padding: 10px 16px !important; gap: 8px !important; }
  .filterRail .field { flex: 1 1 100% !important; max-width: 100% !important; }
  .filterRail select { width: 100% !important; }
  .appShell { padding-bottom: calc(56px + env(safe-area-inset-bottom)) !important; }
  #entriesList { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important; gap: 10px !important; }
}

/* ── Quick filter chips ──────────────────────────────────────────────────── */
.filterChips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 8px 0 4px;
}
.filterChip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  color: var(--tv-text-sec, #a1a1aa);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.filterChip:hover {
  border-color: var(--tv-accent, #22d3ee);
  color: var(--tv-accent, #22d3ee);
  background: var(--tv-accent-soft, rgba(34,211,238,0.08));
}
.filterChip.isActive {
  background: var(--tv-accent, #22d3ee) !important;
  color: #09090b !important;
  border-color: var(--tv-accent, #22d3ee) !important;
  font-weight: 600;
  box-shadow: 0 0 8px var(--tv-glow, rgba(34,211,238,0.25));
}
.chipSep {
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,0.12);
  margin: 0 2px;
}
.activeFilterLabel {
  font-size: 12px;
  color: var(--tv-text-muted, #71717a);
  display: none;
}

/* Segmented tabs — border + active follow theme A/B/C accent */
.segmentedControl {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--tv-accent-soft, rgba(255,255,255,0.08)) !important;
  border-radius: 10px !important;
  box-shadow: 0 0 0 1px var(--tv-accent-soft, rgba(255,255,255,0.05)) !important;
}
.tabButton {
  color: #71717a !important;
  background: transparent !important;
  border-radius: 7px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
.tabButton.isActive {
  background: var(--tv-accent, #22d3ee) !important;
  color: #09090b !important;
  box-shadow: 0 0 10px var(--tv-glow, rgba(34,211,238,0.25)) !important;
  font-weight: 600 !important;
}

/* Record toolbar */
.recordToolbar {
  background: rgba(255,255,255,0.03) !important;
  border-color: rgba(255,255,255,0.06) !important;
  color: #71717a !important;
}

/* Card entries — grid with art header */
#entriesList {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
  gap: 12px !important;
  padding: 16px 0 !important;
}
.itemCard.cardWithArt {
  display: flex !important;
  flex-direction: column !important;
  background: #111114 !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: border-color 0.15s, transform 0.15s !important;
  padding: 0 !important;    /* reset any padding from base .itemCard */
}
.itemCard.cardWithArt:hover { border-color: rgba(251,113,133,0.4) !important; transform: translateY(-2px); }
.itemCard.cardWithArt.isSelected { border-color: var(--tv-tarot, #fb7185) !important; }

.cardArt {
  height: 90px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cardArtOverlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.3);
}
.cardArtSymbol {
  position: relative;
  font-size: 32px;
  line-height: 1;
  color: rgba(255,255,255,0.85);
  z-index: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.cardArtNum {
  position: absolute;
  top: 7px; right: 9px;
  font-size: 10px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(255,255,255,0.5);
  z-index: 1;
}
.cardInfo {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cardNameVi {
  font-size: 12.5px;
  font-weight: 600;
  color: #fafafa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cardNameEn {
  font-size: 10px;
  color: #71717a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cardInfo .badge {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 4px;
  padding: 2px 6px;
  display: inline-block;
  width: fit-content;
}
.cardInfo .badge.major { background: rgba(251,113,133,0.12) !important; color: #fb7185 !important; border: none !important; }
.cardInfo .badge.minor { background: rgba(168,85,247,0.12) !important; color: #a855f7 !important; border: none !important; }

/* Legacy itemCard (methods/spreads) */
.cardEntry, .itemCard:not(.cardWithArt) {
  background: #111114 !important;
  border-color: rgba(255,255,255,0.06) !important;
  color: #fafafa !important;
}
.cardEntry:hover, .itemCard:not(.cardWithArt):hover { border-color: rgba(251,113,133,0.4) !important; }
.cardIndex   { color: #52525b !important; }
.cardName    { color: #fafafa !important; }
.cardSubname { color: #a1a1aa !important; }
.cardBadge, .badge { font-size: 10px; font-weight: 700; border-radius: 4px; padding: 2px 6px; }
.cardBadgeMajor { background: rgba(251,113,133,0.12) !important; color: #fb7185 !important; }
.cardBadgeMinor { background: rgba(168,85,247,0.12) !important; color: #a855f7 !important; }
.suitIcon { font-size: 18px; }

@media (max-width: 768px) {
  #entriesList {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
  }
}

/* Detail pane */
.detailPane {
  background: var(--tv-bg, #0e0e11) !important;
  border-color: var(--tv-border, rgba(255,255,255,0.07)) !important;
  box-shadow: none !important;
}
.detailEmpty {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.detailHero, .detailBlock {
  background: var(--tv-surface, #18181b) !important;
  border-color: var(--tv-border, rgba(255,255,255,0.07)) !important;
  box-shadow: none !important;
}
.detailEmpty p, .detailEmpty h2 { color: #71717a !important; }
.detailContent { color: #e4e4e7 !important; }
.detailSection h3  { color: #fafafa !important; }
.detailSection p,
.detailSection li  { color: #a1a1aa !important; }
.keywordTag { background: rgba(255,255,255,0.06) !important; color: #a1a1aa !important; }
.keywordTagPositive { background: rgba(34,197,94,0.1) !important; color: #4ade80 !important; }
.keywordTagNegative { background: rgba(239,68,68,0.1) !important; color: #f87171 !important; }

/* Spread workspace */
.spreadWorkspace { background: #09090b !important; }
.spreadSlot { background: #111114 !important; border-color: rgba(255,255,255,0.08) !important; }
.spreadSlotFilled { border-color: rgba(251,113,133,0.4) !important; }
.spreadSlotLabel  { color: #71717a !important; }
.spreadSlotCard   { color: #fafafa !important; }
.spreadInterpretBtn {
  background: var(--tv-tarot, #fb7185) !important;
  color: #fff !important;
}

/* Spread workspace dark: controlBar + header + cards */
.spreadControlBar,
.spreadHeader,
.spreadPanel {
  background: var(--tv-surface, #18181b) !important;
  border-color: var(--tv-border, rgba(255,255,255,0.08)) !important;
  box-shadow: none !important;
  color: var(--tv-text, #f4f4f5) !important;
}
.spreadHeader h2 { color: var(--tv-text, #f4f4f5) !important; }
.spreadHeader p  { color: var(--tv-text-sec, #a1a1aa) !important; }
.spreadCard,
.spreadCardDetail {
  background: var(--tv-surface, #18181b) !important;
  border-color: var(--tv-border, rgba(255,255,255,0.08)) !important;
  box-shadow: none !important;
  color: var(--tv-text, #f4f4f5) !important;
}
.spreadCardDetail h3    { color: var(--tv-text, #f4f4f5) !important; }
.spreadCardDetail p,
.spreadCardDetail li    { color: var(--tv-text-sec, #a1a1aa) !important; }
.spreadCardDetail .positionLabel { color: var(--tv-text-muted, #71717a) !important; }
.spreadCardDetail .loveSection strong { color: var(--tv-tarot, #fb7185) !important; }
/* Override body-level heritage cream */
body[data-theme="heritage"] .spreadCard,
body[data-theme="heritage"] .spreadCardDetail,
body[data-theme="heritage"] .spreadPanel,
body[data-theme="heritage"] .spreadControlBar,
body[data-theme="heritage"] .spreadHeader {
  background: var(--tv-surface, #18181b) !important;
  border-color: var(--tv-border, rgba(255,255,255,0.08)) !important;
  box-shadow: none !important;
}

/* Theme A/B/C active indicator for this page */
.tvThemeBtn.isActive {
  border-color: var(--tv-accent, #22d3ee) !important;
  color: var(--tv-accent, #22d3ee) !important;
  background: var(--tv-accent-soft, rgba(34,211,238,0.1)) !important;
}

[hidden] { display: none !important; }