/* ==============================================================
   Futures Journal — color tokens + base styles
   Palette mirrors the Dashboard 2 design in the Obsidian vault.
   ============================================================== */

:root {
  --dash-bg:           #0f1117;
  --dash-card:         #1a1d25;
  --dash-card-hover:   #21252f;
  --dash-card-2:       #21252f;
  --dash-card-3:       #2a2f3c;
  --dash-border:       rgba(255, 255, 255, 0.07);
  --dash-border-strong:rgba(255, 255, 255, 0.14);
  --dash-text:         #e4e6eb;
  --dash-text-muted:   #a3a8b3;
  --dash-text-dim:     #6b7280;
  --dash-faint:        #3f4451;
  --dash-accent:       #4f8cff;
  --dash-accent-soft:  #7aa7d9;
  --dash-accent-bg:    rgba(79, 140, 255, 0.16);
  --dash-accent-hover: #3b7bff;
  --dash-win:          #4ade80;
  --dash-loss:         #f87171;
  --dash-neutral:      #9ca3af;
  --sidebar-w:         220px;

  /* Surface tokens — these get theme-overridden */
  --bg-page:           #0f1117;
  --bg-sidebar:        #131620;
  --bg-modal:          #1a1d25;
  --bg-deep:           #0c0e14;
  --bg-tile-faint:     rgba(255, 255, 255, 0.025);
  --bg-tile-week:      rgba(255, 255, 255, 0.04);
  --bg-bar-track:      rgba(255, 255, 255, 0.06);
  --overlay-dim:       rgba(0, 0, 0, 0.72);
  --shadow-modal:      0 24px 80px -8px rgba(0, 0, 0, 0.7);
  --hatch-line:        rgba(255, 255, 255, 0.025);

  /* Theme-aware tints (overridden by [data-theme="light"]) */
  --tint-win-faint:           rgba(74, 222, 128, 0.05);
  --tint-win-soft:            rgba(74, 222, 128, 0.10);
  --tint-win-bg:              rgba(74, 222, 128, 0.14);
  --tint-win-border:          rgba(74, 222, 128, 0.25);
  --tint-win-border-strong:   rgba(74, 222, 128, 0.45);
  --tint-loss-faint:          rgba(248, 113, 113, 0.05);
  --tint-loss-soft:           rgba(248, 113, 113, 0.10);
  --tint-loss-bg:             rgba(248, 113, 113, 0.14);
  --tint-loss-border:         rgba(248, 113, 113, 0.25);
  --tint-loss-border-strong:  rgba(248, 113, 113, 0.45);
  --tint-loss-danger-bg:      rgba(248, 113, 113, 0.10);
  --tint-loss-danger-border:  rgba(248, 113, 113, 0.30);
  --tint-neutral-bg:          rgba(156, 163, 175, 0.14);
  --tint-neutral-border:      rgba(156, 163, 175, 0.22);
  --tint-accent-faint:        rgba(79, 140, 255, 0.04);
  --tint-accent-soft:         rgba(79, 140, 255, 0.10);
  --tint-accent-bg2:          rgba(79, 140, 255, 0.18);
  --tint-accent-border:       rgba(79, 140, 255, 0.18);
  --tint-accent-dashed:       rgba(79, 140, 255, 0.40);
  --tint-accent-gradient:     linear-gradient(135deg, rgba(79, 140, 255, 0.06), rgba(108, 92, 231, 0.06));
  --row-divider:              rgba(255, 255, 255, 0.04);
  --row-hover:                rgba(255, 255, 255, 0.03);
  --row-hover-faint:          rgba(255, 255, 255, 0.025);
}

[data-theme="light"] {
  --dash-bg:           #f5f6f8;
  --dash-card:         #ffffff;
  --dash-card-hover:   #f1f3f6;
  --dash-card-2:       #f1f3f6;
  --dash-card-3:       #e6e9ee;
  --dash-border:       rgba(15, 23, 42, 0.08);
  --dash-border-strong:rgba(15, 23, 42, 0.16);
  --dash-text:         #0f172a;
  --dash-text-muted:   #475569;
  --dash-text-dim:     #94a3b8;
  --dash-faint:        #cbd5e1;
  --dash-accent:       #2563eb;
  --dash-accent-soft:  #1e40af;
  --dash-accent-bg:    rgba(37, 99, 235, 0.10);
  --dash-accent-hover: #1d4ed8;
  --dash-win:          #16a34a;
  --dash-loss:         #dc2626;
  --dash-neutral:      #6b7280;

  --bg-page:           #f5f6f8;
  --bg-sidebar:        #ffffff;
  --bg-modal:          #ffffff;
  --bg-deep:           #eef0f3;
  --bg-tile-faint:     rgba(15, 23, 42, 0.03);
  --bg-tile-week:      rgba(15, 23, 42, 0.05);
  --bg-bar-track:      rgba(15, 23, 42, 0.08);
  --overlay-dim:       rgba(15, 23, 42, 0.40);
  --shadow-modal:      0 24px 60px -8px rgba(15, 23, 42, 0.20);
  --hatch-line:        rgba(15, 23, 42, 0.04);

  /* Light-theme tint overrides — same hues, stronger so they stay visible on white */
  --tint-win-faint:           rgba(22, 163, 74, 0.07);
  --tint-win-soft:            rgba(22, 163, 74, 0.13);
  --tint-win-bg:              rgba(22, 163, 74, 0.16);
  --tint-win-border:          rgba(22, 163, 74, 0.32);
  --tint-win-border-strong:   rgba(22, 163, 74, 0.55);
  --tint-loss-faint:          rgba(220, 38, 38, 0.06);
  --tint-loss-soft:           rgba(220, 38, 38, 0.11);
  --tint-loss-bg:             rgba(220, 38, 38, 0.14);
  --tint-loss-border:         rgba(220, 38, 38, 0.30);
  --tint-loss-border-strong:  rgba(220, 38, 38, 0.55);
  --tint-loss-danger-bg:      rgba(220, 38, 38, 0.08);
  --tint-loss-danger-border:  rgba(220, 38, 38, 0.35);
  --tint-neutral-bg:          rgba(107, 114, 128, 0.13);
  --tint-neutral-border:      rgba(107, 114, 128, 0.30);
  --tint-accent-faint:        rgba(37, 99, 235, 0.06);
  --tint-accent-soft:         rgba(37, 99, 235, 0.10);
  --tint-accent-bg2:          rgba(37, 99, 235, 0.18);
  --tint-accent-border:       rgba(37, 99, 235, 0.25);
  --tint-accent-dashed:       rgba(37, 99, 235, 0.45);
  --tint-accent-gradient:     linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(108, 92, 231, 0.08));
  --row-divider:              rgba(15, 23, 42, 0.07);
  --row-hover:                rgba(15, 23, 42, 0.04);
  --row-hover-faint:          rgba(15, 23, 42, 0.03);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg-page); }
