/* ═══════════════════════════════════════════════
   Design Tokens
═══════════════════════════════════════════════ */
:root {
  --blue:       #3067F0;
  --blue-hover: #4A7AF5;
  --blue-dim:   rgba(48,103,240,0.12);
  --blue-glow:  rgba(48,103,240,0.25);
  --yellow:     #C77600;
  --amber:      #f59e0b;
  --yellow-dim: rgba(199,118,0,0.12);
  --purple:     #6D37FF;
  --cyan:       #00BFDB;
  --gain:       #1BB55F;
  --gain-dim:   rgba(27,181,95,0.12);
  --green:      #1BB55F;
  --accent:     #3067F0;
  --loss:       #F44747;
  --loss-dim:   rgba(244,71,71,0.12);

  --display:  'Montserrat', sans-serif;
  --sans:     'IBM Plex Sans', sans-serif;
  --mono:     'IBM Plex Sans', sans-serif;
  --headline: 'Manrope', 'Montserrat', sans-serif;
  --data:     'Inter', 'IBM Plex Sans', sans-serif;

  --r-card:  20px;
  --r-btn:   10px;
  --r-input: 10px;
  --r-pill:  100px;
  --r-sm:    14px;

  --shadow-sm:  0 1px 4px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.12);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.24), 0 4px 12px rgba(0,0,0,.16);
  --trans: .2s cubic-bezier(.4,0,.2,1);
}

/* ── DARK THEME (default) ── */
[data-theme="dark"] {
  --bg:        #0E1721;
  --surface:   #16202C;
  --surface2:  #1E2D3D;
  --surface3:  #243648;
  --border:    rgba(255,255,255,0.07);
  --border-hi: rgba(48,103,240,0.4);
  --text:      #DDE6F0;
  --text-dim:  #7A8FA0;
  --muted:     #49606F;
  --th-bg:     #1A2535;
  --row-hover: rgba(48,103,240,0.04);
  --topbar-bg: rgba(14,23,33,0.92);
  --glow-bg:   radial-gradient(ellipse 70% 60% at 60% -10%, rgba(48,103,240,0.1) 0%, transparent 65%);
}

/* ── LIGHT THEME ── */
[data-theme="light"] {
  --bg:        #F0F4F8;
  --surface:   #FFFFFF;
  --surface2:  #E8EDF4;
  --surface3:  #D8E0EA;
  --border:    rgba(0,0,0,0.08);
  --border-hi: rgba(48,103,240,0.4);
  --text:      #10181E;
  --text-dim:  #2C3E50;
  --muted:     #6F7F90;
  --th-bg:     #F4F7FB;
  --row-hover: rgba(48,103,240,0.04);
  --topbar-bg: rgba(255,255,255,0.9);
  --glow-bg:   radial-gradient(ellipse 70% 50% at 50% 0%, rgba(48,103,240,0.07) 0%, transparent 65%);

  --blue-dim:   rgba(48,103,240,0.09);
  --blue-glow:  rgba(48,103,240,0.18);
  --gain-dim:   rgba(27,181,95,0.09);
  --loss-dim:   rgba(244,71,71,0.09);
  --yellow-dim: rgba(199,118,0,0.12);
  --shadow-sm:  0 1px 3px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
  --shadow-md:  0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.06);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  min-height: 100vh;
  overflow-x: hidden;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background var(--trans), color var(--trans);
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--glow-bg);
  pointer-events: none;
  z-index: 0;
  transition: background var(--trans);
}

/* ═══════════════════════════════════════════════
   TOPBAR
═══════════════════════════════════════════════ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 300;
  height: 60px;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--topbar-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border);
  transition: background var(--trans);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}

.brand-icon {
  width: 34px; height: 34px;
  background: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
  border-radius: 9px;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 12px rgba(48,103,240,0.3);
  flex-shrink: 0;
}
.brand-icon svg { width: 19px; height: 19px; fill: #fff; }

.brand-text { display: flex; flex-direction: column; gap: 1px; }

.brand-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1;
  transition: color var(--trans);
}
.brand-name span { color: var(--blue); }

.brand-tagline {
  font-family: var(--mono);
  font-size: 0.58rem;
  color: var(--muted);
  letter-spacing: 0.06em;
  line-height: 1;
  transition: color var(--trans);
}

.topbar-actions { display: flex; align-items: center; gap: 0.6rem; }

.privacy-badge {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--gain);
  background: var(--gain-dim);
  border: 1px solid rgba(27,181,95,0.22);
  padding: 0.28rem 0.85rem;
  border-radius: var(--r-pill);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.privacy-badge svg { flex-shrink: 0; }

.upload-privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.63rem;
  color: var(--gain);
  opacity: 0.85;
  margin-top: 0.25rem;
}

.pill-badge {
  background: var(--blue-dim);
  border: 1px solid rgba(48,103,240,0.25);
  color: var(--blue);
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 500;
  padding: 0.28rem 0.8rem;
  border-radius: var(--r-pill);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Theme Toggle */
.theme-toggle {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all var(--trans);
  flex-shrink: 0;
}
.theme-toggle:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-dim);
  transform: rotate(15deg);
}
.theme-toggle svg { width: 16px; height: 16px; }
.icon-sun  { display: none; }
.icon-moon { display: block; }
[data-theme="light"] .icon-sun  { display: block; }
[data-theme="light"] .icon-moon { display: none; }

/* ═══════════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════════ */
main {
  position: relative;
  z-index: 1;
  padding: 2.5rem 2rem 6rem;
}

/* ═══════════════════════════════════════════════
   PAGE TITLE BLOCK
═══════════════════════════════════════════════ */
.page-title-block {
  margin-bottom: 2.25rem;
}
.page-eyebrow {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}
.page-eyebrow::before {
  content: '';
  display: inline-block;
  width: 18px; height: 1.5px;
  background: var(--blue);
  border-radius: 2px;
  flex-shrink: 0;
}
.page-title {
  font-family: var(--headline);
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.page-title span { color: var(--blue); }
.page-subtitle {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-top: 0.4rem;
  line-height: 1.55;
  max-width: 520px;
}

/* ═══════════════════════════════════════════════
   STEP HEADER
═══════════════════════════════════════════════ */
.step-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.9rem;
}
.step-num-pill {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--blue);
  background: var(--blue-dim);
  border: 1px solid rgba(48,103,240,0.3);
  border-radius: var(--r-pill);
  padding: 0.18rem 0.6rem;
  flex-shrink: 0;
  white-space: nowrap;
}
.step-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
  transition: color var(--trans);
}
.step-rule { flex: 1; height: 1px; background: var(--border); }

/* ═══════════════════════════════════════════════
   UPLOAD
═══════════════════════════════════════════════ */
.upload-section { margin-bottom: 1.75rem; }

.upload-zone {
  position: relative;
  background: var(--surface);
  border: 1.5px dashed rgba(48,103,240,0.25);
  border-radius: var(--r-card);
  padding: 2.75rem 2rem;
  cursor: pointer;
  transition: all var(--trans);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
}

.upload-zone::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(48,103,240,0.05), transparent);
  pointer-events: none;
}

.upload-zone:hover,
.upload-zone.drag-over {
  border-color: var(--blue);
  border-style: solid;
  box-shadow: 0 0 0 4px rgba(48,103,240,0.09), var(--shadow-md);
  background: var(--surface2);
}

.upload-zone input[type="file"] { display: none; }

/* Upload icon */
.upload-icon-wrap {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--surface2);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: all var(--trans);
}
.upload-icon-wrap svg {
  width: 24px; height: 24px;
  stroke: var(--text-dim);
  transition: stroke var(--trans);
}
.upload-zone:hover .upload-icon-wrap,
.upload-zone.drag-over .upload-icon-wrap {
  background: var(--blue-dim);
  border-color: rgba(48,103,240,0.35);
  transform: translateY(-2px);
}
.upload-zone:hover .upload-icon-wrap svg,
.upload-zone.drag-over .upload-icon-wrap svg { stroke: var(--blue); }

/* Upload text */
.upload-text-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.upload-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  transition: color var(--trans);
}
.upload-sub {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--text-dim);
  transition: color var(--trans);
}
.upload-browse-link {
  color: var(--blue);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(48,103,240,0.45);
}

/* Support chips row */
.upload-support-chips {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: center;
}
.support-chip {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.6rem;
  border-radius: var(--r-pill);
  border: 1px solid;
  transition: all var(--trans);
}
.chip-wazirx  { background: var(--blue-dim);             border-color: rgba(48,103,240,0.3);  color: #6A9BFF; }
.chip-coindcx { background: rgba(109,55,255,0.12);       border-color: rgba(109,55,255,0.3);  color: #A47CFF; }
.chip-binance { background: rgba(243,186,47,0.12);       border-color: rgba(243,186,47,0.3);  color: #C99B1F; }
.chip-feature { background: rgba(255,255,255,0.04);      border-color: var(--border);         color: var(--text-dim); }

.file-tag {
  display: none;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--blue);
  background: var(--blue-dim);
  padding: 0.4rem 1rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(48,103,240,0.25);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-tag.visible { display: inline-flex; }

/* ── Uploaded files list ── */
.uploaded-files-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.uploaded-file-chip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 0.625rem 0.875rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--text-dim);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--trans);
}
.uploaded-file-chip:hover { border-color: var(--blue); }

.fc-icon {
  width: 32px;
  height: 32px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.fc-info {
  flex: 1;
  min-width: 0;
}
.fc-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fc-meta {
  font-size: 0.68rem;
  color: var(--text-dim);
  margin-top: 2px;
}

.file-exch-badge {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-pill);
  flex-shrink: 0;
}
.feb-wazirx    { background: var(--blue-dim);             color: var(--blue);   }
.feb-coindcx   { background: rgba(109,55,255,0.12);       color: var(--purple); }
.feb-binance   { background: rgba(243,186,47,0.15);       color: #b8860b;       }
.feb-manual    { background: var(--surface2);             color: var(--text-dim); }
.feb-unknown   { background: var(--yellow-dim);           color: var(--yellow); }
/* Auto-recognized (admin_verified template match, no modal needed) */
.feb-auto      { background: rgba(34,197,94,0.12);        color: #22c55e; }
/* User confirmed via preview modal */
.feb-confirmed { background: rgba(20,184,166,0.12);       color: #14b8a6; }
[data-theme="light"] .feb-auto      { background: rgba(22,163,74,0.1);  color: #16a34a; }
[data-theme="light"] .feb-confirmed { background: rgba(13,148,136,0.1); color: #0d9488; }

/* Inline "matched" note shown in fc-meta */
.fc-matched {
  color: #22c55e;
  font-weight: 600;
}
[data-theme="light"] .fc-matched { color: #16a34a; }
.fc-confirmed-note { color: #14b8a6; }
[data-theme="light"] .fc-confirmed-note { color: #0d9488; }

.file-remove-btn {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  line-height: 1;
  flex-shrink: 0;
  transition: all var(--trans);
}
.file-remove-btn:hover { background: var(--loss); border-color: var(--loss); color: #fff; }

/* Error state — oversized file */
.uploaded-file-chip.file-error {
  border-color: var(--loss);
  background: var(--loss-dim);
}
.uploaded-file-chip.file-error .fc-name { color: var(--text); }
.uploaded-file-chip.file-error .fc-meta { color: var(--loss); }

/* Warning state — rate limited */
.uploaded-file-chip.file-rate-error {
  border-color: var(--amber);
  background: var(--yellow-dim);
}
.uploaded-file-chip.file-rate-error .fc-name { color: var(--text); }
.uploaded-file-chip.file-rate-error .fc-meta { color: var(--yellow); }

/* Detecting state — shimmer sweep + inline stage track */
.uploaded-file-chip.detecting {
  border-color: rgba(48,103,240,0.3);
  overflow: hidden;
  position: relative;
}
.uploaded-file-chip.detecting::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(48,103,240,0.06) 40%,
    rgba(48,103,240,0.12) 50%,
    rgba(48,103,240,0.06) 60%,
    transparent 100%
  );
  animation: chip-shimmer 1.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes chip-shimmer {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

/* Spinner inside the fc-icon slot when detecting */
.fc-icon-spin {
  width: 20px;
  height: 20px;
  border: 2px solid var(--surface3);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: chip-spin 0.75s linear infinite;
  flex-shrink: 0;
}
.fc-icon.detecting-icon {
  background: var(--blue-dim);
  border-color: rgba(48,103,240,0.2);
}
@keyframes chip-spin { to { transform: rotate(360deg); } }

/* Stage track shown instead of fc-meta while detecting */
.detect-stages {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}
.detect-stage {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.65rem;
  color: var(--muted);
  white-space: nowrap;
}
.detect-stage.done   { color: var(--gain); }
.detect-stage.active { color: #93c5fd; }
.detect-stage-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--surface3);
  flex-shrink: 0;
}
.detect-stage.done  .detect-stage-dot { background: var(--gain); }
.detect-stage.active .detect-stage-dot {
  background: var(--blue);
  animation: stage-pulse 1s ease-in-out infinite;
}
@keyframes stage-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.35; transform: scale(0.7); }
}
.detect-stage-divider { flex: 0 0 10px; height: 1px; background: var(--border); }

.feb-detecting {
  background: var(--blue-dim);
  color: var(--blue);
  animation: detecting-pulse 1.6s ease-in-out infinite;
}
@keyframes detecting-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* Hint line shown below the file chips while any file is being detected */
.file-detect-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-top: 0.25rem;
  padding: 0 0.1rem;
}
.file-detect-hint .fc-icon-spin {
  width: 10px;
  height: 10px;
  border-width: 1.5px;
}

/* ═══════════════════════════════════════════════
   SETTINGS
═══════════════════════════════════════════════ */
.settings-section { margin-bottom: 1.5rem; }

.settings-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: background var(--trans), border-color var(--trans);
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.setting-field {
  padding: 1.1rem 1.25rem;
  border-right: 1px solid var(--border);
  transition: background var(--trans);
  position: relative;
}
.setting-field:last-child { border-right: none; }
.setting-field:focus-within {
  background: var(--surface2);
}
.setting-field:focus-within::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--blue);
}

.setting-field label {
  display: block;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.4rem;
  transition: color var(--trans);
}

.setting-field select,
.setting-field input[type="text"] {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 500;
  width: 100%;
  padding: 0;
  transition: color var(--trans);
}

.setting-field input[type="text"]:-webkit-autofill,
.setting-field input[type="text"]:-webkit-autofill:hover,
.setting-field input[type="text"]:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
  box-shadow: 0 0 0 1000px var(--surface) inset;
  -webkit-text-fill-color: var(--text);
  transition: background-color 5000s ease-in-out 0s;
}
.setting-field:focus-within input[type="text"]:-webkit-autofill,
.setting-field:focus-within input[type="text"]:-webkit-autofill:hover,
.setting-field:focus-within input[type="text"]:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--surface2) inset;
  box-shadow: 0 0 0 1000px var(--surface2) inset;
}

.setting-field select option {
  background: var(--surface);
  color: var(--text);
}

.setting-detected-text {
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 500;
}

.fy-detected-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.75rem 1.35rem;
  border-top: 1px solid var(--border);
  background: var(--surface2);
  transition: background var(--trans);
}

.fy-detected-label {
  font-family: var(--mono);
  font-size: 0.58rem;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════
   FY CHIPS
═══════════════════════════════════════════════ */
.fy-chip {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-dim);
  padding: 0.28rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all var(--trans);
  background: transparent;
  user-select: none;
  white-space: nowrap;
}
.fy-chip:hover   { border-color: rgba(48,103,240,.4); color: var(--blue); background: var(--blue-dim); }
.fy-chip.active  { border-color: var(--blue); color: var(--blue); background: var(--blue-dim); font-weight: 600; }

/* ═══════════════════════════════════════════════
   GENERATE BUTTON AREA
═══════════════════════════════════════════════ */
.generate-area {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 2rem;
}
#generateBtn {
  width: 100%;
  height: 52px;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  background: linear-gradient(130deg, var(--blue) 0%, var(--purple) 100%);
  box-shadow: 0 4px 28px rgba(48,103,240,0.38), 0 1px 4px rgba(0,0,0,0.2);
  border-radius: 11px;
  position: relative;
  overflow: hidden;
}
#generateBtn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(130deg, rgba(255,255,255,0.13) 0%, transparent 55%);
  pointer-events: none;
}
#generateBtn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 36px rgba(48,103,240,0.50), 0 2px 8px rgba(0,0,0,0.2);
  filter: brightness(1.07);
  background: linear-gradient(130deg, var(--blue) 0%, var(--purple) 100%);
}
#generateBtn:disabled {
  background: var(--surface3);
  box-shadow: none;
  filter: none;
}
#clearSavedBtn {
  align-self: center;
}

/* ═══════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════ */
.btn-primary {
  background: var(--blue);
  color: #fff;
  border: none;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0 1.75rem;
  height: 48px;
  border-radius: var(--r-btn);
  cursor: pointer;
  transition: all var(--trans);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 4px 20px var(--blue-glow);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.btn-primary:hover:not(:disabled) {
  background: var(--blue-hover);
  box-shadow: 0 6px 28px rgba(48,103,240,.45);
  transform: translateY(-1px);
}
.btn-primary:active:not(:disabled) { transform: translateY(0); }
.btn-primary:disabled {
  background: var(--surface3);
  color: var(--muted);
  cursor: not-allowed;
  box-shadow: none;
}

.btn-secondary {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0 1.1rem;
  height: 38px;
  border-radius: var(--r-btn);
  cursor: pointer;
  transition: all var(--trans);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}
.btn-secondary:hover {
  border-color: rgba(48,103,240,.4);
  color: var(--blue);
  background: var(--blue-dim);
}

/* ═══════════════════════════════════════════════
   PROGRESS
═══════════════════════════════════════════════ */
#progressBox {
  display: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 1.35rem 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: background var(--trans);
}

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

.prog-title-group {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

/* Pulsing dot shown while generating */
.prog-spinner {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
  animation: prog-pulse 1.4s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes prog-pulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(48,103,240,0.5); }
  50%       { opacity: 0.65; transform: scale(0.8); box-shadow: 0 0 0 4px rgba(48,103,240,0); }
}

.prog-title {
  font-family: var(--mono);
  font-size: 0.67rem;
  color: var(--text-dim);
  transition: color var(--trans);
}

.prog-pct {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--blue);
  font-weight: 600;
}

.prog-track {
  height: 5px;
  background: var(--surface3);
  border-radius: var(--r-pill);
  margin-bottom: 0.9rem;
  overflow: hidden;
}

.prog-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--blue), var(--purple));
  border-radius: var(--r-pill);
  transition: width .35s ease;
}

#progressLog {
  font-family: var(--mono);
  font-size: 0.63rem;
  color: var(--text-dim);
  max-height: 80px;
  overflow-y: auto;
  line-height: 2;
  scrollbar-width: thin;
  scrollbar-color: var(--surface3) transparent;
}

/* ═══════════════════════════════════════════════
   REPORT
═══════════════════════════════════════════════ */
#report {
  display: none;
  animation: slide-up .4s cubic-bezier(.4,0,.2,1);
}
@keyframes slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* FY Switcher */
.fy-switcher-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 0.8rem 1.2rem;
  margin-bottom: 1.75rem;
  box-shadow: var(--shadow-sm);
  transition: background var(--trans);
  position: sticky;
  top: 60px;
  z-index: 200;
}

.fy-switcher-label {
  font-family: var(--mono);
  font-size: 0.58rem;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-right: 0.25rem;
  flex-shrink: 0;
}

/* Report Banner */
.report-banner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: background var(--trans);
}

.report-title {
  font-size: clamp(1.1rem, 2.5vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
  transition: color var(--trans);
}

.report-fy-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--blue);
  background: var(--blue-dim);
  padding: 0.3rem 0.8rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(48,103,240,0.2);
  margin-top: 0.4rem;
  width: fit-content;
}

.report-meta {
  font-family: var(--mono);
  font-size: 0.63rem;
  color: var(--text-dim);
  line-height: 2;
  text-align: right;
  transition: color var(--trans);
}

/* Action Bar */
.action-bar {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}

/* Multi-FY Grid */

/* ─── SECTION LABEL ─── */
.sec-label {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  transition: color var(--trans);
}
.sec-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }
#labelSummary::after { display: none; }

