/* ====================================================
   Wizbook – Dark MTG Theme
   ==================================================== */

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  background: #111429;
  color: #d4d4d8;
  height: 100vh;
  overflow: hidden;
}

a { color: #60a5fa; text-decoration: none; }
a:hover { text-decoration: underline; }

button {
  cursor: pointer;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 13px;
  background: #374151;
  color: #e5e7eb;
  transition: background 0.15s;
}
button:hover { background: #4b5563; }

.btn-primary { background: #2563eb; color: #fff; }
.btn-primary:hover { background: #1d4ed8; }
.btn-secondary { background: #374151; color: #d1d5db; }
.btn-danger { background: #dc2626; color: #fff; }
.btn-danger:hover { background: #b91c1c; }
.btn-unsaved { background: #dc2626 !important; color: #fff !important; }
.btn-unsaved:hover { background: #b91c1c !important; }

input[type="text"], select {
  background: #1f2937;
  border: 1px solid #374151;
  border-radius: 4px;
  color: #e5e7eb;
  padding: 6px 10px;
  font-size: 13px;
  width: 100%;
  outline: none;
  transition: border-color 0.15s;
}
input[type="text"]:focus, select:focus { border-color: #3b82f6; }
select option { background: #1f2937; }

.hidden { display: none !important; }
.muted { color: #6b7280; font-size: 12px; }
.error-text { color: #f87171; font-size: 12px; }

/* ---- Badges ---- */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.badge-danger { background: #7f1d1d; color: #fca5a5; }
.badge-muted { background: #1f2937; color: #6b7280; }

/* ====================================================
   SPLASH SCREEN
   ==================================================== */
#splash-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111429;
  z-index: 100;
  opacity: 1;
  transition: opacity 0.7s ease;
}

#splash-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}

#splash-content {
  text-align: center;
  width: min(38rem, 92vw);
  padding: 40px;
  animation: splash-rise 0.8s ease both;
}

@keyframes splash-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

#splash-logo-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  margin-bottom: 4px;
  display: block;
}

#splash-headline {
  color: #ffffff;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin: 18px 0 12px;
  line-height: 1.2;
}

#splash-tagline {
  color: #d1d5db;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 12px;
  max-width: 26rem;
  margin-left: auto;
  margin-right: auto;
}
#splash-support {
  color: #6b7280;
  font-size: 12px;
  margin-bottom: 32px;
}
#splash-support a {
  color: #60a5fa;
  text-decoration: none;
}
#splash-support a:hover {
  text-decoration: underline;
}

#splash-phase {
  color: #9ca3af;
  margin-bottom: 16px;
  font-size: 14px;
}

#progress-bar-container {
  width: 100%;
  height: 8px;
  background: #1f2937;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

#progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #2563eb, #60a5fa);
  border-radius: 4px;
  width: 0%;
  transition: width 0.3s ease;
}

#progress-text {
  font-size: 12px;
  color: #6b7280;
  min-height: 18px;
}

/* ====================================================
   HEADER
   ==================================================== */
#app-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: #111827;
  border-bottom: 1px solid #1f2937;
  height: 48px;
  flex-shrink: 0;
  overflow: visible;
  position: relative;
  z-index: 200;
}

#logo {
  font-size: 20px;
  font-weight: 800;
  color: #60a5fa;
  letter-spacing: -0.5px;
  flex-shrink: 0;
  margin-right: 4px;
}

#header-controls {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

#header-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

#collection-name {
  font-weight: 600;
  color: #e5e7eb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}


#support-link {
  color: #FF424D;
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  border: 1px solid #FF424D;
  border-radius: 4px;
  padding: 3px 10px;
  transition: border-color 0.15s, background 0.15s;
  cursor: pointer;
}
#support-link:hover { background: rgba(255, 66, 77, 0.15); }

#discord-link {
  color: #5865F2;
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  border: 1px solid #5865F2;
  border-radius: 4px;
  padding: 3px 10px;
  transition: border-color 0.15s, background 0.15s;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
#discord-link:hover { background: rgba(88, 101, 242, 0.15); }

#about-link {
  color: #f9fafb;
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  border: 1px solid #4b5563;
  border-radius: 4px;
  padding: 3px 10px;
  transition: border-color 0.15s, background 0.15s;
  cursor: pointer;
}
#about-link:hover { border-color: #9ca3af; background: #1f2937; }

#features-link {
  color: #f9fafb;
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  border: 1px solid #4b5563;
  border-radius: 4px;
  padding: 3px 10px;
  transition: border-color 0.15s, background 0.15s;
  cursor: pointer;
}
#features-link:hover { border-color: #60a5fa; background: rgba(59,130,246,0.15); }

/* ====================================================
   MAIN LAYOUT – Two-Panel Grid
   ==================================================== */
#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#main-layout {
  display: flex;
  flex-direction: row;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* ====================================================
   RESIZE BARS
   ==================================================== */
.resize-bar {
  background: #1f2937;
  flex-shrink: 0;
  transition: background 0.15s;
  z-index: 10;
}
.resize-bar:hover, .resize-bar.dragging { background: #3b82f6; }

.resize-bar-col {
  width: 4px;
  cursor: col-resize;
}

.resize-bar-row {
  height: 4px;
  cursor: row-resize;
}

/* ====================================================
   LEFT PANEL
   ==================================================== */
#left-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  width: 20%;
  min-width: 200px;
  flex-shrink: 0;
}

/* ---- Search Filters ---- */
#search-filters {
  padding: 12px;
  border-bottom: 1px solid #1f2937;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  overflow: hidden;
  min-height: 80px;
}

.filter-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.filter-row input, .filter-row select {
  flex: 1;
}

.filter-actions {
  gap: 6px;
}

.filter-actions button {
  flex: 1;
}

.filter-row-cmc {
  align-items: center;
  gap: 6px;
}

.cmc-label {
  font-size: 11px;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  flex-shrink: 0;
}

.cmc-sep {
  color: #6b7280;
  flex-shrink: 0;
}

.filter-row-cmc input {
  width: 60px;
  flex: 0 0 60px;
}

/* Color checkboxes */
#filter-colors {
  display: flex;
  gap: 6px;
  align-items: center;
}

.color-checkbox {
  display: flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
}

.color-checkbox input[type="checkbox"] {
  width: auto;
  cursor: pointer;
}

.pip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
  border: 2px solid rgba(255,255,255,0.2);
  cursor: pointer;
}
.pip-W { background: #f5f5dc; color: #333; }
.pip-U { background: #0e68ab; color: #fff; }
.pip-B { background: #2a2a2a; color: #ccc; border-color: #555; }
.pip-R { background: #d3202a; color: #fff; }
.pip-G { background: #00733e; color: #fff; }

/* ---- Card Viewer ---- */
#card-viewer {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  min-height: 0;
}

#card-viewer-empty {
  color: #4b5563;
  text-align: center;
  padding-top: 40px;
  font-style: italic;
}

#card-image-container {
  text-align: center;
  margin-bottom: 12px;
  position: relative;
}

#card-image {
  width: 100%;
  max-width: 260px;
  border-radius: 12px;
  display: block;
  margin: 0 auto;
}

#card-image-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  color: #6b7280;
}

#card-attribution {
  font-size: 10px;
  color: #4b5563;
  margin-top: 6px;
  font-style: italic;
  line-height: 1.4;
}

#card-meta {
  font-size: 13px;
}

#card-name-display {
  font-size: 16px;
  font-weight: 700;
  color: #f3f4f6;
  margin: 0 0 4px 0;
}

.card-type {
  color: #9ca3af;
  font-style: italic;
  margin: 2px 0;
}

.card-text {
  color: #d1d5db;
  margin: 8px 0;
  line-height: 1.5;
  white-space: pre-wrap;
}

.card-pt {
  font-weight: 700;
  color: #f3f4f6;
  margin: 4px 0;
}

.card-set {
  font-size: 11px;
  color: #6b7280;
  margin: 4px 0;
}

#card-pricing {
  margin: 8px 0;
}

#price-rows {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  font-size: 12px;
  align-items: baseline;
}

.price-label {
  color: #6b7280;
  white-space: nowrap;
}

.price-value {
  color: #34d399;
  font-weight: 600;
}

.price-value.price-tix {
  color: #a78bfa;
}

/* % change column */
.col-pct-change { text-align: right; white-space: nowrap; width: 60px; }
.pct-up   { color: #34d399; font-weight: 600; }
.pct-down { color: #f87171; font-weight: 600; }
.pct-flat { color: #6b7280; }
.pct-na   { color: #374151; }

/* Price history chart */
#price-chart-container { margin: 10px 0 6px; }
.price-chart-header {
  font-size: 11px;
  color: #6b7280;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 4px;
}
#price-chart-wrapper {
  position: relative;
  width: 100%;
  height: 120px;
  background: #0d1117;
  border-radius: 4px;
  border: 1px solid #1f2937;
  cursor: crosshair;
}
#price-chart-canvas,
#price-chart-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#price-chart-overlay {
  pointer-events: none;
}
#price-chart-tooltip {
  position: fixed;
  background: #1f2937;
  border: 1px solid #374151;
  color: #e5e7eb;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  pointer-events: none;
  display: none;
  z-index: 100;
  white-space: nowrap;
}

#scryfall-link {
  display: inline-block;
  font-size: 12px;
  color: #93c5fd;
  border: 1px solid #3b82f6;
  border-radius: 4px;
  padding: 4px 12px;
  text-decoration: none;
  margin-top: 10px;
  transition: background 0.15s, color 0.15s;
}
#scryfall-link:hover { background: #3b82f6; color: #fff; }

/* Mana cost display */
#card-mana-cost-display {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 4px 0;
  align-items: center;
}

.mana-sym {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
  border: 1px solid rgba(0,0,0,0.3);
}
.mana-W { background: #f5f5dc; color: #333; }
.mana-U { background: #0e68ab; color: #fff; }
.mana-B { background: #2a2a2a; color: #ccc; border-color: #555; }
.mana-R { background: #d3202a; color: #fff; }
.mana-G { background: #00733e; color: #fff; }
.mana-C { background: #9ca3af; color: #111; }  /* colorless number */
.mana-X { background: #6b7280; color: #fff; }
.mana-S { background: #bfdbfe; color: #333; }  /* snow */
.mana-generic { background: #6b7280; color: #fff; }

/* Spinner animation */
.spinner::after {
  content: '';
  display: block;
  width: 24px;
  height: 24px;
  border: 3px solid #374151;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ====================================================
   RIGHT PANEL
   ==================================================== */
#right-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  flex: 1;
  min-width: 280px;
}

#table-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #1f2937;
  flex-shrink: 0;
}

#subsearch {
  flex: 1;
  max-width: 260px;
}

/* Pending queue bar – shown when cards are queued across searches */
#pending-queue {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: #1e3a5f;
  border-bottom: 1px solid #2563eb;
  flex-shrink: 0;
  font-size: 13px;
  color: #93c5fd;
}

#pending-count-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

#pending-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

#result-count {
  white-space: nowrap;
}

#pagination-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 7px 12px;
  border-bottom: 1px solid #1f2937;
  flex-shrink: 0;
  font-size: 13px;
}

#page-info {
  color: #9ca3af;
  min-width: 110px;
  text-align: center;
  white-space: nowrap;
}

#pagination-bar button:disabled {
  opacity: 0.35;
  cursor: default;
}

#table-container {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* ---- Card Table ---- */
#card-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}

#card-table colgroup { /* Widths set via JS */ }

#card-table thead th {
  position: sticky;
  top: 0;
  background: #111827;
  color: #9ca3af;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 9px 8px;
  text-align: left;
  border-bottom: 1px solid #1f2937;
  white-space: nowrap;
  z-index: 1;
}

#card-table thead th.sortable {
  cursor: pointer;
  user-select: none;
}
#card-table thead th.sortable:hover { color: #d1d5db; }
#card-table thead th.sort-asc .sort-arrow::after { content: ' ↑'; }
#card-table thead th.sort-desc .sort-arrow::after { content: ' ↓'; }

