@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:wght@300;400;500&display=swap');

/* ── Variables ─────────────────────────────────────────── */
:root {
  --void:          #09080F;
  --surface:       #110F1E;
  --surface2:      #181627;
  --border:        rgba(127,119,221,0.15);
  --border-bright: rgba(127,119,221,0.35);
  /* #442: INPUT boundaries only. --border is rgba(...,0.15) = 1.19:1 against a
     card, which is a legitimate choice for a decorative card edge and a failure
     for a control the user has to find. WCAG 2.1 1.4.11 (Non-text Contrast)
     wants 3.0:1 for UI component boundaries, and that is a different criterion
     from the text contrast #94 fixed — which is why #94 passed and this still
     shipped invisible. Solid, not alpha, so the ratio is computable and cannot
     drift with whatever is behind it. Worst case is 3.20:1 (against an input
     fill on --surface2); every other combination is higher. */
  --border-input:  #6A61C9;
  --purple:        #7F77DD;
  --purple-deep:   #534AB7;
  --purple-dim:    #3C3489;
  --amber:         #EF9F27;
  --amber-dim:     #BA7517;
  --white:         #FFFFFF;
  --muted:         #8B87B0;
  /* #94: was #4A4670 = 2.03:1 on --surface2, far under WCAG AA's 4.5 for body
     text — and it is the colour of .hint, which appears 81 times across the
     templates, plus .char-count and pricing hints. Raised to the first value on
     the same hue that clears 4.6 on EVERY background (void 5.22, surface 4.95,
     surface2 4.64) while still reading dimmer than --muted. */
  --dimmer:        #827DAE;
  --midnight:      #26215C;
  --gold:          #EF9F27;   /* alias — keeps existing references working */
  --navy:          #110F1E;   /* alias */
  --cream:         #FFFFFF;   /* alias */
  --rust:          #7F77DD;   /* alias */
  --gray:          #8B87B0;   /* alias */
  --light:         #181627;   /* alias */
  --sidebar-w:     220px;
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  background: var(--void);
  color: var(--white);
  display: flex;
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.6;
}

/* Subtle grid texture */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(127,119,221,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127,119,221,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}

/* ── Sidebar ───────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 0.5px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
}

.sidebar-brand {
  padding: 28px 24px 20px;
  border-bottom: 0.5px solid var(--border);
}

.sidebar-brand h1 {
  font-family: 'Syne', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.3px;
}

.sidebar-brand p {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 4px;
}

.sidebar-nav {
  padding: 16px 0;
  flex: 1;
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 24px;
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  transition: all 0.15s;
  border-left: 2px solid transparent;
}

.sidebar-nav a:hover {
  color: var(--white);
  background: rgba(127,119,221,0.06);
}

.sidebar-nav a.active {
  color: var(--amber);
  border-left-color: var(--amber);
  background: rgba(239,159,39,0.06);
}

.sidebar-nav .nav-icon {
  font-size: 15px;
  width: 18px;
  text-align: center;
}

.nav-badge {
  margin-left: auto;
  background: var(--amber);
  color: var(--void);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 10px;
}

.sidebar-env {
  padding: 14px 24px;
  border-top: 0.5px solid var(--border);
}

.env-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 4px;
  background: rgba(127,119,221,0.1);
  color: var(--purple);
  border: 0.5px solid var(--border-bright);
}

.env-badge.production {
  background: rgba(34,197,94,0.1);
  color: #5DCAA5;
  border-color: rgba(93,202,165,0.3);
}

.sidebar-user {
  margin-top: 10px;
  font-size: 11px;
  color: var(--muted);
  word-break: break-all;
  line-height: 1.4;
}

.sidebar-logout {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s;
}

.sidebar-logout:hover {
  color: var(--primary);
}

/* ── Main content ──────────────────────────────────────── */
.main {
  margin-left: var(--sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

.topbar {
  background: var(--surface);
  border-bottom: 0.5px solid var(--border);
  padding: 18px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar h2 {
  font-family: 'Syne', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.3px;
}

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

.content {
  padding: 32px 36px;
  flex: 1;
}

/* ── Stat cards ────────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.stat-card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-top: 2px solid var(--amber);
  padding: 20px 22px;
  border-radius: 2px;
}

.stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 10px;
}

.stat-value {
  font-family: 'Syne', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
  letter-spacing: -1px;
}

.stat-value.money::before { content: '$'; font-size: 16px; vertical-align: super; color: var(--amber); }

/* ── Cards / panels ────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  margin-bottom: 24px;
  border-radius: 2px;
}

.card-header {
  padding: 16px 22px;
  border-bottom: 0.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-header h3 {
  font-family: 'Syne', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.2px;
}

.card-body { padding: 22px; }

/* ── Activity / attention lists ────────────────────────── */
.activity-list, .attention-list { list-style: none; }

.activity-list li, .attention-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--border);
  font-size: 13px;
}

.activity-list li:last-child, .attention-list li:last-child { border-bottom: none; }

.activity-title, .attention-title { color: var(--white); font-weight: 400; }
.activity-meta { color: var(--muted); font-size: 12px; }
.attention-issue { color: var(--amber); font-size: 12px; }
.activity-amount { font-weight: 700; color: var(--amber); }

/* ── Two-column dashboard layout ───────────────────────── */
.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* ── Comp results ──────────────────────────────────────── */
.comp-results { margin-top: 28px; }

.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.price-card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  padding: 18px 20px;
  text-align: center;
  border-radius: 2px;
}