body {
  background: var(--bg-page);
  color: var(--dash-text);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  /* Extend sidebar colour under the iOS status bar / notch area */
  background-color: var(--bg-sidebar);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.glass-dashboard {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
  /* Respect iPhone notch + Dynamic Island + home indicator */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ===== Sidebar ===== */
.sidebar {
  background: var(--bg-sidebar);
  border-right: 1px solid var(--dash-border);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sidebar .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  padding: 0 6px;
}
.brand-mark {
  width: 32px; height: 32px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--dash-border);
  background: transparent;
}
.brand-mark img,
.brand-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}
.brand-name { color: var(--dash-text); letter-spacing: -0.01em; font-size: 14.5px; }

.sidenav { display: flex; flex-direction: column; gap: 2px; }
.sidenav-group-label {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dash-text-dim);
  padding: 0 10px 6px;
  font-weight: 600;
}
.sidenav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--dash-text-muted);
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.sidenav a:hover { color: var(--dash-text); background: var(--dash-card); }
.sidenav a.active {
  color: var(--dash-text);
  background: var(--dash-card);
  border-color: var(--dash-border);
}
.sidenav-icon {
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0.8;
  flex-shrink: 0;
}
.sidenav-icon svg { display: block; }
.sidebar-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.ghost-btn {
  background: var(--dash-card);
  border: 1px solid var(--dash-border);
  color: var(--dash-text-muted);
  border-radius: 7px;
  padding: 6px 12px;
  font-size: 12px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.ghost-btn:hover {
  background: var(--dash-card-hover);
  border-color: var(--dash-border-strong);
  color: var(--dash-text);
}

.main-col { min-width: 0; width: 100%; }
main {
  padding: 24px 32px 80px;
  width: 100%;
}
/* Full-bleed page wrapper used by the Trades Table view */
main.full-bleed { padding: 18px 20px 40px; }
main.full-bleed .data-table-wrap { border-radius: 10px; }
main.full-bleed .filter-bar { margin-bottom: 12px; }

/* ===== Title hierarchy =====
   .page-title    — page name (Dashboard, Journal, Notes)  — huge, bold
   .section-major — analytical sections (Calendar, By Weekday, …) — big, bold
   .section-title — subsection labels (Overview, Edge Metrics, Trades) — small, uppercase
*/
.glass-dashboard .section-title,
.glass-dashboard h2:not(.section-major):not(.page-title):not(.note-title),
.glass-dashboard h3:not(.section-major):not(.page-title):not(.note-title) {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dash-accent-soft);
  opacity: 0.85;
  border-bottom: 1px solid var(--dash-border);
  padding-bottom: 8px;
  margin: 24px 0 16px;
}
.glass-dashboard .page-title,
.page-title {
  font-size: 36px !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.1 !important;
  margin: 8px 0 22px !important;
  color: var(--dash-text) !important;
  border: none !important;
  padding: 0 !important;
  text-transform: none !important;
  opacity: 1 !important;
}
.glass-dashboard .section-major,
.section-major {
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.2 !important;
  margin: 36px 0 16px !important;
  color: var(--dash-text) !important;
  border: none !important;
  padding: 0 !important;
  text-transform: none !important;
  opacity: 1 !important;
}

/* ===== Filter bar ===== */
.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 18px;
}
.filter-bar-right { display: flex; gap: 12px; }
.add-trade-btn {
  background: var(--dash-accent);
  border: 1px solid var(--dash-accent);
  color: #ffffff;
  border-radius: 8px;
  font-weight: 600;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  transition: background 0.12s, border-color 0.12s;
}
.add-trade-btn:hover { background: var(--dash-accent-hover); border-color: var(--dash-accent-hover); }
.add-trade-icon { font-size: 18px; line-height: 1; }

/* Filter bar left group (Add Trade + Privacy toggle) */
.filter-bar-left { display: inline-flex; align-items: center; gap: 8px; }

/* Privacy / hide-P&L toggle button */
.privacy-btn {
  background: var(--dash-card);
  border: 1px solid var(--dash-border);
  color: var(--dash-text-muted);
  border-radius: 8px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}
.privacy-btn:hover {
  background: var(--dash-card-hover);
  border-color: var(--dash-border-strong);
  color: var(--dash-text);
}
.privacy-btn.active {
  background: var(--tint-accent-soft);
  border-color: var(--tint-accent-border);
  color: var(--dash-accent);
}
.privacy-btn svg { display: block; }

/* ===== Privacy mode — blur dollar amounts cleanly =====
   Each blurred element becomes its own inline-block with a small padding
   buffer; the negative margin keeps the surrounding layout untouched.
   The padding gives the blur enough room to render INSIDE the element so it
   doesn't bleed across parent borders or get clipped by overflow:hidden. */
body.privacy-mode .is-money,
body.privacy-mode .cal-day-pts,
body.privacy-mode .journal-card-profit,
body.privacy-mode .override-calc {
  display: inline-block;
  filter: blur(7px);
  -webkit-filter: blur(7px);
  padding: 4px 10px;
  margin: -4px -10px;
  border-radius: 6px;
  vertical-align: baseline;
  user-select: none;
  transition: filter 0.2s ease, -webkit-filter 0.2s ease;
}

/* The override-input is an <input>: blur PLUS transparent text so the typed
   number is fully obscured even at low blur radii. */
body.privacy-mode .override-input {
  filter: blur(7px);
  -webkit-filter: blur(7px);
  color: transparent !important;
  text-shadow: none;
  user-select: none;
}

/* Allow blurred values to render past tile-overlay clips */
body.privacy-mode .journal-card,
body.privacy-mode .trade-card {
  isolation: isolate;
}
.filter-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.filter-dd-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dash-text-muted);
}
.filter-dd-toggle {
  background: var(--dash-card);
  border: 1px solid var(--dash-border);
  color: var(--dash-text);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12.5px;
  min-width: 130px;
  text-align: left;
  transition: background 0.12s, border-color 0.12s;
}
.filter-dd-toggle:hover { background: var(--dash-card-hover); border-color: var(--dash-border-strong); }
.filter-dropdown.open .filter-dd-toggle { border-color: var(--dash-accent); }

.filter-dd-menu {
  background: var(--bg-modal);
  border: 1px solid var(--dash-border-strong);
  border-radius: 10px;
  box-shadow: var(--shadow-modal);
  position: fixed;
  z-index: 10000;
  padding: 6px;
  min-width: 160px;
}
.filter-dd-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--dash-text);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12.5px;
}
.filter-dd-item:hover { background: var(--dash-card-hover); }
.filter-dd-item.active {
  background: var(--dash-accent);
  color: #ffffff;
  font-weight: 600;
}