#card-table tbody tr {
  border-bottom: 1px solid #1a1f2e;
  cursor: pointer;
  transition: background 0.1s;
}
#card-table tbody tr:hover { background: #1f2937; }
#card-table tbody tr.selected { background: #1e3a5f; }
#card-table tbody tr.active-viewer { outline: 1px solid #3b82f6; }

#card-table td {
  padding: 7px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 0; /* Required for text-overflow to work in table cells */
}

.col-check { width: 30px; }
.col-qty { width: 58px; text-align: center; }
.col-cond { width: 58px; text-align: center; }
.col-type_line { min-width: 110px; }
.col-rarity { width: 72px; }

/* Condition badges */
.cond-badge {
  font-size: 10px; font-weight: 700; padding: 2px 6px;
  border-radius: 4px; cursor: pointer; user-select: none;
  border: 1px solid transparent; transition: opacity 0.1s;
  display: inline-block;
}
.cond-badge:hover { opacity: 0.75; }
.cond-NM  { background: #14532d; color: #86efac; border-color: #166534; }
.cond-LP  { background: #1e3a5f; color: #93c5fd; border-color: #1d4ed8; }
.cond-MP  { background: #713f12; color: #fde68a; border-color: #92400e; }
.cond-HP  { background: #7c2d12; color: #fdba74; border-color: #9a3412; }
.cond-DMG { background: #4c0519; color: #fca5a5; border-color: #9f1239; }

/* Inline condition select (replaces badge while open) */
.cond-select {
  font-size: 10px; background: #1f2937; color: #e5e7eb;
  border: 1px solid #374151; border-radius: 4px; padding: 2px 4px;
  cursor: pointer;
}

/* Finish badges */
.finish-badge {
  font-size: 10px; font-weight: 700; padding: 2px 6px;
  border-radius: 4px; cursor: pointer; user-select: none;
  border: 1px solid transparent; transition: opacity 0.1s;
  display: inline-block; white-space: nowrap;
}
.finish-badge:hover { opacity: 0.75; }
.finish-regular       { background: #1f2937; color: #9ca3af; border-color: #374151; }
.finish-foil          { background: #1e3a5f; color: #93c5fd; border-color: #1d4ed8; }
.finish-etched        { background: #3b0764; color: #d8b4fe; border-color: #6b21a8; }
.finish-extended-art  { background: #713f12; color: #fde68a; border-color: #92400e; }
.finish-borderless    { background: #14532d; color: #86efac; border-color: #166534; }
.finish-showcase      { background: #4c0519; color: #fca5a5; border-color: #9f1239; }
.finish-retro         { background: #44403c; color: #e7e5e4; border-color: #78716c; }

/* Notes column */
.col-notes { max-width: 120px; overflow: hidden; }
.notes-text { cursor: pointer; font-size: 11px; color: #9ca3af; }
.notes-text:hover { color: #e5e7eb; }
.notes-placeholder { color: #4b5563; font-style: italic; }
.notes-editor {
  width: 100%; min-width: 100px; font-size: 11px;
  background: #1f2937; color: #e5e7eb; border: 1px solid #4b5563;
  border-radius: 4px; padding: 3px 5px; resize: vertical;
}

/* In-Deck column */
.in-deck-qty {
  font-size: 11px; font-weight: 700; color: #60a5fa;
}
.col-in-deck { text-align: center; width: 54px; }
.col-in-binder { min-width: 70px; white-space: nowrap; }
.col-finish { white-space: nowrap; }

/* Binder tag badges */
.binder-tag-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  margin-right: 2px;
  cursor: pointer;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.4;
  vertical-align: middle;
  transition: opacity 0.1s;
}
.binder-tag-badge:hover { opacity: 0.75; }

/* Color swatches in new-binder modal */
#binder-color-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.1s, transform 0.1s;
}
.color-swatch:hover { transform: scale(1.15); }
.color-swatch.active { border-color: #fff; box-shadow: 0 0 0 2px #3b82f6; }

/* ====================================================
   Deck Simulator
   ==================================================== */
#sim-select-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}
#sim-select-row select { flex: 1; min-width: 0; }
#sim-deck-info { font-size: 11px; color: #6b7280; white-space: nowrap; }

.sim-section-header {
  font-size: 12px;
  font-weight: 600;
  color: #d1d5db;
  margin: 10px 0 6px 0;
  border-bottom: 1px solid #1f2937;
  padding-bottom: 4px;
}
.sim-subsection-label {
  font-size: 11px;
  color: #9ca3af;
  margin: 8px 0 4px 0;
}

/* Mode toggle */
#sim-mode-toggle {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}
.sim-mode-btn {
  flex: 1;
  padding: 4px 8px;
  font-size: 11px;
  border: 1px solid #374151;
  border-radius: 4px;
  background: #111827;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.15s;
}
.sim-mode-btn.active {
  background: #1e3a5f;
  color: #93c5fd;
  border-color: #2563eb;
}

/* Group checkbox list */
.sim-checkbox-list {
  max-height: 140px;
  overflow-y: auto;
  border: 1px solid #1f2937;
  border-radius: 4px;
  padding: 4px;
  margin-bottom: 6px;
}
.sim-checkbox-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #d1d5db;
  padding: 2px 0;
  cursor: pointer;
}
.sim-checkbox-item input[type="checkbox"] { accent-color: #2563eb; }

/* Probability table */
.sim-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  margin-top: 6px;
}
.sim-table th {
  font-weight: 600;
  color: #9ca3af;
  padding: 3px 4px;
  text-align: center;
  border-bottom: 1px solid #1f2937;
}
.sim-table td { padding: 3px 4px; text-align: center; }
.sim-row-label {
  text-align: left !important;
  font-weight: 600;
  color: #9ca3af;
  white-space: nowrap;
}

/* Probability colour coding */
.sim-prob-high  { color: #4ade80; }
.sim-prob-mid   { color: #facc15; }
.sim-prob-low   { color: #f97316; }
.sim-prob-vlow  { color: #6b7280; }

/* Land distribution bars */
.sim-land-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}
.sim-land-label {
  font-size: 11px;
  color: #9ca3af;
  width: 56px;
  text-align: right;
  flex-shrink: 0;
}
.sim-land-bar-wrap {
  flex: 1;
  height: 14px;
  background: #111827;
  border-radius: 3px;
  overflow: hidden;
}
.sim-land-bar {
  height: 100%;
  background: #374151;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.sim-land-bar.sim-land-keepable { background: #2563eb; }
.sim-land-pct {
  font-size: 10px;
  color: #6b7280;
  width: 42px;
  text-align: right;
  flex-shrink: 0;
}

/* Type composition rows */
.sim-comp-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  border-bottom: 1px solid #111827;
  font-size: 11px;
}
.sim-comp-desc { color: #d1d5db; }
.sim-comp-pct { color: #9ca3af; flex-shrink: 0; margin-left: 8px; }

/* Compute button spacing */
#sim-compute-btn { margin-bottom: 8px; }

/* ====================================================
   Rapid Card Adder
   ==================================================== */
#rapid-adder-wrap { display: flex; flex-direction: column; gap: 8px; }
#rapid-input-wrap { position: relative; }
#rapid-adder-input {
  width: 100%;
  font-size: 15px;
  padding: 10px 12px;
  background: #111827;
  border: 2px solid #374151;
  border-radius: 6px;
  color: #e5e7eb;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
#rapid-adder-input:focus { border-color: #3b82f6; }
#rapid-adder-input::placeholder { color: #6b7280; }

#rapid-suggestions {
  position: absolute;
  top: 100%; left: 0; right: 0;
  z-index: 20;
  background: #1f2937;
  border: 1px solid #374151;
  border-top: none;
  border-radius: 0 0 6px 6px;
  list-style: none;
  margin: 0; padding: 0;
  max-height: 320px;
  overflow-y: auto;
  box-shadow: 0 6px 16px rgba(0,0,0,0.5);
}
#rapid-suggestions li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  color: #d1d5db;
  border-bottom: 1px solid #1a1a2e;
}
#rapid-suggestions li:last-child { border-bottom: none; }
#rapid-suggestions li:hover,
#rapid-suggestions li.active { background: #374151; }
.rapid-card-name {
  flex: 1;
  font-weight: 600;
  color: #e5e7eb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rapid-card-set { font-size: 11px; color: #6b7280; white-space: nowrap; }
.rapid-card-mana { display: inline-flex; gap: 2px; flex-shrink: 0; }
.rapid-card-mana .mana-sym { width: 16px; height: 16px; font-size: 9px; }

#rapid-queue-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
#rapid-queue-toolbar button { font-size: 11px; padding: 3px 8px; }
#btn-rapid-toggle-img.active { background: #1e40af; border-color: #3b82f6; color: #e5e7eb; }
#rapid-recent-queue {
  font-size: 12px;
  color: #6b7280;
  max-height: 400px;
  overflow-y: auto;
}
.rapid-queued-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  border-bottom: 1px solid #1f2937;
  animation: rapid-flash 0.4s ease-out;
}
.rapid-thumb {
  width: 36px;
  height: 50px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
}
.rapid-queued-item .queued-name { flex: 1; color: #93c5fd; }
.rapid-queued-item .queued-check { color: #34d399; font-weight: 700; }
.rapid-remove-btn {
  background: none; border: none; color: #6b7280; cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 2px; flex-shrink: 0;
}
.rapid-remove-btn:hover { color: #ef4444; }
#btn-rapid-show-more { font-size: 11px; padding: 4px 10px; margin-top: 4px; width: 100%; }
@keyframes rapid-flash {
  0%   { background: rgba(59,130,246,0.3); }
  100% { background: transparent; }
}

/* ========== HELP TOOLTIPS ========== */
.help-tip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid #4b5563; font-size: 10px; font-weight: 600;
  color: #6b7280; cursor: help; position: relative;
  vertical-align: middle; margin-left: 4px; flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s;
}
.help-tip:hover { border-color: #60a5fa; color: #60a5fa; }
/* Default: tooltip opens BELOW the ? icon */
.help-tip-text {
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%); width: 240px;
  padding: 8px 10px; background: #1f2937; border: 1px solid #374151;
  border-radius: 6px; font-size: 11px; font-weight: 400;
  color: #d1d5db; line-height: 1.5; text-align: left;
  text-transform: none; letter-spacing: normal;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5); z-index: 9999;
  pointer-events: none; opacity: 0; visibility: hidden;
  transition: opacity 0.15s; white-space: normal;
}
/* Arrow pointing UP (above the tooltip box) */
.help-tip-text::after {
  content: ''; position: absolute; bottom: 100%; left: 50%;
  transform: translateX(-50%); border: 5px solid transparent;
  border-bottom-color: #374151;
}
.help-tip:hover .help-tip-text,
.help-tip.active .help-tip-text { opacity: 1; visibility: visible; }
/* Modifier: open below but align right edge */
.help-tip-right .help-tip-text { left: auto; right: -4px; transform: none; }
.help-tip-right .help-tip-text::after { left: auto; right: 6px; transform: none; }
/* Wider variant for the tools tooltip */
.help-tip-text-wide { width: 280px; }
.help-tip-text strong { color: #93c5fd; }
/* Fixed-position tooltip that escapes overflow:hidden parents */
.help-tip-text-fixed {
  position: fixed; top: auto; left: auto;
  transform: none;
}
.help-tip-text-fixed::after { display: none; }

/* ========== RESPONSIVE BUTTON LABELS ========== */
.btn-label-icon { display: none; }
@media (max-width: 768px) {
  .btn-label-full { display: none; }
  .btn-label-icon { display: inline-flex; align-items: center; justify-content: center; }
}

/* ========== GET STARTED EMPTY STATE ========== */
#get-started {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 60px 20px; max-width: 340px; margin: 0 auto;
}
.get-started-icon { width: 44px; height: 44px; color: #4b5563; margin-bottom: 16px; flex-shrink: 0; }
#get-started h3 { font-size: 17px; color: #e5e7eb; margin: 0 0 10px; font-weight: 600; }
#get-started p { font-size: 13px; color: #9ca3af; line-height: 1.6; margin: 0; }
.get-started-hint { margin-top: 10px !important; font-size: 12px !important; color: #6b7280 !important; }

/* Undo/Redo buttons */
.btn-undo-redo {
  background: none; border: 1px solid #374151; color: #9ca3af;
  font-size: 14px; padding: 3px 8px; border-radius: 4px;
  cursor: pointer; transition: all 0.15s;
}
.btn-undo-redo:hover:not(:disabled) { color: #e5e7eb; border-color: #6b7280; }
.btn-undo-redo:disabled { opacity: 0.3; cursor: default; }

/* Column settings popover */
#column-settings-popover {
  position: absolute; top: 100%; right: 0;
  background: #1f2937; border: 1px solid #374151; border-radius: 6px;
  padding: 8px 10px; z-index: 200; min-width: 160px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.col-settings-header {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  color: #6b7280; margin-bottom: 6px; padding-bottom: 4px;
  border-bottom: 1px solid #374151;
}
.col-settings-item { padding: 3px 0; }
.col-settings-item label {
  display: flex; align-items: center; gap: 6px;
  cursor: pointer; font-size: 13px; color: #d1d5db;
}
.col-settings-item input[type="checkbox"] { accent-color: #3b82f6; }

/* ---- Advanced Filters ---- */
#advanced-filter-wrap { position: relative; flex-shrink: 0; }
#btn-advanced-filters {
  background: #374151; color: #d1d5db; border: 1px solid #374151;
  font-size: 12px; padding: 5px 10px; border-radius: 4px;
  white-space: nowrap; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
#btn-advanced-filters:hover { background: #4b5563; }
#btn-advanced-filters.af-active {
  background: #2563eb; color: #fff; border-color: #2563eb;
}
#btn-advanced-filters.af-active:hover {
  background: #1d4ed8; border-color: #1d4ed8;
}

#advanced-filters-popover {
  position: absolute; top: 100%; left: 0; margin-top: 4px;
  background: #1f2937; border: 1px solid #374151; border-radius: 6px;
  padding: 10px 12px; z-index: 200; min-width: 260px; max-width: 320px;
  max-height: 70vh; overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
#advanced-filters-popover::-webkit-scrollbar { width: 6px; }
#advanced-filters-popover::-webkit-scrollbar-track { background: transparent; }
#advanced-filters-popover::-webkit-scrollbar-thumb { background: #374151; border-radius: 3px; }

.af-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid #374151;
}
.af-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: #6b7280;
}
.af-header .btn-secondary { font-size: 11px; padding: 2px 8px; }

.af-section { margin-bottom: 10px; }
.af-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: #6b7280; margin-bottom: 4px;
}
.af-checkbox-group { display: flex; flex-wrap: wrap; gap: 4px 6px; }

.af-chip {
  display: inline-flex; align-items: center; gap: 3px;
  cursor: pointer; font-size: 12px; color: #d1d5db;
}
.af-chip input[type="checkbox"] { display: none; }
.af-chip .pip { opacity: 0.5; transition: opacity 0.15s; }
.af-chip input:checked + .pip { opacity: 1; box-shadow: 0 0 0 2px #3b82f6; }

.af-check {
  display: flex; align-items: center; gap: 5px;
  cursor: pointer; font-size: 12px; color: #d1d5db; padding: 1px 0;
}
.af-check input[type="checkbox"] { accent-color: #3b82f6; }

.af-range-row { display: flex; align-items: center; gap: 6px; }
.af-range-row input[type="number"] {
  width: 70px; background: #111827; border: 1px solid #374151;
  border-radius: 4px; color: #e5e7eb; padding: 4px 6px; font-size: 12px;
}
.af-range-row input[type="number"]:focus { border-color: #3b82f6; outline: none; }
.af-sep { color: #6b7280; font-size: 13px; }

#af-set-query {
  width: 100%; background: #111827; border: 1px solid #374151;
  border-radius: 4px; color: #e5e7eb; padding: 4px 8px; font-size: 12px;
}
#af-set-query:focus { border-color: #3b82f6; outline: none; }

.af-collection-only.af-hidden { display: none; }

/* Column drag feedback */
#card-table th[draggable="true"] { cursor: grab; }
#card-table th[draggable="true"]:active { cursor: grabbing; }
.col-dragging { opacity: 0.5; }
.col-drag-over { border-left: 2px solid #3b82f6 !important; }

/* Desktop-only utility */
.desktop-only { display: inline-flex; }

/* Hide ← Search button on desktop — replaced by #mode-tabs */
@media (min-width: 769px) {
  #btn-goto-search { display: none !important; }
}

/* Desktop mode tabs */
#mode-tabs {
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-bottom: 1px solid #1f2937;
  flex-shrink: 0;
}
.mode-tab {
  background: transparent;
  color: #6b7280;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mode-tab:hover { color: #d1d5db; }
.mode-tab.active { color: #e5e7eb; border-bottom-color: #3b82f6; }
.mode-tab.disabled { color: #4b5563; cursor: default; pointer-events: none; }
@media (max-width: 768px) { .desktop-only { display: none !important; } }

/* View mode buttons need relative positioning for popover */
.view-mode-toggle { position: relative; }

/* Split button */
.btn-split {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0; margin-left: 4px;
  background: #1f2937; border: 1px solid #374151; border-radius: 4px;
  color: #6b7280; cursor: pointer; flex-shrink: 0;
  transition: background 0.15s, color 0.15s; vertical-align: middle;
}
.btn-split:hover { background: #374151; color: #e5e7eb; }

/* Split popover */
#split-popover {
  position: fixed; z-index: 500;
  background: #1a2236; border: 1px solid #2d3e5a; border-radius: 8px;
  padding: 14px 16px; box-shadow: 0 8px 24px rgba(0,0,0,.5);
  min-width: 240px; font-size: 13px; color: #d1d5db;
}
.split-popover-card { font-weight: 600; color: #f9fafb; margin-bottom: 10px; font-size: 13px; }
#split-popover label { display: block; margin-bottom: 8px; }
#split-qty-input { width: 52px; text-align: center; margin: 0 4px; }
#split-cond-select { margin-left: 4px; }
.split-popover-remaining { font-size: 11px; color: #6b7280; margin: 4px 0 10px; }
.split-popover-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* Rarity colors */
.rarity-common { color: #9ca3af; }
.rarity-uncommon { color: #93c5fd; }
.rarity-rare { color: #fbbf24; }
.rarity-mythic { color: #f97316; }

/* Table empty state */
.table-empty {
  text-align: center;
  padding: 40px;
  color: #4b5563;
  font-style: italic;
}

/* Qty edit input inside table */
.qty-input {
  width: 44px;
  text-align: center;
  padding: 2px 4px;
  background: #111827;
  border: 1px solid #374151;
  border-radius: 3px;
  color: #e5e7eb;
  font-size: 12px;
}

/* ====================================================
   MODALS
   ==================================================== */
#modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.modal {
  background: #1f2937;
  border: 1px solid #374151;
  border-radius: 8px;
  padding: 24px;
  max-width: 420px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.modal h3 {
  margin: 0 0 12px 0;
  font-size: 18px;
  color: #f3f4f6;
}

.modal p {
  color: #9ca3af;
  margin: 0 0 12px 0;
}

.modal input[type="text"] {
  margin-bottom: 16px;
}

.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ── Patreon support popup ── */
#patreon-popup {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  background: #1f2937;
  border: 1px solid #374151;
  border-radius: 8px;
  padding: 20px 24px;
  max-width: 340px;
  width: calc(100% - 40px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
#patreon-popup.visible {
  transform: translateY(0);
  opacity: 1;
}
#patreon-popup-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  color: #6b7280;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 4px;
}
#patreon-popup-close:hover { color: #d1d5db; }
.patreon-popup-title {
  margin: 0 0 8px 0;
  font-size: 15px;
  font-weight: 600;
  color: #f3f4f6;
}
.patreon-popup-body {
  margin: 0 0 14px 0;
  font-size: 13px;
  color: #9ca3af;
  line-height: 1.5;
}
.patreon-popup-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
#patreon-popup-link {
  display: inline-block;
  background: #FF424D;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
}
#patreon-popup-link:hover { background: #e03a44; }
#patreon-popup-later {
  background: none;
  border: none;
  color: #6b7280;
  font-size: 13px;
  cursor: pointer;
  padding: 8px 14px;
}
#patreon-popup-later:hover { color: #9ca3af; }

/* Import progress bar */
.import-progress-bar-track {
  width: 100%;
  height: 6px;
  background: #1f2937;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 12px;
}
.import-progress-bar-fill {
  width: 30%;
  height: 100%;
  background: #3b82f6;
  border-radius: 3px;
  animation: import-progress-slide 1.2s ease-in-out infinite;
}
@keyframes import-progress-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(430%); }
}

/* Open collection list */
.collection-list {
  list-style: none;
  margin: 0 0 12px 0;
  padding: 0;
  max-height: 240px;
  overflow-y: auto;
}

.collection-list li {
  padding: 10px 12px;
  border-radius: 4px;
  cursor: pointer;
  color: #d1d5db;
  transition: background 0.1s;
}

.collection-list li:hover { background: #374151; }

/* Import warnings */
.import-warnings {
  list-style: none;
  padding: 0;
  margin: 8px 0;
  max-height: 150px;
  overflow-y: auto;
  font-size: 12px;
  color: #fbbf24;
}

/* Cockatrice import modal */
#cod-collection-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 18px;
}
#cod-collection-options label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: #e5e7eb;
}
#cod-collection-options input[type="radio"] {
  margin-top: 3px;
  accent-color: #3b82f6;
}
#cod-collection-options strong {
  display: block;
  font-size: 13px;
}
.cod-option-desc {
  display: block;
  font-size: 11px;
  color: #6b7280;
  margin-top: 2px;
}

/* ====================================================
   Collection view body — flex row (panel on the right)
   ==================================================== */
#collection-view-body {
  display: flex;
  flex-direction: row;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

#collection-table-area {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  min-height: 0;
  min-width: 0;
}

#collection-side-panel {
  width: 33vw;
  min-width: 200px;
  height: 100%;
  flex-shrink: 0;
  border-left: 1px solid #1f2937;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  background: #111827;
}

/* ====================================================
   Collection stats section
   ==================================================== */
#collection-stats-section {
  flex: 1;
  min-width: 120px;
  overflow-y: auto;
  padding: 12px;
  border-right: 1px solid #1f2937;
}

#stats-summary {
  margin-bottom: 12px;
}

#stats-total-value {
  font-size: 22px;
  font-weight: 700;
  color: #34d399;
  line-height: 1.2;
}

#stats-filtered-value {
  font-size: 13px;
  color: #6ee7b7;
  margin-top: 2px;
}

#stats-card-counts {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}

.stats-filter-group {
  margin-bottom: 10px;
}

.stats-filter-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  margin-bottom: 5px;
}

#stats-color-filters,
#stats-rarity-filters,
#stats-price-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.filter-chip {
  border-radius: 12px;
  cursor: pointer;
  background: #1f2937;
  color: #9ca3af;
  padding: 3px 10px;
  font-size: 12px;
  user-select: none;
  transition: background 0.15s, color 0.15s;
  border: 1px solid transparent;
}

.filter-chip:hover {
  background: #374151;
  color: #d1d5db;
}

.filter-chip.active {
  background: #2563eb;
  color: #fff;
  border-color: #3b82f6;
}

.color-chip {
  padding: 3px 7px;
  font-weight: 600;
  font-size: 12px;
}

.rarity-chip.rarity-common   { border-left: 3px solid #9ca3af; }
.rarity-chip.rarity-uncommon { border-left: 3px solid #a3e635; }
.rarity-chip.rarity-rare     { border-left: 3px solid #facc15; }
.rarity-chip.rarity-mythic   { border-left: 3px solid #f97316; }

#stats-breakdown {
  margin-top: 10px;
  font-size: 12px;
  color: #9ca3af;
}

.stats-breakdown-row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
  border-bottom: 1px solid #1f2937;
}

.stats-breakdown-label { color: #6b7280; }
.stats-breakdown-value { color: #d1d5db; font-weight: 500; }

/* Set Completion */
#stats-set-completion {
  margin-top: 14px;
}

#set-completion-list {
  max-height: 300px;
  overflow-y: auto;
  margin-top: 6px;
}

.set-completion-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid #1f2937;
  font-size: 12px;
}

.set-completion-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #d1d5db;
}

.set-completion-bar-wrap {
  width: 60px;
  height: 6px;
  background: #1f2937;
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}

.set-completion-bar-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.set-completion-pct {
  width: 38px;
  text-align: right;
  color: #9ca3af;
  font-weight: 600;
  flex-shrink: 0;
}

.set-completion-count {
  width: 55px;
  text-align: right;
  color: #6b7280;
  flex-shrink: 0;
  font-size: 11px;
}

/* ====================================================
   Deck builder section
   ==================================================== */
#deck-builder-section {
  flex: 2;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 10px;
  min-height: 0;
}

/* Tools header & selector dropdown */
#tools-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
#tools-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
#btn-export-cod {
  font-size: 11px;
  padding: 4px 8px;
  white-space: nowrap;
}
#tool-selector-wrap {
  position: relative;
  display: inline-block;
}
#tool-selector-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 10;
  background: #1f2937;
  border: 1px solid #374151;
  border-radius: 6px;
  padding: 4px 0;
  min-width: 160px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.tool-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 12px;
  font-size: 12px;
  color: #d1d5db;
  background: none;
  border: none;
  cursor: pointer;
}
.tool-option:hover { background: #374151; }
.tool-option.active { color: #60a5fa; }

/* Binder select row (mirrors deck-select-row) */
#binder-select-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}
#binder-select-row select { flex: 1; min-width: 0; }
#binder-select-row button { padding: 5px 10px; font-size: 12px; }

/* Binder meta */
#binder-meta {
  margin-bottom: 8px;
}
#binder-meta input {
  width: 100%;
  margin-bottom: 6px;
}
#binder-view-toggle {
  display: inline-flex;
  gap: 2px;
  margin-top: 4px;
}

/* Binder page navigation */
#binder-page-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
#binder-page-nav button { padding: 4px 8px; font-size: 12px; }
#binder-page-info {
  color: #9ca3af;
  font-size: 11px;
  flex: 1;
  text-align: center;
}

/* Binder grid view */
#binder-grid-view {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 4px;
}
.binder-slot {
  aspect-ratio: 63 / 88;
  border: 1px solid #374151;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: #1f2937;
  transition: border-color 0.15s;
}
.binder-slot-empty {
  border-style: dashed;
  color: #4b5563;
  font-size: 10px;
}
.binder-slot-filled:hover { border-color: #60a5fa; }
.binder-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
}
.binder-card-name {
  font-size: 10px;
  color: #9ca3af;
  text-align: center;
  padding: 4px;
  word-break: break-word;
}
.binder-slot-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(0,0,0,0.7);
  border: none;
  color: #f87171;
  font-size: 14px;
  cursor: pointer;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.binder-slot-filled:hover .binder-slot-remove { display: flex; }
.binder-slot-drop-hover {
  border-color: #60a5fa;
  background: rgba(37, 99, 235, 0.15);
}
.binder-slot-dragging { opacity: 0.4; }

/* Binder list view */
#binder-list-view {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.binder-list-page-header {
  font-size: 11px;
  text-transform: uppercase;
  color: #6b7280;
  padding: 6px 4px 2px;
  border-bottom: 1px solid #1f2937;
}
.binder-list-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 2px;
  border-bottom: 1px solid #1f2937;
  font-size: 12px;
}
.binder-list-pos {
  color: #6b7280;
  font-size: 10px;
  width: 30px;
  flex-shrink: 0;
}
.binder-list-name {
  flex: 1;
  color: #d1d5db;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.binder-list-name:hover { color: #93c5fd; }
.binder-arrow-btn {
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  font-size: 10px;
  padding: 1px 3px;
}
.binder-arrow-btn:hover { color: #d1d5db; }

/* Drag-and-drop feedback */
.dragging-card { opacity: 0.5; }
.drop-target-active {
  outline: 2px dashed #60a5fa;
  outline-offset: -2px;
  background: rgba(37, 99, 235, 0.05);
}

.panel-title {
  font-size: 13px;
  font-weight: 600;
  color: #d1d5db;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

#deck-select-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}

#deck-select-row select {
  flex: 1;
  min-width: 0;
}

#deck-select-row button {
  padding: 5px 10px;
  font-size: 12px;
}

#deck-meta {
  margin-bottom: 8px;
}

#deck-meta input,
#deck-meta textarea {
  width: 100%;
  margin-bottom: 6px;
  font-size: 12px;
  padding: 5px 8px;
  background: #111827;
  border: 1px solid #374151;
  border-radius: 4px;
  color: #e5e7eb;
  resize: vertical;
}

#deck-card-count {
  font-size: 11px;
  color: #6b7280;
  display: block;
}