.price-card.median { border-top: 2px solid var(--amber); }
.price-card.low    { border-top: 2px solid var(--dimmer); }
.price-card.high   { border-top: 2px solid var(--purple); }

.price-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 6px;
}

.price-value {
  font-family: 'Syne', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -1px;
}

.price-value::before { content: '$'; font-size: 14px; vertical-align: super; color: var(--amber); }

.suggest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.suggest-card {
  background: var(--surface2);
  border: 0.5px solid var(--border-bright);
  color: var(--white);
  padding: 16px 20px;
  text-align: center;
  border-radius: 2px;
}

.suggest-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--amber);
  margin-bottom: 6px;
}

.suggest-value {
  font-family: 'Syne', sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.suggest-value::before { content: '$'; font-size: 12px; vertical-align: super; }

.comp-count {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 20px;
}

.mock-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  background: rgba(127,119,221,0.1);
  color: var(--purple);
  border-radius: 3px;
  border: 0.5px solid var(--border-bright);
  margin-left: 8px;
  vertical-align: middle;
}

/* ── Forms ─────────────────────────────────────────────── */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-grid.three { grid-template-columns: 1fr 1fr 1fr; }
.form-full { grid-column: 1 / -1; }

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.form-group label .hint {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--dimmer);
  margin-left: 6px;
}

input[type="text"],
input[type="number"],
textarea,
select {
  width: 100%;
  padding: 9px 12px;
  /* #442: 1px, not 0.5px. A half-pixel border is rounded away entirely at some
     device pixel ratios, so the box the seller is meant to type in renders with
     no edge at all on exactly the devices Skorrd is used on. */
  border: 1px solid var(--border-input);
  background: rgba(255,255,255,0.04);
  color: var(--white);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
  border-radius: 4px;
  /* #442: `appearance: none` was here. It removed the number steppers AND the
     select dropdown arrow, with nothing drawn in their place. On a touch device
     the stepper IS the affordance that says "this is a value you can change" —
     two people concluded the 15% offer discount was fixed because a bare 70px
     box showing `15` reads as rendered output, not as a control. */
}

input:focus, textarea:focus, select:focus {
  border-color: var(--amber);
  background: rgba(255,255,255,0.07);
  box-shadow: 0 0 0 2px rgba(239,159,39,0.12);
}

select option { background: var(--surface2); color: var(--white); }

textarea { resize: vertical; min-height: 100px; line-height: 1.6; }

.char-count {
  font-size: 11px;
  color: var(--dimmer);
  text-align: right;
  margin-top: -2px;
}

.char-count.warn { color: var(--amber); }

/* Category search suggestions */
.category-suggestions {
  position: absolute;
  z-index: 1000;
  background: var(--surface2);
  border: 1px solid var(--border-bright);
  border-radius: 4px;
  margin-top: 2px;
  max-width: 600px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.category-suggestion-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}

.category-suggestion-item:last-child {
  border-bottom: none;
}

.category-suggestion-item:hover {
  background: rgba(239,159,39,0.08);
}

.category-suggestion-name {
  font-weight: 600;
  color: var(--white);
  font-size: 14px;
  margin-bottom: 2px;
}

