/* ==========================================================================
   江大π社区 · 夜航星图
   A dark, map-first member experience. Flat surfaces, one data hue, real data.
   ========================================================================== */

:root {
  --bg: #0e0d0c;
  --bg-deep: #090807;
  --surface: #151412;
  --surface-raised: #1b1917;
  --surface-soft: #11100f;
  --cream: #f4f4f4;
  --ink: #f4f4f4;
  --ink-soft: #d5d5d0;
  --muted: #b4b4af;
  --muted-light: #9a9a95;
  --line: rgba(245, 240, 230, 0.1);
  --line-strong: rgba(245, 240, 230, 0.18);
  --forest: #151412;
  --forest-soft: #1c1a18;
  --teal: #68d6b1;
  --mint: #68d6b1;
  --coral: #e2765b;
  --coral-deep: #e56555;
  --sun: #d8ad55;
  --sky: #4cb3f0;
  --blue: #4cb3f0;
  --violet: #9b8bd8;
  --pink: #ce7fa7;
  --accent: #4cb3f0;
  --paper: #f1e9da;
  --paper-ink: #191612;
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 20px;
  --font-sans: "Inter", "Segoe UI", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI",
    "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --font-display: "Inter", "Segoe UI", "PingFang SC", "Microsoft YaHei UI", sans-serif;
}

html {
  color-scheme: dark;
  background: var(--bg);
}

body {
  color: var(--ink);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.65;
}

::selection {
  color: #071015;
  background: var(--accent);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.site *,
.auth-page *,
.fatal-page * {
  background-image: none !important;
  text-shadow: none !important;
}

.site *,
.auth-page *,
.fatal-page * {
  box-shadow: none;
}

/* Real overlays are the only things allowed to float. */
.notification-panel,
.user-popover,
.modal-card,
.star-directory {
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42) !important;
}

a {
  color: inherit;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.container {
  width: min(1280px, calc(100% - 48px));
}

.page {
  padding: 20px 0 72px;
}

.page-stack {
  gap: 24px;
}

.eyebrow,
.kicker {
  display: none !important;
}

/* ==========================================================================
   Shell
   ========================================================================== */

.topbar {
  height: 64px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.topbar-inner {
  height: 64px;
  gap: 24px;
}

.brand {
  gap: 9px;
}

.brand-mark {
  width: 33px;
  height: 33px;
  border: 1px solid #332f2a;
  border-radius: 10px;
  color: var(--ink);
  background: #181614;
}

.brand-mark::before,
.brand-spark {
  display: none;
}

.brand-pi {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.06em;
}

.brand-text strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.brand-text small {
  margin-top: 1px;
  color: var(--muted-light);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
}

.brand--small .brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
}

.brand--small .brand-pi {
  font-size: 20px;
}

.brand--small .brand-text strong {
  font-size: 14px;
}

.brand--small .brand-text small {
  font-size: 11.5px;
}

.main-nav {
  gap: 21px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.nav-link {
  gap: 6px;
  padding: 8px 0;
  border-radius: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  transition: color 160ms ease;
}

.nav-link .icon {
  width: 15px;
  height: 15px;
  stroke-width: 1.6;
  opacity: 0.7;
}

.nav-link:hover {
  color: var(--ink);
  background: transparent;
}

.nav-link.is-active {
  color: var(--ink);
  background: transparent;
  box-shadow: none;
}

.nav-link.is-active .icon {
  opacity: 1;
}

.top-search {
  max-width: 270px;
  min-height: 36px;
  height: 36px;
  margin-left: auto;
  padding: 0 10px;
  border: 1px solid #292622;
  border-radius: 8px;
  background: #151412;
  color: var(--ink);
}

.top-search:focus-within {
  border-color: #47423b;
  background: #181614;
}

.top-search input {
  font-size: 12.5px;
}

.top-search input::placeholder {
  color: var(--muted-light);
}

.top-search .icon {
  width: 15px;
  height: 15px;
  color: var(--muted);
}

.search-key {
  display: none;
}

.topbar-actions {
  gap: 8px;
}

.icon-btn {
  width: 36px;
  height: 36px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted);
}

.icon-btn:hover {
  color: var(--ink);
  background: #1a1816;
}

.notification-badge {
  min-width: 15px;
  height: 15px;
  color: #0e0d0c;
  background: var(--ink);
  font-size: 11px;
  font-weight: 600;
}

.btn {
  min-height: 38px;
  padding: 8px 15px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  box-shadow: none;
}

.btn:hover {
  transform: none;
  box-shadow: none;
}

.btn--primary,
.btn--compose,
.btn--sun {
  color: #0e0d0c;
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: none;
}

.btn--primary:hover,
.btn--compose:hover,
.btn--sun:hover {
  color: #0e0d0c;
  background: #ded6c9;
  border-color: #ded6c9;
  box-shadow: none;
}

.btn--compose {
  min-height: 36px;
  padding-inline: 13px;
}

.btn--ghost {
  color: var(--ink-soft);
  border-color: #2d2925;
  background: transparent;
}

.btn--ghost:hover {
  color: var(--ink);
  border-color: #464039;
  background: #1a1816;
  box-shadow: none;
}

.btn--ghost-light {
  color: var(--ink);
  border-color: var(--line);
  background: transparent;
  backdrop-filter: none;
}

.btn--ghost-light:hover {
  color: var(--ink);
  background: #1a1816;
}

.btn--small {
  min-height: 32px;
  padding: 6px 11px;
  font-size: 11.5px;
}

.btn--danger-ghost,
.btn--plain-danger {
  color: var(--coral);
}

.btn:disabled {
  opacity: 0.55;
}

.user-menu {
  margin-left: 2px;
}

.user-chip {
  gap: 7px;
  min-height: 36px;
  padding: 2px 6px 2px 2px;
  color: var(--ink-soft);
  font-size: 12.5px;
}

.user-chip:hover {
  background: #1a1816;
}

.user-chip-name {
  max-width: 78px;
}

.user-popover {
  border: 1px solid #302b26;
  border-radius: 14px;
  background: #181614;
}

.popover-profile {
  border-bottom: 1px solid var(--line);
}

.popover-profile strong {
  font-size: 13px;
}

.popover-profile span {
  font-size: 11.5px;
  color: var(--muted);
}

.popover-menu a,
.popover-menu button {
  min-height: 36px;
  color: var(--ink-soft);
  font-size: 12.5px;
}

.popover-menu a:hover,
.popover-menu button:hover {
  color: var(--ink);
  background: #211e1b;
}

.popover-count {
  color: var(--muted-light);
  font-size: 11.5px;
}

.popover-foot {
  color: var(--muted-light);
  font-size: 11.5px;
}

.admin-chip,
.demo-chip,
.ai-role-chip {
  border-color: #35302a;
  color: var(--ink-soft);
  background: #211e1b;
  font-size: 11px;
}

.notification-panel {
  border: 1px solid #302b26;
  background: #181614;
}

.notification-header,
.notification-item {
  border-color: var(--line);
}

.notification-item:hover {
  background: #1f1c19;
}

.notification-title,
.notification-copy {
  color: var(--ink-soft);
}

.notification-time,
.notification-empty {
  color: var(--muted-light);
  font-size: 11px;
}

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-deep);
}

.footer-inner {
  padding: 28px 0 32px;
}

.footer-main p {
  color: var(--muted);
  font-size: 12px;
}

.footer-meta {
  gap: 9px;
  color: var(--muted-light);
  font-size: 11px;
}

.footer-device,
.footer-device-switch {
  color: var(--muted);
  font-size: 11px;
}

.mobile-nav {
  border-top: 1px solid var(--line);
  background: rgba(14, 13, 12, 0.96);
  backdrop-filter: none;
}

.mobile-nav-link {
  color: var(--muted-light);
  font-size: 11.5px;
}

.mobile-nav-link.is-active {
  color: var(--ink);
}

.mobile-nav-link .icon {
  width: 19px;
  height: 19px;
}

.mobile-compose {
  color: #0e0d0c;
  background: var(--ink);
  box-shadow: none;
}

.compose-fab {
  display: none;
}

@media (max-width: 900px) {
  .compose-fab {
    position: fixed;
    right: 18px;
    bottom: calc(84px + env(safe-area-inset-bottom));
    z-index: 290;
    display: flex;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #10212a;
    border-radius: 50%;
    color: #071016;
    background: var(--accent);
    box-shadow: none;
    cursor: grab;
    touch-action: none;
    user-select: none;
  }

  .compose-fab .icon {
    width: 23px;
    height: 23px;
    stroke-width: 1.8;
  }

  .compose-fab.is-dragging {
    cursor: grabbing;
    transform: scale(0.96);
    transition: none;
  }

  .compose-fab:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
  }

  .has-modal .compose-fab {
    display: none;
  }
}

/* ==========================================================================
   AI office
   ========================================================================== */

.office-page {
  padding-top: 24px;
}

.office-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 34px;
  align-items: stretch;
  padding: 28px;
  border: 1px solid #292521;
  border-radius: 20px;
  background: #151412;
}

.office-hero-copy {
  max-width: 780px;
}

.office-kicker {
  color: var(--accent);
  font-size: 12px;
  line-height: 1.5;
}

.office-hero h1 {
  margin: 7px 0 10px;
  color: var(--ink);
  font-size: clamp(34px, 4.4vw, 52px);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1.05;
}

.office-hero-copy > p:not(.office-kicker) {
  max-width: 650px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
}

.office-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 17px;
  color: var(--muted-light);
  font-size: 12px;
}

.office-hero-meta strong {
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.office-hero-mark {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
  padding: 18px;
  border-radius: 14px;
  color: var(--accent);
  background: #0f1112;
}

.office-hero-mark strong {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 68px;
  font-weight: 500;
  letter-spacing: -0.09em;
  line-height: 0.9;
}

.office-hero-mark span {
  color: var(--muted-light);
  font-size: 12px;
  line-height: 1.5;
}

.office-desk {
  padding: 24px;
  margin-top: 16px;
  border: 1px solid #292521;
  border-radius: 20px;
  background: #151412;
}

.office-desk-head,
.office-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.office-live-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-size: 11.5px;
}

.office-live-label i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.office-desk-head h2 {
  margin: 5px 0 4px;
  color: var(--ink);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.035em;
}

.office-desk-head p {
  color: var(--muted-light);
  font-size: 12.5px;
}

.office-desk-note {
  flex: none;
  color: var(--muted-light);
  font-size: 11.5px;
}

.office-ask-form {
  margin-top: 15px;
}

.office-ask-form textarea {
  width: 100%;
  min-height: 82px;
  resize: vertical;
  padding: 14px 15px;
  border: 1px solid #3a332b;
  border-radius: 12px;
  color: var(--ink);
  background: #0f0e0d;
  font: inherit;
  font-size: 15px;
  line-height: 1.65;
  outline: none;
}

.office-ask-form textarea:focus {
  border-color: #72675b;
}

.office-ask-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 9px;
}

.office-ask-actions > span {
  color: var(--muted-light);
  font-size: 11.5px;
}

.office-answer-wrap {
  margin-top: 18px;
}

.office-welcome {
  padding: 21px;
  border: 1px solid #2d2822;
  border-radius: 14px;
  background: #11100f;
}

.office-welcome-label {
  color: var(--muted-light);
  font-size: 11.5px;
}

.office-welcome h2 {
  max-width: 600px;
  margin: 7px 0 9px;
  color: var(--ink);
  font-size: 25px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.25;
}

.office-welcome p {
  max-width: 650px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.75;
}

.office-prompt-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 15px;
}

.office-prompt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid #332d27;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 11.5px;
  text-align: left;
}

.office-prompt .icon {
  width: 14px;
  height: 14px;
  flex: none;
}

.office-prompt:hover {
  color: var(--ink);
  border-color: #5a5045;
  background: #1b1816;
}

.office-answer-card .office-prompt {
  color: rgba(25, 22, 18, 0.72);
  border-color: rgba(25, 22, 18, 0.2);
  background: transparent;
}

.office-answer-card .office-prompt:hover {
  color: #191612;
  border-color: rgba(25, 22, 18, 0.46);
  background: rgba(25, 22, 18, 0.05);
}

.office-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px;
  border: 1px solid #2d2822;
  border-radius: 14px;
  background: #11100f;
  color: var(--muted);
  font-size: 12.5px;
}

.office-loading .button-spinner {
  flex: none;
}

.office-answer-card {
  padding: 24px;
  border: 1px solid #d8cdbb;
  border-radius: 16px;
  color: #191612;
  background: #f1e9da;
}

.office-answer-card--fallback {
  padding: 22px;
}

.office-answer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.office-answer-kicker,
.office-answer-category {
  color: rgba(25, 22, 18, 0.58);
  font-size: 11.5px;
}

.office-answer-category {
  padding: 3px 7px;
  border: 1px solid rgba(25, 22, 18, 0.18);
  border-radius: 4px;
}

.office-answer-card h2 {
  margin: 12px 0 7px;
  color: #191612;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.2;
}

.office-answer-intro {
  max-width: 750px;
  color: rgba(25, 22, 18, 0.72);
  font-size: 14px;
  line-height: 1.8;
}

.office-steps {
  display: grid;
  gap: 0;
  margin: 20px 0;
  padding: 0;
  list-style: none;
}

.office-steps li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid rgba(25, 22, 18, 0.14);
}

.office-steps li:last-child {
  border-bottom: 1px solid rgba(25, 22, 18, 0.14);
}

.office-step-index {
  color: rgba(25, 22, 18, 0.4);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 14px;
  line-height: 1.7;
}

.office-steps p {
  color: #191612;
  font-size: 15px;
  line-height: 1.7;
}

.office-answer-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 24px;
  padding-top: 4px;
}

.office-note-block h3,
.office-source-block h3 {
  margin-bottom: 7px;
  color: rgba(25, 22, 18, 0.56);
  font-size: 11.5px;
  font-weight: 500;
}

.office-note-block ul,
.office-source-block ul {
  padding-left: 18px;
  color: rgba(25, 22, 18, 0.78);
  font-size: 12.5px;
  line-height: 1.75;
}

.office-note-block li + li,
.office-source-block li + li {
  margin-top: 5px;
}

.office-source-block ul {
  padding-left: 0;
  list-style: none;
}

.office-source-block li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px;
}

.office-source-block a,
.office-source-block > ul > li > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #191612;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.office-source-block a .icon,
.office-source-block li > span .icon {
  width: 13px;
  height: 13px;
  flex: none;
}

.office-source-kind {
  color: rgba(25, 22, 18, 0.48);
  font-size: 11px;
}

.office-answer-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 18px;
  padding-top: 13px;
  margin-top: 16px;
  border-top: 1px solid rgba(25, 22, 18, 0.14);
  color: rgba(25, 22, 18, 0.5);
  font-size: 11px;
  line-height: 1.6;
}

.office-followup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 13px;
}

.office-followup > span {
  color: rgba(25, 22, 18, 0.5);
  font-size: 11.5px;
}

.office-followup button {
  padding: 3px 7px;
  border: 1px solid rgba(25, 22, 18, 0.18);
  border-radius: 5px;
  color: rgba(25, 22, 18, 0.78);
  background: transparent;
  font: inherit;
  font-size: 11.5px;
}

.office-followup button:hover {
  border-color: rgba(25, 22, 18, 0.4);
  color: #191612;
}

.office-answer-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}

.office-answer-card .btn--ghost {
  border-color: rgba(25, 22, 18, 0.28);
  color: #191612;
}

.office-answer-card .btn--ghost:hover {
  border-color: #191612;
  background: rgba(25, 22, 18, 0.06);
}

.office-fallback-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.office-answer-empty {
  padding: 18px;
  border: 1px solid #2d2822;
  border-radius: 12px;
  color: var(--muted);
  background: #11100f;
  font-size: 12.5px;
  line-height: 1.7;
}

.office-directory {
  margin-top: 27px;
}

.office-section-head {
  align-items: flex-end;
  margin-bottom: 11px;
}

.office-section-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.035em;
}

.office-section-head p {
  margin-top: 4px;
  color: var(--muted-light);
  font-size: 12px;
  line-height: 1.6;
}

.office-section-head > span {
  color: var(--muted-light);
  font-size: 11.5px;
}

.office-topic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.office-topic-card {
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  min-height: 88px;
  padding: 14px;
  border: 1px solid #292521;
  border-radius: 13px;
  color: var(--ink);
  background: #151412;
  font: inherit;
  text-align: left;
}

.office-topic-card:hover {
  border-color: #4b433a;
  background: #1a1715;
}

.office-topic-icon {
  display: flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.office-topic-icon .icon {
  width: 18px;
  height: 18px;
}

.office-topic-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.office-topic-copy strong {
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 500;
}

.office-topic-copy small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted-light);
  font-size: 11.5px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.office-topic-arrow {
  color: var(--muted-light);
}

.office-topic-arrow .icon {
  width: 14px;
  height: 14px;
}

.office-qa {
  margin-top: 30px;
}

.office-qa-label {
  color: var(--accent);
  font-size: 11.5px;
}

.office-qa .office-section-head h2 {
  margin-top: 4px;
}

.office-question-form {
  padding: 17px;
  border: 1px solid #2b2621;
  border-radius: 15px;
  background: #151412;
}

.office-question-form-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.office-question-form-head h3 {
  margin-top: 3px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 500;
}

.office-question-form-head > span {
  color: var(--muted-light);
  font-size: 11px;
}

.office-question-form-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.office-question-form select,
.office-question-form textarea,
.office-answer-form textarea {
  width: 100%;
  border: 1px solid #3a332b;
  border-radius: 9px;
  color: var(--ink);
  background: #0f0e0d;
  font: inherit;
  font-size: 12.5px;
  line-height: 1.6;
  outline: none;
}

.office-question-form select {
  height: 39px;
  padding: 0 9px;
}

.office-question-form textarea {
  min-height: 68px;
  resize: vertical;
  padding: 9px 10px;
}

.office-question-form select:focus,
.office-question-form textarea:focus,
.office-answer-form textarea:focus {
  border-color: #706559;
}

.office-question-form-foot,
.office-answer-form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 9px;
}

.office-question-form-foot > span,
.office-answer-form-foot > span {
  color: var(--muted-light);
  font-size: 11px;
  line-height: 1.5;
}

.office-question-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.office-question-card {
  padding: 18px;
  border: 1px solid #292521;
  border-radius: 15px;
  background: #151412;
}

.office-question-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.office-question-category {
  color: var(--accent);
  font-size: 11.5px;
}

.office-question-time {
  color: var(--muted-light);
  font-size: 11px;
}

.office-question-card > h3 {
  margin: 8px 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.45;
}

.office-question-author {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted-light);
  font-size: 11.5px;
}

.office-question-author .avatar {
  width: 20px;
  height: 20px;
  font-size: 8.5px;
}

.office-question-author em {
  color: var(--accent);
  font-size: 11px;
  font-style: normal;
}

.office-answer-list {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.office-people-answer {
  padding: 10px 12px;
  border-radius: 9px;
  background: #11100f;
}

.office-people-answer.is-official {
  background: #131a1c;
}

.office-people-answer-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  color: var(--muted-light);
  font-size: 11.5px;
}

.office-people-answer-head strong {
  color: var(--ink-soft);
  font-size: 11.5px;
  font-weight: 500;
}

.office-people-answer-head time {
  margin-left: auto;
  color: var(--muted-light);
  font-size: 11px;
}

.office-people-answer .avatar {
  width: 20px;
  height: 20px;
  font-size: 8.5px;
}

.office-official-badge {
  padding: 2px 5px;
  border: 1px solid rgba(76, 179, 240, 0.3);
  border-radius: 3px;
  color: var(--accent);
  font-size: 11px;
}

.office-people-answer p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.7;
  white-space: pre-line;
}

