:root {
  --bg:            #F7F7F7;
  --surface:       #FFFFFF;
  --surface-2:     #FAFAFA;
  --surface-muted: #F7F7F7;

  --text:   #0D0D0D;
  --text-2: rgba(13, 13, 13, 0.72);
  --text-3: #8A8A8A;
  --text-4: #C4C4C4;

  --sep:        rgba(0, 0, 0, 0.08);
  --sep-opaque: #E0E0E0;

  --fill:   rgba(0, 0, 0, 0.05);
  --fill-2: rgba(0, 0, 0, 0.03);

  --blue:      #007AFF;
  --blue-dark: #0055CC;
  --blue-soft: rgba(0, 122, 255, 0.09);

  --red:    #FF3B30;
  --orange: #FF9500;
  --green:  #34C759;

  /* Legacy compat aliases */
  --bg-primary:     var(--bg);
  --surface-solid:  var(--surface);
  --text-primary:   var(--text);
  --text-secondary: var(--text-3);
  --border:         var(--sep);
  --accent:         var(--blue);
  --accent-strong:  var(--blue-dark);
  --accent-soft:    var(--blue-soft);
  --danger:         var(--red);
  --warning:        var(--orange);
  --success:        var(--green);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg: 0 20px 52px rgba(0,0,0,0.10), 0 8px 18px rgba(0,0,0,0.06);

  --sh-xs: 0 1px 2px rgba(0,0,0,0.06), 0 1px 1px rgba(0,0,0,0.04);
  --sh-sm: 0 2px 8px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --sh-md: 0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --sh-lg: 0 16px 48px rgba(0,0,0,0.09), 0 6px 16px rgba(0,0,0,0.05);
  --sh-xl: 0 32px 72px rgba(0,0,0,0.11), 0 12px 28px rgba(0,0,0,0.06);

  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;

  --topbar-h:     52px;
  --sidebar-w:    212px;
  --bottom-nav-h: 58px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Helvetica Neue", Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #000000;
    --surface:       #111111;
    --surface-2:     #1A1A1A;
    --surface-muted: #111111;

    --text:   #F5F5F5;
    --text-2: rgba(245, 245, 245, 0.75);
    --text-3: #6E6E6E;
    --text-4: #333333;

    --sep:        rgba(255, 255, 255, 0.08);
    --sep-opaque: #282828;

    --fill:   rgba(255, 255, 255, 0.06);
    --fill-2: rgba(255, 255, 255, 0.03);

    --blue:      #0A84FF;
    --blue-dark: #409CFF;
    --blue-soft: rgba(10, 132, 255, 0.14);

    --red:    #FF453A;
    --orange: #FF9F0A;
    --green:  #30D158;

    --sh-xs: 0 1px 2px rgba(0,0,0,0.45);
    --sh-sm: 0 2px 8px rgba(0,0,0,0.48), 0 1px 2px rgba(0,0,0,0.32);
    --sh-md: 0 4px 16px rgba(0,0,0,0.50), 0 2px 6px rgba(0,0,0,0.32);
    --sh-lg: 0 16px 48px rgba(0,0,0,0.58), 0 6px 16px rgba(0,0,0,0.36);
    --sh-xl: 0 32px 72px rgba(0,0,0,0.65), 0 12px 28px rgba(0,0,0,0.40);
  }
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; text-decoration: none; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

/* ── Utilities ── */
.small  { font-size: 0.82rem; }
.muted  { color: var(--text-3); }
.row    { display: flex; align-items: center; gap: 8px; }
.row.wrap { flex-wrap: wrap; }
.spread { justify-content: space-between; }
.stack  { display: grid; gap: 10px; }

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 760px) {
  .grid-2 { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────
   FULL-SCREEN LOADING
   ───────────────────────────────────── */
.splash-loader {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  background: #ffffff;
  z-index: 9999;
}

.splash-logo {
  width: min(40vw, 160px);
  height: auto;
  display: block;
  animation: splash-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes splash-pop {
  from { opacity: 0; transform: scale(0.72); }
  to   { opacity: 1; transform: scale(1); }
}

/* ─────────────────────────────────────
   AUTH PAGE
   ───────────────────────────────────── */
.auth-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px 48px;
  background: var(--bg);
}

.auth-hero {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.auth-appstore-card {
  width: 100%;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--sep);
  border-radius: 18px;
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--sh-md);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  animation: auth-card-in 0.42s var(--ease-out) both;
}

.auth-appstore-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  flex: 0 0 auto;
}

.auth-appstore-copy {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.2;
}

.auth-appstore-copy strong {
  font-size: 0.94rem;
  font-weight: 700;
}

.auth-appstore-copy span {
  color: var(--text-3);
  font-size: 0.8rem;
}

.auth-appstore-pill {
  flex: 0 0 auto;
  min-width: 52px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  text-align: center;
  font-size: 0.84rem;
  font-weight: 700;
}

@supports (-webkit-touch-callout: none) {
  .auth-appstore-card { display: flex; }
}

@keyframes auth-card-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.auth-app-icon {
  width: 86px;
  height: 86px;
  border-radius: 20px;
  box-shadow: var(--sh-xl);
}

.auth-headline {
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.045em;
  color: var(--text);
  margin: 0;
}

.auth-tagline {
  font-size: 1rem;
  color: var(--text-3);
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.4;
}

.auth-card {
  width: 100%;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--sh-lg);
  overflow: hidden;
  border: 1px solid var(--sep);
}

.auth-card-section {
  padding: 20px;
  border-bottom: 1px solid var(--sep);
}
.auth-card-section:last-child {
  border-bottom: none;
}

.btn-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 12px 18px;
  border-radius: 10px;
  font-family: var(--font);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.12s;
  border: none;
}
.btn-social:active { opacity: 0.75; transform: scale(0.98); }

.btn-apple {
  background: var(--text);
  color: var(--bg);
}
.btn-google {
  background: var(--fill);
  color: var(--text);
  border: 1px solid var(--sep) !important;
}
.btn-google:hover { background: rgba(120,120,128,0.18); }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-3);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sep);
}

.auth-input-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.auth-input-group input {
  width: 100%;
  border: 1px solid var(--sep);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  padding: 13px 14px;
  font-size: 0.97rem;
  font-family: var(--font);
  outline: none;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
}
.auth-input-group input:focus {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--blue) 64%, var(--sep));
  box-shadow: 0 0 0 4px var(--blue-soft);
}

.auth-input-group input:-webkit-autofill,
.auth-input-group input:-webkit-autofill:hover,
.auth-input-group input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  box-shadow: 0 0 0 1000px var(--surface) inset, 0 0 0 1px var(--sep);
  transition: background-color 9999s ease-in-out 0s;
}

@media (prefers-color-scheme: dark) {
  .auth-input-group input {
    background: #1C1C1E;
    border-color: rgba(255,255,255,0.16);
  }

  .auth-input-group input:focus {
    background: #1C1C1E;
  }

  .auth-input-group input:-webkit-autofill,
  .auth-input-group input:-webkit-autofill:hover,
  .auth-input-group input:-webkit-autofill:focus {
    -webkit-text-fill-color: #FFFFFF;
    box-shadow: 0 0 0 1000px #1C1C1E inset, 0 0 0 1px rgba(255,255,255,0.16);
  }
}

.auth-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}

.btn-link {
  background: none;
  border: none;
  color: var(--blue);
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 2px;
  transition: opacity 0.15s;
}
.btn-link:hover { opacity: 0.7; }