.category-suggestion-path {
  font-size: 12px;
  color: var(--muted);
}

.category-breadcrumb {
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(127,119,221,0.08);
  border-radius: 4px;
  border: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.category-breadcrumb #category-path {
  font-size: 13px;
  color: var(--amber);
  font-weight: 600;
}

.btn-link {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.btn-link:hover {
  color: var(--white);
}

/* file upload */
.file-upload-area {
  border: 1px dashed var(--border-bright);
  padding: 28px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  background: rgba(127,119,221,0.03);
  border-radius: 8px;
}

.file-upload-area:hover { border-color: var(--amber); background: rgba(239,159,39,0.04); }

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

.file-upload-label {
  cursor: pointer;
  display: block;
}

.file-upload-icon { font-size: 28px; margin-bottom: 8px; color: var(--amber); }
.file-upload-text { font-size: 13px; color: var(--muted); }
.file-upload-text strong { color: var(--white); }

/* Mobile photo picker buttons */
.mobile-photo-buttons {
  display: none;
  gap: 12px;
  margin-bottom: 16px;
}

.mobile-photo-btn {
  flex: 1;
  min-height: 60px;
  border: 1.5px solid var(--amber);
  background: rgba(239,159,39,0.08);
  color: var(--white);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
}

.mobile-photo-btn:active {
  background: rgba(239,159,39,0.15);
  transform: scale(0.98);
}

.mobile-photo-btn input[type="file"] {
  display: none;
}

/* Hide drag-and-drop on touch devices, show mobile buttons */
@media (pointer: coarse) {
  .file-upload-area {
    display: none;
  }
  .mobile-photo-buttons {
    display: flex;
  }
}

/* Hide camera button on desktop */
@media (pointer: fine) {
  .mobile-photo-btn.camera-btn {
    display: none;
  }
}

/* Stack buttons on very small screens */
@media (max-width: 480px) {
  .mobile-photo-buttons {
    flex-direction: column;
  }
  .mobile-photo-btn {
    width: 100%;
  }
}

.photo-preview {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin-top: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}

.photo-thumb {
  min-width: 80px;
  width: 80px;
  height: 80px;
  object-fit: cover;
  border: 0.5px solid var(--border);
  border-radius: 4px;
  flex-shrink: 0;
  position: relative;
}

/* Photo thumbnail wrapper for remove button */
.photo-thumb-wrapper {
  position: relative;
  min-width: 80px;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.photo-thumb-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0.5px solid var(--border);
  border-radius: 4px;
}

.photo-remove-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(0,0,0,0.75);
  color: white;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s;
}

.photo-remove-btn:active {
  background: rgba(0,0,0,0.9);
}

/* Larger touch target on mobile */
@media (pointer: coarse) {
  .photo-remove-btn {
    width: 38px;
    height: 38px;
    font-size: 24px;
  }
}

.photo-count-badge {
  font-size: 13px;
  color: var(--amber);
  font-weight: 600;
  margin-top: 8px;
}

/* pricing section */
.pricing-section {
  background: var(--surface2);
  border-top: 0.5px solid var(--border);
  padding: 22px;
  margin-top: 0;
}

.pricing-section .section-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--amber);
  margin-bottom: 16px;
  font-weight: 600;
}

.pricing-section label { color: var(--muted) !important; }
.pricing-section .hint { color: var(--dimmer) !important; }

.pricing-section input[type="number"] {
  background: rgba(255,255,255,0.05);
  border-color: var(--border-bright);
  color: var(--white);
}

.pricing-section input[type="number"]:focus {
  border-color: var(--amber);
  background: rgba(255,255,255,0.08);
}