.office-helpful {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
  margin-top: 5px;
  border: 0;
  color: var(--muted-light);
  background: transparent;
  font: inherit;
  font-size: 11px;
}

.office-helpful .icon {
  width: 13px;
  height: 13px;
}

.office-helpful.is-liked {
  color: var(--accent);
}

.office-helpful:disabled {
  opacity: 0.6;
}

.office-no-answer {
  color: var(--muted-light);
  font-size: 12px;
}

.office-answer-composer {
  margin-top: 11px;
  border-top: 1px solid #292521;
}

.office-answer-composer summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-top: 10px;
  color: var(--muted);
  font-size: 11.5px;
  cursor: pointer;
  list-style: none;
}

.office-answer-composer summary::-webkit-details-marker {
  display: none;
}

.office-answer-composer summary .icon {
  width: 14px;
  height: 14px;
}

.office-answer-form {
  padding-top: 9px;
}

.office-answer-form textarea {
  min-height: 62px;
  resize: vertical;
  padding: 8px 10px;
}

.office-disclaimer {
  margin-top: 22px;
  color: var(--muted-light);
  font-size: 11px;
  line-height: 1.7;
}

@media (max-width: 820px) {
  .office-hero {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 20px;
  }

  .office-hero-mark {
    min-height: 72px;
    padding: 12px;
  }

  .office-hero-mark strong {
    font-size: 38px;
  }

  .office-hero-mark span {
    font-size: 11px;
  }

  .office-desk {
    padding: 16px;
  }

  .office-desk-head {
    flex-direction: column;
    gap: 6px;
  }

  .office-ask-actions,
  .office-question-form-head,
  .office-question-form-foot,
  .office-answer-form-foot {
    align-items: flex-start;
    flex-direction: column;
  }

  .office-answer-card {
    padding: 18px;
  }

  .office-answer-card h2 {
    font-size: 24px;
  }

  .office-answer-columns {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .office-answer-foot {
    flex-direction: column;
  }

  .office-topic-grid {
    grid-template-columns: 1fr;
  }

  .office-question-form-row {
    grid-template-columns: 1fr;
  }

  .office-section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .office-question-form-head > span {
    display: none;
  }

  .office-question-card {
    padding: 15px;
  }

  .office-question-card > h3 {
    font-size: 16.5px;
  }

  .office-step-index {
    font-size: 13px;
  }

  .office-steps p {
    font-size: 14px;
  }
}


/* ==========================================================================
   Shared controls
   ========================================================================== */

.card,
.side-card,
.friend-card,
.profile-card,
.topic-cloud-card,
.active-people-card,
.discover-panel {
  border: 1px solid #27231f;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: none;
}

.btn .icon,
.text-button .icon {
  stroke-width: 1.8;
}

.text-button {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
}

.text-button:hover {
  color: var(--ink);
}

.muted-copy {
  color: var(--muted);
  font-size: 12.5px;
}

.form-field label {
  color: var(--ink-soft);
  font-size: 12px;
}

.input-wrap,
.select-wrap {
  border-color: #2b2722;
  background: #151412;
}

.input-wrap:focus-within,
.select-wrap:focus-within {
  border-color: #4b453d;
  box-shadow: 0 0 0 3px rgba(76, 179, 240, 0.09);
}

.input-wrap input,
.select-wrap select,
.form-field textarea {
  color: var(--ink);
  background: transparent;
  font-size: 13.5px;
}

.input-wrap input::placeholder,
.form-field textarea::placeholder {
  color: var(--muted-light);
}

.form-error {
  border-color: rgba(226, 118, 91, 0.25);
  color: #f1a28f;
  background: rgba(226, 118, 91, 0.08);
  font-size: 12px;
}

.empty-state {
  border: 1px solid #27231f;
  border-radius: var(--radius-lg);
  background: #131210;
}

.empty-state h3 {
  font-size: 16px;
}

.empty-state p {
  color: var(--muted);
  font-size: 12.5px;
}

.empty-symbol {
  color: var(--muted-light);
  font-size: 18px;
}

/* ==========================================================================
   Home
   ========================================================================== */

.home-page {
  padding-top: 18px;
}

.home-masthead {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  min-height: 350px;
  overflow: hidden;
  border: 1px solid #282420;
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.home-masthead-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px 34px;
}

.home-greeting {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
}

.home-masthead h1 {
  color: var(--ink);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.3;
}

.home-masthead h1 span {
  color: var(--muted);
}

.home-masthead-description {
  max-width: 420px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.8;
}

.home-masthead-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
}

.home-text-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-soft);
  font-size: 12px;
  border-bottom: 1px solid #3b3530;
  padding-bottom: 2px;
}

.home-text-link:hover {
  color: var(--ink);
  border-color: var(--ink);
}

.home-text-link .icon {
  width: 13px;
  height: 13px;
}

.home-masthead-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 22px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}

.home-masthead-meta strong {
  margin-right: 4px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.star-window {
  position: relative;
  display: flex;
  min-height: 350px;
  flex-direction: column;
  border-left: 1px solid #2b2723;
  background: #0b0a09;
}

.star-window-head,
.star-window-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 17px;
  color: var(--muted);
  font-size: 11px;
}

.star-window-head {
  border-bottom: 1px solid #211d19;
}

.star-window-head span:first-child {
  color: var(--ink-soft);
}

.star-window-foot {
  border-top: 1px solid #211d19;
}

.star-window-foot span:last-child {
  color: var(--ink-soft);
}

.star-window-canvas {
  position: relative;
  min-height: 260px;
  flex: 1;
  overflow: hidden;
}

.star-window-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.star-window-grid path {
  fill: none;
  stroke: #24201c;
  stroke-width: 0.35;
}

.star-window-edges line {
  stroke-width: 0.35;
}

.star-window-edges line.is-friend {
  stroke: rgba(245, 240, 230, 0.2);
}

.star-window-anchor-g circle {
  fill: #4cb3f0;
}

.star-window-anchor {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, 15px);
  color: var(--muted);
  font-size: 11.5px;
  white-space: nowrap;
}

.star-window-node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transform: translate(-50%, -50%);
}

.star-window-node .avatar {
  width: 26px;
  height: 26px;
  border: 1px solid #0b0a09;
  font-size: 11px;
}

.star-window-node.is-me {
  z-index: 3;
}

.star-window-me {
  color: var(--accent);
  font-size: 11px;
  line-height: 1;
}

.star-window:hover .star-window-head span:first-child {
  color: #fff;
}

.star-window--empty .star-window-foot {
  margin-top: auto;
}

.home-grid {
  grid-template-columns: 196px minmax(0, 1fr) 270px;
  gap: 24px;
  margin-top: 20px;
}

.sidebar {
  gap: 20px;
}

.side-identity {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.side-identity-head {
  display: flex;
  align-items: center;
  gap: 11px;
}

.side-identity-head .avatar {
  width: 48px;
  height: 48px;
}

.side-identity-head h2 {
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.side-identity-head p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.side-identity-bio {
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.side-interest-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 11px;
}

.side-interest-row span {
  padding: 3px 7px;
  border: 1px solid #2c2823;
  border-radius: 999px;
  color: var(--muted);
  font-size: 11.5px;
}

.side-identity-stats {
  display: flex;
  gap: 19px;
  margin-top: 15px;
}

.side-identity-stats a,
.side-identity-stats div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.side-identity-stats strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.side-identity-stats span {
  color: var(--muted-light);
  font-size: 11.5px;
}

.side-identity > .home-text-link {
  margin-top: 13px;
  font-size: 11px;
}

.side-section {
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.sidebar > .side-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.side-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.side-heading h2 {
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.side-heading > span,
.side-heading p {
  color: var(--muted-light);
  font-size: 11.5px;
}

.side-heading p {
  margin-top: 2px;
}

.channel-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.channel-link {
  display: flex;
  min-height: 31px;
  align-items: center;
  gap: 8px;
  padding: 4px 7px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 12px;
}

.channel-link:hover {
  color: var(--ink-soft);
  background: #171513;
}

.channel-link.is-active {
  color: var(--ink);
  background: #1a1816;
}

.channel-dot {
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background: var(--channel-color, var(--muted));
}

.channel-dot--all {
  background: var(--ink);
}

.channel-label {
  min-width: 0;
  flex: 1;
}

.channel-count {
  color: var(--muted-light);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.request-banner {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 8px 11px;
  border: 1px solid #2a2621;
  border-radius: 10px;
  background: #171513;
  color: var(--ink-soft);
}

.request-banner:hover {
  border-color: #464039;
  background: #1b1815;
}

.request-icon {
  display: flex;
  width: 25px;
  height: 25px;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.request-icon .icon {
  width: 17px;
  height: 17px;
}

.request-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.request-copy strong {
  color: var(--ink-soft);
  font-size: 11.5px;
  font-weight: 500;
}

.request-copy small {
  color: var(--muted-light);
  font-size: 11.5px;
}

.request-banner > .icon {
  width: 14px;
  height: 14px;
  color: var(--muted-light);
}

.hot-topic-list {
  display: flex;
  flex-direction: column;
}

.hot-topic-list li {
  border-bottom: 1px solid rgba(245, 240, 230, 0.055);
}

.hot-topic-list li:last-child {
  border-bottom: 0;
}

.hot-topic-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 7px 0;
}

.hot-topic-list a:hover .hot-topic-copy strong {
  color: var(--ink);
}

.hot-rank {
  width: 17px;
  flex: none;
  color: var(--muted-light);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
}

.hot-topic-list li:first-child .hot-rank {
  color: var(--accent);
}

.hot-topic-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 1px;
}

.hot-topic-copy strong {
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 11.5px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hot-topic-copy small {
  color: var(--muted-light);
  font-size: 11.5px;
}

.hot-arrow {
  color: var(--muted-light);
}

.hot-arrow .icon {
  width: 13px;
  height: 13px;
}

.people-list {
  display: flex;
  flex-direction: column;
}

.person-row {
  border-bottom: 1px solid rgba(245, 240, 230, 0.055);
}

.person-row:last-child {
  border-bottom: 0;
}

.person-row-main {
  gap: 8px;
  padding: 8px 0;
}

.person-row .avatar {
  width: 31px;
  height: 31px;
  font-size: 12px;
}

.person-copy strong {
  color: var(--ink-soft);
  font-size: 11.5px;
  font-weight: 500;
}

.person-copy span {
  color: var(--muted-light);
  font-size: 11.5px;
}

.person-row-add {
  color: var(--muted-light);
}

.drift-teaser {
  border-top: 1px solid var(--line);
}

.drift-teaser-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.drift-teaser-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(245, 240, 230, 0.055);
}

.drift-teaser-item:hover .drift-teaser-excerpt {
  color: var(--ink);
}

.drift-teaser-meta {
  color: var(--muted-light);
  font-size: 11.5px;
}

.drift-teaser-excerpt {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.7;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.drift-teaser-foot {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--muted-light);
  font-size: 11.5px;
}

.drift-teaser-foot .icon {
  width: 11px;
  height: 11px;
}

.drift-teaser-action {
  width: 100%;
  margin-top: 10px;
}

/* Feed */

.feed-column {
  gap: 16px;
}

.composer-card {
  padding: 11px 13px 9px;
  border: 1px solid #282420;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: none;
}

.composer-main {
  gap: 10px;
  min-height: 50px;
}

.composer-placeholder strong {
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
}

.composer-placeholder small {
  color: var(--muted-light);
  font-size: 11px;
}

.composer-arrow {
  width: 27px;
  height: 27px;
  border: 1px solid #2d2924;
  color: var(--muted);
}

.composer-bar {
  gap: 5px;
  padding-top: 8px;
  border-top: 1px solid rgba(245, 240, 230, 0.06);
}

.composer-bar button {
  min-height: 28px;
  color: var(--muted);
  font-size: 11px;
}

.composer-bar button:hover {
  color: var(--ink);
  background: #1b1816;
}

.composer-bar-caption {
  color: var(--muted-light);
  font-size: 11.5px;
}

.composer-mini-submit {
  color: var(--ink-soft);
  font-size: 11px;
}

.feed-heading {
  align-items: flex-end;
  padding-top: 4px;
}

.feed-heading-copy h2 {
  color: var(--ink);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.035em;
}

.feed-heading-copy p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11.5px;
}

.clear-filter {
  color: var(--accent);
  font-size: 11.5px;
}

.sort-tabs {
  gap: 15px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.sort-tab {
  padding: 4px 0;
  color: var(--muted);
  font-size: 11.5px;
  border-bottom: 1px solid transparent;
}

.sort-tab.is-active {
  color: var(--ink);
  border-color: var(--ink);
}

.post-card {
  padding: 18px 19px 13px;
  border: 1px solid #27231f;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: none;
}

.post-card:hover {
  border-color: #3a342d;
  background: #171513;
  box-shadow: none;
  transform: none;
}

.post-head {
  gap: 9px;
}

.post-avatar-link .avatar {
  width: 38px;
  height: 38px;
}

.post-author-name {
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 500;
}

.author-chip {
  border-color: #312c26;
  color: var(--muted);
  background: transparent;
  font-size: 11px;
}

.post-meta-line {
  color: var(--muted-light);
  font-size: 11.5px;
}

.category-pill {
  padding: 3px 7px;
  border: 1px solid #322d27;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-size: 11.5px;
}

.category-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--category-color, var(--accent));
  vertical-align: 1px;
}

.post-head-right {
  align-self: flex-start;
}

.post-title {
  margin-top: 11px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.45;
}

.post-title a {
  color: var(--ink);
}

.post-excerpt {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.75;
}

.post-cover {
  margin-top: 12px;
  border-radius: 13px;
  background: #11100f;
}

.post-cover img {
  max-height: 410px;
  object-fit: cover;
}

.cover-corner {
  display: none;
}

.tag-row {
  gap: 5px;
  margin-top: 10px;
}

.tag {
  padding: 3px 7px;
  border: 1px solid #2b2722;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-size: 11.5px;
  letter-spacing: 0;
}

.tag:hover {
  color: var(--ink);
  border-color: #403a33;
}

.tag span {
  color: var(--muted-light);
  font-weight: 500;
}

.post-actions {
  margin-top: 11px;
  padding-top: 8px;
  border-top: 1px solid rgba(245, 240, 230, 0.055);
}

.post-action {
  color: var(--muted-light);
  font-size: 11px;
}

.post-action:hover {
  color: var(--ink-soft);
}

.post-action.is-liked {
  color: var(--accent);
}

.post-views {
  color: var(--muted-light);
  font-size: 11.5px;
}

.feed-end {
  color: var(--muted-light);
  font-size: 11px;
}

.feed-end-pi {
  color: var(--muted);
}

.home-grid .sidebar--left {
  padding-top: 0;
}

.mobile-feed-search {
  border-color: #2a2621;
  background: var(--surface);
}

.mobile-feed-search input {
  color: var(--ink);
  font-size: 13px;
}

.mobile-feed-search button {
  color: var(--ink);
  font-size: 11px;
}

.mobile-channels {
  gap: 6px;
}

.mobile-channel {
  border-color: #2b2722;
  color: var(--muted);
  background: transparent;
  font-size: 11px;
}

.mobile-channel.is-active {
  color: #0e0d0c;
  background: var(--ink);
  border-color: var(--ink);
}

/* ==========================================================================
   Discover / constellation
   ========================================================================== */

.discover-page {
  gap: 24px;
}

.star-atlas {
  overflow: hidden;
  border: 1px solid #292521;
  border-radius: 20px;
  background: #11100f;
}

.star-atlas-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  padding: 21px 24px 17px;
}

.star-atlas-head h1 {
  color: var(--ink);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.2;
}

.star-atlas-head p {
  max-width: 570px;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.star-atlas-stats {
  display: flex;
  flex: none;
  gap: 22px;
  padding-bottom: 3px;
}

.star-atlas-stats span {
  display: flex;
  flex-direction: column;
  gap: 1px;
  color: var(--muted-light);
  font-size: 11.5px;
}

.star-atlas-stats strong {
  color: var(--ink);
  font-size: 20px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.star-atlas-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 47px;
  padding: 7px 18px;
  border-top: 1px solid #24201c;
  border-bottom: 1px solid #24201c;
}

.star-filters {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.star-filters::-webkit-scrollbar {
  display: none;
}

.star-filter {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.star-filter span {
  color: var(--muted-light);
  font-size: 11px;
}

.star-filter:hover {
  color: var(--ink);
  background: #1c1917;
}

.star-filter.is-active {
  color: var(--ink);
  border-color: #3a342d;
  background: #1d1a17;
}

.star-filter.is-active span {
  color: var(--ink-soft);
}

.star-tools {
  display: flex;
  flex: none;
  align-items: center;
  gap: 2px;
}

.star-tool {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 4px 7px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 11px;
}

.star-tool:hover {
  color: var(--ink);
  background: #1d1a17;
}

.star-tool .icon {
  width: 14px;
  height: 14px;
}

.star-atlas-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  min-height: 560px;
}

.star-canvas-frame {
  position: relative;
  min-width: 0;
  height: 520px;
  overflow: hidden;
  background: #0b0a09;
}

#constellation-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}

#constellation-canvas:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.star-canvas-hint {
  position: absolute;
  bottom: 14px;
  left: 16px;
  color: #777169;
  font-size: 11.5px;
  pointer-events: none;
}

.star-zoom-controls {
  position: absolute;
  right: 14px;
  bottom: 12px;
  display: flex;
  gap: 1px;
  border: 1px solid #2b2722;
  border-radius: 7px;
  background: #12100e;
}

.star-zoom-controls button {
  width: 29px;
  height: 28px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
}

.star-zoom-controls button:hover {
  color: var(--ink);
  background: #1c1917;
}

.star-zoom-controls button:first-child {
  border-right: 1px solid #2b2722;
}

.star-directory {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  width: min(270px, calc(100% - 24px));
  max-height: calc(100% - 24px);
  overflow: auto;
  border: 1px solid #332e28;
  border-radius: 12px;
  background: #171513;
}

.star-directory-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.star-directory-head strong {
  font-size: 12px;
  font-weight: 500;
}

.star-directory-head span {
  color: var(--muted-light);
  font-size: 11.5px;
}

.star-directory-list {
  display: flex;
  flex-direction: column;
}

.star-directory-list button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 43px;
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(245, 240, 230, 0.055);
}

.star-directory-list button:hover {
  background: #211e1b;
}

.star-directory-list .avatar {
  width: 27px;
  height: 27px;
  font-size: 11px;
}

.star-directory-list span {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.star-directory-list strong {
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 11.5px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.star-directory-list small {
  overflow: hidden;
  color: var(--muted-light);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.star-directory-list em {
  color: var(--accent);
  font-size: 11px;
  font-style: normal;
}

.star-inspector {
  min-width: 0;
  padding: 22px 20px;
  border-left: 1px solid #24201c;
  background: #141210;
}

.star-inspector-guide h2 {
  margin-top: 6px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.star-inspector-kicker {
  color: var(--muted-light);
  font-size: 11.5px;
}

.star-inspector-guide > p:not(.star-inspector-kicker) {
  margin-top: 8px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.8;
}

.star-inspector-hint {
  color: var(--muted-light) !important;
  font-size: 11.5px !important;
}

.star-person-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.star-person-head .avatar {
  width: 52px;
  height: 52px;
  font-size: 18px;
}

.star-person-head h2 {
  margin-top: 1px;
  color: var(--ink);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.star-person-head p:last-child {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.5;
}

.star-person-bio {
  margin-top: 11px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.75;
}

.star-person-section {
  margin-top: 14px;
}

.star-person-label {
  color: var(--muted-light);
  font-size: 11.5px;
}

.star-person-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.star-person-tags span {
  padding: 3px 7px;
  border: 1px solid #322c26;
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 11.5px;
}

.star-person-tags--shared {
  margin-top: 7px;
}

.star-person-tags--shared span {
  border-color: rgba(76, 179, 240, 0.3);
  color: var(--accent);
}

.star-person-reason {
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}

.star-person-reason strong {
  color: var(--ink-soft);
  font-size: 11.5px;
  font-weight: 500;
}

.star-person-reason p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}

.star-person-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  color: var(--muted-light);
  font-size: 11.5px;
}

.star-person-stats strong {
  margin-right: 2px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.star-person-state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 11.5px;
}

.star-person-state .icon {
  width: 12px;
  height: 12px;
}

.star-person-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 15px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.star-person-actions .btn {
  flex: 1;
}

.star-atlas-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 24px;
  border-top: 1px solid #24201c;
  color: var(--muted-light);
  font-size: 11.5px;
}

.star-atlas-foot > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.legend-line {
  display: inline-block;
  width: 17px;
  height: 1px;
}

.legend-line--friend {
  background: rgba(245, 240, 230, 0.4);
}

.star-atlas-note {
  margin-left: auto;
  color: #777169;
}

.discover-section {
  padding-top: 6px;
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}

.section-heading h2 {
  color: var(--ink);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.section-heading p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11.5px;
}

.section-note {
  color: var(--muted-light);
  font-size: 11.5px;
}

.channel-directory {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

.channel-directory-item {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 64px;
  padding: 10px 9px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.channel-directory-item:nth-child(odd) {
  border-right: 1px solid var(--line);
}

.channel-directory-item:hover {
  background: #151311;
}

.channel-directory-index {
  width: 22px;
  flex: none;
  color: var(--muted-light);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
}

.channel-directory-main {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 1px;
}

.channel-directory-main strong {
  display: flex;
  align-items: center;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
}

.channel-directory-main small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-directory-count {
  flex: none;
  color: var(--muted-light);
  font-size: 11.5px;
}

.channel-directory-item > .icon {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--muted-light);
}

.channel-directory-item--action {
  color: var(--ink-soft);
}

.discover-lower {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  gap: 24px;
}

.discover-panel {
  min-width: 0;
  padding: 18px;
}

.topic-cloud {
  gap: 5px;
}

.topic-chip {
  border: 1px solid #2b2722;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-size: 11px;
}

.topic-chip:hover {
  color: var(--ink);
  border-color: #423c34;
}

.topic-chip small {
  color: var(--muted-light);
  font-size: 11px;
}

.topic-cloud-foot {
  color: var(--muted-light);
  font-size: 11.5px;
}

.topic-cloud-foot .text-button {
  color: var(--muted);
}

/* ==========================================================================
   Drift bottles
   ========================================================================== */

.drift-page {
  padding-top: 26px;
}

.drift-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 26px;
  margin-bottom: 24px;
}

.drift-head h1 {
  color: var(--ink);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.045em;
}

.drift-head p {
  max-width: 650px;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.8;
}

.drift-head-stats {
  display: flex;
  flex: none;
  gap: 20px;
  color: var(--muted-light);
  font-size: 11.5px;
}

.drift-head-stats strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.drift-layout {
  display: grid;
  grid-template-columns: minmax(340px, 0.82fr) minmax(0, 1.18fr);
  align-items: start;
  gap: 30px;
}

.bottle-composer {
  padding: 25px;
  border-radius: 20px;
  color: var(--paper-ink);
  background: var(--paper);
}

.bottle-composer-head {
  display: flex;
  gap: 13px;
  align-items: flex-start;
}

.bottle-composer-mark {
  display: flex;
  width: 31px;
  height: 31px;
  flex: none;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(25, 22, 18, 0.36);
  border-radius: 50%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  line-height: 1;
}

.bottle-composer-head h2 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.35;
}

.bottle-composer-head p {
  margin-top: 3px;
  color: rgba(25, 22, 18, 0.62);
  font-size: 11px;
  line-height: 1.7;
}

.bottle-form {
  margin-top: 18px;
}

.bottle-form textarea {
  width: 100%;
  min-height: 148px;
  padding: 12px 0;
  resize: vertical;
  border: 0;
  border-top: 1px solid rgba(25, 22, 18, 0.19);
  border-bottom: 1px solid rgba(25, 22, 18, 0.19);
  border-radius: 0;
  outline: 0;
  color: var(--paper-ink);
  background: transparent;
  font-family: "Iowan Old Style", "Songti SC", "STSong", serif;
  font-size: 17px;
  line-height: 1.9;
}

.bottle-form textarea::placeholder {
  color: rgba(25, 22, 18, 0.35);
}

.bottle-form textarea:focus {
  border-color: rgba(25, 22, 18, 0.56);
}

.bottle-form-meta,
.bottle-form-foot,
.bottle-reply-form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: rgba(25, 22, 18, 0.53);
  font-size: 11px;
}

.bottle-form-meta {
  padding-top: 7px;
}

.bottle-form-meta b {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.bottle-mood-field {
  padding: 0;
  margin: 18px 0 0;
  border: 0;
}

.bottle-mood-field legend {
  margin-bottom: 7px;
  color: rgba(25, 22, 18, 0.56);
  font-size: 11.5px;
}

.bottle-mood-options {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.bottle-mood-option {
  position: relative;
  cursor: pointer;
}

.bottle-mood-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.bottle-mood-option span {
  display: inline-flex;
  min-height: 27px;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid rgba(25, 22, 18, 0.22);
  border-radius: 999px;
  color: rgba(25, 22, 18, 0.66);
  font-size: 11.5px;
}

.bottle-mood-option input:checked + span {
  color: var(--paper);
  border-color: var(--paper-ink);
  background: var(--paper-ink);
}

.bottle-mood-option input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.bottle-form .form-error {
  margin-top: 13px;
  border-color: rgba(127, 33, 21, 0.3);
  color: #6b1d15;
  background: rgba(107, 29, 21, 0.08);
}

.bottle-form-foot {
  padding-top: 17px;
  margin-top: 17px;
  border-top: 1px solid rgba(25, 22, 18, 0.19);
}

.bottle-form-foot .btn {
  color: var(--paper);
  border-color: var(--paper-ink);
  background: var(--paper-ink);
}

.bottle-form-foot .btn:hover {
  background: #322d25;
  border-color: #322d25;
}

.bottle-stream {
  min-width: 0;
}

.bottle-stream > .side-heading {
  margin-bottom: 0;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--line);
}

.bottle-stream > .side-heading h2 {
  font-size: 18px;
}

.bottle-stream > .side-heading p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.bottle-stream > .side-heading > span {
  color: var(--muted-light);
  font-size: 11.5px;
}

.bottle-list {
  display: flex;
  flex-direction: column;
}

.bottle-row {
  display: block;
  padding: 18px 1px 17px;
  border-bottom: 1px solid var(--line);
}

.bottle-row:hover {
  padding-inline: 8px;
  margin-inline: -8px;
  background: #141210;
}

.bottle-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted-light);
  font-size: 11px;
}

