:root {
  color: #1c1917;
  background: #efeae2;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.mono { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.muted { color: #78716c; }
.topbar { height: 6px; background: #1c1917; }
.wrap { max-width: 72rem; margin: 0 auto; padding: 2rem 1rem 3rem; }
.intro { max-width: 42rem; }
.eyebrow { margin: 0; letter-spacing: 0.16em; font-size: 0.75rem; color: #78716c; }
h1 { margin: 0.4rem 0 0; font-size: 2.2rem; letter-spacing: -0.03em; }
h2 { margin: 0; font-size: 1rem; }
.lead { color: #57534e; line-height: 1.7; }
.layout { display: grid; gap: 1.5rem; align-items: start; }
.card {
  background: #fffcf8;
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 1px 0 rgba(28, 25, 23, 0.06);
  outline: 1px solid rgba(28, 25, 23, 0.1);
}
.composer { position: sticky; top: 1rem; }
.row-between, .toolbar, .actions, .chips, .stats { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.row-between { justify-content: space-between; }
label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.75rem; font-weight: 600; color: #78716c; }
textarea, input, select {
  width: 100%;
  border: 1px solid #e7e5e4;
  border-radius: 0.7rem;
  background: #fff;
  padding: 0.55rem 0.7rem;
}
textarea { min-height: 18rem; resize: vertical; line-height: 1.6; font-size: 13px; }
textarea:focus, input:focus, select:focus { outline: 3px solid rgba(120, 113, 108, 0.25); border-color: #a8a29e; }
.hint { margin: 0.5rem 0 0; color: #78716c; font-size: 0.8rem; line-height: 1.5; }
.hint.strong { font-weight: 600; }
.preview { margin-top: 0.8rem; background: rgba(231, 229, 228, 0.55); border-radius: 0.8rem; padding: 0.75rem; }
.preview ul { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.preview li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.warn, .notice { color: #92400e; background: #fffbeb; border-radius: 0.7rem; padding: 0.55rem 0.7rem; font-size: 0.875rem; }
.actions { margin-top: 0.8rem; }
button {
  border: 1px solid transparent;
  border-radius: 0.7rem;
  padding: 0.45rem 0.8rem;
  background: #fff;
}
button:disabled { opacity: 0.45; cursor: not-allowed; }
.primary { background: #1c1917; color: #fff; height: 2.5rem; }
.danger { background: #fee2e2; color: #991b1b; height: 2.5rem; }
.ghost { border-color: #e7e5e4; background: #fff; }
.text { background: transparent; }
.chip, .status-chip { border-radius: 999px; padding: 0.25rem 0.7rem; font-size: 0.75rem; font-weight: 600; }
.chip.on, .status-chip.on { background: #1c1917; color: #fff; }
.chip:not(.on) { border-color: #e7e5e4; }
.status-chip:not(.on) { background: #f5f5f4; color: #57534e; border: 0; }
.filters { display: grid; gap: 0.75rem; margin-top: 0.9rem; }
.bar { margin-top: 0.8rem; height: 6px; background: #e7e5e4; border-radius: 999px; overflow: hidden; }
.bar div { height: 100%; background: #1c1917; width: 0; }
.toolbar { justify-content: space-between; align-items: flex-end; }
.stat { background: #fffcf8; border-radius: 0.8rem; padding: 0.4rem 0.7rem; outline: 1px solid rgba(28, 25, 23, 0.1); }
.stat b { display: block; font-size: 0.9rem; }
.stat span { font-size: 11px; color: #78716c; }
.results { min-width: 0; display: flex; flex-direction: column; gap: 0.8rem; }
.empty, .none {
  border-radius: 1rem;
  background: rgba(255, 252, 248, 0.75);
  padding: 2.5rem 1rem;
  text-align: center;
}
.empty { border: 1px dashed rgba(120, 113, 108, 0.7); }
.person {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  gap: 0.75rem;
  align-items: center;
  background: #fffcf8;
  border-radius: 1rem;
  padding: 0.8rem;
  outline: 1px solid rgba(28, 25, 23, 0.1);
}
.person img, .avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  object-fit: cover;
  background: #e7e5e4;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #44403c;
}
.name { margin: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.handle, .url { margin: 0; color: #78716c; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.url { display: block; margin-top: 0.35rem; }
.followers { margin: 0; color: #115e59; font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.meta { grid-column: 2 / -1; display: flex; gap: 0.5rem; align-items: center; min-width: 0; }
.badge { border-radius: 999px; background: #f5f5f4; padding: 0.1rem 0.45rem; font-size: 12px; }
.badge.bad { background: #fee2e2; color: #991b1b; }
.bio { grid-column: 2 / -1; margin: 0; color: #57534e; font-size: 0.9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 980px) {
  .layout { grid-template-columns: 22rem minmax(0, 1fr); }
  .filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 979px) {
  .composer { position: static; }
  h1 { font-size: 1.8rem; }
}