/* ═══════════════════════════════════════════════
   HERO STATS
═══════════════════════════════════════════════ */
.hero-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.hero-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 1.5rem 1.6rem;
  position: relative;
  overflow: hidden;
  transition: all var(--trans);
  box-shadow: var(--shadow-sm);
}
.hero-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* Colored top accent */
.hero-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--r-card) var(--r-card) 0 0;
}
.hc-default::before { background: linear-gradient(90deg, var(--blue), rgba(48,103,240,0)); }
.hc-gain::before    { background: linear-gradient(90deg, var(--gain), rgba(27,181,95,0)); }
.hc-tax::before     { background: linear-gradient(90deg, var(--yellow), rgba(199,118,0,0)); }

/* Subtle tint */
.hc-gain { background: linear-gradient(160deg, rgba(27,181,95,.06) 0%, var(--surface) 60%); }
.hc-tax  { background: linear-gradient(160deg, rgba(199,118,0,.05) 0%, var(--surface) 60%); }

/* Corner decoration */
.hero-card::after {
  content: '';
  position: absolute;
  bottom: -20px; right: -20px;
  width: 100px; height: 100px;
  border-radius: 50%;
  opacity: 0.04;
}
.hc-default::after { background: var(--blue); }
.hc-gain::after    { background: var(--gain); }
.hc-tax::after     { background: var(--yellow); }

.hc-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.hc-default .hc-icon { background: var(--blue-dim); }
.hc-gain .hc-icon    { background: var(--gain-dim); }
.hc-tax .hc-icon     { background: var(--yellow-dim); }

.hc-label {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
  transition: color var(--trans);
}

.hc-value {
  font-family: var(--mono);
  font-size: 1.85rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
  transition: color var(--trans);
}
.hc-value.v-gain   { color: var(--gain); }
.hc-value.v-yellow { color: var(--yellow); }

.hc-sub {
  font-family: var(--mono);
  font-size: 0.58rem;
  color: var(--muted);
  margin-top: 0.5rem;
  line-height: 1.5;
  transition: color var(--trans);
}

/* ═══════════════════════════════════════════════
   SECONDARY STATS
═══════════════════════════════════════════════ */
.stats-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.85rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 1rem 1.1rem;
  transition: all var(--trans);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.stat-card:hover { background: var(--surface2); box-shadow: var(--shadow-md); }
.stat-card.sc-loss { border-top: 2px solid var(--loss); }
.stat-card.sc-tds  { border-top: 2px solid var(--cyan); }

.stat-label {
  font-family: var(--mono);
  font-size: 0.57rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
  line-height: 1.5;
  transition: color var(--trans);
}
.stat-value {
  font-family: var(--mono);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1;
  transition: color var(--trans);
}
.stat-value.sv-loss { color: var(--loss); }
.stat-sub {
  font-family: var(--mono);
  font-size: 0.57rem;
  color: var(--muted);
  margin-top: 0.3rem;
  line-height: 1.4;
  transition: color var(--trans);
}

/* ═══════════════════════════════════════════════
   CAPITAL GAINS STATEMENT BLOCKS
═══════════════════════════════════════════════ */
.cg-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.2rem;
}
.cg-page-header h2 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
.cg-page-header .cg-sub {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.25rem;
}
.cg-overview-body {
  max-width: 740px;
  margin: 0 auto;
}
.cg-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  margin-bottom: 1rem;
  overflow: hidden;
}
.cg-block-title {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 0.75rem 1.2rem 0.6rem;
  border-bottom: 1px solid var(--border);
}
.cg-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.2rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  gap: 1rem;
}
.cg-row:last-child { border-bottom: none; }
.cg-label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text-dim);
  font-size: 0.85rem;
}
.cg-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
}
.cg-dot.green  { background: var(--gain); }
.cg-dot.cyan   { background: var(--cyan); }
.cg-dot.red    { background: #f87171; }
.cg-dot.amber  { background: var(--amber); }
.cg-dot.teal   { background: #14B8A6; }
.cg-dot.purple { background: #6D37FF; }
.cg-value {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cg-value.deduction     { color: var(--gain); }
.cg-value.tds           { color: var(--cyan); }
.cg-value.non-deductible { color: #f87171; }
.cg-label-stack {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cg-label-stack .cg-label-main {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text-dim);
  font-size: 0.85rem;
}
.cg-label-stack .cg-label-note {
  font-size: 0.7rem;
  color: var(--muted);
  padding-left: 0.85rem;
  font-style: italic;
}
.cg-divider {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: 0 1.2rem;
}
.cg-hero-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.2rem;
  background: rgba(27,181,95,0.06);
  border-top: 1px solid rgba(27,181,95,0.15);
  border-bottom: 1px solid rgba(27,181,95,0.15);
}
.cg-hero-row.amber {
  background: rgba(245,158,11,0.06);
  border-color: rgba(245,158,11,0.2);
}
.cg-hero-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gain);
}
.cg-hero-row.amber .cg-hero-label { color: #f59e0b; }
.cg-hero-sub {
  font-size: 0.6rem;
  color: var(--muted);
  margin-top: 0.2rem;
  letter-spacing: 0.03em;
}
.cg-hero-value {
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gain);
}
.cg-hero-value.amber { color: #f59e0b; }
.cg-subtotal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 1.2rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.cg-subtotal-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dim);
}
.cg-subtotal-value {
  font-size: 0.9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}
.cg-rate-pill {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}
.cg-callout {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.75rem 1.2rem;
  background: rgba(255,255,255,0.02);
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.5;
}
.cg-callout strong { color: var(--text-dim); font-weight: 500; }

/* ── GAINS BREAKDOWN BLOCK ────────────────────────────────────── */
/* Stacked proportional bar */
.breakdown-stacked-bar {
  height: 6px;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  background: var(--surface2);
  margin: .85rem 1.2rem .25rem;
}
.bsb-spot    { background: var(--blue); transition: width .4s ease; }
.bsb-futures { background: #14B8A6;     transition: width .4s ease; }
.bsb-income  { background: #6D37FF;     transition: width .4s ease; }
.bsb-funding { background: var(--amber);transition: width .4s ease; }

/* Legend row below stacked bar */
.breakdown-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding: .3rem 1.2rem .65rem;
  border-bottom: 1px solid var(--border);
}
.bl-item { display: flex; align-items: center; gap: 5px; font-size: .72rem; color: var(--muted); }
.bl-dot  { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* Per-row inline mini bar (inside .cg-row) */
.cg-row-bar {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mini-track {
  flex: 1;
  height: 4px;
  background: var(--surface2);
  border-radius: 4px;
  overflow: hidden;
  max-width: 200px;
}
.mini-fill { height: 100%; border-radius: 4px; transition: width .4s ease; }
.cg-pct {
  font-size: .72rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  width: 38px;
  text-align: right;
  flex-shrink: 0;
}

.cg-collapsible-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.cg-collapsible-header:hover { background: rgba(255,255,255,0.02); }
.cg-toggle {
  font-size: 0.7rem;
  color: var(--muted);
  padding: 0.75rem 1.2rem 0.6rem;
}
.cg-collapsible-body { display: block; }
.cg-collapsible-body.collapsed { display: none; }
.cg-table {
  width: 100%;
  border-collapse: collapse;
}
.cg-table th {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.5rem 1.2rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.cg-table th.num { text-align: right; }
.cg-table td {
  padding: 0.65rem 1.2rem;
  font-size: 0.83rem;
  color: var(--text-dim);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: middle;
}
.cg-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.cg-table tr:last-child td { border-bottom: none; }
.cg-table tr.cg-total-row td {
  border-top: 1px solid var(--border);
  font-weight: 600;
  color: var(--muted);
}
.cg-exch-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-right: 0.5rem;
  vertical-align: middle;
}
.cg-activity-bar {
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  margin: 0.9rem 1.2rem 0.6rem;
}
.cg-activity-legend {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0 1.2rem 0.9rem;
}
.cg-al-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  color: var(--muted);
}
.cg-al-item strong { color: var(--text-dim); }
.cg-al-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════
   ASSET GRID
═══════════════════════════════════════════════ */
.asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 0.85rem;
  margin-bottom: 2rem;
}

.asset-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 1.1rem;
  transition: all var(--trans);
  box-shadow: var(--shadow-sm);
}
.asset-card:hover { border-color: rgba(48,103,240,.25); transform: translateY(-1px); box-shadow: var(--shadow-md); }

.asset-name {
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text);
  transition: color var(--trans);
}

.asset-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

.asset-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--border);
}
.asset-row:last-child { border-bottom: none; }
.asset-row span:first-child { font-family: var(--mono); font-size: 0.6rem; color: var(--muted); transition: color var(--trans); }
.asset-row span:last-child  { font-family: var(--mono); font-size: 0.7rem; font-weight: 500; }

.gain-text { color: var(--gain); }
.loss-text { color: var(--loss); }

/* ═══════════════════════════════════════════════
   TDS SECTION
═══════════════════════════════════════════════ */
.tds-section { margin-bottom: 2rem; }

/* ═══════════════════════════════════════════════
   TRADE TYPES BREAKDOWN
═══════════════════════════════════════════════ */
.trade-types-section { margin-bottom: 2rem; }

.tt-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 1.4rem 1.6rem;
  box-shadow: var(--shadow-sm);
}

/* Stacked bar */
.tt-bar {
  height: 6px;
  border-radius: 100px;
  background: var(--border);
  display: flex;
  overflow: hidden;
  gap: 2px;
  margin-bottom: 1.4rem;
}
.tt-seg {
  height: 100%;
  border-radius: 100px;
  transition: width 0.65s cubic-bezier(.4,0,.2,1);
  min-width: 0;
}
.tt-seg-spot { background: var(--blue); }
.tt-seg-dep  { background: var(--gain); }
.tt-seg-wd   { background: #F0A020; }
.tt-seg-oth  { background: var(--muted); opacity: 0.5; }
.tt-seg-fut  { background: #9B6DFF; }

/* Type tiles */
.tt-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.tt-tile {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.85rem 1rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface2);
  position: relative;
  overflow: hidden;
}
.tt-tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.tt-tile-spot::before { background: var(--blue); }
.tt-tile-dep::before  { background: var(--gain); }
.tt-tile-wd::before   { background: #F0A020; }
.tt-tile-oth::before  { background: var(--muted); }

.tt-tile-icon {
  font-size: 1.05rem;
  line-height: 1;
  margin-bottom: 0.15rem;
}
.tt-tile-label {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.tt-tile-count {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.tt-tile-pct {
  font-size: 0.7rem;
  color: var(--muted);
  font-family: var(--mono);
}

@media (max-width: 700px) {
  .tt-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════
   TABLES
═══════════════════════════════════════════════ */
.table-box {
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--trans);
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--surface3) transparent;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 0.73rem;
  min-width: 580px;
}

thead {
  background: var(--th-bg);
  border-bottom: 1px solid var(--border);
  transition: background var(--trans);
}

th {
  padding: 0.85rem 1.1rem;
  text-align: left;
  font-size: 0.58rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--trans);
}

td {
  padding: 0.7rem 1.1rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  color: var(--text-dim);
  transition: color var(--trans), background var(--trans);
}

td strong { color: var(--text); font-weight: 600; }
tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--row-hover); color: var(--text); }

/*
 * ─── Mobile (≤600px): Table overrides ────────────────────────────────────────
 * Three tables get full card layouts (VDA, Transactions, Rates).
 * Any other table falls back to the scroll-hint + tighter padding below.
 *
 * MAINTENANCE: if you add/remove a <td> column in report.js, update the
 * matching td:nth-child() positions in the card block for that table.
 * ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {

  /* Scroll-hint shadow on the right edge for any non-card table */
  .table-scroll {
    -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(to right,  var(--surface2) 0%, transparent 20px),
      linear-gradient(to left,   var(--surface2) 0%, transparent 20px) right,
      radial-gradient(farthest-side at 0 50%,   rgba(0,0,0,0.2), transparent) 0 50%,
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.2), transparent) 100% 50%;
    background-repeat: no-repeat;
    background-size: 20px 100%, 20px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
  }

  /* Tighter padding fallback for any table NOT converted to card layout */
  table th { padding: 0.6rem 0.75rem; font-size: 0.63rem; }
  table td { padding: 0.5rem 0.75rem; font-size: 0.78rem; }

  /* ── Schedule VDA card layout ──────────────────────────────────────────────
   * Desktop 9-col: #  Asset  Exchange  Date Acq  Date Tr  Head  Cost  Sale  Income
   * Mobile card:
   *   Row 1 (full): Asset name (td:2)
   *   Row 2 (full): Exchange badge (td:3)
   *   Row 3: Acquired (td:4) | Transferred (td:5)
   *   Row 4: Cost (td:7) | Sale (td:8)
   *   Row 5 (full): Income from VDA (td:9)
   *   Hidden: row# (td:1), Head of Income (td:6 — always "Capital Gains")
   * ──────────────────────────────────────────────────────────────────────── */
  #rpage-vda thead { display: none; }
  /* Reset table/tbody from display:table so they don't impose min-width:580px */
  #rpage-vda table { display: block; min-width: 0; width: 100%; }
  #rpage-vda tbody { display: block; }
  #rpage-vda tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.35rem 0.6rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--border);
  }
  #rpage-vda tbody tr:last-child { border-bottom: none; }
  #rpage-vda tbody tr td {
    padding: 0;
    border-bottom: none;
    white-space: normal;
    font-size: 0.78rem;
  }
  #rpage-vda tbody tr:hover td { background: transparent; }

  #rpage-vda td:nth-child(1) { display: none; }

  /* td:2 — asset name: full-width card header */
  #rpage-vda td:nth-child(2) {
    grid-column: 1 / -1; grid-row: 1;
    font-size: 0.9rem; font-weight: 700; color: var(--text);
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--border);
  }
  /* td:3 — exchange badge: full-width */
  #rpage-vda td:nth-child(3) { grid-column: 1 / -1; grid-row: 2; }
  /* td:4 — date acquired */
  #rpage-vda td:nth-child(4) { grid-column: 1; grid-row: 3; }
  #rpage-vda td:nth-child(4)::before {
    content: "ACQUIRED"; display: block;
    font-size: 0.56rem; font-weight: 700; letter-spacing: 0.09em;
    color: var(--muted); margin-bottom: 0.2rem;
  }
  /* td:5 — date transferred */
  #rpage-vda td:nth-child(5) { grid-column: 2; grid-row: 3; }
  #rpage-vda td:nth-child(5)::before {
    content: "TRANSFERRED"; display: block;
    font-size: 0.56rem; font-weight: 700; letter-spacing: 0.09em;
    color: var(--muted); margin-bottom: 0.2rem;
  }
  #rpage-vda td:nth-child(6) { display: none; } /* "Capital Gains" — always same */
  /* td:7 — cost of acquisition */
  #rpage-vda td:nth-child(7) { grid-column: 1; grid-row: 4; }
  #rpage-vda td:nth-child(7)::before {
    content: "COST"; display: block;
    font-size: 0.56rem; font-weight: 700; letter-spacing: 0.09em;
    color: var(--muted); margin-bottom: 0.2rem;
  }
  /* td:8 — consideration received */
  #rpage-vda td:nth-child(8) { grid-column: 2; grid-row: 4; }
  #rpage-vda td:nth-child(8)::before {
    content: "SALE"; display: block;
    font-size: 0.56rem; font-weight: 700; letter-spacing: 0.09em;
    color: var(--muted); margin-bottom: 0.2rem;
  }
  /* td:9 — income from VDA: full-width footer with gain/loss colour */
  #rpage-vda td:nth-child(9) {
    grid-column: 1 / -1; grid-row: 5;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
    font-size: 0.86rem; font-weight: 700;
  }
  #rpage-vda td:nth-child(9)::before {
    content: "INCOME FROM VDA"; display: block;
    font-size: 0.56rem; font-weight: 700; letter-spacing: 0.09em;
    color: var(--muted); margin-bottom: 0.2rem;
  }

  /* ── Transactions card layout ──────────────────────────────────────────────
   * Desktop 10-col: #  DateTime  Exchange  Market  Type  Price  Volume
   *                 Total(INR)  Fee(INR)  TDS(INR)
   * Mobile card:
   *   Row 1: Market (td:4) | DateTime (td:2)
   *   Row 2 (full): Buy/Sell pill (td:5)
   *   Row 3: Total INR (td:8) | Price (td:6)
   *   Row 4: Volume (td:7) | Fee INR (td:9)
   *   Hidden: row# (td:1), Exchange (td:3), TDS (td:10)
   * ──────────────────────────────────────────────────────────────────────── */
  #rpage-txns thead { display: none; }
  #rpage-txns table { display: block; min-width: 0; width: 100%; }
  #rpage-txns tbody { display: block; }
  #rpage-txns tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.35rem 0.6rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--border);
  }
  #rpage-txns tbody tr:last-child { border-bottom: none; }
  #rpage-txns tbody tr td {
    padding: 0;
    border-bottom: none;
    white-space: normal;
    font-size: 0.78rem;
  }
  #rpage-txns tbody tr:hover td { background: transparent; }

  #rpage-txns td:nth-child(1)  { display: none; }
  /* td:2 — datetime: col 2, row 1 */
  #rpage-txns td:nth-child(2)  { grid-column: 2; grid-row: 1; font-size: 0.7rem; color: var(--muted); }
  #rpage-txns td:nth-child(3)  { display: none; } /* exchange badge — market gives context */
  /* td:4 — market: col 1, row 1 — prominent */
  #rpage-txns td:nth-child(4)  {
    grid-column: 1; grid-row: 1;
    font-size: 0.9rem; font-weight: 700; color: var(--text);
  }
  /* td:5 — buy/sell pill: full-width row 2 */
  #rpage-txns td:nth-child(5)  { grid-column: 1 / -1; grid-row: 2; }
  /* td:6 — price: col 2, row 3 */
  #rpage-txns td:nth-child(6)  { grid-column: 2; grid-row: 3; }
  #rpage-txns td:nth-child(6)::before {
    content: "PRICE"; display: block;
    font-size: 0.56rem; font-weight: 700; letter-spacing: 0.09em;
    color: var(--muted); margin-bottom: 0.2rem;
  }
  /* td:7 — volume: col 1, row 4 */
  #rpage-txns td:nth-child(7)  { grid-column: 1; grid-row: 4; }
  #rpage-txns td:nth-child(7)::before {
    content: "VOLUME"; display: block;
    font-size: 0.56rem; font-weight: 700; letter-spacing: 0.09em;
    color: var(--muted); margin-bottom: 0.2rem;
  }
  /* td:8 — total INR: col 1, row 3 — prominent */
  #rpage-txns td:nth-child(8)  {
    grid-column: 1; grid-row: 3;
    font-size: 0.88rem; font-weight: 700; color: var(--text);
  }
  #rpage-txns td:nth-child(8)::before {
    content: "TOTAL (INR)"; display: block;
    font-size: 0.56rem; font-weight: 700; letter-spacing: 0.09em;
    color: var(--muted); margin-bottom: 0.2rem;
  }
  /* td:9 — fee INR: col 2, row 4 */
  #rpage-txns td:nth-child(9)  { grid-column: 2; grid-row: 4; }
  #rpage-txns td:nth-child(9)::before {
    content: "FEE (INR)"; display: block;
    font-size: 0.56rem; font-weight: 700; letter-spacing: 0.09em;
    color: var(--muted); margin-bottom: 0.2rem;
  }
  #rpage-txns td:nth-child(10) { display: none; } /* TDS — hide on mobile */

  /* ── Rates card layout ─────────────────────────────────────────────────────
   * Desktop 6-col: DateTime  Market  USDT Amt  USDT/INR Rate  INR Equiv  Source
   * Mobile card:
   *   Row 1: Market (td:2) | DateTime (td:1)
   *   Row 2: Rate (td:4) | INR Equiv (td:5)
   *   Hidden: USDT Amt (td:3), Source (td:6)
   * ──────────────────────────────────────────────────────────────────────── */
  #rpage-rates thead { display: none; }
  #rpage-rates table { display: block; min-width: 0; width: 100%; }
  #rpage-rates tbody { display: block; }
  #rpage-rates tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.35rem 0.6rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--border);
  }
  #rpage-rates tbody tr:last-child { border-bottom: none; }
  #rpage-rates tbody tr td {
    padding: 0;
    border-bottom: none;
    white-space: normal;
    font-size: 0.78rem;
  }
  #rpage-rates tbody tr:hover td { background: transparent; }

  /* td:1 — datetime: col 2, row 1 */
  #rpage-rates td:nth-child(1) { grid-column: 2; grid-row: 1; font-size: 0.7rem; color: var(--muted); }
  /* td:2 — market: col 1, row 1 — prominent */
  #rpage-rates td:nth-child(2) {
    grid-column: 1; grid-row: 1;
    font-size: 0.9rem; font-weight: 700; color: var(--text);
  }
  #rpage-rates td:nth-child(3) { display: none; } /* USDT amount — hide */
  /* td:4 — rate + source badge: col 1, row 2 */
  #rpage-rates td:nth-child(4) { grid-column: 1; grid-row: 2; }
  #rpage-rates td:nth-child(4)::before {
    content: "USDT/INR RATE"; display: block;
    font-size: 0.56rem; font-weight: 700; letter-spacing: 0.09em;
    color: var(--muted); margin-bottom: 0.2rem;
  }
  /* td:5 — INR equivalent: col 2, row 2 */
  #rpage-rates td:nth-child(5) { grid-column: 2; grid-row: 2; }
  #rpage-rates td:nth-child(5)::before {
    content: "INR EQUIV"; display: block;
    font-size: 0.56rem; font-weight: 700; letter-spacing: 0.09em;
    color: var(--muted); margin-bottom: 0.2rem;
  }
  #rpage-rates td:nth-child(6) { display: none; } /* Source text — badge on td:4 gives context */

  /* ── Manual Purchase Entries card layout ───────────────────────────────────
   * Desktop 6-col: Asset  Qty  Purchase Date  Purchase Price  Total Cost  Action
   * Mobile card:
   *   Row 1: Asset (td:1) prominent | Remove button (td:6) right-aligned
   *   Row 2: Qty (td:2) | Purchase Date input (td:3)
   *   Row 3: Purchase Price input (td:4) | Total Cost (td:5)
   * ──────────────────────────────────────────────────────────────────────── */
  #manualEntriesBox thead { display: none; }
  #manualEntriesBox table { display: block; min-width: 0; width: 100%; }
  #manualEntriesBox tbody { display: block; }
  #manualEntriesBox tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.5rem 0.6rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--border);
    align-items: start;
  }
  #manualEntriesBox tbody tr:last-child { border-bottom: none; }
  #manualEntriesBox tbody tr td {
    padding: 0;
    border-bottom: none;
    white-space: normal;
    font-size: 0.82rem;
  }
  #manualEntriesBox tbody tr:hover td { background: transparent; }

  /* td:1 — Asset: col 1, row 1 — prominent */
  #manualEntriesBox td:nth-child(1) {
    grid-column: 1; grid-row: 1;
    font-size: 0.9rem; font-weight: 700; color: var(--text);
    align-self: center;
  }
  /* td:2 — Qty: col 1, row 2 */
  #manualEntriesBox td:nth-child(2) { grid-column: 1; grid-row: 2; }
  #manualEntriesBox td:nth-child(2)::before {
    content: "QTY"; display: block;
    font-size: 0.56rem; font-weight: 700; letter-spacing: 0.09em;
    color: var(--muted); margin-bottom: 0.2rem;
  }
  /* td:3 — Purchase Date input: col 2, row 2 */
  #manualEntriesBox td:nth-child(3) { grid-column: 2; grid-row: 2; }
  #manualEntriesBox td:nth-child(3)::before {
    content: "PURCHASE DATE"; display: block;
    font-size: 0.56rem; font-weight: 700; letter-spacing: 0.09em;
    color: var(--muted); margin-bottom: 0.2rem;
  }
  #manualEntriesBox td:nth-child(3) input { width: 100%; }
  /* td:4 — Purchase Price input: col 1, row 3 */
  #manualEntriesBox td:nth-child(4) { grid-column: 1; grid-row: 3; }
  #manualEntriesBox td:nth-child(4)::before {
    content: "PURCHASE PRICE"; display: block;
    font-size: 0.56rem; font-weight: 700; letter-spacing: 0.09em;
    color: var(--muted); margin-bottom: 0.2rem;
  }
  #manualEntriesBox td:nth-child(4) .price-input-wrap { width: 100%; }
  #manualEntriesBox td:nth-child(4) input { flex: 1; min-width: 0; }
  /* td:5 — Total Cost: col 2, row 3 */
  #manualEntriesBox td:nth-child(5) { grid-column: 2; grid-row: 3; }
  #manualEntriesBox td:nth-child(5)::before {
    content: "TOTAL COST"; display: block;
    font-size: 0.56rem; font-weight: 700; letter-spacing: 0.09em;
    color: var(--muted); margin-bottom: 0.2rem;
  }
  /* td:6 — Remove button: col 2, row 1 — right-aligned */
  #manualEntriesBox td:nth-child(6) {
    grid-column: 2; grid-row: 1;
    display: flex; justify-content: flex-end; align-items: center;
  }
}