.bottle-alias {
  color: var(--muted);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
}

.bottle-mood {
  padding: 2px 7px;
  border: 1px solid #34302a;
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
}

.bottle-row-head time {
  margin-left: auto;
}

.bottle-row-content {
  display: -webkit-box;
  margin-top: 7px;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.8;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.bottle-row-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 9px;
  color: var(--muted-light);
  font-size: 11.5px;
}

.bottle-open {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--muted);
}

.bottle-open .icon {
  width: 12px;
  height: 12px;
}

.bottle-load-more {
  margin-top: 16px;
}

.bottle-detail-page {
  padding-top: 22px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 11.5px;
}

.back-link:hover {
  color: var(--ink);
}

.back-link .icon {
  width: 14px;
  height: 14px;
}

.bottle-detail-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
  gap: 34px;
}

.bottle-letter {
  position: relative;
  padding: 27px 26px 20px;
  border-radius: 20px;
  color: var(--paper-ink);
  background: var(--paper);
}

.bottle-letter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: rgba(25, 22, 18, 0.5);
  font-size: 11px;
}

.bottle-letter-head > div {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bottle-letter-alias {
  color: rgba(25, 22, 18, 0.64);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
}

.bottle-letter .bottle-mood {
  border-color: rgba(25, 22, 18, 0.3);
  color: rgba(25, 22, 18, 0.65);
}

.bottle-letter-content {
  margin-top: 20px;
  color: var(--paper-ink);
  font-family: "Iowan Old Style", "Songti SC", "STSong", serif;
  font-size: 18px;
  line-height: 2;
  white-space: pre-wrap;
}

.bottle-letter-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  padding-top: 15px;
  margin-top: 20px;
  border-top: 1px solid rgba(25, 22, 18, 0.18);
  color: rgba(25, 22, 18, 0.48);
  font-size: 11px;
}

.bottle-letter-foot .icon {
  width: 12px;
  height: 12px;
  vertical-align: -2px;
}

.bottle-mine {
  margin-left: auto;
}

.bottle-replies {
  min-width: 0;
}

.bottle-replies-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line);
}

.bottle-replies-head h2 {
  color: var(--ink);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.bottle-replies-head p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.bottle-reply-count {
  color: var(--muted-light);
  font-size: 11.5px;
}

.bottle-reply-form {
  padding: 12px;
  margin-top: 13px;
  border: 1px solid #292521;
  border-radius: 12px;
  background: #141210;
}

.bottle-reply-form textarea {
  width: 100%;
  min-height: 74px;
  padding: 0;
  resize: vertical;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: 13px;
  line-height: 1.8;
}

.bottle-reply-form textarea::placeholder {
  color: var(--muted-light);
}

.bottle-reply-form .form-error {
  margin-top: 8px;
}

.bottle-reply-form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  color: var(--muted-light);
  font-size: 11px;
}

.bottle-reply-list {
  display: flex;
  flex-direction: column;
}

.bottle-reply {
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}

.bottle-reply header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted-light);
  font-size: 11px;
}

.bottle-reply p {
  margin-top: 5px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.8;
}

/* ==========================================================================
   Auth and other member pages
   ========================================================================== */

.auth-page {
  color: var(--ink);
  background: var(--bg);
}

.auth-noise {
  display: none;
}

.auth-story {
  background: #12100f;
}

.auth-panel {
  background: #0e0d0c;
}

.auth-panel-inner {
  background: transparent;
}

.auth-floating,
.auth-collage,
.auth-note-card,
.auth-photo-card,
.auth-sticker,
.auth-people-card {
  display: none !important;
}

.auth-copy h1 {
  color: var(--ink);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 1.18;
}

.auth-copy h1 em {
  color: var(--muted);
  font-style: normal;
}

.auth-copy p {
  color: var(--muted);
  font-size: 13px;
}

.auth-tags span {
  border-color: #36312b;
  color: var(--muted);
  background: transparent;
  font-size: 11px;
}

.auth-beta,
.auth-story-foot,
.auth-demo-hint,
.auth-admin-hint,
.auth-ai-hint {
  color: var(--muted);
  font-size: 11.5px;
}

.auth-admin-hint,
.auth-ai-hint {
  border-color: #2c2723;
  background: transparent;
}

.auth-admin-hint code,
.auth-ai-hint code,
.auth-demo-hint code {
  color: var(--ink-soft);
  font-size: 11.5px;
}

.auth-tabs {
  border-color: #2b2722;
  background: #151412;
}

.auth-tab {
  color: var(--muted);
  font-size: 12px;
}

.auth-tab.is-active {
  color: var(--ink);
  background: #201d1a;
}

.auth-heading h2 {
  color: var(--ink);
  font-size: 23px;
  font-weight: 600;
}

.auth-heading p {
  color: var(--muted);
  font-size: 12px;
}

.auth-submit {
  min-height: 43px;
}

.auth-panel .form-field label {
  color: var(--ink-soft);
}

/* Existing member pages are re-skinned through the shared surfaces above.
   The following selectors catch the older hard-coded light panels. */

.friends-page .section-block,
.friends-hero,
.profile-hero,
.post-detail-hero,
.comment-card,
.profile-card,
.profile-side-card,
.profile-stats-card,
.friend-card,
.side-card,
.topic-cloud-card,
.active-people-card,
.modal-card,
.composer-form,
.post-detail-card {
  border-color: #292521 !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}

.friends-hero,
.profile-hero,
.post-detail-hero {
  background: #12100f !important;
}

.friend-card {
  border-radius: var(--radius-lg);
}

.friend-card-glow,
.profile-cover-glow,
.post-cover-glow {
  display: none !important;
}

.friend-card:hover,
.profile-card:hover,
.post-detail-card:hover {
  box-shadow: none !important;
}

.post-detail-page,
.profile-page,
.friends-page {
  color: var(--ink);
}

.post-detail-title,
.profile-name,
.friends-hero h1,
.friends-section-heading h2 {
  color: var(--ink);
}

.post-detail-excerpt,
.post-detail-body,
.profile-bio,
.friends-hero p {
  color: var(--ink-soft);
}

.comment-form textarea,
.post-detail-comment-form textarea {
  color: var(--ink);
  background: #141210;
  border-color: #2b2722;
}

.notification-empty {
  color: var(--muted);
}

.modal-overlay {
  background: rgba(5, 4, 4, 0.78);
  backdrop-filter: none;
}

.modal-card {
  background: var(--surface);
  border: 1px solid #302b26;
}

.composer-modal .modal-card {
  background: var(--surface);
}

.composer-form input,
.composer-form textarea,
.composer-form select {
  color: var(--ink);
  background: #141210;
  border-color: #2c2823;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1180px) {
  .home-grid {
    grid-template-columns: 184px minmax(0, 1fr) 248px;
    gap: 18px;
  }

  .star-atlas-body {
    grid-template-columns: minmax(0, 1fr) 280px;
  }

  .drift-layout,
  .bottle-detail-layout {
    gap: 22px;
  }
}

@media (max-width: 1020px) {
  .top-search {
    max-width: 220px;
  }

  .nav-link {
    font-size: 12px;
  }

  .home-masthead {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-masthead-copy {
    padding: 27px 28px;
  }

  .star-window {
    min-height: 300px;
    border-top: 1px solid #2b2723;
    border-left: 0;
  }

  .home-grid {
    grid-template-columns: minmax(0, 1fr) 260px;
    grid-template-areas:
      "feed right"
      "left right";
  }

  .sidebar--left {
    grid-area: left;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }

  .sidebar--left .side-identity {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .sidebar--right {
    grid-area: right;
  }

  .star-atlas-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .star-canvas-frame {
    height: 520px;
  }

  .star-inspector {
    border-top: 1px solid #24201c;
    border-left: 0;
  }

  .star-person {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr);
    column-gap: 28px;
  }

  .star-person-head,
  .star-person-bio,
  .star-person-section {
    grid-column: 1;
  }

  .star-person-reason,
  .star-person-stats,
  .star-person-actions {
    grid-column: 2;
  }

  .star-person-reason {
    grid-row: 1 / span 3;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .star-person-stats {
    margin-top: 12px;
  }

  .star-person-actions {
    margin-top: 10px;
  }

  .drift-layout,
  .bottle-detail-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .bottle-composer {
    max-width: 620px;
  }
}

@media (max-width: 820px) {
  .container {
    width: calc(100% - 32px);
  }

  .top-search {
    display: none;
  }

  .main-nav {
    gap: 14px;
  }

  .nav-link {
    font-size: 11.5px;
  }

  .nav-link .icon {
    display: none;
  }

  .home-grid {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .home-grid .feed-column {
    order: 1;
    width: 100%;
  }

  .sidebar--right {
    order: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    width: 100%;
  }

  .sidebar--left {
    order: 3;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-top: 8px;
    border-top: 1px solid var(--line);
  }

  .sidebar--left .side-identity {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
  }

  .sidebar--left .channel-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
  }

  .sidebar--left .channel-link {
    padding: 5px 9px;
    border: 1px solid #2b2722;
    border-radius: 999px;
  }

  .sidebar--left .channel-dot {
    display: none;
  }

  .sidebar--left .channel-count {
    margin-left: 3px;
  }

  .drift-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 11px;
  }

  .star-atlas-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 11px;
  }

  .star-atlas-stats {
    gap: 19px;
  }

  .star-atlas-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
    padding: 8px 13px;
  }

  .star-filters {
    width: 100%;
    padding-bottom: 1px;
  }

  .star-tools {
    align-self: flex-end;
  }

  .star-canvas-frame {
    height: 460px;
  }

  .star-atlas-foot {
    flex-wrap: wrap;
    gap: 9px 14px;
    padding-inline: 14px;
  }

  .star-atlas-note {
    width: 100%;
    margin-left: 0;
  }

  .star-person {
    display: block;
  }

  .star-person-reason {
    padding-top: 13px;
    margin-top: 15px;
    border-top: 1px solid var(--line);
  }

  .channel-directory {
    grid-template-columns: minmax(0, 1fr);
  }

  .channel-directory-item:nth-child(odd) {
    border-right: 0;
  }

  .channel-directory-item {
    min-height: 58px;
    padding-inline: 1px;
  }

  .discover-lower {
    grid-template-columns: minmax(0, 1fr);
  }

  .drift-layout {
    gap: 26px;
  }

  .bottle-detail-layout {
    gap: 26px;
  }

  .bottle-letter-content {
    font-size: 17px;
  }
}

