:root {
  --paper: #f4f0e8;
  --surface: #fffdf8;
  --ink: #1f2523;
  --muted: #716f68;
  --line: #ded8cc;
  --coral: #e7553f;
  --coral-dark: #b93728;
  --sage: #607d68;
  --cream: #e9d6aa;
  --shadow: 0 18px 50px rgba(38, 43, 40, 0.08);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  margin: 0;
  background:
    radial-gradient(circle at 78% 0%, rgba(231, 85, 63, 0.10), transparent 27rem),
    var(--paper);
}

button, input, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

.eyebrow {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.topbar {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: 14px clamp(18px, 4vw, 52px);
  border-bottom: 1px solid rgba(222, 216, 204, 0.85);
  background: rgba(244, 240, 232, 0.92);
  backdrop-filter: blur(18px);
}

.brand-block, .topbar-actions, .detail-kicker, .export-group {
  display: flex;
  align-items: center;
}

.brand-block { gap: 13px; }
.brand-block h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 24px; }
.brand-block .eyebrow { margin-bottom: 1px; }

.brand-mark {
  display: flex;
  align-items: end;
  gap: 4px;
  width: 48px;
  height: 44px;
  padding: 9px;
  border-radius: 14px;
  background: var(--coral);
  transform: rotate(-3deg);
}