.auth-legal {
  font-size: 0.76rem;
  color: var(--text-3);
  text-align: center;
  line-height: 1.6;
  max-width: 340px;
}
.auth-legal a { color: var(--blue); }

/* ─────────────────────────────────────
   APP SHELL
   ───────────────────────────────────── */

#app {
  width: 100%;
  max-width: none;
  margin: 0;
}

.app-frame {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(253, 253, 253, 0.90);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--sep);
  display: flex;
  align-items: center;
}
@media (prefers-color-scheme: dark) {
  .topbar { background: rgba(10, 10, 10, 0.90); }
}

.topbar-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}

.topbar-icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  box-shadow: var(--sh-xs);
}

.topbar-title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ios-install-banner {
  position: sticky;
  top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
  z-index: 35;
  width: min(100% - 24px, 720px);
  margin: 10px auto 0;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(253,253,253,0.92);
  border: 1px solid var(--sep);
  box-shadow: var(--sh-md);
  color: var(--text);
  text-decoration: none;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.ios-install-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  flex: 0 0 auto;
}

.ios-install-copy {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 1px;
  line-height: 1.2;
}

.ios-install-copy strong {
  font-size: 0.91rem;
  font-weight: 700;
}

.ios-install-copy span {
  color: var(--text-3);
  font-size: 0.78rem;
}

.ios-install-pill {
  flex: 0 0 auto;
  min-width: 50px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
}

@media (prefers-color-scheme: dark) {
  .ios-install-banner {
    background: rgba(28,28,30,0.94);
    border-color: rgba(255,255,255,0.12);
  }
}

.author-link {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.author-link:hover {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.user-pill {
  appearance: none;
  border: 0;
  padding: 5px 11px;
  background: var(--fill);
  border-radius: 999px;
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  letter-spacing: -0.01em;
}

.user-pill-rich {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px 4px 4px;
}

.user-pill-avatar {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 999px;
  object-fit: cover;
  background: var(--fill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
}

.topbar-signout {
  background: none;
  border: none;
  font-family: var(--font);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--blue);
  cursor: pointer;
  padding: 5px 4px;
  border-radius: 6px;
  transition: opacity 0.15s;
}
.topbar-signout:hover { opacity: 0.7; }

.app-body {
  flex: 1;
  display: flex;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  padding: 16px 14px 16px 0;
  position: sticky;
  top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
  height: calc(100dvh - var(--topbar-h) - env(safe-area-inset-top, 0px));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { display: none; }

.sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-item a,
.sidebar-item button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  font-family: var(--font);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-2);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
  letter-spacing: -0.01em;
  position: relative;
}
.sidebar-item a:hover,
.sidebar-item button:hover {
  background: var(--fill);
  color: var(--text);
}
.sidebar-item.active a,
.sidebar-item.active button {
  background: var(--fill);
  color: var(--text);
  font-weight: 600;
}

.sidebar-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.75;
}
.sidebar-item.active .sidebar-icon { opacity: 1; }

.sidebar-badge {
  margin-left: auto;
  background: var(--red);
  color: white;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 1px 6px;
  min-width: 18px;
  text-align: center;
}

.main-content {
  flex: 1;
  min-width: 0;
  padding: 0;
  max-width: 640px;
  background: var(--surface);
  border-left: 1px solid var(--sep);
  border-right: 1px solid var(--sep);
  padding-bottom: 60px;
}

.right-rail {
  width: 272px;
  flex: 0 0 272px;
  padding: 16px 0 60px 20px;
  position: sticky;
  top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
  align-self: flex-start;
  max-height: calc(100dvh - var(--topbar-h) - env(safe-area-inset-top, 0px));
  overflow-y: auto;
  scrollbar-width: none;
}
.right-rail::-webkit-scrollbar { display: none; }

.rail-card {
  background: var(--surface);
  border: 1px solid var(--sep);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 10px;
}

.rail-card h3 {
  margin: 0;
  font-size: 0.98rem;
  letter-spacing: -0.02em;
}

.rail-card p {
  margin-top: 8px;
  color: var(--text-3);
  font-size: 0.86rem;
  line-height: 1.45;
}

.rail-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.rail-card-header span,
.rail-card-header a,
.rail-link {
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 700;
}

.rail-kicker {
  color: var(--text-3);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.rail-card-cta {
  background:
    linear-gradient(135deg, rgba(0,122,255,0.10), transparent 45%),
    var(--surface);
}

.rail-profile-card {
  display: grid;
  gap: 10px;
}

.rail-profile-avatar-button,
.rail-person-profile,
.rail-person-copy {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.rail-profile-avatar-button {
  width: max-content;
}

.rail-profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  object-fit: cover;
  background: var(--fill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  font-weight: 800;
}

.rail-profile-copy {
  display: grid;
  gap: 2px;
}

.rail-profile-copy strong {
  font-size: 1rem;
  letter-spacing: -0.02em;
}

.rail-profile-copy span {
  color: var(--text-3);
  font-size: 0.82rem;
}

.rail-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.rail-stats div {
  border: 1px solid var(--sep);
  border-radius: 14px;
  padding: 10px;
  background: var(--fill-2);
}

.rail-stats strong {
  display: block;
  font-size: 1.15rem;
  line-height: 1;
}

.rail-stats span {
  display: block;
  margin-top: 4px;
  color: var(--text-3);
  font-size: 0.74rem;
}

.rail-people {
  display: grid;
  gap: 10px;
}

.rail-person {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.rail-person-avatar {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  object-fit: cover;
  background: var(--fill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

.rail-person-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.rail-person-copy strong,
.rail-person-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail-person-copy strong {
  font-size: 0.88rem;
  letter-spacing: -0.01em;
}

.rail-person-copy span {
  color: var(--text-3);
  font-size: 0.76rem;
}

.rail-person-profile:hover,
.rail-person-copy:hover strong {
  color: var(--blue);
}

.rail-empty {
  color: var(--text-3);
  font-size: 0.84rem;
  line-height: 1.4;
}

.rail-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  color: var(--text-3);
  font-size: 0.76rem;
}

.rail-links a:hover {
  color: var(--blue);
}

@media (max-width: 1060px) {
  .main-content { max-width: none; }
  .right-rail { display: none; }
}

@media (max-width: 768px) {
  .app-body { padding: 0; }
  .sidebar { display: none; }
  .main-content {
    padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 16px);
    width: 100%;
    max-width: none;
    border-left: none;
    border-right: none;
  }
}

.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
  background: rgba(253, 253, 253, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--sep);
  z-index: 30;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  .bottom-nav { background: rgba(10, 10, 10, 0.94); }
}
@media (max-width: 768px) {
  .bottom-nav { display: flex; }
}

.bottom-nav-items {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: 100%;
  padding: 0 6px;
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 1;
  padding: 6px 2px;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  color: var(--text-3);
  font-family: var(--font);
  transition: color 0.13s;
  min-width: 0;
  position: relative;
}
.bottom-nav-item.active { color: var(--blue); }

.bottom-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.bottom-nav-label {
  font-size: 0.65rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  letter-spacing: -0.01em;
}

.bottom-nav-dot {
  position: absolute;
  top: 4px;
  right: 50%;
  transform: translateX(65%);
  width: 7px;
  height: 7px;
  background: var(--red);
  border-radius: 50%;
  border: 1.5px solid var(--bg);
}

/* App shell */
.app-shell {
  display: block;
  width: min(1120px, calc(100vw - 24px));
  margin: 12px auto;
}

.app-topbar {
  position: sticky;
  top: 12px;
  z-index: 35;
  margin-bottom: 10px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand img {
  width: 38px;
  height: 38px;
  border-radius: 10px;
}

.brand h1 {
  font-size: 1.02rem;
  letter-spacing: -0.035em;
}

.user-chip {
  border-radius: 12px;
  border: 1px solid var(--sep);
  background: var(--fill-2);
  padding: 8px 11px;
  min-width: 190px;
}

.user-chip strong {
  display: block;
  font-size: 0.9rem;
}

.user-chip span {
  display: block;
  margin-top: 1px;
  color: var(--text-3);
  font-size: 0.76rem;
  word-break: break-word;
}

.page-nav {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.nav-btn {
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-3);
  border-radius: 10px;
  text-align: center;
  padding: 8px 12px;
  font-weight: 600;
  font-size: 0.86rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.nav-btn:hover {
  border-color: var(--sep);
  color: var(--text);
}

.nav-btn.active {
  background: var(--blue-soft);
  border-color: rgba(0, 122, 255, 0.34);
  color: var(--blue);
}

.content {
  min-height: calc(100dvh - 130px);
}

/* ─────────────────────────────────────
   PANEL
   ───────────────────────────────────── */
.panel {
  background: var(--surface);
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--sep);
  padding: 18px 20px;
  margin-bottom: 0;
  box-shadow: none;
}

.feed-section-panel {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.feed-section-panel + .feed-section-panel {
  border-top: 1px solid var(--sep);
  padding-top: 18px;
  margin-top: 0;
}

.panel h2 {
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.panel h3 { font-size: 0.98rem; font-weight: 600; letter-spacing: -0.015em; }
.panel h4 { font-size: 0.97rem; font-weight: 600; letter-spacing: -0.01em; }

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--sep);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--sep);
}

/* ─────────────────────────────────────
   BUTTONS
   ───────────────────────────────────── */
button, .btn {
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  font-family: var(--font);
  border-radius: 8px;
  padding: 8px 13px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: transform 0.12s ease, opacity 0.15s ease, background 0.15s ease;
}
button:active, .btn:active { transform: scale(0.97); }
button:disabled, .btn:disabled { opacity: 0.38; cursor: not-allowed; }

.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); }

