:root {
  /* One scale for the whole app: every heading and every body text picks a step
     here, so the same kind of content is the same size on every page. */
  --fs-page: 26px;      /* page title (账号总览 / 实时洞察 / 贴文标题) */
  --fs-section: 19px;   /* section heading (摘要 / 影响浏览量的因素) */
  --fs-sub: 15px;       /* sub heading inside a section */
  --fs-body: 14px;      /* normal text, table cells */
  --fs-note: 12px;      /* captions, source notes, timestamps */
  --fs-stat: 28px;      /* headline figures */
  --fs-stat-sm: 20px;   /* secondary figures */

  /* Every data block lines up on the same column, whichever tab it is in. */
  /* Wide enough for the hour-by-hour table's seventeen columns, which is the
     widest thing the app shows; everything else shares it so blocks still line
     up down the page. Prose inside sets its own measure - see .text. */
  --content-width: 1400px;
  --prose-width: 78ch;
  --block-pad: 26px;
  --block-gap: 18px;
  --block-radius: 16px;

  --bg: #f5f6fa;
  --panel: #fff;
  --ink: #202433;
  --muted: #7a8193;
  --line: #e8eaf1;
  --accent: #6257df;
  --soft: #efedff;
  --green: #218564;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  font:
    14px/1.6 -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Noto Sans",
    sans-serif;
  color: var(--ink);
}
button,
input,
select {
  font: inherit;
}
button,
a,
input,
select {
  outline-offset: 3px;
}
button {
  border: 1px solid var(--line);
  background: white;
  border-radius: 9px;
  padding: 7px 13px;
  cursor: pointer;
  color: var(--ink);
}
button:hover {
  border-color: var(--accent);
  color: var(--accent);
}
button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
button:disabled {
  opacity: 0.5;
  cursor: default;
}
input,
select {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  padding: 9px 11px;
  min-width: 0;
}
/* Shared by data-center and publishing, including dynamically created forms. */
select {
  appearance: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  padding-right: 32px;
  border-radius: 10px;
  color: var(--ink);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23818aa2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 10px center;
  background-repeat: no-repeat;
  transition: border-color .15s, box-shadow .15s;
}
select:hover:not(:disabled) { border-color: #c7bfff; }
select:focus-visible { outline: 2px solid #b3a8ff; outline-offset: 2px; }
select:disabled { cursor: not-allowed; opacity: .55; }
@supports (appearance: base-select) {
  select, select::picker(select) { appearance: base-select; }
  select { display: inline-flex; background-image: none; padding-right: 11px; align-items: center; gap: 10px; }
  select > button {
    display: flex;
    flex: 1;
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
  }
  select selectedcontent { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  select::picker-icon {
    content: "";
    flex: 0 0 14px;
    margin-left: auto;
    width: 14px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23818aa2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform .15s;
  }
  select:open { border-color: #b3a8ff; box-shadow: 0 0 0 3px #7864ff12; }
  select:open::picker-icon { transform: rotate(180deg); }
  select::picker(select) {
    width: max-content;
    min-width: anchor-size(width);
    max-width: min(420px, calc(100vw - 24px));
    max-height: min(360px, 55dvh);
    margin: 6px 0;
    padding: 6px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
    color: var(--ink);
    box-shadow: 0 10px 32px #29224424, 0 2px 6px #2922440a;
    font: 400 var(--fs-body)/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", sans-serif;
    scrollbar-width: thin;
    scrollbar-color: #d1cbea transparent;
  }
  select option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 7px;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
  }
  select option:checked { background: var(--soft); color: var(--accent); }
  select option:hover:not(:disabled), select option:focus-visible { background: #f3f0ff; color: var(--accent); outline: none; }
  select option:disabled { opacity: .45; cursor: not-allowed; }
  select option::checkmark { order: 1; margin-left: auto; color: var(--accent); }
  select optgroup { padding: 4px; font-weight: 400; }
}
a {
  color: var(--accent);
  text-decoration: none;
}
.pill {
  display: inline-block;
  font-size: var(--fs-note);
  border-radius: 6px;
  padding: 3px 8px;
  background: var(--soft);
  color: var(--accent);
}
.muted,
small {
  color: var(--muted);
}
small {
  font-size: var(--fs-note);
}
.page {
  max-width: 1600px;
  padding: 34px 40px 110px;
  margin: auto;
}
h1 {
  font-size: var(--fs-page);
  margin: 0 0 4px;
}
h2 {
  font-size: var(--fs-section);
  margin: 0 0 18px;
}
h3 {
  font-size: var(--fs-sub);
  margin: 0 0 12px;
}
.eyebrow {
  font-size: var(--fs-note);
  letter-spacing: 2px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 8px;
}
.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 22px 0;
}
.toolbar .spacer {
  flex: 1;
}
.panel {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--block-radius);
  padding: var(--block-pad);
  margin-bottom: var(--block-gap);
  /* Same column as .platform-overview, so switching tabs never shifts content. */
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
}
.empty {
  padding: 42px 22px;
  text-align: center;
  color: var(--muted);
}
.empty strong {
  display: block;
  color: var(--ink);
  font-size: var(--fs-section);
  margin-bottom: 8px;
}
.login {
  max-width: 440px;
  margin: 12vh auto;
}
.login input {
  width: 100%;
  margin: 18px 0;
}
.table-wrap {
  overflow: auto;
  background: white;
  border: 1px solid var(--line);
  border-radius: 14px;
}
table {
  border-collapse: collapse;
  width: 100%;
  text-align: left;
}
th {
  font-size: var(--fs-note);
  color: var(--muted);
  font-weight: 500;
  background: #fafbfe;
}
td,
th {
  padding: 17px 18px;
  border-bottom: 1px solid var(--line);
}
td.num,
th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
tr[data-account-row] {
  cursor: pointer;
}
tbody tr:hover {
  background: #fafaff;
}
/* A tapped account says it is opening while its figures arrive. */
.opening-note { display: none; margin-left: 6px; color: var(--accent); font-weight: 500; white-space: nowrap; }
.opening-note::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 4px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -1px; animation: opening-spin .8s linear infinite; }
.is-opening .opening-note { display: inline; }
tr.is-opening td, tr.is-opening:hover td { background: var(--soft); }
.account-card.is-opening { border-color: var(--accent); background: var(--soft); }
.is-opening .avatar { background: var(--panel); }
@keyframes opening-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .opening-note::before { animation: none; } }
.identity {
  display: flex;
  align-items: center;
  gap: 11px;
}
.avatar {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: 50%;
  background: var(--soft);
}
.initial {
  display: grid;
  place-items: center;
  color: var(--accent);
  font-weight: 700;
}
.identity small {
  display: block;
}
.work {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  height: 100vh;
}
.work > aside { grid-column: 1; }
.work > .detail { grid-column: 2; min-width: 0; }
.mobile-work {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: white;
}
.mobile-account-header {
  display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
  height: 56px; padding: 6px 16px 6px 6px; border-bottom: 1px solid var(--line);
}
.mobile-header-back { flex-shrink: 0; min-width: 38px; height: 44px; padding: 0 8px; border: 0; background: transparent; color: var(--accent); font-size: 15px; white-space: nowrap; }
#home.mobile-header-back { font-size: 26px; line-height: 1; color: var(--muted); }
.mobile-header-back[hidden] { display: none; }
.mobile-account-switch { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.mobile-account-switch .avatar { width: 30px; height: 30px; flex-shrink: 0; }
.mobile-account-switch strong { min-width: 0; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mobile-account-switch svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--muted); }
.mobile-account-switch select { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; opacity: 0; cursor: pointer; }
.mobile-stage { position: relative; flex: 1 1 auto; min-height: 0; }
.mobile-stage > .mobile-body, .mobile-post-page {
  position: absolute; inset: 0; max-height: none; min-width: 0; overflow: auto;
  padding: 14px 16px calc(96px + env(safe-area-inset-bottom, 0px));
  border: 0; scrollbar-gutter: auto; overscroll-behavior-y: contain; background: white;
}
body:has(#selection:not([hidden])) .mobile-stage > * { padding-bottom: calc(156px + env(safe-area-inset-bottom, 0px)); }
.mobile-post-page, .mobile-work[data-list="true"] .mobile-body { visibility: hidden; }
.mobile-work[data-list="true"] .mobile-post-page { visibility: visible; }
.mobile-post-page .post-filters { margin: 0; }
.mobile-post-page .post-filters #sort { flex-basis: 108px; width: 108px; }
.mobile-post-page .source-note { padding: 0; margin: 8px 0 0; }
#mobile-list-status { margin: 8px 0 0; font-size: 12px; color: var(--accent); }
#mobile-list-status:empty { margin: 0; }
.mobile-post-page .post-item { padding: 13px 10px; margin: 7px -10px 0; border-radius: 0; border: 0; border-bottom: 1px solid var(--line); }
.mobile-post-page .post-item.active { background: var(--soft); border-radius: 10px; border-bottom-color: transparent; }
.mobile-post-page .post-item .copy { min-width: 0; }
.mobile-post-page .post-preview { display: block; }
.mobile-post-page .post-preview p { margin: 7px 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; line-height: 1.7; }
.mobile-post-page .post-views { display: flex; align-items: baseline; gap: 4px; text-align: left; }
.mobile-post-page .post-views strong { font-size: 18px; }
.mobile-post-page .post-views small { font-size: 11px; color: var(--muted); }
.mobile-post-page .post-item .mini-metrics { margin-top: 8px; }
.mobile-post-page .post-item small { font-size: 12px; }
.mobile-post-page .post-item .copy > small:first-child { color: var(--muted); }
.mobile-page-switch {
  position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 30;
  display: flex; padding: 4px; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); box-shadow: 0 6px 22px #20244324;
}
.mobile-page-switch button { min-width: 118px; height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: #5d6475; font-size: 14px; white-space: nowrap; }
.mobile-page-switch button.is-current { background: var(--accent); color: white; font-weight: 600; }
.mobile-page-switch small { margin-left: 3px; font-size: 11px; font-weight: 400; color: inherit; opacity: .8; }
body:has(.mobile-page-switch) #selection { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
.mobile-profile { border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 18px; }
.mobile-profile .identity { padding: 0; }
.mobile-profile-summary { margin: 10px 0 6px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: pre-wrap; }
.mobile-profile-full { white-space: pre-wrap; overflow-wrap: anywhere; }
.mobile-profile summary { color: var(--accent); font-size: var(--fs-note); }
.mobile-profile .account-sidebar-details { padding: 0; margin: 0; }
.mobile-profile .account-profile-bio { margin: 10px 0; }
.mobile-profile .account-facts { gap: 8px; margin-top: 10px; padding-top: 10px; }
.mobile-work .platform-heading { gap: 8px; }
.mobile-work .platform-heading h1 { font-size: 22px; }
.mobile-work .platform-summary button { padding: 10px 12px; border-radius: 12px; }
.mobile-work .platform-summary strong { margin: 4px 0 0; font-size: 23px; }
.mobile-work .platform-change { font-size: var(--fs-note); }
.mobile-work .platform-summary button.selected { background: var(--soft); border-color: #dcd7fc; }
.mobile-work .platform-sheet { border: 0; border-radius: 0; }
.mobile-work .platform-section { padding: 18px 0; }
.mobile-work .platform-section h2 { margin-bottom: 12px; }
.mobile-work[data-screen="detail"] .eyebrow { display: none; }
.mobile-work[data-screen="detail"] .detail > h1 {
  font-size: 22px;
  line-height: 1.5;
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.mobile-work[data-screen="detail"] .detail > p { margin-top: 8px; margin-bottom: 10px; }
aside {
  overflow: auto;
  background: white;
  border-right: 1px solid var(--line);
  padding: 20px 14px 90px;
}
.detail {
  overflow: auto;
  padding: 28px 34px 100px;
}
.thread-navigation { margin-top: 12px; margin-bottom: 12px; min-width: 0; }
.thread-summary { margin: 0; color: var(--muted); font-size: var(--fs-note); }
.thread-nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  padding: 4px 2px 6px;
  margin-top: 8px;
}
.thread-button {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 132px;
  white-space: nowrap;
  min-height: 62px;
  padding: 8px 12px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfbfd;
  color: var(--muted);
}
.thread-button:hover { border-color: var(--accent); color: var(--accent); }
.thread-button.selected { border-color: var(--accent); background: var(--soft); color: var(--accent); }
.thread-button-label { font-size: var(--fs-note); }
.thread-button-data { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; font-variant-numeric: tabular-nums; }
.thread-button-views { font-size: var(--fs-body); color: var(--ink); }
.thread-button-change { font-size: var(--fs-note); }
.thread-button-change.down { color: #b04a3a; }
.thread-button-change.up { color: #2f7a4f; }
.thread-button-change.flat { color: var(--muted); }
.aside-head {
  padding: 4px 0 6px;
}
.aside-head .identity { padding: 0 12px; }
.account-navigation {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 16px;
}
.account-navigation #home { flex: 0 0 auto; white-space: nowrap; }
.account-navigation #account-switch { flex: 1 1 0; width: 0; min-width: 0; }
.post-filters { display: flex; align-items: stretch; gap: 8px; }
.post-filters #search { flex: 1 1 0; width: 0; min-width: 0; }
.post-filters #sort { flex: 0 0 112px; width: 112px; min-width: 0; }
.work > aside > .source-note { padding: 0 12px; }
.overview {
  width: 100%;
  text-align: left;
  padding: 15px 11px;
  margin-bottom: 14px;
  border-radius: 10px;
}
.overview small { display: block; }
.active {
  background: var(--soft) !important;
  color: var(--accent) !important;
  border-color: #d9d4ff !important;
}
.post-item {
  position: relative;
  padding: 16px 12px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  border-radius: 8px;
}
.post-item input {
  position: absolute;
  top: 20px;
  right: 12px;
  margin: 0;
}
.post-item .copy {
  min-width: 0;
}
.post-item .copy > small:first-child { display: block; padding-right: 24px; }
.post-item p {
  margin: 5px 0 9px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
  line-height: 1.5;
}
.post-item small {
  font-size: var(--fs-note);
}
.mini-metrics {
  display: flex;
  gap: 12px;
  color: var(--muted);
  font-size: var(--fs-note);
}
.account-title {
  display: flex;
  align-items: center;
  gap: 15px;
}
.account-title .avatar {
  width: 54px;
  height: 54px;
}
.account-title h1 {
  font-size: var(--fs-page);
}
.desc {
  white-space: pre-wrap;
  max-width: 900px;
  margin: 15px 0;
  color: #565e70;
}
.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 0;
}
.metric {
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 17px;
  text-align: left;
}
.metric small {
  display: block;
}
.metric strong {
  display: block;
  font-size: var(--fs-page);
  font-weight: 650;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  margin: 5px 0;
}
.tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  margin: 22px 0 20px;
  overflow: auto;
}
.tabs button {
  border: 0;
  background: none;
  border-radius: 0;
  padding: 12px 15px;
  white-space: nowrap;
}
.tabs button.active {
  border-bottom: 2px solid var(--accent) !important;
  background: none !important;
}
.chart {
  position: relative;
  min-height: 230px;
}
.chart svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 320px;
}
.chart line.grid {
  stroke: var(--line);
}
.chart text {
  fill: var(--muted);
  font-size: var(--fs-note);
}
.chart .series {
  stroke: var(--accent);
  stroke-width: 2.5;
  fill: none;
  stroke-linejoin: round;
}
.chart .dot {
  fill: var(--accent);
}
.chart .bar {
  fill: #9c94ee;
}
.chart .hit {
  fill: transparent;
  cursor: crosshair;
}
.chart-tip {
  font-size: var(--fs-note);
  color: var(--muted);
  min-height: 23px;
  margin-top: 8px;
}
.chart .cursor {
  stroke: #aaa3e8;
  stroke-dasharray: 4;
}
.chart-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.chart-head h2 {
  margin-bottom: 0;
}
.warning {
  border-left: 3px solid #ddac49;
  background: #fffaf0;
  color: #8b6d35;
  padding: 10px 14px;
  margin: 12px 0;
  font-size: var(--fs-note);
}
.text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.9;
  /* A line of Korean or Chinese running the full width of a table is no longer
     readable prose. The block keeps the shared width; the text inside does not. */
  max-width: var(--prose-width);
}
.post-pictures {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.post-picture {
  display: block;
  max-width: 100%;
}
.media {
  display: block;
  max-width: 100%;
  max-height: 400px;
  border-radius: 10px;
  border: 1px solid var(--line);
}
.post-pictures .media {
  height: 320px;
  width: auto;
  object-fit: cover;
}
.post-picture-gone {
  font-size: var(--fs-note);
  color: var(--muted);
}
.metric-table td {
  padding: 12px;
}
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.category {
  display: grid;
  grid-template-columns: 120px 1fr 86px;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  cursor: pointer;
}
.track {
  height: 8px;
  background: #f0f1f5;
  border-radius: 6px;
  overflow: hidden;
}
.fill {
  height: 100%;
  background: var(--accent);
  border-radius: 6px;
}
.comment {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.comment:last-child {
  border: 0;
}
/* An answer sits under what it answers, indented and marked, so the pairing is
   visible without reading the names. */
.comment-reply { margin-left: 26px; border-left: 2px solid var(--soft); padding-left: 14px; }
.comment-reply .comment { border-bottom: 0; padding-bottom: 6px; }
.comment-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.comment p {
  margin: 10px 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: var(--prose-width);
}
.comment footer {
  font-size: var(--fs-note);
  color: var(--muted);
  display: flex;
  gap: 14px;
}
.compare-scroll {
  overflow: auto;
  max-height: calc(100vh - 133px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
}
.compare-table {
  table-layout: fixed;
  width: max-content;
  min-width: 100%;
}
.compare-table th:first-child,
.compare-table td:first-child {
  width: 145px;
  position: sticky;
  left: 0;
  background: #fafbfe;
  z-index: 2;
}
.compare-table th:not(:first-child),
.compare-table td:not(:first-child) {
  width: 355px;
  min-width: 355px;
}
.compare-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  vertical-align: top;
  background: #f9f9ff;
}
.compare-table thead th:first-child {
  z-index: 4;
}
.compare-table td {
  vertical-align: top;
  border-right: 1px solid var(--line);
}
.compare-table .chart {
  min-height: 180px;
}
.compare-table .chart text {
  font-size: var(--fs-note);
}
.compare-table strong.value {
  font-size: var(--fs-page);
}
.compare-table details {
  max-width: 320px;
}
.compare-table .category {
  grid-template-columns: 100px 1fr 65px;
  font-size: var(--fs-note);
}
.compare-table .comment p {
  max-height: 160px;
  overflow: auto;
}
/* A white capsule on every screen; on phones it sits above the page switch. */
#selection {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 2px;
  max-width: calc(100vw - 24px);
  padding: 4px 4px 4px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(8px);
  color: var(--ink);
  box-shadow: 0 6px 22px #20244324;
  font-size: 14px;
  white-space: nowrap;
}
#selection[hidden] { display: none; }
.selection-count { margin-right: 6px; }
.selection-count b { color: var(--accent); font-weight: 700; }
#selection button { flex-shrink: 0; height: 38px; margin: 0; padding: 0 14px; border-radius: 999px; font-size: 14px; }
#selection #clear-selection { border: 0; background: transparent; color: var(--muted); }
#selection #clear-selection:hover { color: var(--accent); }
#selection #compare-go:disabled { opacity: .45; }
#selection #compare-go[aria-busy="true"] { opacity: .75; cursor: progress; }
#toast {
  position: fixed;
  right: 25px;
  bottom: 85px;
  max-width: 450px;
  padding: 14px 22px;
  border-radius: 10px;
  background: #27243e;
  color: white;
  z-index: 50;
}
/* Phones: messages sit centred above the floating bars instead of under them. */
@media (max-width: 700px) {
  #toast { left: 50%; right: auto; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px); bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  body:has(.mobile-page-switch) #toast { bottom: calc(136px + env(safe-area-inset-bottom, 0px)); }
}
.status-line {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.pagination {
  display: flex;
  justify-content: center;
  gap: 14px;
  align-items: center;
  padding: 18px;
}
.placeholder-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.placeholder {
  border: 1px dashed #dfe2ec;
  border-radius: 12px;
  padding: 22px;
}
.placeholder p {
  font-size: var(--fs-note);
  color: var(--muted);
  margin-bottom: 0;
}
.source-note {
  font-size: var(--fs-note);
  color: var(--muted);
}
@media (max-width: 1000px) {
  .work {
    grid-template-columns: 280px minmax(0, 1fr);
  }
  .detail {
    padding: 20px;
  }
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .stats-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  .page {
    padding: 22px 14px 110px;
  }
  .work {
    display: block;
    height: auto;
  }
  aside {
    max-height: 340px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 12px;
  }
  .detail {
    overflow: visible;
  }
  .placeholder-grid {
    grid-template-columns: 1fr;
  }
  .compare-table th:not(:first-child),
  .compare-table td:not(:first-child) {
    width: 300px;
    min-width: 300px;
  }
}

/* Threads-style post list: views beside content, four interaction icons below. */
.post-preview { display: flex; align-items: flex-start; gap: 10px; }
.post-preview p { flex: 1; min-width: 0; }
.post-views { flex: 0 0 auto; text-align: right; padding-top: 8px; }
.post-views strong { display: block; font-size: var(--fs-note); font-weight: 800; }
.post-views small { display: block; }
.mini-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 8px 0; }
.mini-metric { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-note); white-space: nowrap; }
.mini-metric svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Account overview follows the platform's summary / viewers / followers order. */
.platform-overview { max-width: var(--content-width); margin: 0 auto; color: #111; }
.platform-heading { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.platform-heading h1 { margin: 0; font-size: var(--fs-page); }
.platform-heading select { font-size: var(--fs-body); opacity: 1; }
.platform-heading a { margin-left: auto; font-size: var(--fs-note); }
.account-sidebar-details { margin: 12px 0 18px; padding: 0 12px; color: var(--ink); }
.account-profile-bio { margin: 14px 0; }
.account-profile-bio p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-body); line-height: 1.65; }
.account-profile-bio:not(.expanded) p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.account-bio-toggle { padding: 2px 0; margin-top: 4px; border: 0; background: transparent; color: var(--accent); font-size: var(--fs-body); }
.account-bio-toggle[hidden] { display: none; }
.account-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); color: var(--ink);
}
.account-facts dt { color: var(--muted); font-size: var(--fs-body); margin-bottom: 4px; }
.account-facts dd { margin: 0; font-size: var(--fs-body); font-weight: 400; font-variant-numeric: tabular-nums; }
.account-facts > div:first-child { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 12px; }
.account-facts > div:first-child dt { margin-bottom: 0; }
.account-fact-date, .account-fact-time { display: block; }
.account-facts-fold { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.account-facts-fold summary { color: var(--accent); font-size: var(--fs-note); cursor: pointer; }
.account-facts-fold .account-facts { margin-top: 10px; padding-top: 0; border-top: 0; }
.platform-sync { font-size: var(--fs-note); color: #888; margin: 12px 0 24px; }
.platform-sheet { border: 1px solid var(--line); border-radius: var(--block-radius); background: #fff; overflow: hidden; }
.platform-section { padding: var(--block-pad); border-bottom: 1px solid var(--line); }
.platform-section:last-child { border-bottom: 0; }
.platform-section h2 { margin: 0 0 18px; font-size: var(--fs-section); }
.platform-section h3 { margin: 24px 0 12px; font-size: var(--fs-sub); }
.platform-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.platform-summary button { border: 1px solid #ddd; border-radius: 18px; padding: 18px 14px; text-align: left; color: #111; background: white; min-width: 0; }
.platform-summary button.selected,.platform-pills button.selected { background: #f4f4f4; border-color: #ccc; }
.platform-summary button>span:first-child,.platform-types>div>span:first-child { color: #888; display: block; font-size: var(--fs-body); }
.platform-summary strong { display: block; font-size: var(--fs-page); margin: 8px 0 3px; overflow-wrap: anywhere; }
.platform-change { color: #299e4b; font-size: var(--fs-sub); }
.platform-change.negative { color: #a34a4a; }
.platform-chart-empty { min-height: 220px; display: grid; place-items: center; }
.platform-empty { padding: 22px 8px; color: #999; text-align: center; font-size: var(--fs-body); }
.platform-big { font-size: var(--fs-stat); line-height: 1.15; font-weight: 750; }
.platform-types { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.platform-types>div { border: 1px solid #ddd; border-radius: 18px; padding: 22px; background: #fafafa; }
.platform-types strong { display: block; font-size: var(--fs-page); margin: 6px 0; }
.platform-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; }
.platform-pills button { border: 1px solid #ddd; border-radius: 30px; padding: 10px 22px; color: #111; background: white; }
.platform-distribution { margin: 22px 0; }
.platform-distribution-row { display: flex; align-items: center; gap: 22px; margin-top: 8px; }
.platform-distribution-row .track { flex: 1; height: 10px; background: #f3f3f3; border-radius: 4px; }
.platform-distribution-row .fill { background: #080808; height: 100%; border-radius: 4px; }
.platform-distribution-row b { min-width: 70px; text-align: right; font-size: var(--fs-stat-sm); }
.platform-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.platform-topics { display: flex; gap: 10px; flex-wrap: wrap; }
.platform-topics>span { background: #f4f4f4; border-radius: 30px; padding: 10px 18px; font-weight: 600; }
.platform-topics small { font-weight: 400; color: #999; }
.platform-active { font-size: var(--fs-sub); line-height: 1.8; margin-bottom: 24px; }
@media(max-width:1000px) { .platform-summary { grid-template-columns: repeat(2,minmax(0,1fr)); } .platform-columns { grid-template-columns: 1fr; gap: 0; } .platform-section { padding: 20px 16px; } }

/* Insights history: independent from post lifetime curves. */
.insight-curve svg {width:100%;height:auto;max-height:360px;color:#171717}
.insight-curve svg text {fill:#888;font-size: var(--fs-note)}
.insight-curve circle {fill:#171717;cursor:crosshair}
.insight-curve circle:focus,.insight-curve circle:hover {fill:#6655dd;stroke:#ddd;stroke-width:3px}
.snapshot-table {max-height:340px;overflow:auto}
.platform-heading {flex-wrap:wrap}
.platform-heading select {max-width:260px}
.track.stacked {display:flex;overflow:hidden}
.segment {display:block;height:100%;border-right:1px solid white}
.segment.female {background:#111}.segment.male {background:#999}.segment.other {background:#bbb}

.insight-curve {position:relative}
.insight-tooltip {position:absolute;z-index:20;pointer-events:none;min-width:120px;max-width:calc(100% - 16px);padding:12px 16px;background:#fff;border:1px solid #ddd;border-radius:12px;box-shadow:0 5px 22px #0002;color:#171717}
.insight-tooltip[hidden] {display:none}
.insight-tooltip span,.insight-tooltip small,.insight-tooltip strong {display:block}
.insight-tooltip span {color:#777;font-size: var(--fs-body)}
.insight-tooltip small {color:#777;font-size: var(--fs-note);margin:4px 0}
.insight-tooltip strong {font-size: var(--fs-stat-sm);font-weight:700}
.insight-curve circle.is-active {fill:#6655dd;stroke:#ddd;stroke-width:4px}

/* Per-post platform report */
.platform-post .platform-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:12px 0 4px}
.platform-post .platform-summary>div{background:#fafafa;border:1px solid #ececec;border-radius:10px;padding:12px}
.platform-post .platform-summary span{display:block;color:#666;font-size: var(--fs-note)}
.platform-post .platform-summary strong{display:block;font-size: var(--fs-stat-sm);margin:2px 0}
.platform-post h3{margin:22px 0 6px;font-size: var(--fs-body)}
.verdict{font-style:normal;font-size: var(--fs-note);padding:1px 7px;border-radius:999px;background:#f0f0f0;color:#555}
.verdict.up{background:#e8f5ec;color:#1d6b38}
.verdict.down{background:#fdeceb;color:#a12a20}
.platform-list{list-style:none;padding:0;margin:6px 0}
.platform-list li{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid #f2f2f2}
.platform-post .platform-summary>div{background:#fafafa;border:1px solid #ececec;border-radius:10px;padding:12px}
.platform-legend{display:flex;align-items:center;gap:6px;font-size: var(--fs-note);color:#666;margin:6px 0}
.platform-legend .key{display:inline-block;width:14px;height:3px;border-radius:2px;background:#111}
.platform-legend .key.avg{background:#bbb;margin-left:12px}
.platform-pills button[disabled]{opacity:.45;cursor:not-allowed}
.platform-distribution .source-note{display:block;margin:-2px 0 6px}

/* Thread node switcher */
.thread-total{font-size: var(--fs-note);color:#666;margin-right:6px}
/* One reading surface, with separators between posts and no nested frames. */
.thread-node{padding:0;margin:0}
.thread-node + .thread-node{border-top:1px solid var(--line);margin-top:28px;padding-top:28px}
.thread-node header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px;font-size: var(--fs-note);color:#666}
.thread-node header b{font-size: var(--fs-body);color:var(--ink)}
.thread-node .here-mark{font-style:normal;color:var(--accent);background:var(--soft);border-radius:5px;padding:2px 7px;font-size:var(--fs-note)}
.thread-node footer{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;margin-top:18px;font-size: var(--fs-note);color:var(--muted)}
.thread-node footer .mini-metrics{display:flex;flex-wrap:wrap;gap:14px;margin:0}
.thread-node footer .post-views{display:inline-flex;align-items:baseline;white-space:nowrap;margin:0;padding:0;text-align:left}
.thread-node footer .post-views strong,.thread-node footer .mini-metric > span{font-size:var(--fs-note);font-weight:800;color:var(--ink)}
.thread-node .node-links{display:flex;flex-wrap:wrap;gap:8px 16px;flex-basis:100%}
.thread-node .node-links a{white-space:nowrap}
@media(max-width:700px){
  /* Offset the detail pane's 20px gutter; prose gets one 16px inset. */
  .panel.thread-read{margin-left:-20px;margin-right:-20px;max-width:none;padding:20px 16px;border-width:1px 0;border-radius:0}
  .thread-node + .thread-node{margin-top:24px;padding-top:24px}
  .thread-node .text{font-size:16px}
  .thread-node header{column-gap:6px}
  .thread-node footer{column-gap:12px}
  .thread-node footer .mini-metrics{gap:10px}
}

/* 48-hour window */
.w48 .platform-pills{margin-bottom:4px}
/* The panel already sets the page margin; sections inside it must not add a
   second one, or one block sits indented from the next. */
.panel.w48 { padding: 0; }
.panel.w48 > .platform-section:last-child { border-bottom: 0; }
.w48-sep{display:inline-block;width:1px;height:20px;background:#e0e0e0;margin:0 6px;vertical-align:middle}
/* Shared by the demographics columns; the source stack that also used these
   is gone, replaced by a curve. */
.w48-stack{display:flex;align-items:flex-end;gap:3px;overflow-x:auto;padding:8px 0 2px}
.w48-col{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:22px}
.w48-col small{font-size: var(--fs-note);color:#888}
.w48-bar{display:flex;flex-direction:column;width:18px;height:110px;border-radius:4px;overflow:hidden;background:#f2f2f2}
.w48-bar .seg{width:100%;display:block}
.seg.d-0{background:#111}.seg.d-1{background:#555}.seg.d-2{background:#888}
.seg.d-3{background:#b5b5b5}.seg.d-4{background:#dcdcdc}
.w48-detail{margin-top:18px}
.empty-count strong{color:#bbb}

/* ---- Shared layout rhythm -------------------------------------------------
   Every block a tab can render sits on the same column and uses the same
   padding, so switching tabs never moves the content sideways. */
.detail > .thread-navigation,
.detail > .tabs,
.detail > .status-line,
.detail > .eyebrow,
.detail > h1,
.detail > p,
.detail > h2,
.detail > .warning,
.detail > .placeholder-grid { max-width: var(--content-width); margin-left: auto; margin-right: auto; }
.detail > h1 { font-size: var(--fs-page); }
.detail > h2 { font-size: var(--fs-section); }
.platform-heading h1 { font-size: var(--fs-page); }
.platform-section .platform-big { font-size: var(--fs-stat); }
.platform-summary strong { font-size: var(--fs-stat-sm); }
.platform-summary span { font-size: var(--fs-note); }
.source-note, .platform-sync, .muted small, .thread-total { font-size: var(--fs-note); }
table { font-size: var(--fs-body); }
th { font-size: var(--fs-note); }
.runner-stale { margin-bottom: var(--block-gap); max-width: var(--content-width); margin-left: auto; margin-right: auto; }

/* Hour-by-hour table: many columns, so it scrolls sideways inside the block. */
/* Its own scroll region so the head and the hour column can stay put while the
   rows move. A sticky head only sticks to its nearest scrolling ancestor, and
   with no height here that ancestor scrolled with the page - the head went up
   with it and never stopped. */
.w48-table-wrap { overflow: auto; max-height: min(72vh, 760px); margin-top: 10px; }
.w48-table { border-collapse: collapse; width: 100%; min-width: 980px; }
.w48-table th, .w48-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.w48-table thead th { position: sticky; top: 0; z-index: 2; background: #fff; text-align: right; color: var(--muted); font-weight: 600; box-shadow: inset 0 -1px 0 var(--line); }
.w48-table thead th:first-child { z-index: 3; }
.w48-table thead th:first-child, .w48-table td:first-child { text-align: left; position: sticky; left: 0; background: #fff; }
.w48-table .w48-pending td { color: var(--muted); background: #fafbff; }
.w48-table .w48-pending td:first-child { background: #fafbff; }
.w48-table td:first-child small { display: block; color: var(--muted); font-size: var(--fs-note); }
/* Phones: two-line rows keep their height when the times hide on a sideways
   read, so the table never jumps vertically; the hour sits centred. */
@media (max-width: 700px) {
  .w48-table .w48-time { line-height: 1.5; }
  .w48-table-wrap.is-compact .w48-time { width: 0; overflow: hidden; visibility: hidden; }
  .w48-table-wrap.is-compact .w48-head-label { display: none; }
  .w48-table-wrap.is-compact .w48-hour { display: inline-block; transform: translateY(calc(var(--fs-note) * .75)); }
}
.w48-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.vm { font-style: normal; margin-left: 4px; font-size: var(--fs-note); }
.vm.up { color: #1d6b38; }
.vm.down { color: #a12a20; }
.vm.flat { color: var(--muted); }

/* Sits on the title's baseline, right after it. */
.w48-source-label {
  margin-left: 8px; font-size: var(--fs-note); font-weight: 400; color: var(--muted);
}

/* Legend keys for the two sources on the hourly curve. */
.w48-key { display: inline-block; width: 22px; height: 0; margin-right: 6px;
  vertical-align: middle; border-top: 2px solid currentColor; }
.w48-key.public { border-top-style: dashed; color: #c99a3a; }
/* Source legend keys colour themselves inline, one per line on the chart. */
.w48-key[style] { border-top-width: 3px; }

.w48-controls { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin:14px 0; }
.w48-controls .platform-pills { margin:0; display:flex; flex-wrap:wrap; gap:8px; }
.w48-display-controls { display:flex; align-items:center; gap:16px; }
.w48-display-controls .platform-pills { flex-wrap:nowrap; }
.w48-control-divider { color:var(--muted); }
.w48-metrics button { display:inline-flex; align-items:center; gap:7px; }
.w48-metrics button.selected { border-color:var(--metric-colour); }
.w48-dot { display:inline-block; flex-shrink:0; width:8px; height:8px; border-radius:50%; background:var(--metric-colour); }
.w48-check { width:12px; color:var(--metric-colour); }
.w48-blank { margin-left:-2px; font-size:var(--fs-note); color:var(--muted); }
.w48-progress { color:var(--muted); font-size:var(--fs-note); }
[data-w48-colour="views"] { --metric-colour:#6554c0; }
[data-w48-colour="likes"] { --metric-colour:#167ca3; }
[data-w48-colour="replies"] { --metric-colour:#25815c; }
[data-w48-colour="forwards"] { --metric-colour:#b87516; }
[data-w48-colour="shares"] { --metric-colour:#c34f80; }
[data-w48-colour="follows"] { --metric-colour:#8656a5; }
.w48-comparison [data-w48-series] { pointer-events:none; }
.w48-comparison [data-w48-series].w48-dimmed { opacity:.18; }
.w48-comparison [data-w48-series].w48-emphasized path { stroke-width:3; }
.w48-comparison circle { fill:var(--metric-colour); stroke:#fff; stroke-width:1.5; pointer-events:none; }
.w48-zero { pointer-events:none; }
.w48-comparison svg { display:block; max-height:none; }
.w48-comparison svg text { font-size:12px; }
.w48-crosshair { pointer-events:none; }
.w48-comparison [data-w48-slot] { cursor:crosshair; }
.w48-comparison [data-w48-slot]:focus { outline:none; }
.w48-comparison [data-w48-slot]:focus-visible { outline:1px solid var(--accent); }
.w48-comparison .insight-tooltip { min-width:230px; }
.w48-tip-row { display:grid; grid-template-columns:8px auto 1fr; gap:4px 8px; align-items:center; margin-top:10px; }
.w48-tip-row b { text-align:right; font-variant-numeric:tabular-nums; }
@media (max-width:600px) {
  .w48-controls .platform-pills button { padding:8px 10px; }
}
/* Phones: one scrolling row of metric chips, 累计／新增 beside the title, and
   the hour's figures in a line above the chart rather than over the curves. */
@media (max-width:700px) {
  .w48 .chart-head { flex-wrap:nowrap; }
  .w48-controls { margin:12px 0 4px; }
  .w48-controls .w48-metrics { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-right:-16px; padding-right:16px; }
  .w48-controls .w48-metrics::-webkit-scrollbar { display:none; }
  .w48-controls .w48-metrics button { flex-shrink:0; gap:6px; padding:6px 12px; font-size:13px; }
  .w48-metrics button.selected { background:var(--metric-colour); border-color:var(--metric-colour); color:#fff; }
  .w48-metrics button.selected .w48-dot { background:#fff; }
  .w48-metrics button.selected .w48-blank { color:#fff; opacity:.85; }
  .w48-check { display:none; }
  .w48 .w48-modes { flex-shrink:0; flex-wrap:nowrap; gap:0; margin:0; padding:2px; border-radius:999px; background:#f2f3f7; }
  .w48 .w48-modes button { padding:5px 12px; border:0; border-radius:999px; background:transparent; color:var(--muted); font-size:13px; }
  .w48 .w48-modes button.selected { background:#fff; color:var(--ink); font-weight:600; box-shadow:0 1px 3px #20244326; }
  .w48-readout { display:flex; flex-wrap:wrap; align-content:flex-start; gap:2px 14px; min-height:58px; margin:6px 0 2px; font-size:12px; color:var(--muted); }
  .w48-readout > span:first-child { flex-basis:100%; }
  .w48-readout-hint { color:var(--muted); }
  .w48-readout .w48-tip-row { display:inline-flex; align-items:center; gap:5px; margin:0; color:var(--ink); }
  .w48-readout .w48-tip-row span { color:var(--muted); }
  .w48-readout .w48-tip-row b { font-variant-numeric:tabular-nums; }
  /* One layer on white: sections are divided by rules, not boxed inside boxes. */
  .mobile-work .detail .panel { max-width:none; margin:0; padding:20px 0; border:0; border-top:1px solid var(--line); border-radius:0; background:transparent; box-shadow:none; }
  .mobile-work .detail .tabs + .panel { border-top:0; }
  .mobile-work .detail .tabs + .panel { padding-top:4px; }
  .mobile-work .detail .panel.w48 { padding:0; }
}

/* Opens the comments written during that hour, beside the figures they may
   explain. Counts what it will show, not the platform's reply figure next to
   it: those count different things. */
.hour-comments {
  margin-left: 6px; padding: 0 6px; min-width: 20px;
  border: 1px solid var(--line); border-radius: 9px; background: #fff;
  font-size: var(--fs-note); color: var(--accent); cursor: pointer;
}
.hour-comments:hover { border-color: var(--accent); }
.hour-comments.open { background: var(--accent); border-color: var(--accent); color: #fff; }
.w48-comment-row > td { background: #fbfbff; padding: 14px 18px; white-space: normal; }
.w48-table .w48-comment-row > td:first-child { position: static; background: #fbfbff; }
.hour-comment-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.comment-elsewhere { color: var(--muted); font-size: var(--fs-note); }
.comment-elsewhere .comment { color: var(--ink); font-size: var(--fs-body); }

#add-account-dialog {
  width: min(520px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px;
  color: inherit;
}
#add-account-dialog::backdrop { background: rgb(20 25 45 / 35%); }
#add-account-form label { display: block; margin: 18px 0 8px; }
#add-account-form input { width: 100%; box-sizing: border-box; }
#add-account-error { color: #b42318; }
#add-account-form button:disabled { opacity: .6; cursor: wait; }

.followers-page .toolbar { flex-wrap: wrap; gap: 10px; }
/* Tabs on the left, search and order on the right of the same row; they wrap when the row is too narrow. */
.followers-controls { justify-content: space-between; }
.followers-tabs, .followers-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.followers-page .panel { padding: 16px 20px; margin: 18px 0; }
.followers-page td, .followers-table td { vertical-align: top; }
.followers-page td:first-child { min-width: 200px; }
.followers-page td:first-child .avatar { float: left; margin-right: 10px; }
.followers-page details { max-width: 360px; white-space: pre-wrap; overflow-wrap: anywhere; }
.followers-views { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 18px; }
.followers-stamp { margin-left: auto; color: var(--muted); font-size: var(--fs-note); }
/* Follower analysis: cards on the page background, one question each. */
.fa { --lost: #eb6834; --big: #1baf7a; }
.fa-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.fa-tile, .fa-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--block-radius); padding: 18px 20px; min-width: 0; }
.fa-tile-label { color: var(--muted); font-size: 13px; }
.fa-tile-value { margin: 6px 0 4px; font-size: 30px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.fa-tile-note { color: var(--muted); font-size: var(--fs-note); }
.fa-up { color: var(--accent); }
.fa-down { color: var(--lost); }
.fa-sep { margin: 0 6px; color: var(--line); font-weight: 400; }
.fa-link { padding: 0; border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 5px; }
.fa-tile .fa-link { color: var(--ink); }
.fa-tile .fa-link.fa-up { color: var(--accent); }
.fa-tile .fa-link.fa-down { color: var(--lost); }
.fa-card h3 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; font-size: var(--fs-sub); }
.fa-card h3 .muted { font-size: var(--fs-note); font-weight: 400; }
.fa-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-left: auto; color: var(--muted); font-size: var(--fs-note); font-weight: 400; }
.fa-legend i { display: inline-block; width: 14px; height: 8px; margin-right: 5px; border-radius: 2px; background: var(--accent); vertical-align: middle; }
.fa-legend i.lost { background: var(--lost); }
.fa-legend i.big { background: var(--big); }
.fa-legend i.dotkey { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--panel); }
.fa-legend select { padding: 4px 8px; }
.fa-section-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 26px 0 0; }
.fa-section-head h2 { margin: 0; font-size: var(--fs-section); }
.fa-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; align-items: start; }
.fa-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; align-items: stretch; }
/* The platform card takes the Top 10 card's height (height 0, then stretched) and scrolls the rest. */
.fa-platforms { display: flex; flex-direction: column; height: 0; min-height: 100%; }
.fa-scroll { flex: 1; min-height: 0; overflow: auto; }
.fa-scroll thead th { position: sticky; top: 0; z-index: 1; background: var(--panel); }
/* Rows of the top-10 list. */
.fa-row { display: grid; align-items: center; gap: 10px; padding: 7px 4px; border-radius: 8px; color: var(--ink); }
.fa-row.fa-top { grid-template-columns: 22px 36px minmax(0, 1fr) 72px; }
.fa-top .avatar { width: 36px; height: 36px; margin: 0; }
.fa-person { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.fa-person b, .fa-person a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-person a { font-size: var(--fs-note); }
/* Portrait and platform tables: a header names every column; the share bar sits in its cell. */
.fa-table { width: 100%; border-collapse: collapse; }
/* On a narrow screen a table scrolls inside its card instead of widening the page. */
.fa-card:has(> .fa-table) { overflow-x: auto; }
.fa-table th, .fa-table td { padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.fa-table thead th { padding-top: 0; background: transparent; }
.fa-table tbody tr:last-child th, .fa-table tbody tr:last-child td { border-bottom: 0; }
.fa-table th[scope="row"] { font-weight: 500; color: var(--ink); font-size: var(--fs-body); background: transparent; }
.fa-table tr.active { background: var(--soft); }
.fa-share { display: flex; align-items: center; gap: 8px; min-width: 110px; }
.fa-share .fa-track { flex: 1; height: 8px; }
.fa-share .fa-pct { min-width: 3.2em; }
.fa-fresh { display: inline-block; padding: 1px 7px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.fa-fresh.above { background: var(--soft); color: var(--accent); }
.fa-fresh.below { background: #fdece4; color: #a94a19; }
.fa-label { display: flex; align-items: center; min-width: 0; font-size: var(--fs-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-rank { color: var(--muted); font-size: var(--fs-note); text-align: right; }
.fa-track { position: relative; height: 10px; border-radius: 5px; background: #f0f1f6; }
.fa-track.thin { height: 6px; }
.fa-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--accent); }
.fa-pct, .fa-num { text-align: right; font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
.fa-pct { color: var(--muted); }
.fa-num.strong { font-weight: 600; }
.fa-more { margin: 10px 4px 0; padding: 0; border: 0; background: transparent; color: var(--accent); font-size: var(--fs-note); cursor: pointer; }
.fa-note { margin: 8px 0 0; color: var(--muted); font-size: var(--fs-note); }
/* 粉丝分析: which of our other accounts share the most followers; a row opens the pair in 粉丝对比. */
.fa-overlap-card { margin-top: 14px; }
.fa-overlap tbody tr { cursor: pointer; }
.fa-overlap tbody tr:hover, .fa-overlap tbody tr:focus-visible { background: var(--soft); outline: none; }
.fa-overlap .fa-more { margin: 0; }
/* 粉丝对比: the accounts taking part, toggled on and off. */
.fans-page .page-head { margin-bottom: 12px; }
.fans-picker { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.fans-pick { padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--muted); font-size: var(--fs-note); cursor: pointer; }
.fans-pick.on { border-color: var(--accent); background: var(--soft); color: var(--accent); font-weight: 600; }
.fans-pick small { font-weight: 400; color: var(--muted); }
.fans-remove { margin-left: 2px; padding: 0 2px; border: 0; background: transparent; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; }
.fans-remove:hover, .fans-remove:focus-visible { color: var(--ink); }
.fans-add { padding: 5px 12px; border: 1px dashed var(--accent); border-radius: 999px; background: var(--panel); color: var(--accent); font-size: var(--fs-note); cursor: pointer; }
.fans-count { font-size: var(--fs-note); }
.fans-dedup { font-variant-numeric: tabular-nums; }
.fans-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
/* 选择对比账号: a panel on a computer, a bottom sheet on a phone (the shared dialog rule). */
.fans-picker-dialog { width: min(560px, calc(100vw - 40px)); max-height: min(720px, calc(100vh - 40px)); box-sizing: border-box; border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; color: inherit; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.fans-picker-dialog:not([open]) { display: none; }
.fans-picker-dialog::backdrop { background: rgb(20 25 45 / 35%); }
.fans-picker-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.fans-picker-head h2 { margin: 0; font-size: var(--fs-section); }
.fans-picker-count b { color: var(--ink); }
.fans-picker-tools { display: flex; gap: 8px; }
.fans-picker-tools input { flex: 1; min-width: 0; }
.fans-owners { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--fs-note); }
.fans-owners button { padding: 4px 10px; border-radius: 999px; font-size: var(--fs-note); }
.fans-owners button.on { border-color: var(--accent); background: var(--soft); color: var(--accent); }
.fans-owners small { color: var(--muted); }
.fans-picker-list { flex: 1; min-height: 160px; overflow-y: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fans-option { display: grid; grid-template-columns: 20px 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
.fans-option:last-child { border-bottom: 0; }
.fans-option .avatar { width: 30px; height: 30px; margin: 0; }
.fans-option.off { opacity: .55; }
.fans-option.full { cursor: not-allowed; color: var(--muted); }
.fans-option-meta { color: var(--muted); font-size: var(--fs-note); white-space: nowrap; }
.fans-owner { margin-right: 6px; padding: 1px 6px; border-radius: 6px; background: #f0f1f6; color: var(--ink); }
.fans-none { padding: 16px 4px; }
.fans-picker-foot { display: flex; align-items: center; gap: 8px; }
.fans-picker-foot .spacer { flex: 1; }
.fans-matrix-card, .fans-portrait { margin-top: 14px; }
.fa > .fa-card + .fa-card { margin-top: 14px; }
.fans-scroll { overflow-x: auto; }
/* Equal account columns, so a darker cell reads as a larger share and not a wider one. */
.fans-matrix, .fans-portrait .fa-table { table-layout: fixed; min-width: 720px; }
.fans-matrix th:first-child { width: 190px; }
.fans-portrait th:first-child { width: 130px; }
.fans-acc { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 180px; }
.fans-acc .avatar { width: 30px; height: 30px; margin: 0; flex: none; }
/* Our account as avatar + @ID on one line, the avatar the height of the text. */
.fans-id { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-width: 0; vertical-align: middle; }
.fans-id .avatar { width: 18px; height: 18px; margin: 0; flex: none; }
.fans-id .avatar.initial { font-size: 10px; line-height: 1; }
.fans-id > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fans-pick { display: inline-flex; align-items: center; gap: 4px; }
.fans-acc small { color: var(--muted); font-size: var(--fs-note); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The account column takes only what the name needs; the figures get the rest. */
.fans-unique th[scope="row"], .fans-unique thead th:first-child, .fans-shared td:first-child, .fans-shared thead th:first-child { width: 1%; }
/* Overlap and share cells: one hue, light to dark (ink text on the light steps, white on the darkest). */
.fans-matrix thead th, .fans-portrait thead th { overflow: hidden; text-overflow: ellipsis; }
.fans-matrix thead th.num, .fans-portrait thead th.num, .fa-table td.fans-cell { text-align: center; }
.fans-cell, .fans-self { text-align: center; min-width: 84px; }
.fans-cell button { display: block; width: 100%; padding: 4px 2px; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; border-radius: 6px; }
.fans-cell button:hover, .fans-cell button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.fans-cell b { display: block; font-variant-numeric: tabular-nums; }
.fans-cell small { display: block; font-size: 12px; color: inherit; opacity: .8; }
.fans-cell span { color: var(--muted); }
.fans-self { color: var(--muted); background: #f7f7fa; }
.fans-cell.active { box-shadow: inset 0 0 0 2px var(--ink); }
.heat1 { background: #f3f1fd; }
.heat2 { background: #e0dcfa; }
.heat3 { background: #c5bef4; }
.heat4 { background: #9d93ea; }
.heat5 { background: #6257df; color: #fff; }
/* Portrait cells: the share, a thin bar and the head count; colour only where an account stands out. */
.fa-table td.fans-pcell { text-align: center; min-width: 84px; }
/* Portrait charts: one shade of the page purple per account, from the accent itself to the light lavender
   of the overlap cells (nothing darker than the accent); the lightest gets an outline so it holds on white,
   and the fixed order, legend and hover box carry identity with the shades. Thin bars
   with a 2px gap, recessive grid; numbers stay in ink, the colour only marks which account. */
.fans-s0 { fill: #6257df; background: #6257df; }
.fans-s1 { fill: #948aea; background: #948aea; }
.fans-s2 { fill: #bdb6f3; background: #bdb6f3; }
.fans-s3 { fill: #e0dcfa; background: #e0dcfa; stroke: #948aea; stroke-width: 1; }
.fans-key.fans-s3 { box-shadow: inset 0 0 0 1px #948aea; }
.fans-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; flex: none; vertical-align: middle; }
.fans-legend { display: inline-flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.fans-legend > span { display: inline-flex; align-items: center; }
.fans-portrait-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin: -4px 0 10px; font-size: var(--fs-note); }
.fans-view { display: inline-flex; margin-left: auto; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.fans-view button { padding: 3px 12px; border: 0; border-radius: 0; background: var(--panel); color: var(--muted); font-size: var(--fs-note); cursor: pointer; }
.fans-view button.on { background: var(--soft); color: var(--accent); font-weight: 600; }
.fans-chart-wrap { position: relative; }
.fans-chart .fa-hit:focus { outline: none; }
.fans-chart .fa-hit:focus-visible, .fans-chart .fa-hit:focus { fill: rgba(98, 87, 223, .06); }
.fans-chart { display: block; width: 100%; height: auto; }
.fans-grid { stroke: var(--line); stroke-width: 1; }
.fans-cat { fill: var(--ink); font-size: 13px; }
.fans-flag { fill: var(--ink); font-size: 12px; font-weight: 600; }
.fans-tip { position: absolute; z-index: 3; min-width: 180px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 6px 20px rgb(20 25 45 / 12%); font-size: var(--fs-note); pointer-events: none; }
.fans-tip > b { display: block; margin-bottom: 4px; color: var(--ink); }
.fans-tip-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 0 8px; padding: 2px 0; color: var(--ink); white-space: nowrap; }
.fans-tip-row b { text-align: right; font-variant-numeric: tabular-nums; }
.fans-tip-row small { color: var(--muted); }
.fans-tip-row em { grid-column: 2 / -1; font-style: normal; color: var(--muted); }
/* Share, bar and head count on one line whenever the cell has room (each cell asks its own width, so it
   works for 2 accounts or 12, computer or phone); a narrow cell stacks them. */
.fans-cq { container-type: inline-size; }
.fans-line { display: flex; align-items: center; justify-content: center; gap: 8px; }
.fans-pct { display: inline-block; min-width: 3em; padding: 1px 7px; font-weight: 600; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.fans-bar { display: block; position: relative; flex: 0 1 110px; min-width: 40px; height: 6px; border-radius: 3px; background: #f0f1f6; }
.fans-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--accent); }
.fans-pcell small { min-width: 3.8em; color: var(--muted); font-size: 12px; text-align: left; white-space: nowrap; font-variant-numeric: tabular-nums; }
@container (max-width: 145px) {
  .fans-line { flex-direction: column; gap: 3px; }
  .fans-pct, .fans-pcell small { min-width: 0; text-align: center; }
  .fans-bar { flex: none; width: min(72px, 100%); height: 4px; }
}
.fans-heat-legend i { width: 16px; margin: 0; border-radius: 0; }
.fans-heat-legend i:first-of-type { border-radius: 2px 0 0 2px; }
.fans-heat-legend i:last-of-type { border-radius: 0 2px 2px 0; }
.fans-heat-legend { gap: 0; }
.fans-heat-legend i.heat1 { background: #f3f1fd; margin-left: 6px; }
.fans-heat-legend i.heat2 { background: #e0dcfa; }
.fans-heat-legend i.heat3 { background: #c5bef4; }
.fans-heat-legend i.heat4 { background: #9d93ea; }
.fans-heat-legend i.heat5 { background: #6257df; margin-right: 6px; }
/* Shared followers. */
.fans-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.fans-check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-note); color: var(--ink); cursor: pointer; }
.fans-chips { white-space: normal; }
.fans-chip { display: inline-block; margin: 2px 4px 2px 0; padding: 2px 8px 2px 3px; border-radius: 999px; background: #f0f1f6; color: var(--ink); font-size: 12px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.fans-chip.on { background: var(--soft); color: var(--accent); font-weight: 600; }
.fans-type { font-size: var(--fs-note); }
.fans-type.f4f { color: var(--lost); }
/* The shared list scrolls inside its card (header kept), so the portrait below stays in reach. */
.fans-list { max-height: 620px; overflow: auto; }
.fans-list thead th { position: sticky; top: 0; z-index: 1; background: var(--panel); }
.fans-shared td { white-space: nowrap; }
.fans-shared .fans-acc { max-width: 200px; }
.fans-shared td.fans-chips { white-space: normal; min-width: 260px; }
.fa-daily { display: block; width: 100%; height: auto; }
.fa-bar-new { fill: var(--accent); }
.fa-bar-lost { fill: var(--lost); }
.fa-bar-big { fill: var(--big); }
.fa-gap { fill: var(--panel); }
.fa-zero { stroke: var(--line); stroke-width: 1; }
.fa-axis { fill: var(--muted); font-size: 13px; }
.fa-value { fill: var(--ink); font-size: 14px; font-weight: 600; }
.fa-hit { fill: transparent; cursor: pointer; }
.fa-hit:hover { fill: rgba(98, 87, 223, .06); }
@media (max-width: 700px) {
  .followers-stamp { margin-left: 0; width: 100%; }
  .fa-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fa-tile { padding: 14px; }
  .fa-tile-value { font-size: 24px; }
  .fa-grid3, .fa-grid2 { grid-template-columns: 1fr; }
  .fans-acc { max-width: 96px; }
  .fans-total { display: none; }
  .fans-picker-dialog:modal { display: flex; height: 88dvh; }
  .fans-option-meta .fans-owner { display: none; }
  .fans-shared .fans-acc { max-width: 120px; }
  .fans-shared td.fans-chips { min-width: 200px; }
  .fans-acc .avatar { display: none; }
  /* On a phone the account column is narrow and each account a 64px column, so more of them fit. */
  .fans-matrix, .fans-portrait .fa-table { table-layout: auto; min-width: 0; }
  .fans-matrix th:first-child { width: 96px; }
  .fans-matrix thead th:first-child { white-space: normal; }
  .fans-portrait th:first-child { width: 76px; }
  .fans-matrix th, .fans-matrix td, .fans-portrait th, .fans-portrait td { padding: 6px 4px; }
  .fans-matrix thead th.num, .fans-portrait thead th.num { max-width: 84px; }
  .fans-cell, .fans-self { min-width: 64px; }
  .fa-platforms { height: auto; min-height: 0; }
  .fa-scroll { max-height: 420px; }
  .fa-legend { margin-left: 0; }
}
.followers-warning { margin: 10px 0 0; padding: 8px 12px; border-radius: 8px; background: #fff8e6; font-size: 14px; }
.clue-filter-active { margin: 0 0 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.followers-page td.follower-clues { min-width: 220px; max-width: 360px; }
/* On a phone the table scrolls sideways rather than squeezing the bio to one character a line. */
.followers-table td:nth-child(2) { min-width: 180px; }
.followers-table th, .followers-table td.num { white-space: nowrap; }
.clue-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.clue-chip { display: inline-flex; max-width: 100%; padding: 2px 8px; border-radius: 999px; font-size: var(--fs-note); line-height: 1.6; overflow-wrap: anywhere; }
.clue-chip a { color: inherit; text-decoration: none; }
.clue-chip a:hover, .clue-chip a:focus-visible { text-decoration: underline; text-underline-offset: 2px; }
.clue-chip-guess a, .clue-chip-same a { color: var(--accent); }
.clue-chip-note { margin-left: 4px; color: var(--muted); }
.clue-chip-note::before { content: "· "; }
.clue-chip-own { background: var(--accent); color: #fff; }
.clue-chip-own::before { content: "✓ "; white-space: pre; }
.clue-chip-guess { background: #f1f2f5; color: #4b5161; }
.clue-chip-same { border: 1px dashed #b6bbc8; color: #5b6172; }
.clue-more > summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.clue-more[open] { display: flex; flex-wrap: wrap; gap: 6px; }
.clue-detail { padding: 2px 6px; border: 0; background: transparent; color: var(--accent); font-size: 12px; cursor: pointer; }

.publish-entry {display:inline-block;border:1px solid var(--accent);border-radius:9px;padding:7px 13px;background:var(--soft);font-size:var(--fs-body);white-space:nowrap;}

.account-center {width:min(760px,94vw); max-height:90vh; overflow:auto;}
.account-center .account-section {padding:18px 0;border-bottom:1px solid var(--line);}
.account-center .account-section:last-child {border-bottom:0;}
.account-center label {display:block;margin:12px 0;}
.account-center input:not([type=checkbox]), .account-center select {display:block;width:100%;margin-top:6px;}
/* Keep the select's own row layout: block put the arrow on a second line and doubled its height. */
@supports (appearance: base-select) { .account-center select {display:flex;} }
.account-center .account-check {display:flex;align-items:center;gap:8px;}
.account-center .account-warning {color:#925400;background:#fff4d9;padding:12px;border-radius:8px;}
.account-center [role=alert] {color:#b23838;}
.account-center [hidden] {display:none!important;}
.account-center .toolbar {margin-top:16px;}
.account-center .account-section-head {display:flex;align-items:center;justify-content:space-between;gap:12px;}
.account-center .account-section-head h3 {margin:0;}
.account-center .account-link {padding:4px 0;border:0;border-radius:0;background:transparent;color:var(--accent);font-size:var(--fs-note);}
.account-center .conn-list {margin-top:12px;border:1px solid var(--line);border-radius:12px;}
.account-center .conn + .conn {border-top:1px solid var(--line);}
.account-center .conn-row {display:grid;grid-template-columns:104px auto minmax(0,1fr) auto;align-items:center;gap:6px 14px;padding:12px 14px;}
.account-center .conn-name {font-weight:600;}
.account-center .conn-state {display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:var(--fs-note);white-space:nowrap;}
.account-center .conn-state::before {content:"";width:8px;height:8px;border-radius:50%;background:#c9cdd8;}
.account-center .conn-state.on {color:var(--green);}
.account-center .conn-state.on::before {background:var(--green);}
.account-center .conn-state.warn {color:#925400;}
.account-center .conn-state.warn::before {background:#e3a008;}
.account-center .conn-detail {min-width:0;}
.account-center .conn-detail span, .account-center .conn-detail small {display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.account-center .conn-detail small {color:var(--muted);font-size:var(--fs-note);}
.account-center .conn-toggle {padding:5px 12px;font-size:var(--fs-note);white-space:nowrap;}
.account-center .conn-edit {padding:2px 14px 14px;}
.account-center .conn-edit label:first-child, .account-center .conn-edit > div:first-child .env-picker {margin-top:0;}
.account-center .conn-actions {display:flex;align-items:center;justify-content:space-between;gap:12px;}
.account-center .conn-unbind {padding:4px 0;border:0;border-radius:0;background:transparent;color:#b23838;font-size:var(--fs-note);}
.account-center [data-oauth-result] {padding:0 14px 12px;}
.account-center [data-oauth-result]:empty {display:none;}
.account-center .env-picker {margin:12px 0;}
.account-center .env-picker-label {display:block;}
.account-center .env-suggest {display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px;}
.account-center .env-suggest button {display:flex;flex-direction:column;align-items:flex-start;max-width:100%;padding:6px 12px;background:var(--soft);border-color:#d9d4ff;text-align:left;}
.account-center .env-results {list-style:none;margin:6px 0 0;padding:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;}
.account-center .env-results li + li {border-top:1px solid var(--line);}
.account-center .env-results button {display:flex;flex-direction:column;align-items:flex-start;width:100%;padding:9px 12px;border:0;border-radius:0;background:transparent;text-align:left;}
.account-center .env-picker button span {overflow-wrap:anywhere;}
.account-center .env-picker button small {color:var(--muted);font-size:var(--fs-note);overflow-wrap:anywhere;}
.account-center .env-picker button[aria-pressed=true] {color:var(--accent);background:var(--soft);}
.account-center .env-picker button[aria-pressed=true] span::after {content:" ✓";}
.account-center .env-picker [data-pick-more] {margin:6px 0 0;font-size:var(--fs-note);}
.account-center .env-picker [data-pick-more]:empty {display:none;}
.account-center .env-chosen {margin:8px 0 0;font-size:var(--fs-note);}
@media (max-width: 700px) {
  .account-center .conn-row {grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"name state action" "detail detail detail";}
  .account-center .conn-name {grid-area:name;}
  .account-center .conn-state {grid-area:state;}
  .account-center .conn-detail {grid-area:detail;}
  .account-center .conn-detail:empty {display:none;}
  .account-center .conn-toggle {grid-area:action;}
}
#app [data-manage-account] {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  font-size: var(--fs-note);
}

.account-center-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.account-center-head h2 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.account-center .account-center-exit { padding: 4px 0; border: 0; border-radius: 0; background: transparent; color: var(--accent); font-size: var(--fs-note); flex-shrink: 0; }

.account-row-actions { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.account-row-actions [data-publish-account] { font-size: var(--fs-note); }

.accounts-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.accounts-heading h1, .accounts-heading p { margin: 0; }
/* Pages off the account list share one heading: eyebrow and title on the left, 返回账号总览 on the
   right of the title line (as on the publish page). */
.page-head { display: flex; justify-content: space-between; align-items: last baseline; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.page-head .accounts-heading b { color: var(--ink); }
.page-back { padding: 0; border: 0; background: transparent; color: var(--accent); font: inherit; cursor: pointer; white-space: nowrap; }
.page-back:hover, .page-back:focus-visible { text-decoration: underline; }
.account-daily { white-space: nowrap; }
.account-daily.negative { color: #a34a4a; }

@media (max-width: 700px) {
  .accounts-page .toolbar { display: grid; grid-template-columns: minmax(104px, 1fr) minmax(0, max-content) 42px; gap: 6px; }
  .accounts-page .toolbar > input, .accounts-page .toolbar > select { width: 100%; }
  .accounts-page .toolbar .spacer { display: none; }
  .accounts-page .toolbar > #add-account { width: 42px; height: 42px; padding: 0; font-size: 20px; line-height: 1; }
  .accounts-page .add-account-label { display: none; }
  .account-cards { display: grid; gap: 12px; }
  .account-card { min-width: 0; padding: 14px 16px 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; cursor: pointer; }
  .account-card-head { display: flex; align-items: flex-start; gap: 8px; }
  .account-card-head .identity { flex: 1; min-width: 0; }
  .account-card-head .identity > span { min-width: 0; overflow-wrap: anywhere; }
  .account-card-head .avatar { flex-shrink: 0; }
  .account-card-select { display: grid; place-items: center; min-width: 36px; min-height: 40px; cursor: pointer; }
  .account-card-select input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
  .account-card-followers { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; margin-top: 4px; border-bottom: 1px solid var(--line); }
  .account-card-followers > a { font-variant-numeric: tabular-nums; }
  .account-card-metrics { table-layout: fixed; margin: 4px 0 8px; }
  .account-card-metrics th, .account-card-metrics td { padding: 6px 0; border: 0; background: transparent; }
  .account-card-metrics th:first-child { width: 32%; }
  .account-card-metrics tbody th { font-size: var(--fs-body); color: var(--ink); font-weight: 400; }
  .account-card-metrics tbody tr:hover { background: transparent; }
  .account-card-metrics .account-daily { white-space: normal; overflow-wrap: anywhere; }
  .account-card-metrics .metric-help { width: 18px; height: 18px; padding: 0; font-size: var(--fs-note); margin-left: 4px; }
  .account-card-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--line); font-size: var(--fs-note); }
  .account-card-actions a, .account-card-actions button { display: inline-flex; align-items: center; min-height: 40px; }
  .account-card-actions button { padding: 0; border: 0; background: transparent; color: var(--accent); font-size: var(--fs-note); }
}

.metric-help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 12px; height: 12px; margin-left: 2px; border: 1px solid currentColor;
  border-radius: 50%; font-size: 9px; line-height: 1; font-weight: 400;
  color: var(--muted); cursor: help; vertical-align: middle;
}
.metric-help:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.metric-help:hover, .metric-help:focus-visible { color: var(--accent); }
.metric-tooltip {
  position: fixed; z-index: 60; pointer-events: none;
  max-width: min(320px, calc(100vw - 24px)); padding: 10px 14px;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 6px 24px rgba(32, 36, 51, .1);
  font-size: var(--fs-note); font-weight: 400; line-height: 1.7;
  white-space: normal; text-align: left;
}
.metric-tooltip[hidden] { display: none; }
.daily-views { cursor: help; }
.daily-views:hover, .daily-views:focus-visible { color: var(--accent); }
.daily-views:focus-visible { outline: 2px solid var(--accent); border-radius: 3px; }
.daily-views-tooltip {
  pointer-events: auto; max-width: calc(100vw - 24px);
  max-height: min(60vh, 480px); overflow: auto; overscroll-behavior: contain;
}
.daily-views-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 16px; }
.daily-views-post { min-width: 0; padding: 2px 8px; }
.daily-views-time { color: var(--muted); padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.daily-views-count { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0; }
.daily-views-count strong { font-weight: 500; font-variant-numeric: tabular-nums; }
/* Follower clues: separate modal, leaves the follower table and page state intact. */
.clue-dialog { margin: 0 0 0 auto; width: min(560px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; border-left: 1px solid #ddd; padding: 24px; box-sizing: border-box; overflow-y: auto; color: #262626; background: #fff; }
.clue-dialog::backdrop { background: #0005; }
.clue-heading, .clue-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.clue-heading h2 { font-size: 20px; margin: 0; }
.clue-dialog p, .clue-dialog blockquote { font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
.clue-dialog h3 { font-size: 16px; font-weight: 600; }
.clue-note { background: #fff8e6; padding: 10px 12px; border-radius: 8px; }
.clue-instagram { border: 1px solid #e4e4e7; border-radius: 10px; padding: 10px 14px; }
.clue-results { display: grid; gap: 12px; margin-top: 20px; }
.clue-card, .clue-summary { border: 1px solid #e4e4e7; border-radius: 10px; padding: 14px; }
.clue-card h3 { margin-top: 0; }
.clue-summary { margin-top: 20px; }
.clue-coverage { margin: 12px 0; font-size: 14px; line-height: 1.65; }
.clue-coverage summary { cursor: pointer; color: #555; }
.clue-coverage h3 { margin: 12px 0 4px; font-size: 14px; }
.clue-coverage ul { margin: 0; padding-left: 18px; }
.clue-fact { border-top: 1px solid #eee; padding-top: 8px; margin-top: 12px; }
.clue-fact blockquote { margin: 8px 0; padding-left: 12px; border-left: 3px solid #ddd; color: #666; }
.clue-actions button[aria-pressed="true"] { background: #edf4ff; border-color: #5c87c7; }
@media (max-width: 600px) { .clue-dialog { width: 100vw; padding: 18px; } }

/* Dynamic per-post discussion topics. Long labels wrap on narrow screens. */
button.category { width:100%; border:0; border-radius:8px; background:transparent; text-align:left; color:inherit; padding:10px 0; }
button.category:hover { background:var(--bg); }
.comment-topic .category { grid-template-columns:minmax(140px,200px) minmax(0,1fr) 100px; }
.comment-topic .category > span { overflow-wrap:anywhere; }
.comment-topic .category small strong { color:var(--ink); font-weight:700; }
.comment-topic-summary { line-height:1.7; }
@media(max-width:600px) {
  .comment-topic .category { grid-template-columns:minmax(0,1fr) auto; gap:8px; }
  .comment-topic .category .track { grid-row:2; grid-column:1 / -1; }
  .comment-topic .category small { grid-row:1; grid-column:2; }
}

/* Phone: every modal dialog (data center and publish page) opens as a bottom sheet. */
@media (max-width: 700px) {
  dialog:modal, #add-account-dialog:modal {
    inset: auto 0 0; margin: 0; width: 100%; max-width: 100%; height: auto; max-height: 92dvh;
    box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain;
    border: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -8px 30px rgb(20 25 45 / 14%);
    padding: 22px 16px calc(22px + env(safe-area-inset-bottom, 0px));
    animation: sheet-up .22s ease-out;
  }
}
@keyframes sheet-up { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { dialog:modal { animation: none; } }

/* Account 每日数据: the 48-hour table and chart, one row and one point per day. */
/* Fifteen columns fit the content width on a computer: no minimum width, the
   date column as narrow as its text, and tighter cell padding than the
   hour-by-hour table. Phones still read it sideways. */
.daily-table { min-width: 0; }
.daily-table th, .daily-table td { padding: 7px 5px; }
.daily-table th:first-child, .daily-table td:first-child { padding-left: 8px; }
.daily-table th:last-child, .daily-table td:last-child { padding-right: 8px; }
.daily-table thead th .metric-help { margin-left: 2px; }
@media (min-width: 701px) and (max-width: 1365px) {
  .daily-table th, .daily-table td { padding-left: 3px; padding-right: 3px; font-size: 13px; }
  .daily-table thead th { white-space: normal; }
}
.daily-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.daily-range { position: relative; }
/* With no title above them the overview tabs open the page: they start at the
   panel's top edge, level with the sidebar's first row, not 22px below it. */
.overview-tabs .tabs { margin-top: 0; }
/* 自定义 date range: a trigger shaped like the drop-down beside it, and a
   calendar popover in the drop-down menu's look. */
.drp-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font-size: var(--fs-body); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.drp-trigger:hover, .drp-trigger[aria-expanded="true"] { border-color: #b3a8ff; }
.drp-trigger[aria-expanded="true"] { box-shadow: 0 0 0 3px #7864ff12; }
.drp-trigger svg { width: 16px; height: 16px; fill: none; stroke: #818aa2; stroke-width: 1.8; stroke-linecap: round; }
.drp-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; width: max-content; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: 0 10px 32px #29224424, 0 2px 6px #2922440a; }
.drp-backdrop { display: none; }
.drp-head { position: relative; height: 0; }
.drp-nav { position: absolute; top: -4px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.drp-nav[data-drp-nav="-1"] { left: 0; }
.drp-nav[data-drp-nav="1"] { right: 0; }
.drp-nav:hover:not(:disabled) { background: #f3f0ff; color: var(--accent); }
.drp-nav:disabled { opacity: .3; cursor: default; }
.drp-months { display: flex; gap: 28px; }
.drp-title { height: 24px; margin-bottom: 8px; text-align: center; font-weight: 600; color: var(--ink); }
.drp-grid { display: grid; grid-template-columns: repeat(7, 36px); row-gap: 2px; }
.drp-blank { height: 34px; }
.drp-week { height: 28px; line-height: 28px; text-align: center; color: var(--muted); font-size: var(--fs-note); }
.drp-day { height: 34px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ink); font-size: var(--fs-body); font-variant-numeric: tabular-nums; cursor: pointer; }
.drp-day:hover:not(:disabled) { background: #f3f0ff; color: var(--accent); }
.drp-day:disabled { color: #c7cbd6; cursor: default; }
.drp-day.is-today { box-shadow: inset 0 0 0 1px #c7bfff; }
.drp-day.in-range, .drp-day.in-preview { border-radius: 0; background: var(--soft); color: var(--accent); }
.drp-day.is-start, .drp-day.is-end { background: var(--accent); color: #fff; }
.drp-day.is-start:hover, .drp-day.is-end:hover { background: var(--accent); color: #fff; }
.drp-day:focus-visible { outline: 2px solid #b3a8ff; outline-offset: 1px; }
.drp-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.drp-quick button { padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-size: var(--fs-note); cursor: pointer; }
.drp-quick button:hover, .drp-quick button.selected { border-color: #c7bfff; background: var(--soft); color: var(--accent); }
.drp-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.drp-summary { flex: 1; color: var(--muted); font-size: var(--fs-note); }
.drp-summary.is-error { color: #a34a4a; }
.drp-foot button { padding: 7px 16px; }
@media (max-width: 700px) {
  .drp-backdrop { display: block; position: fixed; inset: 0; z-index: 39; background: #1b1d2a55; }
  .drp-pop { position: fixed; top: auto; right: 0; bottom: 0; left: 0; width: auto; max-height: 92dvh; overflow: auto; border-radius: 16px 16px 0 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); }
  .drp-months { display: block; }
  .drp-months .drp-month:first-child { display: none; }
  .drp-grid { grid-template-columns: repeat(7, 1fr); }
  .drp-day { height: 40px; }
}
.w48-comparison .w48-dot-mark { stroke-width: 0; }
.daily-table td.negative { color: #a34a4a; }
.daily-table-wrap + .platform-empty { margin-top: 10px; }
.platform-section .chart-head select { font-size: var(--fs-body); }
.daily-views-total { display: flex; justify-content: space-between; gap: 12px; margin: 0 8px 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.daily-views-total strong { font-weight: 600; font-variant-numeric: tabular-nums; }
[data-w48-colour="posts"] { --metric-colour:#8a6d3b; }
[data-w48-colour="first_views"] { --metric-colour:#9b8cf0; }
[data-w48-colour="followers_growth"] { --metric-colour:#5b6b8c; }
[data-w48-colour="follow_rate"] { --metric-colour:#a87cc4; }
[data-w48-colour="like_rate"] { --metric-colour:#4aa3c9; }
[data-w48-colour="reply_rate"] { --metric-colour:#4fae86; }
[data-w48-colour="forward_rate"] { --metric-colour:#d39a3c; }
[data-w48-colour="share_rate"] { --metric-colour:#d97aa2; }
[data-w48-colour="followers_count"] { --metric-colour:#3a7ca5; }
.scan-line { margin-top: -6px; }
.scan-posts { padding: 0; border: 0; background: transparent; color: var(--accent); font-size: inherit; }
.scan-posts:disabled { color: var(--muted); opacity: 1; }

/* 停用 accounts: last in the overview, greyed, still clickable to open and 启用. */
/* 管理 (to 启用) stays at full strength. */
tr.account-disabled > :not(:last-child), .account-card.account-disabled > :not(.account-card-actions) { opacity: .55; }
.account-disabled-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 6px; background: #f1f2f5; color: var(--muted); font-size: var(--fs-note); font-weight: 400; vertical-align: middle; }
.account-renamed-tag { background: #fff3e0; color: #a35a00; }

/* 回头客 / 粉丝 tags beside a reader's name; one button opening the history. */
.comment-filters { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.commenter-tags { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
.commenter-tag { font-size: var(--fs-note); line-height: 1.5; padding: 1px 7px; border: 1px solid #dcd8fb; border-radius: 6px; background: #fff; color: var(--accent); white-space: nowrap; }
/* One colour per kind, light fill and dark text, so they read apart from each
   other and from the AI topic pill (soft purple, no border) beside them. */
.commenter-tag.returning { color: #fff; border-color: var(--accent); background: var(--accent); }
.commenter-tag.on-post { color: #1f5bd8; border-color: #cddcfb; background: #eef4ff; }
.commenter-tag.follower { color: #1a7553; border-color: #c4e5d5; background: #ebf7f1; }
.commenter-tag.elsewhere { color: #a85106; border-color: #f4d6ad; background: #fff5e6; }
.commenter-tag.warn { color: #b4443c; border-color: #f1cbc6; background: #fff8f7; }
.commenter-tags:hover .commenter-tag, .commenter-tags:focus-visible .commenter-tag { filter: brightness(.95); }
.commenter-dialog { width: min(1080px, calc(100vw - 80px)); max-height: calc(100vh - 80px); overflow-y: auto; box-sizing: border-box; padding: 22px 24px; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); }
.commenter-dialog::backdrop { background: rgb(20 25 45 / 35%); }
.commenter-dialog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.commenter-dialog-head > button { flex: none; white-space: nowrap; }
.commenter-dialog-head h2 { margin: 0 0 4px; font-size: var(--fs-section); overflow-wrap: anywhere; }
.commenter-dialog-head p { margin: 0; }
.commenter-elsewhere { margin: 16px 0 4px; padding: 12px 16px; border-radius: 10px; background: #fbfbff; }
.commenter-elsewhere h3, .commenter-here { margin: 0 0 6px; font-size: var(--fs-sub); }
.commenter-here { margin-top: 18px; }
.commenter-elsewhere-account + .commenter-elsewhere-account { margin-top: 14px; }
.commenter-elsewhere-head { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.commenter-elsewhere .commenter-post { margin-top: 8px; padding-top: 10px; }
.commenter-post { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.commenter-post header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 4px; }
.commenter-entry { padding: 8px 0; }
.commenter-entry.us { margin-left: 26px; padding-left: 14px; border-left: 2px solid var(--soft); }
.commenter-entry.current { background: #faf9ff; border-radius: 8px; padding: 8px 10px; }
.commenter-entry-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--fs-note); color: var(--muted); }
.commenter-entry-head b { color: var(--ink); font-size: var(--fs-body); }
.commenter-entry-head .here-mark { font-style: normal; color: var(--accent); background: var(--soft); border-radius: 5px; padding: 2px 7px; }
.commenter-entry p { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 600px) { .commenter-dialog { width: calc(100vw - 20px); padding: 18px 16px; } }

/* 人设卡 tab of 账号概览: facts with their sources, then how the account talks. */
.persona h3 { margin: 22px 0 8px; font-size: var(--fs-sub); }
.persona h3 small { margin-left: 8px; font-weight: 400; color: var(--muted); font-size: var(--fs-note); }
.persona-summary { margin: 12px 0; line-height: 1.7; max-width: var(--prose-width); }
.persona-thin { color: #925400; background: #fff4d9; padding: 8px 12px; border-radius: 8px; }
.persona-facts { list-style: none; margin: 0; padding: 0; }
.persona-fact { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 4px 14px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line); }
.persona-cat { font-size: var(--fs-note); color: var(--muted); }
.persona-text { overflow-wrap: anywhere; max-width: var(--prose-width); }
.persona-text small { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-note); }
.persona-links { display: inline-flex; gap: 10px; font-size: var(--fs-note); white-space: nowrap; }
.persona-links small { color: var(--green); }
.persona-source { font-size: var(--fs-note); color: var(--muted); }
.persona-actions { display: inline-flex; gap: 6px; }
.persona-actions button, .persona-option button { padding: 2px 8px; font-size: var(--fs-note); }
.persona-fact.confirmed .persona-text { font-weight: 600; }
.persona-conflict { margin: 12px 0; padding: 10px 14px; border: 1px solid #f1cbc6; border-radius: 10px; background: #fff8f7; max-width: var(--prose-width); }
.persona-conflict > p { margin: 0 0 6px; color: #b4443c; }
.persona-option { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 4px 0; font-size: var(--fs-body); }
.persona-option a { font-size: var(--fs-note); }
.persona-add-open { margin-top: 10px; padding: 4px 0; border: 0; background: transparent; color: var(--accent); font-size: var(--fs-note); }
.persona-add { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; margin: 12px 0; max-width: var(--prose-width); }
.persona-voice { list-style: none; margin: 0; padding: 0; }
.persona-voice li { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px; padding: 4px 0; }
.persona-voice b { font-weight: 600; color: var(--muted); }
.persona-example { margin: 10px 0; padding: 8px 14px; border-left: 3px solid var(--soft); border-radius: 0 8px 8px 0; background: #fbfbff; max-width: var(--prose-width); }
.persona-example p { margin: 2px 0; }
.persona-example a { font-size: var(--fs-note); }
.persona-topics { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 700px) {
  .persona-fact { grid-template-columns: 40px minmax(0, 1fr); }
  .persona-links, .persona-actions { grid-column: 2; }
  .persona-add { grid-template-columns: 1fr 1fr; }
  .persona-add input { grid-column: 1 / -1; }
}

/* 回复 dialog (用户 2026-10-13: it was cluttered): the comment and what was sent,
   AI 推荐 | 自己写 as tabs, a draft chosen by clicking it, one bar of actions. */
.reply-open { padding: 2px 10px; font-size: var(--fs-note); }
.reply-dialog { width: min(860px, calc(100vw - 80px)); max-height: calc(100vh - 60px); overflow-y: auto; box-sizing: border-box; padding: 22px 24px 0; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); }
.reply-dialog::backdrop { background: rgb(20 25 45 / 35%); }
.reply-dialog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.reply-dialog-head > div { min-width: 0; }
.reply-dialog-head h2 { margin: 0 0 4px; font-size: var(--fs-section); overflow-wrap: anywhere; }
.reply-dialog-head > button { flex: none; white-space: nowrap; }
.reply-persona-line { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.reply-persona { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: var(--fs-note); }
.reply-persona-link { flex: none; padding: 0; border: 0; background: transparent; color: var(--accent); font-size: var(--fs-note); }
.reply-quote { margin: 14px 0 0; padding: 10px 14px; border-left: 3px solid var(--soft); border-radius: 0 8px 8px 0; background: #fbfbff; }
.reply-quote p { margin: 0 0 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.reply-quote small { color: var(--muted); }
/* What was sent: one quiet line each under the comment. */
.reply-send { margin-top: 8px; display: grid; gap: 4px; }
.reply-sent { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; padding: 0 2px; font-size: var(--fs-note); color: var(--muted); }
.reply-sent b { color: var(--accent); font-weight: 600; }
.reply-sent.sent b { color: var(--green); }
.reply-sent.failed b, .reply-sent.unknown b { color: #b4443c; }
.reply-sent span { flex: 1 1 200px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.reply-sent button { padding: 1px 8px; font-size: var(--fs-note); }
.reply-send-note { margin: 0; color: var(--muted); font-size: var(--fs-note); }
/* AI 推荐 | 自己写, and on the first the wish and 换两条 beside them. */
.reply-tabs-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 18px; border-bottom: 1px solid var(--line); }
.reply-tabs { display: flex; gap: 4px; }
.reply-tabs button { margin-bottom: -1px; padding: 8px 14px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--muted); }
.reply-tabs button.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.reply-ask { display: flex; gap: 8px; flex: 1 1 320px; max-width: 460px; padding-bottom: 6px; }
.reply-ask input { flex: 1; min-width: 0; box-sizing: border-box; padding: 6px 10px; font-size: var(--fs-note); }
.reply-ask button { padding: 5px 12px; font-size: var(--fs-note); white-space: nowrap; }
.reply-panel { min-width: 0; }
.reply-body { padding: 4px 0 14px; }
/* A draft is chosen by clicking it: the radio mark and the border say which. */
.reply-drafts { display: grid; gap: 0; }
.reply-draft { position: relative; margin-top: 10px; padding: 10px 14px 10px 40px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; }
.reply-draft::before { content: ""; position: absolute; left: 14px; top: 13px; width: 14px; height: 14px; box-sizing: border-box; border: 2px solid #c9cdd8; border-radius: 50%; }
.reply-draft:hover { border-color: #c9c3f5; }
.reply-draft.selected { border-color: var(--accent); background: #fbfbff; box-shadow: 0 0 0 1px var(--accent); }
.reply-draft.selected::before { border: 4px solid var(--accent); }
.reply-draft:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.reply-draft-head { margin-bottom: 4px; }
.reply-lines p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; line-height: 1.65; }
.reply-lines .reply-ko, .reply-lines .reply-text { color: var(--ink); }
.reply-lines .reply-zh { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); color: #5b6272; }
.reply-idea { margin: 6px 0 0; color: var(--muted); font-size: var(--fs-note); }
.reply-new-facts { margin: 6px 0 0; color: #925400; font-size: var(--fs-note); }
.reply-waiting { margin: 14px 0 0; color: var(--muted); }
.reply-error { margin: 10px 0 0; color: #b4443c; }
/* The box and its 翻译成韩语 as one: the button sits inside, at the bottom right (用户 2026-10-13). */
.reply-own { position: relative; margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.reply-own:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.reply-own textarea { display: block; width: 100%; min-height: 104px; box-sizing: border-box; padding: 10px 12px 50px; border: 0; border-radius: 10px; outline: none; resize: vertical; background: transparent; font: inherit; color: var(--ink); }
.reply-own .reply-own-go { position: absolute; right: 10px; bottom: 10px; padding: 5px 14px; border-color: transparent; background: var(--soft); color: var(--accent); font-size: var(--fs-note); }
.reply-own .reply-own-go:hover:not(:disabled) { background: var(--accent); color: #fff; }
/* Korean typed straight in is sent as it is: said at the bottom left, its Chinese under the box (用户 2026-10-16). */
.reply-own .reply-own-lang { position: absolute; left: 12px; bottom: 15px; color: var(--accent); font-size: var(--fs-note); }
.reply-gloss { margin-top: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fbfbff; }
.reply-gloss b { display: block; margin-bottom: 4px; color: var(--muted); font-size: var(--fs-note); font-weight: 600; }
.reply-gloss p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; line-height: 1.65; color: #5b6272; }
.reply-gloss-retry { margin-left: 8px; padding: 2px 10px; font-size: var(--fs-note); }
/* Every action in one bar, kept at the bottom of the dialog while it scrolls. */
.reply-bar { position: sticky; bottom: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 -24px; padding: 12px 24px 16px; border-top: 1px solid var(--line); background: #fff; }
.reply-chosen { color: var(--muted); font-size: var(--fs-note); }
.reply-actions { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.reply-confirm { flex: 1; }
.reply-confirm > p:first-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 8px; }
.reply-confirm > p:first-child span { color: var(--muted); font-size: var(--fs-note); }
.reply-confirm > p:first-child .reply-again { color: #925400; }
.reply-confirm .reply-actions { justify-content: flex-end; width: 100%; }
.reply-login { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
.reply-login input { flex: 1 1 260px; min-width: 0; }
.reply-state { font-size: var(--fs-note); color: var(--accent); }
.reply-state.sent { color: var(--green); }
.reply-state.failed, .reply-state.unknown { color: #b4443c; }
@media (max-width: 700px) {
  .reply-ask { max-width: none; }
  .reply-dialog:modal { padding-bottom: 0; }
  .reply-bar { margin: 0 -16px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
}


.comment footer { flex-wrap: wrap; row-gap: 6px; }
.comment footer .reply-tools { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; flex: none; white-space: nowrap; }
/* A reply sent from here, until collection brings the real one. */
.comment.sent-reply p { color: #4b5162; }
/* The reader's latest word in a conversation, waiting for the account. */
.reply-awaiting { font-size: var(--fs-note); color: #925400; }
/* 负评 on the comment itself (用户 2026-10-13): red and orange tinted, no bar on the
   left (用户 the same day), the AI's reason under the text; answered or hidden ones
   stay tagged on a paler tint. Grey kinds (温和异议、垃圾广告) are only tagged. */
.comment.neg-red, .comment.neg-orange { margin: 8px 0; padding-left: 14px; padding-right: 12px; border-radius: 10px; }
.comment.neg-red { background: #fff3f2; }
.comment.neg-orange { background: #fff6eb; }
.comment.neg-red.neg-handled { background: #fffafa; }
.comment.neg-orange.neg-handled { background: #fffcf7; }
.neg-tag { font-size: var(--fs-note); font-weight: 600; line-height: 1.5; padding: 1px 8px; border-radius: 6px; white-space: nowrap; }
.neg-tag.red { color: #fff; background: #d9534a; }
.neg-tag.orange { color: #fff; background: #e8892b; }
.neg-tag.white { font-weight: 400; color: var(--muted); background: #f1f2f5; }
.comment p.neg-reason { margin: -4px 0 10px; font-size: var(--fs-note); color: #8a3b35; }
.comment.neg-orange p.neg-reason { color: #8a5300; }
/* 隐藏: the comment and its conversation greyed, still listed here. */
.comment.is-hidden .comment-head, .comment.is-hidden > p { opacity: .5; }
.reply-state.hidden { color: var(--muted); }
.hide-open { padding: 2px 10px; font-size: var(--fs-note); color: var(--muted); }

/* 渠道: which platform an account is on (用户 2026-10-28), in the page's purple family. */
/* Both as wide as Threads, the label centred (用户 2026-10-28). */
.platform-tag { display: inline-block; box-sizing: border-box; min-width: 5.6em; text-align: center; padding: 0 9px; border-radius: 999px; background: #f3f0ff; color: var(--accent); font-size: 12px; font-weight: 600; line-height: 22px; white-space: nowrap; vertical-align: middle; }
/* X in Twitter's sky blue beside Threads' purple: the two read apart at a glance (用户 2026-10-28). */
.platform-x { background: #e3f3fd; color: #0b78c2; }
small .platform-tag { margin-left: 4px; font-size: 11px; line-height: 18px; padding: 0 7px; }