.brand-mark.small { width: 42px; height: 40px; }
.brand-mark span { display: block; width: 7px; border-radius: 5px; background: #fff6e8; }
.brand-mark span:nth-child(1) { height: 13px; }
.brand-mark span:nth-child(2) { height: 23px; }
.brand-mark span:nth-child(3) { height: 17px; }

.topbar-actions { gap: 10px; }
.service-pill, .status-badge, .count-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.service-pill { gap: 7px; padding: 8px 12px; border: 1px solid var(--line); background: var(--surface); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #4f9e67; box-shadow: 0 0 0 4px rgba(79,158,103,.12); }

.ghost-button, .primary-button, .icon-button, .source-link, .load-more {
  border: 1px solid var(--line);
  border-radius: 10px;
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.ghost-button, .icon-button, .source-link, .load-more { color: var(--ink); background: var(--surface); }
.ghost-button, .primary-button, .source-link { padding: 10px 14px; font-size: 12px; font-weight: 750; }
.primary-button { border-color: var(--coral); color: white; background: var(--coral); }
.primary-button:hover { background: var(--coral-dark); }
.primary-button.compact { white-space: nowrap; }
.primary-button:disabled { cursor: default; opacity: .55; transform: none; }
.analysis-split { position: relative; display: inline-flex; align-items: stretch; }
.analysis-split > .primary-button:first-child { border-radius: 10px 0 0 10px; }
.analysis-split > .analysis-menu-toggle { min-width: 31px; margin-left: 1px; padding-right: 8px; padding-left: 8px; border-radius: 0 10px 10px 0; }
.analysis-menu { position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; min-width: 190px; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); }
.analysis-menu button { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 7px; color: var(--ink); background: transparent; font-size: 11px; text-align: left; }
.analysis-menu button:hover { background: #f1ece3; transform: none; }
.analysis-all-progress { color: var(--sage); font-weight: 750; white-space: nowrap; }
.analysis-failures { margin: 10px 0 12px; padding: 9px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.analysis-failures summary { width: fit-content; cursor: pointer; color: var(--ink); font-size: 11px; font-weight: 800; }
.analysis-failures summary span { display: inline-block; min-width: 20px; margin-left: 5px; padding: 2px 6px; border-radius: 999px; color: #8a3428; background: #f6d8d2; text-align: center; }
.analysis-failure-list { display: grid; gap: 6px; max-height: 220px; margin-top: 8px; overflow: auto; }
.analysis-failure-item { display: grid; grid-template-columns: minmax(160px, .7fr) minmax(150px, .55fr) minmax(240px, 1.5fr) auto; gap: 10px; align-items: start; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fffaf3; font-size: 10px; }
.analysis-failure-item strong, .analysis-failure-item span { overflow: hidden; text-overflow: ellipsis; }
.analysis-failure-item .failure-user { color: var(--muted); }.analysis-failure-item .failure-reason { color: #943f32; white-space: pre-wrap; word-break: break-word; }
.analysis-failure-item time { color: var(--muted); white-space: nowrap; }.analysis-failure-empty { padding: 9px; color: var(--muted); font-size: 10px; }
.icon-button { width: 38px; height: 38px; font-weight: 800; }
.ghost-button:hover, .source-link:hover, .load-more:hover { border-color: #aaa196; background: white; }
button:hover, .source-link:hover { transform: translateY(-1px); }

main { padding: 24px clamp(18px, 4vw, 52px) 52px; }

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  max-width: 1600px;
  margin: 0 auto 18px;
}

.summary-card {
  min-height: 142px;
  padding: 20px;
  border: 1px solid rgba(31, 37, 35, 0.10);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.summary-card span { font-size: 12px; font-weight: 750; }
.summary-card strong { display: block; margin: 10px 0 7px; font-family: Georgia, "Times New Roman", serif; font-size: 40px; line-height: 1; }
.summary-card small { color: inherit; font-size: 11px; opacity: .72; }
.summary-card.coral { color: white; background: var(--coral); }
.summary-card.ink { color: #f9f3e8; background: var(--ink); }
.summary-card.sage { color: white; background: var(--sage); }
.summary-card.cream { background: var(--cream); }

.workspace {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  min-height: 640px;
  max-width: 1600px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.post-panel { min-width: 0; padding: 22px 16px; border-right: 1px solid var(--line); background: #f8f4ec; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 14px; }
.panel-heading h2, .empty-detail h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 22px; }
.count-badge { justify-content: center; min-width: 30px; padding: 5px 9px; color: white; background: var(--ink); }

.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: white;
}
.search-box:focus-within { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(231,85,63,.10); }
.search-box input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }
.search-box.grow { flex: 1; }
.source-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 8px; }
.source-filters select { width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font-size: 10px; }

.post-list { display: grid; gap: 8px; max-height: 650px; margin-top: 14px; overflow: auto; padding-right: 3px; }
.post-item { width: 100%; padding: 14px; border: 1px solid transparent; border-radius: 13px; text-align: left; color: var(--ink); background: transparent; }
.post-item:hover { border-color: var(--line); background: white; }
.post-item.active { border-color: rgba(231,85,63,.35); background: #fff5ef; box-shadow: inset 3px 0 0 var(--coral); }
.post-item strong { display: -webkit-box; overflow: hidden; font-size: 13px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.post-item-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; color: var(--muted); font-size: 10px; }
.post-analysis-status { display: block; margin-top: 8px; color: var(--muted); font-size: 9px; font-weight: 750; }
.post-analysis-status.running { color: #8a5e16; }.post-analysis-status.failed { color: #9a3d31; }.post-analysis-status.complete { color: #2f6542; }
.mini-status { flex: 0 0 auto; padding: 3px 7px; border-radius: 999px; font-weight: 800; }
.mini-status.complete { color: #2f6542; background: #dcebdc; }
.mini-status.partial { color: #8a5e16; background: #f4e7c7; }
.mini-status.collecting { color: #7d4940; background: #f5ddd8; }

.detail-panel { min-width: 0; padding: clamp(20px, 3vw, 34px); }
.empty-detail { display: grid; place-items: center; align-content: center; min-height: 570px; text-align: center; }
.empty-detail > p:last-child { max-width: 450px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.empty-graphic { display: flex; align-items: end; gap: 8px; width: 94px; height: 78px; margin-bottom: 18px; padding: 17px; border: 1px solid var(--line); border-radius: 24px; transform: rotate(3deg); background: var(--cream); }
.empty-graphic span { flex: 1; border-radius: 6px 6px 2px 2px; background: var(--coral); }
.empty-graphic span:nth-child(1) { height: 38%; }.empty-graphic span:nth-child(2) { height: 80%; }.empty-graphic span:nth-child(3) { height: 58%; }

.detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.detail-copy { min-width: 0; }
.detail-kicker { gap: 10px; }
.status-badge { padding: 5px 9px; color: white; background: var(--sage); }
.status-badge.partial { color: #734c12; background: #f0dca8; }
.status-badge.collecting { color: #893c31; background: #f6d9d4; }
.mono { overflow: hidden; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; text-overflow: ellipsis; }
.detail-heading h2 { max-width: 840px; margin: 13px 0 8px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(25px, 3vw, 38px); line-height: 1.15; }
.detail-heading p { margin: 0; color: var(--muted); font-size: 12px; }

.capture-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin: 24px 0; border: 1px solid var(--line); border-radius: 14px; background: #faf7f0; }
.capture-strip div { padding: 15px 17px; border-right: 1px solid var(--line); }
.capture-strip div:last-child { border-right: 0; }
.capture-strip span { display: block; color: var(--muted); font-size: 10px; }
.capture-strip strong { display: block; margin-top: 5px; font-family: Georgia, "Times New Roman", serif; font-size: 22px; }

.comment-toolbar { display: flex; align-items: end; gap: 10px; }
.select-label { display: grid; gap: 4px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.select-label select { min-width: 112px; height: 42px; padding: 0 30px 0 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: white; }
.export-group { gap: 6px; }

.table-meta { display: flex; justify-content: space-between; margin: 24px 2px 10px; font-size: 11px; font-weight: 800; }
.table-meta span:last-child { color: var(--muted); font-weight: 600; }
.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 13px; }
table { width: 100%; border-collapse: collapse; background: white; }
th { position: sticky; top: 0; z-index: 1; padding: 11px 13px; border-bottom: 1px solid var(--line); color: var(--muted); background: #f8f5ee; text-align: left; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
td { padding: 13px; border-bottom: 1px solid #eee8dd; vertical-align: top; font-size: 12px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fffaf3; }
.user-name { display: block; max-width: 150px; overflow: hidden; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.user-id { display: block; max-width: 150px; margin-top: 4px; overflow: hidden; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 9px; text-overflow: ellipsis; }
.location-chip { display: inline-block; padding: 4px 7px; border-radius: 999px; color: #395543; background: #e1ece3; font-size: 10px; font-weight: 800; }
.comment-content { min-width: 260px; max-width: 640px; line-height: 1.55; white-space: pre-wrap; }
.reply-note { display: block; margin-bottom: 4px; color: var(--coral-dark); font-size: 10px; font-weight: 750; word-break: break-all; }
.number-cell { text-align: right; }
.table-empty { padding: 42px 20px; text-align: center; color: var(--muted); font-size: 12px; }
.load-more { display: block; margin: 16px auto 0; padding: 10px 22px; }
.lead-panel { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.lead-heading, .lead-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lead-actions { flex-wrap: wrap; }
.lead-heading h3 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 20px; }.lead-actions { justify-content: end; }
.lead-actions span, .lead-help { color: var(--muted); font-size: 10px; }.lead-help { margin: 7px 0 11px; }
.lead-table-wrap { max-height: 380px; }.lead-table-wrap td { max-width: 310px; line-height: 1.5; }
.intent-badge { display: inline-block; padding: 4px 7px; border-radius: 999px; font-size: 9px; font-weight: 800; }
.intent-badge.high { color: #8a3428; background: #f6d8d2; }.intent-badge.medium { color: #7b581d; background: #f4e5bd; }
.intent-badge.low { color: #376046; background: #dcebdd; }.intent-badge.none, .intent-badge.unknown { color: #665f5a; background: #eae5df; }
.quality-badge { display: inline-block; margin-top: 5px; padding: 3px 6px; border-radius: 999px; font-size: 9px; font-weight: 700; }
.lead-quality-select { margin-right: 8px; }
.quality-badge.likely_genuine { color: #356246; background: #e1eee4; }
.quality-badge.needs_review { color: #805b19; background: #f7e8bf; }
.quality-badge.likely_spam { color: #8b3125; background: #f6d5cf; }
.quality-badge.unknown { color: #6b625c; background: #ebe7e1; }
.vehicle-line, .lead-summary, .lead-evidence { display: block; }.vehicle-line { margin-bottom: 2px; }
.vehicle-energy, .vehicle-relation { display: inline-block; font-size: 9px; }
.vehicle-energy { margin-right: 6px; padding: 1px 5px; border-radius: 999px; background: #eee9e1; color: #665d51; }
.vehicle-energy.new_energy { background: #e1f1eb; color: #276c55; }
.vehicle-energy.fuel { background: #f4e7d8; color: #8a542e; }
.vehicle-relation { color: var(--coral-dark); }
.vehicle-card { min-width: 220px; padding: 7px 8px; border-radius: 8px; background: #f7f2ea; }
.vehicle-card + .vehicle-card { margin-top: 7px; }
.vehicle-intent-line { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.vehicle-intent-summary, .vehicle-review { display: block; margin-top: 4px; color: #766c66; font-size: 9px; line-height: 1.4; }
.vehicle-review { color: #9a4c36; font-weight: 800; }
.source-badge { display: inline-flex; width: fit-content; padding: 2px 6px; border-radius: 999px; background: #e3edf4; color: #315c77; font-size: 9px; }
.interaction-type { display: inline-block; margin-right: 6px; padding: 1px 5px; border-radius: 999px; background: #eee8df; color: #6f5b4e; font-size: 9px; vertical-align: 1px; }
.interaction-type.chat { background: #e1f1eb; color: #276c55; }
.interaction-type.like { background: #f8e2e5; color: #9a4655; }
.interaction-type.system { background: #e3edf4; color: #315c77; }
.lead-summary { margin-bottom: 4px; }.lead-evidence { color: var(--muted); font-size: 9px; word-break: break-all; }

.auth-panel { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(31,37,35,.78); backdrop-filter: blur(12px); }
.auth-card { width: min(440px, 100%); padding: 36px; border-radius: 24px; background: var(--surface); box-shadow: 0 30px 90px rgba(0,0,0,.25); }
.auth-card h1 { margin: 12px 0 8px; font-family: Georgia, "Times New Roman", serif; font-size: 30px; }
.auth-card > p:not(.eyebrow) { color: var(--muted); font-size: 12px; line-height: 1.6; }
.auth-card label { display: block; margin: 22px 0 7px; font-size: 11px; font-weight: 800; }
.auth-card input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; }
.auth-card .primary-button { width: 100%; margin-top: 12px; }
.form-error { min-height: 18px; margin-top: 10px; color: var(--coral-dark); font-size: 11px; }

.toast { position: fixed; z-index: 120; right: 24px; bottom: 24px; max-width: 360px; padding: 13px 16px; border-radius: 12px; color: white; background: var(--ink); box-shadow: var(--shadow); font-size: 12px; }

@media (max-width: 1050px) {
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
  .workspace { grid-template-columns: 280px minmax(0, 1fr); }
  .comment-toolbar { flex-wrap: wrap; }
  .search-box.grow { flex-basis: 100%; }
}

@media (max-width: 760px) {
  .topbar { position: static; align-items: flex-start; }
  .service-pill, #refresh-all { display: none; }
  .summary-grid, .workspace { grid-template-columns: 1fr; }
  .summary-card { min-height: 122px; }
  .post-panel { border-right: 0; border-bottom: 1px solid var(--line); }
  .post-list { max-height: 320px; }
  .detail-heading { flex-direction: column; }
  .capture-strip { grid-template-columns: repeat(2, 1fr); }
  .capture-strip div:nth-child(2) { border-right: 0; }
  .capture-strip div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .export-group { width: 100%; flex-wrap: wrap; }
}