.btn-secondary { background: var(--fill); color: var(--text); }
.btn-secondary:hover { background: rgba(120,120,128,0.18); }

.btn-danger { background: rgba(255,59,48,0.10); color: var(--red); }
.btn-danger:hover { background: rgba(255,59,48,0.17); }

.btn-ghost { color: var(--text-3); }
.btn-ghost:hover { color: var(--text); background: var(--fill); }

.btn-sm { padding: 5px 10px; font-size: 0.8rem; border-radius: 8px; }
.btn-xs { padding: 4px 8px; font-size: 0.75rem; border-radius: 999px; }
.btn-ghost.is-active {
  color: var(--text);
  background: var(--fill);
  border-color: var(--sep);
}

.btn-icon {
  min-width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--sep);
  background: var(--fill-2);
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

.btn-icon:hover {
  background: var(--fill);
  color: var(--text);
}

/* ─────────────────────────────────────
   FORMS
   ───────────────────────────────────── */
input:not([type="checkbox"]):not([type="radio"]), textarea, select {
  width: 100%;
  border: 1px solid var(--sep);
  background: var(--surface);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.94rem;
  font-family: var(--font);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
}
input::placeholder,
textarea::placeholder {
  color: var(--text-3);
  opacity: 1;
}
textarea { min-height: 96px; resize: vertical; }
input:not([type="checkbox"]):not([type="radio"]):focus, textarea:focus, select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-soft);
}

label { font-size: 0.85rem; font-weight: 600; color: var(--text-2); }

.pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0;
}

.switch {
  position: relative;
  display: inline-flex;
  width: 44px;
  height: 28px;
  flex-shrink: 0;
}

.switch input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.switch-ui {
  width: 44px;
  height: 28px;
  border-radius: 999px;
  background: var(--fill);
  border: 1px solid var(--sep);
  transition: background 0.16s ease, border-color 0.16s ease;
  position: relative;
}

.switch-ui::after {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--sh-xs);
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.16s ease;
}

.switch input:checked + .switch-ui {
  background: var(--blue);
  border-color: var(--blue);
}

.switch input:checked + .switch-ui::after {
  transform: translateX(16px);
}

/* ─────────────────────────────────────
   TABS
   ───────────────────────────────────── */
.tabs {
  display: inline-flex;
  background: var(--fill);
  border-radius: 999px;
  padding: 3px;
}
.tabs button {
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 0.83rem;
  color: var(--text-3);
  border: none;
}
.tabs button.active {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--sh-xs);
}

/* ─────────────────────────────────────
   CARDS
   ───────────────────────────────────── */
.post-card, .community-card, .friend-card, .activity-card, .note-card {
  border: none;
  border-bottom: 1px solid var(--sep);
  border-radius: 0;
  background: var(--surface);
  padding: 16px 20px;
  margin-bottom: 0;
  transition: background 0.12s;
  position: relative;
}
.post-card::before, .community-card::before, .friend-card::before,
.activity-card::before, .note-card::before {
  content: "";
  position: absolute;
  inset: 3px 6px;
  border-radius: 10px;
  background: transparent;
  transition: background 0.14s ease;
  pointer-events: none;
}
.post-card:hover::before, .community-card:hover::before,
.friend-card:hover::before, .activity-card:hover::before,
.note-card:hover::before {
  background: var(--fill-2);
}
@media (prefers-color-scheme: dark) {
  .post-card:hover::before, .community-card:hover::before,
  .friend-card:hover::before, .activity-card:hover::before,
  .note-card:hover::before {
    background: rgba(255, 255, 255, 0.03);
  }
}

.post-card h4, .community-card h4, .friend-card h4,
.activity-card h4, .note-card h4 {
  font-size: 0.97rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.community-card {
  border-radius: 12px;
  border: 1px solid var(--sep);
  margin-bottom: 10px;
}

.community-card.selected {
  border-color: rgba(0, 122, 255, 0.40);
  box-shadow: 0 0 0 1px rgba(0, 122, 255, 0.18), var(--sh-xs);
}

.community-card.interactive:hover {
  border-color: rgba(0, 122, 255, 0.28);
  box-shadow: var(--sh-sm);
  transform: translateY(-1px);
}

.community-copy {
  min-width: 0;
  flex: 1;
}

.community-meta-badges {
  flex-shrink: 0;
  align-items: flex-start;
  gap: 6px;
}

.community-section-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 24px 0 10px;
  border-top: 1px solid var(--sep);
  margin-top: 4px;
}
.community-section-label:first-child {
  padding-top: 0;
  border-top: none;
  margin-top: 0;
}

.btn-open::after {
  content: "›";
  margin-left: 6px;
  font-weight: 700;
}

.meta { color: var(--text-3); font-size: 0.78rem; letter-spacing: -0.005em; }

.you-tag {
  color: var(--blue);
  font-weight: 700;
  margin-left: 4px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--sep);
}