@media (max-width: 600px) {
  body {
    font-size: 14px;
  }

  .container {
    width: calc(100% - 28px);
  }

  .topbar {
    height: 56px;
  }

  .topbar-inner {
    height: 56px;
    gap: 9px;
  }

  .brand-text small {
    display: none;
  }

  .brand-text strong {
    font-size: 15px;
  }

  .brand-mark {
    width: 31px;
    height: 31px;
  }

  .main-nav {
    display: none;
  }

  .btn--compose span {
    display: none;
  }

  .btn--compose {
    width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
  }

  .btn--compose .btn-icon {
    width: 16px;
    height: 16px;
  }

  .user-chip-name,
  .user-chip-chevron {
    display: none;
  }

  .user-chip {
    padding: 2px;
  }

  .home-page {
    padding-top: 12px;
  }

  .home-masthead {
    min-height: 0;
    border-radius: 16px;
  }

  .home-masthead-copy {
    padding: 22px 20px 19px;
  }

  .home-masthead h1 {
    font-size: 25px;
  }

  .home-masthead-description {
    font-size: 12.5px;
  }

  .home-masthead-actions {
    gap: 13px;
    margin-top: 18px;
  }

  .home-masthead-meta {
    gap: 13px;
    margin-top: 18px;
    padding-top: 12px;
  }

  .home-masthead-meta strong {
    font-size: 16px;
  }

  .star-window {
    min-height: 270px;
  }

  .star-window-head,
  .star-window-foot {
    padding: 9px 13px;
    font-size: 11.5px;
  }

  .star-window-canvas {
    min-height: 220px;
  }

  .star-window-anchor {
    font-size: 11px;
  }

  .star-window-foot span:first-child {
    display: none;
  }

  .star-window-foot {
    justify-content: flex-end;
  }

  .sidebar--right {
    display: flex;
    flex-direction: column;
  }

  .feed-column {
    gap: 14px;
  }

  .composer-card {
    padding: 10px 11px 8px;
  }

  .composer-bar-caption {
    display: none;
  }

  .composer-mini-submit {
    margin-left: auto;
  }

  .feed-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .feed-heading-copy h2 {
    font-size: 20px;
  }

  .post-card {
    padding: 15px 14px 11px;
    border-radius: 16px;
  }

  .post-title {
    font-size: 17px;
  }

  .post-excerpt {
    font-size: 12px;
  }

  .post-meta-line {
    font-size: 11px;
  }

  .post-avatar-link .avatar {
    width: 36px;
    height: 36px;
  }

  .post-action {
    font-size: 11.5px;
  }

  .star-atlas {
    border-radius: 16px;
  }

  .star-atlas-head {
    padding: 16px 14px 12px;
  }

  .star-atlas-head h1 {
    font-size: 22px;
  }

  .star-atlas-head p {
    font-size: 11px;
  }

  .star-atlas-stats {
    gap: 16px;
  }

  .star-atlas-stats strong {
    font-size: 17px;
  }

  .star-atlas-toolbar {
    padding: 7px 10px;
  }

  .star-filter {
    min-height: 27px;
    padding-inline: 7px;
    font-size: 11.5px;
  }

  .star-canvas-frame {
    height: 380px;
  }

  .star-canvas-hint {
    bottom: 11px;
    left: 11px;
    font-size: 11px;
  }

  .star-zoom-controls {
    right: 10px;
    bottom: 9px;
  }

  .star-inspector {
    padding: 17px 14px;
  }

  .star-person-head .avatar {
    width: 46px;
    height: 46px;
  }

  .star-person-head h2 {
    font-size: 18px;
  }

  .star-person-actions .btn {
    flex: initial;
  }

  .star-atlas-foot {
    font-size: 11px;
  }

  .star-atlas-note {
    font-size: 11px;
  }

  .discover-page {
    gap: 20px;
  }

  .section-heading {
    align-items: flex-start;
  }

  .section-heading h2 {
    font-size: 18px;
  }

  .channel-directory-main strong {
    font-size: 12px;
  }

  .channel-directory-main small {
    font-size: 11px;
  }

  .discover-panel {
    padding: 14px;
  }

  .drift-page {
    padding-top: 18px;
  }

  .drift-head h1 {
    font-size: 25px;
  }

  .drift-head p {
    font-size: 11.5px;
  }

  .drift-head-stats {
    font-size: 11px;
  }

  .drift-head-stats strong {
    font-size: 16px;
  }

  .bottle-composer {
    padding: 19px 17px;
    border-radius: 16px;
  }

  .bottle-composer-head h2 {
    font-size: 18px;
  }

  .bottle-form textarea {
    min-height: 130px;
    font-size: 16px;
  }

  .bottle-form-meta,
  .bottle-form-foot {
    font-size: 11px;
  }

  .bottle-form-foot {
    align-items: flex-start;
    flex-direction: column;
  }

  .bottle-form-foot .btn {
    width: 100%;
  }

  .bottle-row {
    padding: 15px 0;
  }

  .bottle-row-content {
    font-size: 13px;
    -webkit-line-clamp: 4;
  }

  .bottle-detail-page {
    padding-top: 16px;
  }

  .bottle-letter {
    padding: 21px 18px 17px;
    border-radius: 16px;
  }

  .bottle-letter-content {
    margin-top: 15px;
    font-size: 16px;
    line-height: 1.9;
  }

  .bottle-reply-form {
    padding: 10px;
  }

  .bottle-reply-form-foot {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .bottle-reply-form-foot .btn {
    width: 100%;
  }

  .site-footer {
    padding-bottom: 64px;
  }

  .footer-inner {
    flex-direction: column;
    gap: 15px;
  }
}

@media (max-width: 400px) {
  .home-masthead h1 {
    font-size: 23px;
  }

  .home-masthead-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .star-window-head span:last-child {
    display: none;
  }
}

/* Flat, opaque avatars: the people are the colour, not the chrome. */
.avatar {
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fffaf0;
  background-color: var(--av-a) !important;
  box-shadow: none;
}

.avatar::before,
.avatar::after {
  display: none;
}

.avatar--v0 { --av-a: #b65443; --av-b: #b65443; }
.avatar--v1 { --av-a: #9b722d; --av-b: #9b722d; }
.avatar--v2 { --av-a: #217963; --av-b: #217963; }
.avatar--v3 { --av-a: #9d5a2d; --av-b: #9d5a2d; }
.avatar--v4 { --av-a: #35689c; --av-b: #35689c; }
.avatar--v5 { --av-a: #6552a3; --av-b: #6552a3; }
.avatar--v6 { --av-a: #a44a43; --av-b: #a44a43; }
.avatar--v7 { --av-a: #20705e; --av-b: #20705e; }
.avatar--v8 { --av-a: #8e4d73; --av-b: #8e4d73; }
.avatar--v9 { --av-a: #5f5a55; --av-b: #5f5a55; }


/* Legibility pass: no member-facing text below 11px. */
.footer-meta,
.footer-device,
.footer-device-switch,
.footer-main p,
.popover-device-state {
  font-size: 11.5px;
}

.person-name {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 500;
}

.person-sub,
.person-reason,
.popover-foot,
.popover-count {
  color: var(--muted-light);
  font-size: 11.5px;
  line-height: 1.5;
}

.person-meta {
  gap: 1px;
}

.person-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mini-add-button,
.mini-status {
  width: 24px;
  height: 24px;
  color: var(--muted);
  border: 1px solid #302b26;
  border-radius: 50%;
  background: transparent;
  font-size: 11px;
}

.mini-status {
  display: inline-flex;
  width: auto;
  height: 22px;
  align-items: center;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
}

.section-note,
.section-heading > .section-note {
  color: var(--muted);
  font-size: 11.5px;
}

.star-atlas-note {
  color: var(--muted) !important;
  font-size: 11.5px !important;
}

.star-atlas-foot {
  font-size: 11.5px;
}

.star-filter span {
  font-size: 11px;
}

.post-action,
.post-meta-line,
.post-views,
.composer-bar-caption,
.tag,
.category-pill {
  font-size: 11.5px;
}

.post-excerpt {
  font-size: 13.5px;
}

@media (max-width: 600px) {
  .home-masthead h1 {
    font-size: 24px;
  }

  .star-window-anchor {
    font-size: 11px;
  }

  .star-window-head,
  .star-window-foot {
    font-size: 11px;
  }

  .star-window-me {
    font-size: 11px;
  }

  .post-meta-line,
  .post-action,
  .category-pill,
  .tag {
    font-size: 11.5px;
  }
}

/* ==========================================================================
   Friends, profile and post detail
   ========================================================================== */

.friends-page,
.profile-page,
.post-detail-page {
  gap: 18px;
}

.friends-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 5px 2px 11px;
  border-bottom: 1px solid var(--line);
}

.friends-head h1 {
  color: var(--ink);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.2;
}

.friends-head p {
  max-width: 620px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12.5px;
}

.friends-head-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 14px;
}

.friends-head-actions .home-text-link {
  color: var(--muted);
}

.friends-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.friends-summary-item {
  gap: 1px;
  padding: 13px 15px;
}

.friends-summary-item + .friends-summary-item {
  border-left: 1px solid var(--line);
}

.friends-summary-item > span {
  color: var(--muted);
  font-size: 11.5px;
}

.friends-summary-item strong,
.friends-summary-item--coral strong,
.friends-summary-item--sky strong,
.friends-summary-item--mint strong {
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

.friends-summary-item small {
  color: var(--muted-light);
  font-size: 11.5px;
}

.friends-toolbar {
  align-items: center;
  padding: 0;
  border: 0;
}

.friend-tabs {
  gap: 20px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.friend-tab {
  padding: 7px 0;
  border-radius: 0;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
  border-bottom: 1px solid transparent;
}

.friend-tab span {
  min-width: 15px;
  height: 15px;
  color: var(--muted-light);
  background: #201d1a;
  font-size: 11px;
}

.friend-tab:hover {
  color: var(--ink);
  background: transparent;
}

.friend-tab.is-active {
  color: var(--ink);
  background: transparent;
  border-bottom-color: var(--ink);
  box-shadow: none;
}

.friend-tab.is-active span {
  color: var(--ink);
  background: #28241f;
}

.friends-toolbar-note {
  color: var(--muted-light);
  font-size: 11.5px;
}

.friends-toolbar-note .icon {
  color: var(--muted-light);
}

.tab-heading {
  padding: 8px 2px 0;
}

.tab-heading h2 {
  color: var(--ink);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.tab-heading p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11.5px;
}

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

.friend-card {
  min-height: 222px;
  padding: 17px;
  border: 1px solid #292521;
  border-radius: 18px;
  background: #151412;
}

.friend-card:hover {
  border-color: #3b352e;
  background: #171513;
  box-shadow: none;
  transform: none;
}

.friend-card-glow {
  display: none;
}

.friend-card-title p {
  color: var(--muted);
  font-size: 11.5px;
}

.friend-name-row h3 {
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}

.friend-relation {
  border-color: #34302a;
  color: var(--muted);
  background: transparent;
  font-size: 11px;
}

.friend-card-bio {
  min-height: 36px;
  margin-top: 13px;
  color: var(--ink-soft);
  font-size: 12.5px;
}

.friend-card-meta {
  gap: 4px;
  margin-top: 10px;
}

.friend-card-meta span {
  color: var(--muted-light);
  background: transparent;
  font-size: 11px;
}

.friend-card-actions {
  padding-top: 13px;
}

.friend-card-actions .btn {
  font-size: 11.5px;
}

.friend-waiting {
  color: var(--muted-light);
  font-size: 11.5px;
}

.profile-head {
  overflow: hidden;
  padding: 24px;
  border: 1px solid #292521;
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.profile-head-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 22px;
}

.profile-avatar-large {
  margin-top: 0;
}

.profile-avatar-large .avatar {
  width: 92px;
  height: 92px;
  border: 1px solid #3b352e;
  box-shadow: none;
  font-size: 32px;
}

.profile-head-copy {
  min-width: 0;
}

.profile-name-line {
  gap: 7px;
}

.profile-name-line h1 {
  color: var(--ink);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.2;
}

.profile-badge {
  border-color: #37312a;
  color: var(--muted);
  background: transparent;
  font-size: 11px;
}

.profile-handle {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11.5px;
}

.profile-bio {
  max-width: 680px;
  margin-top: 9px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.8;
}

.profile-interests {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 9px;
}

.profile-interests span {
  padding: 3px 7px;
  border: 1px solid #332d27;
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
}

.profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 15px;
}

.profile-relation {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 11.5px;
}

.profile-head-stats {
  display: flex;
  gap: 17px;
  padding-top: 3px;
}

.profile-head-stats div {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}

.profile-head-stats strong {
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 23px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.profile-head-stats span {
  color: var(--muted-light);
  font-size: 11px;
}

.profile-layout {
  grid-template-columns: minmax(0, 1fr) 294px;
  gap: 18px;
}

.profile-posts .feed-heading {
  padding: 2px 0 10px;
}

.profile-aside {
  gap: 13px;
}

.profile-card {
  padding: 17px;
}

.profile-card .side-card-title h2 {
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}

.profile-facts {
  margin-top: 11px;
}

.profile-facts div {
  padding: 8px 0;
  border-top: 1px solid rgba(245, 240, 230, 0.06);
}

.profile-facts dt {
  color: var(--muted-light);
  font-size: 11px;
}

.profile-facts dd {
  color: var(--ink-soft);
  font-size: 12px;
}

.profile-card-quote {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid #2a2621;
  border-radius: 10px;
  background: #121110;
}

.profile-card-quote span {
  color: var(--muted-light);
}

.profile-card-quote p {
  color: var(--muted);
  font-size: 11.5px;
}

.profile-friend-link {
  color: var(--muted);
  font-size: 11.5px;
}

.profile-note {
  padding: 0 13px;
  color: var(--muted-light);
  font-size: 11px;
}

.profile-card-pi {
  display: none;
}

.profile-posts .post-card--compact {
  padding: 15px 16px;
}

.detail-title {
  margin: 18px 0 9px;
  color: var(--ink);
  font-size: clamp(24px, 2.7vw, 30px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.4;
}

.detail-body {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.95;
}

.detail-body a {
  color: var(--accent);
}

.detail-tags {
  margin-top: 0;
}

.detail-tags .tag {
  color: var(--muted);
  border-color: #2f2a25;
  background: transparent;
}

.detail-content {
  margin-top: 17px;
}

.detail-image-wrap {
  border-radius: 14px;
  background: #11100f;
}

.detail-footer {
  border-color: var(--line);
}

.detail-actions {
  gap: 18px;
}

.detail-breadcrumb {
  color: var(--muted-light);
  font-size: 11.5px;
}

.detail-breadcrumb a {
  color: var(--muted);
}

.detail-breadcrumb a:hover {
  color: var(--ink);
}

.detail-relation {
  color: var(--muted);
  font-size: 11.5px;
}

.author-side-card {
  border-color: #292521;
  background: var(--surface);
}

.author-side-cover {
  display: none !important;
}

.author-side-body {
  padding: 18px !important;
}

.author-side-avatar {
  position: static !important;
  margin: 0 0 9px !important;
  border: 1px solid #3b352e !important;
}

.author-side-title {
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
}

.author-side-name > span {
  border-color: #35302a;
  color: var(--muted);
  background: transparent;
  font-size: 11px;
}

.author-side-body > p {
  color: var(--muted);
  font-size: 11.5px;
}

.author-side-bio {
  margin-top: 7px;
  color: var(--ink-soft) !important;
  font-size: 12px !important;
}

.author-side-stats {
  border-color: var(--line);
}

.author-side-stats strong {
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.author-side-stats span {
  color: var(--muted-light);
  font-size: 11px;
}

.author-side-actions {
  gap: 5px;
}

.author-side-actions .btn {
  flex: 1;
}

.detail-side-card {
  padding: 17px;
}

.detail-side-card h2 {
  color: var(--ink);
  font-size: 16px;
}

.channel-side-desc {
  color: var(--muted);
  font-size: 11.5px;
}

.detail-side-tags a,
.detail-side-tags span {
  border-color: #302b25;
  color: var(--muted);
  background: transparent;
  font-size: 11px;
}

.community-guideline-card {
  display: flex;
  gap: 10px;
  padding: 13px;
  border: 1px solid #292521;
  border-radius: 12px;
  background: #121110;
}

.guideline-mark {
  display: flex;
  width: 25px;
  height: 25px;
  flex: none;
  align-items: center;
  justify-content: center;
  border: 1px solid #37312a;
  border-radius: 50%;
  color: var(--muted);
  font-family: Georgia, serif;
  font-size: 16px;
}

.community-guideline-card strong {
  color: var(--ink-soft);
  font-size: 11.5px;
  font-weight: 500;
}

.community-guideline-card p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}

.comments-card {
  padding: 18px;
}

.comments-header {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.comments-header h2 {
  color: var(--ink);
  font-size: 19px;
  font-weight: 600;
}

.comments-header h2 span {
  color: var(--muted-light);
  font-size: 13px;
}

.comments-header-note {
  color: var(--muted-light);
  font-size: 11px;
}

.comment-form {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.comment-form textarea {
  min-height: 74px;
  padding: 10px;
  color: var(--ink);
  border: 1px solid #2c2823;
  border-radius: 9px;
  background: #11100f;
  font-size: 13px;
}

.comment-form textarea:focus {
  border-color: #494239;
}

.comment-form-foot {
  color: var(--muted-light);
  font-size: 11px;
}

.comment-item {
  padding: 14px 0;
  border-bottom: 1px solid rgba(245, 240, 230, 0.06);
}

.comment-meta {
  color: var(--muted-light);
  font-size: 11px;
}

.comment-author {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 500;
}

.comment-body {
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.8;
}

.comment-like {
  color: var(--muted-light);
  font-size: 11px;
}

.comment-like.is-liked {
  color: var(--accent);
}

.comment-op {
  color: var(--accent);
  background: transparent;
  border: 1px solid rgba(76, 179, 240, 0.25);
  font-size: 11px;
}

.comment-empty p {
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 1000px) {
  .friend-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-head-main {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .profile-head-stats {
    grid-column: 1 / -1;
    gap: 22px;
    padding-top: 3px;
  }

  .profile-head-stats div {
    align-items: flex-start;
  }
}

@media (max-width: 760px) {
  .friends-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .friends-head h1 {
    font-size: 25px;
  }

  .friends-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .friends-summary-item:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .friends-summary-item:nth-child(4) {
    border-top: 1px solid var(--line);
  }

  .friends-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .friend-tabs {
    gap: 14px;
    overflow-x: auto;
    width: 100%;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .friend-tabs::-webkit-scrollbar {
    display: none;
  }

  .friend-tab {
    flex: none;
  }

  .friends-toolbar-note {
    display: none;
  }

  .tab-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .friend-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .friend-card {
    min-height: 0;
  }

  .profile-head {
    padding: 18px;
  }

  .profile-head-main {
    grid-template-columns: minmax(0, 1fr);
    gap: 13px;
  }

  .profile-avatar-large .avatar {
    width: 76px;
    height: 76px;
    font-size: 27px;
  }

  .profile-name-line h1 {
    font-size: 25px;
  }

  .profile-head-stats {
    gap: 18px;
  }

  .profile-layout,
  .detail-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-aside {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .profile-note {
    display: none;
  }

  .detail-title {
    font-size: 24px;
  }

  .detail-body {
    font-size: 14.5px;
  }

  .detail-aside {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .author-side-card,
  .detail-side-card {
    min-height: 100%;
  }

  .community-guideline-card {
    grid-column: 1 / -1;
  }

  .comments-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .comments-header-note {
    display: none;
  }
}

@media (max-width: 520px) {
  .friends-head-actions {
    width: 100%;
    justify-content: space-between;
  }

  .profile-aside,
  .detail-aside {
    display: flex;
    flex-direction: column;
  }

  .profile-head-stats strong {
    font-size: 20px;
  }

  .detail-breadcrumb {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

body {
  font-variant-numeric: tabular-nums;
}

.btn--primary,
.btn--compose,
.btn--sun {
  border-color: transparent;
}

.btn--primary:hover,
.btn--compose:hover,
.btn--sun:hover {
  border-color: transparent;
}

.friend-tab.is-active {
  color: var(--ink);
  background: transparent;
}

.friends-summary-item > span,
.friends-summary-item small,
.tab-heading p,
.friend-card-title p,
.friend-card-bio,
.friend-card-meta span,
.profile-handle,
.profile-bio,
.detail-breadcrumb,
.comments-header-note,
.comment-form-foot,
.comment-meta,
.comment-like,
.channel-side-desc,
.community-guideline-card p {
  font-size: 11.5px;
}

.friend-card-actions .btn,
.profile-relation,
.author-side-body > p,
.detail-side-tags a,
.detail-side-tags span,
.profile-interests span,
.profile-head-stats span,
.profile-facts dt {
  font-size: 11.5px;
}

.profile-facts dd,
.author-side-bio {
  font-size: 12.5px !important;
}

.comment-body,
.comment-form textarea,
.bottle-reply p {
  font-size: 13.5px;
}

.friends-head p,
.post-detail .detail-body,
.bottle-stream > .side-heading p {
  font-size: 13px;
}

.post-detail-card .post-meta-line {
  font-size: 11.5px;
}

.post-detail-card .post-author-name {
  font-size: 13px;
}

.comment-item {
  gap: 8px;
}

.comment-main {
  min-width: 0;
  flex: 1;
}

.comment-actions {
  margin-top: 4px;
}

/* Plain glyphs only: remove the last tinted icon circles. */
.composer-arrow {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
}

.request-icon {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.mini-add-button {
  width: auto;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
}

.mini-add-button:hover {
  color: var(--ink);
}

.mini-status {
  border-color: #34302a;
  border-radius: 999px;
  font-size: 11px;
}

.post-excerpt {
  font-size: 14px;
}

.home-masthead-description,
.drift-head p,
.friends-head p {
  font-size: 13.5px;
}

/* Final legibility and semantic colour corrections. */
.profile-breadcrumb,
.profile-breadcrumb a,
.profile-note,
.profile-note p,
.profile-note strong {
  color: var(--muted);
  font-size: 11.5px;
}

.profile-note {
  padding: 2px 4px;
  background: transparent !important;
  border: 0 !important;
}

.profile-badge {
  font-size: 11px;
}

.friend-card-title p {
  font-size: 12px;
}

.friend-card-bio {
  font-size: 13px;
}

.friend-card-meta span {
  font-size: 12px;
}

.friend-card-actions .btn {
  font-size: 12px;
}

.friends-summary-item > span,
.friends-summary-item small {
  font-size: 12px;
}

.tab-heading p,
.friends-toolbar-note {
  font-size: 12px;
}

.btn--plain-danger {
  color: var(--muted) !important;
}

.btn--plain-danger:hover {
  color: #e5484d !important;
}

@media (max-width: 760px) {
  .profile-name-line h1 {
    font-size: 24px;
  }
}



/* Auth: keep the typographic welcome, remove the floating greeting cards. */
.auth-copy h1 {
  color: var(--ink);
  font-size: clamp(38px, 4.5vw, 58px);
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 1.12;
}

.auth-copy h1 em {
  color: var(--muted);
  -webkit-text-fill-color: currentColor;
  background: none;
}

.auth-copy > p {
  color: var(--muted);
  font-size: 13px;
}

.auth-copy .eyebrow,
.auth-heading .eyebrow,
.auth-beta {
  display: none !important;
}

.auth-story::before,
.auth-story::after,
.auth-panel::before {
  display: none;
}

.auth-story .brand-text strong {
  color: var(--ink);
}

.auth-story .brand-text small {
  color: var(--muted);
}

.auth-story-foot {
  color: var(--muted-light);
  font-size: 11.5px;
}

.auth-heading h2 {
  font-size: 27px;
  font-weight: 600;
}

.auth-heading p {
  color: var(--muted);
  font-size: 12px;
}

.auth-form .form-field > label {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 500;
}

.auth-submit {
  border-radius: 999px;
  font-size: 13px;
}

.auth-demo-hint,
.auth-admin-hint,
.auth-ai-hint {
  font-size: 11.5px;
}

.auth-demo-hint code,
.auth-admin-hint code,
.auth-ai-hint code {
  font-size: 11px;
}

.auth-tabs {
  border-color: #2c2823;
  background: #131210;
}

.auth-tab {
  font-size: 12.5px;
}

.auth-tab.is-active {
  color: var(--ink);
  background: #201d1a;
  box-shadow: none;
}

.auth-mobile-brand {
  margin-bottom: 18px;
}

@media (max-width: 980px) {
  .auth-page {
    grid-template-columns: minmax(0, 1fr);
  }

  .auth-story {
    display: none;
  }

  .auth-panel {
    min-height: 100vh;
    padding: 28px 22px;
  }

  .auth-mobile-brand {
    display: block;
  }
}

@media (max-width: 520px) {
  .auth-panel {
    padding: 22px 16px;
  }

  .auth-heading h2 {
    font-size: 24px;
  }

  .auth-heading {
    margin-top: 22px;
  }

  .auth-copy h1 {
    font-size: 36px;
  }
}

/* Auth remaining light surfaces and microcopy. */
.demo-entry {
  border: 1px solid #2d2823;
  background: #171513;
  color: var(--ink-soft);
}

.demo-entry:hover {
  border-color: #464039;
  background: #1b1815;
}

.demo-entry-icon {
  color: var(--ink);
  border: 1px solid #39332c;
  background: #201d1a;
}

.demo-entry-copy strong {
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 500;
}

.demo-entry-copy small {
  color: var(--muted);
  font-size: 11.5px;
}

.demo-entry-arrow {
  color: var(--muted-light);
}

.auth-divider,
.auth-terms,
.auth-device-detected,
.auth-device-switch,
.auth-device-mode {
  color: var(--muted-light);
  font-size: 11.5px;
}

.auth-device-mode {
  border-color: #2c2823;
  background: #151412;
}

.auth-device-mode .icon,
.auth-device-switch {
  color: var(--muted);
}

.auth-terms {
  line-height: 1.7;
}

.auth-device-bar {
  border-top-color: var(--line);
}

/* Detail page microcopy: hard override old 8-10px component rules. */
.detail-actions .post-action,
.detail-actions .post-action span,
.detail-actions .action-label,
.comment-form-foot,
.comment-form-foot span,
.comment-form-foot button,
.author-side-actions .btn,
.author-side-actions .btn span,
.author-side-actions .detail-relation {
  font-size: 11.5px !important;
}

.comment-form-foot {
  gap: 8px;
}

.discover-lower > * {
  align-self: start;
}

/* ==========================================================================
   Home section finder and restored home artwork
   ========================================================================== */

.home-section-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  padding: 0 2px 9px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}

.home-section-bar::-webkit-scrollbar {
  display: none;
}

.home-section-link {
  display: inline-flex;
  min-height: 31px;
  flex: none;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-bottom: 1px solid transparent;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.home-section-link:hover {
  color: var(--ink);
}

.home-section-link.is-active {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.home-section-icon {
  width: 15px;
  height: 15px;
  stroke-width: 1.6;
  color: currentColor;
}

.home-section-link small {
  color: var(--muted-light);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.home-masthead-art {
  position: relative;
  min-height: 350px;
  overflow: hidden;
  border-left: 1px solid #2b2723;
  background: #101010;
}

.home-art-ring {
  position: absolute;
  top: 24px;
  right: 74px;
  width: 250px;
  height: 250px;
  border: 1px solid rgba(244, 244, 244, 0.08);
  border-radius: 50%;
}

.home-art-photo {
  position: absolute;
  top: 37px;
  right: 28px;
  width: min(58%, 310px);
  padding: 6px;
  border: 1px solid #38332c;
  border-radius: 6px;
  background: #0b0a09;
  transform: rotate(-2.5deg);
}

.home-art-photo img {
  width: 100%;
  height: 158px;
  border-radius: 3px;
  object-fit: cover;
}

.home-art-photo-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 3px 2px;
}

.home-art-photo-caption span {
  color: var(--muted-light);
  font-size: 11px;
}

.home-art-photo-caption strong {
  color: var(--ink-soft);
  font-size: 11.5px;
  font-weight: 500;
}

.home-art-note {
  position: absolute;
  bottom: 38px;
  left: 42px;
  width: 194px;
  padding: 15px 16px 13px;
  border-radius: 4px;
  color: #191612;
  background: #f1e9da;
  transform: rotate(2.5deg);
}

.home-art-note > span {
  color: rgba(25, 22, 18, 0.52);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
}

.home-art-note p {
  margin-top: 9px;
  color: #191612;
  font-size: 17px;
  line-height: 1.45;
}

.home-art-note i {
  display: block;
  margin-top: 9px;
  color: rgba(25, 22, 18, 0.5);
  font-size: 11px;
  font-style: normal;
  text-align: right;
}

.home-art-coin {
  position: absolute;
  top: 34px;
  left: 28px;
  display: flex;
  width: 74px;
  height: 74px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 50%;
  color: #191612;
  background: #e5bd62;
  transform: rotate(7deg);
}

.home-art-coin strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.08em;
  line-height: 0.95;
}

.home-art-coin span {
  margin-top: 3px;
  font-size: 11px;
}

.home-art-people {
  position: absolute;
  right: 27px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid #302b26;
  border-radius: 999px;
  color: var(--muted);
  background: #171513;
  font-size: 11px;
  line-height: 1.45;
}

.home-art-people strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
}

.home-art-people .avatar {
  width: 25px;
  height: 25px;
  margin-left: -8px;
  border: 1px solid #171513;
  font-size: 11px;
}

.home-art-people .avatar:first-child {
  margin-left: 0;
}

.hero-avatar-stack {
  display: inline-flex;
  align-items: center;
  flex: none;
}

@media (max-width: 1020px) {
  .home-masthead-art {
    min-height: 310px;
    border-top: 1px solid #2b2723;
    border-left: 0;
  }
}

@media (max-width: 820px) {
  .home-masthead-art {
    display: none;
  }

  .home-section-bar {
    margin-bottom: 10px;
    padding-bottom: 5px;
  }

  .home-section-link {
    min-height: 30px;
    gap: 4px;
    padding: 4px 6px;
    font-size: 11.5px;
  }

  .home-section-icon {
    width: 14px;
    height: 14px;
  }

  .home-section-link small {
    font-size: 11px;
  }
}

/* ==========================================================================
   3D star map
   ========================================================================== */

.star-atlas-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.star-atlas-title-row h1 {
  margin: 0;
}

.star-atlas-title-row > span {
  padding: 2px 5px;
  border: 1px solid rgba(76, 179, 240, 0.3);
  border-radius: 4px;
  color: var(--accent);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  line-height: 1.4;
}

.star-canvas-frame {
  isolation: isolate;
}

#constellation-canvas {
  position: relative;
  z-index: 1;
}

.star-label-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.star-name-label {
  position: absolute;
  display: block;
  max-width: 110px;
  overflow: hidden;
  padding: 1px 4px;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--muted);
  background: rgba(11, 10, 9, 0.78);
  font-size: 11.5px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
}

.star-name-label:hover,
.star-name-label:focus-visible {
  color: var(--ink);
  border-color: #4b453d;
  background: #1b1816;
  outline: none;
}

.star-name-label.is-neighbor {
  color: var(--ink-soft);
}

.star-name-label.is-viewer {
  color: var(--accent);
}

.star-name-label.is-active {
  z-index: 3;
  color: #0e0d0c;
  border-color: var(--ink);
  background: var(--ink);
}

.star-canvas-hint {
  z-index: 3;
}

.star-zoom-controls {
  z-index: 4;
}

.star-directory {
  z-index: 5;
}

.star-person-relation-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 9px;
  padding-top: 13px;
  margin-top: 14px;
  border-top: 1px solid var(--line);
}

.star-person-relation-line strong {
  color: var(--ink-soft);
  font-size: 11.5px;
  font-weight: 500;
}

.star-person-relation-line span {
  color: var(--muted);
  font-size: 11px;
}

.star-relations {
  padding-top: 13px;
  margin-top: 13px;
  border-top: 1px solid var(--line);
}

.star-relations-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.star-relations-head span {
  color: var(--ink-soft);
  font-size: 11.5px;
  font-weight: 500;
}

.star-relations-head strong {
  color: var(--muted-light);
  font-size: 11px;
  font-weight: 400;
}

.star-relations-list {
  display: flex;
  max-height: 148px;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
  overflow-y: auto;
  scrollbar-color: #3b352e transparent;
}

.star-relations-list button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 27px;
  padding: 3px 8px 3px 3px;
  border: 1px solid #2f2a25;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-size: 11.5px;
  white-space: nowrap;
}

.star-relations-list button:hover {
  color: var(--ink);
  border-color: #4b453d;
  background: #1b1816;
}

.star-relations-list .avatar {
  width: 21px;
  height: 21px;
  border: 0;
  font-size: 11px;
}

.star-relations-hint,
.star-relations-empty {
  margin-top: 7px;
  color: var(--muted-light);
  font-size: 11px;
  line-height: 1.6;
}

.star-person-stats {
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid var(--line);
}

.star-person .star-person-section {
  margin-top: 12px;
}

.star-atlas-note {
  color: var(--muted);
}

@media (max-width: 600px) {
  .star-label-layer {
    overflow: hidden;
  }

  .star-name-label {
    max-width: 86px;
    font-size: 11px;
  }

  .star-relations-list {
    max-height: 118px;
  }

  .star-atlas-title-row > span {
    font-size: 11px;
  }
}

/* ==========================================================================
   Drift data
   ========================================================================== */

.drift-left {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 18px;
}

.drift-overview {
  padding: 20px;
  border: 1px solid #292521;
  border-radius: 20px;
  background: #151412;
}

.drift-overview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.drift-overview-head h2 {
  margin-top: 2px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.drift-overview-head > span {
  color: var(--muted-light);
  font-size: 11px;
}

.drift-data-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}

.drift-data-grid > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 12px 0;
}

.drift-data-grid > div:nth-child(odd) {
  padding-right: 12px;
  border-right: 1px solid var(--line);
}

.drift-data-grid > div:nth-child(even) {
  padding-left: 12px;
}

.drift-data-grid > div:nth-child(n + 3) {
  border-top: 1px solid var(--line);
}

.drift-data-grid strong {
  color: var(--ink);
  font-size: 24px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.drift-data-grid span {
  color: var(--muted-light);
  font-size: 11px;
}

.drift-moods {
  padding-top: 12px;
}

.drift-mood-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.drift-mood-head span {
  color: var(--ink-soft);
  font-size: 11.5px;
}

.drift-mood-head small {
  color: var(--muted-light);
  font-size: 11px;
}

.drift-mood-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.drift-mood-row > span {
  color: var(--muted);
  font-size: 11px;
}

.drift-mood-row > i {
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: #24201d;
}

.drift-mood-row > i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.drift-mood-row > small {
  color: var(--muted-light);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.drift-overview-foot {
  padding-top: 10px;
  margin-top: 7px;
  border-top: 1px solid var(--line);
  color: var(--muted-light);
  font-size: 11px;
  line-height: 1.6;
}

@media (max-width: 600px) {
  .drift-head-stats {
    flex-wrap: wrap;
    gap: 9px 16px;
  }

  .drift-overview {
    padding: 16px;
  }

  .drift-data-grid strong {
    font-size: 21px;
  }

  .drift-overview-head > span {
    font-size: 11px;
  }
}

/* ==========================================================================
   Appeals and restoration
   ========================================================================== */

.appeals-page {
  padding-top: 24px;
}

.appeals-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  padding: 26px 28px;
  border: 1px solid #292521;
  border-radius: 20px;
  background: #151412;
}

.appeals-hero-copy {
  max-width: 760px;
}

.appeals-eyebrow {
  color: var(--accent);
  font-size: 12px;
  line-height: 1.4;
}

.appeals-hero h1 {
  margin: 7px 0 10px;
  color: var(--ink);
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.appeals-hero-copy > p:not(.appeals-eyebrow) {
  max-width: 680px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.75;
}

.appeals-hero-copy > p.appeals-hero-note {
  margin-top: 8px;
  color: var(--muted-light);
  font-size: 12px;
}

.appeals-hero-actions {
  flex: none;
  padding-top: 3px;
}

.appeal-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  margin-top: 16px;
  border: 1px solid #292521;
  border-radius: 16px;
  background: #11100f;
}

.appeal-stat {
  display: flex;
  min-height: 112px;
  flex-direction: column;
  justify-content: center;
  padding: 15px 20px;
}

.appeal-stat + .appeal-stat {
  border-left: 1px solid #292521;
}

.appeal-stat span {
  color: var(--muted-light);
  font-size: 12px;
}

.appeal-stat strong {
  margin-top: 2px;
  color: var(--ink);
  font-size: 29px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.appeal-stat small {
  margin-top: 4px;
  color: var(--muted-light);
  font-size: 11.5px;
  line-height: 1.45;
}

.appeal-section {
  margin-top: 26px;
}

.appeal-section .section-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.appeal-section .section-bar h2 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.035em;
}

.appeal-section .section-bar p {
  margin-top: 4px;
  color: var(--muted-light);
  font-size: 12px;
}

.appeal-list-count {
  color: var(--muted-light);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.appeal-list {
  display: grid;
  gap: 10px;
}

.appeal-card {
  padding: 20px;
  border: 1px solid #292521;
  border-radius: 16px;
  background: #151412;
}

.appeal-card--approved {
  background: #151613;
}

.appeal-card--rejected {
  background: #141312;
}

.appeal-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.appeal-kind,
.appeal-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
}

.appeal-kind {
  color: var(--muted);
}

.appeal-kind .icon,
.appeal-status .icon {
  width: 14px;
  height: 14px;
  stroke-width: 1.6;
}

.appeal-status--available {
  color: var(--ink-soft);
}

.appeal-status--pending {
  color: var(--accent);
}

.appeal-status--approved {
  color: var(--ink);
}

.appeal-status--rejected {
  color: var(--muted-light);
}

.appeal-card h3 {
  margin: 12px 0 8px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.appeal-excerpt {
  max-width: 860px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.75;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.appeal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 14px;
  margin-top: 12px;
  color: var(--muted-light);
  font-size: 11.5px;
  line-height: 1.5;
}

.appeal-meta span + span::before {
  content: "·";
  margin-right: 14px;
  color: #625b53;
}

.appeal-anonymous-note {
  margin-top: 7px;
  color: var(--muted-light);
  font-size: 11.5px;
}

.appeal-reason-block,
.appeal-user-reason,
.appeal-review-note {
  padding: 12px 14px;
  margin-top: 12px;
  border-radius: 10px;
  background: #11100f;
}

.appeal-reason-block > span,
.appeal-user-reason > span,
.appeal-review-note > span {
  display: block;
  color: var(--muted-light);
  font-size: 11.5px;
}

.appeal-reason-block p,
.appeal-user-reason p,
.appeal-review-note p {
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.7;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.appeal-review-note small {
  display: block;
  margin-top: 5px;
  color: var(--muted-light);
  font-size: 11.5px;
}

.appeal-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.appeal-categories span {
  padding: 2px 6px;
  border: 1px solid #363029;
  border-radius: 4px;
  color: var(--muted);
  font-size: 11.5px;
}

.appeal-status-copy {
  margin-top: 11px;
  color: var(--muted-light);
  font-size: 12px;
  line-height: 1.65;
}

.appeal-submit-form,
.appeal-review-box {
  padding-top: 13px;
  margin-top: 14px;
  border-top: 1px solid #292521;
}

.appeal-submit-form label,
.appeal-review-box label {
  display: block;
  margin-bottom: 6px;
  color: var(--ink-soft);
  font-size: 12px;
}

.appeal-submit-form textarea,
.appeal-review-box textarea {
  width: 100%;
  min-height: 78px;
  resize: vertical;
  padding: 10px 11px;
  border: 1px solid #39322b;
  border-radius: 9px;
  color: var(--ink);
  background: #0f0e0d;
  font: inherit;
  font-size: 13px;
  line-height: 1.6;
  outline: none;
}

.appeal-submit-form textarea:focus,
.appeal-review-box textarea:focus {
  border-color: #70665a;
}

.appeal-review-box textarea {
  min-height: 58px;
}

.appeal-form-foot,
.appeal-review-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 9px;
}

.appeal-form-foot > span {
  color: var(--muted-light);
  font-size: 11.5px;
  line-height: 1.5;
}

.appeal-review-actions {
  justify-content: flex-end;
}

.appeal-waiting,
.appeal-result {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
}

.appeal-waiting .icon,
.appeal-result .icon {
  width: 15px;
  height: 15px;
}

.appeal-result--approved {
  color: var(--ink-soft);
}

.appeal-result--rejected {
  color: var(--muted-light);
}

.appeal-content-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  color: var(--accent);
  font-size: 12px;
}

.appeal-content-link .icon {
  width: 13px;
  height: 13px;
}

.appeal-history {
  padding-top: 4px;
}

.ai-record-restored {
  color: var(--accent);
}

.form-error-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 820px) {
  .appeals-hero {
    flex-direction: column;
    gap: 16px;
    padding: 20px;
  }

  .appeals-hero-actions {
    padding-top: 0;
  }

  .appeal-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .appeal-stat {
    min-height: 96px;
    padding: 13px 15px;
  }

  .appeal-stat:nth-child(3) {
    border-left: 0;
    border-top: 1px solid #292521;
  }

  .appeal-stat:nth-child(4) {
    border-top: 1px solid #292521;
  }

  .appeal-card {
    padding: 16px;
  }

  .appeal-card h3 {
    font-size: 17px;
  }

  .appeal-form-foot,
  .appeal-review-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .appeal-form-foot .btn,
  .appeal-review-actions .btn {
    width: 100%;
  }
}

/* ==========================================================================
   江大管家 · forum answer agent
   ========================================================================== */

.steward-composer-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  margin-top: 9px;
  border: 1px solid #2d2822;
  border-radius: 10px;
  background: #11100f;
}

.steward-composer-hint .avatar {
  flex: none;
}

.steward-composer-hint p {
  flex: 1;
  color: var(--muted-light);
  font-size: 11.5px;
  line-height: 1.55;
}

.steward-composer-hint p strong {
  color: var(--ink-soft);
  font-weight: 500;
}

.steward-composer-hint button {
  flex: none;
  padding: 3px 7px;
  border: 1px solid #3b342d;
  border-radius: 5px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 11px;
}

.steward-composer-hint button:hover {
  color: var(--ink);
  border-color: #5a5045;
}

.steward-composer-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  margin: 0 0 14px;
  border: 1px solid rgba(76, 179, 240, 0.2);
  border-radius: 10px;
  color: var(--muted);
  background: rgba(76, 179, 240, 0.05);
}

.steward-composer-note > .icon {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 1px;
  color: var(--accent);
}

.steward-composer-note strong {
  display: block;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 500;
}

.steward-composer-note p {
  margin-top: 2px;
  color: var(--muted-light);
  font-size: 11.5px;
  line-height: 1.6;
}

.steward-answer {
  padding: 21px;
  margin-top: 14px;
  border: 1px solid #2e2923;
  border-radius: 16px;
  background: #141312;
}

.steward-answer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.steward-identity {
  display: flex;
  align-items: center;
  gap: 9px;
}

.steward-avatar-link {
  flex: none;
}

.steward-answer-kicker {
  color: var(--accent);
  font-size: 11.5px;
}

.steward-identity h2 {
  margin-top: 1px;
  color: var(--ink);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.steward-confidence {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  padding: 4px 7px;
  border: 1px solid #383129;
  border-radius: 5px;
  color: var(--muted-light);
  font-size: 11px;
}

.steward-confidence .icon {
  width: 13px;
  height: 13px;
}

.steward-confidence--high {
  color: var(--accent);
  border-color: rgba(76, 179, 240, 0.28);
}

.steward-confidence--medium {
  color: var(--ink-soft);
}

.steward-summary {
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.8;
}

.steward-basis {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 9px;
  color: var(--muted-light);
  font-size: 11px;
}

.steward-basis .icon {
  width: 14px;
  height: 14px;
}

.steward-human-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 10px 12px;
  margin-top: 13px;
  border: 1px solid rgba(76, 179, 240, 0.16);
  border-radius: 9px;
  background: rgba(76, 179, 240, 0.045);
}

.steward-human-callout .icon {
  width: 16px;
  height: 16px;
  color: var(--accent);
}

.steward-human-callout p {
  flex: 1;
  min-width: 190px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.6;
}

.steward-human-callout button {
  padding: 4px 8px;
  border: 1px solid #3e3730;
  border-radius: 5px;
  color: var(--ink-soft);
  background: transparent;
  font: inherit;
  font-size: 11px;
}

.steward-human-callout button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.steward-steps-block,
.steward-viewpoints,
.steward-evidence,
.steward-followup-block {
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid #2b2621;
}

.steward-block-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.steward-block-title h3 {
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
}

.steward-block-title > span {
  color: var(--muted-light);
  font-size: 11px;
}

.steward-steps {
  display: grid;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}

.steward-steps li {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  gap: 9px;
  padding: 8px 0;
  border-top: 1px solid #2a2521;
}

.steward-steps li:last-child {
  border-bottom: 1px solid #2a2521;
}

.steward-steps li > span {
  color: var(--accent);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.8;
}

.steward-steps p {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.75;
}

.steward-viewpoint-list {
  display: grid;
  gap: 7px;
}

.steward-viewpoint {
  padding: 11px 12px;
  border-radius: 9px;
  background: #11100f;
}

.steward-viewpoint-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

.steward-viewpoint-head strong {
  color: var(--ink-soft);
  font-size: 11.5px;
  font-weight: 500;
}

.steward-viewpoint-head > span {
  margin-left: auto;
  color: var(--muted-light);
  font-size: 10.5px;
}

.steward-viewpoint p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.72;
  white-space: pre-line;
}

.steward-viewpoint > a {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 7px;
  color: var(--accent);
  font-size: 11px;
}

.steward-viewpoint > a .icon {
  width: 12px;
  height: 12px;
}

.steward-evidence-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.steward-evidence-label {
  display: block;
  margin-bottom: 5px;
  color: var(--muted-light);
  font-size: 11px;
}

.steward-citations ul,
.steward-sources ul {
  display: grid;
  gap: 7px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.steward-citations li {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.steward-citations a,
.steward-sources a {
  color: var(--ink-soft);
  font-size: 11.5px;
  line-height: 1.5;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.steward-citations li > span {
  color: var(--muted-light);
  font-size: 11px;
  line-height: 1.6;
}

.steward-sources a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.steward-sources .icon {
  width: 13px;
  height: 13px;
}

.steward-notes {
  padding-left: 16px;
  margin-top: 13px;
  color: var(--muted-light);
  font-size: 11.5px;
  line-height: 1.7;
}

.steward-notes li + li {
  margin-top: 4px;
}

.steward-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  padding-top: 11px;
  margin-top: 16px;
  border-top: 1px solid #2b2621;
  color: var(--muted-light);
  font-size: 11px;
  line-height: 1.65;
}

.steward-disclaimer .icon {
  width: 13px;
  height: 13px;
  flex: none;
  margin-top: 1px;
}

.steward-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}

.steward-action-row > span {
  color: var(--muted-light);
  font-size: 11px;
}

.steward-followup-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}

.steward-followup-prompts button {
  padding: 4px 7px;
  border: 1px solid #383129;
  border-radius: 5px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 11px;
  text-align: left;
}

.steward-followup-prompts button:hover {
  color: var(--ink);
  border-color: #5a5045;
}

.steward-followup-history {
  display: grid;
  gap: 7px;
  margin-bottom: 10px;
}

.steward-followup-item {
  padding: 10px 11px;
  border-radius: 8px;
  background: #11100f;
}

.steward-followup-question {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted-light);
  font-size: 11px;
}

.steward-followup-question strong {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 500;
}

.steward-followup-question time {
  margin-left: auto;
  color: var(--muted-light);
  font-size: 10.5px;
}

.steward-followup-item > p {
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.65;
}

.steward-followup-reply {
  padding: 7px 8px;
  margin-top: 7px;
  border-radius: 6px;
  background: #171513;
}

.steward-followup-reply > span {
  color: var(--accent);
  font-size: 10.5px;
}

.steward-followup-reply p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.7;
}

.steward-followup-form {
  margin-top: 2px;
}

.steward-followup-form textarea {
  width: 100%;
  min-height: 62px;
  resize: vertical;
  padding: 9px 10px;
  border: 1px solid #3a332b;
  border-radius: 8px;
  color: var(--ink);
  background: #0f0e0d;
  font: inherit;
  font-size: 12.5px;
  line-height: 1.6;
  outline: none;
}

.steward-followup-form textarea:focus {
  border-color: #706559;
}

.steward-followup-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 7px;
}

.steward-followup-foot > span {
  color: var(--muted-light);
  font-size: 10.5px;
}

@media (max-width: 820px) {
  .steward-composer-hint {
    align-items: flex-start;
  }

  .steward-composer-hint button {
    display: none;
  }

  .steward-answer {
    padding: 16px;
  }

  .steward-answer-head {
    flex-direction: column;
    gap: 8px;
  }

  .steward-summary {
    font-size: 14px;
  }

  .steward-evidence-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .steward-block-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .steward-action-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .steward-followup-question time {
    display: none;
  }
}

/* ==========================================================================
   AI semantic search
   ========================================================================== */

.search-insight {
  padding: 17px 18px;
  margin-bottom: 14px;
  border: 1px solid #2e2923;
  border-radius: 15px;
  background: #141312;
}

.home-grid--search {
  display: block;
}

.home-grid--search .feed-column {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.search-page {
  padding-bottom: 40px;
}

.search-insight-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.search-insight-kicker {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent);
  font-size: 11px;
}

.search-insight-kicker .icon {
  width: 14px;
  height: 14px;
}

.search-insight-head h2 {
  margin-top: 3px;
  color: var(--ink);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.search-ranking-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  padding: 4px 7px;
  border: 1px solid rgba(76, 179, 240, 0.22);
  border-radius: 5px;
  color: var(--accent);
  font-size: 10.5px;
  white-space: nowrap;
}

.search-ranking-chip .icon {
  width: 12px;
  height: 12px;
}

.search-intent-summary {
  margin-top: 9px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.7;
}

.search-concept-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
}

.search-concept-row span {
  padding: 3px 7px;
  border: 1px solid #3a332b;
  border-radius: 4px;
  color: var(--ink-soft);
  background: #11100f;
  font-size: 11px;
}

.search-expanded {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 7px;
  color: var(--muted-light);
  font-size: 10.5px;
}

.search-expanded > span {
  margin-right: 2px;
}

.search-expanded em {
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--muted);
  background: #1a1714;
  font-size: 10.5px;
  font-style: normal;
}

.search-duplicates {
  padding: 11px 12px;
  margin-top: 13px;
  border: 1px solid rgba(231, 168, 86, 0.2);
  border-radius: 9px;
  background: rgba(231, 168, 86, 0.045);
}

.search-duplicates-title {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--sun);
  font-size: 12px;
  font-weight: 500;
}

.search-duplicates-title .icon {
  width: 14px;
  height: 14px;
}

.search-duplicates > p {
  margin-top: 3px;
  color: var(--muted-light);
  font-size: 11px;
  line-height: 1.55;
}

.search-duplicate-links {
  display: grid;
  gap: 5px;
  margin-top: 8px;
}

.search-duplicate-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 5px;
  color: var(--ink-soft);
  background: rgba(20, 18, 16, 0.6);
  font-size: 11.5px;
}

.search-duplicate-links a:hover {
  color: var(--ink);
}

.search-duplicate-links small {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: none;
  color: var(--muted-light);
  font-size: 10.5px;
}

.search-duplicate-links .icon {
  width: 11px;
  height: 11px;
}

.search-solutions {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid #2b2621;
}

.search-solutions-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.search-solutions-head h3 {
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
}

.search-solutions-head > span {
  color: var(--muted-light);
  font-size: 10.5px;
}

.search-solution-list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.search-solution {
  display: block;
  padding: 9px 10px;
  border-radius: 7px;
  background: #11100f;
}

.search-solution-author {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted-light);
  font-size: 10.5px;
}

.search-solution-author strong {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 500;
}

.search-solution-author > .search-solution-likes {
  margin-left: auto;
  color: var(--muted-light);
}

.search-solution p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

.search-solution small {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 5px;
  color: var(--accent);
  font-size: 10.5px;
}

.search-solution small .icon {
  width: 11px;
  height: 11px;
}

.search-empty-note {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  color: var(--muted-light);
  font-size: 11.5px;
}

.search-empty-note .icon {
  width: 14px;
  height: 14px;
}

.search-match-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  color: var(--muted-light);
  font-size: 10.5px;
}

.search-match-line .icon {
  width: 12px;
  height: 12px;
  color: var(--accent);
}

.search-match-line span {
  padding: 2px 5px;
  border-radius: 3px;
  background: #1a1714;
}

.search-duplicate-chip {
  color: var(--sun) !important;
  background: rgba(231, 168, 86, 0.08) !important;
}

.composer-similar {
  padding: 10px 11px;
  margin: 4px 0 12px;
  border: 1px solid rgba(231, 168, 86, 0.2);
  border-radius: 8px;
  background: rgba(231, 168, 86, 0.04);
}

.composer-similar-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  color: var(--sun);
  font-size: 11px;
}

.composer-similar-head .icon {
  width: 14px;
  height: 14px;
}

.composer-similar-head strong {
  font-weight: 500;
}

.composer-similar-head span {
  margin-left: auto;
  color: var(--muted-light);
  font-size: 10.5px;
}

.composer-similar-list {
  display: grid;
  gap: 4px;
  margin-top: 7px;
}

.composer-similar-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 7px;
  border-radius: 4px;
  color: var(--ink-soft);
  background: rgba(16, 14, 13, 0.65);
  font-size: 11px;
}

.composer-similar-list a:hover {
  color: var(--ink);
}

.composer-similar-list small {
  flex: none;
  color: var(--muted-light);
  font-size: 10px;
}

@media (max-width: 820px) {
  .search-insight {
    padding: 14px;
  }

  .search-insight-head {
    flex-direction: column;
    gap: 6px;
  }

  .search-solutions-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .search-duplicate-links a,
  .composer-similar-list a {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .search-duplicate-links small,
  .composer-similar-list small {
    margin-left: 0;
  }
}

/* ==========================================================================
   AI post assistant
   ========================================================================== */

.detail-summary {
  max-width: 760px;
  margin-top: 9px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.75;
}

.post-assistant {
  padding: 13px;
  margin-bottom: 15px;
  border: 1px solid rgba(76, 179, 240, 0.22);
  border-radius: 12px;
  background: #11100f;
}

.post-assistant-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.post-assistant-head > .avatar {
  flex: none;
}

.post-assistant-head > div {
  flex: 1;
  min-width: 0;
}

.post-assistant-kicker {
  display: block;
  color: var(--accent);
  font-size: 10.5px;
}

.post-assistant-head strong {
  display: block;
  margin-top: 1px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
}

.post-assistant-head p {
  margin-top: 2px;
  color: var(--muted-light);
  font-size: 11px;
  line-height: 1.55;
}

.post-assistant-badge {
  flex: none;
  padding: 3px 6px;
  border: 1px solid rgba(76, 179, 240, 0.28);
  border-radius: 4px;
  color: var(--accent);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
}

.post-assistant-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.post-assistant-actions button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border: 1px solid #3a332b;
  border-radius: 5px;
  color: var(--ink-soft);
  background: #171513;
  font: inherit;
  font-size: 11px;
}

.post-assistant-actions button:hover {
  border-color: #5a5045;
  color: var(--ink);
}

.post-assistant-actions button .icon {
  width: 13px;
  height: 13px;
}

.post-assistant-actions button.is-listening {
  color: var(--accent);
  border-color: rgba(76, 179, 240, 0.4);
}

.assist-voice-status {
  margin-top: 7px;
  color: var(--accent);
  font-size: 10.5px;
  line-height: 1.5;
}

.assistant-result {
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid #2b2621;
}

.assistant-result-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.assistant-result-kicker {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--accent);
  font-size: 10.5px;
}