/* ===== Cards & KPI tiles ===== */
.glass-card {
  background: var(--dash-card);
  border: 1px solid var(--dash-border);
  border-radius: 12px;
  padding: 16px;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.glass-card:hover {
  background: var(--dash-card-hover);
  border-color: var(--dash-border-strong);
}
.glass-kpi-grid {
  display: grid;
  gap: 10px;
}
.d3-overview-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.d3-edge-grid     { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.glass-kpi-label {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dash-accent-soft);
  opacity: 0.9;
  font-weight: 600;
  margin-bottom: 4px;
}
.glass-kpi-value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--dash-text);
  line-height: 1.1;
}
.glass-kpi-sub {
  font-size: 10.5px;
  color: var(--dash-text-muted);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.kpi-win    .glass-kpi-value { color: var(--dash-win); }
.kpi-loss   .glass-kpi-value { color: var(--dash-loss); }
.kpi-accent .glass-kpi-value { color: var(--dash-accent); }

.d3-kpi-clickable { cursor: pointer; }
.d3-kpi-clickable:hover {
  border-color: var(--dash-accent) !important;
  transform: translateY(-1px);
  background: var(--tint-accent-faint) !important;
}

.d3-edge-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--dash-border);
  padding-bottom: 8px;
  margin: 24px 0 14px;
  gap: 12px;
}
.d3-edge-toggle, .trade-toggle {
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  color: var(--dash-text-muted);
  background: var(--dash-card);
  border: 1px solid var(--dash-border);
  padding: 4px 12px;
  border-radius: 7px;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.d3-edge-toggle:hover, .trade-toggle:hover {
  background: var(--dash-card-hover);
  border-color: var(--dash-border-strong);
  color: var(--dash-text);
}

/* ===== Calendar ===== */
.cal-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  padding: 4px;
  flex-wrap: wrap;
}
.cal-nav-btn {
  width: 36px; height: 36px;
  font-size: 15px;
  border-radius: 9px;
  background: var(--dash-card);
  border: 1px solid var(--dash-border);
  color: var(--dash-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cal-nav-btn:hover:not([disabled]) {
  background: var(--dash-card-hover);
  border-color: var(--dash-border-strong);
  color: var(--dash-text);
}
.cal-nav-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.cal-nav-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--dash-text);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  min-width: 130px;
  text-align: center;
}
.cal-current-btn {
  height: 36px;
  font-size: 12.5px;
  color: var(--dash-text-muted);
  background: var(--dash-card);
  border: 1px solid var(--dash-border);
  padding: 0 16px;
  border-radius: 9px;
  margin-left: 12px;
}
.cal-current-btn:hover {
  background: var(--dash-card-hover);
  border-color: var(--dash-border-strong);
  color: var(--dash-text);
}
.cal-nav-spacer { flex: 1 1 auto; }
.cal-nav-stats {
  font-size: 12px;
  color: var(--dash-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.1fr);
  grid-auto-flow: row;
  gap: 4px;
}
.cal-head {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dash-text-dim);
  text-align: center;
  padding: 6px 0 10px;
}
.cal-day {
  min-height: 100px;
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--bg-tile-faint);
  border: 1px solid var(--dash-border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-variant-numeric: tabular-nums;
  position: relative;
}
.cal-day-num {
  font-size: 11.5px;
  color: var(--dash-text-dim);
  text-align: right;
  line-height: 1;
}
.cal-day-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2px;
  margin-top: auto;
  margin-bottom: auto;
  width: 100%;
}
.cal-day-pts { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.cal-day-count { font-size: 10px; color: var(--dash-text-dim); }
.cal-day.win  { background: var(--tint-win-faint); border-color: var(--tint-win-border-strong); }
.cal-day.win  .cal-day-pts { color: var(--dash-win); }
.cal-day.loss { background: var(--tint-loss-faint); border-color: var(--tint-loss-border-strong); }
.cal-day.loss .cal-day-pts { color: var(--dash-loss); }
.cal-day.flat .cal-day-pts { color: var(--dash-text-muted); }
.cal-day.out {
  background-image: repeating-linear-gradient(-45deg,
    var(--hatch-line) 0,
    var(--hatch-line) 6px,
    transparent 6px,
    transparent 12px);
  background-color: transparent;
  border-color: var(--dash-border);
  cursor: default;
}
.cal-day.out .cal-day-num { opacity: 0.5; }
.cal-day.clickable {
  cursor: pointer;
  transition: outline 0.1s, border-color 0.1s;
}
.cal-day.clickable:hover {
  outline: 2px solid var(--dash-accent);
  outline-offset: -2px;
}

/* Today's cell — accent-blue border matching the Add Trade button */
.cal-day.today {
  border-color: var(--dash-accent) !important;
  box-shadow: inset 0 0 0 1px var(--dash-accent);
}
.cal-day.today .cal-day-num {
  color: var(--dash-accent);
  font-weight: 700;
}

/* Weekly column — visually separated from the daily columns */
.cal-day.cal-week {
  background: var(--bg-tile-week);
  border-left: 2px solid var(--dash-border-strong);
  margin-left: 6px;
  position: relative;
}
.cal-day.cal-week.win {
  background: var(--tint-win-soft);
  border-left-color: var(--tint-win-border-strong);
}
.cal-day.cal-week.loss {
  background: var(--tint-loss-danger-bg);
  border-left-color: var(--tint-loss-border-strong);
}
.cal-head.week-head {
  margin-left: 6px;
  color: var(--dash-accent-soft) !important;
  font-weight: 700;
  position: relative;
}
.cal-head.week-head::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 30%;
  bottom: 30%;
  width: 2px;
  background: var(--dash-border-strong);
  border-radius: 1px;
}

/* ===== Trade list / Trade cards ===== */
.trade-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 24px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--dash-border);
}
.trade-header h2 { margin: 0 !important; border: none !important; padding: 0 !important; }