/* ── Buttons ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: all 0.15s;
  border-radius: 6px;
}

.btn-primary {
  background: var(--amber);
  color: var(--void);
  font-weight: 500;
}

.btn-primary:hover { background: var(--amber-dim); transform: translateY(-1px); }

.btn-secondary {
  background: transparent;
  color: var(--white);
  border: 0.5px solid var(--border-bright);
}

.btn-secondary:hover { border-color: var(--purple); color: var(--purple); }

.btn-ghost {
  background: transparent;
  color: var(--purple);
  border: 0.5px solid var(--border-bright);
}

.btn-ghost:hover { border-color: var(--purple); background: rgba(127,119,221,0.08); }

.btn-danger {
  background: #dc2626;
  color: white;
  border: none;
}

.btn-danger:hover { background: #b91c1c; transform: translateY(-1px); }

.btn-sm { padding: 6px 14px; font-size: 11px; }

.form-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px;
  background: var(--surface2);
  border-top: 0.5px solid var(--border);
  border-radius: 0 0 2px 2px;
}

/* ── Table ─────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th {
  text-align: left;
  padding: 11px 16px;
  background: var(--surface2);
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  border-bottom: 0.5px solid var(--border-bright);
}

td {
  padding: 12px 16px;
  border-bottom: 0.5px solid var(--border);
  color: var(--white);
  vertical-align: middle;
}

tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(127,119,221,0.04); }

.td-title { max-width: 300px; }
.td-title small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }

/* ── Status badges ─────────────────────────────────────── */
.badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
}