.assistant-result-kicker .icon {
  width: 12px;
  height: 12px;
}

.assistant-result-head strong {
  display: block;
  margin-top: 1px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
}

.assistant-suggestion,
.assistant-missing,
.assistant-outline,
.assistant-body-preview {
  padding: 9px 10px;
  margin-top: 7px;
  border-radius: 7px;
  background: #171513;
}

.assistant-suggestion-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}

.assistant-suggestion-head > span {
  color: var(--muted-light);
  font-size: 10.5px;
}

.assistant-suggestion-head > small {
  color: var(--muted-light);
  font-size: 10px;
}

.assistant-suggestion-head button {
  padding: 2px 6px;
  border: 1px solid #3b342d;
  border-radius: 3px;
  color: var(--ink-soft);
  background: transparent;
  font: inherit;
  font-size: 10px;
}

.assistant-suggestion-head button:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.assistant-title {
  margin-top: 4px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
}

.assistant-title-options {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}

.assistant-title-options button {
  padding: 2px 5px;
  border: 1px dashed #3b342d;
  border-radius: 3px;
  color: var(--muted-light);
  background: transparent;
  font: inherit;
  font-size: 10px;
  text-align: left;
}

.assistant-suggestion > p:not(.assistant-title) {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.65;
}

.assistant-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}