.trade-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.trade-card {
  background: var(--dash-card);
  border: 1px solid var(--dash-border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, transform 0.12s;
}
.trade-card:hover {
  background: var(--dash-card-hover);
  border-color: var(--dash-border-strong);
  transform: translateY(-1px);
}
.trade-card-img {
  height: 120px;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-deep);
  border-bottom: 1px solid var(--dash-border);
}
.trade-card-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.trade-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.trade-card-date {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--dash-text);
  letter-spacing: -0.01em;
}
.trade-card-session {
  font-size: 10px;
  color: var(--dash-text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.trade-card-account {
  font-size: 10px;
  color: var(--dash-text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.trade-card-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pill {
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 9px;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.pill-win  { background: var(--tint-win-bg); color: var(--dash-win);  border-color: var(--tint-win-border); }
.pill-loss { background: var(--tint-loss-bg); color: var(--dash-loss); border-color: var(--tint-loss-border); }
.pill-be   { background: var(--tint-neutral-bg); color: var(--dash-text-muted); border-color: var(--tint-neutral-border); }

/* ===== Card delete affordance (top-right overlay) ===== */
.card-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  padding: 0;
}
.trade-card:hover .card-delete,
.journal-card:hover .card-delete {
  opacity: 1;
}
@media (hover: none), (pointer: coarse) {
  .card-delete { opacity: 0.75; }
}
.card-delete:hover {
  background: var(--dash-loss);
  border-color: var(--dash-loss);
  color: #ffffff;
  opacity: 1;
}
.trade-card, .journal-card { position: relative; }

/* Trades Table — delete column at end of each row */
.data-table .row-action-col {
  width: 36px;
  padding-left: 4px !important;
  padding-right: 8px !important;
  text-align: right;
}
.row-delete {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--dash-text-dim);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.12s, color 0.12s, border-color 0.12s;
  padding: 0;
}
table.data-table tbody tr:hover .row-delete { opacity: 1; }
@media (hover: none), (pointer: coarse) {
  .row-delete { opacity: 0.7; }
}
.row-delete:hover {
  background: var(--dash-loss);
  border-color: var(--dash-loss);
  color: #ffffff;
  opacity: 1;
}

/* ===== Tables ===== */
.glass-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.glass-table th, .glass-table td {
  padding: 10px 12px;
  text-align: left;
}
.glass-table th {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dash-text-muted);
  border-bottom: 1px solid var(--dash-border);
  font-weight: 600;
}
.glass-table td {
  border-bottom: 1px solid var(--row-divider);
  font-variant-numeric: tabular-nums;
}
.glass-table td.num, .glass-table th.num { text-align: right; }
.weekday-best td { background: var(--tint-accent-faint); }
.weekday-best-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 4px;
  background: var(--dash-accent-bg);
  color: var(--dash-accent);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bar-bg {
  margin-top: 4px;
  width: 100%;
  height: 4px;
  background: var(--bg-bar-track);
  border-radius: 2px;
  overflow: hidden;
}
.bar-fill { height: 100%; background: var(--dash-accent); }

.conf-pair { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.conf-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--tint-accent-soft);
  color: var(--dash-accent-soft);
  font-size: 11.5px;
  border: 1px solid var(--tint-accent-bg2);
}
.conf-x { color: var(--dash-text-dim); }

/* ===== Modals ===== */
.trade-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-dim);
  backdrop-filter: blur(6px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadein 0.16s ease;
}
.trade-modal-overlay.closing { opacity: 0; transition: opacity 0.18s ease; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.trade-modal {
  background: var(--bg-modal);
  border: 1px solid var(--dash-border-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-modal);
  width: 100%;
  max-width: 1000px;
  max-height: 86vh;
  overflow-y: auto;
  padding: 24px 28px;
}
.trade-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.trade-modal-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--dash-text);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.trade-modal-sub {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.trade-modal-actions { display: flex; gap: 8px; }
.trade-modal-close {
  background: var(--dash-card-2);
  border: 1px solid var(--dash-border-strong);
  border-radius: 6px;
  color: var(--dash-text-muted);
  width: 30px;
  height: 30px;
  font-size: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.trade-modal-close:hover {
  background: var(--tint-accent-bg2);
  border-color: var(--dash-accent);
  color: var(--dash-text);
}
.day-report-btn {
  background: var(--dash-card-2);
  border: 1px solid var(--dash-border);
  color: var(--dash-text);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
}
.day-report-btn:hover {
  background: var(--dash-card-3);
  border-color: var(--dash-accent);
}

/* ===== KPI detail modal ===== */
.kpi-modal-value { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin-top: 4px; }
.kpi-modal-sub { font-size: 11.5px; color: var(--dash-text-muted); margin-top: 2px; }
.kpi-modal-section { margin-top: 22px; }
.kpi-modal-section-title {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dash-text-muted);
  margin-bottom: 8px;
}
.kpi-modal-empty {
  padding: 24px;
  font-size: 13px;
  opacity: 0.5;
  text-align: center;
}
.kpi-modal-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--dash-border);
}
.kpi-modal-stats > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dash-text-muted);
}
.stat-val { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-val.win  { color: var(--dash-win); }
.stat-val.loss { color: var(--dash-loss); }

/* ===== Override editor ===== */
.override-section {
  background: var(--bg-tile-faint);
  border: 1px solid var(--dash-border);
  border-radius: 10px;
  margin-bottom: 18px;
  padding: 12px 16px;
}
.override-section summary {
  color: var(--dash-text-muted);
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 4px 0;
  font-size: 12px;
}
.override-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.override-row {
  display: grid;
  grid-template-columns: 1fr auto 150px;
  gap: 12px;
  align-items: center;
}
.override-account { font-weight: 500; font-size: 13px; }
.override-calc { font-size: 11.5px; color: var(--dash-text-muted); }
.override-input {
  background: var(--dash-card);
  border: 1px solid var(--dash-border);
  color: var(--dash-text);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  width: 100%;
}
.override-input:focus {
  border-color: var(--dash-accent);
  outline: none;
}
.override-actions { display: flex; gap: 8px; margin-top: 14px; }
.override-save {
  background: var(--dash-accent);
  border: 1px solid var(--dash-accent);
  color: #fff;
  font-weight: 600;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12.5px;
}
.override-save:hover { background: var(--dash-accent-hover); border-color: var(--dash-accent-hover); }
.override-clear {
  background: var(--dash-card);
  border: 1px solid var(--dash-border-strong);
  color: var(--dash-text);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12.5px;
}
.override-clear:hover { background: var(--dash-card-2); }

/* ===== Trade form modal ===== */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 8px;
}
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dash-text-muted);
  font-weight: 600;
}
.form-field input, .form-field select, .form-field textarea {
  background: var(--dash-card);
  border: 1px solid var(--dash-border);
  color: var(--dash-text);
  border-radius: 7px;
  padding: 9px 12px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  line-height: 1.4;
  min-height: 0;
}
/* iOS Safari renders date / datetime inputs with native styling (taller,
   center-aligned text, rounded). Force them to match the others. */
.form-field input[type="date"],
.form-field input[type="datetime-local"],
.form-field input[type="time"],
.form-field input[type="number"] {
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
  min-height: 0;
  height: auto;
  line-height: 1.4;
  display: block;
}
/* iOS dims the date placeholder colour — bring it back in line */
.form-field input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  min-height: 0;
}
.form-field input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
  opacity: 0.6;
  cursor: pointer;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--dash-accent);
  outline: none;
  background: var(--dash-card-2);
}
.form-field textarea { resize: vertical; min-height: 60px; }

/* Combobox field — looks like an input but signals "list available" with a chevron */
.form-field.combo-field { position: relative; }
.form-field.combo-field input {
  padding-right: 32px;
  background-image: linear-gradient(45deg, transparent 50%, var(--dash-text-dim) 50%),
                    linear-gradient(135deg, var(--dash-text-dim) 50%, transparent 50%);
  background-position: calc(100% - 16px) 53%, calc(100% - 11px) 53%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.form-field.combo-field input:focus {
  background-image: linear-gradient(45deg, transparent 50%, var(--dash-accent) 50%),
                    linear-gradient(135deg, var(--dash-accent) 50%, transparent 50%);
}
.form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--dash-border);
}
.form-actions .primary {
  background: var(--dash-accent);
  border: 1px solid var(--dash-accent);
  color: #fff;
  font-weight: 600;
  border-radius: 7px;
  padding: 9px 18px;
  font-size: 13px;
}
.form-actions .primary:hover { background: var(--dash-accent-hover); border-color: var(--dash-accent-hover); }
.form-actions .secondary {
  background: var(--dash-card);
  border: 1px solid var(--dash-border);
  color: var(--dash-text);
  border-radius: 7px;
  padding: 9px 18px;
  font-size: 13px;
}
.form-actions .secondary:hover { background: var(--dash-card-hover); border-color: var(--dash-border-strong); }