/* Mana curve chart */
#deck-mana-curve {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 80px;
  padding: 0 0 4px 0;
  margin-bottom: 8px;
  border-bottom: 1px solid #1f2937;
}

.curve-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  height: 100%;
  justify-content: flex-end;
}

.curve-bar {
  width: 100%;
  background: #2563eb;
  border-radius: 2px 2px 0 0;
  transition: height 0.3s ease;
  min-height: 2px;
}

.curve-count {
  font-size: 9px;
  color: #9ca3af;
  text-align: center;
  margin-bottom: 2px;
  min-height: 12px;
}

.curve-label {
  font-size: 10px;
  color: #6b7280;
  margin-top: 3px;
  text-align: center;
}

/* Deck card list */
#deck-card-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.deck-card-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 2px;
  border-bottom: 1px solid #1f2937;
  font-size: 12px;
}

.deck-card-name {
  flex: 1;
  color: #d1d5db;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.deck-card-name:hover { color: #93c5fd; }

.deck-card-qty {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #9ca3af;
  flex-shrink: 0;
}

.deck-card-qty input {
  width: 36px;
  text-align: center;
  padding: 2px 4px;
  font-size: 12px;
  background: #1f2937;
  border: 1px solid #374151;
  border-radius: 3px;
  color: #e5e7eb;
}

.deck-card-qty.over-owned input {
  border-color: #ef4444;
  color: #f87171;
}

.deck-card-owned {
  font-size: 11px;
  color: #6b7280;
}

.deck-card-remove {
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  padding: 2px 4px;
  font-size: 13px;
  border-radius: 3px;
  line-height: 1;
}

.deck-card-remove:hover { color: #f87171; background: #1f2937; }

/* In-deck row highlight in card table */
#card-table-body tr.in-deck td { background: rgba(37, 99, 235, 0.08); }

/* ====================================================
   Price column
   ==================================================== */
.col-price { width: 80px; min-width: 80px; text-align: right; white-space: nowrap; }
#card-table td.col-price { color: #34d399; overflow: visible; }

/* ====================================================
   Colorless pip
   ==================================================== */
.pip-C { background: #6b7280; color: #fff; }

/* ====================================================
   "My Collection" title in stats panel
   ==================================================== */
#collection-stats-section .panel-title { margin-bottom: 8px; }

/* ====================================================
   Pane collapse bars (right edge of Stats / Deck)
   ==================================================== */
#collection-stats-section,
#deck-builder-section {
  position: relative;
}
.pane-collapse-bar {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 100%;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
}
.pane-collapse-bar::before,
.pane-collapse-bar::after {
  content: '\276E';          /* ❮ left-pointing chevron */
  font-size: 8px;
  color: #4b5563;
  transition: color 0.15s;
}
.pane-collapse-bar .collapse-arrow-mid {
  font-size: 8px;
  color: #4b5563;
  transition: color 0.15s;
}
.pane-collapse-bar:hover {
  background: #374151;
}
.pane-collapse-bar:hover::before,
.pane-collapse-bar:hover::after,
.pane-collapse-bar:hover .collapse-arrow-mid {
  color: #d1d5db;
}
.pane-collapse-bar:active {
  background: #4b5563;
}

/* Restore bar (visible when both side panes are hidden) */
#side-panel-restore {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 4px;
  border-left: 1px solid #1f2937;
  background: #111827;
  flex-shrink: 0;
}
#side-panel-restore.hidden { display: none !important; }

.restore-btn {
  writing-mode: vertical-lr;
  text-orientation: mixed;
  background: #1f2937;
  color: #9ca3af;
  border: 1px solid #374151;
  border-radius: 4px;
  padding: 8px 4px;
  font-size: 11px;
  cursor: pointer;
}
.restore-btn:hover {
  background: #374151;
  color: #d1d5db;
}

/* ====================================================
   Card Image Grid View
   ==================================================== */
#card-grid-container {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-content: flex-start;
}
#card-grid-container.hidden { display: none !important; }