.post-card-actions {
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ─────────────────────────────────────
   FRIENDS
   ───────────────────────────────────── */
.friends-root {
  display: grid;
  gap: 12px;
}

.friends-hero {
  padding: 22px 24px;
}

.friends-hero-header,
.friends-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.friends-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.friends-search-shell {
  margin-top: 0;
}

.friends-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.friends-search-input {
  flex: 1;
}

.friends-search-results {
  margin-top: 14px;
}

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

.friends-section {
  padding: 22px 24px;
}

.friends-list {
  display: grid;
  gap: 8px;
  margin-top: 0;
}

.friends-empty {
  margin-top: 0;
}

.friend-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--sep);
  border-radius: 16px;
  background: var(--surface-elevated, rgba(248, 248, 250, 0.92));
  min-width: 0;
}

.friend-row-profile {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.friend-row-profile:hover .friend-row-title {
  color: var(--blue);
}

.friend-row-default {
  background: var(--surface-elevated, rgba(248, 248, 250, 0.92));
}

.friend-row-suggested {
  background: linear-gradient(180deg, rgba(246, 249, 255, 0.92), rgba(250, 250, 252, 0.96));
}

.friend-row-pending {
  background: linear-gradient(180deg, rgba(250, 249, 244, 0.96), rgba(250, 250, 252, 0.96));
}

.friend-row-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 999px;
  object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  background: linear-gradient(180deg, rgba(233, 238, 247, 1), rgba(244, 246, 249, 1));
  border: 1px solid rgba(60, 60, 67, 0.08);
}

.friend-row-handle {
  font-size: 0.82rem;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-row-body {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 2px;
}

.friend-row-title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-row-subtitle {
  font-size: 0.86rem;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

@media (max-width: 860px) {
  .friends-grid {
    grid-template-columns: 1fr;
  }

  .friends-search-row {
    flex-direction: column;
    align-items: stretch;
  }

  .friends-search-button {
    width: 100%;
  }

  .friend-row {
    align-items: flex-start;
  }

  .friend-row-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* ─────────────────────────────────────
   COMMUNITIES
   ───────────────────────────────────── */
.cb-root,
.cd-root {
  display: grid;
  gap: 16px;
}

.cb-topbar,
.cd-header {
  border: 1px solid var(--sep);
  border-radius: 18px;
  background: var(--surface);
  padding: 20px;
  box-shadow: none;
}

.cb-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.cb-title,
.cd-community-name {
  font-size: clamp(1.3rem, 2.2vw, 1.65rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin: 0;
}

.cb-subtitle,
.cd-community-purpose {
  margin: 8px 0 0;
  color: var(--text-3);
  font-size: 0.95rem;
  line-height: 1.42;
  max-width: 36rem;
}

.cb-topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.cb-pill-btn,
.cd-chip {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 16px;
  min-height: 42px;
  border-radius: 999px;
  border: 1px solid var(--sep);
  background: rgba(248, 248, 250, 0.92);
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.cb-pill-btn svg,
.cd-chip svg {
  flex-shrink: 0;
}

.cb-pill-btn:hover,
.cd-chip:hover {
  border-color: rgba(0, 122, 255, 0.22);
  background: rgba(245, 248, 255, 0.96);
  transform: translateY(-1px);
}

.cb-pill-btn.primary {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

.co-backdrop {
  position: fixed;
  inset: 0;
  z-index: 140;
  background: rgba(15, 23, 42, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.co-sheet {
  width: min(680px, 100%);
  max-height: min(88vh, 820px);
  overflow: auto;
  border: 1px solid var(--sep);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: 0 32px 80px rgba(15, 23, 42, 0.18);
  padding: 22px 22px 24px;
}

.co-sheet-handle {
  width: 42px;
  height: 5px;
  border-radius: 999px;
  background: rgba(120, 120, 128, 0.28);
  margin: 2px auto 16px;
}

.co-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.co-sheet-header h3 {
  margin: 0;
  font-size: 1.7rem;
  letter-spacing: -0.03em;
}

.co-close {
  flex-shrink: 0;
}

.co-body {
  display: grid;
  gap: 16px;
}

.co-field {
  display: grid;
  gap: 8px;
}

.co-field label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}

.co-field-hint,
.co-join-hint {
  color: var(--text-3);
  font-size: 0.88rem;
  line-height: 1.45;
}

.co-visibility-picker {
  display: grid;
  gap: 10px;
}

.co-visibility-option {
  display: block;
}

.co-visibility-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.co-visibility-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--sep);
  border-radius: 18px;
  background: rgba(248, 248, 250, 0.88);
  padding: 14px 16px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.co-visibility-option input:checked + .co-visibility-card {
  border-color: rgba(0, 122, 255, 0.34);
  box-shadow: 0 0 0 1px rgba(0, 122, 255, 0.12);
  background: rgba(245, 248, 255, 0.96);
}

.co-vis-title {
  font-size: 0.97rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.co-vis-desc {
  margin-top: 4px;
  color: var(--text-3);
  font-size: 0.88rem;
  line-height: 1.4;
}

.co-submit {
  justify-self: flex-start;
  min-width: 188px;
}

.cb-section {
  border: 1px solid var(--sep);
  border-radius: 18px;
  background: var(--surface);
  padding: 20px;
  box-shadow: none;
}

.cb-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.cb-section-label {
  padding: 0;
  margin: 0;
  border: none;
  font-size: clamp(1.3rem, 2.2vw, 1.65rem);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.02em;
  color: var(--text);
}

.cb-section-count {
  color: var(--text-3);
  font-size: 0.95rem;
}

.cb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.cb-community-tile,
.cb-discover-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  border: 1px solid var(--sep);
  border-radius: 20px;
  background: rgba(248, 248, 250, 0.94);
  padding: 12px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.cb-community-tile:hover,
.cb-discover-item:hover {
  border-color: rgba(0, 122, 255, 0.2);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}

.cb-community-tile.active {
  border-color: rgba(0, 122, 255, 0.32);
  box-shadow: 0 0 0 1px rgba(0, 122, 255, 0.12);
}

.cb-tile-cover,
.cb-discover-cover,
.cd-cover {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
}

.cb-tile-letter {
  font-size: 1.2rem;
  font-weight: 700;
}

.cb-tile-body,
.cb-discover-body,
.cd-header-text {
  min-width: 0;
  flex: 1;
}

.cb-tile-name,
.cb-discover-name {
  font-size: 0.97rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--text);
}

.cb-tile-meta,
.cb-discover-meta {
  margin-top: 3px;
  color: var(--text-3);
  font-size: 0.88rem;
  line-height: 1.4;
}

.cb-discover-purpose {
  margin-top: 3px;
  color: var(--text-2);
  font-size: 0.88rem;
  line-height: 1.45;
}

.cb-tile-chevron,
.cb-discover-cta {
  color: var(--text-3);
  flex-shrink: 0;
}

.cb-discover-list {
  display: grid;
  gap: 12px;
}

.cb-invites-banner {
  border: 1px solid rgba(0, 122, 255, 0.18);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(245, 248, 255, 0.96), rgba(255, 255, 255, 0.98));
  padding: 18px 20px;
  display: grid;
  gap: 16px;
}

.cb-invites-banner-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cb-invite-badge {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
}

.cb-invites-title {
  font-weight: 650;
  letter-spacing: -0.02em;
}

.cb-invites-sub {
  margin-top: 2px;
  color: var(--text-3);
  font-size: 0.92rem;
}

.cb-invites-list {
  display: grid;
  gap: 10px;
}

.cb-invite-item {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--sep);
  border-radius: 18px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.9);
}

.cb-invite-cover {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
}

.cb-invite-name {
  flex: 1;
  font-weight: 600;
}

.cb-empty-state {
  border: 1px dashed var(--sep);
  border-radius: 22px;
  padding: 34px 20px;
  text-align: center;
  color: var(--text-3);
  background: var(--fill-2);
  display: grid;
  gap: 8px;
}

.cb-empty-icon {
  margin: 0 auto 2px;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: rgba(120, 120, 128, 0.08);
  display: grid;
  place-items: center;
}

.cd-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text);
  font-weight: 600;
}

.cd-header-body {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 18px;
}

.cd-header-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  align-items: center;
  justify-content: flex-start;
}