/* Custom date range modal — preset chips */
.range-preset {
  background: var(--dash-card-2);
  border: 1px solid var(--dash-border);
  color: var(--dash-text-muted);
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.range-preset:hover {
  background: var(--tint-accent-soft);
  border-color: var(--tint-accent-border);
  color: var(--dash-accent);
}

.upload-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--dash-card);
  border: 1px dashed var(--dash-border-strong);
  border-radius: 10px;
  padding: 14px;
  font-size: 12px;
  transition: border-color 0.15s, background 0.15s;
}
.upload-row.dragover {
  border-color: var(--dash-accent);
  background: var(--tint-accent-soft);
}
.upload-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.upload-hint {
  color: var(--dash-text-muted);
  font-size: 12px;
}
.upload-hint kbd {
  background: var(--bg-deep);
  border: 1px solid var(--dash-border-strong);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--dash-text);
  margin: 0 2px;
}
.upload-preview {
  position: relative;
  background: var(--bg-deep);
  border: 1px solid var(--dash-border);
  border-radius: 8px;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.upload-preview img {
  max-height: 280px;
  width: 100%;
  object-fit: contain;
  display: block;
}
.upload-empty {
  color: var(--dash-text-dim);
  font-size: 12px;
  padding: 28px 16px;
}
.upload-clear {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.upload-clear:hover {
  background: var(--dash-loss);
  border-color: var(--dash-loss);
}

/* ===== Note / detail page ===== */
.note-page { max-width: 880px; margin: 0 auto; }
.note-breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--dash-text-dim);
  margin-bottom: 22px;
}
.note-breadcrumb a { color: var(--dash-text-muted); }
.note-breadcrumb a:hover { color: var(--dash-text); }
.note-breadcrumb .sep { opacity: 0.5; }
.note-breadcrumb .current { color: var(--dash-text); }
.note-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--dash-text-muted);
  margin-bottom: 18px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
}
.note-back:hover { color: var(--dash-text); background: var(--dash-card); border-color: var(--dash-border); }
.note-title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
  color: var(--dash-text);
  border: none;
  padding: 0;
  text-transform: none;
}

/* Property panel (Obsidian-style) */
.props-panel { margin: 0 0 28px; }
.props-header {
  font-size: 14px;
  font-weight: 600;
  color: var(--dash-text);
  margin: 0 0 14px;
  letter-spacing: -0.005em;
  text-transform: none;
  opacity: 1;
  border: none;
  padding: 0;
}
.prop-row {
  display: grid;
  grid-template-columns: 24px 150px 1fr;
  gap: 12px;
  align-items: center;
  padding: 6px 8px;
  font-size: 13.5px;
  border-radius: 6px;
  min-height: 28px;
}
.prop-row:hover { background: var(--row-hover-faint); }
.prop-icon {
  width: 18px; height: 18px;
  color: var(--dash-text-dim);
  opacity: 0.65;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.prop-icon svg { display: block; }
.prop-label {
  color: var(--dash-text-muted);
  font-size: 13px;
}
.prop-value {
  color: var(--dash-text);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.prop-value .date-icon {
  opacity: 0.6;
  display: inline-flex;
  margin-right: 2px;
  color: var(--dash-text-dim);
}
.prop-value .link-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--dash-text-dim);
  font-size: 11px;
  opacity: 0.7;
}
.prop-value a.wikilink-prop {
  color: var(--dash-accent);
  border-bottom: 1px dashed var(--tint-accent-dashed);
  padding-bottom: 1px;
}
.prop-value a.wikilink-prop:hover { border-bottom-style: solid; }
.prop-value.empty { color: var(--dash-text-dim); font-style: italic; }
.prop-add {
  margin-top: 8px;
  padding: 8px 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--dash-text-dim);
  cursor: default;
  user-select: none;
}
.prop-add::before { content: "+"; font-size: 16px; opacity: 0.8; }
.props-divider {
  height: 1px;
  background: var(--dash-border);
  margin: 10px 0 22px;
}

/* Simple meta row used for non-trade notes */
.note-meta {
  display: flex; gap: 12px; flex-wrap: wrap;
  font-size: 12px;
  color: var(--dash-text-muted);
  font-variant-numeric: tabular-nums;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--dash-border);
}
.note-meta b { color: var(--dash-text); font-weight: 600; margin-right: 4px; }
.note-body { font-size: 14.5px; line-height: 1.65; color: var(--dash-text); }
.note-body h1 {
  font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
  margin: 24px 0 10px; color: var(--dash-text);
  border: none; padding: 0; text-transform: none;
}
.note-body h2 {
  font-size: 16px; font-weight: 600;
  margin: 22px 0 8px;
  color: var(--dash-text);
  border: none; padding: 0; text-transform: none;
  letter-spacing: -0.005em;
  opacity: 1;
}
.note-body h3 {
  font-size: 14px; font-weight: 600;
  margin: 18px 0 6px;
  color: var(--dash-text-muted);
  border: none; padding: 0; text-transform: none;
  letter-spacing: 0;
  opacity: 1;
}
.note-body p { margin: 0 0 12px; }
.note-body ul, .note-body ol { margin: 0 0 14px; padding-left: 24px; }
.note-body li { margin-bottom: 4px; }
.note-body code {
  background: var(--bg-bar-track);
  border: 1px solid var(--dash-border);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12.5px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.note-body pre {
  background: var(--bg-deep);
  border: 1px solid var(--dash-border);
  border-radius: 8px;
  padding: 14px 16px;
  overflow-x: auto;
  font-size: 12.5px;
  line-height: 1.5;
  margin: 12px 0 16px;
}
.note-body pre code {
  background: transparent;
  border: none;
  padding: 0;
}
.note-body blockquote {
  border-left: 3px solid var(--dash-accent);
  padding: 6px 14px;
  margin: 10px 0;
  color: var(--dash-text-muted);
  background: var(--tint-accent-faint);
}
.note-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 12px 0 20px;
}
.note-body th, .note-body td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--dash-border);
  text-align: left;
}
.note-body th {
  background: var(--row-hover);
  font-weight: 600;
  font-size: 11.5px;
  color: var(--dash-text-muted);
  letter-spacing: 0.04em;
}
.note-body img.md-embed {
  max-width: 100%;
  border-radius: 8px;
  border: 1px solid var(--dash-border);
  display: block;
  margin: 12px 0;
}
.note-body a.wikilink {
  color: var(--dash-accent);
  text-decoration: none;
  border-bottom: 1px dashed var(--tint-accent-dashed);
}
.note-body a.wikilink:hover { border-bottom-style: solid; }
.note-body a.wikilink.broken { color: var(--dash-loss); cursor: help; }
.note-body input[type="checkbox"] { margin-right: 6px; }

/* Backlinks panel */
.backlinks {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--dash-border);
}
.backlinks h4 {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dash-text-muted);
  margin: 0 0 12px;
}
.backlinks ul { list-style: none; margin: 0; padding: 0; }
.backlinks li {
  padding: 6px 10px;
  border-radius: 6px;
  margin-bottom: 4px;
  background: var(--dash-card);
  border: 1px solid var(--dash-border);
  font-size: 12.5px;
}
.backlinks li a { color: var(--dash-accent-soft); }
.backlinks li:hover { background: var(--dash-card-hover); border-color: var(--dash-border-strong); }