.grid-tile {
  width: 146px;
  cursor: pointer;
  border-radius: 6px;
  overflow: hidden;
  background: #1f2937;
  border: 2px solid transparent;
  transition: border-color 0.15s, box-shadow 0.15s;
  position: relative;
}
.grid-tile:hover {
  border-color: #374151;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.grid-tile.selected {
  border-color: #3b82f6;
}
.grid-tile.active-viewer {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.4);
}
.grid-tile.in-deck {
  border-color: rgba(37, 99, 235, 0.4);
}

.grid-tile-img-wrap {
  position: relative;
  width: 146px;
  height: 204px;
  background: #111827;
}
.grid-tile-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.grid-tile-img-wrap .grid-checkbox {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 2;
  cursor: pointer;
  accent-color: #3b82f6;
}

.grid-tile-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
  font-size: 11px;
  color: #6b7280;
  word-break: break-word;
}

.grid-tile-name {
  padding: 4px 6px;
  font-size: 11px;
  color: #d1d5db;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.grid-empty {
  padding: 40px;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
  width: 100%;
}

/* View mode toggle buttons (list / grid) */
#view-mode-toggle {
  position: relative;
  display: inline-flex;
  gap: 2px;
  margin-left: 8px;
}
#view-mode-toggle.hidden { display: none !important; }

.view-mode-btn {
  background: #1f2937;
  color: #6b7280;
  border: 1px solid #374151;
  padding: 4px 8px;
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
}
.view-mode-btn:first-child { border-radius: 4px 0 0 4px; }
.view-mode-btn:last-child { border-radius: 0 4px 4px 0; }
.view-mode-btn.active {
  background: #374151;
  color: #d1d5db;
}
.view-mode-btn:hover {
  background: #374151;
  color: #d1d5db;
}

/* ====================================================
   Deck card detail line (type / rarity / set)
   ==================================================== */