/* ═══════════════════════════════════════════════
   PILLS / BADGES
═══════════════════════════════════════════════ */
.pill {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: var(--r-pill);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.pill-buy  { background: var(--gain-dim); color: var(--gain); border: 1px solid rgba(27,181,95,.25); }
.pill-sell { background: var(--loss-dim); color: var(--loss); border: 1px solid rgba(244,71,71,.25); }
.pill-long    { background: var(--gain-dim); color: var(--gain); border: 1px solid rgba(27,181,95,.25); }
.pill-short   { background: var(--loss-dim); color: var(--loss); border: 1px solid rgba(244,71,71,.25); }
.pill-staking { background: rgba(109,55,255,.12); color: var(--purple); border: 1px solid rgba(109,55,255,.25); }
.pill-lending { background: var(--blue-dim); color: var(--blue); border: 1px solid rgba(48,103,240,.25); }
.pill-disputed-icon {
  font-size: 0.85rem;
  opacity: 0.85;
  cursor: default;
}

/* ── FUTURES & INCOME PAGES ─────────────────────────────────────── */

/* ── Futures tax-treatment selector ──────────────────────────── */
.ftb-panel {
  display: flex;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: var(--r-card);
  overflow: hidden;
  margin-bottom: 16px;
}
.ftb-option {
  flex: 1;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  cursor: pointer;
  position: relative;
  transition: background var(--trans), opacity var(--trans);
  user-select: none;
  opacity: 0.55;
}
.ftb-option:first-child::after {
  content: '';
  position: absolute;
  right: 0; top: 14px; bottom: 14px;
  width: 1px;
  background: var(--border);
}
.ftb-option.ftb-active { background: var(--surface2); opacity: 1; }
.ftb-option:not(.ftb-active):hover { opacity: 0.8; background: var(--surface2); }

.ftb-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ftb-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--muted);
  flex-shrink: 0;
  position: relative;
  transition: border-color var(--trans);
}
.ftb-option.ftb-active .ftb-dot { border-color: var(--accent); }
.ftb-option.ftb-active .ftb-dot::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--accent);
}
.ftb-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-dim);
  transition: color var(--trans);
}
.ftb-option.ftb-active .ftb-name { color: var(--text); }
.ftb-tag {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 20px;
}
.ftb-tag-net   { background: var(--gain-dim); color: var(--green); }
.ftb-tag-gross { background: rgba(245,158,11,0.12); color: var(--amber); }
.ftb-desc {
  font-size: 0.73rem;
  color: var(--muted);
  line-height: 1.45;
  padding-left: 22px;
}
.ftb-nums {
  font-size: 0.78rem;
  color: var(--text-dim);
  padding-left: 22px;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}
.ftb-nums strong { font-weight: 700; }
.ftb-sep { color: var(--muted); }

/* Stat row (3-column grid above ledger) */
.futures-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.futures-stat-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}
.fsb-label { font-size: 0.75rem; color: var(--text-dim); margin-bottom: 6px; font-weight: 500; }
.fsb-value { font-size: 1.55rem; font-weight: 700; font-family: var(--data); line-height: 1.1; }
.fsb-sign  { font-size: 0.7rem; font-weight: 600; opacity: .7; }
.fsb-sub   { font-size: 0.72rem; color: var(--muted); margin-top: 6px; }

/* Collapsible sub-section (position-level / funding receipts) */
.futures-collapsible {
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  margin-top: 20px;
}
.futures-collapsible-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  background: var(--surface2);
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-dim);
  transition: background var(--trans);
}
.futures-collapsible-hdr:hover { background: var(--surface3); }
.futures-pos-count {
  background: var(--surface3);
  border-radius: var(--r-pill);
  padding: 1px 9px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-dim);
}
.futures-collapsible-note {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--muted);
  flex: 1;
}
.futures-collapsible-chevron {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--muted);
  transition: transform var(--trans);
  flex-shrink: 0;
}

/* Mobile responsive: stack stat boxes vertically */
@media (max-width: 600px) {
  .futures-stat-row { grid-template-columns: 1fr; }
}

.rate-badge {
  display: inline-block;
  background: var(--blue-dim);
  color: var(--blue);
  font-family: var(--mono);
  font-size: 0.53rem;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  margin-left: 3px;
  vertical-align: middle;
  border: 1px solid rgba(48,103,240,.2);
}

/* ═══════════════════════════════════════════════
   TABS
═══════════════════════════════════════════════ */
.tab-nav {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 0;
  background: var(--surface);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  border: 1px solid var(--border);
  border-bottom: none;
  padding: 0 0.5rem;
  transition: background var(--trans), border-color var(--trans);
}
.tab-nav::-webkit-scrollbar { display: none; }

.tab {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.85rem 1.35rem;
  cursor: pointer;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: all var(--trans);
  flex-shrink: 0;
}
.tab:hover  { color: var(--text-dim); }
.tab.active { color: var(--blue); border-bottom-color: var(--blue); }

.tab-content        { display: none; }
.tab-content.active { display: block; }

.tab-wrapper {
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  padding: 1.25rem;
  background: var(--surface);
  transition: background var(--trans);
  margin-bottom: 2rem;
}

/* ═══════════════════════════════════════════════
   PAGINATION
═══════════════════════════════════════════════ */
.pagination {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--muted);
  flex-wrap: wrap;
}

.pg-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 0 0.85rem;
  height: 32px;
  border-radius: var(--r-btn);
  font-family: var(--mono);
  font-size: 0.65rem;
  cursor: pointer;
  transition: all var(--trans);
}
.pg-btn:hover:not(:disabled) { border-color: rgba(48,103,240,.4); color: var(--blue); background: var(--blue-dim); }
.pg-btn:disabled { opacity: .35; cursor: not-allowed; }

/* ═══════════════════════════════════════════════
   INFO / TIPS BOXES
═══════════════════════════════════════════════ */
.info-box {
  background: var(--blue-dim);
  border: 1px solid rgba(48,103,240,.15);
  border-radius: var(--r-btn);
  padding: 0.8rem 1rem;
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--blue);
  line-height: 1.7;
  margin-bottom: 1rem;
  opacity: .9;
}

/* ── Collapsible info panel ───────────────────── */
.vda-explain-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--blue);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-bottom: 1rem;
  opacity: 0.8;
}
.vda-explain-toggle:hover { opacity: 1; }
.vda-explain-toggle .toggle-arrow { transition: transform 0.2s; display: inline-block; }
.vda-explain-toggle.open .toggle-arrow { transform: rotate(90deg); }

.vda-explain-panel {
  display: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--text-dim);
  line-height: 1.8;
}
.vda-explain-panel.open { display: block; }
.vda-explain-panel strong { color: var(--text); }
.vda-explain-panel ul { margin: 0.4rem 0 0 1rem; padding: 0; }
.vda-explain-panel li { margin-bottom: 0.2rem; }

/* ── Column header tooltips ───────────────────── */
.th-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  position: relative;
}
.th-info {
  width: 13px;
  height: 13px;
  color: var(--muted);
  cursor: default;
  flex-shrink: 0;
  opacity: 0.7;
  vertical-align: middle;
}
.th-wrap .th-tooltip {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.45rem 0.6rem;
  font-size: 0.6rem;
  color: var(--text-dim);
  white-space: nowrap;
  z-index: 99;
  pointer-events: none;
  box-shadow: var(--shadow-sm);
  font-weight: 400;
  font-family: var(--mono);
}
.th-wrap:hover .th-tooltip { display: block; }
.th-wrap.tip-left .th-tooltip {
  left: auto;
  right: 0;
  transform: none;
}

.tips-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 1.4rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-sm);
  transition: background var(--trans);
}
.tips-card h3 {
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 0.9rem;
  color: var(--text);
  transition: color var(--trans);
}
.tips-card ul { list-style: none; }
.tips-card ul li {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--text-dim);
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 0.65rem;
  align-items: baseline;
  line-height: 1.6;
  transition: color var(--trans);
}
.tips-card ul li:last-child { border-bottom: none; }
.tips-card ul li::before {
  content: '▸';
  color: var(--blue);
  flex-shrink: 0;
  font-size: 0.65rem;
}

.disclaimer-box {
  border: 1px solid rgba(199,118,0,.12);
  border-radius: var(--r-sm);
  padding: 1rem 1.2rem;
  font-family: var(--mono);
  font-size: 0.63rem;
  color: var(--muted);
  line-height: 1.9;
  margin-top: 2rem;
  background: var(--surface);
  transition: background var(--trans), color var(--trans);
}

/* ═══════════════════════════════════════════════
   TYPOGRAPHY TUNE-UP
═══════════════════════════════════════════════ */
html { font-size: 16px; }
body {
  font-size: 16px;
  line-height: 1.62;
}

.brand-name,
.report-title,
.upload-title,
.tips-card h3 {
  font-family: var(--display);
}

.brand-name {
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.brand-tagline {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}

.privacy-badge,
.pill-badge,
.upload-sub,
.upload-privacy,
.file-tag,
.step-label,
.step-num-pill,
.setting-field label,
.fy-detected-label,
.fy-chip,
.report-fy-tag,
.report-meta,
.sec-label,
.hc-label,
.hc-sub,
.stat-label,
.stat-sub,
.tab,
.tips-card ul li,
.info-box,
.disclaimer-box,
th, td {
  font-size: 0.8rem;
}

.upload-title { font-size: 1.16rem; }
.setting-field select,
.setting-field input[type="text"] { font-size: 1.02rem; }

.btn-primary { font-size: 1rem; font-weight: 700; font-family: var(--display); }
.btn-secondary { font-size: 0.9rem; }
.report-title { font-size: clamp(1.36rem, 3vw, 2.05rem); }

.hc-value { font-size: 2.16rem; font-family: var(--display); }
.stat-value { font-size: 1.22rem; font-family: var(--display); }


.asset-name { font-size: 0.96rem; font-family: var(--display); }
.asset-row span:first-child { font-size: 0.74rem; }
.asset-row span:last-child  { font-size: 0.84rem; }

.tab { font-size: 0.86rem; font-family: var(--display); }
.prog-title { font-size: 0.74rem; }
.prog-pct { font-size: 0.82rem; }
#progressLog { font-size: 0.76rem; }
.rate-badge { font-size: 0.76rem; }

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media (max-width: 960px) {
  .settings-grid { grid-template-columns: repeat(2, 1fr); }
  .setting-field:nth-child(2) { border-right: none; }
  .setting-field:nth-child(n+3) { border-top: 1px solid var(--border); }
  .hero-row  { grid-template-columns: repeat(3, 1fr); }
  .stats-row { grid-template-columns: repeat(3, 1fr); }
  .hc-value  { font-size: 1.5rem; }
  .upload-hint { display: none; }
  .upload-divider { display: none; }
}

@media (max-width: 768px) {
  .brand-tagline  { display: none; }
  .hero-row       { grid-template-columns: 1fr; gap: 0.75rem; }
  .stats-row      { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .asset-grid     { grid-template-columns: repeat(2, 1fr); }
  .report-banner  { flex-direction: column; }
  .report-meta    { text-align: left; }
  .pill-badge     { display: none; }
  .privacy-badge  { display: none; }

  /* Suspense — mobile */
  #suspenseBox         { padding: 1.25rem 1rem; }
  .suspense-header     { flex-direction: column; gap: 0.75rem; }
  .suspense-header .btn-secondary { width: 100%; justify-content: center; }
  .suspense-footer     { flex-direction: column; align-items: stretch; }
  .suspense-footer .btn-primary   { width: 100%; justify-content: center; }
  .suspense-counter    { text-align: center; }
  /* Split card — 2-column grid on tablet/mobile */
  .susp-split-fields   { grid-template-columns: 1fr 1fr; }
  .susp-field-date     { grid-column: 1 / -1; }
  .susp-item-head-left { gap: 0.4rem; }
  .btn-quick-fill      { font-size: 0.65rem; }

  /* Manual entries — mobile */
  #manualEntriesBox        { padding: 1.25rem 1rem; }
  .manual-entries-header   { flex-direction: column; gap: 0.75rem; }
  .manual-entries-header .btn-secondary { width: 100%; justify-content: center; }
  .manual-entries-footer   { flex-direction: column; align-items: stretch; }
  .manual-entries-footer .btn-primary   { width: 100%; justify-content: center; }
}

@media (max-width: 540px) {
  .settings-grid  { grid-template-columns: 1fr; }
  .setting-field  { border-right: none !important; border-top: 1px solid var(--border) !important; }
  .setting-field:first-child { border-top: none !important; }
  .stats-row      { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .asset-grid     { grid-template-columns: 1fr 1fr; }
  .upload-inner   { padding: 2rem 1.25rem; }
  .btn-primary    { width: 100%; justify-content: center; }
  .hc-value       { font-size: 1.45rem; }
  .hero-card      { padding: 1.2rem 1.3rem; }
  .generate-area  { flex-direction: column; align-items: stretch; }
  .tab-wrapper    { padding: 0.85rem; }

  /* Suspense — small mobile */
  .suspense-input  { min-width: 90px; font-size: 0.75rem; padding: 0.4rem 0.5rem; }
  .btn-approve     { font-size: 0.7rem; padding: 0.4rem 0.65rem; }
  .suspense-title  { font-size: 0.9rem; }
  .suspense-note   { font-size: 0.65rem; }
  .susp-item-foot        { flex-direction: column; align-items: stretch; }
  .susp-item-foot-actions { justify-content: flex-end; }
  .btn-approve           { flex: 1; text-align: center; justify-content: center; }
}

/* ═══════════════════════════════════════════════
   SUSPENSE TRANSACTIONS
═══════════════════════════════════════════════ */
#suspenseBox {
  display: none;
  background: var(--surface);
  border: 1px solid rgba(244,71,71,0.3);
  border-radius: var(--r-card);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm), 0 0 0 1px rgba(244,71,71,0.06);
  animation: slide-up .4s cubic-bezier(.4,0,.2,1);
  transition: background var(--trans);
}

.suspense-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.suspense-icon { font-size: 1.4rem; flex-shrink: 0; line-height: 1; }

.suspense-info { flex: 1; min-width: 0; }

.suspense-title {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--loss);
  margin-bottom: 0.2rem;
}

.suspense-sub {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  line-height: 1.6;
}

.suspense-note {
  background: var(--loss-dim);
  border: 1px solid rgba(244,71,71,0.15);
  border-radius: var(--r-btn);
  padding: 0.65rem 1rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--loss);
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

.suspense-input {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.8rem;
  padding: 0.35rem 0.6rem;
  width: 100%;
  min-width: 110px;
  transition: border-color var(--trans);
}
.suspense-input:focus { outline: none; border-color: var(--blue); }
.suspense-input:disabled { opacity: .5; cursor: not-allowed; }

.price-input-wrap {
  display: inline-flex;
  align-items: center;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  transition: border-color var(--trans);
  min-width: 140px;
}
.price-input-wrap:focus-within { border-color: var(--blue); }
.price-input-wrap .price-symbol {
  padding: 0 0.25rem 0 0.65rem;
  color: var(--muted);
  font-size: 0.85rem;
  user-select: none;
  pointer-events: none;
  flex-shrink: 0;
}
.price-input-wrap input {
  background: transparent;
  border: none;
  outline: none;
  flex: 1;
  min-width: 0;
  padding: 0.35rem 0.6rem 0.35rem 0.2rem;
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.8rem;
}

.btn-approve {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.35rem 0.85rem;
  border-radius: var(--r-btn);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--trans);
}
.btn-approve:hover:not(:disabled) { border-color: rgba(27,181,95,.4); color: var(--gain); background: var(--gain-dim); }
.btn-approve.done { background: var(--gain-dim); border-color: rgba(27,181,95,.35); color: var(--gain); cursor: default; }

.suspense-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.suspense-counter {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-dim);
}

.susp-hide-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
}
.susp-hide-toggle input[type="checkbox"] {
  accent-color: var(--blue);
  cursor: pointer;
}

.estimated-badge {
  display: inline-block;
  background: var(--loss-dim);
  color: var(--loss);
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  letter-spacing: 0.04em;
  vertical-align: middle;
  margin-left: 0.3rem;
}