.assistant-tags span {
  padding: 2px 5px;
  border-radius: 3px;
  color: var(--accent);
  background: rgba(76, 179, 240, 0.06);
  font-size: 10.5px;
}

.assistant-missing {
  border: 1px solid rgba(216, 173, 85, 0.16);
  background: rgba(216, 173, 85, 0.04);
}

.assistant-missing .assistant-suggestion-head > span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--sun);
}

.assistant-missing .icon {
  width: 12px;
  height: 12px;
}

.assistant-missing ul {
  display: grid;
  gap: 5px;
  padding: 0;
  margin: 7px 0 0;
  list-style: none;
}

.assistant-missing li {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.assistant-missing li strong {
  color: var(--ink-soft);
  font-size: 10.5px;
  font-weight: 500;
}

.assistant-missing li span {
  color: var(--muted-light);
  font-size: 10.5px;
  line-height: 1.5;
}

.assistant-complete {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 9px;
  margin-top: 7px;
  border-radius: 6px;
  color: var(--teal);
  background: rgba(104, 214, 177, 0.05);
  font-size: 10.5px;
}

.assistant-complete .icon {
  width: 13px;
  height: 13px;
}

.assistant-outline ol {
  display: grid;
  gap: 5px;
  padding: 0;
  margin: 7px 0 0;
  list-style: none;
  counter-reset: assistant-outline;
}

.assistant-outline li {
  display: flex;
  flex-direction: column;
  gap: 1px;
  counter-increment: assistant-outline;
}

.assistant-outline li::before {
  content: "0" counter(assistant-outline);
  color: var(--accent);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 9.5px;
}

.assistant-outline li strong {
  color: var(--ink-soft);
  font-size: 10.5px;
  font-weight: 500;
}

.assistant-outline li span {
  color: var(--muted-light);
  font-size: 10.5px;
  line-height: 1.5;
}

.assistant-body-preview pre {
  max-height: 170px;
  overflow: auto;
  margin: 6px 0 0;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}

.assistant-note {
  margin-top: 8px;
  color: var(--muted-light);
  font-size: 10px;
  line-height: 1.55;
}

@media (max-width: 820px) {
  .post-assistant {
    padding: 11px;
  }

  .post-assistant-actions button {
    flex: 1;
    justify-content: center;
  }

  .detail-summary {
    font-size: 13px;
  }
}

/* ==========================================================================
   Personalized recommendations
   ========================================================================== */

.recommendation-panel {
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid #2e2923;
  border-radius: 15px;
  background: #141312;
}

.recommendation-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.recommendation-kicker {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent);
  font-size: 10.5px;
}

.recommendation-kicker .icon {
  width: 13px;
  height: 13px;
}

.recommendation-head h2 {
  margin-top: 2px;
  color: var(--ink);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.recommendation-head p {
  max-width: 640px;
  margin-top: 4px;
  color: var(--muted-light);
  font-size: 11px;
  line-height: 1.6;
}

.recommendation-settings-button {
  flex: none;
  padding: 4px 7px;
  border: 1px solid #3b342d;
  border-radius: 5px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 10.5px;
}

.recommendation-settings-button:hover {
  color: var(--ink);
  border-color: #5a5045;
}

.recommendation-topics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
}

.recommendation-topics > span {
  color: var(--muted-light);
  font-size: 10.5px;
}

.recommendation-topics a {
  padding: 3px 7px;
  border: 1px solid #3a332b;
  border-radius: 4px;
  color: var(--ink-soft);
  background: #11100f;
  font-size: 11px;
}

.recommendation-topics a:hover {
  color: var(--accent);
  border-color: rgba(76, 179, 240, 0.3);
}

.recommendation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 11px;
}

.recommendation-card {
  display: block;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid #2b2621;
  border-radius: 9px;
  background: #11100f;
}

.recommendation-card:hover {
  border-color: #4a4037;
}