.badge-active  { background: rgba(93,202,165,0.12);  color: #5DCAA5; border: 0.5px solid rgba(93,202,165,0.3); }
.badge-sold    { background: rgba(239,159,39,0.12);  color: var(--amber); border: 0.5px solid rgba(239,159,39,0.3); }
.badge-ended   { background: rgba(74,70,112,0.3);    color: var(--muted); border: 0.5px solid var(--border-bright); }
.badge-mock    { background: rgba(127,119,221,0.1);  color: var(--purple); border: 0.5px solid var(--border-bright); }

/* ── Alerts ────────────────────────────────────────────── */
.alert {
  padding: 14px 18px;
  margin-bottom: 24px;
  font-size: 13px;
  border-left: 3px solid;
  border-radius: 0 4px 4px 0;
}

.alert-success { background: rgba(93,202,165,0.08);  border-color: #5DCAA5; color: #5DCAA5; }
.alert-error   { background: rgba(239,68,68,0.08);   border-color: #EF4444; color: #FCA5A5; }
.alert-info    { background: rgba(127,119,221,0.08); border-color: var(--purple); color: var(--purple); }

.alert strong { display: block; margin-bottom: 4px; }

/* ── Search form ───────────────────────────────────────── */
.search-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.search-row .form-group { flex: 1; }

/* ── Section dividers ──────────────────────────────────── */
.section-title {
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 0.5px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Utility ───────────────────────────────────────────── */
.text-gray  { color: var(--muted); }
.text-gold  { color: var(--amber); }
.text-rust  { color: var(--purple); }
.text-sm    { font-size: 12px; }
.mt-0 { margin-top: 0; }
.mb-20 { margin-bottom: 20px; }
.gap-12 { gap: 12px; }

/* ── Sold comps panel ──────────────────────────────────── */
.sold-comps {
  border: 0.5px solid var(--border-bright);
  background: rgba(239,159,39,0.04);
  border-radius: 8px;
  padding: 14px 16px 16px;
}

.sold-comps-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}

.sold-comps-header strong {
  font-family: 'Syne', sans-serif;
  font-size: 15px;
  color: var(--white);
  letter-spacing: -0.3px;
  font-weight: 600;
}

.sold-comps-status {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.comps-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.stat-tile {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 6px;
  padding: 12px 10px;
  text-align: center;
}

.stat-tile-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--muted);
  margin-bottom: 4px;
  font-weight: 700;
}

.stat-tile-value {
  font-family: 'Syne', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.stat-tile-value.price-positive { color: #5DCAA5; }

.use-price-btn {
  display: block;
  width: 100%;
  min-height: 48px;
  background: var(--amber);
  color: var(--void);
  border: none;
  border-radius: 6px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.4px;
  cursor: pointer;
  margin-bottom: 14px;
  transition: background 0.15s ease, transform 0.05s ease;
}
.use-price-btn:hover  { background: var(--amber-dim); transform: translateY(-1px); }
.use-price-btn:active { background: var(--amber-dim); transform: scale(0.98); }

.comps-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.comp-card {
  display: flex;
  gap: 12px;
  padding: 10px;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  min-height: 92px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
  -webkit-tap-highlight-color: rgba(239,159,39,0.2);
}
.comp-card:hover {
  border-color: var(--amber);
  box-shadow: 0 1px 6px rgba(239,159,39,0.22);
}
.comp-card:active { transform: scale(0.99); }

.comp-thumb,
.comp-thumb-placeholder {
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  border-radius: 4px;
  background: var(--surface2);
}
.comp-thumb { object-fit: cover; }
.comp-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dimmer);
  border: 1px dashed var(--border-bright);
}

.comp-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
}

.comp-title {
  font-size: 13px;
  line-height: 1.35;
  color: var(--white);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.comp-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.comp-price {
  font-family: 'Syne', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #5DCAA5;
  white-space: nowrap;
  letter-spacing: -0.5px;
}

.comp-condition {
  font-size: 10px;
  padding: 2px 8px;
  background: rgba(239,159,39,0.15);
  color: var(--amber);
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
  white-space: nowrap;
  border: 0.5px solid rgba(239,159,39,0.3);
}

.comp-date {
  font-size: 11px;
  color: var(--muted);
}

.comps-msg {
  text-align: center;
  padding: 22px 8px;
  color: var(--muted);
  font-size: 13px;
}

/* Mobile: stack the card grid; tighten the stat tiles a bit */
@media (max-width: 720px) {
  .comps-grid { grid-template-columns: 1fr; }
  .stat-tile-value { font-size: 20px; }
  .comp-thumb,
  .comp-thumb-placeholder { width: 88px; height: 88px; }
  .comp-price { font-size: 19px; }
  .comp-card  { min-height: 100px; }
}

/* Mobile portrait: sidebar handled by hamburger menu in base.html */
@media (max-width: 768px), (orientation: portrait) and (max-width: 1024px) {
  .main {
    margin-left: 0 !important;
  }

  .content {
    padding: 20px 16px;
  }

  .topbar {
    padding: 16px 16px;
  }

  .page-title {
    font-size: 24px;
  }

  .form-row {
    flex-direction: column;
  }

  .form-group {
    width: 100%;
  }

  .btn-group {
    flex-direction: column;
  }

  .btn-group .btn {
    width: 100%;
  }

  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .activity-list {
    font-size: 14px;
  }

  /* Success message - make it readable */
  .alert {
    font-size: 14px;
    padding: 16px;
  }

  /* Cards stack better */
  .card {
    margin-bottom: 16px;
  }

  /* Photo grid */
  .photo-upload-area {
    min-height: 120px;
  }
}

/* ---------------------------------------------------------------------------
   eBay Account panel (Task 18 — per-user OAuth dashboard panel)
   --------------------------------------------------------------------------- */
.ebay-account-panel { margin-bottom: 20px; }
.ebay-account-panel h2 { margin: 0 0 12px; font-size: 18px; }
.ebay-account-panel p { margin: 6px 0; }
.ebay-account-panel .button-row { display: flex; gap: 12px; margin-top: 12px; }

.status { font-weight: 600; }
.status-ok { color: #4ade80; }
.status-warning { color: #f59e0b; }

.flash { padding: 12px 16px; border-radius: 6px; margin-bottom: 16px; }
.flash-success { background: rgba(74, 222, 128, 0.12); border: 1px solid rgba(74, 222, 128, 0.35); color: #4ade80; }

/* ── Dashboard (#396) ──────────────────────────────────── */
.topbar-sub a, .dash-failed a, .alert a { color: var(--amber); text-decoration: underline; }
.kpi-strip { margin-bottom: 20px; }
.stat-value--na { color: var(--muted); }
.stat-sub { font-size: 12px; color: var(--muted); margin-top: 8px; }
.stat-sub.up   { color: #5DCAA5; }
.stat-sub.down { color: #f87171; }

.todo-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.todo-pill {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 2px;
  color: var(--white);
  text-decoration: none;
  font-size: 13px;
  min-height: 48px;
}
a.todo-pill:hover { border-color: var(--border-bright); background: var(--surface2); }
.todo-pill strong { font-family: 'Syne', sans-serif; font-size: 20px; font-weight: 700; }
.todo-pill.zero strong { color: var(--muted); }
.todo-pill .chev { font-size: 16px; color: var(--muted); margin-left: 4px; }

/* Two-column dashboard rows. Deliberately NOT .dash-grid (shared by other pages). */
.dash-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
.dash-row .card { margin-bottom: 0; }

.metric-row { display: flex; gap: 28px; flex-wrap: wrap; }
.metric { min-width: 110px; }
.metric-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 6px; }
.metric-value { font-family: 'Syne', sans-serif; font-size: 24px; font-weight: 700; color: var(--white); letter-spacing: -0.5px; line-height: 1.1; }

.standing-level { font-family: 'Syne', sans-serif; font-size: 18px; font-weight: 700; padding: 14px 0 8px; }
.standing-list { list-style: none; }
.standing-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 0.5px solid var(--border); font-size: 13px; }
.standing-list li:last-child { border-bottom: none; }
.level-bad { color: #f87171; }

.sales-chart svg { width: 100%; height: auto; display: block; }
.sales-chart .axis { stroke: var(--border-bright); }
.sales-chart .bar { fill: var(--amber); }
.sales-chart .day:hover .bar { fill: #FFBF5E; }
.sales-chart text { fill: var(--muted); font-size: 10px; font-family: 'DM Sans', sans-serif; }
.chart-table { margin-top: 10px; }
.chart-table summary { cursor: pointer; }
.chart-table table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
.chart-table th, .chart-table td { text-align: left; padding: 6px 0; border-bottom: 0.5px solid var(--border); }

.quick-actions { display: flex; gap: 14px; flex-wrap: wrap; }

@media (max-width: 768px), (orientation: portrait) and (max-width: 1024px) {
  .dash-row { grid-template-columns: 1fr; }
  .todo-strip { grid-template-columns: repeat(2, 1fr); }
  .metric-row { gap: 18px; }
}

/* ---- Navigation loading feedback (#411) ----------------------------------
   Top progress bar shown the moment a same-origin link is tapped, plus a
   dimmed "busy" state on the tapped sidebar link. eBay-backed pages take
   4-6 s; with no feedback a second tap is the natural reaction, and each
   second tap doubles the eBay load. base.html owns the JS that toggles these. */
#nav-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
}
#nav-progress::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(90deg, var(--purple), var(--amber));
  border-radius: 0 2px 2px 0;
  transform: translateX(-100%);
}
#nav-progress.nav-progress--active {
  opacity: 1;
}
#nav-progress.nav-progress--active::before {
  animation: nav-progress-slide 1.1s ease-in-out infinite;
}
@keyframes nav-progress-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
.sidebar-nav a.is-loading {
  opacity: 0.55;
  cursor: progress;
}
.sidebar-nav a.is-loading::after {
  content: "…";
  margin-left: auto;
  color: var(--amber);
}
@media (prefers-reduced-motion: reduce) {
  #nav-progress.nav-progress--active::before {
    animation: none;
    transform: translateX(0);
    width: 100%;
  }
}

/* ---------------------------------------------------------------------------
   Legal documents (#510) — /terms and /privacy. Reachable LOGGED OUT, so these
   pages don't extend base.html and can't rely on the app chrome. Long-form
   reading, so the measure is capped and the line-height is looser than the app.
   --------------------------------------------------------------------------- */
.legal-doc {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 22px 80px;
  line-height: 1.65;
}
.legal-doc .legal-brand {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--amber);
  text-decoration: none;
}
.legal-doc h1 { margin: 26px 0 4px; font-size: 26px; }
.legal-doc .legal-updated { margin: 0 0 30px; color: var(--muted); font-size: 13px; }
.legal-doc h2 { margin: 32px 0 10px; font-size: 17px; }
.legal-doc p, .legal-doc li { color: var(--white); font-size: 15px; }
.legal-doc ul { padding-left: 20px; }
.legal-doc li { margin: 6px 0; }
.legal-doc table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14px; }
.legal-doc th, .legal-doc td {
  text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.legal-doc th { color: var(--muted); font-weight: 600; }
.legal-doc .legal-nav { margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--border); font-size: 14px; }
.legal-doc .legal-nav a { color: var(--amber); text-decoration: none; margin-right: 18px; }
.legal-doc .legal-nav a:hover { text-decoration: underline; }

/* #510 — legal links at the foot of every signed-in page. Deliberately quiet:
   present and reachable, not competing with the page. */
.app-legal-footer {
  margin: 48px 0 0;
  padding: 16px 22px 26px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 12px;
}
.app-legal-footer a { color: var(--muted); text-decoration: none; margin: 0 10px; }
.app-legal-footer a:hover { color: var(--amber); text-decoration: underline; }