.suspense-warn-strip {
  background: var(--loss-dim);
  border: 1px solid rgba(244,71,71,0.18);
  border-radius: var(--r-btn);
  padding: 0.65rem 1rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--loss);
  line-height: 1.7;
  margin-bottom: 1rem;
  display: none;
}

.feb-manual {
  background: rgba(109,55,255,0.12);
  color: #8B5CF6;
  border: 1px solid rgba(109,55,255,0.2);
}

/* ═══════════════════════════════════════════════
   MANUAL PURCHASE ENTRIES
═══════════════════════════════════════════════ */
#manualEntriesBox {
  background: var(--surface);
  border: 1px solid rgba(109,55,255,0.25);
  border-radius: var(--r-card);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm), 0 0 0 1px rgba(109,55,255,0.06);
  animation: slide-up .4s cubic-bezier(.4,0,.2,1);
  transition: background var(--trans);
}

.manual-entries-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.manual-entries-info { flex: 1; min-width: 0; }

.manual-entries-title {
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 700;
  color: #8B5CF6;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
}

.manual-entries-sub {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  line-height: 1.6;
}

.manual-entries-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.manual-entries-note {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--muted);
}

.btn-remove {
  background: transparent;
  border: 1px solid rgba(244,71,71,0.25);
  color: var(--loss);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-btn);
  cursor: pointer;
  transition: all var(--trans);
}
.btn-remove:hover { background: var(--loss-dim); border-color: rgba(244,71,71,0.4); }

/* ═══════════════════════════════════════════════
   SUSPENSE SPLIT UI
═══════════════════════════════════════════════ */
.susp-item {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  margin-bottom: 0.75rem;
  overflow: hidden;
}
/* ─── Item header ─── */
.susp-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  background: var(--surface2);
  flex-wrap: wrap;
}
.susp-item-head-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  min-width: 0;
}
.susp-item-head-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.susp-asset-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
}
.susp-meta {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--text-dim);
}
.susp-type-tag {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  padding: 0.12rem 0.45rem;
  border-radius: var(--r-pill);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
/* Superscript variant: sits top-right of the asset name */
.susp-type-sup {
  font-size: 0.5rem;
  padding: 0.08rem 0.28rem;
  margin-top: 0.18rem;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}
.susp-type-withdrawal {
  background: var(--loss-dim);
  color: var(--loss);
  border: 1px solid rgba(244,71,71,0.2);
}
.susp-type-deposit {
  background: rgba(27,181,95,0.1);
  color: var(--gain);
  border: 1px solid rgba(27,181,95,0.2);
}
/* Opening-balance: pre-FY inventory carried in from before the report's window.
   Distinct from deposit/withdrawal — the user holds the asset on the exchange
   from the start; only the cost basis is unknown. */
.susp-type-opening {
  background: rgba(99,127,255,0.12);
  color: #8aa0ff;
  border: 1px solid rgba(99,127,255,0.28);
}
.susp-approved-badge {
  background: var(--gain-dim);
  border: 1px solid rgba(27,181,95,.35);
  color: var(--gain);
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
}
.btn-quick-fill {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--blue);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.25rem 0.65rem;
  border-radius: var(--r-btn);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--trans);
}
.btn-quick-fill:hover { background: rgba(59,130,246,0.1); border-color: var(--blue); }

/* ─── Split card (one per part) ─── */
.susp-splits { padding: 0 1rem; }
.susp-split-card {
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border);
}
.susp-split-card:last-child { border-bottom: none; }
.susp-split-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}
.susp-split-part-label {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
/* Labeled 3-column grid: Qty | Price | Date */
.susp-split-fields {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1.2fr;
  gap: 0.5rem;
  align-items: start;
}
.susp-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
/* Currency toggle inside price label */
.susp-price-label { display:flex; align-items:center; gap:0.35rem; flex-wrap:nowrap; }
.currency-toggle  { display:inline-flex; border:1px solid var(--border); border-radius:4px; overflow:hidden; flex-shrink:0; }
.cur-btn {
  padding: 1px 7px;
  font-size: 0.6rem;
  font-family: var(--mono);
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--trans), color var(--trans);
  line-height: 1.6;
}
.cur-btn:hover    { background: var(--surface2); }
.cur-btn.cur-active { background: var(--blue); color: #fff; }
.cur-btn:disabled   { opacity: .45; cursor: not-allowed; }

/* Conversion hint below price input */
.price-hint {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--muted);
  margin-top: 0.15rem;
  min-height: 0.9rem;
}

.susp-field > span {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--text-dim);
  white-space: nowrap;
}
.susp-field input.suspense-input { width: 100%; min-width: 0; max-width: none; }
.susp-not-sale-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  margin-top: 0.4rem;
}
.susp-not-sale-label input[type=checkbox] { cursor: pointer; }
.susp-not-sale-tag {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--muted);
  font-style: italic;
  align-self: center;
}

/* ─── Item footer ─── */
.susp-item-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 0.5rem;
}
.susp-item-foot-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.susp-qty-info {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--text-dim);
}
.susp-qty-info.error { color: var(--loss); font-weight: 600; }
.btn-add-split {
  background: none;
  border: 1px dashed var(--border);
  color: var(--text-dim);
  font-family: var(--sans);
  font-size: 0.72rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-btn);
  cursor: pointer;
  transition: all var(--trans);
}
.btn-add-split:hover { border-color: var(--blue); color: var(--blue); }
.btn-remove-split {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.15rem 0.3rem;
  transition: color var(--trans);
  flex-shrink: 0;
}
.btn-remove-split:hover { color: var(--loss); }

.suspense-blocker-strip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(244,71,71,0.08);
  border: 1px solid rgba(244,71,71,0.2);
  border-radius: var(--r-btn);
  padding: 0.75rem 1rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--loss);
  line-height: 1.5;
  margin-top: 1rem;
}

/* ═══════════════════════════════════════════════
   SUSPENSE V2 — "Missing Data Resolution" redesign
   Two-column layout: main table + tax impact sidebar.
   All new classes use the susp-v2- prefix; existing
   susp-* classes are unchanged for the Advanced panel.
═══════════════════════════════════════════════ */

/* Override the old card shell — the layout now lives inside */
#suspenseBox {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

/* Two-column grid: main (flex) + 240px sidebar */
.susp-v2-layout { display: block; }

/* ── Main panel ───────────────────────────────── */
.susp-v2-main {
  background: var(--surface);
  border-radius: 24px;
  box-shadow: 0 0 40px rgba(0,0,0,0.08);
  overflow: hidden;
  max-width: 1140px;
}

.susp-v2-header {
  padding: 1.5rem 1.75rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

.susp-v2-headline-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.susp-v2-headline {
  font-family: var(--headline);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.15;
  margin: 0;
}

.susp-v2-issue-count {
  font-family: var(--data);
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-top: 0.2rem;
}

.susp-v2-progress-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
  flex-shrink: 0;
}

.susp-v2-progress-label,
.susp-v2-counter {
  font-family: var(--data);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-dim);
  white-space: nowrap;
}

.susp-v2-progress-bar-track {
  width: 120px;
  height: 4px;
  background: var(--surface3);
  border-radius: 100px;
  overflow: hidden;
}

.susp-v2-progress-bar-fill {
  height: 100%;
  background: var(--blue);
  border-radius: 100px;
  transition: width 0.4s cubic-bezier(.4,0,.2,1);
}

/* ── Warning banner ───────────────────────────── */
.susp-v2-warning {
  margin: 1rem 1.75rem 0;
  background: var(--loss-dim);
  border-radius: 8px;
  padding: 0.65rem 1rem;
  font-family: var(--data);
  font-size: 0.68rem;
  color: var(--loss);
  line-height: 1.7;
}
.susp-v2-warning.is-success {
  background: var(--gain-dim);
  color: var(--gain);
}

/* ── Bulk action bar ──────────────────────────── */
.susp-v2-bulk-bar {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1.75rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  margin-top: 1rem;
}

.susp-v2-bulk-label {
  font-family: var(--data);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-dim);
  flex-shrink: 0;
  margin-right: 0.15rem;
}

.susp-v2-btn-bulk {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--data);
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.35rem 0.85rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--trans);
  white-space: nowrap;
}
.susp-v2-btn-bulk:hover:not(:disabled) {
  border-color: rgba(48,103,240,.4);
  color: var(--blue);
  background: var(--blue-dim);
}
.susp-v2-btn-bulk.approve-variant {
  color: var(--gain);
  border-color: rgba(27,181,95,.3);
  background: var(--gain-dim);
}
.susp-v2-btn-bulk.approve-variant:hover:not(:disabled) {
  background: rgba(27,181,95,0.2);
}
.susp-v2-btn-bulk:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Table header ─────────────────────────────── */
.susp-v2-table-header {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(180px, 280px) auto minmax(140px, 220px) minmax(110px, 140px) 110px;
  gap: 0.6rem;
  padding: 0.6rem 1.75rem;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}

.susp-v2-th {
  font-family: var(--data);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Transaction rows ─────────────────────────── */
.susp-v2-row {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(180px, 280px) auto minmax(140px, 220px) minmax(110px, 140px) 110px;
  gap: 0.6rem;
  align-items: start;
  padding: 0.85rem 1.75rem;
  border-bottom: 1px solid var(--border);
  transition: background var(--trans);
}
.susp-v2-row:last-child { border-bottom: none; }
.susp-v2-row:hover { background: var(--row-hover); }
.susp-v2-row.is-approved { opacity: 0.55; }

/* Read-only sell price wrap — same shape as purchase price but no focus ring */
.susp-v2-price-readonly { opacity: 0.75; cursor: default; }
.susp-v2-price-readonly .susp-v2-cur-btn { cursor: default; }
.susp-v2-price-readonly .susp-v2-cur-btn:not(.active) { opacity: 0.35; }

/* Col 1: Asset icon + name + sub-label */
.susp-v2-asset-cell {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  overflow: hidden;
  padding-top: 0.2rem; /* align icon with input top edge */
}

.susp-v2-asset-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--blue-dim);
  color: var(--blue);
  font-family: var(--headline);
  font-size: 0.78rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
}

.susp-v2-asset-name {
  font-family: var(--headline);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.susp-v2-asset-sub {
  font-family: var(--data);
  font-size: 0.68rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.1rem;
}

/* Col 2: Price input with inline currency toggle */
.susp-v2-price-cell {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

/* Price wrap: column flex so hint row lives inside the border */
.susp-v2-price-wrap {
  display: flex;
  flex-direction: column;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color var(--trans);
}
.susp-v2-price-wrap:focus-within { border-color: var(--blue); }

/* Inner row: number input + ₹/$ toggle buttons */
.susp-v2-price-input-row {
  display: flex;
  align-items: stretch;
}

.susp-v2-price-input {
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--data);
  font-size: 0.8rem;
  padding: 0.42rem 0.55rem;
  flex: 1;
  min-width: 0;
  outline: none;
}
.susp-v2-price-input:disabled { opacity: 0.5; cursor: not-allowed; }

/* Segmented ₹/$ currency toggle inside the price wrapper */
.susp-v2-cur-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 0.4rem 0 0.3rem;
  border-left: 1px solid var(--border);
  flex-shrink: 0;
}

.susp-v2-cur-btn {
  padding: 0.15rem 0.35rem;
  font-size: 0.58rem;
  font-family: var(--data);
  font-weight: 700;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--trans), color var(--trans), border-color var(--trans);
  line-height: 1;
  letter-spacing: 0.01em;
}
.susp-v2-cur-btn:hover:not(:disabled) { background: var(--surface3); color: var(--text-dim); }
.susp-v2-cur-btn.active {
  background: var(--blue);
  border-color: transparent;
  color: #fff;
}
.susp-v2-cur-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Hint row inside price wrap */
.susp-v2-price-hint {
  font-family: var(--data);
  font-size: 0.58rem;
  color: var(--muted);
  padding: 0.18rem 0.55rem 0.22rem;
  min-height: 1.1rem;
  line-height: 1.2;
}
.susp-v2-price-hint:not(:empty) {
  border-top: 1px solid var(--border);
}

/* Per-row "No market data" note (shown when suggested_price is null) */
.susp-v2-no-mkt-note {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.3rem;
  font-size: 0.68rem;
  font-family: var(--data);
  color: var(--muted);
  opacity: 0.75;
  cursor: default;
}

/* Per-row "Use Market Price" reset link */
.susp-v2-mkt-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.3rem;
  font-size: 0.68rem;
  font-family: var(--data);
  color: var(--blue);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity var(--trans);
}
.susp-v2-mkt-link:hover { opacity: 1; text-decoration: underline; }
.susp-v2-mkt-link:disabled { opacity: 0.3; cursor: not-allowed; text-decoration: none; }

/* Col 3: Date input */
.susp-v2-date-cell { display: block; }

.susp-date-seg {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.42rem 0.55rem;
  transition: border-color var(--trans);
}
.susp-date-seg:focus-within { border-color: var(--blue); }
.susp-date-seg.input-error  { border-color: var(--loss); }
.susp-date-seg:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
.susp-date-seg-part {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--data);
  font-size: 0.78rem;
  width: 2.2ch;
  text-align: center;
  padding: 0;
}
.susp-date-seg-yyyy {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--data);
  font-size: 0.78rem;
  width: 4.2ch;
  text-align: center;
  padding: 0;
}
.susp-date-seg-part:disabled,
.susp-date-seg-yyyy:disabled { cursor: not-allowed; }
.susp-date-seg-sep {
  color: var(--text-dim);
  font-family: var(--data);
  font-size: 0.78rem;
  user-select: none;
  line-height: 1;
}

/* Read-only event date — matches date input height/radius but not interactive */
.susp-v2-date-readonly {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  font-family: var(--data);
  font-size: 0.78rem;
  padding: 0.42rem 0.55rem;
  width: 100%;
  opacity: 0.7;
  user-select: none;
  cursor: default;
}

/* Col 4: Approve button */
.susp-v2-action-cell {
  display: flex;
  justify-content: flex-end;
}

.susp-v2-btn-approve {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--data);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.38rem 0.8rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--trans);
  white-space: nowrap;
}
.susp-v2-btn-approve:hover:not(:disabled):not(.done) {
  border-color: rgba(27,181,95,.4);
  color: var(--gain);
  background: var(--gain-dim);
}
.susp-v2-btn-approve.done {
  background: var(--gain-dim);
  border-color: rgba(27,181,95,.35);
  color: var(--gain);
  cursor: pointer;
  transition: all var(--trans);
}
/* The .undo-icon (↺) is always rendered next to ✓ Approved so touch users
   can see the affordance — :hover-only would invisible-fail on mobile. */
.susp-v2-btn-approve.done .undo-icon {
  margin-left: 0.35rem;
  opacity: 0.7;
  font-weight: 500;
}
/* Desktop hover is purely a bonus signal that the button is interactive. */
.susp-v2-btn-approve.done:hover {
  background: var(--yellow-dim);
  border-color: rgba(199,118,0,.4);
  color: var(--yellow);
}
.susp-v2-btn-approve.done:hover .undo-icon { opacity: 1; }
.susp-v2-btn-approve.ready {
  background: var(--gain-dim);
  border-color: rgba(27,181,95,.5);
  color: var(--gain);
}
.susp-v2-btn-approve.ready:hover {
  background: rgba(27,181,95,.25);
  border-color: var(--gain);
}

/* Extra splits area — always visible when there are additional splits */
.susp-v2-splits-area {
  padding: 0.5rem 0 0;
}

/* ── Footer: lock strip + generate button ─────── */
.susp-v2-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  padding: 1rem 1.75rem;
  border-top: 1px solid var(--border);
  background: var(--surface2);
  flex-wrap: wrap;
}
.susp-v2-lock-strip { margin-right: auto; }

.susp-v2-lock-strip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--data);
  font-size: 0.72rem;
  color: var(--text-dim);
  flex: 1;
}
.susp-v2-lock-strip.unlocked { color: var(--gain); }

/* ═══════════════════════════════════════════════
   SUSPENSE V2 — Exchange grouping (Phase 3 of Suspense Auto-Resolver)

   Wraps existing .susp-v2-row blocks under per-exchange headers so users
   can see at a glance which exchange each unresolved item came from. The
   per-row UI (price input, currency toggle, date segments, approve, splits)
   is unchanged — only the surrounding section header is new.

   See docs/plans/suspense-auto-resolver.md §5 and the production-style
   mock at frontend/mock_suspense_resolver_v2.html.
═══════════════════════════════════════════════ */

.susp-v2-exch-section {
  border-bottom: 1px solid var(--border);
}
.susp-v2-exch-section:last-of-type { border-bottom: none; }

.susp-v2-exch-header {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 1rem 1.75rem;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
}
.susp-v2-exch-section:first-of-type .susp-v2-exch-header { border-top: none; }