.recommendation-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.recommendation-card-top > span {
  overflow: hidden;
  color: var(--accent);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recommendation-card-top > small {
  flex: none;
  color: var(--muted-light);
  font-size: 9.5px;
}

.recommendation-card h3 {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.recommendation-card > p {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 3px;
  color: var(--muted-light);
  font-size: 10.5px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.recommendation-card-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 7px;
  color: var(--muted-light);
  font-size: 9.5px;
}

.recommendation-card-meta .icon {
  width: 11px;
  height: 11px;
}

.recommendation-card-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  color: var(--accent);
}

.recommendation-hidden {
  padding-top: 10px;
  margin-top: 11px;
  border-top: 1px solid #2b2621;
}

.recommendation-subhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.recommendation-subhead > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-soft);
  font-size: 11px;
}

.recommendation-subhead .icon {
  width: 13px;
  height: 13px;
  color: var(--sun);
}

.recommendation-subhead > small {
  color: var(--muted-light);
  font-size: 9.5px;
}

.recommendation-hidden-list {
  display: grid;
  gap: 4px;
  margin-top: 6px;
}

.recommendation-hidden-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 7px;
  border-radius: 4px;
  background: #11100f;
}

.recommendation-hidden-list a > span {
  overflow: hidden;
  color: var(--muted);
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recommendation-hidden-list a > small {
  flex: none;
  color: var(--sun);
  font-size: 9.5px;
}

.recommendation-discussions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding-top: 9px;
  margin-top: 9px;
  border-top: 1px solid #2b2621;
}

.recommendation-discussions > span {
  color: var(--muted-light);
  font-size: 10px;
}

.recommendation-discussions a {
  color: var(--muted);
  font-size: 10.5px;
}

.recommendation-discussions a:hover {
  color: var(--accent);
}

.recommendation-discussions small {
  color: var(--muted-light);
  font-size: 9px;
}

.recommendation-off {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 12px;
  border: 1px solid #2e2923;
  border-radius: 8px;
  color: var(--muted-light);
  background: #11100f;
  font-size: 10.5px;
}

.recommendation-off > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.recommendation-off .icon {
  width: 13px;
  height: 13px;
  color: var(--muted);
}

.recommendation-off button {
  flex: none;
  padding: 3px 6px;
  border: 1px solid #3a332b;
  border-radius: 4px;
  color: var(--ink-soft);
  background: transparent;
  font: inherit;
  font-size: 10.5px;
}

.recommendation-settings-form {
  margin-top: 2px;
}

.recommendation-toggle {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px;
  border: 1px solid #2e2923;
  border-radius: 9px;
  background: #11100f;
  cursor: pointer;
}

.recommendation-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.recommendation-toggle > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.recommendation-toggle strong {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 500;
}

.recommendation-toggle .switch-track {
  margin-top: 2px;
  background: #2a2521;
}

.recommendation-toggle input:checked + .switch-track {
  background: var(--accent);
}

.recommendation-toggle input:checked + .switch-track > span {
  transform: translateX(14px);
}

.recommendation-toggle small {
  color: var(--muted-light);
  font-size: 10.5px;
}

.recommendation-settings-section {
  margin-top: 15px;
}

.recommendation-settings-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.recommendation-settings-label strong {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 500;
}

.recommendation-settings-label span {
  color: var(--muted-light);
  font-size: 10px;
}

.recommendation-interest-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.recommendation-interest input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.recommendation-interest span {
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid #3a332b;
  border-radius: 4px;
  color: var(--muted);
  background: #11100f;
  font-size: 11px;
  cursor: pointer;
}

.recommendation-interest input:checked + span {
  color: var(--accent);
  border-color: rgba(76, 179, 240, 0.35);
  background: rgba(76, 179, 240, 0.06);
}

.recommendation-privacy-note {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin-top: 14px;
  color: var(--muted-light);
  font-size: 10px;
  line-height: 1.55;
}

.recommendation-privacy-note .icon {
  width: 13px;
  height: 13px;
  flex: none;
}

.recommendation-settings-foot {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  padding-top: 13px;
  margin-top: 13px;
  border-top: 1px solid #2b2621;
}

@media (max-width: 820px) {
  .recommendation-panel {
    padding: 13px;
  }

  .recommendation-head {
    flex-direction: column;
    gap: 6px;
  }

  .recommendation-grid {
    grid-template-columns: 1fr;
  }

  .recommendation-hidden-list a {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .recommendation-hidden-list a > small {
    margin-left: 0;
  }

  .recommendation-off {
    align-items: flex-start;
    flex-direction: column;
  }

  .recommendation-settings-label {
    flex-direction: column;
    gap: 3px;
  }
}

/* ==========================================================================
   Featured knowledge
   ========================================================================== */

.featured-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: none;
  padding: 3px 6px;
  border: 1px solid rgba(216, 173, 85, 0.3);
  border-radius: 4px;
  color: var(--sun);
  background: rgba(216, 173, 85, 0.05);
  font-size: 10px;
  white-space: nowrap;
}

.featured-badge .icon {
  width: 12px;
  height: 12px;
}

.home-section-link--featured {
  color: var(--sun);
}

.home-section-link--featured .home-section-icon {
  color: var(--sun);
}

.featured-intro {
  padding: 18px;
  margin-bottom: 15px;
  border: 1px solid #3a332b;
  border-radius: 15px;
  background: #141312;
}

.featured-intro-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.featured-kicker {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--sun);
  font-size: 10.5px;
}

.featured-kicker .icon {
  width: 13px;
  height: 13px;
}

.featured-intro h1 {
  margin-top: 2px;
  color: var(--ink);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.featured-intro p {
  max-width: 720px;
  margin-top: 5px;
  color: var(--muted-light);
  font-size: 12px;
  line-height: 1.65;
}

.featured-count {
  flex: none;
  padding: 4px 7px;
  border: 1px solid #3a332b;
  border-radius: 4px;
  color: var(--muted);
  font-size: 10.5px;
}

.featured-topic-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
}

.featured-topic-row > span {
  margin-right: 2px;
  color: var(--muted-light);
  font-size: 10.5px;
}

.featured-topic-row a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border: 1px solid #3a332b;
  border-radius: 4px;
  color: var(--ink-soft);
  font-size: 11px;
}

.featured-topic-row a::before {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--topic-color);
  content: "";
}

.featured-topic-row a:hover {
  border-color: var(--topic-color);
}

.featured-topic-row small {
  color: var(--muted-light);
  font-size: 9.5px;
}

.featured-note {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-top: 10px;
  margin-top: 11px;
  border-top: 1px solid #2b2621;
  color: var(--muted-light);
  font-size: 10.5px;
}

.featured-note .icon {
  width: 12px;
  height: 12px;
  color: var(--accent);
}

.knowledge-card {
  padding: 19px;
  margin-top: 14px;
  border: 1px solid rgba(216, 173, 85, 0.2);
  border-radius: 15px;
  background: #141312;
}

.knowledge-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.knowledge-kicker {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--sun);
  font-size: 10.5px;
}

.knowledge-kicker .icon {
  width: 14px;
  height: 14px;
}

.knowledge-head h2 {
  margin-top: 2px;
  color: var(--ink);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.knowledge-freshness {
  flex: none;
  padding: 3px 6px;
  border: 1px solid #3a332b;
  border-radius: 4px;
  font-size: 10px;
}

.knowledge-freshness--review {
  color: var(--sun);
  border-color: rgba(216, 173, 85, 0.3);
}

.knowledge-freshness--fresh {
  color: var(--teal);
  border-color: rgba(104, 214, 177, 0.25);
}

.knowledge-freshness--stale {
  color: var(--coral);
  border-color: rgba(226, 118, 91, 0.25);
}

.knowledge-summary {
  margin-top: 9px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.7;
}

.knowledge-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.knowledge-meta span {
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--muted-light);
  background: #1a1714;
  font-size: 10px;
}

.knowledge-points,
.knowledge-opinions,
.knowledge-related {
  padding-top: 11px;
  margin-top: 12px;
  border-top: 1px solid #2b2621;
}

.knowledge-points > h3,
.knowledge-section-head h3 {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 500;
}

.knowledge-points ol {
  display: grid;
  gap: 5px;
  padding: 0;
  margin: 7px 0 0;
  list-style: none;
}

.knowledge-points li {
  display: grid;
  grid-template-columns: 23px minmax(0, 1fr);
  gap: 6px;
}

.knowledge-points li > span {
  color: var(--sun);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 9.5px;
  line-height: 1.7;
}

.knowledge-points li > p {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.65;
}

.knowledge-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.knowledge-section-head > span {
  color: var(--muted-light);
  font-size: 9.5px;
}

.knowledge-opinion {
  padding: 8px 9px;
  margin-top: 5px;
  border-radius: 6px;
  background: #11100f;
}

.knowledge-opinion--different {
  border-left: 2px solid var(--sun);
}

.knowledge-opinion--complementary {
  border-left: 2px solid var(--teal);
}

.knowledge-stance {
  color: var(--muted-light);
  font-size: 9.5px;
}

.knowledge-opinion--different .knowledge-stance {
  color: var(--sun);
}

.knowledge-opinion--complementary .knowledge-stance {
  color: var(--teal);
}

.knowledge-opinion p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.65;
}

.knowledge-opinion small {
  display: block;
  margin-top: 3px;
  color: var(--muted-light);
  font-size: 9.5px;
}

.knowledge-related-list {
  display: grid;
  gap: 4px;
}

.knowledge-related-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 7px;
  border-radius: 4px;
  background: #11100f;
  color: var(--muted);
  font-size: 10.5px;
}

.knowledge-related-list a:hover {
  color: var(--ink-soft);
}

.knowledge-related-list small {
  flex: none;
  color: var(--sun);
  font-size: 9.5px;
}

.knowledge-freshness-note {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding-top: 9px;
  margin-top: 10px;
  border-top: 1px solid #2b2621;
  color: var(--muted-light);
  font-size: 10px;
  line-height: 1.6;
}

.knowledge-freshness-note .icon {
  width: 12px;
  height: 12px;
  flex: none;
  color: var(--sun);
}

.knowledge-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 11px;
  color: var(--muted-light);
  font-size: 9.5px;
}

.knowledge-foot a {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--sun);
  font-size: 10.5px;
}

.knowledge-foot .icon {
  width: 11px;
  height: 11px;
}

@media (max-width: 820px) {
  .featured-intro {
    padding: 14px;
  }

  .featured-intro-head {
    flex-direction: column;
    gap: 5px;
  }

  .featured-intro h1 {
    font-size: 23px;
  }

  .featured-count {
    align-self: flex-start;
  }

  .knowledge-card {
    padding: 15px;
  }

  .knowledge-head {
    flex-direction: column;
    gap: 5px;
  }

  .knowledge-freshness {
    align-self: flex-start;
  }

  .knowledge-related-list a {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
}

/* ==========================================================================
   Community operations analytics
   ========================================================================== */

.operations-panel {
  padding: 20px;
  margin-top: 18px;
  border: 1px solid #2e2923;
  border-radius: 16px;
  background: #141312;
}

.operations-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.operations-head h2 {
  margin-top: 3px;
  color: var(--ink);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.operations-head p {
  margin-top: 3px;
  color: var(--muted-light);
  font-size: 11.5px;
}

.operations-generated {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  color: var(--muted-light);
  font-size: 10.5px;
}

.operations-generated .icon {
  width: 12px;
  height: 12px;
  color: var(--accent);
}

.operations-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 14px;
}

.operations-overview > div {
  padding: 9px 10px;
  border: 1px solid #2b2621;
  border-radius: 7px;
  background: #11100f;
}

.operations-overview strong {
  display: block;
  color: var(--ink);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
}

.operations-overview span {
  color: var(--muted-light);
  font-size: 9.5px;
}

.operations-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.operations-card {
  min-width: 0;
  padding: 11px;
  border: 1px solid #2b2621;
  border-radius: 9px;
  background: #11100f;
}

.operations-card--retention {
  grid-column: span 2;
}

.operations-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 7px;
  padding-bottom: 7px;
  border-bottom: 1px solid #2b2621;
}

.operations-card-head > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-soft);
  font-size: 11.5px;
}

.operations-card-head .icon {
  width: 13px;
  height: 13px;
  color: var(--accent);
}

.operations-card-head > small {
  flex: none;
  color: var(--muted-light);
  font-size: 9px;
}

.operations-concerns {
  display: grid;
  gap: 4px;
  margin-top: 8px;
}

.operations-concerns > div,
.operations-boards > div,
.operations-reasons > div {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 10.5px;
}

.operations-concerns > div > span,
.operations-boards > div > span,
.operations-reasons > div > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operations-concerns strong,
.operations-reasons strong {
  color: var(--ink-soft);
  font-weight: 500;
}

.ops-trend {
  min-width: 25px;
  text-align: right;
  color: var(--muted-light);
  font-size: 9.5px;
}

.ops-trend--up {
  color: var(--teal);
}

.ops-trend--down {
  color: var(--coral);
}

.operations-list {
  display: grid;
  gap: 3px;
  margin-top: 7px;
}

.operations-list a {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding: 4px 0;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.45;
}

.operations-list a:hover {
  color: var(--ink-soft);
}

.operations-list a > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operations-list small {
  color: var(--muted-light);
  font-size: 9px;
}

.operations-boards {
  display: grid;
  gap: 5px;
  margin-top: 8px;
}

.operations-boards strong {
  color: var(--muted-light);
  font-weight: 400;
  font-size: 9px;
}

.operations-boards > div > small {
  min-width: 34px;
  color: var(--coral);
  font-size: 9.5px;
  text-align: right;
}

.operations-retention-number {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 8px;
}

.operations-retention-number strong {
  color: var(--sun);
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
}

.operations-retention-number span {
  color: var(--muted-light);
  font-size: 10px;
}

.operations-retention-sub {
  margin-top: 4px;
  color: var(--muted-light);
  font-size: 9px;
  line-height: 1.5;
}

.operations-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 7px;
}

.operations-reasons > div {
  width: calc(50% - 7px);
}

.operations-note {
  margin-top: 7px;
  color: var(--muted-light);
  font-size: 9px;
  line-height: 1.5;
}

.operations-empty {
  margin-top: 8px;
  color: var(--muted-light);
  font-size: 10px;
  line-height: 1.5;
}

.operations-summary {
  padding: 11px 12px;
  margin-top: 10px;
  border: 1px solid rgba(76, 179, 240, 0.16);
  border-radius: 8px;
  background: rgba(76, 179, 240, 0.035);
}

.operations-summary > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent);
  font-size: 10.5px;
}

.operations-summary .icon {
  width: 13px;
  height: 13px;
}

.operations-summary ul {
  display: grid;
  gap: 3px;
  padding-left: 15px;
  margin-top: 5px;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.6;
}

.operations-privacy {
  margin-top: 8px;
  color: var(--muted-light);
  font-size: 9px;
}

@media (max-width: 1040px) {
  .operations-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operations-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operations-card--retention {
    grid-column: span 2;
  }
}

@media (max-width: 820px) {
  .operations-panel {
    padding: 14px;
  }

  .operations-head {
    flex-direction: column;
    gap: 5px;
  }

  .operations-head h2 {
    font-size: 21px;
  }

  .operations-grid {
    grid-template-columns: 1fr;
  }

  .operations-card--retention {
    grid-column: auto;
  }

  .operations-reasons > div {
    width: 100%;
  }
}

/* ==========================================================================
   Community agent
   ========================================================================== */

.agent-onboarding {
  padding: 16px;
  margin-bottom: 15px;
  border: 1px solid rgba(76, 179, 240, 0.2);
  border-radius: 14px;
  background: #141312;
}

.agent-onboarding-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.agent-onboarding-identity {
  display: flex;
  align-items: center;
  gap: 8px;
}

.agent-onboarding-kicker {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent);
  font-size: 10.5px;
}

.agent-onboarding-kicker .icon {
  width: 13px;
  height: 13px;
}

.agent-onboarding-identity h2 {
  margin-top: 1px;
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 500;
}

.agent-onboarding-actions {
  display: flex;
  gap: 5px;
}

.agent-onboarding-actions button {
  padding: 3px 6px;
  border: 1px solid #3b342d;
  border-radius: 4px;
  color: var(--muted-light);
  background: transparent;
  font: inherit;
  font-size: 10px;
}

.agent-onboarding-actions button:hover {
  color: var(--ink-soft);
  border-color: #5a5045;
}

.agent-onboarding-welcome {
  margin-top: 8px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.65;
}

.agent-onboarding-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 9px;
  margin-top: 10px;
}

.agent-onboarding-steps {
  display: grid;
  gap: 5px;
}

.agent-onboarding-steps > div {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 5px;
}

.agent-onboarding-steps > div > span {
  color: var(--accent);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 9px;
  line-height: 1.7;
}

.agent-onboarding-steps p {
  display: flex;
  flex-direction: column;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.5;
}

.agent-onboarding-steps strong {
  color: var(--ink-soft);
  font-weight: 500;
}

.agent-onboarding-steps small {
  color: var(--muted-light);
  font-size: 9.5px;
}

.agent-onboarding-starter {
  display: grid;
  gap: 4px;
  align-content: start;
}

.agent-onboarding-starter > span {
  color: var(--muted-light);
  font-size: 9.5px;
}

.agent-onboarding-starter a {
  display: flex;
  flex-direction: column;
  gap: 1px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.agent-onboarding-starter a:hover {
  color: var(--ink-soft);
}

.agent-onboarding-starter small {
  color: var(--muted-light);
  font-size: 9px;
}

.agent-onboarding-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px solid #2b2621;
}

.agent-onboarding-boards {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.agent-onboarding-boards a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 5px;
  border: 1px solid #3a332b;
  border-radius: 3px;
  color: var(--muted);
  font-size: 9.5px;
}

.agent-onboarding-boards a::before {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--board-color);
  content: "";
}

.agent-onboarding-footer > span {
  color: var(--muted-light);
  font-size: 9px;
  text-align: right;
}

.agent-settings-form {
  margin-top: 2px;
}

.agent-settings-form .recommendation-toggle + .recommendation-toggle {
  margin-top: 7px;
}

.agent-permission-card {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
  margin-top: 12px;
  border: 1px solid #2b2621;
  border-radius: 8px;
  background: #11100f;
}

.agent-permission-card > .icon {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 1px;
  color: var(--teal);
}

.agent-permission-card strong {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 500;
}

.agent-permission-card p {
  margin-top: 2px;
  color: var(--muted-light);
  font-size: 10px;
  line-height: 1.55;
}

.follow-button.is-following {
  color: var(--accent);
}

.follow-button.is-following .action-icon {
  color: var(--accent);
}

.agent-ops-panel {
  padding: 18px;
  margin-top: 18px;
  border: 1px solid #2e2923;
  border-radius: 16px;
  background: #141312;
}

.agent-ops-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.agent-ops-head h2 {
  margin-top: 2px;
  color: var(--ink);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.agent-ops-head p {
  margin-top: 3px;
  color: var(--muted-light);
  font-size: 11px;
}

.agent-ops-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  padding: 3px 6px;
  border: 1px solid rgba(104, 214, 177, 0.2);
  border-radius: 4px;
  color: var(--teal);
  font-size: 10px;
}

.agent-ops-badge .icon {
  width: 12px;
  height: 12px;
}

.agent-ops-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 11px;
}

.agent-ops-card {
  min-width: 0;
  padding: 11px;
  border: 1px solid #2b2621;
  border-radius: 8px;
  background: #11100f;
}

.agent-ops-card--digest {
  grid-row: span 2;
}

.agent-ops-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #2b2621;
}

.agent-ops-card-head > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-soft);
  font-size: 11px;
}

.agent-ops-card-head .icon {
  width: 13px;
  height: 13px;
  color: var(--accent);
}

.agent-ops-card-head > small,
.agent-ops-card-head > button {
  flex: none;
  color: var(--muted-light);
  font-size: 9px;
}