.deck-card-info   { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.deck-card-detail { font-size: 10px; color: #6b7280; white-space: nowrap; overflow: hidden;
                    text-overflow: ellipsis; margin-top: 1px; }
.deck-card-type   { color: #9ca3af; }

/* Ensure .deck-card-name no longer needs flex:1 since it is inside .deck-card-info */
.deck-card-info .deck-card-name { flex: none; }

/* ====================================================
   Deck pie charts
   ==================================================== */
#deck-pie-charts {
  display: flex;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #1f2937;
  margin-bottom: 6px;
  justify-content: space-around;
  flex-shrink: 0;
}

.pie-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pie-label {
  font-size: 10px;
  color: #6b7280;
  margin-top: 3px;
  text-align: center;
}

.pie-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 6px;
  margin-top: 4px;
  max-width: 120px;
}
.pie-legend-item {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  color: #9ca3af;
  white-space: nowrap;
}
.pie-legend-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

#pie-tooltip {
  position: fixed;
  background: #1f2937;
  border: 1px solid #374151;
  color: #e5e7eb;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  pointer-events: none;
  display: none;
  z-index: 100;
  white-space: nowrap;
}

/* ====================================================
   Card legality grid
   ==================================================== */
#card-legality { display: flex; flex-wrap: wrap; gap: 3px; margin: 8px 0; }
.legality-chip { font-size: 9px; padding: 2px 5px; border-radius: 3px; text-transform: capitalize; white-space: nowrap; }
.legality-legal      { background: #166534; color: #bbf7d0; }
.legality-not_legal  { background: #1f2937; color: #4b5563; }
.legality-restricted { background: #78350f; color: #fde68a; }
.legality-banned     { background: #7f1d1d; color: #fca5a5; }

/* ====================================================
   Deck format tags
   ==================================================== */
#deck-format-row   { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0; flex-wrap: wrap; }
.deck-format-label { font-size: 10px; color: #6b7280; padding-top: 3px; white-space: nowrap; }
#deck-format-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.format-chip       { font-size: 10px; padding: 2px 7px; border-radius: 10px; cursor: pointer;
                     background: #1f2937; color: #6b7280; border: 1px solid #374151;
                     transition: background 0.1s, color 0.1s; }
.format-chip.active       { background: #1d4ed8; color: #fff; border-color: #3b82f6; }
.format-chip:hover        { background: #374151; color: #e5e7eb; }
.format-chip.active:hover { background: #2563eb; }

/* ====================================================
   Illegal card highlight in deck list
   ==================================================== */
.deck-card-illegal { border-left: 3px solid #ef4444; }
.deck-card-illegal .deck-card-name { color: #f87171; }

/* ====================================================
   Scrollbar styling
   ==================================================== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #111827; }
::-webkit-scrollbar-thumb { background: #374151; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #4b5563; }

/* ====================================================
   Export dropdown
   ==================================================== */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #1f2937;
  border: 1px solid #374151;
  border-radius: 4px;
  z-index: 300;
  min-width: 160px;
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
  margin-top: 2px;
}
.dropdown-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 14px;
  background: none;
  border: none;
  color: #e5e7eb;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.dropdown-menu button:hover { background: #374151; }

/* ====================================================
   ABOUT PAGE
   ==================================================== */
#about-page {
  min-height: 100vh;
  background: #111429;
  color: #d4d4d8;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

#about-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 32px;
  height: 52px;
  background: #111827;
  border-bottom: 1px solid #1f2937;
}

#about-header img {
  height: 28px;
  width: auto;
}

#about-back {
  color: #60a5fa;
  text-decoration: none;
  font-size: 13px;
  margin-left: 8px;
}

#about-back:hover { text-decoration: underline; }

#about-main {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 32px 64px;
}

.about-section { margin-bottom: 52px; }

.about-section h1 {
  font-size: 28px;
  font-weight: 700;
  color: #f9fafb;
  margin: 0 0 16px;
}

.about-section h2 {
  font-size: 18px;
  font-weight: 600;
  color: #e5e7eb;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #1f2937;
}

.about-section p {
  font-size: 14px;
  line-height: 1.75;
  color: #d1d5db;
  margin: 0 0 12px;
}

.about-section ul {
  font-size: 14px;
  line-height: 1.75;
  color: #d1d5db;
  margin: 0 0 12px;
  padding-left: 22px;
}

.about-section li { margin-bottom: 8px; }

.about-section a { color: #60a5fa; }
.about-section a:hover { text-decoration: underline; }

.about-section code {
  font-family: 'Consolas', 'Menlo', monospace;
  font-size: 12px;
  background: #1f2937;
  color: #93c5fd;
  padding: 1px 5px;
  border-radius: 3px;
}

.about-disclaimer {
  background: #131d2e;
  border: 1px solid #2d3e5a;
  border-left: 3px solid #3b82f6;
  border-radius: 6px;
  padding: 16px 20px;
  line-height: 1.7;
}

.about-disclaimer p {
  margin: 0 0 10px;
  color: #9ca3af;
  font-size: 13px;
}

.about-disclaimer p:last-child { margin-bottom: 0; }

.about-disclaimer a { color: #60a5fa; }
.about-disclaimer a:hover { text-decoration: underline; }

#about-footer {
  text-align: center;
  padding: 24px 32px;
  font-size: 12px;
  color: #4b5563;
  border-top: 1px solid #1f2937;
  line-height: 1.6;
}

#about-footer a { color: #4b5563; }
#about-footer a:hover { color: #9ca3af; }

/* ====================================================
   RELEASE NOTES PAGE
   ==================================================== */
.release-header { margin-bottom: 48px; }

.release-header h1 {
  font-size: 28px;
  font-weight: 700;
  color: #f9fafb;
  margin: 0 0 8px;
}

.release-header p {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

.release-version {
  margin-bottom: 48px;
}

.release-version h2 {
  font-size: 22px;
  font-weight: 700;
  color: #f9fafb;
  margin: 0 0 4px;
  padding-bottom: 0;
  border-bottom: none;
}

.release-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: #22c55e;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 4px;
  padding: 2px 8px;
  vertical-align: middle;
  margin-left: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.release-subtitle {
  font-size: 14px;
  color: #9ca3af;
  font-style: italic;
  margin: 0 0 12px;
}

.release-version > p {
  font-size: 14px;
  line-height: 1.75;
  color: #d1d5db;
  margin: 0 0 20px;
}

.release-section {
  margin-bottom: 28px;
}

.release-section h3 {
  font-size: 15px;
  font-weight: 600;
  color: #e5e7eb;
  margin: 0 0 8px;
}

.release-section ul {
  font-size: 14px;
  line-height: 1.75;
  color: #d1d5db;
  margin: 0 0 8px;
  padding-left: 22px;
}

.release-section li { margin-bottom: 4px; }

.release-section p {
  font-size: 14px;
  line-height: 1.75;
  color: #d1d5db;
  margin: 0 0 8px;
}

.release-note {
  background: #131d2e;
  border: 1px solid #2d3e5a;
  border-left: 3px solid #f59e0b;
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 13px;
  color: #d1d5db;
  line-height: 1.7;
  margin: 8px 0 0;
}

.release-divider {
  border: none;
  border-top: 1px solid #1f2937;
  margin: 48px 0;
}

/* ====================================================
   APP FOOTER (persistent, bottom of #app)
   ==================================================== */
#app-footer {
  flex-shrink: 0;
  padding: 5px 16px;
  font-size: 10px;
  color: #374151;
  border-top: 1px solid #1a2236;
  text-align: center;
  background: #0d1117;
  line-height: 1.5;
}
#app-footer a { color: #374151; text-decoration: none; }
#app-footer a:hover { color: #6b7280; text-decoration: underline; }

/* ====================================================
   ABOUT OVERLAY (full-screen, in-app)
   ==================================================== */
#about-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #111429;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  color: #d4d4d8;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
#about-overlay.hidden { display: none; }

#about-overlay-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 32px;
  height: 52px;
  background: #111827;
  border-bottom: 1px solid #1f2937;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 10;
}
#about-overlay-logo { height: 28px; width: auto; }
#about-overlay-close {
  background: none;
  border: 1px solid #374151;
  color: #60a5fa;
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
#about-overlay-close:hover { background: #1f2937; border-color: #60a5fa; }

#about-overlay-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 32px 64px;
  width: 100%;
  box-sizing: border-box;
  flex: 1;
}

#about-overlay-footer {
  text-align: center;
  padding: 24px 32px;
  font-size: 12px;
  color: #4b5563;
  border-top: 1px solid #1f2937;
  line-height: 1.6;
  flex-shrink: 0;
}
#about-overlay-footer a { color: #4b5563; text-decoration: none; }
#about-overlay-footer a:hover { color: #9ca3af; }
.about-footer-support { color: #FF424D !important; }
.about-footer-support:hover { color: #ff6b73 !important; }

/* About overlay — Support Wizbook section */
#about-patreon-btn {
  display: inline-block;
  background: #FF424D;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 32px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s, transform 0.15s;
  box-shadow: 0 4px 16px rgba(255, 66, 77, 0.3);
}
#about-patreon-btn:hover {
  background: #e63946;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 66, 77, 0.4);
  text-decoration: none;
}

/* card-attribution link */
#card-attribution a { color: #4b5563; }
#card-attribution a:hover { color: #6b7280; }

/* Beta tag badge */
.beta-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 1px 5px;
  border-radius: 3px;
  background: #92400e;
  color: #fde68a;
  vertical-align: middle;
  margin-left: 2px;
  line-height: 1.4;
}

/* ====================================================
   CAMERA SCAN OVERLAY
   ==================================================== */
#scan-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #0d1117;
  display: flex;
  flex-direction: column;
  color: #d4d4d8;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
#scan-overlay.hidden { display: none; }

#scan-overlay-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  height: 48px;
  background: #111827;
  border-bottom: 1px solid #1f2937;
  flex-shrink: 0;
  z-index: 10;
}

#scan-overlay-close {
  background: none;
  border: 1px solid #374151;
  color: #60a5fa;
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
#scan-overlay-close:hover { background: #1f2937; border-color: #60a5fa; }

#scan-mode-toggle {
  display: flex;
  border: 1px solid #374151;
  border-radius: 4px;
  overflow: hidden;
}
.scan-mode-btn {
  padding: 4px 14px;
  font-size: 12px;
  background: #1f2937;
  color: #9ca3af;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.scan-mode-btn.active { background: #2563eb; color: #fff; }
.scan-mode-btn:hover:not(.active) { background: #374151; color: #e5e7eb; }

#scan-camera-select {
  background: #1f2937;
  color: #d1d5db;
  border: 1px solid #374151;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 12px;
  max-width: 180px;
  cursor: pointer;
}
#scan-camera-select:focus { outline: 1px solid #60a5fa; border-color: #60a5fa; }

#scan-status-text { flex: 1; text-align: right; font-size: 12px; }
#scan-status-banner { display: none; }

#scan-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

#scan-viewport {
  position: relative;
  flex: 1;
  min-height: 200px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#scan-video { width: 100%; height: 100%; object-fit: contain; }

#scan-card-guide {
  position: absolute;
  /* left/top/width/height set dynamically by updateCardGuide() */
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#scan-contour-canvas {
  display: none; /* No longer used — presence feedback is via outline glow */
}

#scan-card-outline {
  /* Dimensions set dynamically by updateCardGuide() in camera.js.
     CSS fallback before JS runs: */
  width: 55%;
  aspect-ratio: 5 / 7;
  max-width: 400px;
  border: 2px solid rgba(59, 130, 246, 0.7);
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.05);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
  flex-shrink: 0;
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}

#scan-card-outline.card-detected {
  border-color: rgba(34, 197, 94, 0.8);
  background: rgba(34, 197, 94, 0.05);
}

#scan-card-outline.contour-detected {
  border: 2.5px solid rgba(34, 197, 94, 0.9);
  background: rgba(34, 197, 94, 0.06);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45),
              0 0 12px 2px rgba(34, 197, 94, 0.4);
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}

#scan-card-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  margin-top: 8px;
}