.susp-v2-exch-logo {
  width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center;
  font-family: var(--headline); font-weight: 800; color: #fff; font-size: 0.78rem;
  flex-shrink: 0;
  /* Default fallback gradient; exchange-specific variants override below */
  background: linear-gradient(135deg, var(--blue), var(--purple));
}
.susp-v2-exch-logo.wazirx  { background: linear-gradient(135deg, #FF8C42, var(--yellow)); }
.susp-v2-exch-logo.coindcx { background: linear-gradient(135deg, var(--cyan), var(--blue)); }
.susp-v2-exch-logo.binance { background: linear-gradient(135deg, var(--yellow), #C77600); }
.susp-v2-exch-logo.manual  { background: linear-gradient(135deg, var(--muted), var(--text-dim)); }

.susp-v2-exch-name {
  font-family: var(--headline); font-weight: 700; font-size: 0.95rem;
  color: var(--text);
}
.susp-v2-exch-sub {
  font-family: var(--data); font-size: 0.68rem;
  color: var(--text-dim); margin-top: 0.12rem;
}

.susp-v2-exch-status {
  margin-left: auto;
  font-family: var(--data); font-size: 0.68rem; font-weight: 600;
  padding: 0.2rem 0.55rem; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface3);
  color: var(--text-dim);
}
.susp-v2-exch-status.done    { color: var(--gain);   border-color: rgba(27,181,95,.35);  background: var(--gain-dim); }
.susp-v2-exch-status.partial { color: var(--yellow); border-color: rgba(199,118,0,.35);  background: var(--yellow-dim); }


/* ═══════════════════════════════════════════════
   SUSPENSE V2 — Method picker + resolve panel (Phase 4)

   Per-exchange row that lets the user pick HOW to resolve this group's
   missing purchase prices: manual entry (existing flow), prior-year CSV
   upload, or exchange API (Phase 5 — disabled placeholder for now).
   The picker sits between the exchange header and the data rows; when
   a non-manual method is selected, a resolve panel renders below the
   picker showing the upload zone / progress / source attribution.
═══════════════════════════════════════════════ */

.susp-v2-method-row {
  display: flex; gap: 0.45rem;
  padding: 0.75rem 1.75rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  align-items: center;
}
.susp-v2-method-label {
  font-family: var(--data); font-size: 0.7rem; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em;
  margin-right: 0.35rem;
}
.susp-v2-method {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  font-family: var(--data); font-size: 0.74rem; font-weight: 500;
  cursor: pointer; transition: all var(--trans);
  white-space: nowrap;
}
.susp-v2-method:hover:not(.disabled) {
  border-color: rgba(48,103,240,.4);
  color: var(--text);
}
.susp-v2-method.active {
  background: var(--blue-dim);
  border-color: var(--blue);
  color: var(--text);
}
.susp-v2-method.disabled { opacity: 0.45; cursor: not-allowed; }
.susp-v2-method .m-icon { font-size: 0.85rem; }
.susp-v2-method .m-recommended {
  margin-left: 0.35rem; font-size: 0.55rem; font-weight: 700;
  padding: 0.08rem 0.35rem; border-radius: var(--r-pill);
  background: rgba(27,181,95,0.12); color: var(--gain);
  letter-spacing: 0.05em; text-transform: uppercase;
}
.susp-v2-method .m-soon {
  margin-left: 0.35rem; font-size: 0.55rem; font-weight: 700;
  padding: 0.08rem 0.35rem; border-radius: var(--r-pill);
  background: var(--surface3); color: var(--muted);
  letter-spacing: 0.05em; text-transform: uppercase;
  border: 1px solid var(--border);
}

/* The resolve panel hosts the per-method UI (upload zone, API form, etc.).
   It lives between the method row and the rows table. */
.susp-v2-resolve-panel {
  padding: 1.1rem 1.75rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

/* CSV upload zone — drop-target styling that mirrors the existing
   uploadDropZone in look but is scoped to the suspense resolver. */
.susp-v2-upload-zone {
  /* MUST be a block-level flex container — <label> is inline by default,
     and inline elements containing block children (the uz-icon span +
     uz-title/uz-sub divs) render their border as disconnected segments
     per line, producing stray dashed brackets on the left edge. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 1.5px / 10px radius matches the mock — the prior 2px / 20px combo
     drew an exaggerated bracket-shaped corner that read as a stray UI
     fragment rather than a continuous drop zone. */
  border: 1.5px dashed var(--border-hi);
  border-radius: var(--r-btn);
  padding: 1rem 1.2rem;
  text-align: center;
  background: transparent;
  transition: all var(--trans);
  cursor: pointer;
}
.susp-v2-upload-zone:hover,
.susp-v2-upload-zone.dragover {
  border-color: var(--blue);
  background: var(--blue-dim);
}
.susp-v2-upload-zone .uz-icon {
  font-size: 1.3rem;
  margin-bottom: 0.4rem;
  display: block;
}
.susp-v2-upload-zone .uz-title {
  font-family: var(--headline); font-weight: 700; font-size: 0.92rem;
  color: var(--text);
  margin-bottom: 0.2rem;
}
.susp-v2-upload-zone .uz-sub {
  font-family: var(--data); font-size: 0.72rem; color: var(--text-dim);
}
.susp-v2-upload-zone input[type=file] {
  display: none;
}

/* Inline loading + error states */
.susp-v2-resolve-status {
  display: flex; gap: 0.55rem; align-items: center;
  font-family: var(--data); font-size: 0.78rem;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
}
.susp-v2-resolve-status.loading {
  background: var(--blue-dim); color: var(--blue);
  border: 1px solid rgba(48,103,240,.2);
}
.susp-v2-resolve-status.error {
  background: var(--loss-dim); color: var(--loss);
  border: 1px solid rgba(244,71,71,.2);
}
.susp-v2-resolve-status.success {
  background: var(--gain-dim); color: var(--gain);
  border: 1px solid rgba(27,181,95,.25);
}
.susp-v2-resolve-status .rs-icon { font-size: 0.9rem; flex-shrink: 0; }
.susp-v2-resolve-status .rs-action {
  margin-left: auto;
  background: transparent; border: none;
  color: inherit;
  font-family: var(--data); font-size: 0.72rem; font-weight: 600;
  cursor: pointer; text-decoration: underline;
  padding: 0;
}
.susp-v2-resolve-status .rs-action:hover { opacity: 0.8; }

/* ─── API credential form + permission warning (Phase 5) ─────────────── */

.susp-v2-api-form {
  display: grid; gap: 0.65rem;
  max-width: 540px;
}
.susp-v2-api-warn {
  background: var(--yellow-dim); color: var(--yellow);
  border: 1px solid rgba(199,118,0,0.25);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  font-family: var(--data); font-size: 0.74rem; line-height: 1.5;
}
.susp-v2-api-warn strong { font-weight: 700; }
.susp-v2-api-label {
  display: grid; gap: 0.2rem;
}
.susp-v2-api-label > span {
  font-family: var(--data); font-size: 0.65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
}
.susp-v2-api-input {
  background: var(--surface2); border: 1px solid var(--border); color: var(--text);
  padding: 0.55rem 0.7rem; border-radius: 8px;
  font-family: var(--data); font-size: 0.82rem;
  outline: none; transition: border-color var(--trans);
}
.susp-v2-api-input:focus { border-color: var(--blue); }

.susp-v2-api-actions {
  display: flex; gap: 0.5rem; justify-content: flex-end;
  margin-top: 0.4rem;
}
.susp-v2-api-actions .btn-primary,
.susp-v2-api-actions .btn-secondary {
  font-size: 0.78rem;
  padding: 0.5rem 1rem;
}

.susp-v2-api-perms {
  background: var(--yellow-dim);
  border: 1px solid rgba(199,118,0,0.3);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  margin: 0.55rem 0;
  font-family: var(--data); font-size: 0.78rem; line-height: 1.55;
  color: var(--text);
}
.susp-v2-api-perms-title {
  font-weight: 700; color: var(--yellow);
  margin-bottom: 0.35rem;
}
.susp-v2-api-perms-body code {
  background: var(--surface3); color: var(--text);
  padding: 0.05rem 0.32rem; border-radius: 3px;
  font-family: 'IBM Plex Sans', monospace; font-size: 0.95em;
}
.susp-v2-api-perms-ack {
  display: flex; align-items: flex-start; gap: 0.5rem;
  margin-top: 0.7rem;
  font-family: var(--data); font-size: 0.78rem;
  cursor: pointer;
  color: var(--text);
}
.susp-v2-api-perms-ack input[type=checkbox] {
  margin-top: 0.2rem;
  cursor: pointer;
}

/* "Common causes" bulleted diagnostics list, shown inline beneath the
   error banner when a probe failure looks like an auth issue. */
.susp-v2-error-causes {
  margin: 0.4rem 0 0 1.5rem; padding: 0;
  font-family: var(--data); font-size: 0.74rem; color: var(--text-dim);
  line-height: 1.55;
}
.susp-v2-error-causes li { margin-bottom: 0.15rem; }

/* ─── Source attribution line + inventory note (Phase 6) ─────────────────
   The source line replaces the regular price-hint slot inside .susp-v2-price-wrap
   whenever a split was pre-filled by CSV/API. It carries provenance
   ("From WazirX order #16") and a restore affordance for overrides. */
.susp-v2-source-line {
  display: flex; align-items: center; gap: 0.4rem;
  font-family: var(--data); font-size: 0.58rem;
  color: var(--text-dim);
  padding: 0.22rem 0.55rem; min-height: 1.1rem;
  border-top: 1px solid var(--border);
  line-height: 1.2;
}
.susp-v2-source-line .src-id {
  color: var(--blue); font-weight: 600;
}
.susp-v2-source-line .revert {
  margin-left: auto;
  background: transparent; border: none; padding: 0;
  font-family: var(--data); font-size: 0.58rem; color: var(--blue);
  cursor: pointer; opacity: 0.85;
}
.susp-v2-source-line .revert:hover { opacity: 1; text-decoration: underline; }
.susp-v2-source-line.overridden {
  background: var(--yellow-dim);
  color: var(--yellow);
}
.susp-v2-source-line.overridden .src-id    { color: var(--yellow); }
.susp-v2-source-line.overridden .revert    { color: var(--yellow); }

/* Footer banner shown when a CSV/API source produced more lots than the
   resolver consumed. Communicates that the unused lots are carried forward
   as inventory for future FYs. */
.susp-v2-inventory-note {
  display: flex; gap: 0.6rem; align-items: flex-start;
  margin: 0.8rem 1.75rem;
  background: var(--blue-dim);
  border: 1px solid rgba(48,103,240,0.18);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  font-family: var(--data); font-size: 0.74rem; color: var(--text);
  line-height: 1.55;
}
.susp-v2-inventory-note .icon { color: var(--blue); flex-shrink: 0; font-size: 0.9rem; }
.susp-v2-inventory-note .title { font-weight: 700; color: var(--blue); margin-right: 0.35rem; }
.susp-v2-inventory-note .body { color: var(--text-dim); }

/* Shortfall variant: same layout as the inventory note but yellow tokens
   so it reads as a warning ("coverage falls short") instead of an info
   note ("more lots than needed, carried forward"). */
.susp-v2-inventory-note.susp-v2-shortfall-note {
  background: var(--yellow-dim);
  border-color: rgba(199,118,0,0.25);
}
.susp-v2-inventory-note.susp-v2-shortfall-note .icon  { color: var(--yellow); }
.susp-v2-inventory-note.susp-v2-shortfall-note .title { color: var(--yellow); }

/* ═══════════════════════════════════════════════
   SUSPENSE V2 — Auto-fill dropdown + per-section approve-all
   (Phase 7 — replaces the 3-button method picker with a single
   dropdown trigger that reflects the current source state.)

   The dropdown opens upward/downward inside a flex header. The exch
   section needs overflow:visible so the menu can escape the card edge.
═══════════════════════════════════════════════ */

/* Allow dropdown menu to escape the section card */
.susp-v2-exch-section { overflow: visible; }

/* Right-aligned header action group: Approve all + Bulk-actions dropdown */
.susp-v2-head-actions {
  margin-left: auto;
  display: flex; align-items: center; gap: 0.5rem;
  flex-shrink: 0;
}

.susp-v2-btn-approve-all {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--gain-dim);
  border: 1px solid rgba(27,181,95,0.3);
  color: var(--gain);
  border-radius: var(--r-btn);
  padding: 0.45rem 0.75rem;
  font-family: var(--data); font-size: 0.78rem; font-weight: 600;
  cursor: pointer;
  transition: all var(--trans);
  white-space: nowrap;
}
.susp-v2-btn-approve-all:hover:not(:disabled) { background: rgba(27,181,95,0.18); }
.susp-v2-btn-approve-all .ba-count {
  background: var(--gain); color: #fff;
  font-size: 0.66rem; font-weight: 700;
  padding: 1px 6px; border-radius: var(--r-pill);
  min-width: 18px; text-align: center;
}
.susp-v2-btn-approve-all:disabled {
  opacity: 0.55; cursor: not-allowed;
  background: transparent; color: var(--text-dim); border-color: var(--border);
}
.susp-v2-btn-approve-all:disabled .ba-count { background: var(--surface3); color: var(--text-dim); }

/* Dropdown trigger button — label varies by autofill state */
.susp-v2-autofill { position: relative; }
.susp-v2-autofill.is-open { z-index: 100; }
.susp-v2-autofill-btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--r-btn);
  padding: 0.45rem 0.75rem;
  font-family: var(--data); font-size: 0.78rem; font-weight: 500;
  cursor: pointer;
  transition: all var(--trans);
  white-space: nowrap;
}
.susp-v2-autofill-btn:hover { border-color: rgba(48,103,240,0.4); }
.susp-v2-autofill-btn .btn-icon { font-size: 0.95rem; line-height: 1; }
.susp-v2-autofill-btn .caret { color: var(--text-dim); font-size: 0.7rem; }
/* State variants */
.susp-v2-autofill-btn.is-default {
  background: var(--surface2); border-color: var(--border); color: var(--text);
}
.susp-v2-autofill-btn.is-pending {
  background: var(--blue-dim); border-color: rgba(48,103,240,0.35); color: var(--blue);
}
.susp-v2-autofill-btn.is-pending .caret { color: var(--blue); }
.susp-v2-autofill-btn.is-applied {
  background: var(--gain-dim); border-color: rgba(27,181,95,0.3); color: var(--gain);
}
.susp-v2-autofill-btn.is-applied .caret { color: var(--gain); }
.susp-v2-autofill-btn.is-cleared {
  background: var(--yellow-dim); border-color: rgba(199,118,0,0.35); color: var(--yellow);
}
.susp-v2-autofill-btn.is-cleared .caret { color: var(--yellow); }

/* Menu */
.susp-v2-autofill-menu {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  padding: 0.35rem;
  min-width: 320px;
  box-shadow: var(--shadow-lg);
  z-index: 100;
  display: none;
}
.susp-v2-autofill.is-open .susp-v2-autofill-menu { display: block; }
.susp-v2-autofill-item {
  position: relative;
  display: flex; align-items: flex-start; gap: 0.65rem;
  padding: 0.65rem 0.75rem 0.65rem 1.5rem;
  border-radius: 7px;
  cursor: pointer;
  color: var(--text);
}
.susp-v2-autofill-item:hover { background: var(--surface3); }
.susp-v2-autofill-item.is-active { background: rgba(48,103,240,0.08); }
.susp-v2-autofill-item.is-active::before {
  content: '✓';
  position: absolute; left: 0.4rem; top: 0.7rem;
  color: var(--blue); font-weight: 700; font-size: 0.85rem;
}
.susp-v2-autofill-item.is-disabled { opacity: 0.45; cursor: not-allowed; }
.susp-v2-autofill-item.is-disabled:hover { background: transparent; }
.susp-v2-autofill-item.is-danger .ai-title { color: var(--loss); }
.susp-v2-autofill-item .ai-icon  { font-size: 1.05rem; line-height: 1; margin-top: 2px; flex-shrink: 0; }
.susp-v2-autofill-item .ai-title { font-family: var(--data); font-size: 0.82rem; font-weight: 500; display: flex; align-items: center; gap: 0.4rem; }
.susp-v2-autofill-item .ai-sub   { font-family: var(--data); font-size: 0.7rem; color: var(--text-dim); margin-top: 2px; line-height: 1.4; }
.susp-v2-autofill-item .ai-rec   { background: var(--blue);    color: #fff;             font-size: 0.6rem; padding: 1px 6px; border-radius: 4px; font-weight: 700; letter-spacing: 0.04em; }
.susp-v2-autofill-item .ai-def   { background: var(--surface3); color: var(--text-dim); font-size: 0.6rem; padding: 1px 6px; border-radius: 4px; font-weight: 700; letter-spacing: 0.04em; }
.susp-v2-autofill-item .ai-soon  { background: var(--surface3); color: var(--text-dim); font-size: 0.6rem; padding: 1px 6px; border-radius: 4px; }
.susp-v2-menu-sep { height: 1px; background: var(--border); margin: 0.35rem 0.25rem; }

/* Inline + Split ghost link inside the asset cell qty subtitle. Keeps the
   action column narrow + aligned across rows. */
.susp-v2-asset-qty-row {
  display: inline-flex; align-items: center; gap: 0.45rem; flex-wrap: wrap;
}
.susp-v2-asset-qty-row .dot-sep { color: var(--muted); font-size: 0.7rem; }
.susp-v2-btn-add-split {
  background: transparent; border: none; padding: 0; margin: 0;
  font-family: var(--data); font-size: 0.7rem;
  color: var(--blue); cursor: pointer;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.2rem;
}
.susp-v2-btn-add-split:hover { text-decoration: underline; }

/* Sell trade-type tag — extend existing .susp-type-* family */
.susp-type-sell { background: var(--loss-dim); color: var(--loss); }

/* Base reset for the inline ↺ revert/restore button. Without this, the
   button falls back to default browser chrome (grey box, padding) and looks
   like a misaligned card next to the source-line text. */
.susp-v2-source-line .src-link,
.susp-v2-source-line .revert {
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; font-size: inherit; cursor: pointer;
  display: inline; vertical-align: baseline;
  text-decoration: underline;
  color: var(--blue);
}
.susp-v2-source-line .src-link:hover,
.susp-v2-source-line .revert:hover { text-decoration: none; }
.susp-v2-source-line.overridden .src-link,
.susp-v2-source-line.overridden .revert { color: var(--yellow); }

/* Spinner that doubles as a sentinel for "fetch in progress". */
.susp-v2-spinner {
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: susp-v2-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes susp-v2-spin { to { transform: rotate(360deg); } }


/* ═══════════════════════════════════════════════
   PRINT
═══════════════════════════════════════════════ */
@media print {
  .upload-section, .settings-section, .btn-primary, .btn-secondary,
  .fy-switcher-bar, #progressBox,
  .action-bar, .generate-area, .tips-card,
  .theme-toggle, .sidebar,
  .mob-topbar, .mob-tabbar, .mob-sheet-overlay { display: none !important; }
  body     { background: white; color: #111; }
  body::before { display: none; }
  #report  { display: block !important; animation: none; }
  .rpage   { display: block !important; }
  [data-theme] {
    --bg: white; --surface: #f8f9fc; --surface2: #f0f3f8;
    --text: #111; --text-dim: #333; --muted: #666;
    --border: #dde2ea; --blue: #2255cc; --gain: #1a7a3e;
    --loss: #bb2222; --yellow: #8A4A00;
    --th-bg: #f0f3f8; --row-hover: #f8f8f8;
  }
}

/* ═══════════════════════════════════════════════
   APP SHELL — Left Sidebar Navigation
═══════════════════════════════════════════════ */
.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 224px;
  min-width: 224px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 200;
  transition: background var(--trans), border-color var(--trans);
  flex-shrink: 0;
}

.main-content {
  flex: 1;
  min-width: 0;
  overflow-x: clip; /* clip instead of hidden so position:sticky works in children */
  position: relative;
}

/* Brand inside sidebar */
.sb-brand {
  padding: 1.2rem 1.1rem 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

/* Nav section */
.sb-nav {
  padding: 0.7rem 0.45rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  flex-shrink: 0;
}

/* Section label dividing workflow steps from report views */
.sb-section-label {
  display: none;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.75rem 0.5rem 0.25rem;
}

/* Nav item */
.sb-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.5rem;
  border-radius: var(--r-sm);
  font-size: 0.79rem;
  font-weight: 500;
  color: var(--text-dim);
  cursor: pointer;
  border: none;
  background: transparent;
  text-align: left;
  width: 100%;
  transition: background var(--trans), color var(--trans);
  font-family: var(--sans);
  line-height: 1;
  white-space: nowrap;
  min-height: 36px;
}
.sb-item:hover:not(.sb-locked) {
  background: var(--surface2);
  color: var(--text);
}
.sb-item.sb-active {
  background: var(--blue-dim);
  color: var(--blue);
  font-weight: 600;
}
.sb-item.sb-done {
  color: var(--text-dim);
}
.sb-item.sb-locked {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}

/* Connector line between workflow steps (Setup → Review Prices) */
.sb-step-connector {
  display: none;
  width: 2px;
  height: 8px;
  /* align with center of step circles: nav-padding(0.45rem) + item-padding(0.5rem) + half-circle(11px) - half-line(1px) */
  margin-left: calc(0.45rem + 0.5rem + 10px);
  background: var(--border);
  border-radius: 1px;
  transition: background var(--trans);
}
.sb-step-connector.sb-connector-done {
  background: rgba(27,181,95,0.4);
}

/* Step circle indicator — used for sequential workflow steps */
.sb-step {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--text-dim);
  background: var(--surface);
  transition: background 0.2s cubic-bezier(.4,0,.2,1),
              border-color 0.2s cubic-bezier(.4,0,.2,1),
              box-shadow 0.2s cubic-bezier(.4,0,.2,1);
  position: relative;
  z-index: 1;
}
/* Available (unlocked but not current) */
.sb-item:not(.sb-locked):not(.sb-active):not(.sb-done) .sb-step {
  border-color: var(--muted);
  color: var(--text);
}
/* Active (current step) */
.sb-item.sb-active .sb-step {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 0 0 3px var(--blue-dim);
}
/* Done (completed step) */
.sb-item.sb-done .sb-step {
  background: var(--gain);
  border-color: var(--gain);
  color: #fff;
}
/* Toggle number vs checkmark inside circle */
.sb-step-n  { display: block; }
.sb-step-ck { display: none; width: 10px; height: 10px; }
.sb-item.sb-done .sb-step-n  { display: none; }
.sb-item.sb-done .sb-step-ck { display: block; }

/* Dot indicator — used for parallel report-view tabs */
.sb-dot {
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.sb-dot::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--border);
  transition: background var(--trans), box-shadow var(--trans);
}
.sb-item:not(.sb-locked):not(.sb-active) .sb-dot::before {
  background: var(--muted);
}
.sb-item.sb-active .sb-dot::before {
  background: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-dim);
}

/* FY context bar — sticky strip at top of main content, visible on all report pages */
.fy-context-bar {
  display: none; /* shown by JS after report generates */
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface2);
  border-bottom: 2px solid rgba(48,103,240,0.25);
  box-shadow: 0 2px 16px rgba(0,0,0,0.18), 0 1px 4px rgba(48,103,240,0.08);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  align-items: center;
  gap: 0;
  padding: 0 2rem;
  height: 50px;
  flex-shrink: 0;
}
.fybar-name {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-dim);
  padding-right: 1.25rem;
  border-right: 1px solid var(--border);
  margin-right: 1.25rem;
  white-space: nowrap;
  flex-shrink: 0;
  overflow: hidden;
  max-width: 200px;
}
.fybar-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fybar-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--blue);
  border: 1.5px solid rgba(48,103,240,0.5);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.55rem; font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px var(--blue-dim);
}
.fybar-fy-group {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}
.fybar-fy-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 0.35rem;
}
.fy-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.7rem;
  border-radius: var(--r-pill);
  font-size: 0.7rem;
  font-weight: 600;
  font-family: var(--data);
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface3);
  color: var(--text-dim);
  transition: all var(--trans);
  line-height: 1;
  white-space: nowrap;
}
.fy-chip:hover { background: var(--surface3); color: var(--text); }
.fy-chip.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 0 0 3px var(--blue-dim);
}
/* Mobile-only elements — hidden on desktop */
.fybar-fy-sel  { display: none; }
.fybar-divider { display: none; }
.fybar-dropdown { display: none; }