.cd-chip.private {
  background: rgba(255, 149, 0, 0.08);
  color: #b86800;
  border-color: rgba(255, 149, 0, 0.14);
}

.cd-chip.public,
.cd-chip.neutral {
  color: var(--text-3);
}

.cd-chip {
  min-height: 48px;
  padding: 0 18px;
  white-space: nowrap;
  justify-content: flex-start;
  text-align: left;
  width: fit-content;
  min-width: 0;
}

.cd-tabs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 4px;
  border-radius: 999px;
  background: var(--fill);
}

.cd-tab {
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--text-3);
  font-weight: 600;
  padding: 9px 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cd-tab.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--sh-xs);
}

.cd-tab-count {
  color: inherit;
  opacity: 0.78;
}

.cd-posts-pane,
.cd-members-pane,
.cd-settings-pane {
  display: grid;
  gap: 16px;
}

.cd-compose {
  border: 1px solid var(--sep);
  border-radius: 22px;
  background: var(--surface);
  padding: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.cd-compose-textarea {
  min-height: 140px;
}

.cd-compose-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.cd-compose-attr {
  min-width: 220px;
  flex: 1;
}

.cd-compose-publish {
  min-width: 132px;
}

.cd-feed {
  display: grid;
  gap: 12px;
}

.cd-feed-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.cd-feed-sort {
  flex-shrink: 0;
}

@media (max-width: 860px) {
  .cb-topbar,
  .cd-header {
    padding: 22px 20px;
  }

  .cb-topbar,
  .cd-header-body,
  .cd-compose-row {
    flex-direction: column;
    align-items: stretch;
  }

  .cb-topbar-actions,
  .cd-header-chips,
  .cd-feed-sort,
  .cd-compose-publish {
    width: 100%;
  }

  .cb-topbar-actions {
    flex-wrap: wrap;
  }

  .co-backdrop {
    align-items: flex-end;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .co-sheet {
    width: 100%;
    max-height: min(92vh, 860px);
    border-radius: 24px;
    padding: 18px 18px max(22px, calc(18px + env(safe-area-inset-bottom, 0px)));
  }

  .cb-pill-btn,
  .cd-chip,
  .cd-tab {
    justify-content: flex-start;
  }

  .cb-grid {
    grid-template-columns: 1fr;
  }

  .cb-community-tile,
  .cb-discover-item,
  .cb-invite-item {
    align-items: flex-start;
  }

  .post-card .row.spread {
    align-items: flex-start;
    gap: 10px;
  }

  .post-card-actions {
    width: 100%;
    justify-content: flex-start;
    margin-top: 2px;
  }
}

/* ─────────────────────────────────────
   PROMPT CHIPS
   ───────────────────────────────────── */
.topic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 760px) {
  .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.prompt-chip {
  border: 1px solid var(--sep);
  background: var(--fill-2);
  border-radius: 10px;
  padding: 9px 10px;
  font-family: var(--font);
  font-size: 0.83rem;
  text-align: left;
  cursor: pointer;
  color: var(--text-2);
  transition: background 0.14s, border-color 0.14s, color 0.14s;
}

.prompt-title {
  color: var(--text-3);
  font-weight: 500;
}

.prompt-muted {
  width: 100%;
  text-align: left;
  border: 1px solid var(--sep);
  background: var(--fill-2);
  color: var(--text-3);
  border-radius: 10px;
  padding: 10px 12px;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.prompt-muted:hover {
  background: rgba(120, 120, 128, 0.14);
  color: var(--text-2);
  border-color: rgba(0, 122, 255, 0.25);
}
.prompt-chip:hover {
  border-color: var(--blue);
  background: var(--blue-soft);
  color: var(--blue);
}

/* ─────────────────────────────────────
   EXPANDABLE TEXT
   ───────────────────────────────────── */
.expandable {
  position: relative;
  margin-top: 7px;
  font-size: 0.95rem;
  line-height: 1.58;
  letter-spacing: -0.005em;
  color: var(--text);
}
.expandable.clamped { max-height: 5em; overflow: hidden; }
.expandable.clamped::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2.4em;
  background: linear-gradient(to bottom, transparent, var(--surface));
  pointer-events: none;
}

.read-more {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--blue);
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 600;
  margin-top: 4px;
  cursor: pointer;
  letter-spacing: -0.01em;
}

/* ─────────────────────────────────────
   EMPTY STATE
   ───────────────────────────────────── */
.empty {
  border: 1px dashed var(--sep);
  border-radius: 12px;
  color: var(--text-3);
  text-align: center;
  padding: 28px 16px;
  font-size: 0.9rem;
  background: var(--fill-2);
}

.empty-with-action {
  display: grid;
  justify-items: center;
  gap: 8px;
}

.empty-with-action strong {
  color: var(--text);
}

/* ─────────────────────────────────────
   THREAD MODAL
   ───────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.44);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 10px;
}

.modal {
  width: min(700px, 100%);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  background: var(--surface);
  border-radius: 20px;
  border: 1px solid var(--sep);
  box-shadow: var(--sh-xl);
  padding: 20px;
  display: grid;
  gap: 12px;
}

.reply {
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid var(--sep);
  border-radius: 12px;
  background: var(--fill-2);
}
.reply.nested {
  margin-left: 20px;
  border-left-color: var(--blue-soft);
}

.ai-card {
  border: 1px solid var(--sep);
  border-radius: 12px;
  background: var(--fill-2);
  padding: 14px 16px;
  margin: 0 0 10px;
}

.ai-card.compact {
  margin-top: 10px;
  padding: 12px 14px;
}

.ai-card h4 {
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ai-copy {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.ai-copy div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: start;
  gap: 10px 14px;
}

.ai-copy strong {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
  min-width: 0;
  padding-top: 2px;
}

.ai-copy span {
  font-size: 0.88rem;
  color: var(--text-2);
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.45;
  text-align: left;
}

.ai-skeleton-stack {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.ai-skeleton-line,
.ai-skeleton-block {
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(120,120,128,0.12), rgba(120,120,128,0.22), rgba(120,120,128,0.12));
  background-size: 200% 100%;
  animation: ai-shimmer 1.25s linear infinite;
}

.ai-skeleton-line { height: 12px; }
.ai-skeleton-line.w72 { width: 72%; }
.ai-skeleton-line.w54 { width: 54%; }
.ai-skeleton-line.w63 { width: 63%; }
.ai-skeleton-block { height: 62px; }

.similar-thought-card,
.ai-user-card {
  width: 100%;
  border: 1px solid var(--sep);
  border-radius: 12px;
  background: var(--surface);
  padding: 12px;
  text-align: left;
  display: grid;
  gap: 6px;
  margin-top: 8px;
  transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.similar-thought-card {
  cursor: pointer;
}

.similar-thought-card:hover {
  border-color: rgba(0,122,255,0.26);
  transform: translateY(-1px);
  box-shadow: var(--sh-sm);
}

.similar-thought-card span {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--blue);
}

.similar-thought-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.similar-thought-list.compact {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.note-similar-thought-card {
  margin-top: 0;
  align-items: start;
  justify-items: start;
  text-align: left;
  padding: 14px;
}

.similar-thought-copy {
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  white-space: normal;
  overflow-wrap: anywhere;
}

.similar-thought-reason {
  margin-top: 2px;
}

.similar-thought-link {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--blue);
}

.similar-thought-feedback {
  display: flex;
  gap: 8px;
  margin: 4px 0 2px;
}

.first-session-prompt {
  padding: 12px 14px;
  border: 1px solid var(--sep);
  border-radius: 12px;
  background: var(--surface-muted);
  font-weight: 650;
  color: var(--text);
}

.instant-resonance-card {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid rgba(0, 122, 255, 0.22);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(0,122,255,0.08), var(--surface));
  box-shadow: var(--sh-sm);
}

.instant-resonance-card h3 {
  margin-top: 4px;
  font-size: 1.05rem;
  letter-spacing: 0;
}

.resonance-source {
  margin: 12px 0;
  padding: 12px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--sep);
  font-weight: 560;
  line-height: 1.4;
}

.resonance-reflection {
  margin: -4px 0 12px;
  color: var(--blue);
  font-weight: 700;
  font-size: 0.9rem;
}

.resonance-network-state {
  display: grid;
  gap: 4px;
  text-align: left;
}

.resonance-actions {
  margin-top: 12px;
  flex-wrap: wrap;
}

.resonance-proof {
  color: var(--blue);
  font-weight: 700;
}

.profile-preview-web {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--sep);
  border-radius: 16px;
  background: var(--surface-muted);
}

.profile-preview-web strong,
.profile-preview-web span,
.profile-preview-web p {
  display: block;
}

.profile-preview-web span,
.profile-preview-web p {
  color: var(--text-3);
}

.profile-preview-web p {
  margin-top: 4px;
  line-height: 1.35;
}

.profile-avatar-lg {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--sep);
}

.avatar-fallback {
  display: grid;
  place-items: center;
  background: var(--blue);
  color: #fff;
  font-weight: 800;
}

.profile-avatar-editor {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.profile-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: calc(env(safe-area-inset-top, 0px) + 20px) 18px 24px;
  background: rgba(0, 0, 0, 0.34);
  overflow-y: auto;
}

.profile-sheet {
  width: min(620px, 100%);
  min-height: min(640px, calc(100dvh - 44px));
  background: var(--surface);
  border: 1px solid var(--sep);
  border-radius: 22px;
  box-shadow: var(--sh-lg);
  overflow: hidden;
}

.profile-sheet-cover {
  height: 110px;
  background:
    linear-gradient(135deg,
      rgba(120, 120, 230, 0.18) 0%,
      rgba(80, 160, 220, 0.14) 35%,
      rgba(160, 200, 180, 0.12) 65%,
      rgba(200, 180, 140, 0.10) 100%),
    linear-gradient(180deg, rgba(250, 250, 252, 1), rgba(244, 245, 250, 1));
  border-bottom: 1px solid var(--sep);
  position: relative;
  overflow: hidden;
}

.profile-sheet-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 50%, rgba(130, 100, 255, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 30%, rgba(60, 170, 220, 0.10) 0%, transparent 50%);
  pointer-events: none;
}

@media (prefers-color-scheme: dark) {
  .profile-sheet-cover {
    background:
      linear-gradient(135deg,
        rgba(100, 90, 200, 0.22) 0%,
        rgba(50, 130, 190, 0.18) 40%,
        rgba(30, 80, 100, 0.14) 100%),
      linear-gradient(180deg, rgba(20, 20, 26, 1), rgba(18, 20, 28, 1));
  }
}

.profile-sheet-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  color: rgba(0, 0, 0, 0.55);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
  padding: 0;
}
.profile-sheet-close:hover {
  background: rgba(255, 255, 255, 0.96);
  color: rgba(0, 0, 0, 0.85);
  transform: scale(1.06);
}
.profile-sheet-close:active {
  transform: scale(0.94);
}

@media (prefers-color-scheme: dark) {
  .profile-sheet-close {
    background: rgba(30, 30, 36, 0.72);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.60);
  }
  .profile-sheet-close:hover {
    background: rgba(40, 40, 48, 0.92);
    color: rgba(255, 255, 255, 0.90);
  }
}

.profile-sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 0 18px 0 22px;
  margin-top: -36px;
  position: relative;
  z-index: 1;
  overflow: visible;
}

.profile-sheet-avatar {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  object-fit: cover;
  object-position: center;
  background: var(--fill);
  border: 3px solid var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.55rem;
  font-weight: 850;
  box-shadow: 0 7px 20px rgba(0, 0, 0, 0.11);
}

.profile-sheet-actions {
  padding-top: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.profile-sheet-copy {
  padding: 10px 22px 0;
}

.profile-sheet-copy h2 {
  margin: 0;
  font-size: 1.45rem;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.profile-sheet-handle {
  margin-top: 3px;
  color: var(--text-3);
  font-size: 0.95rem;
}

.profile-sheet-copy p {
  margin: 11px 0 0;
  color: var(--text-2);
  font-size: 0.98rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

.profile-sheet-stats {
  display: flex;
  gap: 16px;
  margin-top: 13px;
  color: var(--text-3);
  font-size: 0.9rem;
}

.profile-sheet-stats strong {
  color: var(--text);
}

.profile-sheet-tabs {
  display: flex;
  border-bottom: 1px solid var(--sep);
  margin-top: 16px;
}

.profile-sheet-tabs span {
  flex: 1;
  text-align: center;
  padding: 13px 12px;
  color: var(--text-3);
  font-weight: 700;
  border-bottom: 2px solid transparent;
}

.profile-sheet-tabs .active {
  color: var(--text);
  border-color: var(--blue);
}

.profile-sheet-posts {
  padding: 14px;
  display: grid;
  gap: 10px;
}

.profile-sheet-posts .post-card {
  border-radius: 16px;
  box-shadow: none;
}

.checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
}

.note-ai-disclosure {
  margin-top: 10px;
  border: 1px solid var(--sep);
  border-radius: 14px;
  background: var(--surface-muted);
  overflow: hidden;
}

.note-ai-disclosure[open] {
  background: var(--surface);
}

.note-ai-disclosure-summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  min-height: 60px;
  cursor: pointer;
  font-size: 0.97rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

.note-ai-disclosure-summary::-webkit-details-marker {
  display: none;
}

.note-ai-disclosure-summary::after {
  content: "›";
  color: var(--text-3);
  font-size: 1rem;
  transition: transform 0.16s ease;
  margin-left: auto;
  flex-shrink: 0;
}

.note-ai-disclosure[open] .note-ai-disclosure-summary::after {
  transform: rotate(90deg);
}

.note-ai-disclosure-meta {
  color: var(--text-3);
  font-size: 0.82rem;
  font-weight: 600;
  margin-left: auto;
}

.note-ai-card-body {
  margin-top: 0;
  border: none;
  border-top: 1px solid var(--sep);
  border-radius: 0;
  box-shadow: none;
  padding: 14px 16px 16px;
  background: transparent;
}

@media (prefers-color-scheme: dark) {
  .note-ai-disclosure {
    background: var(--surface-2);
    border-color: var(--sep-opaque);
  }

  .note-ai-disclosure[open] {
    background: var(--surface);
  }

  .note-ai-disclosure-summary {
    color: var(--text);
  }

  .note-ai-disclosure-meta,
  .note-ai-disclosure-summary::after {
    color: var(--text-3);
  }

  .note-ai-card-body {
    background: transparent;
  }
}

.ai-user-card strong {
  font-size: 0.9rem;
}

@keyframes ai-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─────────────────────────────────────
   COMMUNITIES
   ───────────────────────────────────── */
.communities-shell {
  display: grid;
  grid-template-columns: minmax(280px, 310px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.communities-sidebar {
  max-height: calc(100dvh - 180px);
  overflow-y: auto;
  padding: 22px 20px;
  background: var(--surface);
  border: 1px solid var(--sep);
  border-radius: 20px;
  box-shadow: var(--sh-sm);
}
.communities-main { min-width: 0; }

@media (max-width: 980px) {
  .communities-shell { grid-template-columns: 1fr; }
  .communities-sidebar { max-height: none; }
}

@media (max-width: 760px) {
  .app-shell {
    width: min(100vw - 14px, 1120px);
    margin: 7px auto;
  }

  .app-topbar {
    top: 8px;
  }

  .app-topbar .row.wrap {
    align-items: flex-start;
  }

  .user-chip {
    min-width: 0;
    width: auto;
  }

  .page-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
}

.page-nav::-webkit-scrollbar { display: none; }

/* ─────────────────────────────────────
   BADGE
   ───────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--fill);
  color: var(--text-3);
  font-size: 0.73rem;
  font-weight: 600;
  padding: 3px 8px;
  letter-spacing: 0.01em;
}
.badge.accent  { background: var(--blue-soft); color: var(--blue); }
.badge.success { background: rgba(52,197,89,0.12); color: var(--green); }
.badge.warning { background: rgba(255,149,0,0.12); color: var(--orange); }

/* ─────────────────────────────────────
   MISC
   ───────────────────────────────────── */
.hr { border: none; height: 1px; background: var(--sep); margin: 10px 0; }

.app-footer {
  text-align: center;
  padding: 10px 0 calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 14px);
}

@media (min-width: 769px) {
  .app-footer {
    padding-bottom: 12px;
  }
}

/* ─────────────────────────────────────
   MODAL SECTIONS (replaces nested panels)
   ───────────────────────────────────── */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--sep);
}

