/* DROP workspace. Shared by React and server-rendered public pages. */
@font-face {
  font-family: Inter;
  src: url('/radar-assets/inter.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --font-ui: Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --bg: #fbfbfa;
  --sidebar: #f3f3f2;
  --panel: #fff;
  --input: #f7f7f6;
  --hover: #eaeae8;
  --selected: #e5e5e3;
  --ink: #202020;
  --muted: #666665;
  --faint: #777776;
  --line: #e2e2df;
  --strong-line: #c7c7c3;
  --accent: #242424;
  --on-accent: #fff;
  --success: #327359;
  --danger: #b54734;
  --danger-bg: #faefeb;
  --sidebar-width: 240px;
  --radius: 7px;
  --radius-panel: 10px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  color-scheme: light;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
:root[data-theme=dark] {
  --bg: #181818;
  --sidebar: #202020;
  --panel: #1d1d1d;
  --input: #222;
  --hover: #2a2a2a;
  --selected: #303030;
  --ink: #e7e7e7;
  --muted: #aaa;
  --faint: #999;
  --line: #303030;
  --strong-line: #4b4b4b;
  --accent: #e7e7e7;
  --on-accent: #161616;
  --success: #81b49a;
  --danger: #e39c8d;
  --danger-bg: #332622;
  color-scheme: dark;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
html,body,#root {
  min-width: 320px;
  min-height: 100%;
}
button,input,select,textarea {
  font: inherit;
  color: inherit;
}
button,a,input,textarea,summary {
  touch-action: manipulation;
}
button {
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
}
button:disabled,[aria-disabled=true] {
  opacity: .45;
  cursor: not-allowed;
}
a {
  color: inherit;
  text-decoration: none;
}
button,a {
  -webkit-tap-highlight-color: transparent;
}
button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible {
  outline: 2px solid var(--muted);
  outline-offset: 3px;
}
h1,h2,h3,p {
  margin: 0;
}
h1 {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.6px;
}
h2 {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.3px;
}
h3 {
  font-size: 15px;
  font-weight: 500;
}
strong,b {
  font-weight: 600;
}
svg {
  flex: none;
  stroke-width: 1.65;
}
input,textarea,select {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 9px 11px;
  background: var(--input);
  outline: none;
}
input:focus,select:focus,textarea:focus {
  border-color: var(--muted);
}
input::placeholder {
  color: var(--faint);
}
input[type=checkbox],input[type=radio] {
  accent-color: var(--ink);
}
label {
  font-size: 13px;
}
summary {
  cursor: pointer;
  list-style: none;
}
summary::-webkit-details-marker {
  display: none;
}
[hidden] {
  display: none!important;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.muted,.small-note,.quiet-retry,.coverage-line,.timezone {
  color: var(--muted);
}
.small-note {
  display: block;
  font-size: 12px;
  line-height: 1.65;
  margin-top: 14px;
}
.button,.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  font-size: 13px;
  line-height: 1.3;
}
.button:hover:not(:disabled),.cta:hover {
  background: var(--hover);
}
.button.primary,.cta {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.button.primary:hover:not(:disabled),.cta:hover {
  opacity: .88;
  background: var(--accent);
}
.button.danger {
  color: var(--danger);
  border-color: var(--danger);
}
.icon-button,.panel-key {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 6px;
  color: var(--muted);
}
.icon-button:hover,.panel-key:hover {
  background: var(--hover);
  color: var(--ink);
}
.text-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
.text-button:hover {
  text-decoration: underline;
  color: var(--ink);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 15px;
}
.brand img,.drop-symbol {
  width: 25px;
  height: 25px;
}
.drop-symbol {
  display: block;
}
.drop-symbol img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.drop-skull-wink {
  display: none;
}
.spin {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* One persistent rail, with a compact mobile drawer. */
.app-shell {
  min-height: 100dvh;
  padding-left: var(--sidebar-width);
}
.app-sidebar {
  position: fixed;
  z-index: 30;
  inset: 0 auto 0 0;
  width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  background: var(--sidebar);
  border-right: 1px solid var(--line);
  padding: 14px 10px 10px;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  padding: 0 5px;
  margin-bottom: 22px;
}
.sidebar-brand>a {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 500;
}
.sidebar-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.primary-nav,.radar-nav {
  display: grid;
  gap: 3px;
}
.primary-nav>a,.primary-nav>button,.radar-nav>button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  min-height: 35px;
  border-radius: 6px;
  text-align: left;
  color: var(--muted);
  font-size: 13px;
}
.primary-nav .active,.radar-nav .active {
  background: var(--selected);
  color: var(--ink);
}
.primary-nav>a:hover,.primary-nav>button:hover,.radar-nav>button:hover {
  background: var(--hover);
  color: var(--ink);
}
.radar-nav>button>span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.radar-nav .product-logo {
  width: 20px;
  height: 20px;
  flex: none;
}
.sidebar-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--faint);
  font-size: 11px;
  margin: 24px 0 9px;
  padding: 0 10px;
  min-height: 24px;
}
.sidebar-section-heading .icon-button {
  width: 24px;
  height: 24px;
}
.sidebar-add {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  color: var(--muted);
  font-size: 12px;
  margin-top: 6px;
}
.sidebar-empty {
  font-size: 12px;
  color: var(--muted);
  padding: 10px;
}
.sidebar-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 5px 4px;
}
.sidebar-profile {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  font-size: 12px;
}
.sidebar-profile>span:last-child {
  max-width: 145px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.initial-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--selected);
  font-size: 11px;
}
.sidebar-legal {
  display: flex;
  gap: 5px;
  font-size: 9px;
  color: var(--faint);
  padding: 8px 5px 0;
}
.sidebar-legal>span:last-child {
  margin-left: auto;
}
.mobile-topbar,.mobile-close,.sidebar-scrim {
  display: none;
}
.workspace-content,.dashboard {
  min-width: 0;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.section-heading p {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}
/* Workspace identity and source status. */
.dashboard-main {
  max-width: 1400px;
  margin: auto;
  padding: 24px 36px 30px;
}
.dashboard-top {
  padding: 0 36px;
}
.dashboard-top:empty {
  display: none;
}
.simulation-note {
  display: block;
  font-size: 11px;
  color: var(--muted);
  padding-top: 14px;
}
.dashboard-title {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 16px;
  gap: 20px;
}
.competitor-title {
  display: flex;
  gap: 12px;
  align-items: start;
  min-width: 0;
}
.large-rival {
  width: 36px;
  height: 36px;
  flex: none;
}
.product-logo {
  display: inline-flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  overflow: hidden;
  background: var(--hover);
}
.product-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-logo-monogram {
  font-size: 12px;
}
.competitor-title h1 {
  font-size: 23px;
}
.competitor-title>div>a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
  overflow-wrap: anywhere;
}
.handle-title {
  font-size: 13px;
  color: var(--muted);
  margin-left: 10px;
}
.agent-line {
  font-size: 12px;
  color: var(--muted);
  margin-top: 9px;
}
.source-statuses {
  display: flex;
  gap: 13px;
  margin: 10px 0 14px;
}
.source-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.platform-icon {
  object-fit: contain;
  flex: none;
  vertical-align: middle;
}
.source-status i,.status>span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--success);
}
.source-error i {
  background: var(--danger);
}
.quiet-retry,.coverage-line {
  font-size: 12px;
  line-height: 1.7;
  margin: 10px 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.quiet-retry-details {
  font-size: 12px;
  margin: 12px 0;
}
.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--muted);
}
.title-actions {
  display: flex;
  gap: 8px;
}
.site-brief {
  border-block: 1px solid var(--line);
  margin: 20px 0;
}
.site-brief>summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 0;
  font-size: 12px;
}
.site-brief>summary>svg {
  margin-left: auto;
}
.brief-count,.source-limited {
  font-size: 11px;
  color: var(--muted);
}
.analysis-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 12px 0 22px;
  font-size: 12px;
  line-height: 1.8;
}
.analysis-details p {
  margin: 8px 0;
  color: var(--muted);
}
.analysis-details a {
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.analysis-details blockquote,.post-context blockquote {
  border-left: 1px solid var(--strong-line);
  padding-left: 12px;
  margin: 10px 0;
  color: var(--muted);
}
.keyword-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.keyword-list span {
  background: var(--hover);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
}
.search-activity {
  grid-column: 1/-1;
}
.search-activity summary,.planned-queries summary {
  display: flex;
  gap: 7px;
  align-items: center;
}
.planned-queries>div,.search-activity>div {
  border-left: 1px solid var(--line);
  padding-left: 12px;
  margin-top: 8px;
  overflow-wrap: anywhere;
}
.planned-queries b {
  margin-right: 10px;
}
.analysis-limitation {
  color: var(--danger)!important;
}
.audience-profile {
  grid-column: 1/-1;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.audience-traits {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 18px;
  margin-top: 15px;
}
.identity-recovery {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 16px 0;
}
.identity-recovery>div {
  display: flex;
  gap: 10px;
  margin: 10px 0;
}
.identity-recovery input {
  flex: 1;
}
.identity-recovery small {
  color: var(--muted);
}
/* Filters, timeline and evidence list. */
.result-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 18px 0;
}
.result-tabs,.time-controls,.attitude-controls,.platform-filters,.radar-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.result-controls button,.platform-filters button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 9px;
  min-height: 32px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--muted);
}
.result-controls button.active,.platform-filters button.selected {
  background: var(--selected);
  color: var(--ink);
}
.result-controls button:hover,.platform-filters button:hover {
  background: var(--hover);
}
.result-controls svg {
  width: 15px;
  height: 15px;
}
.radar-toolbar {
  gap: 12px;
}
.timezone {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
}
.preview-overview>summary {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}
.preview-overview>summary>span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.radar-panel {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 22px;
}
.panel-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.mention-total {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.mention-total>strong,.mention-total .animated-count {
  font-size: 19px;
  font-weight: 500;
}
.mention-total>span {
  font-size: 12px;
  color: var(--muted);
}
.clear-selection,.evidence-filter {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 11px;
  color: var(--muted);
}
.timeline-scroll {
  overflow: auto;
}
.timeline-columns {
  display: flex;
  align-items: end;
  gap: 3px;
  padding-top: 12px;
}
.time-column {
  flex: 1;
  min-width: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}
.time-key {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  gap: 8px;
  min-width: 100%;
  padding: 8px 2px;
  border-radius: 6px;
}
.time-column.selected .time-key {
  background: var(--selected);
}
.time-column:hover .time-key {
  background: var(--hover);
}
.column-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  height: 140px;
  gap: 5px;
}
.time-label {
  font-size: 10px;
  white-space: nowrap;
  color: var(--muted);
  min-height: 16px;
}
.hide-label {
  visibility: hidden;
}
.avatar {
  display: inline-flex;
  position: relative;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex: none;
  background: var(--hover);
  font-size: 10px;
  color: var(--muted);
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar.tiny {
  width: 25px;
  height: 25px;
}
.avatar.example-portrait>img {
  position: absolute;
  max-width: none;
  width: 500%;
  height: 400%;
  object-fit: fill;
}
.empty-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--line);
}
.locked-person,.private-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  background: var(--hover);
  color: var(--muted);
}
.overflow-count {
  font-size: 10px;
  color: var(--muted);
}
.timeline-access {
  display: flex;
  gap: 7px;
  font-size: 12px;
  color: var(--muted);
  margin-top: 12px;
}
.posts-heading {
  margin: 18px 0;
}
.post-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
  flex-wrap: wrap;
}
.sort-select {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.sort-select select {
  padding: 6px 9px;
  font-size: 12px;
}
.post-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  column-gap: 16px;
  grid-auto-rows: 1px;
  row-gap: 0;
  align-items: start;
}
.post-card {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 10px;
  padding: 18px;
  overflow-wrap: anywhere;
}
.post-card.is-link:hover {
  border-color: var(--strong-line);
}
.post-top {
  display: flex;
  align-items: center;
  gap: 9px;
}
.post-author {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.post-author strong {
  font-size: 13px;
  font-weight: 500;
}
.post-author>span {
  font-size: 11px;
  color: var(--muted);
}
.sentiment-tag {
  display: flex;
  align-items: center;
  color: var(--muted);
}
.post-top>svg,.post-top>span:last-child svg {
  width: 17px;
  height: 17px;
}
.post-source {
  display: flex;
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
  margin-top: 13px;
}
.platform-badge {
  display: inline-flex;
  align-items: center;
}
.post-signal {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
}
.post-text {
  font-size: 14px;
  line-height: 1.75;
  margin: 15px 0;
}
.need-evidence {
  font-weight: 500;
}
.reddit-title {
  font-size: 12px;
  color: var(--muted);
  margin-top: 9px;
}
.post-reason {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.75;
}
.post-reason strong {
  display: block;
  font-size: 12px;
  color: var(--ink);
  margin-bottom: 5px;
}
.post-context {
  margin: 13px 0;
  font-size: 12px;
  line-height: 1.75;
}
.post-context>summary {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
}
.post-context[open]>summary {
  margin-bottom: 12px;
}
.post-context p {
  color: var(--muted);
  margin: 6px 0;
}
.post-context a {
  text-decoration: underline;
}
.post-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 13px;
  margin-top: 16px;
  font-size: 11px;
  color: var(--muted);
}
.post-footer>span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.post-footer time {
  margin-left: auto;
}
.post-open {
  display: inline-flex;
  gap: 5px;
  width: auto;
  height: auto;
  font-size: 11px;
  color: var(--ink);
}
.excerpt-lock {
  margin-top: 14px;
  font-size: 11px;
  color: var(--muted);
  display: grid;
  gap: 10px;
}
.post-unlock {
  font-size: 12px;
}
.preview-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  margin: 18px 0;
  font-size: 12px;
}
.preview-notice strong {
  display: block;
  margin-bottom: 6px;
}
.preview-notice>div {
  display: flex;
  gap: 8px;
}
.insight-inline {
  border-left: 2px solid var(--strong-line);
  padding: 12px 16px;
  margin: 16px 0;
  display: flex;
  align-items: start;
  gap: 12px;
  font-size: 12px;
}
.insight-inline p {
  margin: 5px 0;
  color: var(--muted);
}
.show-more {
  margin: 20px auto;
  display: flex;
}
.dashboard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  color: var(--muted);
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid var(--line);
}
/* Honest status, empty/error and dialogs. */
.page-loading,.empty-state,.listening-state {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  min-height: 240px;
  padding: 32px 20px;
  text-align: center;
}
.empty-state p,.listening-state p {
  max-width: 540px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--muted);
}
.empty-state h3,.listening-state h3 {
  font-size: 16px;
}
.listening-cards {
  display: none;
}
.scan-status {
  padding: 16px 0 16px 16px;
  border-left: 1px solid var(--strong-line);
  margin: 18px 0;
  font-size: 12px;
}
.scan-status-heading {
  display: flex;
  gap: 10px;
  align-items: start;
}
.scan-status-heading>div {
  flex: 1;
}
.scan-status-heading strong {
  display: block;
  font-weight: 500;
  font-size: 13px;
}
.scan-status-heading>div>span {
  display: block;
  color: var(--muted);
  margin-top: 4px;
}
.scan-elapsed {
  color: var(--muted);
  font-size: 11px;
}
.scan-stages {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 15px 0;
  color: var(--muted);
}
.scan-stages>span {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}
.scan-stages .current {
  color: var(--ink);
}
.scan-stages .done {
  color: var(--success);
}
.scan-tallies {
  display: flex;
  gap: 18px;
  margin-top: 12px;
  color: var(--muted);
}
.scan-results {
  margin-top: 12px;
}
.chart-tooltip {
  position: fixed;
  z-index: 2000;
  pointer-events: none;
  background: var(--ink);
  color: var(--bg);
  padding: 9px 11px;
  border-radius: 6px;
  font-size: 11px;
  display: grid;
  gap: 4px;
}
.tooltip-sentiments {
  display: flex;
  gap: 6px;
}
.dialog {
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--strong-line);
  border-radius: 12px;
  padding: 28px;
  width: min(460px,calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  margin: auto;
}
.dialog::backdrop {
  background: #0005;
}
.dialog h2 {
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -.4px;
  margin-bottom: 12px;
  padding-right: 20px;
}
.dialog>p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 18px;
}
.dialog .close {
  position: absolute;
  right: 12px;
  top: 12px;
}
.dialog-icon {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
  color: var(--muted);
}
.dialog>.brand {
  margin-bottom: 22px;
}
.auth-providers {
  display: grid;
  gap: 8px;
}
.auth-providers .button {
  justify-content: center;
}
.auth-button {
  display: flex;
  width: 100%;
  margin-top: 10px;
}
.local-login-controls {
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding-top: 5px;
}
.local-login-controls .text-button {
  margin-top: 10px;
}
.dialog .small-note a {
  text-decoration: underline;
}
.url-form {
  display: flex;
  align-items: end;
  gap: 8px;
}
.url-input-group {
  flex: 1;
  min-width: 0;
}
.url-label {
  display: block;
  margin-bottom: 7px;
}
.url-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  min-height: 42px;
  border: 1px solid var(--strong-line);
  border-radius: 7px;
  background: var(--input);
}
.url-field input {
  width: 100%;
  flex: 1;
  border: 0;
  background: none;
  padding: 10px 0;
  font-size: 14px;
}
.url-field:focus-within {
  border-color: var(--ink);
}
.url-field svg {
  color: var(--muted);
  width: 16px;
}
.url-submit {
  background: var(--accent);
  color: var(--on-accent);
  width: 42px;
  height: 42px;
}
.url-submit:hover {
  background: var(--accent);
  color: var(--on-accent);
  opacity: .9;
}
.url-hint {
  font-size: 12px;
  color: var(--muted);
}
.example-url,.add-note {
  font-size: 11px;
  color: var(--muted);
  margin-top: 16px;
  line-height: 1.7;
}
.add-note {
  display: flex;
  gap: 8px;
}
.pricing-dialog,.paywall,.unlock-dialog {
  width: min(680px,calc(100vw - 32px));
}
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 20px 0;
}
.plan-card {
  text-align: left;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
}
.plan-card.chosen {
  border-color: var(--ink);
  background: var(--input);
}
.plan-top {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.plan-radio {
  width: 16px;
  height: 16px;
  border: 1px solid var(--strong-line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.plan-card .price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 14px 0;
}
.plan-card .price strong {
  font-size: 24px;
  font-weight: 500;
}
.plan-card .price span {
  font-size: 11px;
  color: var(--muted);
}
.plan-card p,.plan-card li {
  font-size: 12px;
  color: var(--muted);
}
.plan-card ul {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  gap: 8px;
}
.plan-card li {
  display: flex;
  gap: 6px;
  align-items: start;
}
.plan-card li svg {
  margin-top: 3px;
}
.eyebrow {
  display: block;
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--muted);
  margin-bottom: 12px;
}
.dialog>.button {
  margin-top: 10px;
  margin-right: 8px;
}
.theme-settings {
  display: grid;
  grid-template-columns: 1fr 145px;
  align-items: center;
  gap: 10px;
  margin: 20px 0;
  padding: 16px 0;
  border-block: 1px solid var(--line);
}
.theme-settings p {
  grid-column: 1/-1;
  font-size: 11px;
  color: var(--muted);
}
.theme-settings select {
  font-size: 12px;
}
.help-dialog ol {
  padding-left: 20px;
}
.help-dialog li {
  margin: 16px 0;
}
.help-dialog li p {
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
}
.toast {
  position: fixed;
  inset: auto auto 20px 50%;
  transform: translateX(-50%);
  z-index: 2000;
  max-width: calc(100vw - 32px);
  width: max-content;
  margin: 0;
  padding: 12px 15px;
  border: 1px solid var(--strong-line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font-size: 13px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.local-reset {
  position: fixed;
  z-index: 40;
  right: 12px;
  bottom: 10px;
  font-size: 10px;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 4px 7px;
  border-radius: 5px;
  display: flex;
  gap: 5px;
  align-items: center;
}
.empty-dashboard {
  max-width: 700px;
  margin: 70px auto;
  padding: 24px;
}
.empty-dashboard .hero-offer {
  margin: 10px 0 28px;
  color: var(--muted);
}
.example-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.example-chips button {
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--line);
  padding: 4px 7px;
  border-radius: 5px;
}
/* Public documents share type, flat controls and neutral surfaces. */
.public-page {
  max-width: 1040px;
  padding: 0 36px;
  margin: auto;
}
.public-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.public-header .brand {
  font-size: 14px;
}
.public-header .brand img {
  width: 25px;
  height: 25px;
}
.panel-navigation {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 12px;
}
.public-page main {
  padding: 30px 0;
}
.public-page h1 {
  max-width: 790px;
  font-size: 26px;
  line-height: 1.35;
}
.public-page h2 {
  font-size: 19px;
  margin: 28px 0 10px;
}
.public-page h3 {
  margin: 20px 0 8px;
}
.public-page p {
  line-height: 1.8;
  font-size: 14px;
  margin: 12px 0;
  color: var(--muted);
}
.public-page p strong {
  color: var(--ink);
}
.public-page p a,.public-page li a,.public-page td a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.public-page li {
  font-size: 14px;
  line-height: 1.8;
  margin: 10px 0;
  color: var(--muted);
}
.public-page li a {
  color: var(--ink);
}
.public-page .lede {
  font-size: 15px;
  max-width: 780px;
}
.page-meta,.public-page .page-meta {
  font-size: 11px;
  color: var(--faint);
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 15px;
}
.breadcrumbs li {
  font-size: 11px;
  margin: 0;
}
.answer,.worked-example {
  padding: 16px 18px;
  border-left: 2px solid var(--strong-line);
  background: var(--input);
  margin: 24px 0;
}
.facts {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  line-height: 1.7;
  margin: 20px 0;
  text-align: left;
}
.facts caption {
  text-align: left;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 11px;
}
.facts th,.facts td {
  padding: 12px 14px;
  border: 1px solid var(--line);
  vertical-align: top;
  overflow-wrap: anywhere;
}
.facts th {
  font-weight: 500;
  background: var(--input);
}
.facts td {
  color: var(--muted);
}
.table-scroll {
  overflow: auto;
}
.table-scroll .facts {
  min-width: 680px;
}
.public-page .price {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 24px 0;
}
.public-page .price>div {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 7px;
}
.public-page .price strong {
  font-size: 26px;
  font-weight: 500;
}
.public-page .price span {
  font-size: 13px;
}
.example-post {
  border-top: 1px solid var(--line);
  padding: 18px 0;
}
.example-post h2 {
  margin: 0;
  font-size: 15px;
}
.example-post blockquote {
  font-size: 16px;
  line-height: 1.7;
  margin: 16px 0;
}
.public-page details {
  border-bottom: 1px solid var(--line);
  padding: 15px 0;
}
.public-page details summary {
  font-size: 14px;
  font-weight: 500;
}
.panel-footer {
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-wrap: wrap;
  gap: 18px;
  padding: 24px 0 12px;
  border-top: 1px solid var(--line);
  margin-top: 36px;
  color: var(--muted);
  font-size: 11px;
}
.panel-footer-primary,.panel-footer-secondary {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}
.panel-footer>p {
  width: 100%;
  font-size: 10px;
  margin: 0;
  color: var(--faint);
}
.footer-products {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  width: 100%;
  color: var(--muted);
  font-size: 12px;
}
.footer-products a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  white-space: nowrap;
  text-decoration: none;
}
.footer-products a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.fl-site-footer .footer-products {
  margin-top: 16px;
}
.panel-more {
  position: relative;
  padding: 0!important;
  border: 0!important;
}
.panel-more summary {
  font-size: 11px!important;
  font-weight: 400!important;
}
.panel-more nav {
  position: absolute;
  bottom: 25px;
  right: 0;
  z-index: 20;
  display: grid;
  gap: 2px;
  max-height: 350px;
  overflow: auto;
  min-width: 210px;
  padding: 7px;
  border: 1px solid var(--strong-line);
  border-radius: 8px;
  background: var(--panel);
}
.panel-more nav a {
  padding: 6px 8px;
  font-size: 12px;
  border-radius: 4px;
}
.panel-more nav a:hover {
  background: var(--hover);
}
.legal-page {
  max-width: 820px;
  padding: 36px;
  margin: auto;
}
.legal-page h1 {
  margin-bottom: 20px;
}
.legal-page h2 {
  margin: 26px 0 12px;
}
.legal-page p,.legal-page li {
  color: var(--muted);
  line-height: 1.8;
  font-size: 14px;
  margin: 12px 0;
}
:root[data-theme=dark] .platform-icon {
  filter: invert(1);
}
@media(min-width:1600px) {
  .post-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
}
@media(max-width:1100px) {
  .dashboard-main {
    padding: 24px;
  }
  .radar-toolbar {
    gap: 8px;
  }
  .timezone {
    width: 100%;
  }
  .post-grid {
    grid-template-columns: 1fr;
  }
  .audience-traits {
    grid-template-columns: repeat(2,1fr);
  }
}
@media(max-width:760px) {
  .app-shell {
    padding-left: 0;
    padding-top: 48px;
  }
  .app-sidebar {
    transform: translateX(-100%);
    visibility: hidden;
    z-index: 100;
  }
  .app-sidebar.is-open {
    transform: none;
    visibility: visible;
  }
  .sidebar-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: #0005;
    z-index: 99;
    width: 100%;
    height: 100%;
  }
  .mobile-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 48px;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
    font-size: 12px;
  }
  .mobile-close {
    display: flex;
  }
  .dashboard-main {
    padding: 22px 18px;
  }
  .dashboard-top {
    padding-inline: 18px;
  }
  .competitor-title h1 {
    font-size: 22px;
  }
  .competitor-title {
    gap: 9px;
  }
  .large-rival {
    width: 30px;
    height: 30px;
  }
  .brief-count {
    display: none;
  }
  .analysis-details {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .audience-traits {
    grid-template-columns: 1fr;
  }
  .result-controls {
    gap: 12px;
  }
  .radar-toolbar {
    width: 100%;
    justify-content: space-between;
  }
  .radar-panel {
    padding: 15px 12px;
  }
  .post-grid {
    grid-template-columns: 1fr;
  }
  .post-card {
    padding: 16px;
  }
  .post-footer {
    gap: 8px;
  }
  .post-open {
    margin-left: auto;
  }
  .post-footer time {
    margin: 0;
  }
  .preview-notice {
    display: grid;
  }
  .pricing-grid {
    grid-template-columns: 1fr;
  }
  .dialog {
    padding: 24px 20px;
  }
  .dialog h2 {
    font-size: 21px;
  }
  .dialog input {
    font-size: 16px;
  }
  .empty-dashboard {
    margin: 35px auto;
    padding: 20px;
  }
  .identity-recovery>div {
    flex-wrap: wrap;
  }
  .identity-recovery input {
    width: 100%;
    flex-basis: 100%;
  }
  .panel-footer {
    margin-top: 28px;
    gap: 18px;
  }
  .panel-footer-primary,.panel-footer-secondary {
    gap: 14px;
  }
  .public-page {
    padding: 0 20px;
  }
  .public-header {
    padding: 18px 0;
  }
  .panel-navigation {
    gap: 12px;
    font-size: 11px;
  }
  .public-page main {
    padding-top: 24px;
  }
  .public-page h1 {
    font-size: 24px;
  }
  .public-page .price {
    grid-template-columns: 1fr;
  }
  .facts th,.facts td {
    padding: 8px;
  }
  .public-page .facts {
    font-size: 11px;
  }
  .public-page ul,.public-page ol {
    padding-left: 20px;
  }
  .public-page .breadcrumbs ol {
    padding: 0;
  }
  .theme-settings {
    grid-template-columns: 1fr 135px;
  }
  .timezone {
    margin-top: 3px;
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation: none!important;
    transition: none!important;
    scroll-behavior: auto!important;
  }
}

/* Popover position is calculated by the shared delegated hint script. */
.panel-tooltip {
  position: fixed; inset: auto; margin: 0; z-index: 10000;
  max-width: min(260px, calc(100vw - 24px)); width: max-content;
  padding: 7px 10px; border: 1px solid var(--strong-line); border-radius: 6px;
  background: var(--panel); color: var(--ink);
  font: 400 12px/1.5 var(--font-ui); text-align: center; overflow-wrap: anywhere;
}
.panel-tooltip[hidden] { display: none; }
.panel-tooltip::backdrop { background: transparent; pointer-events: none; }
.value-paywall-counts { display: flex; justify-content: center; gap: 28px; margin: 24px 0; }
.value-paywall-counts > div { display: grid; justify-items: center; gap: 6px; }
.value-paywall-counts > div > :last-child { color: var(--muted); font-size: 12px; }
@media (forced-colors: active) {
  .panel-tooltip { border-color: CanvasText; background: Canvas; color: CanvasText; }
}