.fybar-spacer { flex: 1; }
.fybar-metrics {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}
.fybar-metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  padding: 0 1rem;
  border-left: 1px solid var(--border);
  min-width: 11rem;
}
.fybar-metric-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.fybar-metric-value {
  font-size: 0.82rem;
  font-weight: 700;
  font-family: var(--data);
  white-space: nowrap;
  text-align: right;
}
.fybar-metric-value.fybar-gain { color: var(--gain); text-shadow: 0 0 12px rgba(27,181,95,0.3); }
.fybar-metric-value.fybar-tax  { color: var(--yellow); text-shadow: 0 0 12px rgba(199,118,0,0.3); }
.fybar-metric-value.fybar-tds  { color: var(--text-dim); }

/* ── Downloads page ───────────────────────────────────────────── */
.dl-fy-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}
.dl-fy-lbl {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.dl-fy-sel {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--r-sm);
  padding: 0.4rem 0.75rem;
  font-size: 0.82rem;
  font-family: var(--sans);
  cursor: pointer;
  outline: none;
  min-width: 130px;
}
.dl-fy-sel:focus { border-color: var(--blue); }
.dl-grid {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.dl-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 1rem 1.25rem;
}
.dl-card-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dl-card-icon-pdf { background: rgba(59,130,246,0.12); color: var(--blue); }
.dl-card-icon-csv { background: rgba(34,197,94,0.1);  color: #22c55e; }
[data-theme="light"] .dl-card-icon-csv { background: rgba(22,163,74,0.1); color: #16a34a; }
.dl-card-body { flex: 1; min-width: 0; }
.dl-card-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.2rem;
}
.dl-card-sub {
  font-size: 0.73rem;
  color: var(--muted);
  line-height: 1.4;
}
.dl-card-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1rem;
  border-radius: var(--r-sm);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--sans);
  transition: background var(--trans), box-shadow var(--trans);
  white-space: nowrap;
  border: 1px solid var(--border);
  background: var(--surface3);
  color: var(--text);
}
.dl-card-btn:hover { background: var(--surface3); border-color: rgba(255,255,255,0.2); }
.dl-card-btn:active { transform: scale(0.98); }
.dl-card-btn-pdf {
  background: var(--blue);
  color: #fff;
  border-color: transparent;
}
.dl-card-btn-pdf:hover { background: var(--blue-hover); box-shadow: 0 2px 10px var(--blue-glow); }

/* FY download dropdown */
.dl-dropdown {
  position: fixed;
  z-index: 999;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  padding: 0.3rem;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.dl-dropdown-lbl {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  padding: 0.25rem 0.5rem 0.1rem;
}
.dl-dropdown-opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.4rem 0.65rem;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: var(--sans);
  color: var(--text);
  background: transparent;
  border: none;
  cursor: pointer;
}
.dl-dropdown-opt:hover { background: var(--surface3); }

/* ── Download section headers ──────────────────────────────────── */
.dl-section {
  margin-bottom: 2rem;
}
.dl-section-hdr {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.9rem;
}
.dl-section-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dl-section-icon-report  { background: rgba(99,102,241,0.12); color: #818cf8; }
.dl-section-icon-spot    { background: rgba(59,130,246,0.12); color: var(--blue); }
.dl-section-icon-futures { background: rgba(20,184,166,0.12); color: #14b8a6; }
[data-theme="light"] .dl-section-icon-futures { background: rgba(13,148,136,0.1); color: #0d9488; }
.dl-section-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  flex: 1;
}
.dl-section-tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  white-space: nowrap;
}
.dl-section-tag-empty   { background: var(--surface3); color: var(--muted); }
.dl-section-tag-spot    { background: rgba(59,130,246,0.15); color: var(--blue); }
.dl-section-tag-futures { background: rgba(20,184,166,0.15); color: #14b8a6; }
[data-theme="light"] .dl-section-tag-futures { background: rgba(13,148,136,0.1); color: #0d9488; }

/* Futures icon colour on dl-card */
.dl-card-icon-futures { background: rgba(20,184,166,0.12); color: #14b8a6; }
[data-theme="light"] .dl-card-icon-futures { background: rgba(13,148,136,0.1); color: #0d9488; }

/* Futures download button — teal accent */
.dl-card-btn-futures {
  background: rgba(20,184,166,0.15);
  color: #14b8a6;
  border-color: rgba(20,184,166,0.3);
}
.dl-card-btn-futures:hover {
  background: rgba(20,184,166,0.25);
  border-color: rgba(20,184,166,0.5);
}
[data-theme="light"] .dl-card-btn-futures { color: #0d9488; }

/* Inactive card — no activity for selected FY */
.dl-card-inactive {
  opacity: 0.45;
  pointer-events: none;
}
.dl-card-inactive .dl-card-btn {
  cursor: not-allowed;
}


/* Export buttons — stacked, coloured, prominent */
.sb-exports {
  display: none;
  padding: 0.55rem 0.55rem 0.6rem;
  border-top: 1px solid var(--border);
  flex-direction: column;
  gap: 0.45rem;
  flex-shrink: 0;
}
.sb-export-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: auto;
  padding: 0.6rem 0.85rem;
  border-radius: var(--r-sm);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--sans);
  transition: background var(--trans), box-shadow var(--trans), transform var(--trans);
  white-space: nowrap;
  border: none;
}
.sb-export-btn:active { transform: scale(0.98); }

/* PDF — blue primary */
.sb-export-btn-pdf {
  background: var(--blue);
  color: #fff;
}
.sb-export-btn-pdf:hover {
  background: var(--blue-hover);
  box-shadow: 0 2px 10px var(--blue-glow);
}

/* CSV — subtle secondary */
.sb-export-btn-csv {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
}
.sb-export-btn-csv:hover {
  background: var(--surface3);
  border-color: rgba(255,255,255,0.15);
}
[data-theme="light"] .sb-export-btn-csv:hover {
  border-color: rgba(0,0,0,0.15);
}

/* Spacer pushes footer to bottom */
.sb-spacer { flex: 1; min-height: 1rem; }

/* Sidebar footer */
.sb-footer {
  padding: 0.75rem 1.1rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex-shrink: 0;
}
.sb-privacy {
  font-size: 0.61rem;
  color: var(--muted);
  display: flex;
  align-items: flex-start;
  gap: 0.3rem;
  line-height: 1.45;
}

/* Pages */
#page-setup { display: block; }
#report     { display: none; }
.rpage      { display: none; }
.rpage.rpage-active { display: block; }

/* Page header */
.page-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.page-hdr-title {
  font-family: var(--headline);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.15;
  margin-bottom: 0.2rem;
}
.page-hdr-sub {
  font-size: 0.73rem;
  color: var(--text-dim);
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE BOTTOM TAB BAR  (≤ 860px)
   ═══════════════════════════════════════════════════════════════ */

/* Hidden on desktop; revealed inside the media query */
.mob-topbar,
.mob-tabbar,
.mob-sheet-overlay { display: none; }

@media (max-width: 860px) {
  /* Desktop sidebar hidden entirely */
  .sidebar { display: none !important; }

  /* Content fills full width; fixed top + bottom bars need clearance */
  .main-content { padding-top: 48px; }
  main          { padding: 1.5rem 1rem calc(60px + 1.5rem); }

  /* Sticky FY bar must sit below the fixed top bar */
  .fy-context-bar { top: 48px; }

  .mob-topbar { display: flex; }
  .mob-tabbar { display: flex; }
  .mob-sheet-overlay { display: block; }

  /* ── Suspense V2: card layout (desktop grid → 2-col cards) ── */

  /* Hide desktop column headers */
  .susp-v2-table-header { display: none !important; }

  /* Each row → 2-column card grid */
  .susp-v2-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.6rem 0.5rem;
    padding: 1rem;
    border-bottom: 1px solid var(--border);
  }

  /* Row 1: asset spans both columns */
  .susp-v2-row > *:nth-child(1) {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border);
  }

  /* Row 2 col 1: purchase price */
  .susp-v2-row > *:nth-child(2) { grid-column: 1; }

  /* Row 2 col 2: purchase date */
  .susp-v2-row > *:nth-child(3) { grid-column: 2; }

  /* Row 3 col 1: sell price (read-only) */
  .susp-v2-row > *:nth-child(4) { grid-column: 1; }

  /* Row 3 col 2: event/sale date (read-only) */
  .susp-v2-row > *:nth-child(5) { grid-column: 2; display: block !important; }

  /* Row 4: approve button spans both columns */
  .susp-v2-row > *:nth-child(6) {
    grid-column: 1 / -1;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
  }

  /* Approve button: full-width, finger-friendly */
  .susp-v2-btn-approve {
    width: 100%;
    min-height: 44px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Inputs: fill their cell */
  .susp-v2-price-wrap,
  .susp-v2-date-readonly { width: 100%; }
  .susp-v2-price-input   { font-size: 0.85rem; padding: 0.5rem 0.55rem; }
  .susp-date-seg         { font-size: 0.78rem; padding: 0.5rem 0.55rem; min-height: 42px; }
  .susp-v2-date-readonly { font-size: 0.78rem; padding: 0.5rem 0.55rem; min-height: 42px; }

  /* Bulk action bar: wrap buttons */
  .susp-v2-bulk-bar {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
  }
  .susp-v2-btn-bulk {
    flex: 1;
    min-width: 130px;
    justify-content: center;
    min-height: 40px;
  }

  /* Footer: stack full-width */
  .susp-v2-footer {
    flex-direction: column;
    align-items: stretch;
    padding: 1rem;
    gap: 0.65rem;
  }
  .susp-v2-footer button {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }

  /* Tighten header padding */
  .susp-v2-header { padding: 1rem 1rem 0.75rem; }
}
@media (max-width: 540px) {
  main { padding: 1rem 0.75rem calc(60px + 1rem); }
}

/* ── Mobile Top Bar ──────────────────────────────────────────── */
.mob-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 48px;
  z-index: 300;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  align-items: center;
  padding: 0 1rem;
  gap: 0.6rem;
  transition: background var(--trans), border-color var(--trans);
}
.mob-topbar-brand {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}
.mob-brand-icon {
  width: 22px; height: 22px;
  background: var(--blue);
  border-radius: 5px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.mob-brand-icon svg { width: 14px; height: 14px; fill: #fff; }
.mob-brand-name {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text);
  font-family: var(--sans);
  letter-spacing: -0.01em;
}
.mob-brand-name span { color: var(--blue); }
.mob-topbar-page {
  flex: 1;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mob-topbar-theme {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--text-dim);
  flex-shrink: 0;
}
.mob-topbar-theme svg { width: 15px; height: 15px; }
.mob-topbar-theme .icon-sun  { display: none; }
.mob-topbar-theme .icon-moon { display: block; }
[data-theme="light"] .mob-topbar-theme .icon-sun  { display: block; }
[data-theme="light"] .mob-topbar-theme .icon-moon { display: none; }

/* ── Mobile Bottom Tab Bar ───────────────────────────────────── */
.mob-tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(60px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 410;
  background: var(--surface);
  border-top: 1px solid var(--border);
  align-items: stretch;
  transition: background var(--trans), border-color var(--trans);
}
.mob-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0 4px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-family: var(--sans);
  position: relative;
  transition: color var(--trans);
  -webkit-tap-highlight-color: transparent;
}
.mob-tab svg  { width: 20px; height: 20px; flex-shrink: 0; }
.mob-tab span { font-size: 0.62rem; font-weight: 500; line-height: 1; white-space: nowrap; }
.mob-tab.mob-tab-active { color: var(--blue); }
.mob-tab.mob-tab-active::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 28px; height: 2.5px;
  background: var(--blue);
  border-radius: 0 0 3px 3px;
}
.mob-tab.mob-tab-locked {
  opacity: 0.32;
  pointer-events: none;
}

/* ── Mobile More Sheet ───────────────────────────────────────── */
.mob-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(0,0,0,0);
  transition: background 0.2s ease;
  pointer-events: none;
}
.mob-sheet-overlay.mob-sheet-open {
  background: rgba(0,0,0,0.5);
  pointer-events: all;
}
.mob-sheet {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-radius: 16px 16px 0 0;
  padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 60px + 0.75rem);
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.34, 1.06, 0.64, 1);
}
.mob-sheet-overlay.mob-sheet-open .mob-sheet {
  transform: translateY(0);
}
.mob-sheet-handle {
  width: 36px; height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 10px auto 6px;
}
.mob-sheet-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--trans), color var(--trans);
}
.mob-sheet-item:active { background: var(--surface2); }
.mob-sheet-item svg { width: 18px; height: 18px; color: var(--text-dim); flex-shrink: 0; }
.mob-sheet-item.mob-sheet-locked {
  opacity: 0.32;
  pointer-events: none;
}
.mob-sheet-item.mob-sheet-active { color: var(--blue); }
.mob-sheet-item.mob-sheet-active svg { color: var(--blue); }

/* ═══════════════════════════════════════════════════════════════
   MEDIUM SCREEN FIXES  (≤ 1150px) — tighten suspense table
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 861px) and (max-width: 1150px) {
  .susp-v2-table-header,
  .susp-v2-row {
    grid-template-columns: minmax(120px, 1fr) minmax(140px, 220px) auto minmax(110px, 160px) auto;
  }
  /* Hide Event Date column — read-only, sacrificed for space */
  .susp-v2-th:nth-child(5),
  .susp-v2-row > *:nth-child(5) { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE FIXES  (≤ 600px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* ── 2. Upload zone: reduce excessive padding ───────────────── */
  .upload-zone {
    padding: 1.5rem 1rem;
  }
  .upload-zone-icon {
    width: 44px;
    height: 44px;
  }
  .upload-zone-title {
    font-size: 0.95rem;
  }

  /* ── 3. Download cards: stack vertically ────────────────────── */
  .dl-card {
    flex-wrap: wrap;
    gap: 0.65rem;
  }
  .dl-card-body {
    /* Take up remaining space on same row as icon */
    flex: 1;
    min-width: 0;
  }
  .dl-card-btn {
    /* Full-width button on its own row */
    width: 100%;
    justify-content: center;
    min-height: 44px;
    font-size: 0.82rem;
  }

  /* ── 4. FY context bar: dropdown pill layout ────────────────── */
  .fy-context-bar {
    overflow: visible;
    height: 42px;
    min-height: 42px;
    padding: 0 1rem;
    gap: 0;
    flex-wrap: nowrap;
  }
  .fybar-name     { display: none; }
  .fybar-fy-group { display: none; }
  .fybar-spacer   { display: none; }
  .fybar-fy-sel {
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--blue-dim);
    border: 1px solid rgba(48,103,240,.4);
    border-radius: 8px;
    padding: 0 10px;
    height: 30px;
    cursor: pointer;
    flex-shrink: 0;
    font-family: var(--sans);
  }
  .fybar-fy-sel-label {
    font-size: 9px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: rgba(99,102,241,.85);
  }
  .fybar-fy-sel-val { font-size: 11px; font-weight: 700; color: #7dd3fc; }
  .fybar-fy-caret   { font-size: 8px; color: var(--blue); transition: transform .15s; }
  .fybar-fy-sel[aria-expanded="true"] .fybar-fy-caret { transform: rotate(180deg); }
  .fybar-divider {
    display: block;
    width: 1px;
    background: var(--border);
    align-self: stretch;
    margin: 8px 10px;
    flex-shrink: 0;
  }
  .fybar-metrics {
    flex: 1;
    gap: 0;
  }
  .fybar-metric {
    flex: 1;
    min-width: 0;
    padding: 0 0.4rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-left: 1px solid var(--border);
    min-height: 0;
  }
  .fybar-metrics .fybar-metric:first-child { border-left: none; }
  .fybar-metric-label { font-size: 8px; }
  .fybar-metric-value { font-size: 0.75rem; }
  /* Dropdown panel */
  .fybar-dropdown {
    position: fixed;
    top: 90px; /* 48px mob-topbar + 42px context bar */
    left: 0; right: 0;
    z-index: 150;
    background: var(--surface2);
    border-bottom: 1px solid rgba(48,103,240,.2);
    padding: 10px 1rem 14px;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
  }
  .fybar-dropdown.open { display: flex; }
  .fybar-dropdown-label {
    font-size: 9px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted);
  }
  .fybar-dropdown-chips { display: flex; gap: 8px; flex-wrap: wrap; }

  /* ── 5 & 6. Table scroll-hint + cell padding: now co-located with
     the TABLES desktop section above (search for "Mobile (≤600px): Table overrides").
     Touch targets below are kept here as they span multiple components. */

  /* ── 7. Touch targets: min 44px height on interactive elements ─ */
  .pg-btn        { height: 40px; min-width: 40px; }
  .theme-toggle  { min-height: 40px; min-width: 40px; }
  .fy-chip       { padding: 0.35rem 0.7rem; min-height: 36px; }
  .dl-fy-sel     { min-height: 40px; padding: 0.5rem 0.75rem; }

  /* ── 8. Info & disclaimer text: bump up from unreadable sizes ── */
  .info-box       { font-size: 0.75rem; padding: 0.75rem 0.9rem; }
  .disclaimer-box { font-size: 0.73rem; padding: 0.85rem 1rem; }

  /* ── 9. Report title: prevent orphan words ──────────────────── */
  .report-title { font-size: 1.5rem; line-height: 1.25; }

  /* ── 10. Downloads FY row: stack on very small screens ─────── */
  .dl-fy-row {
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
  }
  .dl-fy-sel { flex: 1; min-width: 140px; }

}

/* ══════════════════════════════════════════════════════════════
   TEMPLATE PREVIEW MODAL
   ══════════════════════════════════════════════════════════════ */
.tpl-modal-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.tpl-modal-card {
  background: var(--surface);
  border-radius: var(--r-card);
  border: 1px solid var(--border);
  width: 100%; max-width: 500px;
  max-height: 90vh; overflow-y: auto;
  padding: 1.5rem;
  box-shadow: 0 24px 64px rgba(0,0,0,.45);
}
.tpl-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}
.tpl-modal-header-main { flex: 1; min-width: 0; }
.tpl-modal-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.tpl-new-exchange-badge {
  font-size: .6rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase;
  padding: .2rem .55rem;
  border-radius: var(--r-pill);
  background: var(--yellow-dim);
  color: var(--yellow);
  border: 1px solid rgba(199,118,0,.25);
}
.tpl-filename-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  color: var(--text-dim);
  background: var(--surface2);
  border: 1px solid var(--border);
  padding: .18rem .55rem;
  border-radius: var(--r-pill);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tpl-modal-title { margin: 0 0 5px; font-size: 1.1rem; font-weight: 700; color: var(--text); line-height: 1.25; }