.modal-section {
  padding-top: 4px;
}

.modal-section + .modal-section {
  border-top: 1px solid var(--sep);
  padding-top: 16px;
}

/* ─────────────────────────────────────
   FEED PROMPT ROW
   ───────────────────────────────────── */
.feed-prompt-row {
  padding-bottom: 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--sep);
}

/* ─────────────────────────────────────
   NOTES COMPOSER
   ───────────────────────────────────── */
.notes-composer {
  padding-bottom: 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--sep);
}

/* ─────────────────────────────────────
   SETTINGS SECTIONS (replaces inline panel divs)
   ───────────────────────────────────── */
.settings-section {
  padding-top: 20px;
  margin-top: 4px;
  border-top: 1px solid var(--sep);
}

.settings-section h3 {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0;
}

.encryption-hero {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--sep);
  border-radius: 8px;
  background: var(--fill);
}

.encryption-icon {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0;
}

.encryption-icon.ready,
.encryption-pill.ready {
  color: #176C42;
  background: rgba(34, 150, 90, 0.14);
}

.encryption-icon.setup,
.encryption-pill.setup {
  color: #255FA8;
  background: rgba(64, 126, 201, 0.14);
}

.encryption-icon.locked,
.encryption-pill.locked {
  color: #9A5B12;
  background: rgba(207, 137, 43, 0.16);
}