/* ===== Journal gallery (big trade cards) ===== */
.journal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.journal-card {
  background: var(--dash-card);
  border: 1px solid var(--dash-border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, transform 0.12s;
}
.journal-card:hover {
  background: var(--dash-card-hover);
  border-color: var(--dash-border-strong);
  transform: translateY(-2px);
}
.journal-card-img {
  height: 180px;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-deep);
  border-bottom: 1px solid var(--dash-border);
}
.journal-card-img.placeholder {
  height: 64px;
  background: linear-gradient(135deg, var(--tint-accent-faint), rgba(108, 92, 231, 0.06));
}
.journal-card-body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.journal-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  /* Reserve room for two lines of date — keeps PnL at the same height across all cards */
  min-height: calc(1.25em * 2);
}
.journal-card-date {
  font-size: 14px;
  font-weight: 600;
  color: var(--dash-text);
  letter-spacing: -0.01em;
  line-height: 1.25;
  flex: 1 1 auto;
  min-width: 0;
}
.journal-card-header .pill { flex-shrink: 0; }
.journal-card-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 11px;
  color: var(--dash-text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-wrap: wrap;
}
.journal-card-meta .dot { opacity: 0.5; }
.journal-card-meta .pair {
  color: var(--dash-accent-soft);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.journal-card-profit {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.journal-card-profit.win  { color: var(--dash-win); }
.journal-card-profit.loss { color: var(--dash-loss); }
.journal-card-profit.flat { color: var(--dash-text-muted); }

.journal-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 18px;
  gap: 12px;
  flex-wrap: wrap;
}
.journal-toolbar .count { color: var(--dash-text-muted); font-size: 12.5px; }
.journal-toolbar .count b { color: var(--dash-text); font-weight: 600; }

/* ===== Trade Detail page ===== */
.trade-detail {
  max-width: 1100px;
  margin: 0 auto;
}
.td-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.td-toolbar .note-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--dash-text-muted);
  padding: 6px 12px;
  border-radius: 7px;
  border: 1px solid transparent;
}
.td-toolbar .note-back:hover {
  color: var(--dash-text);
  background: var(--dash-card);
  border-color: var(--dash-border);
}
.td-toolbar .td-edit { margin-left: auto; }
.td-toolbar .td-delete {
  display: inline-flex;
  align-items: center;
  color: var(--dash-text-muted);
}
.td-toolbar .td-delete:hover {
  background: var(--tint-loss-danger-bg);
  border-color: var(--tint-loss-danger-border);
  color: var(--dash-loss);
}
.td-toolbar .td-delete svg { width: 14px; height: 14px; }

.td-header {
  margin-bottom: 24px;
}
.td-eyebrow {
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--dash-text-muted);
  margin-bottom: 8px;
}
.td-title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 14px;
  color: var(--dash-text);
  border: none;
  padding: 0;
  text-transform: none;
}
.td-header-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.td-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--dash-card);
  border: 1px solid var(--dash-border);
  color: var(--dash-text-muted);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.td-tag-dir-buy {
  background: var(--tint-win-soft);
  border-color: var(--tint-win-border);
  color: var(--dash-win);
}
.td-tag-dir-sell {
  background: var(--tint-loss-soft);
  border-color: var(--tint-loss-border);
  color: var(--dash-loss);
}

/* Main area: chart + full data table */
.td-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 28px;
  align-items: start;
}
.td-header-slim { margin-bottom: 22px; }

/* The full data table on the right of the chart — one row per field */
.td-table {
  background: var(--dash-card);
  border: 1px solid var(--dash-border);
  border-radius: 12px;
  margin: 0;
  padding: 4px 0;
  min-width: 0;
}
.td-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--row-divider);
  align-items: center;
  min-width: 0;
}
.td-row:last-child { border-bottom: none; }
.td-row dt {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dash-text-muted);
  font-weight: 600;
  margin: 0;
}
.td-row dd {
  margin: 0;
  font-size: 14px;
  color: var(--dash-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  min-width: 0;
  word-break: break-word;
}
/* Long-text rows (like Notes) — label stays on its own line, value flows below */
.td-row.td-row-long {
  display: block;
  padding: 12px 18px 14px;
}
.td-row.td-row-long dt {
  display: block;
  margin-bottom: 6px;
}
.td-row.td-row-long dd {
  display: block;
  font-size: 13.5px;
  color: var(--dash-text);
  line-height: 1.55;
  white-space: pre-wrap;
}
.td-chart {
  background: var(--bg-deep);
  border: 1px solid var(--dash-border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
}
.td-chart img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: contain;
}
.td-chart-empty {
  flex-direction: column;
  gap: 12px;
  color: var(--dash-text-dim);
  font-size: 13px;
  padding: 60px 20px;
}
.td-chart-empty svg {
  width: 36px;
  height: 36px;
  opacity: 0.4;
}

.td-hero-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.td-hero-stat {
  background: var(--dash-card);
  border: 1px solid var(--dash-border);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.td-hero-stat.td-stat-win { border-color: var(--tint-win-border); }
.td-hero-stat.td-stat-loss { border-color: var(--tint-loss-border); }
.td-stat-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dash-text-muted);
  font-weight: 600;
}
.td-stat-value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--dash-text);
  line-height: 1.15;
}
.td-stat-win  .td-stat-value { color: var(--dash-win); }
.td-stat-loss .td-stat-value { color: var(--dash-loss); }
.td-stat-flat .td-stat-value { color: var(--dash-text-muted); }

/* Sections: Setup / Journal / Backlinks */
.td-section {
  margin-top: 32px;
}
.td-section-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dash-text-muted);
  margin: 0 0 12px;
  border: none;
  padding: 0;
  opacity: 1;
}

/* Setup tiles — grid layout matching hero-stats style */
.td-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.td-tile {
  background: var(--dash-card);
  border: 1px solid var(--dash-border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.td-tile-wide { grid-column: 1 / -1; }
.td-tile-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dash-text-muted);
  font-weight: 600;
}
.td-tile-value {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--dash-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  word-break: break-word;
}

/* Journal entry */
.td-journal {
  background: var(--dash-card);
  border: 1px solid var(--dash-border);
  border-radius: 12px;
  padding: 18px 22px;
}
.td-notes-text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--dash-text);
  margin: 0;
  white-space: pre-wrap;
}
.td-journal .note-body { font-size: 14px; }
.td-journal .note-body p:first-child { margin-top: 0; }
.td-journal .note-body p:last-child { margin-bottom: 0; }

/* Backlinks inside the trade detail layout */
.trade-detail .backlinks {
  margin-top: 0;
  padding-top: 0;
  border: none;
}
.trade-detail .backlinks h4 { display: none; }
.trade-detail .backlinks li {
  display: inline-block;
  margin: 0 8px 8px 0;
  padding: 8px 12px;
}
.trade-detail .backlinks ul { display: flex; flex-wrap: wrap; }

/* Desktop layout — chart left + data table right from 880px+ */
@media (min-width: 880px) {
  .td-main {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }
  .td-chart { min-height: 380px; }
}

/* Mobile tweaks */
@media (max-width: 600px) {
  .td-title { font-size: 24px; }
  .td-chart { min-height: 200px; }
  .td-row { grid-template-columns: 110px 1fr; padding: 10px 14px; }
  .td-row dt { font-size: 9.5px; }
  .td-row dd { font-size: 13px; }
  .td-row.td-row-long { padding: 12px 14px 14px; }
}