.tpl-modal-subtitle { font-size: .8rem; color: var(--text-dim); line-height: 1.5; margin: 0; }
.tpl-modal-subtitle strong { color: var(--text); font-weight: 600; }
.tpl-scan-callout {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  background: var(--blue-dim);
  border: 1px solid rgba(48,103,240,.15);
  border-radius: 8px;
  padding: 9px 12px;
  margin: 12px 0 10px;
  font-size: .78rem;
  color: var(--text-dim);
  line-height: 1.45;
}
.tpl-scan-callout strong { color: var(--text); font-weight: 600; }
.tpl-sheet-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 12px;
  margin: 0 0 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: .78rem;
}
.tpl-sheet-picker-label { display: flex; align-items: center; gap: 6px; color: var(--text); font-weight: 500; }
.tpl-sheet-select {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: .78rem;
}
.tpl-sheet-picker-hint { color: var(--muted); font-size: .72rem; transition: color .15s ease; }
.tpl-sheet-picker-loading { color: var(--text); display: inline-flex; align-items: center; gap: 6px; }
.tpl-sheet-picker-error { color: var(--loss); }
.tpl-spinner-dot {
  width: 10px; height: 10px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: tpl-spin .7s linear infinite;
  vertical-align: -1px;
}
@keyframes tpl-spin { to { transform: rotate(360deg); } }
.tpl-preview-loading {
  position: relative;
  opacity: .55;
  transition: opacity .15s ease;
  pointer-events: none;
}
.tpl-skeleton-row td { padding: .55rem .6rem; }
.tpl-skeleton-bar {
  display: block;
  height: 10px;
  width: 80%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--surface2) 0%, var(--border) 40%, var(--surface2) 80%);
  background-size: 200% 100%;
  animation: tpl-shimmer 1.2s linear infinite;
}
@keyframes tpl-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.tpl-change-sheet-btn {
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: .68rem;
  color: var(--muted);
  cursor: pointer;
}
.tpl-change-sheet-btn:hover { color: var(--text); border-color: var(--text-dim); }
.tpl-table-wrap { overflow-x: auto; margin-bottom: 0; border-radius: 8px; border: 1px solid var(--border); }
.tpl-preview-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.tpl-preview-table th {
  padding: .4rem .6rem; text-align: left;
  color: var(--muted); font-weight: 500; font-size: .7rem; letter-spacing: .04em; text-transform: uppercase;
  background: var(--surface2); border-bottom: 1px solid var(--border);
}
.tpl-preview-table td { padding: .38rem .6rem; border-bottom: 1px solid var(--border); color: var(--text); }
.tpl-preview-table tr:last-child td { border-bottom: none; }
.tpl-type { font-weight: 600; }
.tpl-type-buy  { color: var(--gain); }
.tpl-type-sell { color: var(--loss); }
.tpl-num { font-family: var(--mono, monospace); font-size: .75rem; }
.tpl-empty-row { text-align: center; color: var(--muted); padding: 1rem !important; }
.tpl-note { font-size: .73rem; color: var(--muted); margin: 0 0 1rem; }
.tpl-modal-note-new {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .73rem;
  color: var(--text-dim);
  padding: .75rem 0 .6rem;
}
.tpl-note-check {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--gain-dim);
  color: var(--gain);
  font-size: .6rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tpl-modal-actions { display: flex; flex-direction: column; gap: .5rem; }
.tpl-btn {
  width: 100%; padding: .65rem 1rem;
  border: none; border-radius: 8px; cursor: pointer;
  font-size: .875rem; font-weight: 500; transition: opacity .15s;
}
.tpl-btn:hover { opacity: .88; }
.tpl-btn-primary  { background: var(--blue); color: #fff; }
.tpl-btn-secondary { background: var(--surface2); color: var(--text); border: 1px solid var(--border); }
.tpl-modal-close-btn {
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 1rem; line-height: 1; padding: .25rem .4rem; border-radius: 4px;
}
.tpl-modal-close-btn:hover { color: var(--text); background: var(--surface2); }

/* ══════════════════════════════════════════════════════════════
   TEMPLATE MAPPING EDITOR
   ══════════════════════════════════════════════════════════════ */
.tpl-mapping-card {
  background: var(--surface);
  border-radius: var(--r-card);
  width: 100%;
  max-width: 780px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,.45);
  overflow: hidden;
}
.tpl-mapping-header {
  display: flex;
  flex-direction: column;
  padding: .875rem 1.25rem 0;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.tpl-mapping-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem;
}
.tpl-step-badge {
  font-size: .75rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: .2rem .65rem;
  white-space: nowrap;
}
.tpl-mapping-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
.tpl-mapping-form {
  padding: 1.25rem;
  overflow-y: auto;
  border-right: 1px solid var(--border);
}
.tpl-mapping-right {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* ── Tab bar ── */
.tpl-tab-bar {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface2);
}
.tpl-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s;
  white-space: nowrap;
}
.tpl-tab:hover { color: var(--text); }
.tpl-tab.active { color: var(--text); border-bottom-color: var(--blue); }
.tpl-tab.active-amber { color: var(--amber); border-bottom-color: var(--amber); }
.tpl-tab-badge {
  font-size: .625rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 10px;
  background: rgba(245,158,11,.15);
  color: var(--amber);
  border: 1px solid rgba(245,158,11,.3);
}

/* ── Tab panels ── */
.tpl-tab-panels {
  flex: 1;
  overflow: hidden;
  min-height: 0;
  position: relative;
}
.tpl-tab-panel {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 1.25rem;
  display: none;
  flex-direction: column;
  gap: .5rem;
}
.tpl-tab-panel.visible { display: flex; }

/* ── Changes tab diff table ── */
.tpl-diff-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .72rem;
}
.tpl-diff-table th {
  padding: 5px 8px;
  text-align: left;
  font-size: .65rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}
.tpl-diff-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.tpl-diff-table tr:last-child td { border-bottom: none; }
.tpl-diff-table tr { background: rgba(245,158,11,.04); }
.tpl-diff-table tr:hover { background: rgba(245,158,11,.08); }
.tpl-diff-field { font-size: .65rem; color: var(--muted); }
.tpl-diff-from  { font-family: var(--mono,monospace); color: #f87171; text-decoration: line-through; }
.tpl-diff-to    { font-family: var(--mono,monospace); color: #4ade80; font-weight: 600; }
.tpl-diff-step  {
  font-size: .65rem;
  color: var(--muted);
  background: var(--surface3);
  border-radius: 3px;
  padding: 1px 5px;
  white-space: nowrap;
}
.tpl-preview-label {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  margin: 0;
}
.tpl-mapping-nav {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .875rem 1.25rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.tpl-mapping-nav .tpl-btn { width: auto; min-width: 8rem; }
.tpl-mapping-header-right { display: flex; align-items: center; gap: .5rem; }

/* Step form fields */
.tpl-step-title {
  font-size: .9rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 1.1rem;
}
.tpl-form-row { margin-bottom: .9rem; }
.tpl-form-row > label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: .3rem;
}
.tpl-form-row select,
.tpl-form-row input[type="text"] {
  width: 100%;
  padding: .42rem .6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: .82rem;
  box-sizing: border-box;
}
.tpl-form-row select:focus,
.tpl-form-row input[type="text"]:focus {
  outline: 2px solid var(--blue);
  outline-offset: -1px;
}
.tpl-hint {
  font-size: .71rem;
  color: var(--muted);
  margin-top: .25rem;
}
.tpl-radio-group { display: flex; flex-direction: column; gap: .45rem; }
.tpl-radio-group label {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 400 !important;
  cursor: pointer;
  font-size: .82rem;
}
.tpl-check-label {
  display: flex !important;
  align-items: center;
  gap: .5rem;
  font-weight: 400 !important;
  cursor: pointer;
}
.tpl-check-label input { margin: 0; }
.tpl-subfields { margin-top: .75rem; }

/* ─── Step header: icon + question title + why ─── */
.tpl-step-header {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: 1rem;
}
.tpl-step-icon {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--blue-dim);
  border: 1px solid rgba(48,103,240,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
}
.tpl-step-icon-green  { background: rgba(27,181,95,.1);  border-color: rgba(27,181,95,.2); }
.tpl-step-icon-yellow { background: rgba(199,118,0,.12); border-color: rgba(199,118,0,.2); }
.tpl-step-icon-purple { background: rgba(109,55,255,.12); border-color: rgba(109,55,255,.2); }
.tpl-step-title-new {
  font-size: .9rem; font-weight: 700; color: var(--text);
  margin: 0 0 .15rem; line-height: 1.25;
}
.tpl-step-why {
  font-size: .72rem; color: var(--text-dim); line-height: 1.4; margin: 0;
}
.tpl-step-why strong { color: var(--yellow); font-weight: 600; }

/* ─── Step tip boxes ─── */
.tpl-step-tip {
  display: flex; align-items: flex-start; gap: .5rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px; padding: .6rem .75rem;
  margin-bottom: .875rem;
  font-size: .72rem; color: var(--text-dim); line-height: 1.45;
}
.tpl-step-tip-blue   { background: var(--blue-dim);         border-color: rgba(48,103,240,.15); }
.tpl-step-tip-yellow { background: rgba(199,118,0,.1);      border-color: rgba(199,118,0,.2); }
.tpl-step-tip-green  { background: rgba(27,181,95,.08);     border-color: rgba(27,181,95,.2); }
.tpl-step-tip-icon   { font-size: 13px; flex-shrink: 0; margin-top: 1px; }
.tpl-step-tip strong { color: var(--text); font-weight: 600; }

/* ─── Hint colour variant ─── */
.tpl-hint-warn { color: #e8a84a; }

/* ─── Label note (inline de-emphasised text beside label) ─── */
.tpl-label-note {
  font-weight: 400; text-transform: none; letter-spacing: 0;
  color: var(--muted); font-size: .72rem;
}

/* ─── Radio cards (step 3) ─── */
.tpl-radio-cards { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .875rem; }
.tpl-radio-card {
  display: flex; align-items: flex-start; gap: .6rem;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; padding: .65rem .75rem; cursor: pointer;
}
.tpl-radio-card-selected { border-color: rgba(48,103,240,.4); background: var(--blue-dim); }
.tpl-radio-card input { margin-top: 2px; flex-shrink: 0; }
.tpl-radio-card-title { font-size: .8rem; font-weight: 600; color: var(--text); }
.tpl-radio-card-desc  { font-size: .7rem; color: var(--text-dim); margin-top: 1px; }

/* ─── Required / Optional group labels (step 5) ─── */
.tpl-field-group-label {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-dim); margin-bottom: .5rem;
}
.tpl-field-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: .625rem;
  margin-bottom: .875rem;
}
@media (max-width: 480px) { .tpl-field-grid { grid-template-columns: 1fr; } }

/* ─── Step progress track in mapping header ─── */
.tpl-step-track {
  display: flex; align-items: flex-start; overflow-x: auto;
  padding-bottom: 2px;
}
.tpl-step-pip {
  display: flex; flex-direction: column; align-items: center;
  flex: 1; min-width: 0; position: relative;
}
.tpl-step-pip-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--surface3); border: 1px solid var(--border);
  margin-bottom: 4px; z-index: 1; flex-shrink: 0;
}
.tpl-step-pip.tpl-pip-done   .tpl-step-pip-dot { background: var(--gain); border-color: var(--gain); }
.tpl-step-pip.tpl-pip-active .tpl-step-pip-dot { background: var(--blue); border-color: var(--blue); width: 10px; height: 10px; }
.tpl-step-pip-label {
  font-size: 9px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); white-space: nowrap;
  padding-bottom: 8px;
}
.tpl-step-pip.tpl-pip-done   .tpl-step-pip-label { color: var(--gain); }
.tpl-step-pip.tpl-pip-active .tpl-step-pip-label { color: var(--blue); }
.tpl-step-pip-line {
  position: absolute; top: 4px; left: 50%; right: -50%;
  height: 1px; background: var(--border); z-index: 0;
}
.tpl-step-pip:last-child .tpl-step-pip-line { display: none; }
.tpl-step-pip.tpl-pip-done .tpl-step-pip-line { background: var(--gain); }

@media (max-width: 600px) {
  .tpl-mapping-card { max-height: 95vh; }
  .tpl-mapping-body { grid-template-columns: 1fr; }
  .tpl-mapping-form { border-right: none; border-bottom: 1px solid var(--border); max-height: 45vh; }
  .tpl-mapping-right { max-height: 30vh; }
}

/* ══════════════════════════════════════════════════════════════
   ADMIN PANEL
   ══════════════════════════════════════════════════════════════ */