.encryption-hero-copy {
  min-width: 0;
}

.encryption-hero-copy strong {
  display: block;
  font-size: 1rem;
  color: var(--text);
}

.encryption-hero-copy p {
  margin: 6px 0 0;
  color: var(--text-2);
  font-size: 0.9rem;
  line-height: 1.45;
}

.encryption-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0;
}

.encryption-help {
  margin-top: 10px;
  color: var(--text-2);
  font-size: 0.88rem;
  line-height: 1.45;
}

.encryption-fields {
  margin-top: 14px;
}

.encryption-toggle {
  margin-top: 12px;
}

.encryption-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.encryption-action-row .meta {
  min-width: 0;
}

.encryption-details {
  margin-top: 16px;
  border-top: 1px solid var(--sep);
  padding-top: 12px;
}

.encryption-details summary {
  cursor: pointer;
  display: grid;
  gap: 3px;
  color: var(--text);
  font-weight: 650;
}

.encryption-details summary span:last-child {
  color: var(--text-2);
  font-size: 0.84rem;
  font-weight: 500;
}

@media (max-width: 560px) {
  .encryption-hero {
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 12px;
  }

  .encryption-icon {
    width: 38px;
    height: 38px;
    font-size: 0.62rem;
  }

  .encryption-action-row {
    align-items: stretch;
    flex-direction: column;
  }
}

/* ─────────────────────────────────────
   TOAST
   ───────────────────────────────────── */
#toast-root {
  position: fixed;
  right: 16px;
  bottom: calc(var(--bottom-nav-h) + 12px);
  display: grid;
  gap: 8px;
  z-index: 120;
}
@media (min-width: 769px) { #toast-root { bottom: 20px; } }

.toast {
  background: rgba(44, 44, 50, 0.93);
  color: #FFFFFF;
  border-radius: 12px;
  padding: 11px 16px;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  box-shadow: var(--sh-lg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  max-width: 320px;
}
@media (prefers-color-scheme: dark) {
  .toast { background: rgba(58, 58, 64, 0.95); }
}

/* ─────────────────────────────────────
   AI CARDS — SUMMARY
   ───────────────────────────────────── */
.ai-summary {
  font-size: 0.94rem;
  color: var(--text);
  line-height: 1.55;
  margin: 0;
}

/* ─────────────────────────────────────
   SETTINGS — INFO NOTE
   ───────────────────────────────────── */
.setting-note {
  font-size: 0.85rem;
  color: var(--text-2);
  background: var(--fill-2);
  border: 1px solid var(--sep);
  border-radius: 10px;
  padding: 10px 12px;
  line-height: 1.55;
}

/* ─────────────────────────────────────
   FRIENDS — STATUS CHIP & MUTED SECTION
   ───────────────────────────────────── */
.friends-status-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--fill);
  color: var(--text-3);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  letter-spacing: -0.005em;
  flex-shrink: 0;
}

.friends-section-muted {
  opacity: 0.82;
}

/* ─────────────────────────────────────
   COMMUNITY DETAIL — MEMBERS TAB
   ───────────────────────────────────── */
.cd-invite-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--sep);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.cd-invite-input {
  flex: 1;
}

.cd-members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.cd-member-card {
  border: 1px solid var(--sep);
  border-radius: 18px;
  background: var(--surface);
  padding: 18px 14px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.cd-member-role-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 24px;
}

.cd-member-avatar {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  font-weight: 700;
  flex-shrink: 0;
}

.cd-member-name {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  word-break: break-all;
  line-height: 1.3;
}

.cd-member-role {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 8px;
}

.cd-member-role.owner {
  background: rgba(0, 122, 255, 0.10);
  color: var(--blue);
}

.cd-member-role.mod {
  background: rgba(52, 197, 89, 0.12);
  color: var(--green);
}

.cd-member-role.neutral {
  background: var(--fill);
  color: var(--text-3);
}

.cd-member-remove {
  margin-top: 6px;
}