/* ===== Notes index pages ===== */
.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.notes-card {
  background: var(--dash-card);
  border: 1px solid var(--dash-border);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.12s, background 0.12s, transform 0.12s;
}
.notes-card:hover {
  background: var(--dash-card-hover);
  border-color: var(--dash-border-strong);
  transform: translateY(-1px);
}
.notes-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--dash-text);
  letter-spacing: -0.01em;
}
.notes-card-type {
  font-size: 10px;
  color: var(--dash-accent-soft);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.notes-card-tags {
  font-size: 11px;
  color: var(--dash-text-muted);
  margin-top: 4px;
}

/* ===== Settings modal ===== */
.settings-section { margin-top: 22px; }
.settings-section:first-of-type { margin-top: 8px; }
.settings-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dash-text-muted);
  margin-bottom: 10px;
}
.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: var(--bg-tile-faint);
  border: 1px solid var(--dash-border);
  border-radius: 10px;
}
.settings-row-text { display: flex; flex-direction: column; gap: 3px; }
.settings-row-title { font-size: 13.5px; font-weight: 500; color: var(--dash-text); }
.settings-row-hint  { font-size: 11.5px; color: var(--dash-text-muted); }

.theme-switch {
  display: inline-flex;
  background: var(--bg-deep);
  border: 1px solid var(--dash-border);
  border-radius: 8px;
  padding: 3px;
  gap: 0;
}
.theme-btn {
  background: transparent;
  border: none;
  color: var(--dash-text-muted);
  padding: 6px 14px;
  font-size: 12.5px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
}
.theme-btn:hover { color: var(--dash-text); }
.theme-btn.active {
  background: var(--dash-card);
  color: var(--dash-text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.settings-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.settings-actions button {
  flex: 1 1 140px;
  padding: 10px 14px;
  font-size: 13px;
}
.settings-danger {
  color: var(--dash-loss) !important;
  border-color: var(--tint-loss-danger-border) !important;
}
.settings-danger:hover {
  background: var(--tint-loss-danger-bg) !important;
}

/* Settings gear button in sidebar bottom */
.settings-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: 1px solid var(--dash-border);
  color: var(--dash-text-muted);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.settings-btn:hover {
  background: var(--dash-card);
  color: var(--dash-text);
  border-color: var(--dash-border-strong);
}
.settings-btn svg { flex-shrink: 0; }

/* ===== Toast ===== */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--dash-card);
  border: 1px solid var(--dash-border-strong);
  color: var(--dash-text);
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px;
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.55);
  z-index: 2000;
}

/* ===== Trades data table (Obsidian-style) ===== */
.data-table-wrap {
  background: var(--dash-card);
  border: 1px solid var(--dash-border);
  border-radius: 12px;
  overflow: hidden;
}
.data-table-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--dash-border);
  font-size: 12px;
  color: var(--dash-text-muted);
}
.data-table-toolbar .count {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.data-table-toolbar .count b { color: var(--dash-text); font-weight: 600; }
.data-table-toolbar input[type="search"] {
  background: var(--bg-deep);
  border: 1px solid var(--dash-border);
  color: var(--dash-text);
  border-radius: 7px;
  padding: 6px 12px;
  font-size: 12.5px;
  min-width: 240px;
}
.data-table-toolbar input[type="search"]:focus {
  border-color: var(--dash-accent);
  outline: none;
}
.data-table-scroll {
  overflow-x: auto;
  max-height: calc(100vh - 220px);
}
table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
table.data-table th, table.data-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--row-divider);
  white-space: nowrap;
}
table.data-table thead th {
  position: sticky;
  top: 0;
  background: #13161e;
  z-index: 1;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dash-text-muted);
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--dash-border);
}
table.data-table thead th .sort {
  display: inline-block;
  margin-left: 4px;
  opacity: 0.5;
}
table.data-table thead th.sorted .sort { opacity: 1; color: var(--dash-accent); }
table.data-table tbody tr:hover { background: var(--row-hover); cursor: pointer; }
table.data-table td.num { text-align: right; }
table.data-table td a {
  color: var(--dash-accent);
  border-bottom: 1px dashed var(--tint-accent-dashed);
}
table.data-table td a:hover { border-bottom-style: solid; }