.agent-ops-card-head > button {
  padding: 2px 5px;
  border: 1px solid #3a332b;
  border-radius: 3px;
  background: transparent;
  font: inherit;
}

.agent-ops-card-head > button:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.agent-ops-card h3 {
  margin-top: 7px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}

.agent-ops-card > p {
  margin-top: 4px;
  color: var(--muted-light);
  font-size: 10px;
  line-height: 1.55;
}

.agent-ops-status {
  display: block;
  margin-top: 7px;
  color: var(--muted-light);
  font-size: 9px;
  line-height: 1.45;
}

.agent-digest-sections {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.agent-digest-sections > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.agent-digest-sections strong {
  color: var(--sun);
  font-size: 9.5px;
  font-weight: 500;
}

.agent-digest-sections span {
  overflow: hidden;
  color: var(--muted);
  font-size: 9.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-findings {
  display: grid;
  gap: 3px;
  margin-top: 6px;
}

.agent-findings a {
  display: flex;
  flex-direction: column;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.agent-findings a:hover {
  color: var(--ink-soft);
}

.agent-findings small {
  color: var(--muted-light);
  font-size: 9px;
}

.agent-agenda {
  display: grid;
  gap: 2px;
  padding-left: 13px;
  margin-top: 6px;
  color: var(--muted-light);
  font-size: 9.5px;
  line-height: 1.5;
}

.agent-permission-strip {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 9px 10px;
  margin-top: 9px;
  border: 1px solid rgba(104, 214, 177, 0.15);
  border-radius: 7px;
  background: rgba(104, 214, 177, 0.03);
}

.agent-permission-strip > .icon {
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: 1px;
  color: var(--teal);
}

.agent-permission-strip strong {
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 500;
}

.agent-permission-strip p {
  margin-top: 2px;
  color: var(--muted-light);
  font-size: 9.5px;
  line-height: 1.5;
}

@media (max-width: 820px) {
  .agent-onboarding-head {
    flex-direction: column;
    gap: 6px;
  }

  .agent-onboarding-grid {
    grid-template-columns: 1fr;
  }

  .agent-onboarding-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .agent-onboarding-footer > span {
    text-align: left;
  }

  .agent-ops-panel {
    padding: 14px;
  }

  .agent-ops-head {
    flex-direction: column;
    gap: 5px;
  }

  .agent-ops-grid {
    grid-template-columns: 1fr;
  }

  .agent-ops-card--digest {
    grid-row: auto;
  }
}










/* ==========================================================================
   Auth redesign · UJS campus photograph + white readable form
   ========================================================================== */

.auth-page {
  color: #1b1714;
  background: #f5f0e7;
}

.auth-story {
  color: #f8f4ec;
  background:
    linear-gradient(180deg, rgba(4, 15, 29, 0.78), rgba(4, 15, 29, 0.34) 48%, rgba(4, 15, 29, 0.78)),
    url('/images/ujs-campus-main.jpg') center / cover no-repeat;
}

.auth-story::before {
  border-color: rgba(224, 240, 255, 0.18);
}

.auth-story::after {
  border-color: rgba(152, 207, 255, 0.18);
}

.auth-story .brand-mark {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(8, 25, 42, 0.34);
  box-shadow: none;
}

.auth-story .brand-text strong,
.auth-story .brand-text small {
  color: #fff;
}

.auth-story .brand-text small {
  opacity: 0.62;
}

.auth-beta {
  color: rgba(255, 255, 255, 0.68);
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(5, 18, 32, 0.22);
}

.auth-copy h1 {
  color: #fff;
  font-size: clamp(42px, 5vw, 58px);
  font-weight: 600;
  letter-spacing: -0.065em;
  line-height: 1.06;
}

.auth-copy h1 em {
  color: #a8d8ff;
  font-style: normal;
}

.auth-copy > p {
  color: rgba(255, 255, 255, 0.76);
  font-size: 13.5px;
}

.auth-copy .eyebrow {
  color: rgba(255, 255, 255, 0.66);
}

.auth-tags span {
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.78);
  background: rgba(6, 20, 35, 0.25);
}

.auth-story-foot {
  border-top-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.58);
}

.auth-panel {
  color: #1b1714;
  background: #f7f3ea;
}

.auth-panel::before {
  display: none;
}

.auth-panel-inner {
  max-width: 430px;
}

.auth-panel .auth-heading .eyebrow {
  color: #8c8276;
}

.auth-heading h2 {
  color: #191512;
  font-size: 32px;
  font-weight: 650;
  letter-spacing: -0.055em;
}

.auth-heading p {
  color: #70685f;
  font-size: 12.5px;
}

.auth-tabs {
  border-color: #ddd3c6;
  background: #ebe4d8;
}

.auth-tab {
  color: #5f564c;
  font-size: 12.5px;
  font-weight: 550;
}

.auth-tab:hover {
  color: #211b16;
}

.auth-tab.is-active {
  color: #191512;
  background: #fffdf8;
  box-shadow: 0 2px 7px rgba(46, 35, 22, 0.08);
}

.auth-panel .form-field label {
  color: #4c443b;
  font-size: 11.5px;
  font-weight: 550;
}

.auth-panel .input-wrap,
.auth-panel .select-wrap {
  border-color: #d7cdc0;
  background: #fffdf8;
}

.auth-panel .input-wrap:focus-within,
.auth-panel .select-wrap:focus-within {
  border-color: #2f79a8;
  box-shadow: 0 0 0 3px rgba(47, 121, 168, 0.12);
}

.auth-panel .input-wrap input,
.auth-panel .select-wrap select,
.auth-panel .form-field textarea {
  color: #1b1714;
  font-size: 14px;
}

.auth-panel .input-wrap input::placeholder,
.auth-panel .form-field textarea::placeholder {
  color: #9c9184;
}

.auth-panel .input-wrap .input-icon {
  color: #8f8376;
}

.auth-panel input:-webkit-autofill,
.auth-panel input:-webkit-autofill:hover,
.auth-panel input:-webkit-autofill:focus {
  -webkit-text-fill-color: #1b1714;
  -webkit-box-shadow: 0 0 0 40px #fffdf8 inset;
  caret-color: #1b1714;
}

.auth-panel select option {
  color: #1b1714;
  background: #fffdf8;
}

.auth-submit {
  min-height: 48px;
  border: 1px solid #235d82;
  border-radius: 10px;
  color: #fff;
  background: #2f79a8;
}

.auth-submit:hover {
  background: #286b95;
}

.auth-demo-hint {
  color: #7c7267;
  font-size: 10px;
}

.auth-demo-hint code {
  color: #4f473e;
  background: #efe8dd;
}

.auth-admin-hint,
.auth-ai-hint {
  color: #6b5a3c;
  border-color: #dfd2bc;
  background: #f3ead9;
  font-size: 9.5px;
}

.auth-ai-hint {
  color: #2d665d;
  border-color: #cfe1d9;
  background: #edf6f0;
}

.auth-admin-hint code,
.auth-ai-hint code {
  color: #3d342a;
  font-size: 9px;
}

.auth-divider {
  color: #92887b;
}

.auth-divider::before,
.auth-divider::after {
  background: #ddd3c6;
}

.demo-entry {
  border-color: #ded4c7;
  color: #1b1714;
  background: #fffdf8;
}

.demo-entry:hover {
  border-color: #9ec6dc;
  background: #fff;
  box-shadow: 0 8px 18px rgba(39, 74, 91, 0.06);
}

.demo-entry-icon {
  color: #fff;
  border: 0;
  background: #2f79a8;
}

.demo-entry-copy strong {
  color: #1b1714;
  font-size: 12px;
  font-weight: 600;
}

.demo-entry-copy small {
  color: #807468;
  font-size: 10px;
}

.demo-entry-arrow {
  color: #70665a;
}

.auth-terms,
.auth-device-detected {
  color: #8a8074;
  font-size: 9px;
}

.auth-device-bar {
  border-top-color: #ded4c7;
}

.auth-device-mode {
  border-color: #d8cec1;
  color: #554b40;
  background: #fffdf8;
  font-size: 9px;
}

.auth-device-mode .icon {
  color: #2f79a8;
}

.auth-device-switch {
  color: #2f79a8;
  font-size: 9.5px;
}

.auth-photo-credit {
  display: block;
  margin-top: 12px;
  color: #9a8f82;
  font-size: 8.5px;
  line-height: 1.5;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.auth-mobile-brand {
  display: none;
}

.auth-mobile-brand .brand-text strong {
  color: #1b1714;
}

.auth-mobile-brand .brand-text small {
  color: #81766a;
}

.auth-mobile-brand .brand-mark {
  background: #2f79a8;
  border: 0;
}

.auth-mobile-brand .brand-pi {
  color: #fff;
}

@media (max-width: 980px) {
  .auth-page {
    background: #f5f0e7;
  }

  .auth-story {
    display: none;
  }

  .auth-panel {
    min-height: 100vh;
    padding: 30px 22px;
    background:
      linear-gradient(180deg, rgba(4, 15, 29, 0.72), rgba(4, 15, 29, 0.42)),
      url('/images/ujs-campus-main.jpg') center / cover no-repeat;
  }

  .auth-panel-inner {
    max-width: 430px;
    padding: 27px 25px;
    border: 1px solid rgba(255, 255, 255, 0.62);
    border-radius: 18px;
    background: #fffdf8;
    box-shadow: 0 28px 70px rgba(4, 14, 25, 0.26);
  }

  .auth-mobile-brand {
    display: flex;
    margin-bottom: 20px;
  }

  .auth-photo-credit {
    max-width: 280px;
    margin-right: auto;
    margin-left: auto;
    color: rgba(255, 255, 255, 0.72);
  }
}

@media (max-width: 520px) {
  .auth-panel {
    padding: 18px 14px;
  }

  .auth-panel-inner {
    padding: 22px 18px;
    border-radius: 15px;
  }

  .auth-heading h2 {
    font-size: 26px;
  }

  .auth-heading {
    margin: 23px 0 18px;
  }

  .auth-photo-credit {
    color: rgba(255, 255, 255, 0.68);
    font-size: 8px;
  }
}

/* Star atlas · a little blue in the night */
.star-atlas {
  border-color: #1b2a3c;
  background: #08111d;
}

.star-atlas-head {
  background:
    radial-gradient(ellipse at 82% 0%, rgba(42, 104, 161, 0.16), transparent 62%),
    #08111d;
}

.star-atlas-toolbar {
  border-top-color: #1c2b3c;
  border-bottom-color: #1c2b3c;
}

.star-canvas-frame {
  background:
    radial-gradient(circle at 16% 22%, rgba(255, 255, 255, 0.58) 0 1px, transparent 1.6px),
    radial-gradient(circle at 73% 34%, rgba(151, 207, 255, 0.52) 0 1px, transparent 1.6px),
    radial-gradient(circle at 38% 78%, rgba(255, 255, 255, 0.36) 0 1px, transparent 1.4px),
    radial-gradient(ellipse at 72% 20%, rgba(47, 121, 168, 0.22), transparent 46%),
    radial-gradient(ellipse at 20% 84%, rgba(29, 75, 121, 0.2), transparent 44%),
    #07101c;
  background-size: 220px 190px, 280px 240px, 160px 210px, auto, auto, auto;
  box-shadow: inset 0 0 90px rgba(3, 12, 24, 0.55);
}

#constellation-canvas {
  position: relative;
  z-index: 1;
}

.star-canvas-hint,
.star-zoom-controls {
  z-index: 3;
}

.star-canvas-hint {
  color: rgba(210, 230, 250, 0.56);
}

.star-zoom-controls {
  border-color: #233448;
  background: rgba(7, 17, 30, 0.72);
}

.star-zoom-controls button {
  color: #9dbbd5;
}

.star-zoom-controls button:hover {
  background: #112338;
  color: #fff;
}

.star-directory {
  z-index: 4;
  border-color: #24374b;
  background: #0b1725;
}

.star-inspector {
  border-left-color: #1c2b3c;
  background:
    radial-gradient(ellipse at 80% 0%, rgba(36, 86, 132, 0.14), transparent 48%),
    #0a1420;
}

.star-atlas-foot {
  border-top-color: #1b2a3c;
  background: #08111d;
}

.star-atlas-note {
  color: rgba(177, 198, 219, 0.62);
}

.star-canvas-frame:fullscreen,
.star-canvas-frame.is-pseudo-fullscreen {
  width: 100vw;
  height: 100vh;
  border-radius: 0;
  background-color: #07101c;
}

.star-canvas-frame.is-pseudo-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.star-canvas-frame:fullscreen #constellation-canvas,
.star-canvas-frame.is-pseudo-fullscreen #constellation-canvas {
  width: 100%;
  height: 100%;
}

.star-canvas-frame:fullscreen .star-name-label,
.star-canvas-frame.is-pseudo-fullscreen .star-name-label {
  font-size: 13px;
}

.star-canvas-frame:fullscreen .star-canvas-hint,
.star-canvas-frame.is-pseudo-fullscreen .star-canvas-hint {
  bottom: 20px;
  left: 22px;
  color: rgba(220, 237, 255, 0.72);
}

.star-canvas-frame:fullscreen .star-zoom-controls,
.star-canvas-frame.is-pseudo-fullscreen .star-zoom-controls {
  right: 22px;
  bottom: 18px;
}

body.star-fullscreen-open {
  overflow: hidden;
}

/* The shared night reset intentionally strips decorative images; the campus
   photograph is a real content image and needs to survive inside auth. */
.auth-story {
  background:
    linear-gradient(180deg, rgba(4, 15, 29, 0.78), rgba(4, 15, 29, 0.34) 48%, rgba(4, 15, 29, 0.78)),
    url('/images/ujs-campus-main.jpg') center / cover no-repeat !important;
}

@media (max-width: 980px) {
  .auth-panel {
    background:
      linear-gradient(180deg, rgba(4, 15, 29, 0.72), rgba(4, 15, 29, 0.42)),
      url('/images/ujs-campus-main.jpg') center / cover no-repeat !important;
  }
}

/* Auth pass · measured with the design inspector */
.auth-story {
  background-color: #2a5877 !important;
  background-image: url('/images/ujs-campus-main.jpg') !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-blend-mode: multiply;
}

.auth-mobile-title {
  display: none;
}

.auth-tab.is-active {
  box-shadow: none;
}

.demo-entry:hover {
  box-shadow: none;
}

.auth-panel-inner {
  box-shadow: none;
}

.auth-beta,
.auth-copy .eyebrow,
.auth-story .brand-text small,
.auth-tags span,
.auth-story-foot,
.auth-heading .eyebrow,
.auth-demo-hint,
.auth-demo-hint code,
.auth-admin-hint,
.auth-admin-hint code,
.auth-ai-hint,
.auth-ai-hint code,
.auth-divider,
.auth-terms,
.auth-device-mode,
.auth-device-detected,
.auth-device-switch,
.auth-photo-credit {
  font-size: 11px;
}

.auth-story-foot,
.auth-beta {
  color: rgba(255, 255, 255, 0.72);
}

.auth-demo-hint,
.auth-admin-hint,
.auth-ai-hint,
.auth-divider,
.auth-terms,
.auth-device-detected,
.auth-photo-credit {
  color: #6f665b;
}

.auth-photo-credit {
  text-decoration-color: #a99f92;
}

.auth-admin-hint {
  color: #6e5732;
}

.auth-ai-hint {
  color: #246459;
}

.auth-admin-hint code,
.auth-ai-hint code,
.auth-demo-hint code {
  color: #3d342a;
}

/* Hidden legacy collage cards still carry text nodes for the inspector. */
.auth-photo-card span,
.auth-photo-card strong,
.auth-note-kicker,
.auth-note-card p,
.auth-sticker > span,
.auth-sticker > small,
.auth-people-card > span:last-child,
.auth-people-card strong {
  font-size: 11px;
}

@media (max-width: 980px) {
  .auth-panel {
    background-color: #2a5877 !important;
    background-image: url('/images/ujs-campus-main.jpg') !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-blend-mode: multiply;
  }

  .auth-panel-inner {
    box-shadow: none;
  }

  .auth-mobile-title {
    display: block;
    margin: 0 0 20px;
    color: #191512;
    font-size: 25px;
    font-weight: 650;
    letter-spacing: -0.055em;
    line-height: 1.2;
  }

  .auth-photo-credit {
    color: #6f665b;
  }
}

@media (max-width: 520px) {
  .auth-mobile-title {
    font-size: 22px;
  }

  .auth-panel-inner {
    max-height: none;
  }
}

/* One semantic screen title lives in the form card; the photo side keeps a
   display headline so mobile never inherits a hidden first h1. */
.auth-copy .auth-story-headline {
  display: block;
  margin: 17px 0 15px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(42px, 5vw, 58px);
  font-weight: 600;
  letter-spacing: -0.065em;
  line-height: 1.06;
}

.auth-copy .auth-story-headline em {
  color: #a8d8ff;
  font-style: normal;
}

.auth-heading h1 {
  margin: 0;
  color: #191512;
  font-size: 28px;
  font-weight: 650;
  letter-spacing: -0.055em;
  line-height: 1.25;
}

@media (max-width: 1200px) and (min-width: 981px) {
  .auth-copy .auth-story-headline {
    font-size: clamp(40px, 5vw, 55px);
  }
}

@media (max-width: 520px) {
  .auth-heading h1 {
    font-size: 26px;
  }
}

/* The shared night reset strips background images; the atlas starfield is the
   one place where a few points of light are part of the content, not ornament. */
.star-canvas-frame {
  background-color: #07101c !important;
  background-image:
    radial-gradient(circle at 16% 22%, rgba(255, 255, 255, 0.62) 0 1px, transparent 1.7px),
    radial-gradient(circle at 73% 34%, rgba(151, 207, 255, 0.56) 0 1px, transparent 1.7px),
    radial-gradient(circle at 38% 78%, rgba(255, 255, 255, 0.38) 0 1px, transparent 1.5px),
    radial-gradient(ellipse at 72% 20%, rgba(47, 121, 168, 0.24), transparent 46%),
    radial-gradient(ellipse at 20% 84%, rgba(29, 75, 121, 0.22), transparent 44%) !important;
  background-size: 220px 190px, 280px 240px, 160px 210px, auto, auto !important;
}

/* The form side is true white, not yellow-cream. */
.auth-page {
  background: #f3f2ef;
}

.auth-panel {
  background: #ffffff;
}

.auth-tabs {
  border-color: #e2ded6;
  background: #f1efea;
}

.auth-tab.is-active {
  background: #ffffff;
}

.auth-panel .input-wrap,
.auth-panel .select-wrap,
.auth-panel select option,
.demo-entry {
  background: #ffffff;
}

.auth-panel .input-wrap:focus-within,
.auth-panel .select-wrap:focus-within {
  background: #ffffff;
}

.auth-demo-hint code {
  background: #f2f0eb;
}

.auth-admin-hint {
  border-color: #e7ddcd;
  background: #faf5eb;
}

.auth-ai-hint {
  border-color: #d9e7e0;
  background: #f2f8f4;
}

@media (max-width: 980px) {
  .auth-panel-inner {
    background: #ffffff;
  }
}

/* Auth microcopy: readable at a glance, not a legal footnote. */
.auth-heading p {
  font-size: 13px;
}

.auth-tab {
  font-size: 13px;
}

.auth-panel .form-field label {
  font-size: 12.5px;
}

.auth-demo-hint,
.auth-terms,
.auth-device-mode,
.auth-device-detected,
.auth-device-switch,
.auth-photo-credit {
  font-size: 11.5px;
}

.auth-admin-hint,
.auth-ai-hint {
  font-size: 11.5px;
}

.auth-admin-hint code,
.auth-ai-hint code,
.auth-demo-hint code {
  font-size: 11.5px;
}

.auth-tags span,
.auth-story-foot {
  font-size: 11.5px;
}