:root {
  --bg: #f5f3ef;
  --surface: #ffffff;
  --surface-muted: #ebe9e3;
  --text: #24262a;
  --text-soft: #707178;
  --border: #dedcd5;
  --accent: #d24a43;
  --green: #2b7959;
  --amber: #a86a13;
  --blue: #3e6f9f;
  --shadow: 0 1px 2px rgba(32, 29, 25, 0.08);
  --radius: 8px;
}

.sentiment-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.sentiment-toolbar select { min-height: 34px; max-width: 100%; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 5px 8px; }
.review-filter { display: flex; align-items: center; gap: 5px; color: var(--text-soft); font-size: 12px; }
.model-sentiment { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 8px 0; font-size: 11px; }
.analysis-state { color: var(--text-soft); padding: 2px 4px; }
.sentiment-overview { padding: 18px; border-bottom: 1px solid var(--border); }
.sentiment-overview h2 { margin: 0 0 9px; font-size: 14px; }
.sentiment-overview p { margin: 6px 0; line-height: 1.7; font-size: 12px; }
.sentiment-note { color: var(--text-soft); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { color-scheme: light; }

.review-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  background: #fff2d9;
  color: #80550c;
  font-size: 11px;
  white-space: nowrap;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
}

button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.topbar {
  min-height: 72px;
  padding: 12px 26px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }

.brand-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: #25272c;
  color: #fff;
  font-weight: 800;
  font-size: 18px;
}

.brand h1 {
  margin: 0;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
}

.brand p {
  margin: 3px 0 0;
  color: var(--text-soft);
  font-size: 12px;
}

.top-actions { display: flex; align-items: center; gap: 7px; }

.icon-button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
}

.icon-button:hover { border-color: #bbb8b0; background: #faf9f6; }
.icon-button:disabled { opacity: 0.5; cursor: wait; }
.icon-button svg { width: 18px; height: 18px; }

.shell {
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 24px 26px 48px;
  max-width: 100%;
  overflow-x: clip;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.metric {
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.metric strong {
  display: block;
  margin-top: 7px;
  font-size: 27px;
  line-height: 1.1;
  letter-spacing: 0;
}

.metric-label { color: var(--text-soft); font-size: 12px; font-weight: 650; }
.metric-note {
  display: block;
  margin-top: 5px;
  color: var(--text-soft);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.metric-note[hidden] { display: none; }
.metric-negative strong { color: var(--accent); }

.source-strip {
  min-height: 44px;
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 3px;
  max-width: 100%;
  min-width: 0;
}

.source-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  white-space: nowrap;
  color: var(--text-soft);
  font-size: 12px;
}

.source-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber);
}
.source-dot.ready { background: var(--green); }
.source-dot.error { background: var(--accent); }

.workspace {
  margin-top: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  align-items: start;
  gap: 18px;
}

.feed-panel,
.activity-panel {
  min-width: 0;
  max-width: 100%;
}

.mention,
.mention-main,
.mention-copy,
.mention-byline,
.mention-content {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.feed-panel, .activity-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.toolbar {
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border);
}

.search-field {
  flex: 1;
  min-width: 180px;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fbfaf7;
}

.search-field svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--text-soft); }
.search-field input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); }
.filters { display: flex; gap: 7px; }

.advanced-toolbar {
  padding: 10px 12px;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 9px;
  border-bottom: 1px solid var(--border);
  background: #fbfaf7;
}

.number-filter,
.date-filter,
.sort-filter {
  display: grid;
  gap: 4px;
  color: var(--text-soft);
  font-size: 11px;
}

.number-filter input,
.date-filter input,
.sort-filter select,
.sort-direction {
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  padding: 0 8px;
}

.number-filter input { width: 96px; }
.date-filter input { width: 140px; }
.sort-filter select { width: 130px; }
.sort-direction { width: 120px; }

.clear-filters {
  height: 34px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--blue);
  cursor: pointer;
}

.filters select {
  height: 38px;
  max-width: 150px;
  padding: 0 30px 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fbfaf7;
  color: var(--text);
}
#type-filter { max-width: 190px; }