/* Pill-style cell labels in the data table */
.cell-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.cell-account  { background: rgba(96, 165, 250, 0.10); color: #93c5fd; border-color: rgba(96, 165, 250, 0.22); }
.cell-session  { background: rgba(251, 146, 60, 0.10); color: #fdba74; border-color: rgba(251, 146, 60, 0.22); }
.cell-direction.buy  { background: var(--tint-win-bg); color: var(--dash-win);  border-color: var(--tint-win-border); }
.cell-direction.sell { background: var(--tint-loss-bg); color: var(--dash-loss); border-color: var(--tint-loss-border); }
.cell-entry    { background: rgba(192, 132, 252, 0.10); color: #d8b4fe; border-color: rgba(192, 132, 252, 0.22); }
.cell-result.win  { background: var(--tint-win-bg); color: var(--dash-win);  border-color: var(--tint-win-border); }
.cell-result.loss { background: var(--tint-loss-bg); color: var(--dash-loss); border-color: var(--tint-loss-border); }
.cell-result.be   { background: var(--tint-neutral-bg); color: var(--dash-text-muted); border-color: var(--tint-neutral-border); }
.cell-notes {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--dash-text-muted);
}

/* ===== Add-Note button (in toolbar) ===== */
.add-note-btn {
  background: var(--dash-card);
  border: 1px solid var(--dash-border-strong);
  color: var(--dash-text);
  border-radius: 8px;
  font-weight: 500;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.add-note-btn:hover { background: var(--dash-card-hover); border-color: var(--dash-accent); color: var(--dash-text); }

/* ===== Responsive ===== */
/* Wide screens — give KPIs more breathing room */
@media (min-width: 1600px) {
  .glass-dashboard { --sidebar-w: 240px; }
  main { padding: 28px 40px 80px; }
  main.full-bleed { padding: 20px 28px 40px; }
  .d3-overview-grid { gap: 14px; }
  .d3-edge-grid     { gap: 14px; }
  .glass-kpi-value  { font-size: 26px; }
}

/* Mid-range — slightly less padding, narrower sidebar */
@media (max-width: 1280px) {
  .glass-dashboard { --sidebar-w: 200px; }
  main { padding: 22px 24px 70px; }
}

/* Tablet & narrow — sidebar moves to top, KPIs go 3-col / 2-col */
@media (max-width: 960px) {
  .glass-dashboard {
    grid-template-columns: 1fr;
    padding-top: 0;
  }
  /* Topbar is FIXED at top of viewport — guaranteed visible across all scroll positions */
  .sidebar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    /* Pad TOP for iPhone notch / Dynamic Island in standalone mode */
    padding-top: max(10px, env(safe-area-inset-top));
    padding-bottom: 10px;
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
    border-right: none;
    border-bottom: 1px solid var(--dash-border);
    overflow-x: auto;
    background: var(--bg-sidebar);
  }
  /* Push main content down so it isn't hidden behind the fixed topbar */
  .main-col {
    padding-top: calc(56px + env(safe-area-inset-top));
  }
  /* Icon-only navigation on mobile — labels hidden, fits without horizontal scroll */
  .sidebar { overflow-x: visible; gap: 6px; }
  .brand-name { display: none; }
  /* Brand mark same dimensions as nav buttons */
  .brand-mark {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
  }
  .sidenav { gap: 4px; }
  .sidenav a span:not(.sidenav-icon) { display: none; }
  .sidenav a {
    padding: 0;
    width: 38px;
    height: 38px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    font-size: 0;
    flex-shrink: 0;
  }
  /* All icons render at the SAME visual size, regardless of SVG/text origin */
  .sidenav-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .sidenav-icon svg {
    width: 18px;
    height: 18px;
    display: block;
  }
  .sidebar-bottom {
    flex-direction: row;
    margin-top: 0;
    margin-left: auto;
    gap: 4px;
    flex-shrink: 0;
  }
  .settings-btn {
    padding: 0;
    width: 38px;
    height: 38px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    flex-shrink: 0;
  }
  .settings-btn span:not(.sidenav-icon) { display: none; }
  .settings-btn svg { width: 18px; height: 18px; display: block; }
  .sidebar .brand { flex-shrink: 0; }
  .sidenav { flex-direction: row; gap: 4px; flex-wrap: nowrap; }
  .sidenav-group-label { display: none; }
  .sidenav a { padding: 6px 12px; font-size: 12.5px; white-space: nowrap; }
  .sidebar-bottom { flex-direction: row; margin-top: 0; margin-left: auto; }
  .d3-overview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .d3-edge-grid     { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .form-grid { grid-template-columns: 1fr; }
  main { padding: 18px 18px 60px; }
  main.full-bleed { padding: 12px 12px 40px; }
  .cal-day { min-height: 80px; padding: 6px 8px; }
  .cal-day-pts { font-size: 13px; }
  .note-page { max-width: 100%; }
  .prop-row { grid-template-columns: 22px 120px 1fr; gap: 8px; }
}

/* Phone — KPIs go 3-col (Obsidian style), calendar compact, filter bar stacks */
@media (max-width: 600px) {
  /* Filter bar — keep Add-Trade on the left, dropdowns stacked on the right */
  .filter-bar {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  .filter-bar-right { gap: 8px; flex-wrap: nowrap; }
  /* Add-Trade reduces to icon-only */
  .add-trade-btn { padding: 8px 11px; gap: 0; }
  .add-trade-btn span:not(.add-trade-icon) { display: none; }
  /* Hide PERIOD / ACCOUNT labels — just show the dropdown values */
  .filter-dd-label { display: none; }
  .filter-dropdown { gap: 0; }
  .filter-dd-toggle { padding: 7px 12px; min-width: 100px; font-size: 12px; }

  /* KPI tiles: 3-up on phone (matches Obsidian reference). Edge stays 2-up. */
  .d3-overview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px; }
  .d3-edge-grid     { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
  .d3-kpi-host .glass-card { padding: 12px 12px 14px; }
  .glass-kpi-label { font-size: 8.5px; letter-spacing: 0.12em; }
  .glass-kpi-value { font-size: 19px; }
  .glass-kpi-sub { font-size: 10px; }

  /* Calendar */
  .cal-grid { gap: 3px; }
  .cal-day { min-height: 78px; padding: 5px 3px 6px; border-radius: 7px; }
  .cal-day-num { font-size: 10.5px; padding-right: 2px; }
  .cal-day-body { gap: 2px; padding: 0; width: 100%; }
  .cal-day-pts {
    font-size: 12.5px;
    letter-spacing: -0.04em;
    font-weight: 800;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    max-width: none;
    text-align: center;
    width: 100%;
  }
  .cal-day-count { font-size: 9.5px; letter-spacing: -0.02em; }
  /* Weekly column on mobile: slight extra breathing room */
  .cal-day.cal-week { margin-left: 3px; padding-left: 4px; padding-right: 4px; }
  .cal-nav { gap: 8px; margin-bottom: 10px; }
  .cal-nav-btn { width: 32px; height: 32px; font-size: 14px; }
  .cal-nav-title { font-size: 14px; min-width: 100px; }
  .cal-current-btn { padding: 0 12px; font-size: 11.5px; height: 32px; margin-left: 4px; }
  .cal-nav-stats { font-size: 11px; }

  /* Trade preview cards — 2-up on phone */
  .trade-grid { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .trade-card-img { height: 96px; }
  .trade-card-body { padding: 10px 12px; gap: 6px; }
  .trade-card-date { font-size: 12px; }
  .trade-card-session, .trade-card-account { font-size: 9.5px; }

  /* Journal big cards — also 2-up, slightly smaller image */
  .journal-grid { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .journal-card-img { height: 130px; }
  .journal-card-body { padding: 12px 13px; gap: 6px; }
  .journal-card-date { font-size: 12.5px; }
  .journal-card-meta { font-size: 9.5px; letter-spacing: 0.06em; gap: 4px; }
  .journal-card-profit { font-size: 17px; }

  /* Tables — narrow columns, no horizontal scroll, all cells in one line */
  .glass-card { padding: 10px; }
  .glass-table {
    font-size: 10.5px;
    letter-spacing: -0.01em;
    table-layout: auto;
    width: 100%;
  }
  .glass-table th, .glass-table td {
    padding: 7px 4px !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
  }
  .glass-table th {
    font-size: 8.5px !important;
    letter-spacing: 0.04em !important;
    padding: 7px 3px !important;
  }
  /* First column (label like "Mon", "NY AM") slightly more padding-left */
  .glass-table th:first-child, .glass-table td:first-child {
    padding-left: 8px !important;
  }
  .glass-table th:last-child, .glass-table td:last-child {
    padding-right: 8px !important;
  }
  /* Hide the inline winrate bar on phones — text alone is clearer */
  .glass-table .bar-bg { display: none !important; }
  /* "Best" badge smaller on mobile */
  .weekday-best-badge { padding: 1px 5px; font-size: 8.5px; margin-left: 4px; }
  /* Confluence pairs stay on one line, pills smaller */
  .conf-pair { flex-wrap: nowrap !important; gap: 4px; }
  .conf-tag { padding: 1px 5px; font-size: 10px; white-space: nowrap; }

  /* Trades Table page */
  .data-table-toolbar { flex-wrap: wrap; padding: 10px 12px; gap: 10px; }
  .data-table-toolbar input[type="search"] { min-width: 0; flex: 1 1 180px; }

  /* Main padding */
  main { padding: 14px 14px 60px; }
  main.full-bleed { padding: 10px 8px 40px; }

  /* Note detail / property panel */
  .prop-row { grid-template-columns: 20px 110px 1fr; gap: 8px; font-size: 12.5px; padding: 5px 6px; }
  .prop-label { font-size: 12px; }
  .note-title { font-size: 26px; }

  /* Titles scale down a notch */
  .page-title { font-size: 28px; margin-bottom: 18px; }
  .section-major { font-size: 22px; margin: 28px 0 14px; }

  /* Sidebar (when horizontal) */
  .sidebar { padding: 8px 12px; }
  .brand-name { display: none; }
}