#scan-manual-controls {
  display: flex;
  justify-content: center;
  padding: 12px;
  background: #111827;
  border-top: 1px solid #1f2937;
  flex-shrink: 0;
}

#scan-capture-btn { padding: 12px 40px; font-size: 15px; border-radius: 28px; }

#scan-candidates {
  flex-shrink: 0;
  max-height: 40vh;
  overflow-y: auto;
  background: #111827;
  border-top: 1px solid #1f2937;
}

#scan-candidates-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 13px;
  color: #9ca3af;
  border-bottom: 1px solid #1f2937;
}

#scan-candidates-list { list-style: none; margin: 0; padding: 0; }

#scan-candidates-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid #1a1f2e;
  transition: background 0.1s;
  font-size: 13px;
  color: #d1d5db;
}
#scan-candidates-list li:hover { background: #1f2937; }

.candidate-name { font-weight: 600; }
.candidate-set  { font-size: 11px; color: #6b7280; margin-left: 8px; }
.candidate-price { font-size: 12px; color: #34d399; margin-left: auto; padding-left: 12px; }

#scan-log {
  flex-shrink: 0;
  height: 25vh;
  min-height: 80px;
  max-height: 200px;
  overflow-y: auto;
  background: #0d1117;
  border-top: 1px solid #1f2937;
  display: flex;
  flex-direction: column;
}

#scan-log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 12px;
  color: #6b7280;
  position: sticky;
  top: 0;
  background: #0d1117;
  z-index: 1;
  flex-shrink: 0;
}

#scan-log-count {
  font-weight: 600;
  color: #60a5fa;
}

#scan-log-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  overflow-y: auto;
}

#scan-log-list li {
  padding: 6px 12px;
  border-bottom: 1px solid #1a1f2e;
  font-size: 12px;
  color: #9ca3af;
  display: flex;
  align-items: center;
  gap: 8px;
}

.scan-log-check { color: #34d399; }

.scan-log-remove {
  margin-left: auto;
  background: none;
  border: none;
  color: #6b7280;
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.scan-log-remove:hover { color: #ef4444; }

/* Scan debug panel */
#scan-debug {
  flex-shrink: 0;
  background: #0b0e14;
  border-top: 1px solid #f59e0b;
  border-bottom: 1px solid #1f2937;
  max-height: 40vh;
  overflow-y: auto;
}
#scan-debug.hidden { display: none; }
#scan-debug-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  color: #f59e0b;
  background: #0b0e14;
  position: sticky;
  top: 0;
  z-index: 1;
}
#scan-debug-toggle {
  background: none; border: none; color: #6b7280; cursor: pointer;
  font-size: 16px; line-height: 1; padding: 0 4px;
}
#scan-debug-toggle:hover { color: #e5e7eb; }
#scan-debug-body { padding: 4px 12px 8px; }
.scan-debug-row {
  display: flex;
  gap: 8px;
  padding: 3px 0;
  font-size: 11px;
  line-height: 1.4;
  border-bottom: 1px solid #111827;
}
.scan-debug-label {
  color: #6b7280;
  min-width: 80px;
  flex-shrink: 0;
  white-space: nowrap;
}
.scan-debug-value {
  color: #d1d5db;
  word-break: break-all;
  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
}
#scan-debug-btn {
  font-size: 11px;
  padding: 2px 8px;
}
#scan-debug-btn.active { background: #92400e; color: #fde68a; border-color: #f59e0b; }
.scan-debug-preview {
  padding: 4px 0;
  font-size: 11px;
  border-bottom: 1px solid #111827;
}
.scan-debug-preview .scan-debug-label {
  display: block;
  margin-bottom: 2px;
}

/* OCR loading indicator */
#scan-ocr-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #111827;
  border-top: 1px solid #1f2937;
  font-size: 12px;
  color: #60a5fa;
  flex-shrink: 0;
}
#scan-ocr-loading.hidden { display: none; }
.scan-ocr-loading-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid #374151;
  border-top-color: #60a5fa;
  border-radius: 50%;
  animation: ocr-spin 0.8s linear infinite;
}
@keyframes ocr-spin { to { transform: rotate(360deg); } }

/* Dual matcher agreement badge */
.candidate-agreed {
  color: #34d399;
  font-size: 11px;
  margin-left: 4px;
}

#scan-overlay-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: #111827;
  border-top: 1px solid #1f2937;
  flex-shrink: 0;
}

#scan-commit-btn { padding: 8px 20px; }

@media (max-width: 768px) {
  #patreon-popup {
    bottom: 12px;
    right: 12px;
    left: 12px;
    max-width: none;
    width: auto;
  }
  /* Header: wrap into rows, bigger touch targets */
  #scan-overlay-header {
    flex-wrap: wrap;
    height: auto;
    padding: 8px 10px;
    gap: 6px;
  }
  #scan-overlay-close {
    font-size: 14px;
    padding: 8px 14px;
    min-height: 40px;
  }
  .scan-mode-btn {
    font-size: 13px;
    padding: 8px 16px;
    min-height: 40px;
  }
  #scan-camera-select {
    font-size: 13px;
    padding: 6px 10px;
    min-height: 40px;
    flex: 1;
    max-width: none;
  }
  #scan-debug-btn {
    font-size: 12px;
    padding: 6px 12px;
    min-height: 40px;
  }
  /* Hide status text from header, show as separate banner instead */
  #scan-status-text { display: none; }
  #scan-status-banner {
    display: flex;
    align-items: center;
    padding: 4px 12px;
    background: #1e293b;
    border-bottom: 1px solid #334155;
    font-size: 12px;
    color: #9ca3af;
    flex-shrink: 0;
    min-height: 24px;
  }
  #scan-status-banner-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Video: crop sides of landscape camera so it fills viewport vertically */
  #scan-video { object-fit: cover; }

  /* Footer: bigger commit button */
  #scan-commit-btn {
    padding: 10px 24px;
    font-size: 14px;
    min-height: 44px;
  }
  #scan-overlay-footer { padding: 10px 12px; }

  /* Capture button: bigger tap target */
  #scan-capture-btn {
    padding: 14px 48px;
    font-size: 16px;
    min-height: 48px;
  }

  /* Candidates list: bigger tap targets */
  #scan-candidates-list li {
    padding: 12px;
    min-height: 44px;
    font-size: 14px;
  }

  /* Body: scrollable for debug/candidates below viewport */
  #scan-body { overflow-y: auto; }

  /* Viewport: cap height so candidates aren't pushed off-screen */
  #scan-viewport {
    flex: none;
    height: 50vh;
    min-height: 180px;
  }

  #scan-candidates { max-height: none; }

  /* Scan log: smaller on mobile */
  #scan-log { height: 12vh; min-height: 50px; max-height: 100px; }
}

/* ====================================================
   LANDING PAGE
   ==================================================== */
#landing-body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #0d1117;
  color: #d4d4d8;
  overflow-x: hidden;
  overflow-y: auto;   /* override global body { overflow: hidden } */
  height: auto;
}

/* Nav */
#landing-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  height: 50px;
  background: rgba(13, 17, 23, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
#landing-nav-wordmark {
  font-size: 15px;
  font-weight: 700;
  color: #e5e7eb;
  letter-spacing: 0.3px;
}
#landing-nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
}
#landing-nav-links a {
  color: #6b7280;
  text-decoration: none;
  font-size: 13px;
  transition: color 0.15s;
}
#landing-nav-links a:hover { color: #d1d5db; }
.landing-nav-cta {
  color: #93c5fd !important;
  border: 1px solid #1e3a5f;
  border-radius: 5px;
  padding: 4px 12px;
}
.landing-nav-cta:hover { background: rgba(37,99,235,0.15); color: #bfdbfe !important; }

/* Hero */
#landing-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: 50px;
  background: linear-gradient(135deg, #0d1117 0%, #111429 40%, #0f172a 70%, #0d1117 100%);
  background-size: 300% 300%;
  animation: hero-gradient 14s ease infinite;
}
@keyframes hero-gradient {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

#landing-hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 56px 24px 52px;
  max-width: 620px;
  animation: hero-rise 0.9s ease both;
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

#landing-logo {
  width: min(240px, 56vw);
  height: auto;
  display: block;
  margin: 0 auto 28px;
  animation: logo-float 7s ease-in-out infinite;
  filter: drop-shadow(0 0 28px rgba(96,165,250,0.25));
}
@keyframes logo-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

#landing-wordmark {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #3b82f6;
  margin: 0 0 12px;
}

#landing-headline {
  font-size: clamp(28px, 5.5vw, 48px);
  font-weight: 800;
  color: #f9fafb;
  letter-spacing: -0.5px;
  line-height: 1.18;
  margin: 0 0 18px;
}

#landing-sub {
  font-size: 16px;
  color: #9ca3af;
  line-height: 1.75;
  margin: 0 0 34px;
}

#landing-cta {
  display: inline-block;
  background: #2563eb;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 13px 34px;
  border-radius: 8px;
  text-decoration: none;
  letter-spacing: 0.2px;
  animation: cta-pulse 3.5s ease-in-out infinite;
  transition: background 0.15s, transform 0.15s;
}
#landing-cta:hover {
  background: #1d4ed8;
  transform: translateY(-2px);
  animation: none;
}
@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,99,235,0.45); }
  50%       { box-shadow: 0 0 0 14px rgba(37,99,235,0); }
}

/* Decorative orbs */
.landing-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.18;
  pointer-events: none;
}
.landing-orb-1 {
  width: 500px; height: 500px;
  background: #2563eb;
  top: -120px; right: -100px;
  animation: orb-drift 18s ease-in-out infinite alternate;
}
.landing-orb-2 {
  width: 380px; height: 380px;
  background: #7c3aed;
  bottom: -80px; left: -80px;
  animation: orb-drift 22s ease-in-out infinite alternate-reverse;
}
.landing-orb-3 {
  width: 260px; height: 260px;
  background: #0ea5e9;
  top: 40%; left: 30%;
  animation: orb-drift 14s ease-in-out infinite alternate;
}
@keyframes orb-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(40px, 30px) scale(1.1); }
}

/* Shared section layout */
.landing-section {
  max-width: 860px;
  margin: 0 auto;
  padding: 72px 32px;
}
.landing-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #3b82f6;
  margin: 0 0 12px;
}
.landing-section-heading {
  font-size: clamp(20px, 3.5vw, 30px);
  font-weight: 700;
  color: #f9fafb;
  margin: 0 0 24px;
  line-height: 1.25;
}

/* Showcase sections (alternating text + image) */
.landing-showcase {
  border-bottom: 1px solid #1a2236;
}
.landing-showcase {
  background: #0d1117;
}
.landing-showcase-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 32px;
}
.showcase-reverse .landing-showcase-inner {
  grid-template-columns: 1fr 1fr;
}
.showcase-reverse .landing-showcase-text { order: 2; }
.showcase-reverse .landing-showcase-img  { order: 1; }

.landing-showcase-text p {
  font-size: 15px;
  color: #9ca3af;
  line-height: 1.8;
  margin: 0 0 14px;
}
.landing-showcase-text p:last-child { margin-bottom: 0; }

.landing-showcase-img img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid #1f2937;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.landing-showcase-img img:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(59, 130, 246, 0.15);
}

/* Showcase entrance animation */
.landing-showcase-inner {
  opacity: 0;
  transform: translateY(32px);
  animation: showcase-appear 0.7s ease forwards;
}
.landing-showcase:first-of-type .landing-showcase-inner { animation-delay: 0s; }
.landing-showcase:last-of-type .landing-showcase-inner { animation-delay: 0.1s; }
@keyframes showcase-appear {
  to { opacity: 1; transform: translateY(0); }
}