.adm-hdr-actions { display: flex; gap: .5rem; align-items: center; }
.adm-refresh-btn {
  padding: .4rem .85rem; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface2); color: var(--text); cursor: pointer; font-size: .82rem;
}
.adm-refresh-btn:hover { opacity: .8; }
.adm-reset-btn {
  padding: .4rem .85rem; border: 1px solid #c0392b; border-radius: 6px;
  background: transparent; color: #c0392b; cursor: pointer; font-size: .82rem;
}
.adm-reset-btn:hover { background: #c0392b; color: #fff; }
.adm-sections { display: flex; flex-direction: column; gap: 2rem; padding: 1.5rem; }
.adm-info {
  background: rgba(99,102,241,.07);
  border: 1px solid rgba(99,102,241,.2);
  border-radius: var(--r-card);
  padding: .85rem 1.1rem;
  display: flex; flex-direction: column; gap: .45rem;
  margin-bottom: .5rem;
}
.adm-info-title {
  font-size: .72rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: rgba(99,102,241,.9);
}
.adm-info-body {
  font-size: .82rem; color: var(--text); line-height: 1.55;
}
.adm-info-body ul {
  margin: .3rem 0 0 1.1rem; padding: 0; display: flex; flex-direction: column; gap: .2rem;
}
.adm-info-body li { list-style: disc; }
.adm-section-title {
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); margin: 0 0 .75rem;
}
.adm-card-list { display: flex; flex-direction: column; gap: .75rem; }
.adm-empty { color: var(--muted); font-size: .85rem; padding: .25rem 0; }
.adm-error { color: var(--loss); }
.adm-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: 1rem 1.25rem;
  display: flex; flex-direction: column; gap: .65rem;
}
.adm-card-header {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
}
.adm-card-left { display: flex; flex-direction: column; gap: .2rem; }
.adm-name-wrap { display: inline-flex; align-items: center; gap: 5px; }
.adm-exchange-name {
  font-weight: 700; font-size: .95rem; color: var(--text);
  cursor: pointer; border-radius: 4px; padding: 1px 3px; margin: -1px -3px;
  transition: background .12s;
}
.adm-exchange-name:hover { background: var(--surface3); }
.adm-name-unset { color: var(--muted); font-style: italic; font-weight: 500; }
.adm-name-edit-icon {
  font-size: .7rem; color: var(--muted); cursor: pointer;
  opacity: 0; transition: opacity .15s;
}
.adm-name-wrap:hover .adm-name-edit-icon { opacity: 1; }
.adm-name-input {
  background: var(--surface3); border: 1px solid var(--blue);
  border-radius: 5px; color: var(--text); padding: 2px 7px;
  font-size: .9rem; font-weight: 700; font-family: inherit;
  min-width: 160px; outline: none;
}
.adm-name-edit-wrap { display: flex; flex-direction: column; gap: 2px; }
.adm-name-input:disabled { opacity: .5; }
.adm-name-helper { font-size: .68rem; color: var(--muted); }
/* Exchange hint row */
.adm-hint-wrap { display: inline-flex; align-items: center; gap: 5px; }
.adm-hint-label { font-size: .72rem; color: var(--muted); }
.adm-exchange-hint {
  font-size: .78rem; color: var(--text); font-family: monospace;
  cursor: pointer; border-radius: 4px; padding: 1px 3px; margin: -1px -3px;
  transition: background .12s;
}
.adm-exchange-hint:hover { background: var(--surface3); }
.adm-hint-unset { color: var(--yellow, #e6a817); font-style: italic; font-family: inherit; font-size: .75rem; }
.adm-hint-edit-icon {
  font-size: .7rem; color: var(--muted); cursor: pointer;
  opacity: 0; transition: opacity .15s;
}
.adm-hint-wrap:hover .adm-hint-edit-icon { opacity: 1; }
.adm-hint-edit-wrap { display: flex; flex-direction: column; gap: 2px; }
.adm-hint-input {
  background: var(--surface3); border: 1px solid var(--blue);
  border-radius: 5px; color: var(--text); padding: 2px 7px;
  font-size: .82rem; font-family: monospace; font-weight: 500;
  min-width: 160px; outline: none;
}
.adm-hint-input:disabled { opacity: .5; }
.adm-hint-helper { font-size: .68rem; color: var(--muted); }
.adm-fp { font-size: .7rem; color: var(--muted); background: none; }
.adm-card-right { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.adm-card-meta { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.adm-diverge-badge {
  display: inline-block; font-size: .7rem; font-weight: 600; color: #f59e0b;
  background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.3);
  border-radius: 4px; padding: .1rem .35rem; margin-top: .1rem;
}
/* ── Inline divergence strip (pending cards only) ── */
.adm-div-strip {
  margin: .5rem 0; padding: .55rem .8rem;
  background: rgba(245,158,11,.06); border-left: 3px solid rgba(245,158,11,.45);
  border-radius: 0 6px 6px 0; display: flex; flex-direction: column; gap: .3rem;
}
.adm-div-strip-hdr { font-size: .72rem; font-weight: 600; color: var(--amber); }
/* Individual diff row */
.adm-div-row {
  display: flex; align-items: baseline; gap: .45rem;
  font-size: .75rem; flex-wrap: wrap;
}
.adm-div-field { color: var(--muted); min-width: 90px; flex-shrink: 0; }
.adm-div-from  { color: var(--muted); text-decoration: line-through; }
.adm-div-arrow { color: var(--muted); }
.adm-div-to    { color: var(--amber); font-weight: 600; }
.adm-div-more  { font-size: .72rem; color: var(--muted); font-style: italic; }
/* Grouped direction mapping block */
.adm-div-group { display: flex; flex-direction: column; gap: .2rem; }
.adm-div-group-hdr {
  font-size: .72rem; font-weight: 600; color: var(--text);
  display: flex; align-items: center; gap: .4rem;
}
.adm-div-col-note {
  font-weight: 400; color: var(--muted); font-style: italic; font-size: .7rem;
}
.adm-div-subrow {
  display: flex; align-items: baseline; gap: .45rem;
  font-size: .75rem; flex-wrap: wrap; padding-left: .8rem;
}
.adm-div-sublabel { color: var(--muted); min-width: 72px; flex-shrink: 0; }
.adm-headers { display: flex; flex-wrap: wrap; gap: .3rem; }
.adm-header-chip {
  font-size: .7rem; font-family: var(--mono, monospace);
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 4px; padding: .1rem .4rem; color: var(--muted);
}
/* ─── Raw CSV collapsible panel inside mapping editor ─── */
.tpl-raw-panel {
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
  flex-shrink: 0;
}
.tpl-raw-toggle {
  width: 100%; display: flex; align-items: center; gap: .5rem;
  padding: .5rem 1.25rem; background: none; border: none; cursor: pointer;
  font-size: .8rem; color: var(--muted); text-align: left;
}
.tpl-raw-toggle:hover { background: var(--surface3, var(--surface2)); }
.tpl-raw-toggle-label { font-weight: 600; color: var(--text); }
.tpl-raw-rows-count { font-size: .72rem; color: var(--muted); margin-left: auto; }
.tpl-raw-chevron { width: 14px; height: 14px; transition: transform .2s; flex-shrink: 0; }
.tpl-raw-panel.tpl-raw-open .tpl-raw-chevron { transform: rotate(90deg); }
.tpl-raw-collapsible { display: none; padding: 0 1.25rem .75rem; }
.tpl-raw-panel.tpl-raw-open .tpl-raw-collapsible { display: block; }

/* ─── Step 2 sample parse debug ─── */
.tpl-parse-sample {
  margin-top: .75rem; padding: .65rem .85rem;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 6px; display: flex; flex-direction: column; gap: .35rem;
  font-size: .78rem;
}
.tpl-parse-sample:empty { display: none; }
.tpl-parse-row { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.tpl-parse-label { color: var(--muted); min-width: 7rem; flex-shrink: 0; }
.tpl-parse-raw { font-family: var(--mono, monospace); color: var(--text); }
.tpl-parse-ok   { color: var(--gain); font-weight: 500; }
.tpl-parse-fail { color: var(--loss); font-weight: 500; }

.adm-raw-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.adm-raw-table {
  width: 100%; border-collapse: collapse;
  font-size: .72rem; font-family: var(--mono, monospace);
  white-space: nowrap;
}
.adm-raw-table th {
  background: var(--surface2); color: var(--muted);
  font-weight: 600; text-align: left;
  padding: .35rem .6rem; border-bottom: 1px solid var(--border);
}
.adm-raw-table td {
  padding: .3rem .6rem; color: var(--text);
  border-bottom: 1px solid var(--border);
}
.adm-raw-table tbody tr:last-child td { border-bottom: none; }
.adm-raw-table tbody tr:hover td { background: var(--surface2); }

.adm-variants {
  display: flex; flex-direction: column; gap: .45rem;
  border-top: 1px solid var(--border); padding-top: .6rem;
}
.adm-variant { background: var(--bg); border-radius: 6px; padding: .6rem .75rem; }
.adm-variant-hdr {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .25rem; flex-wrap: wrap;
}
.adm-status-badge {
  font-size: .65rem; font-weight: 700; letter-spacing: .04em;
  border-radius: 4px; padding: .12rem .4rem; white-space: nowrap;
}
.adm-status-auto       { background: rgba(99,102,241,.15); color: #818cf8; }
.adm-status-user       { background: rgba(34,197,94,.15);  color: #4ade80; }
.adm-status-admin      { background: rgba(59,130,246,.2);  color: #60a5fa; }
.adm-status-deprecated { background: var(--surface2); color: var(--muted); }
.adm-variant-stats { font-size: .74rem; color: var(--muted); flex: 1; }
.adm-approve-btn {
  padding: .28rem .7rem; border: none; border-radius: 6px; cursor: pointer;
  font-size: .75rem; font-weight: 600; background: var(--blue); color: #fff;
}
.adm-approve-btn:hover { opacity: .85; }
.adm-edit-btn {
  padding: .28rem .7rem; border: 1px solid var(--border); border-radius: 6px;
  cursor: pointer; font-size: .75rem; font-weight: 600;
  background: var(--surface2); color: var(--text);
}
.adm-edit-btn:hover { background: var(--surface3); }
.adm-delete-template-btn {
  padding: .22rem .5rem; border: 1px solid transparent; border-radius: 6px;
  background: none; color: var(--muted); cursor: pointer; font-size: .8rem;
  opacity: 0; transition: opacity .15s, border-color .15s, color .15s;
}
.adm-card:hover .adm-delete-template-btn { opacity: 1; }
.adm-delete-template-btn:hover { border-color: #c0392b; color: #c0392b; }
.adm-delete-template-btn:disabled { opacity: .4; cursor: not-allowed; }
.adm-delete-variant-btn {
  margin-left: auto; padding: .15rem .38rem; border: 1px solid transparent;
  border-radius: 4px; background: none; color: var(--muted); cursor: pointer;
  font-size: .72rem; opacity: 0; transition: opacity .12s, border-color .12s, color .12s;
}
.adm-variant:hover .adm-delete-variant-btn { opacity: 1; }
.adm-delete-variant-btn:hover { border-color: #c0392b; color: #c0392b; }
.adm-delete-variant-btn:disabled { opacity: .4; cursor: not-allowed; }
/* ── History toggle + panel ── */
.adm-history-toggle {
  width: 100%; margin-top: .5rem; padding: .35rem .5rem;
  background: none; border: none; border-top: 1px solid var(--border);
  color: var(--muted); font-size: .73rem; cursor: pointer; text-align: left;
}
.adm-history-toggle:hover { color: var(--text); }
.adm-history-panel { opacity: .65; }
.adm-history-panel .adm-variant { border-color: transparent; }
.adm-spec-line {
  font-size: .7rem; font-family: var(--mono, monospace); color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.adm-muted { color: var(--muted); }
.sb-admin-sep {
  height: 1px; background: var(--border); margin: .5rem .75rem;
}

.sb-section-hdr {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.5rem 0.75rem 0.25rem;
}

/* ─── Divergence banner inside mapping editor ─── */
.tpl-div-banner {
  background: rgba(245,158,11,.07);
  border-bottom: 1px solid rgba(245,158,11,.2);
  padding: .65rem 1.25rem;
  display: flex; align-items: flex-start; gap: .75rem;
  flex-shrink: 0;
}
.tpl-div-banner-icon { font-size: .875rem; flex-shrink: 0; margin-top: .15rem; }
.tpl-div-banner-body { flex: 1; min-width: 0; }
.tpl-div-banner-title {
  font-size: .72rem; font-weight: 700; color: #f59e0b; margin-bottom: .35rem;
}
.tpl-div-banner-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .3rem; }
.tpl-div-chip {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .68rem; font-family: var(--mono, monospace);
  background: var(--surface2); border: 1px solid rgba(245,158,11,.2);
  border-radius: 4px; padding: .1rem .45rem; color: var(--text-dim);
  white-space: nowrap;
}
.tpl-div-chip-field { color: var(--muted); font-size: .62rem; margin-right: .15rem; }
.tpl-div-chip-from  { color: #f87171; text-decoration: line-through; }
.tpl-div-chip-arrow { color: var(--muted); }
.tpl-div-chip-to    { color: #4ade80; font-weight: 600; }
.tpl-div-banner-meta { font-size: .68rem; color: var(--muted); }
.tpl-div-device {
  font-family: var(--mono, monospace); background: var(--surface3);
  border-radius: 3px; padding: .05rem .35rem;
  color: var(--text-dim); font-size: .62rem;
}
.tpl-div-banner-actions { flex-shrink: 0; }
.tpl-div-load-btn {
  padding: .25rem .65rem; border-radius: 5px; cursor: pointer;
  font-size: .7rem; font-weight: 600;
  background: rgba(27,181,95,.12); border: 1px solid rgba(27,181,95,.3);
  color: #4ade80; white-space: nowrap;
}
.tpl-div-load-btn:hover { background: rgba(27,181,95,.22); }

/* ─── Changed-field pill beside a form control ─── */
.tpl-field-changed-wrap { display: flex; align-items: center; gap: .45rem; }
.tpl-field-changed-wrap > select,
.tpl-field-changed-wrap > input[type="text"] { flex: 1; min-width: 0; }
.tpl-changed-pill {
  display: inline-flex; align-items: center; gap: .2rem;
  font-size: .65rem; font-family: var(--mono, monospace);
  background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.25);
  border-radius: 4px; padding: .1rem .4rem; color: #f59e0b;
  white-space: nowrap; flex-shrink: 0;
}
.tpl-changed-pill-old { color: #f87171; text-decoration: line-through; }

/* ═══════════════════════════════════════════════════════════════
   OVERVIEW — Source Cards & Combined Tax Summary
   ═══════════════════════════════════════════════════════════════ */

/* FY notice banner */
.ov-fy-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(48, 103, 240, 0.07);
  border: 1px solid rgba(48, 103, 240, 0.2);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.8rem;
  color: #93c5fd;
  margin-bottom: 16px;
  line-height: 1.4;
}
.ov-fy-notice strong { color: #bfdbfe; }

/* Source cards grid */
.ov-source-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
@media (max-width: 700px) {
  .ov-source-grid { grid-template-columns: 1fr; }
}

.ov-source-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Card header */
.ov-card-hdr {
  padding: 13px 16px 11px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ov-card-hdr-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ov-card-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.ov-icon-spot    { background: rgba(48, 103, 240, 0.12); }
.ov-icon-futures { background: rgba(20, 184, 166, 0.12); }

.ov-card-title { font-size: 0.87rem; font-weight: 700; color: var(--text); }
.ov-card-sub   { font-size: 0.71rem; color: var(--muted); margin-top: 1px; }

/* Card tags */
.ov-card-tag {
  font-size: 0.63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
.ov-tag-empty   { background: var(--surface2); color: var(--muted); }
.ov-tag-spot    { background: rgba(48, 103, 240, 0.13); color: #60a5fa; }
.ov-tag-futures { background: rgba(20, 184, 166, 0.13); color: #2dd4bf; }

/* Card body */
.ov-card-body { padding: 14px 16px; flex: 1; }

/* Spot card rows */
.ov-card-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 7px;
  font-size: 0.81rem;
}
.ov-card-row-label { color: var(--text-dim); }
.ov-card-row-val   { font-size: 0.79rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.ov-card-row-loss .ov-card-row-label { color: var(--amber); font-size: 0.74rem; }
.ov-card-row-loss .ov-card-row-val   { color: var(--amber); }

.ov-card-divider { border: none; border-top: 1px solid var(--border); margin: 9px 0; }

.ov-card-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.ov-card-total-label { font-size: 0.8rem; font-weight: 600; color: var(--text-dim); }
.ov-card-total-val   { font-size: 1.08rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Empty state */
.ov-empty {
  text-align: center;
  padding: 24px 12px;
  color: var(--muted);
  font-size: 0.79rem;
  line-height: 1.6;
}
.ov-empty-icon { font-size: 1.3rem; margin-bottom: 6px; }
.ov-empty strong { color: var(--text-dim); }

/* Card footer */
.ov-card-footer {
  padding: 9px 16px 11px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ov-card-tax { font-size: 0.74rem; color: var(--muted); }
.ov-card-tax strong { color: var(--text-dim); }
.ov-card-link {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--blue);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}
.ov-card-link:hover { color: var(--blue-hover); }

/* Futures mini treatment toggle */
.ov-mini-treatment {
  display: flex;
  gap: 3px;
  background: var(--bg);
  border-radius: 8px;
  padding: 3px;
  border: 1px solid var(--border);
  margin-bottom: 12px;
}
.ov-mt-btn {
  flex: 1;
  padding: 5px 8px;
  border-radius: 5px;
  font-size: 0.71rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  color: var(--muted);
  transition: background 0.15s, color 0.15s;
  user-select: none;
}
.ov-mt-active { background: var(--surface2); color: var(--text); }

/* Futures mini stats grid */
.ov-mini-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; }
.ov-mini-cell { background: var(--bg); border-radius: 8px; padding: 9px 10px; }
.ov-mini-label { font-size: 0.67rem; color: var(--muted); margin-bottom: 4px; font-weight: 500; }
.ov-mini-val   { font-size: 0.92rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.muted-text    { color: var(--muted); }

/* Per-source contribution rows (inside combined tax block) */
.ov-contrib-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 1.2rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.81rem;
}
.ov-contrib-dot   { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; align-self: center; }
.ov-contrib-label { flex: 1; color: var(--text-dim); }
.ov-contrib-base  { font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
.ov-contrib-tax   { font-size: 0.81rem; font-weight: 600; color: var(--text-dim); white-space: nowrap; min-width: 72px; text-align: right; font-variant-numeric: tabular-nums; }


/* ── Admin: klines cache viewer ─────────────────────────────── */
.adm-klines-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; margin-bottom: .75rem; }
.adm-klines-filter {
  flex: 1; max-width: 200px;
  padding: .3rem .6rem; border-radius: 6px;
  border: 1px solid var(--border); background: var(--surface2);
  color: var(--text); font-size: .83rem;
}
.adm-klines-filter::placeholder { color: var(--muted); }
.adm-klines-filter-sym { max-width: 160px; }
.adm-klines-btn-wrap { justify-content: flex-end; }
.adm-klines-count { font-size: .72rem; font-weight: 400; color: var(--muted); margin-left: .4rem; padding-bottom: .35rem; }
.adm-klines-date-label {
  display: flex; flex-direction: column; gap: .2rem;
  font-size: .68rem; font-weight: 600; color: var(--muted); letter-spacing: .04em; text-transform: uppercase;
}
.adm-klines-date-input {
  padding: .28rem .5rem; border-radius: 6px;
  border: 1px solid var(--border); background: var(--surface2);
  color: var(--text); font-size: .8rem;
}
.adm-klines-tbl { width: 100%; border-collapse: collapse; font-size: .82rem; }
.adm-klines-tbl th {
  text-align: left; padding: .35rem .6rem;
  font-size: .72rem; font-weight: 600; color: var(--muted);
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.adm-klines-tbl td { padding: .3rem .6rem; border-bottom: 1px solid var(--border); }
.adm-klines-tbl tbody tr:last-child td { border-bottom: none; }
.adm-klines-tbl tbody tr:hover td { background: var(--surface2); }
.adm-klines-sym  { font-weight: 600; white-space: nowrap; }
.adm-klines-date { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.adm-klines-price-cell { white-space: nowrap; }
.adm-klines-price { font-variant-numeric: tabular-nums; }
.adm-klines-src  { color: var(--muted); font-size: .78rem; }
.adm-klines-badge {
  display: inline-block; margin-left: .4rem;
  padding: .1rem .35rem; border-radius: 4px; font-size: .68rem; font-weight: 600;
}
.adm-klines-neg  { background: rgba(239,68,68,.15); color: #f87171; }
.adm-klines-more-wrap { display: flex; justify-content: center; margin-top: .75rem; }
.adm-klines-more-btn {
  padding: .35rem 1.2rem; border-radius: 6px; font-size: .82rem;
  border: 1px solid var(--border); background: var(--surface2);
  color: var(--text); cursor: pointer;
}
.adm-klines-more-btn:hover { background: var(--surface3); }
.adm-klines-more-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Klines Data: pills-row divider ─────────────────────────── */
.adm-pills-divider { display: inline-block; width: 1px; height: 1.2em; background: var(--border); margin: 0 .25rem; align-self: center; }

/* ── Klines Data: outage preset button ──────────────────────── */
.adm-klines-preset-btn {
  padding: .28rem .7rem; border-radius: 6px; font-size: .78rem; font-weight: 500;
  border: 1px dashed var(--border); background: transparent;
  color: var(--muted); cursor: pointer; white-space: nowrap;
}
.adm-klines-preset-btn:hover { border-color: #f59e0b; color: #f59e0b; background: rgba(245,158,11,.06); }

/* ── Klines Data: coverage summary strip ────────────────────── */
.adm-cov-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem;
  padding: .55rem .75rem; margin: .5rem 0 .75rem;
  border-radius: 8px; background: var(--surface2); border: 1px solid var(--border);
  font-size: .8rem;
}
.adm-cov-sep  { color: var(--border); }
.adm-cov-stat { color: var(--muted); }
.adm-cov-stat strong { color: var(--text); font-weight: 600; }
.adm-cov-good strong { color: #4ade80; }
.adm-cov-warn strong { color: #f59e0b; }
.adm-cov-bad  strong { color: #f87171; }

/* ── Klines Data: gap list ──────────────────────────────────── */
#admKlinesDataGaps {
  margin-bottom: .75rem;
  border: 1px solid rgba(239,68,68,.25); border-radius: 8px;
  background: rgba(239,68,68,.04); overflow: hidden;
}
.adm-gap-header {
  padding: .4rem .75rem; border-bottom: 1px solid rgba(239,68,68,.2);
  background: rgba(239,68,68,.08);
}
.adm-gap-title { font-size: .72rem; font-weight: 700; color: #f87171; letter-spacing: .05em; text-transform: uppercase; }
.adm-gap-tbl { width: 100%; border-collapse: collapse; font-size: .8rem; }
.adm-gap-tbl tbody tr:not(:last-child) td { border-bottom: 1px solid rgba(239,68,68,.12); }
.adm-gap-range { padding: .3rem .75rem; color: var(--text); font-variant-numeric: tabular-nums; }
.adm-gap-count { padding: .3rem .75rem; color: #f87171; text-align: right; white-space: nowrap; font-size: .75rem; }

/* ── Klines Data: zero-value row highlight ──────────────────── */
.adm-klines-tbl tbody tr.adm-klines-zero td { background: rgba(245,158,11,.06); }
.adm-klines-tbl tbody tr.adm-klines-zero:hover td { background: rgba(245,158,11,.12); }
.adm-zero-badge {
  display: inline-block; padding: .05rem .3rem; border-radius: 3px;
  background: rgba(245,158,11,.2); color: #f59e0b; font-size: .75rem; font-weight: 600;
}

/* ── Klines Pending: badges and row states ──────────────────── */
.adm-pend-tbl td { vertical-align: middle; }
.adm-pend-badge {
  display: inline-block; padding: .1rem .4rem; border-radius: 4px;
  font-size: .7rem; font-weight: 600; white-space: nowrap;
}
.adm-pend-warn  { background: rgba(245,158,11,.15); color: #f59e0b; }
.adm-pend-bad   { background: rgba(239,68,68,.15);  color: #f87171; }
.adm-pend-ok    { background: rgba(74,222,128,.12); color: #4ade80; }
.adm-pend-muted { background: var(--surface3); color: var(--muted); }
.adm-pend-http  { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .8rem; }
.adm-pend-sources { color: var(--muted); font-size: .78rem; }
.adm-pend-retries { color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
.adm-pend-exhausted-row td { background: rgba(239,68,68,.04); }
.adm-pend-exhausted-row:hover td { background: rgba(239,68,68,.09); }
.adm-pend-retry-wrap { display: flex; align-items: center; gap: .3rem; }
.adm-pend-exch-sel {
  padding: .18rem .28rem; border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface2); color: var(--muted); font-size: .72rem;
  cursor: pointer; max-width: 7rem;
}
.adm-pend-retry-btn {
  padding: .22rem .55rem; border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface2); color: var(--text); cursor: pointer;
  font-size: .72rem; white-space: nowrap;
}
.adm-pend-retry-btn:hover:not(:disabled) { opacity: .75; }
.adm-pend-retry-btn:disabled { opacity: .4; cursor: default; }
.adm-pend-result-row > td { padding: 0 !important; border-top: none !important; }
.adm-pend-result {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .6rem;
  padding: .4rem .75rem; font-size: .77rem; border-top: 1px solid var(--border);
}
.adm-pend-result-ok   { background: rgba(27,181,95,.05); }
.adm-pend-result-fail { background: rgba(239,68,68,.05); }
.adm-pend-result-status { font-weight: 600; }
.adm-pend-result-ok   .adm-pend-result-status { color: var(--gain); }
.adm-pend-result-fail .adm-pend-result-status { color: var(--loss); }
.adm-pend-result-msg  { color: var(--text); }
.adm-pend-result-sep  { color: var(--muted); }
.adm-pend-result-exch, .adm-pend-result-http { color: var(--muted); font-size: .74rem; }
.adm-pend-result-body {
  flex: 1 1 100%; font-size: .7rem; color: var(--muted);
  background: var(--surface3); border-radius: 4px; padding: .3rem .5rem;
  white-space: pre-wrap; word-break: break-all;
  max-height: 5.5rem; overflow-y: auto;
}

/* ── Admin: klines source filter pills ──────────────────────── */
.adm-klines-pills { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .75rem; }
.adm-klines-pill {
  padding: .2rem .65rem; border-radius: 99px;
  border: 1px solid var(--border); background: var(--surface2);
  color: var(--muted); font-size: .75rem; cursor: pointer;
  font-family: inherit; transition: all .15s;
  white-space: nowrap;
}
.adm-klines-pill:hover { border-color: var(--accent); color: var(--text); }
.adm-klines-pill-active {
  border-color: var(--accent); background: rgba(99,102,241,.15);
  color: var(--accent); font-weight: 600;
}
.adm-klines-pill:disabled { opacity: .45; cursor: not-allowed; }

/* ── Admin: klines backfill panel ───────────────────────────── */
.bf-divider { height: 1px; background: var(--border); margin: 1.25rem 0 1rem; }
.bf-header { margin-bottom: .75rem; }
.bf-title { font-weight: 600; font-size: .95rem; color: var(--text); margin-right: .5rem; }
.bf-hint { font-size: .78rem; color: var(--muted); }
.bf-toolbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; margin-bottom: .6rem; }
.bf-field { display: flex; flex-direction: column; gap: .25rem; }
.bf-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.bf-input {
  padding: .3rem .55rem; border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface2); color: var(--text); font-family: inherit; font-size: .82rem;
  width: 130px;
}
.bf-input:focus { outline: none; border-color: var(--accent); }
.bf-select {
  padding: .3rem .5rem; border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface2); color: var(--text); font-family: inherit; font-size: .82rem;
  cursor: pointer;
}
.bf-btns { display: flex; gap: .4rem; align-items: flex-end; }
.bf-run-btn {
  padding: .35rem .9rem; border-radius: 5px; border: none; cursor: pointer;
  background: var(--accent); color: #fff; font-size: .82rem; font-family: inherit;
  font-weight: 600; transition: opacity .15s;
}
.bf-run-btn:disabled { opacity: .45; cursor: not-allowed; }
.bf-run-btn:not(:disabled):hover { opacity: .85; }
.bf-abort-btn {
  padding: .35rem .8rem; border-radius: 5px; border: 1px solid var(--border);
  cursor: pointer; background: transparent; color: var(--muted);
  font-size: .82rem; font-family: inherit; transition: color .15s;
}
.bf-abort-btn:hover { color: #ef4444; border-color: #ef4444; }
.bf-status { font-size: .82rem; min-height: 1.2em; margin-bottom: .4rem; }
.bf-status-warn { color: #f59e0b; }
.bf-status-error { color: #ef4444; }
.bf-status-ok { color: #22c55e; }
.bf-progress-wrap { margin: .4rem 0 .6rem; }
.bf-progress-track {
  height: 6px; background: var(--surface2); border-radius: 99px;
  overflow: hidden; margin-bottom: .3rem;
}
.bf-progress-bar { height: 100%; background: var(--accent); border-radius: 99px; transition: width .3s ease; }
.bf-progress-label { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.bf-summary {
  padding: .55rem .75rem; border-radius: 6px;
  background: rgba(34,197,94,.07); border: 1px solid rgba(34,197,94,.2);
  font-size: .82rem; line-height: 1.7;
}
.bf-sum-symbol { font-weight: 700; color: var(--text); }
.bf-sum-sources { color: var(--muted); }
.bf-sum-ins { color: #22c55e; }
.bf-sum-upd { color: var(--accent); }
.bf-sum-cached { color: var(--muted); }
.bf-sum-fail { color: var(--muted); }
.bf-sum-fail-bad { color: #ef4444; }
.bf-sum-breakdown { color: var(--muted); font-size: .8rem; }