.list-heading, .panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 9px;
}

.list-heading h2, .panel-heading h2 { margin: 0; font-size: 15px; letter-spacing: 0; }
.list-heading span { color: var(--text-soft); font-size: 12px; }
.panel-heading svg { width: 17px; height: 17px; color: var(--text-soft); }

.mention-list { padding: 0 12px 12px; }
.mention { padding: 14px; border-top: 1px solid var(--border); }
.mention:first-child { border-top: 0; }
.mention-main { --thumbnail-width: 94px; display: grid; grid-template-columns: var(--thumbnail-width) minmax(0, 1fr); align-items: start; gap: 12px; min-width: 0; }

.mention-thumb {
  width: 94px;
  height: 64px;
  flex: 0 0 94px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-muted);
}

.mention-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mention-thumb[aria-hidden="true"] { visibility: hidden; }
.mention-copy { grid-column: 2; min-width: 0; }

.mention-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 6px;
}

.source-badge, .sentiment-badge, .keyword-badge {
  display: inline-flex;
  align-items: center;
  height: 21px;
  padding: 0 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}

.source-badge[data-source="reddit"] { background: #ffebdd; color: #a63b1e; }
.source-badge[data-source="youtube"] { background: #fbe2e2; color: #a11d1d; }
.source-badge[data-source="twitter"] { background: #e8e8e8; color: #2c2c2c; }
.source-badge[data-source="tiktok"] { background: #e8eef7; color: #3c5a8c; }
.source-badge[data-source="instagram"] { background: #f7e8ee; color: #9a3c68; }
.source-badge[data-source="facebook"] { background: #e3ecf6; color: #3c6b9a; }
.type-badge {
  display: inline-flex;
  align-items: center;
  height: 21px;
  padding: 0 7px;
  border-radius: 4px;
  background: #eef0f1;
  color: #5c6066;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}
.sentiment-badge.negative { background: #fae2df; color: #a52e28; }
.sentiment-badge.positive { background: #dff0e7; color: #246347; }
.sentiment-badge.neutral { background: #e9e8e3; color: #68655e; }
.keyword-badge {
  background: #e8f0f7;
  color: #315f82;
  text-transform: none;
  font-weight: 600;
}

.mention-title {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: 0;
}

.mention-title a { color: inherit; text-decoration: none; }
.mention-title a:hover { color: var(--blue); }

.mention-content {
  margin: 7px 0 0;
  color: #4d4f54;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
}

.mention-footer {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--text-soft);
  font-size: 12px;
}

.mention-byline { min-width: 0; display: flex; align-items: center; gap: 8px; }
.mention-avatar {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-muted);
}
.mention-byline a { color: var(--text-soft); text-decoration: none; }
.mention-byline a:hover { color: var(--blue); }
.mention-byline .author {
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mention-time { flex: 0 0 auto; color: var(--text-soft); }
.mention-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.mention-gallery { margin-top: 9px; font-size: 12px; }
.mention-gallery summary { width: fit-content; color: var(--blue); cursor: pointer; }
.mention-gallery summary:hover { text-decoration: underline; }
.mention-gallery summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.mention-gallery-grid { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.mention-gallery-grid a {
  width: 88px;
  height: 72px;
  flex: 0 0 88px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface-muted);
}
.mention-gallery-grid a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.mention-gallery-grid img { width: 100%; height: 100%; display: block; object-fit: cover; }

.comment-toggle {
  border: 0;
  background: transparent;
  color: var(--blue);
  cursor: pointer;
  padding: 3px 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
}

.comment-toggle svg { width: 14px; height: 14px; }
.comment-panel { margin: 12px 0 0; border-top: 1px solid var(--border); padding-top: 8px; }
.parent-context { margin: 7px 0; color: var(--text-soft); font-size: 12px; }
.parent-context a { color: var(--blue); }
.comment-match { color: var(--blue); font-size: 11px; }
.repost-copies { margin: 8px 0; color: var(--text-soft); font-size: 12px; }
.repost-copies summary { cursor: pointer; }
.repost-copies > div { display: flex; gap: 12px; flex-wrap: wrap; margin: 7px 0; }
.repost-copies a, .comment-footer a { color: var(--blue); }
.comment-footer { display: flex; align-items: center; gap: 12px; }
.comment { padding: 8px 0; border-bottom: 1px solid var(--border); }
.comment:last-child { border-bottom: 0; }
.comment-header { display: flex; justify-content: space-between; gap: 10px; color: var(--text-soft); font-size: 11px; }
.comment-author { min-width: 0; display: flex; align-items: center; gap: 6px; }
.comment-text { margin: 4px 0 0; color: #45464a; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-footer { margin-top: 5px; color: var(--text-soft); font-size: 11px; }
.comment-node { min-width: 0; }
.comment-node + .comment-node { border-top: 1px solid var(--border); }
.reply-thread { margin: 4px 0 10px; }
.reply-thread > summary { width: fit-content; padding: 6px 0; color: var(--link, var(--blue)); font-size: 12px; cursor: pointer; }
.reply-children { margin-left: var(--reply-indent, 14px); padding-left: 10px; border-left: 2px solid var(--border); }
.reply-relation-note, .comment-placeholder { color: var(--text-soft); font-size: 11px; }
.reply-relation-note { margin: 4px 0; }
.comment-placeholder { padding: 10px 0 4px; font-style: italic; }

.empty-state {
  min-height: 220px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--text-soft);
}
.empty-state.compact { min-height: 120px; }
.empty-state svg { width: 26px; height: 26px; color: #aaa69e; }
.empty-state p { margin: 0; font-size: 12px; }

.load-more {
  width: calc(100% - 24px);
  height: 38px;
  margin: 0 12px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fbfaf7;
  color: var(--blue);
  cursor: pointer;
}

.run-list { padding: 0 12px 12px; }
.run-item { padding: 10px 0; border-top: 1px solid var(--border); }
.run-item:first-child { border-top: 0; }
.run-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.run-source { font-weight: 700; font-size: 12px; }
.run-status {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}
.run-status.success { background: #dff0e7; color: #246347; }
.run-status.failed, .run-status.unavailable { background: #fae2df; color: #a52e28; }
.run-status.running { background: #f4e9cc; color: #8b5d18; }
.run-meta { margin-top: 4px; color: var(--text-soft); font-size: 11px; }
.run-message { margin-top: 4px; color: #5f6167; font-size: 11px; overflow-wrap: anywhere; }

.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 20;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: #25272c;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  font-size: 12px;
  max-width: min(360px, calc(100vw - 44px));
}

@media (max-width: 980px) {
  .workspace { grid-template-columns: 1fr; }
  .activity-panel { order: 2; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .topbar { padding: 10px 14px; }
  .shell { padding: 16px 14px 36px; }
  .brand h1 { font-size: 16px; }
  .metrics { grid-template-columns: 1fr 1fr; gap: 8px; }
  .metric { padding: 13px 12px; }
  .metric strong { font-size: 24px; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .search-field { min-width: 0; flex-basis: 100%; }
  .filters { width: 100%; flex-wrap: wrap; }
  .filters select { flex: 1; max-width: none; min-width: 0; width: auto; }
  .advanced-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-width: 0; overflow-x: auto; }
  .number-filter,
  .date-filter,
  .sort-filter { min-width: 0; }
  .number-filter input { width: 100%; }
  .date-filter input { width: 100%; }
  .sort-filter select { width: 100%; }
  .sort-direction { width: 100%; }
  .clear-filters { justify-self: end; }
  .mention { min-width: 0; }
  .mention-thumb { width: 72px; height: 54px; flex-basis: 72px; }
  .mention-title { font-size: 14px; }
  .mention-footer { flex-direction: column; align-items: flex-start; gap: 7px; }
  .mention-byline .author { max-width: 130px; }
}

/* Quiet, task-first visual system. Status colors are reserved for data states. */
:root {
  --bg: #f8f8f7;
  --surface: #fff;
  --surface-muted: #f2f2f0;
  --field: #fff;
  --text: #20211f;
  --text-soft: #696b68;
  --border: #e5e5e2;
  --border-strong: #c9cbc7;
  --link: #275e50;
  --accent: #a73632;
  --green: #35745d;
  --amber: #9a681e;
  --blue: var(--link);
  --type-post: #2863a5;
  --type-video: #7750a8;
  --type-comment: #217568;
  --sentiment-neutral: #856400;
  --shadow: 0 2px 12px rgba(24, 27, 24, .035);
  --radius: 12px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #171817;
  --surface: #202220;
  --surface-muted: #2a2c29;
  --field: #252725;
  --text: #f2f2ef;
  --text-soft: #b2b6b0;
  --border: #3b3e3a;
  --border-strong: #646861;
  --link: #92cfb4;
  --accent: #ee928c;
  --green: #80bf9e;
  --amber: #dbb779;
  --type-post: #8cbdff;
  --type-video: #c3a5ef;
  --type-comment: #89d2c1;
  --sentiment-neutral: #edcf65;
  --shadow: 0 2px 16px rgba(0, 0, 0, .12);
}

body { line-height: 1.55; }
button, input, select { color: var(--text); }
button, a, input, select, summary { transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; }
button:hover:not(:disabled), .mention-thumb img:hover { transform: translateY(-1px); }
a:hover { color: var(--link); }
:focus-visible { outline: 2px solid var(--link) !important; outline-offset: 3px; }

.topbar { min-height: 76px; padding-inline: max(24px, calc((100vw - 1400px) / 2 + 24px)); border-color: var(--border); }
.brand { gap: 13px; }
.brand-mark { width: 38px; height: 38px; flex-basis: 38px; border-radius: 11px; background: var(--text); color: var(--surface); font-size: 17px; letter-spacing: -.05em; }
.brand h1 { font-size: 16px; font-weight: 680; letter-spacing: -.025em; }
.brand p { margin-top: 1px; }
.top-actions { gap: 8px; }
.icon-button { min-width: 40px; width: 40px; height: 40px; border-color: transparent; border-radius: 10px; }
.icon-button:hover { background: var(--surface-muted); border-color: var(--border); }
.icon-button svg { width: 17px; height: 17px; }
.primary-action { display: inline-flex; align-items: center; justify-content: center; width: auto; gap: 8px; padding: 0 15px; background: var(--text); border-color: var(--text); color: var(--surface); font-weight: 620; }
.primary-action:hover { background: #3d403c; border-color: #3d403c; color: #fff; }
:root[data-theme="dark"] .primary-action:hover { background: #dfe2dc; border-color: #dfe2dc; color: #202220; }
.primary-action svg { width: 15px; height: 15px; fill: currentColor; }
.primary-action:disabled { background: var(--surface-muted); border-color: var(--border); color: var(--text-soft); }

.shell { padding: 30px 24px 64px; }
.metrics { gap: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.metric { min-height: 122px; padding: 22px 24px; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.metric + .metric { border-left: 1px solid var(--border); }
.metric strong { margin-top: 7px; font-size: clamp(23px, 2vw, 30px); font-weight: 680; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.metric-label { color: var(--text-soft); font-size: 12px; font-weight: 570; }
.metric-note { margin-top: 6px; font-size: 11px; }
.source-strip { margin-top: 18px; min-height: 34px; gap: 8px; }
.source-chip { height: 30px; padding: 0 10px; border-radius: 7px; background: transparent; font-size: 11px; }
.source-dot { width: 7px; height: 7px; }

.workspace { margin-top: 20px; grid-template-columns: minmax(0, 1fr) 310px; gap: 20px; }
.feed-panel, .activity-panel { box-shadow: var(--shadow); }
.toolbar { padding: 18px; gap: 12px; }
.search-field { height: 42px; padding: 0 13px; background: var(--field); }
.search-field:focus-within { border-color: var(--link); box-shadow: 0 0 0 3px color-mix(in srgb, var(--link) 12%, transparent); }
.search-field input { font-size: 13px; }
.search-field input::placeholder { color: var(--text-soft); opacity: 1; }
.filters { gap: 8px; }
.filters select { height: 42px; background-color: var(--field); }
.advanced-filters > summary { display: none; }
.advanced-filter-count:not([hidden]) { margin-left: auto; color: var(--link); font-size: 11px; }
.advanced-toolbar { padding: 14px 18px; gap: 10px 14px; background: var(--surface); }
.sentiment-toolbar { padding: 12px 18px; background: var(--surface); }
.number-filter, .date-filter, .sort-filter { gap: 5px; font-size: 11px; }
.number-filter input, .date-filter input, .sort-filter select, .sort-direction, .sentiment-toolbar select { min-height: 38px; border-radius: 8px; background: var(--field); color: var(--text); }
.sentiment-toolbar select { padding: 5px 9px; }
.review-filter { gap: 7px; font-size: 12px; }
.review-filter input { width: 16px; height: 16px; accent-color: var(--link); }
.clear-filters { height: 38px; color: var(--link); font-weight: 570; }
.clear-filters:hover { background: var(--surface-muted); border-radius: 8px; }
.list-heading, .panel-heading { padding: 20px 20px 11px; }
.list-heading h2, .panel-heading h2, .sentiment-overview h2 { font-size: 14px; font-weight: 670; letter-spacing: -.01em; }
.list-heading span { font-variant-numeric: tabular-nums; }

.mention-list { padding: 0 18px 16px; }
.mention { padding: 19px 2px; }
.mention-main { --thumbnail-width: 100px; gap: 15px; }
.mention-thumb { width: 100px; height: 68px; flex-basis: 100px; border-radius: 8px; }
.mention-thumb img { transition: transform .3s ease; }
.mention-thumb:hover img { transform: scale(1.035); }
.mention-meta { gap: 6px; margin-bottom: 8px; }
.source-badge, .sentiment-badge, .keyword-badge, .type-badge {
  height: 26px;
  padding: 0 8px;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 550;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.mention-meta :is(.type-badge, .sentiment-badge, .keyword-badge) svg { width: 13px; height: 13px; flex-shrink: 0; stroke-width: 1.75; }
.source-badge[data-source] { background: var(--surface-muted); color: var(--text-soft); }
.source-badge:has(.platform-logo) { padding: 0; width: 28px; justify-content: center; }
.source-badge .platform-logo { width: 18px; height: 18px; }
.platform-logo { display: block; width: 20px; height: 20px; flex-shrink: 0; object-fit: contain; }
.source-chip { flex-shrink: 0; }
.source-dot { flex-shrink: 0; }
:root[data-theme="dark"] [data-source="tiktok"] .platform-logo,
:root[data-theme="dark"] [data-source="twitter"] .platform-logo { filter: invert(1); }
.type-badge, .keyword-badge { background: var(--surface-muted); color: var(--text-soft); }
.type-badge.type-post { --type-color: var(--type-post); }
.type-badge.type-video { --type-color: var(--type-video); }
.type-badge.type-comment { --type-color: var(--type-comment); }
.type-badge:is(.type-post, .type-video, .type-comment) {
  background: color-mix(in srgb, var(--type-color) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--type-color) 25%, var(--border));
  color: var(--type-color);
}
.sentiment-badge.neutral {
  background: color-mix(in srgb, #facc15 22%, var(--surface));
  border-color: color-mix(in srgb, #e4b40e 40%, var(--border));
  color: var(--sentiment-neutral);
}
.sentiment-badge.negative { background: color-mix(in srgb, var(--accent) 13%, var(--surface)); color: var(--accent); }
.sentiment-badge.positive { background: color-mix(in srgb, var(--green) 14%, var(--surface)); color: var(--green); }
.review-badge { background: color-mix(in srgb, var(--amber) 17%, var(--surface)); color: var(--amber); }
.mention-title { font-size: 15px; line-height: 1.45; font-weight: 630; }
.mention-title a:hover { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.mention-content, .comment-text { color: var(--text-soft); }
.mention-content { line-height: 1.6; }
.mention-footer { margin-top: 11px; }
.mention-byline { flex-wrap: wrap; row-gap: 3px; }
.mention-byline a:hover, .mention-gallery summary, .comment-toggle, .parent-context a, .comment-match, .repost-copies a, .comment-footer a { color: var(--link); }
.mention-gallery-grid a { border-radius: 8px; }
.comment-toggle { min-height: 28px; }
.analysis-state { color: var(--text-soft); }
.ai-reply { margin: 8px 0; padding: 8px 10px; border-left: 2px solid var(--text-soft); font-size: 12px; }
.ai-reply summary { cursor: pointer; color: var(--text-soft); }
.ai-reply p { margin: 8px 0 0; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-reply-translation { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); color: var(--text-soft); }
.ai-reply-translation > span { font-size: 11px; }
.ai-reply-translation .translation-retry { margin-top: 8px; font-size: 12px; }
.ai-reply-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 10px; }
.reply-copy-open { border: 1px solid var(--border); border-radius: 5px; background: var(--surface); color: var(--text); padding: 6px 10px; font: inherit; cursor: pointer; }
.reply-copy-open:hover { background: var(--surface-muted); }
.reply-copy-open:disabled { opacity: .55; cursor: default; }
.reply-helper-download { font-size: 11px; }
.reply-launch-status { flex-basis: 100%; color: var(--text-soft); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.reply-launcher-fallback { margin: 8px 0; padding: 8px 10px; border-left: 2px solid var(--text-soft); font-size: 12px; }
.reply-launcher-fallback summary { cursor: pointer; color: var(--text-soft); }
.reply-launcher-fallback p { margin: 8px 0 0; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.reply-launcher-fallback .ai-reply-translation { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); color: var(--text-soft); }
.model-sentiment { margin: 7px 0; }

.sentiment-overview { padding: 19px 20px; }
.sentiment-overview p { font-size: 12px; line-height: 1.6; }
.sentiment-note { margin-bottom: 0 !important; }
.run-list { padding: 0 20px 14px; }
.run-item { padding: 13px 0; }
.run-meta, .run-message { font-size: 11px; line-height: 1.55; }
.run-message { color: var(--text-soft); }
.run-status.success { background: color-mix(in srgb, var(--green) 14%, var(--surface)); color: var(--green); }
.run-status.failed, .run-status.unavailable { background: color-mix(in srgb, var(--accent) 13%, var(--surface)); color: var(--accent); }
.run-status.running { background: color-mix(in srgb, var(--amber) 17%, var(--surface)); color: var(--amber); }
.empty-state svg { color: var(--text-soft); }
.load-more { background: var(--surface); color: var(--link); }
.load-more:hover { background: var(--surface-muted); }
.toast { background: var(--text); color: var(--surface); box-shadow: var(--shadow); }

@media (max-width: 980px) {
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .metric:nth-child(3) { border-left: 0; }
  .metric:nth-child(n+3) { border-top: 1px solid var(--border); }
}
@media (max-width: 620px) {
  .topbar { min-height: 66px; padding: 10px 14px; }
  .brand-mark { width: 34px; height: 34px; flex-basis: 34px; }
  .brand h1 { font-size: 14px; }
  .brand p { font-size: 11px; }
  .top-actions { gap: 2px; }
  .icon-button { min-width: 36px; width: 36px; height: 36px; }
  .primary-action { width: 36px; padding: 0; }
  .primary-action span { display: none; }
  .shell { padding: 18px 12px 38px; }
  .metric { min-height: 106px; padding: 15px 13px; }
  .metric strong { font-size: 23px; }
  .metric-note { white-space: normal; }
  .source-strip { gap: 6px; }
  .source-chip { padding-inline: 8px; gap: 6px; }
  .workspace { gap: 14px; }
  .toolbar { padding: 14px; }
  .advanced-filters > summary { min-height: 44px; display: flex; align-items: center; gap: 9px; padding: 0 14px; border-bottom: 1px solid var(--border); color: var(--text-soft); font-size: 12px; cursor: pointer; list-style: none; }
  .advanced-filters > summary::-webkit-details-marker { display: none; }
  .advanced-filters > summary svg { width: 15px; height: 15px; }
  .advanced-filters > summary svg:last-child { margin-left: auto; transition: transform .2s ease; }
  .advanced-filters[open] > summary svg:last-child { transform: rotate(180deg); }
  .advanced-filters > summary:has(.advanced-filter-count:not([hidden])) svg:last-child { margin-left: 0; }
  .advanced-toolbar { padding: 12px 14px; }
  .sentiment-toolbar { padding: 12px 14px; }
  .filters select { min-width: calc(50% - 4px); }
  .mention-list { padding: 0 12px 12px; }
  .mention { padding: 16px 0; }
  .mention-main { --thumbnail-width: 66px; gap: 10px; }
  .mention-thumb { width: 66px; height: 54px; flex-basis: 66px; }
  .mention-title { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media (max-width: 360px) {
  .topbar { flex-wrap: wrap; gap: 8px; }
  .brand { width: 100%; }
  .top-actions { width: 100%; justify-content: flex-end; }
  .icon-button { min-width: 40px; width: 40px; height: 40px; }
  .primary-action { width: 40px; }
}

.mention-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.snapshot-toggle { border: 0; padding: 4px 0; background: transparent; color: var(--link); font: inherit; font-size: 11px; cursor: pointer; }
.snapshot-dialog { width: min(760px, calc(100vw - 32px)); max-height: 85vh; padding: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.snapshot-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.snapshot-header, .snapshot-entry-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.snapshot-header h2 { margin: 0; font-size: 17px; }
.snapshot-header p { margin: 6px 0 0; font-size: 12px; color: var(--text-soft); overflow-wrap: anywhere; }
.snapshot-header button { flex-shrink: 0; padding: 6px 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-muted); color: var(--text); cursor: pointer; }
.snapshot-note, #snapshot-status { font-size: 12px; color: var(--text-soft); }
.snapshot-entry { padding: 16px 0; border-top: 1px solid var(--border); }
.snapshot-entry-head { flex-wrap: wrap; font-size: 12px; }
.snapshot-entry-head span { color: var(--text-soft); }
.snapshot-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.snapshot-metrics dt { color: var(--text-soft); font-size: 11px; }
.snapshot-metrics dd { margin: 3px 0 0; font-size: 16px; font-variant-numeric: tabular-nums; }
.metric-records > summary { font-size: 12px; color: var(--link); cursor: pointer; padding: 12px 0; }
.trend-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.trend-toolbar label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-soft); }
.trend-toolbar select, #trend-retry { padding: 6px 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); }
#trend-status, .trend-tooltip { font-size: 11px; color: var(--text-soft); }
.trend-summary { display: flex; flex-wrap: wrap; gap: 24px; margin: 16px 0 8px; }
.trend-summary span { display: block; color: var(--text-soft); font-size: 11px; }
.trend-summary strong { font-size: 21px; font-variant-numeric: tabular-nums; }
.trend-up { color: var(--green); }
.trend-down { color: var(--accent); }
.trend-chart { width: 100%; touch-action: pan-y; }
.trend-chart svg { display: block; width: 100%; height: auto; min-height: 185px; }
.trend-axis { fill: var(--text-soft); font-size: 11px; }
.trend-grid { stroke: var(--border); stroke-width: 1; }
.trend-line { stroke: var(--green); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.trend-point { fill: var(--green); stroke: var(--surface); stroke-width: 1.5; }
.trend-baseline { fill: var(--surface); stroke: var(--green); stroke-width: 2; }
.trend-cursor { stroke: var(--text-soft); stroke-dasharray: 3 4; }
.trend-tooltip { min-height: 34px; margin: 8px 0 14px; }
.trend-empty { padding: 50px 12px; text-align: center; color: var(--text-soft); font-size: 13px; }
@media (max-width: 620px) {
  .snapshot-dialog { padding: 16px; }
  .snapshot-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}