/* Responsive: stack on narrow screens */
@media (max-width: 768px) {
  .landing-showcase-inner,
  .showcase-reverse .landing-showcase-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 56px 20px;
  }
  .showcase-reverse .landing-showcase-text { order: 1; }
  .showcase-reverse .landing-showcase-img  { order: 2; }
}

/* Features list */
#landing-features-list {
  background: #080c12;
  border-bottom: 1px solid #1a2236;
}

#landing-feature-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: #1a2236;
  border: 1px solid #1a2236;
  border-radius: 10px;
  overflow: hidden;
}
#landing-feature-items li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 22px 24px;
  background: #0d1117;
  transition: background 0.15s;
}
#landing-feature-items li:hover { background: #0f1520; }

.lfi-icon {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1.4;
  margin-top: 1px;
}
.lfi-text {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.65;
}
.lfi-text strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #e5e7eb;
  margin-bottom: 4px;
}

/* Nav Patreon link */
.landing-nav-discord {
  color: #5865F2 !important;
  font-weight: 600;
}
.landing-nav-discord:hover { color: #7983f5 !important; }
.landing-nav-patreon {
  color: #FF424D !important;
  font-weight: 600;
}
.landing-nav-patreon:hover { color: #ff6b73 !important; }

/* Support / Patreon section */
#landing-support {
  padding: 80px 32px;
  background: #0d1117;
  border-top: 1px solid #1a2236;
  border-bottom: 1px solid #1a2236;
}
#landing-support-inner {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  background: linear-gradient(135deg, #1a1025 0%, #14101f 40%, #111429 100%);
  border: 1px solid #2d1f3e;
  border-radius: 16px;
  padding: 48px 40px;
  box-shadow: 0 0 60px rgba(255, 66, 77, 0.06), 0 8px 32px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
}
#landing-support-inner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #FF424D, transparent);
  border-radius: 16px 16px 0 0;
}
#landing-support-icon {
  margin-bottom: 20px;
  animation: heart-beat 2s ease-in-out infinite;
}
@keyframes heart-beat {
  0%, 100% { transform: scale(1); }
  14%      { transform: scale(1.15); }
  28%      { transform: scale(1); }
  42%      { transform: scale(1.1); }
  56%      { transform: scale(1); }
}
#landing-support-heading {
  font-size: 24px;
  font-weight: 700;
  color: #f9fafb;
  margin: 0 0 16px;
}
#landing-support-text {
  font-size: 14px;
  color: #9ca3af;
  line-height: 1.8;
  margin: 0 0 28px;
}
#landing-patreon-btn {
  display: inline-block;
  background: #FF424D;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 32px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 16px rgba(255, 66, 77, 0.3);
}
#landing-patreon-btn:hover {
  background: #e63946;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 66, 77, 0.4);
}

/* What's New (latest release notes) */
#landing-whats-new {
  padding: 40px 32px;
  background: #0d1117;
  border-top: 1px solid #1f2937;
}
#landing-whats-new .landing-section {
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
}
#landing-whats-new .landing-section-heading {
  margin-bottom: 0;
}
#landing-release-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#landing-release-list li {
  font-size: 13px;
  color: #9ca3af;
  line-height: 1.45;
  padding-left: 14px;
  position: relative;
}
#landing-release-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #3b82f6;
}
#landing-release-list li strong {
  color: #e5e7eb;
}
#landing-release-link {
  font-size: 13px;
  color: #3b82f6;
  text-decoration: none;
  font-weight: 600;
}
#landing-release-link:hover {
  text-decoration: underline;
}

/* =========================================================
   What You Can Do — capabilities list
   ========================================================= */
#landing-capabilities {
  background: #080c12;
  border-bottom: 1px solid #1a2236;
}
#landing-capabilities .landing-section {
  padding-top: 56px;
  padding-bottom: 56px;
}
#landing-cap-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
#landing-cap-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #111827;
  border: 1px solid #1f2937;
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 14px;
  color: #d1d5db;
  transition: border-color 0.2s, background 0.2s;
}
#landing-cap-list li:hover {
  border-color: #3b82f6;
  background: #0f172a;
}
.cap-icon {
  flex-shrink: 0;
  color: #3b82f6;
  display: flex;
  align-items: center;
}

/* =========================================================
   Get Started in 3 Steps
   ========================================================= */
#landing-steps {
  background: #0d1117;
  border-bottom: 1px solid #1a2236;
}
#landing-steps .landing-section {
  padding-top: 64px;
  padding-bottom: 64px;
  text-align: center;
}
#landing-steps-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  margin-top: 32px;
}
.landing-step {
  flex: 0 1 220px;
  text-align: center;
}
.landing-step-num {
  width: 44px;
  height: 44px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background: #2563eb;
  border-radius: 50%;
}
.landing-step h3 {
  font-size: 16px;
  font-weight: 700;
  color: #f9fafb;
  margin: 0 0 8px;
}
.landing-step p {
  font-size: 13px;
  color: #9ca3af;
  line-height: 1.6;
  margin: 0;
}
.landing-step-arrow {
  color: #374151;
  font-size: 36px;
  padding-top: 6px;
  flex-shrink: 0;
  user-select: none;
}
@media (max-width: 600px) {
  .landing-section { padding: 36px 20px; }
  #landing-hero-inner { padding: 32px 20px 28px; }
  #landing-steps .landing-section { padding-top: 32px; padding-bottom: 32px; }
  #landing-steps-row {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 20px;
  }
  .landing-step { flex-basis: auto; }
  .landing-step-num { width: 36px; height: 36px; font-size: 16px; margin-bottom: 10px; }
  .landing-step h3 { font-size: 14px; margin-bottom: 4px; }
  .landing-step p { font-size: 12px; line-height: 1.4; }
  .landing-step-arrow {
    transform: rotate(90deg);
    padding-top: 0;
    font-size: 20px;
    line-height: 1;
  }
  #landing-cta-bottom { padding: 36px 20px 48px; }
}

/* =========================================================
   Tools Grid — feature cards
   ========================================================= */
#landing-tools {
  background: #080c12;
  border-bottom: 1px solid #1a2236;
}
#landing-tools .landing-section {
  max-width: 960px;
  padding-top: 72px;
  padding-bottom: 72px;
}
#landing-tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #1a2236;
  border: 1px solid #1a2236;
  border-radius: 12px;
  overflow: hidden;
}
.tool-card {
  background: #0d1117;
  padding: 28px 24px;
  transition: background 0.2s;
}
.tool-card:hover {
  background: #0f1520;
}
.tool-card-icon {
  color: #3b82f6;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
}
.tool-card h3 {
  font-size: 15px;
  font-weight: 700;
  color: #e5e7eb;
  margin: 0 0 8px;
}
.tool-card p {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 768px) {
  #landing-tools-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  #landing-tools-grid {
    grid-template-columns: 1fr;
  }
}

/* Bottom CTA section */
#landing-cta-bottom {
  text-align: center;
  padding: 64px 32px 80px;
  background: linear-gradient(180deg, #0d1117 0%, #111429 100%);
  border-top: 1px solid #1f2937;
}
#landing-cta-heading {
  font-size: clamp(20px, 3.5vw, 32px);
  font-weight: 700;
  color: #f9fafb;
  margin: 0 0 10px;
}
#landing-cta-sub {
  font-size: 14px;
  color: #6b7280;
  margin: 0 0 28px;
}
.landing-cta-btn {
  display: inline-block;
  background: #2563eb;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 32px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s, transform 0.15s;
}
.landing-cta-btn:hover {
  background: #1d4ed8;
  transform: translateY(-2px);
}

/* Landing footer */
#landing-footer {
  padding: 36px 32px;
  background: #080c12;
  border-top: 1px solid #1a2236;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
#landing-footer-disclaimer {
  font-size: 11px;
  color: #374151;
  max-width: 700px;
  line-height: 1.7;
}
#landing-footer-attribution {
  font-size: 11px;
  color: #374151;
}
#landing-footer-links {
  font-size: 11px;
  color: #374151;
  margin-top: 6px;
}
#landing-footer a { color: #4b5563; text-decoration: none; }
#landing-footer a:hover { color: #9ca3af; }

/* Landing hamburger — hidden on desktop */
#landing-menu-btn { display: none; }

/* Landing page mobile */
@media (max-width: 768px) {
  #landing-nav { padding: 0 16px; position: relative; }

  #landing-menu-btn {
    display: block;
    background: none;
    border: none;
    color: #d1d5db;
    font-size: 22px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
  }

  #landing-nav-links {
    display: none;
    position: absolute;
    top: 50px;
    right: 0;
    left: 0;
    flex-direction: column;
    background: rgba(13, 17, 23, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 12px 0;
    gap: 0;
  }
  #landing-nav-links.open { display: flex; }

  #landing-nav-links a {
    padding: 12px 24px;
    font-size: 14px;
  }
  #landing-nav-links a:hover { background: rgba(255,255,255,0.05); }
}

/* ====================================================================
   MOBILE RESPONSIVE LAYOUT
   Everything below is gated behind max-width: 768px.
   Desktop layout is completely untouched.
   ==================================================================== */

/* --- Elements hidden on desktop --- */
#mobile-menu-btn,
#mobile-tab-bar,
#mobile-menu,
#mobile-deck-banner,
#btn-mobile-discord,
#btn-mobile-support,
#btn-mobile-collection,
#card-viewer-close { display: none; }