@media (max-width: 860px) {
  .cd-members-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cd-invite-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .ai-copy div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ─────────────────────────────────────
   COMMUNITY SETTINGS PAGE
   ───────────────────────────────────── */
.cs-root {
  display: grid;
  gap: 18px;
}

.cs-header {
  border: 1px solid var(--sep);
  border-radius: 24px;
  background: var(--surface);
  padding: 26px 28px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cs-title {
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  margin: 0;
}

.cs-body {
  display: grid;
  gap: 16px;
}

.cs-section {
  border: 1px solid var(--sep);
  border-radius: 22px;
  background: var(--surface);
  padding: 22px 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.cs-section-title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 16px;
}

.cs-form {
  display: grid;
  gap: 14px;
}

.cs-toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: var(--fill-2);
  border-radius: 14px;
  border: 1px solid var(--sep);
  cursor: pointer;
}

.cs-toggle-row input[type="checkbox"] {
  width: 20px !important;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--blue);
}

.cs-toggle-label {
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}

.cs-toggle-desc {
  margin-top: 3px;
  font-size: 0.84rem;
  color: var(--text-3);
  line-height: 1.45;
}

.cs-danger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  background: rgba(255, 59, 48, 0.04);
  border-radius: 14px;
  border: 1px solid rgba(255, 59, 48, 0.10);
}

.cs-save {
  justify-self: flex-end;
}

@media (max-width: 860px) {
  .cs-header {
    padding: 22px 20px;
  }
  .cs-section {
    padding: 18px 16px;
  }
  .cs-danger-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ─────────────────────────────────────
   DARK MODE OVERRIDES — HARDCODED BACKGROUNDS
   ───────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .cb-pill-btn,
  .cd-chip {
    background: var(--fill);
  }

  .cb-community-tile,
  .cb-discover-item {
    background: var(--surface-2);
  }

  .cb-community-tile:hover,
  .cb-discover-item:hover {
    background: rgba(60, 60, 70, 0.9);
  }

  .cb-invites-banner {
    background: var(--surface);
    border-color: rgba(10, 132, 255, 0.22);
  }

  .cb-invite-item {
    background: var(--surface-2);
  }

  .friend-row,
  .friend-row-default {
    background: var(--surface-2);
  }

  .friend-row-suggested {
    background: linear-gradient(180deg, rgba(10, 20, 45, 0.6), rgba(28, 28, 30, 0.9));
  }

  .friend-row-pending {
    background: linear-gradient(180deg, rgba(45, 38, 20, 0.6), rgba(28, 28, 30, 0.9));
  }

  .cd-member-card {
    background: var(--surface-2);
  }

  .cd-invite-bar {
    background: var(--surface-2);
  }

  .cs-section {
    background: var(--surface-2);
  }

  .cs-header {
    background: var(--surface);
  }
}

/* ─────────────────────────────────────
   SPLASH LOADER — DARK MODE
   ───────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .splash-loader { background: #000000; }
}

/* ─────────────────────────────────────
   AUTH — BROWSE AS GUEST BUTTON
   ───────────────────────────────────── */
.auth-browse-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  color: var(--text-3);
  font-family: var(--font);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 4px;
  transition: color 0.15s;
  letter-spacing: -0.01em;
}
.auth-browse-btn:hover { color: var(--text); }

/* ─────────────────────────────────────
   TOPBAR — SIGN IN (GUEST MODE)
   ───────────────────────────────────── */
.topbar-signin-btn {
  font-size: 0.86rem;
  padding: 7px 16px;
}

/* ─────────────────────────────────────
   GUEST BANNER (FEED)
   ───────────────────────────────────── */
.guest-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--blue-soft);
  border: 1px solid rgba(0, 122, 255, 0.18);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.guest-banner-text {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.guest-banner-text strong {
  font-size: 0.95rem;
  color: var(--text);
}

.guest-banner-text span {
  font-size: 0.84rem;
  color: var(--text-2);
  line-height: 1.4;
}

/* ─────────────────────────────────────
   GUEST GATE VIEW (AUTH-REQUIRED TABS)
   ───────────────────────────────────── */
.guest-gate-panel {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.guest-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 20px;
  max-width: 340px;
}

.guest-gate-icon {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  box-shadow: var(--sh-md);
}

.guest-gate h2 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0;
}

.guest-gate p {
  font-size: 0.96rem;
  color: var(--text-3);
  line-height: 1.5;
  margin: 0;
}

.guest-gate-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}

/* ─────────────────────────────────────
   GUEST REPLY CTA (THREAD MODAL)
   ───────────────────────────────────── */
.guest-reply-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  background: var(--blue-soft);
  border: 1px solid rgba(0, 122, 255, 0.16);
  border-radius: 14px;
  flex-wrap: wrap;
}

.guest-reply-cta p {
  margin: 0;
  font-size: 0.94rem;
  color: var(--text);
  flex: 1;
  line-height: 1.4;
}

/* ─────────────────────────────────────
   MOBILE POLISH
   ───────────────────────────────────── */

/* Tighter, cleaner mobile padding */
@media (max-width: 768px) {
  .panel {
    padding: 16px;
    border-radius: 16px;
  }

  .main-content {
    padding: 16px 16px calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 24px);
  }

  .panel h2 {
    font-size: 1.25rem;
  }

  /* Feed sections: less heavy on mobile */
  .feed-section-panel + .feed-section-panel {
    padding-top: 16px;
    margin-top: 16px;
  }

  /* Guest banner full-width on small screens */
  .guest-banner {
    flex-direction: column;
    align-items: flex-start;
  }

  .guest-banner .btn-primary {
    width: 100%;
    text-align: center;
  }

  /* Bottom nav label visibility */
  .bottom-nav-label {
    font-size: 0.6rem;
  }

  /* Topbar padding */
  .topbar-inner {
    padding: 0 14px;
  }
}

/* Post card actions: overflow fix on mobile */
@media (max-width: 600px) {
  .post-card .row.spread {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .post-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }

  /* Condense redundant moderation buttons on very small screens */
  .post-card-actions .btn-ghost.btn-sm {
    font-size: 0.72rem;
    padding: 4px 8px;
  }

  /* Community compose attr on small screens */
  .cd-compose-attr {
    min-width: 0;
    width: 100%;
  }

  /* Modal full width on tiny phones */
  .modal {
    border-radius: 18px 18px 0 0;
    max-height: 92dvh;
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
  }

  .modal-backdrop {
    align-items: flex-end;
    padding: 0;
  }
}

/* ─────────────────────────────────────
   TOPBAR: Hide user pill on very small screens, show username abbreviated
   ───────────────────────────────────── */
@media (max-width: 480px) {
  .user-pill {
    max-width: 110px;
    font-size: 0.78rem;
    padding: 4px 10px;
  }

  .topbar-signout {
    font-size: 0.78rem;
  }
}

/* ─────────────────────────────────────
   FEED: Empty state CTA sizing
   ───────────────────────────────────── */
.empty-with-action .btn-primary {
  margin-top: 4px;
}

/* ─────────────────────────────────────
   PANEL HEADER: Fix duplicate rule
   ───────────────────────────────────── */
.panel-header {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--sep);
}

/* ─────────────────────────────────────
   DARK MODE: guest banner adaptation
   ───────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .guest-banner {
    background: rgba(10, 132, 255, 0.12);
    border-color: rgba(10, 132, 255, 0.22);
  }

  .guest-reply-cta {
    background: rgba(10, 132, 255, 0.12);
    border-color: rgba(10, 132, 255, 0.20);
  }
}