@media (max-width: 768px) {

  /* ==== BASE LAYOUT ==== */
  #main-layout {
    flex-direction: column;
    padding-bottom: 56px;  /* room for tab bar */
  }
  #left-panel, #right-panel {
    width: 100% !important;
    min-width: 0 !important;
  }
  .resize-bar { display: none !important; }
  #app-footer { display: none; }

  /* Default mobile state: show right-panel (cards), hide left-panel */
  #left-panel { display: none; }
  #right-panel { display: flex; flex: 1; }
  #collection-side-panel { display: none !important; }
  #side-panel-restore { display: none !important; }
  #view-mode-toggle { display: none !important; }
  .pane-collapse-bar { display: none !important; }
  .col-finish, .col-notes, .col-in-deck, .col-in-binder { display: none !important; }

  /* ==== HEADER ==== */
  #app-header {
    padding: 0 8px;
    gap: 6px;
  }
  #logo { font-size: 16px; }
  #header-controls { display: none !important; }
  #about-link, #support-link, #discord-link, #features-link { display: none; }

  /* Discord + Support + Collection + Save buttons visible on mobile, pushed to far right */
  #btn-mobile-discord {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    color: #5865F2;
    font-size: 16px;
    text-decoration: none;
    flex-shrink: 0;
  }
  #btn-mobile-support {
    display: inline-flex;
    align-items: center;
    color: #FF424D;
    font-size: 16px;
    text-decoration: none;
    flex-shrink: 0;
  }
  #btn-mobile-collection {
    display: inline-block;
  }
  #btn-mobile-collection.active {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
  }
  #btn-save { margin-left: 0; }

  /* Mobile menu discord + support items */
  .mobile-menu-discord { color: #5865F2 !important; }
  .mobile-menu-support { color: #FF424D !important; }

  /* Deck Simulator mobile */
  .sim-checkbox-list { max-height: 100px; }
  #mobile-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid #374151;
    color: #d1d5db;
    font-size: 18px;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
  }
  #mobile-menu-btn:active { background: #1f2937; }
  #header-info { display: none; }

  /* ==== MOBILE COLLECTION BANNER ==== */
  #mobile-deck-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 12px;
    background: #1e293b;
    border-bottom: 1px solid #334155;
    font-size: 12px;
    flex-shrink: 0;
    gap: 8px;
  }
  #mobile-deck-banner.hidden { display: none; }
  #mobile-collection-info {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
  }
  #mobile-collection-name {
    color: #e5e7eb;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #mobile-collection-count {
    color: #6b7280;
    white-space: nowrap;
    font-size: 11px;
  }
  #mobile-deck-info {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
  }
  #mobile-deck-label {
    color: #94a3b8;
    white-space: nowrap;
  }
  #mobile-deck-name {
    color: #60a5fa;
    font-weight: 600;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ==== MOBILE HAMBURGER MENU ==== */
  #mobile-menu {
    position: fixed;
    top: 48px;
    left: 0;
    right: 0;
    background: #1f2937;
    border-bottom: 2px solid #3b82f6;
    z-index: 190;
    display: flex;
    flex-direction: column;
    padding: 4px 0;
  }
  #mobile-menu.hidden { display: none; }
  #mobile-menu button {
    background: none;
    border: none;
    color: #d1d5db;
    font-size: 14px;
    text-align: left;
    padding: 12px 16px;
    min-height: 44px;
    cursor: pointer;
  }
  #mobile-menu button:active { background: #374151; }
  .mobile-menu-sub { display: flex; flex-direction: column; background: #111827; }
  .mobile-menu-sub.hidden { display: none; }
  .mobile-menu-sub button {
    padding-left: 32px !important;
    font-size: 13px !important;
    color: #9ca3af !important;
  }

  /* ==== BOTTOM TAB BAR ==== */
  #mobile-tab-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: #111827;
    border-top: 1px solid #1f2937;
    z-index: 9999;
    justify-content: space-around;
    align-items: stretch;
    padding: 0;
  }
  .mobile-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #6b7280;
    font-size: 10px;
    padding: 0;
    gap: 2px;
    cursor: pointer;
  }
  .mobile-tab.active { color: #60a5fa; }
  .mobile-tab-icon { display: flex; align-items: center; justify-content: center; line-height: 1; pointer-events: none; }
  .mobile-tab-label { line-height: 1; pointer-events: none; }
  /* Collection-only tabs hidden by default */
  .mobile-tab-collection { display: none; }

  /* ==== VIEW SWITCHING ==== */

  /* Cards view (default) — right panel visible */
  .mobile-view-cards #left-panel { display: none; }
  .mobile-view-cards #right-panel { display: flex; flex: 1; }

  /* Search view — left panel with filters only */
  .mobile-view-search #left-panel {
    display: flex;
    flex: 1;
    width: 100%;
    flex-direction: column;
  }
  .mobile-view-search #search-filters {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    height: auto;
    border-bottom: none;
  }
  .mobile-view-search #card-viewer,
  .mobile-view-search #resize-row { display: none !important; }
  .mobile-view-search #right-panel { display: none; }

  /* Card view — left panel with card viewer only */
  .mobile-view-card #left-panel {
    display: flex;
    flex: 1;
    width: 100%;
    flex-direction: column;
  }
  .mobile-view-card #card-viewer {
    flex: 1;
    overflow-y: auto;
    position: static !important;
    transform: none !important;
    border-radius: 0;
    border-top: none;
    padding: 16px 16px 80px;
  }
  .mobile-view-card #search-filters,
  .mobile-view-card #resize-row { display: none !important; }
  .mobile-view-card #right-panel { display: none; }

  /* Stats view — keep #right-panel visible (side panel is inside it),
     hide table content, let side panel fill the space */
  .mobile-view-stats #left-panel { display: none; }
  .mobile-view-stats #right-panel { display: flex; flex: 1; }
  .mobile-view-stats #table-controls,
  .mobile-view-stats #pending-queue { display: none !important; }
  .mobile-view-stats #collection-view-body { flex-direction: column; }
  .mobile-view-stats #collection-table-area { display: none !important; }
  .mobile-view-stats #collection-side-panel {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    flex: 1;
    flex-direction: column !important;
    background: #111827;
    border-left: none;
    overflow-y: auto;
  }
  .mobile-view-stats #collection-stats-section {
    display: block;
    flex: 1;
    overflow-y: auto;
    border-right: none;
  }
  .mobile-view-stats #deck-builder-section,
  .mobile-view-stats #resize-deck-stats { display: none !important; }

  /* Deck view — same approach: keep right-panel, hide table, show deck */
  .mobile-view-deck #left-panel { display: none; }
  .mobile-view-deck #right-panel { display: flex; flex: 1; }
  .mobile-view-deck #table-controls,
  .mobile-view-deck #pending-queue { display: none !important; }
  .mobile-view-deck #collection-view-body { flex-direction: column; }
  .mobile-view-deck #collection-table-area { display: none !important; }
  .mobile-view-deck #collection-side-panel {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    flex: 1;
    flex-direction: column !important;
    background: #111827;
    border-left: none;
    overflow-y: auto;
  }
  .mobile-view-deck #deck-builder-section {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
  }
  .mobile-view-deck #collection-stats-section,
  .mobile-view-deck #resize-deck-stats { display: none !important; }

  /* ==== MOBILE CARD-ROW LAYOUT ==== */
  /* Break table out of fixed layout so block rows render properly */
  #card-table,
  #card-table tbody { display: block; width: 100%; }
  #card-table thead { display: none; }

  /* Rarity indicated by left border color */
  #card-table tbody tr { border-left: 3px solid transparent; }
  #card-table tbody tr[data-rarity="common"]   { border-left-color: #4b5563; }
  #card-table tbody tr[data-rarity="uncommon"] { border-left-color: #a3e635; }
  #card-table tbody tr[data-rarity="rare"]     { border-left-color: #facc15; }
  #card-table tbody tr[data-rarity="mythic"]   { border-left-color: #f97316; }

  /* Override base #card-table td which has max-width:0 + overflow:hidden */
  #card-table td {
    max-width: none;
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
  }

  /* Each mobile row is a block card */
  #card-table .mobile-card-row {
    display: block;
    width: 100%;
  }
  #card-table .mobile-card-row > td {
    display: block;
    padding: 8px 10px;
    border-bottom: 1px solid #1f2937;
  }

  /* Row body: thumbnail + info side by side */
  .mc-row-body {
    display: flex;
    gap: 10px;
    align-items: flex-start;
  }
  .mc-thumb {
    width: 48px;
    height: 67px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    background: #111827;
  }
  .mc-thumb-empty {
    border: 1px solid #1f2937;
  }
  .mc-info {
    flex: 1;
    min-width: 0;
  }

  /* Row 1: checkbox + name + price */
  .mc-top {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .mc-name {
    flex: 1;
    font-weight: 600;
    font-size: 14px;
    color: #f9fafb;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mc-price {
    font-size: 13px;
    color: #34d399;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Row 2: set · # · rarity */
  .mc-meta {
    font-size: 11px;
    color: #6b7280;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Row 3: type line */
  .mc-type {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Row 4: mana cost + collection badges */
  .mc-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
  }
  .mc-mana { flex: 1; }
  .mc-badges {
    display: flex;
    gap: 4px;
    align-items: center;
    font-size: 11px;
  }
  .mc-qty {
    color: #9ca3af;
    font-size: 11px;
  }

  /* ==== MOBILE GRID VIEW ==== */
  #card-grid-container { gap: 6px; padding: 8px; justify-content: center; }
  .grid-tile { width: calc(33.33% - 6px); min-width: 100px; max-width: 150px; }
  .grid-tile-img-wrap { width: 100%; height: auto; aspect-ratio: 5 / 7; }
  .grid-tile-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
  .grid-tile-name { font-size: 11px; padding: 3px 4px; }

  /* ==== CARD VIEWER (shown via Card tab) ==== */
  #card-viewer-close {
    display: block;
    background: none;
    border: 1px solid #374151;
    color: #9ca3af;
    font-size: 14px;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 12px;
  }
  #card-viewer-close:active { background: #1f2937; }
  #card-viewer-empty { display: none; }

  /* Prevent scroll areas from capturing taps behind the tab bar */
  #table-container { padding-bottom: 60px; }
  #collection-stats-section { padding-bottom: 60px; }
  #deck-builder-section { padding-bottom: 60px; }
  #card-viewer { padding-bottom: 60px; }

  /* ==== TABLE CONTROLS ==== */
  #table-controls {
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
  }
  /* Row 1: action buttons (search, refresh, add-to-deck, scan) */
  #btn-goto-search   { order: 1; }
  #btn-refresh-collection { order: 2; }
  #btn-add-to-deck   { order: 3; }
  #btn-scan           { order: 4; }
  #btn-remove-selected { order: 5; }
  /* Row 2: filter input + advanced filters */
  #subsearch          { order: 6; flex: 1; min-width: 0; max-width: none; }
  #advanced-filter-wrap { order: 7; }
  /* Row 3: hide result count here — mirrored under pagination */
  #result-count       { order: 8; display: none !important; }
  #view-mode-toggle   { order: 9; }

  /* Result count mirrored under pagination bar */
  #pagination-bar {
    flex-wrap: wrap;
    justify-content: center;
  }
  #result-count-mobile {
    width: 100%;
    text-align: center;
    font-size: 11px;
    color: #6b7280;
    padding-top: 2px;
  }

  /* ==== PENDING QUEUE ==== */
  #pending-queue {
    flex-direction: column;
    gap: 6px;
    text-align: center;
    padding: 8px;
  }
  #pending-count-text {
    white-space: normal;
    word-break: break-word;
    font-size: 12px;
  }
  #pending-actions {
    width: 100%;
    justify-content: center;
  }

  /* ==== SEARCH FILTERS (full-width tweaks) ==== */
  .mobile-view-search .filter-row {
    flex-direction: column;
    gap: 8px;
  }
  .mobile-view-search .filter-row input,
  .mobile-view-search .filter-row select {
    width: 100%;
  }
  .mobile-view-search #btn-search {
    padding: 12px;
    font-size: 15px;
    width: 100%;
  }
  .mobile-view-search #btn-clear-filters {
    width: 100%;
    padding: 10px;
  }
  .mobile-view-search .filter-row-cmc {
    flex-direction: row;
  }

  /* ==== ADVANCED FILTERS MOBILE ==== */
  #advanced-filters-popover {
    position: fixed;
    top: auto;
    left: 8px;
    right: 8px;
    max-width: none;
    min-width: 0;
    max-height: 60vh;
  }

  /* ==== DECK BUILDER MOBILE ==== */
  #deck-pie-charts { flex-wrap: wrap; justify-content: center; }
  .pie-wrap canvas { width: 70px !important; height: 70px !important; }

  /* ==== TOUCH TARGETS ==== */
  .row-checkbox { min-width: 20px; min-height: 20px; }
  #mobile-tab-bar button { min-height: 44px; }
  #mobile-menu button { min-height: 44px; }
  #btn-search, #btn-clear-filters, .btn-primary, .btn-secondary, .btn-danger {
    min-height: 38px;
  }

  /* ==== SPLASH SCREEN ==== */
  #splash-screen { overflow-y: auto; align-items: flex-start; }
  #splash-content { padding: 24px 20px; }
  #splash-logo-img { max-height: 30vh; width: auto; max-width: 100%; margin: 0 auto; }
  #splash-headline { font-size: 20px; margin-top: 12px; }
  #splash-tagline { font-size: 13px; margin-bottom: 8px; }
  #splash-support { font-size: 11px; margin-bottom: 20px; }

  /* ==== MOBILE ZOOM FIX ==== */
  input[type="text"], input[type="number"], select, textarea {
    font-size: 16px !important;
  }

  /* ==== GET STARTED MOBILE ==== */
  #table-empty-row { display: block; width: 100%; }
  #card-table .table-empty { display: block; width: 100%; text-align: center; }
  #get-started { padding: 40px 16px; max-width: 280px; margin: 0 auto; }
  .get-started-icon { width: 36px; height: 36px; }
  #get-started h3 { font-size: 15px; }
  #get-started p { font-size: 12px; }

  /* ==== TOOLTIPS MOBILE ==== */
  .help-tip-text { width: 200px; font-size: 10px; padding: 6px 8px; }
  .help-tip-text-wide { width: 240px; }
}