@font-face {
  font-family: 'Press Start 2P';
  src: url('/assets/fonts/PressStart2P-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Tilt Neon';
  src: url('/assets/fonts/TiltNeon-Regular-VariableFont_XROT,YROT.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

:root {
  --neon-green: #8eff5c;
  --neon-pink: #ff3399;
  --neon-cyan: #39fff0;
  --neon-pink-soft: #ff8acc;
  --onion-bg: #0a0a14;
  --glass-border: rgba(136, 136, 255, 0.18);
  --soft-glow-pink: 0 0 2px rgba(255, 102, 204, 0.55);
  --soft-glow-green: 0 0 3px rgba(142, 255, 92, 0.55);
  --soft-glow-cyan: 0 0 3px rgba(57, 255, 240, 0.55);
}

body {
  margin: 0;
  /* OLED-at-2am vignette: subtle radial warmth at top, cool at bottom-right */
  background:
    radial-gradient(ellipse at 50% -10%, rgba(60, 30, 80, 0.35), transparent 55%),
    radial-gradient(ellipse at 100% 110%, rgba(20, 50, 70, 0.3), transparent 55%),
    var(--onion-bg);
  background-attachment: fixed;
  font-family: 'Tilt Neon', system-ui, sans-serif;
  color: #c6fcff;
  overflow-x: hidden;
  line-height: 1.55;
  letter-spacing: 0.005em;
}

/* Default headings (used by not-found.html and any bare h1/h2). */
h1 {
  font-size: 2rem;
  color: var(--neon-green);
  text-shadow: var(--soft-glow-green);
  margin-bottom: 0.7em;
  letter-spacing: 0.04em;
  font-weight: 600;
}

h2 {
  font-size: 1.5rem;
  color: var(--neon-pink-soft);
  text-shadow: var(--soft-glow-pink);
  margin-bottom: 0.7em;
  font-weight: 600;
}

/* Scanline overlay.
   NOTE: previously used `mix-blend-mode: multiply` which is a documented
   iOS Safari compositor-failure trigger on position:fixed full-viewport
   elements (blank-white-page bug, WebKit #200856 family). Removed — the
   scanline still reads, just without the blend-into-warmth trick. */
.glitch-bg {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(10, 0, 20, 0.18),
    rgba(10, 0, 20, 0.18) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
  z-index: 1;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Ambient magenta/cyan wash. Two radial gradients pinned to opposite corners
   so the page feels like it's lit by something neon-pink off-camera. */
body::after {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 65% 45% at 12% 8%,  rgba(255, 0, 204, 0.05) 0%, transparent 70%),
    radial-gradient(ellipse 55% 35% at 88% 92%, rgba(0, 238, 255, 0.04) 0%, transparent 70%);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.onion-glow {
  color: var(--neon-pink-soft);
  text-shadow: var(--soft-glow-pink);
  font-weight: 600;
}

.brand-our {
  color: var(--neon-cyan);
  text-shadow: var(--soft-glow-cyan);
}

.onion-footer {
  text-align: center;
  padding: 4rem 2rem;
  border-top: 1px solid var(--glass-border);
  font-size: 0.9rem;
  color: #8888ff;
}


/* ============================================ */
/* so called life — algorithm-free social network UI */
/* ============================================ */

.net-header {
  position: relative;
  z-index: 4;
  border-bottom: 1px solid var(--glass-border);
  background: rgba(10, 10, 20, 0.7);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.net-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.net-brand {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.net-brand-mark {
  font-family: 'Press Start 2P', monospace;
  font-size: 1.4rem;
  color: var(--neon-green);
  text-shadow: 0 0 4px rgba(142, 255, 92, 0.55);
  letter-spacing: 0.04em;
}
.net-brand-tag {
  font-size: 0.85rem;
  color: #8888ff;
  margin-top: 0.4em;
}
.net-status {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.85rem;
  color: #8888ff;
}
.net-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--neon-green);
  box-shadow: 0 0 8px var(--neon-green);
  animation: netPulse 1.8s ease-in-out infinite;
}
@keyframes netPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.85); }
}

/* Layout */
.net-main {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
}
@media (min-width: 900px) {
  .net-main {
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
  }
}

.net-feed-col { min-width: 0; }
.net-side-col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Composer */
.composer {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 1.6rem 1.7rem;
  margin-bottom: 2.5rem;
}
.composer-row {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 0.75rem;
}
.composer-label {
  font-size: 0.85rem;
  color: #8888ff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.composer-handle {
  flex: 0 0 auto;
  width: 12em;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--glass-border);
  color: var(--neon-cyan);
  font-family: inherit;
  font-size: 1rem;
  padding: 0.4em 0.6em;
  border-radius: 4px;
  outline: none;
}
.composer-handle:focus {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 4px rgba(57, 255, 240, 0.25);
}
.composer-body {
  width: 100%;
  min-height: 7em;
  resize: vertical;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--glass-border);
  color: #c6fcff;
  font-family: inherit;
  font-size: 1.05rem;
  line-height: 1.4;
  padding: 0.75em;
  border-radius: 6px;
  outline: none;
  box-sizing: border-box;
}
.composer-body:focus {
  border-color: var(--neon-pink-soft);
  box-shadow: 0 0 5px rgba(255, 138, 204, 0.2);
}
.composer-body::placeholder { color: #6a6aa0; }

.composer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.75rem;
  gap: 1em;
  flex-wrap: wrap;
}
.composer-count {
  font-size: 0.85rem;
  color: #8888ff;
  font-variant-numeric: tabular-nums;
}
.composer-count.near { color: var(--neon-pink); }
.composer-count.over { color: #ff6666; text-shadow: 0 0 2px rgba(255, 68, 68, 0.5); }

.composer-btn {
  font-family: 'Tilt Neon', system-ui, sans-serif;
  font-size: 1rem;
  letter-spacing: 0.1em;
  font-weight: 600;
  background: transparent;
  color: var(--neon-green);
  border: 1px solid rgba(142, 255, 92, 0.7);
  padding: 0.65em 1.5em;
  border-radius: 6px;
  cursor: pointer;
  text-transform: uppercase;
  transition: 0.25s ease;
}
.composer-btn:hover {
  background: rgba(142, 255, 92, 0.08);
  border-color: var(--neon-green);
  box-shadow: 0 0 8px rgba(142, 255, 92, 0.35);
}
.composer-btn:active { transform: translateY(1px); }

.composer-fine {
  margin: 0.75rem 0 0;
  font-size: 0.8rem;
  color: #6a6aa0;
  font-style: italic;
}

/* Feed header */
.feed-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  flex-wrap: wrap;
  border-bottom: 1px dashed var(--glass-border);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}
.feed-title {
  font-family: 'Tilt Neon', system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--neon-cyan);
  text-shadow: var(--soft-glow-cyan);
  margin: 0;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.feed-sub {
  font-size: 0.8rem;
  color: #8888ff;
}

/* Feed */
.feed {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Post card — per-author accent wraps around the bottom-left corner in an
   L-shape. Top + right stay glass-subtle so the card still reads as a card,
   but the colored corner is what catches the eye. Same accent on both edges,
   so the L feels intentional, not "look at the left side only" gradient. */
.post {
  position: relative;       /* anchors .post-vis-corner top-right */
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--glass-border);
  border-left: 2px solid var(--post-accent, #000);
  border-bottom: 2px solid var(--post-accent, #000);
  border-radius: 8px;
  padding: 1.3rem 1.5rem;
  animation: postIn 0.4s ease-out;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.post:hover {
  border-left-color: var(--post-accent, #000);
  border-bottom-color: var(--post-accent, #000);
  background: rgba(255, 255, 255, 0.035);
}
.post.post-scheduled {
  /* Dashed L-shape so the owner can see at-a-glance what's queued */
  border-left-style: dashed;
  border-bottom-style: dashed;
  opacity: 0.85;
}
.post-scheduled-badge {
  font-size: 0.78em;
  color: var(--neon-cyan);
  font-style: italic;
  margin-left: 0.4em;
  cursor: help;
  letter-spacing: 0.04em;
}
/* Visibility corner — top-right of every post the owner can see, plus on any
   other post whose visibility actually overrides the author's profile default.
   The owner version is a <button> (clickable toggle); the non-owner version
   is a read-only <span>. Friends-only state intentionally has no inner
   content — the color + tooltip carries the state, so we enforce a minimum
   size so the empty pill stays clickable and visible. */
.post-vis-corner {
  position: absolute;
  top: 0.7rem;
  right: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  padding: 0.25em 0.6em;
  min-width: 1.6em;
  min-height: 1.4em;
  font-size: 0.78rem;
  font-family: inherit;
  border-radius: 4px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.02);
  color: rgba(155, 155, 219, 0.7);
  letter-spacing: 0.03em;
  line-height: 1;
}
.post-vis-corner-icon {
  font-size: 0.95em;
  opacity: 0.95;
}

/* Override states: pink for friends-only, green for forced-public. Apply to
   both <button> and <span> via shared classes. */
.post-vis-corner.is-override.post-vis-friends {
  color: var(--neon-pink-soft);
  border-color: rgba(255, 138, 204, 0.35);
  background: rgba(255, 138, 204, 0.07);
}
.post-vis-corner.is-override.post-vis-public {
  color: var(--neon-green);
  border-color: rgba(142, 255, 92, 0.35);
  background: rgba(142, 255, 92, 0.07);
}

/* Owner-only interactive variants. The default (no override) is intentionally
   quiet — a small icon in the corner that the owner can click to flip. */
.post-vis-corner.is-owner {
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.post-vis-corner.is-owner:hover {
  color: var(--neon-cyan);
  border-color: rgba(57, 255, 240, 0.45);
  background: rgba(57, 255, 240, 0.06);
}
.post-vis-corner.is-owner.is-override.post-vis-friends:hover {
  color: var(--neon-pink-soft);
  border-color: var(--neon-pink-soft);
  background: rgba(255, 138, 204, 0.12);
}
.post-vis-corner.is-owner.is-override.post-vis-public:hover {
  color: var(--neon-green);
  border-color: var(--neon-green);
  background: rgba(142, 255, 92, 0.12);
}
.post-vis-corner.is-owner:disabled {
  opacity: 0.5;
  cursor: wait;
}

@media (max-width: 480px) {
  .post-vis-corner { top: 0.55rem; right: 0.55rem; font-size: 0.68rem; padding: 0.14em 0.45em; }
}
@keyframes postIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.post-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  margin-bottom: 0.5rem;
}
.post-handle {
  font-weight: bold;
  font-size: 1rem;
}
.post-time {
  font-size: 0.8rem;
  color: #8888ff;
  font-variant-numeric: tabular-nums;
}
.post-body {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  font-size: 1.05rem;
  line-height: 1.45;
  color: #c6fcff;
}
.post-body .post-link {
  color: var(--neon-cyan);
  text-decoration: underline;
  text-decoration-style: dotted;
}
.post-body .post-mention,
.share-card-body .post-mention {
  color: var(--neon-pink-soft);
  text-decoration: none;
  font-weight: 600;
  transition: text-shadow 0.2s ease;
}
.post-body .post-mention:hover,
.share-card-body .post-mention:hover {
  text-shadow: var(--soft-glow-pink);
}

/* "(edited)" badge after the timestamp */
.post-edited-badge {
  font-size: 0.78em;
  color: #6a6aa0;
  font-style: italic;
  margin-left: 0.4em;
  cursor: help;
}

/* In-place edit form */
.post-edit-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0.4rem 0;
}
.post-edit-textarea {
  width: 100%;
  min-height: 5em;
  font-size: 1rem;
  box-sizing: border-box;
}
.post-edit-foot {
  display: flex;
  align-items: center;
  gap: 0.7em;
  flex-wrap: wrap;
}
.post-edit-count {
  font-size: 0.8rem;
  color: #8888ff;
  font-variant-numeric: tabular-nums;
  margin-right: auto;
}
.post-edit-save {
  padding: 0.5em 1.2em;
  font-size: 0.9rem;
}
.post-foot.is-editing { display: none; }

/* Block-related styles */
.post-act-quiet {
  color: #6a6aa0;
  border-color: rgba(106, 106, 160, 0.3);
}
.post-act-quiet:hover {
  color: #ff8888;
  border-color: rgba(255, 102, 102, 0.5);
  background: rgba(255, 102, 102, 0.05);
}
.profile-block-state {
  color: #ff8888;
  font-style: italic;
  margin-right: 0.5em;
}
.blocked-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.blocked-row {
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.5em 0.7em;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  border: 1px solid rgba(106, 106, 160, 0.2);
}
.blocked-handle { flex: 0 0 auto; }
.blocked-meta {
  flex: 1 1 auto;
  font-size: 0.8rem;
  color: #6a6aa0;
}

/* ============================================ */
/* Phase 1 — search, directory, new humans, rss */
/* ============================================ */

/* Search form */
.search-form {
  display: flex;
  gap: 0.6em;
  margin-bottom: 1rem;
}
.search-input {
  flex: 1 1 auto;
  font-size: 1.1rem;
}
.search-tabs {
  display: flex;
  gap: 0.5em;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 1rem;
  padding-bottom: 0.3rem;
}
.search-tab {
  padding: 0.4em 0.9em;
  border-radius: 5px;
  color: #8888ff;
  text-decoration: none;
  font-family: 'Tilt Neon', system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  border: 1px solid transparent;
  transition: 0.2s ease;
}
.search-tab:hover { color: var(--neon-cyan); border-color: rgba(57,255,240,0.25); }
.search-tab.is-active {
  color: var(--neon-green);
  border-color: rgba(142,255,92,0.4);
  text-shadow: var(--soft-glow-green);
}
.search-meta {
  font-size: 0.85rem;
  color: #8888ff;
  margin: 0 0 1rem;
}
.search-results {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.search-user-link {
  display: flex;
  align-items: center;
  gap: 0.9em;
  padding: 0.8em 1em;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--glass-border);
  border-left: 2px solid rgba(255,138,204,0.4);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: 0.25s ease;
}
.search-user-link:hover {
  background: rgba(255,255,255,0.04);
  border-left-color: var(--neon-pink-soft);
}
.search-user-meta { display: flex; flex-direction: column; gap: 0.15em; min-width: 0; }
.search-user-handle { font-weight: 600; }
.search-user-bio {
  font-size: 0.88rem;
  color: #c6fcff;
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-private-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-style: italic;
  color: #6a6aa0;
  margin-left: 0.5em;
}

/* Directory */
.directory-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.directory-card-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  padding: 1.2rem 1rem;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  text-align: center;
  transition: 0.25s ease;
  min-height: 180px;
}
.directory-card-link:hover {
  border-color: rgba(57,255,240,0.4);
  background: rgba(57,255,240,0.04);
}
.directory-handle { font-weight: 600; margin-top: 0.2em; }
.directory-bio {
  font-size: 0.85rem;
  color: #c6fcff;
  opacity: 0.85;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1 1 auto;
}
.directory-bio-empty { font-style: italic; color: #6a6aa0; }
.directory-meta {
  font-size: 0.78rem;
  color: #8888ff;
  margin-top: 0.4em;
}
.directory-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  margin: 2rem 0 1rem;
}
.directory-pager-num {
  font-size: 0.85rem;
  color: #8888ff;
  font-variant-numeric: tabular-nums;
}

/* Avatar sizes (small/medium/large for various contexts) */
.avatar-sm { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.avatar-lg { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 1px solid var(--glass-border); }

/* Sidebar user list (NEW HUMANS card) */
.side-user-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.side-user-link {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.4em 0;
  text-decoration: none;
  color: inherit;
  transition: 0.2s ease;
}
.side-user-link:hover .side-user-handle { color: var(--neon-cyan); }
.side-user-handle {
  flex: 1 1 auto;
  font-weight: 600;
  color: var(--neon-pink-soft);
}
.side-user-meta {
  font-size: 0.75rem;
  color: #8888ff;
}

/* RSS link on profile page */
.profile-rss {
  display: inline-block;
  font-size: 0.75em;
  color: #ff8844;
  border: 1px solid #ff8844;
  padding: 0.05em 0.4em;
  border-radius: 3px;
  text-decoration: none;
  margin-left: 0.3em;
  vertical-align: 1px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.profile-rss:hover {
  background: rgba(255, 136, 68, 0.1);
  text-shadow: 0 0 4px rgba(255, 136, 68, 0.5);
}
/* Profile sidebar PHOTOS card — small 3x2 grid of thumbnails, square cells,
   neon hover. Clicking a thumb routes to /p/<id>; the "see all" link drops
   the viewer into the full /u/<handle>/photos gallery. */
.profile-photo-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
}
.profile-photo-cell {
  aspect-ratio: 1 / 1;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--glass-border);
  border-radius: 5px;
  overflow: hidden;
  transition: border-color 180ms ease, transform 180ms ease;
}
.profile-photo-cell:hover {
  border-color: rgba(57, 255, 240, 0.55);
  transform: translateY(-1px);
}
.profile-photo-link {
  display: block;
  width: 100%;
  height: 100%;
}
.profile-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.post-foot {
  display: flex;
  align-items: center;
  gap: 1em;
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px dashed rgba(136, 136, 255, 0.15);
  font-size: 0.85rem;
  flex-wrap: wrap;
}
.post-act {
  background: transparent;
  border: 1px solid var(--glass-border);
  color: #9a9ad0;
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.3em 0.8em;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.25s ease;
}
.post-act:hover {
  border-color: rgba(57, 255, 240, 0.5);
  color: var(--neon-cyan);
  background: rgba(57, 255, 240, 0.05);
}
.post-note-count {
  margin-left: 0.3em;
  font-variant-numeric: tabular-nums;
  color: var(--neon-pink);
}
.post-del:hover {
  border-color: #ff4444;
  color: #ff4444;
}
.post-meta {
  margin-left: auto;
  font-size: 0.75rem;
  color: #6a6aa0;
  font-style: italic;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 2rem 1rem;
  border: 1px dashed var(--glass-border);
  border-radius: 6px;
  color: #8888ff;
}

/* Sidebar cards */
.side-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 1.3rem 1.4rem;
}
.side-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.75rem;
  color: var(--neon-green);
  text-shadow: 0 0 2px rgba(142, 255, 92, 0.5);
  margin: 0 0 0.9rem;
  letter-spacing: 0.05em;
}
.side-body {
  margin: 0;
  font-size: 0.9rem;
  color: #c6fcff;
  line-height: 1.45;
}
.side-card-danger {
  border-color: rgba(255, 68, 68, 0.35);
}
.side-card-danger .side-title {
  color: #ff8888;
  text-shadow: 0 0 2px rgba(255, 68, 68, 0.5);
}
.side-btn {
  display: block;
  width: 100%;
  margin-top: 0.75rem;
  font-family: 'Tilt Neon', system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  background: transparent;
  color: #ff8888;
  border: 1px solid rgba(255, 68, 68, 0.55);
  padding: 0.7em;
  border-radius: 6px;
  cursor: pointer;
  text-transform: uppercase;
  transition: 0.25s ease;
}
.side-btn:hover {
  background: rgba(255, 68, 68, 0.1);
  border-color: rgba(255, 68, 68, 0.8);
  box-shadow: 0 0 8px rgba(255, 68, 68, 0.3);
}

/* Stats list */
.stats {
  list-style: none;
  margin: 0;
  padding: 0;
}
.stats li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5em;
  padding: 0.4em 0;
  border-bottom: 1px dashed rgba(136, 136, 255, 0.15);
  font-size: 0.85rem;
}
.stats li:last-child { border-bottom: none; }
.stat-num {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}
.stat-lbl {
  color: #8888ff;
  text-align: right;
}

/* ============================================ */
/* so called life — auth, profile, account, banners */
/* ============================================ */

/* Nav */
.net-nav {
  display: flex;
  align-items: center;
  gap: 0.75em;
  font-size: 0.95rem;
  flex-wrap: wrap;
}
.net-nav-link, .net-nav-btn-link {
  color: var(--neon-cyan);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  padding: 0.2em 0;
  transition: 0.15s;
}
.net-nav-link:hover { border-bottom-color: var(--neon-cyan); text-shadow: 0 0 3px rgba(57, 255, 240, 0.5); }

/* Notifications nav: small green presence dot floats on the upper-right of
   the link when there's at least one unread. No number, no count chip —
   just "something's here." Disappears on the next render after the user
   visits /notifications. */
.net-nav-notif { position: relative; }
.net-nav-dot {
  position: absolute;
  top: -0.15em;
  right: -0.5em;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--neon-green);
  box-shadow: 0 0 6px rgba(142, 255, 92, 0.7);
  animation: navDotPulse 2.4s ease-in-out infinite;
}
@keyframes navDotPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.net-nav-notif.has-unread { color: var(--neon-green); }
.net-nav-btn-link {
  border: 1px solid rgba(255, 51, 153, 0.7);
  color: var(--neon-pink-soft);
  padding: 0.4em 1em;
  border-radius: 6px;
  text-transform: uppercase;
  font-family: 'Tilt Neon', system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  transition: 0.25s ease;
}
.net-nav-btn-link:hover {
  background: rgba(255, 51, 153, 0.1);
  border-color: var(--neon-pink);
  box-shadow: 0 0 8px rgba(255, 51, 153, 0.35);
}
.net-nav-form { margin: 0; display: inline; }
.net-nav-btn {
  background: transparent;
  border: 1px solid var(--glass-border);
  color: #8888ff;
  font-family: inherit;
  font-size: 0.9rem;
  padding: 0.25em 0.7em;
  border-radius: 4px;
  cursor: pointer;
  transition: 0.15s;
}
.net-nav-btn:hover { border-color: #ff6666; color: #ff6666; }

/* Verification banner */
.net-verify-banner {
  background: rgba(255, 102, 102, 0.08);
  border-top: 1px solid rgba(255, 102, 102, 0.35);
  border-bottom: 1px solid rgba(255, 102, 102, 0.35);
  color: #ff9999;
  text-align: center;
  padding: 0.6em 1em;
  font-size: 0.9rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.7em;
  flex-wrap: wrap;
}
.net-banner-btn {
  background: transparent;
  border: 1px solid #ff6666;
  color: #ff6666;
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.3em 0.8em;
  border-radius: 4px;
  cursor: pointer;
}
.net-banner-btn:hover {
  background: #ff6666;
  color: var(--onion-bg);
  box-shadow: 0 0 10px #ff6666;
}
.inline-form { display: inline; margin: 0; }

/* Flash messages */
.flash {
  max-width: 800px;
  margin: 1em auto 0;
  padding: 0.7em 1em;
  border-radius: 6px;
  font-size: 0.95rem;
  text-align: center;
  position: relative;
  z-index: 3;
}
.flash-ok   { background: rgba(142, 255, 92, 0.08); border: 1px solid rgba(142, 255, 92, 0.35); color: var(--neon-green); }
.flash-warn { background: rgba(255, 102, 102, 0.08); border: 1px solid rgba(255, 102, 102, 0.35); color: #ff9999; }
.flash-err  { background: rgba(255, 68, 68, 0.12); border: 1px solid rgba(255, 68, 68, 0.45); color: #ff4444; }

/* Narrow layout for auth / account pages */
.net-narrow {
  position: relative;
  z-index: 2;
  max-width: 560px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}
.net-page-title {
  font-family: 'Tilt Neon', system-ui, sans-serif;
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--neon-green);
  text-shadow: var(--soft-glow-green);
  margin: 0 0 0.5rem;
  text-align: center;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.net-page-sub {
  color: #8888ff;
  text-align: center;
  margin: 0 0 2rem;
  font-size: 0.95rem;
}
.net-back { margin: 0 0 1rem; font-size: 0.9rem; }

/* Forms */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 1.5rem;
}
.auth-label {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  font-size: 0.9rem;
  color: #8888ff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.auth-input {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--glass-border);
  color: var(--neon-cyan);
  font-family: inherit;
  font-size: 1rem;
  padding: 0.6em 0.8em;
  border-radius: 4px;
  outline: none;
}
.auth-input:focus {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 4px rgba(57, 255, 240, 0.25);
}
.auth-hint {
  font-size: 0.78rem;
  color: #6a6aa0;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}
.auth-submit { margin-top: 0.5rem; align-self: stretch; }
.auth-alt {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.95rem;
  color: #8888ff;
}

/* Password show/hide toggle — JS auto-wraps every input[type=password] */
.password-wrap {
    position: relative;
    display: block;
}
.password-wrap .auth-input {
    /* room so the toggle button doesn't overlap typed characters */
    padding-right: 4.2em;
}
.password-toggle {
    position: absolute;
    right: 0.4em;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 1px solid var(--glass-border);
    color: #9a9ad0;
    font-family: 'Tilt Neon', system-ui, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.35em 0.7em;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.2s ease;
}
.password-toggle:hover,
.password-toggle:focus-visible {
    color: var(--neon-cyan);
    border-color: rgba(57, 255, 240, 0.5);
    background: rgba(57, 255, 240, 0.06);
    outline: none;
}
.password-toggle[aria-pressed="true"] {
    color: var(--neon-pink-soft);
    border-color: rgba(255, 138, 204, 0.5);
}

/* Honeypot — hidden offscreen, never to actual humans. */
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none;
}

.form-error {
  background: rgba(255, 68, 68, 0.12);
  border: 1px solid rgba(255, 68, 68, 0.45);
  color: #ff6666;
  padding: 0.6em 1em;
  margin: 0 0 1rem;
  border-radius: 6px;
  font-size: 0.95rem;
}

/* Inline link style used in narrow pages and footer */
.link-inline {
  color: var(--neon-cyan);
  text-decoration: none;
  border-bottom: 1px dashed var(--neon-cyan);
  transition: text-shadow 0.25s ease;
}
.link-inline:hover { text-shadow: 0 0 3px rgba(57, 255, 240, 0.55); }

/* Composer locked state */
.composer-locked {
  text-align: center;
  color: #8888ff;
}
.composer-locked p { margin: 0 0 1rem; }
.composer-locked .composer-btn { display: inline-block; }
.composer-as {
  font-weight: bold;
  font-size: 1rem;
}

/* "Noted" state when the current user has noted a post */
.post-act.is-noted {
  border-color: var(--neon-pink);
  color: var(--neon-pink);
  background: rgba(255, 51, 153, 0.08);
}
.post-act-disabled {
  border: 1px solid var(--glass-border);
  color: #555588;
  padding: 0.25em 0.7em;
  border-radius: 4px;
  font-size: 0.85rem;
  cursor: not-allowed;
}

/* Load-more */
.feed-more {
  text-align: center;
  margin: 2rem 0 1rem;
}

/* Profile */
.profile-card {
  position: relative;
  background:
    radial-gradient(circle at 0% 0%, rgba(57, 255, 240, 0.06), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(255, 138, 204, 0.05), transparent 55%),
    rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(57, 255, 240, 0.18);
  border-left: 3px solid var(--post-accent, var(--neon-green));
  border-radius: 10px;
  padding: 1.85rem 1.9rem 1.55rem;
  margin-bottom: 2rem;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 6px 24px rgba(0, 0, 0, 0.28);
}
.profile-handle {
  font-family: 'Tilt Neon', system-ui, sans-serif;
  font-size: 2rem;
  font-weight: 600;
  margin: 0 0 0.4rem;
  color: #d8feff;
  letter-spacing: 0.05em;
  line-height: 1.15;
}
.profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.7rem;
  align-items: center;
  font-size: 0.86rem;
  color: #9c9cdb;
  margin: 0 0 0.95rem;
}
.profile-meta > .profile-meta-sep {
  color: rgba(155, 155, 219, 0.45);
  user-select: none;
}
.profile-meta-stat {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}
/* RSS link styled as a tiny badge — feels intentional, not just text. */
.profile-rss {
  display: inline-block;
  padding: 0.08em 0.5em;
  border: 1px solid rgba(255, 138, 204, 0.4);
  border-radius: 3px;
  color: var(--neon-pink, #ff8acc);
  text-decoration: none;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  transition: background 140ms ease, border-color 140ms ease;
}
.profile-rss:hover {
  background: rgba(255, 138, 204, 0.1);
  border-color: var(--neon-pink, #ff8acc);
}
.profile-bio {
  position: relative;
  margin: 0.2rem 0 0;
  padding: 0.55rem 0.85rem 0.55rem 1rem;
  color: #dcf6ff;
  font-size: 1.04rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
  border-left: 2px solid var(--post-accent, rgba(57, 255, 240, 0.45));
  background: linear-gradient(90deg, rgba(57, 255, 240, 0.04), transparent 70%);
  border-radius: 0 4px 4px 0;
}
.profile-bio-empty {
  color: #7878b8;
  font-style: italic;
  border-left-color: rgba(120, 120, 184, 0.35);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.02), transparent 70%);
}

/* Account */
.account-section {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin-top: 1.5rem;
}
.account-h2 {
  font-family: 'Tilt Neon', system-ui, sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--neon-cyan);
  text-shadow: var(--soft-glow-cyan);
  margin: 0 0 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.account-danger {
  border-color: rgba(255, 68, 68, 0.35);
}
.account-danger .account-h2 {
  color: #ff8888;
  text-shadow: 0 0 2px rgba(255, 68, 68, 0.5);
}
.account-danger code {
  background: rgba(0,0,0,0.3);
  padding: 0.1em 0.4em;
  border-radius: 3px;
  color: #ffb3d9;
}

/* Permalink post — slightly emphasized: thicker L on both sides + cyan
   default so the page subject stands out from any replies below. */
.post-permalink {
  border-left-width: 3px;
  border-bottom-width: 3px;
  border-left-color: var(--post-accent, rgba(57, 255, 240, 0.6));
  border-bottom-color: var(--post-accent, rgba(57, 255, 240, 0.6));
}

/* ============================================ */
/* v2: friends, privacy, feed tabs              */
/* ============================================ */

/* Feed tab strip — pill nav above the feed */
/* GETTING STARTED onboarding strip — appears above feed-tabs until the user
   completes all four items. No dismiss button; renders state from the user's
   actual record so it self-destructs the moment they're done. */
.onboarding-strip {
  margin: 0 0 1rem;
  padding: 0.9rem 1.1rem 1rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  border-left: 3px solid rgba(142, 255, 92, 0.5);
}
.onboarding-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.55rem;
}
.onboarding-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.7rem;
  color: var(--neon-green);
  text-shadow: 0 0 2px rgba(142, 255, 92, 0.5);
  letter-spacing: 0.05em;
  margin: 0;
}
.onboarding-progress {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: #8888ff;
  font-variant-numeric: tabular-nums;
}
.onboarding-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35em 1.1em;
}
.onboarding-item {
  display: flex;
  align-items: center;
  gap: 0.55em;
  font-size: 0.88rem;
  color: #c6fcff;
}
.onboarding-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  font-size: 0.75em;
  color: #6a6aa0;
  flex: 0 0 auto;
}
.onboarding-item.is-done .onboarding-check {
  border-color: rgba(142, 255, 92, 0.6);
  background: rgba(142, 255, 92, 0.12);
  color: var(--neon-green);
  text-shadow: 0 0 2px rgba(142, 255, 92, 0.5);
}
.onboarding-item.is-done .onboarding-text {
  color: #6a8a90;
  text-decoration: line-through;
  text-decoration-color: rgba(106, 138, 144, 0.5);
}
.onboarding-item.is-done .onboarding-text:hover {
  color: #6a8a90;
}
@media (max-width: 600px) {
  .onboarding-list { grid-template-columns: 1fr; gap: 0.4em; }
}

.feed-tabs {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 0.4rem;
}
/* Feed tabs come in three color-coded flavors so each is visible without
   the active state. Active just intensifies its own color, instead of
   recoloring every tab green like the old generic rule did. */
.feed-tab {
  font-family: 'Tilt Neon', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.5em 1.1em;
  border: 1px solid transparent;
  border-radius: 6px;
  transition: 0.25s ease;
}

/* friends → green */
.feed-tab-friends {
  color: rgba(142, 255, 92, 0.85);
  border-color: rgba(142, 255, 92, 0.35);
}
.feed-tab-friends:hover {
  color: var(--neon-green);
  border-color: var(--neon-green);
  background: rgba(142, 255, 92, 0.06);
  text-shadow: var(--soft-glow-green);
}
.feed-tab-friends.is-active {
  color: var(--neon-green);
  border-color: var(--neon-green);
  background: rgba(142, 255, 92, 0.1);
  text-shadow: var(--soft-glow-green);
}

/* everyone → cyan */
.feed-tab-everyone {
  color: rgba(57, 255, 240, 0.85);
  border-color: rgba(57, 255, 240, 0.35);
}
.feed-tab-everyone:hover {
  color: var(--neon-cyan);
  border-color: var(--neon-cyan);
  background: rgba(57, 255, 240, 0.06);
  text-shadow: var(--soft-glow-cyan);
}
.feed-tab-everyone.is-active {
  color: var(--neon-cyan);
  border-color: var(--neon-cyan);
  background: rgba(57, 255, 240, 0.1);
  text-shadow: var(--soft-glow-cyan);
}

/* post → pink. This one is an action, not a filter — same color treatment
   as the filters but the leading icon hints it opens the composer. */
.feed-tab-post {
  color: rgba(255, 138, 204, 0.85);
  border-color: rgba(255, 138, 204, 0.35);
}
.feed-tab-post .feed-tab-icon {
  margin-right: 0.3em;
  opacity: 0.85;
}
.feed-tab-post:hover {
  color: var(--neon-pink-soft);
  border-color: var(--neon-pink-soft);
  background: rgba(255, 138, 204, 0.06);
  text-shadow: var(--soft-glow-pink);
}
.feed-tab-post.is-active {
  color: var(--neon-pink-soft);
  border-color: var(--neon-pink-soft);
  background: rgba(255, 138, 204, 0.1);
  text-shadow: var(--soft-glow-pink);
}

/* Profile friend-state actions */
.profile-actions {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1.1rem;
  padding-top: 0.95rem;
  border-top: 1px dashed rgba(57, 255, 240, 0.14);
}
/* "block" sits at the right edge with a faint divider so destructive actions
   look distinct from "add friend" / "accept" — fewer accidental clicks. */
.profile-actions > [data-act="block-toggle"] {
  margin-left: auto;
  opacity: 0.7;
  font-size: 0.86rem;
}
.profile-actions > [data-act="block-toggle"]:hover { opacity: 1; }

.profile-friend-state {
  color: var(--neon-green);
  font-weight: 600;
  text-shadow: var(--soft-glow-green);
  font-size: 0.95rem;
  padding: 0.3em 0.4em;
  border-radius: 4px;
  background: rgba(142, 255, 92, 0.06);
  border: 1px solid rgba(142, 255, 92, 0.22);
}
.profile-private-badge {
  font-family: 'Tilt Neon', system-ui, sans-serif;
  font-size: 0.7em;
  color: #ff8888;
  letter-spacing: 0.08em;
  margin-left: 0.5em;
  vertical-align: middle;
}
.profile-card-private {
  border-left-color: rgba(255, 138, 204, 0.55);
}

/* "this profile is private" notice */
.profile-private-notice {
  background: rgba(255, 255, 255, 0.025);
  border: 1px dashed var(--glass-border);
  border-radius: 8px;
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: #9a9ad0;
  font-style: italic;
  margin: 1.5rem 0;
}
.profile-private-notice .onion-glow {
  font-style: normal;
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

/* Account: privacy section */
.account-explain {
  font-size: 0.9rem;
  color: #9a9ad0;
  margin: 0 0 1rem;
  line-height: 1.6;
}
.account-explain strong {
  color: var(--neon-cyan);
  font-weight: 600;
}
.privacy-toggle {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.privacy-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
  font-size: 1rem;
  color: #c6fcff;
}
.privacy-radio input[type=radio] {
  accent-color: var(--neon-green);
  cursor: pointer;
}
.privacy-status {
  font-size: 0.85rem;
  color: var(--neon-green);
  font-style: italic;
}

/* Friends page rows */
.net-narrow-wide { max-width: 720px; }

.friends-section {
  margin-top: 1.5rem;
}
.friends-empty {
  margin: 0;
  color: #8888ff;
  font-style: italic;
  font-size: 0.95rem;
}
.friend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px dashed rgba(136, 136, 255, 0.15);
  flex-wrap: wrap;
}
.friend-row:last-child { border-bottom: none; }
.friend-row-info {
  flex: 1 1 240px;
  min-width: 0;
}
.friend-row-bio {
  margin: 0.3em 0 0.2em;
  font-size: 0.9rem;
  color: #c6fcff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.friend-row-meta {
  font-size: 0.8rem;
  color: #8888ff;
  margin-left: 0.5em;
}
.friend-row-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}
.friends-btn-sm {
  font-size: 0.9rem;
  padding: 0.45em 1em;
}
/* ============================================ */
/* v3 — avatars, post images, share cards       */
/* ============================================ */

/* Avatars — round, scale by class */
.avatar {
  display: inline-block;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--glass-border);
  object-fit: cover;
  vertical-align: middle;
}
.avatar-sm { width: 24px;  height: 24px;  }
.avatar-md { width: 40px;  height: 40px;  }
.avatar-lg { width: 96px;  height: 96px;  }
.avatar-xl { width: 144px; height: 144px; }

/* Nav: avatar + handle */
.net-nav-me {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

/* Post head: avatar to the left, handle + time stacked */
.post-head {
  display: flex !important;
  align-items: center;
  gap: 0.75em;
  margin-bottom: 0.75rem;
}
.post-avatar {
  flex: 0 0 auto;
  line-height: 0;
}
.post-head-meta {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  min-width: 0;
  flex: 1;
}

/* Profile head: bigger avatar + handle/meta beside it */
.profile-head {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-bottom: 1.1rem;
}
.profile-head-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
/* Profile avatar gets an accent-color ring + soft glow so it reads as the
   focal point. Falls back to a neon-cyan ring when the user hasn't picked
   an accent color. */
.profile-head .avatar-xl {
  border: 2px solid var(--post-accent, rgba(57, 255, 240, 0.55));
  box-shadow:
    0 0 0 4px rgba(0, 0, 0, 0.45),
    0 0 18px var(--post-accent, rgba(57, 255, 240, 0.28));
  flex-shrink: 0;
}

/* Link preview card — appears below post body when the post contains a URL */
.link-preview-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  margin: 0.75rem 0 0;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--glass-border);
  border-left: 2px solid rgba(57, 255, 240, 0.5);
  text-decoration: none;
  color: inherit;
  transition: 0.25s ease;
  max-width: 100%;
}
.link-preview-card:hover {
  border-left-color: var(--neon-cyan);
  background: rgba(57, 255, 240, 0.04);
}
.link-preview-image {
  flex: 0 0 30%;
  max-width: 200px;
  min-width: 100px;
  align-self: stretch;
  object-fit: cover;
  background: rgba(0, 0, 0, 0.4);
  /* Min/max height so portrait images don't bloat card */
  max-height: 200px;
}
.link-preview-body {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  padding: 0.75rem 0.9rem;
  min-width: 0;
  flex: 1 1 auto;
}
.link-preview-site {
  font-size: 0.75rem;
  color: #8888ff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.link-preview-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--neon-cyan);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.link-preview-desc {
  font-size: 0.85rem;
  color: #c6fcff;
  opacity: 0.8;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 520px) {
  /* On narrow phones, stack image above text */
  .link-preview-card { flex-direction: column; }
  .link-preview-image {
    flex: 0 0 auto;
    max-width: 100%;
    width: 100%;
    max-height: 180px;
  }
  .link-preview-body { padding: 0.7rem 0.85rem; }
}

/* Post images */
.post-image-wrap {
  display: block;
  margin: 0.75rem 0 0;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--glass-border);
  max-width: 100%;
}
.post-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 700px;
  object-fit: contain;
}

/* Share button */
.post-share {
  border-color: rgba(255, 138, 204, 0.4);
  color: var(--neon-pink-soft);
}
.post-share:hover {
  border-color: var(--neon-pink-soft);
  background: rgba(255, 138, 204, 0.08);
}

/* Share card (quote-card embedded in a share post) */
.share-card {
  display: block;
  margin-top: 0.85rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--glass-border);
  border-left: 2px solid rgba(57, 255, 240, 0.5);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
  text-decoration: none;
  color: inherit;
  transition: 0.2s ease;
}
.share-card:hover {
  background: rgba(57, 255, 240, 0.04);
  border-left-color: var(--neon-cyan);
}
.share-card-head {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
}
.share-card-handle {
  font-weight: 700;
}
.share-card-time {
  color: #8888ff;
  margin-left: auto;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}
.share-card-body {
  font-size: 0.95rem;
  line-height: 1.45;
  color: #c6fcff;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.share-card-image {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  margin-top: 0.5rem;
  border-radius: 6px;
}
.share-card-deleted {
  margin-top: 0.75rem;
  padding: 0.8rem 1rem;
  border: 1px dashed var(--glass-border);
  border-radius: 8px;
  color: #6a6aa0;
  font-style: italic;
  text-align: center;
}
.share-card-preview {
  pointer-events: none;
  border-left-color: var(--neon-pink-soft);
}

/* Composer image picker row */
.composer-image-row {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}
.composer-attach {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.35em 0.7em;
  border: 1px dashed var(--glass-border);
  border-radius: 6px;
  cursor: pointer;
  color: #9a9ad0;
  font-size: 0.9rem;
}
.composer-attach:hover {
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
}
.composer-attach input[type=file] {
  display: none;
}
.composer-image-name {
  color: var(--neon-cyan);
  font-size: 0.85rem;
  font-style: italic;
}
.composer-alt {
  flex: 1 1 200px;
  min-width: 160px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--glass-border);
  color: #c6fcff;
  font-family: inherit;
  font-size: 0.9rem;
  padding: 0.45em 0.7em;
  border-radius: 4px;
  outline: none;
}
.composer-alt:focus {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 6px rgba(57, 255, 240, 0.25);
}

/* Avatar section in /account */
.avatar-row {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.avatar-meta {
  flex: 1 1 240px;
  min-width: 200px;
}
.avatar-meta form {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin: 0.5rem 0;
  flex-wrap: wrap;
}

/* Modal (share composer overlay) */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.modal {
  background: #0f0f1a;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 1.5rem 1.75rem;
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.6);
}
.modal-share .share-card-preview {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}
.modal-share .composer-body {
  margin-top: 0.5rem;
}
.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.75em;
  margin-top: 1rem;
}

/* Permalink page subline */
.post-permalink-meta {
  text-align: center;
  font-size: 0.85rem;
  color: #8888ff;
  margin: 0.75rem 0 0;
  font-style: italic;
}

/* Account explain text */
.account-explain {
  color: #8888ff;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0 0 1rem;
}

/* Privacy radio toggle */
.privacy-toggle {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.privacy-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.95rem;
  cursor: pointer;
}
.privacy-status {
  font-size: 0.85rem;
  color: var(--neon-green);
  margin-left: auto;
}

/* ================================================ */
/* Notifications                                      */
/* ================================================ */
.notification-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.notification-row {
    display: flex;
    gap: 0.8rem;
    padding: 0.9rem 1rem;
    background: rgba(255, 255, 255, 0.022);
    border: 1px solid var(--glass-border);
    border-left: 2px solid var(--glass-border);
    border-radius: 8px;
    align-items: flex-start;
}
.notification-row.notification-friend_request { border-left-color: var(--neon-pink-soft); }
.notification-row.notification-friend_accepted { border-left-color: var(--neon-green); }
.notification-row.notification-noted { border-left-color: var(--neon-cyan); }
.notification-row.notification-replied { border-left-color: var(--neon-cyan); }
.notification-row.notification-mentioned { border-left-color: var(--neon-pink-soft); }

.notification-avatar {
    flex-shrink: 0;
    margin-top: 0.1rem;
}
.notification-avatar-empty {
    display: inline-block;
    width: 32px; height: 32px;
    background: var(--glass-border);
    border-radius: 50%;
    opacity: 0.4;
}
.notification-body {
    flex: 1;
    min-width: 0;
}
.notification-text {
    margin: 0 0 0.2rem;
    color: #c6fcff;
    font-size: 0.96rem;
}
.notification-snippet {
    margin: 0.2rem 0;
    color: #9a9ad0;
    font-style: italic;
    font-size: 0.88rem;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notification-meta {
    margin: 0.2rem 0 0;
    font-size: 0.78rem;
    color: #8888ff;
}
.notification-foot {
    margin-top: 1.4rem;
    color: #8888ff;
    font-size: 0.85rem;
    text-align: center;
    font-style: italic;
}
.notification-actor-gone,
.notification-target-gone {
    color: #6a6aa0;
    font-style: italic;
}

/* ================================================ */
/* Replies                                            */
/* ================================================ */
.post-reply {
    color: #9a9ad0;
    text-decoration: none;
    cursor: pointer;
}
.post-reply:hover {
    border-color: rgba(57, 255, 240, 0.5);
    color: var(--neon-cyan);
    background: rgba(57, 255, 240, 0.05);
}
.replies-section {
    margin: 2rem 0 1rem;
}
.replies-head {
    font-family: 'Tilt Neon', system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--neon-cyan);
    text-shadow: var(--soft-glow-cyan);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 1rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--glass-border);
}
.reply-composer {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--glass-border);
    border-left: 2px solid rgba(57, 255, 240, 0.4);
    border-radius: 8px;
    padding: 1rem 1.2rem;
    margin: 1.4rem 0 0.4rem;
}
.reply-locked {
    margin: 1.4rem 0 0.4rem;
}
.reply-composer .composer-foot {
    margin-top: 0.6rem;
}
.reply-composer .composer-body {
    min-height: 4em;
}
.reply-locked {
    margin: 0 0 1.2rem;
    color: #8888ff;
    font-size: 0.92rem;
    padding: 0.7em 1em;
    background: rgba(255, 255, 255, 0.02);
    border-left: 2px dashed var(--glass-border);
    border-radius: 4px;
}
/* ── Threaded replies — unlimited depth, Reddit/HN-style nesting ── */
.thread-reply {
    /* Indent by nesting level, capped at 3 on desktop. --lvl is set inline per
       node by the renderer; the left gradient rail signals the thread line. */
    margin-left: calc(min(var(--lvl, 0), 3) * 24px);
    margin-bottom: 0.8rem;
    padding-left: 0.9rem;
    border-left: 2px solid transparent;
    border-image: linear-gradient(180deg, rgba(255, 138, 204, 0.55), rgba(157, 78, 221, 0.45)) 1;
}
.thread-reply > .post {
    background: rgba(255, 255, 255, 0.018);
}

/* Scroll-to-focus flash: when the viewer clicked a deep reply, app.js scrolls
   to it and adds this class briefly so they don't lose their place. */
@keyframes threadFocusFlash {
    0%   { box-shadow: 0 0 0 2px var(--neon-cyan), 0 0 22px rgba(57, 255, 240, 0.65); }
    70%  { box-shadow: 0 0 0 2px var(--neon-cyan), 0 0 22px rgba(57, 255, 240, 0.4); }
    100% { box-shadow: none; }
}
.post.post-focus-flash {
    animation: threadFocusFlash 2.4s ease-out;
    border-radius: 8px;
}

/* "↳ replying to @handle" line on reply cards (purple, like the timestamps). */
.post-replying-to {
    display: inline-block;
    margin: 0 0 0.45rem;
    font-size: 0.8rem;
    color: #b98aff;
    text-decoration: none;
    letter-spacing: 0.02em;
}
.post-replying-to:hover { text-decoration: underline; text-shadow: 0 0 8px rgba(157, 78, 221, 0.5); }

/* ── Pinch (a playful poke) ── */
.post-pinch.is-pinched {
    opacity: 0.75;
    color: var(--neon-pink-soft);
    border-color: var(--neon-pink-soft);
    cursor: default;
}
.pinch-back-btn {
    /* It carries .link-inline but is a <button> — reset the chrome so it reads
       as an inline link. */
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
}
.pinch-back-btn.is-pinched { opacity: 0.75; cursor: default; color: var(--neon-pink-soft); }
.pinch-counter-card { text-align: center; }
.pinch-counter-num {
    font-family: 'Tilt Neon', system-ui, sans-serif;
    font-size: 2.6rem;
    line-height: 1;
    margin: 0.3rem 0 0.5rem;
    color: var(--neon-pink);
    text-shadow: 0 0 14px rgba(255, 51, 153, 0.55);
}

/* ── First-reply teaser — pulls the earliest reply into the timeline ── */
.post-first-reply {
    display: block;
    margin: 0.55rem 0 0;
    padding: 0.45rem 0.7rem;
    font-size: 0.85rem;
    line-height: 1.45;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.015);
    border-left: 2px solid rgba(157, 78, 221, 0.4);
    border-radius: 0 5px 5px 0;
}
.post-first-reply:hover {
    background: rgba(255, 255, 255, 0.035);
    border-left-color: var(--neon-pink-soft);
}
.post-first-reply-handle { color: var(--neon-pink-soft); font-weight: 600; }
.post-first-reply-body   { color: #b8b8d8; }
.post-first-reply-count  { color: var(--neon-cyan); white-space: nowrap; }
.empty-state-quiet {
    padding: 1rem;
    color: #6a6aa0;
    font-style: italic;
    font-size: 0.92rem;
    background: transparent;
    border-style: dashed;
}
.reply-context {
    margin: 0.6rem 0 1.4rem;
    padding: 0.6rem 0.9rem;
    background: rgba(255, 255, 255, 0.02);
    border-left: 2px dashed rgba(57, 255, 240, 0.4);
    border-radius: 4px;
    font-size: 0.9rem;
}

/* ================================================ */
/* Legal pages (TOS / privacy / community standards) */
/* ================================================ */
.legal-section {
    margin: 2rem 0;
    padding: 1.4rem 1.5rem;
    background: rgba(255, 255, 255, 0.022);
    border: 1px solid var(--glass-border);
    border-left: 2px solid rgba(57, 255, 240, 0.45);
    border-radius: 8px;
}
.legal-section:first-of-type { margin-top: 1rem; }
.legal-h2 {
    font-family: 'Tilt Neon', system-ui, sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--neon-cyan);
    text-shadow: var(--soft-glow-cyan);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 0.8rem;
}
.legal-section p {
    margin: 0 0 0.9rem;
    line-height: 1.6;
    color: #c6fcff;
}
.legal-section p:last-child { margin-bottom: 0; }
.legal-section strong {
    color: var(--neon-pink-soft);
    font-weight: 600;
}
.legal-list {
    margin: 0.4rem 0 0.9rem 0;
    padding: 0 0 0 1.2rem;
    line-height: 1.6;
    color: #c6fcff;
}
.legal-list li { margin-bottom: 0.5rem; }
.legal-list li:last-child { margin-bottom: 0; }
.legal-section code {
    background: rgba(0, 0, 0, 0.3);
    padding: 0.1em 0.4em;
    border-radius: 3px;
    color: var(--neon-cyan);
    font-size: 0.88em;
}

/* ================================================ */
/* Footer nav (FAQ / changelog / directory / search) */
/* ================================================ */
.footer-nav {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: #8888ff;
}
.footer-link {
    color: var(--neon-cyan);
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: 0.2s ease;
}
.footer-link:hover {
    border-bottom-color: var(--neon-cyan);
    text-shadow: 0 0 3px rgba(57, 255, 240, 0.5);
}
.footer-sep {
    color: #444466;
    margin: 0 0.4em;
}

/* ================================================ */
/* Changelog                                         */
/* ================================================ */
.changelog-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.changelog-entry {
    padding: 1.4rem 1.5rem;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--glass-border);
    border-left: 3px solid var(--neon-green);
    border-radius: 8px;
}
.changelog-entry:target {
    /* When linked via #anchor */
    border-left-color: var(--neon-cyan);
    background: rgba(57, 255, 240, 0.04);
}
.changelog-head {
    display: flex;
    align-items: baseline;
    gap: 0.7em;
    margin-bottom: 0.35rem;
    flex-wrap: wrap;
}
.changelog-version {
    font-family: 'Press Start 2P', monospace;
    font-size: 1.1rem;
    text-decoration: none;
    letter-spacing: 0.04em;
}
.changelog-date {
    font-size: 0.85rem;
    color: #8888ff;
    font-variant-numeric: tabular-nums;
}
.changelog-title {
    font-family: 'Tilt Neon', system-ui, sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--neon-pink-soft);
    text-shadow: var(--soft-glow-pink);
    margin: 0 0 0.5rem;
    letter-spacing: 0.04em;
}
.changelog-summary {
    color: #c6fcff;
    opacity: 0.85;
    margin: 0 0 1rem;
    font-size: 0.95rem;
    line-height: 1.5;
}
.changelog-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.changelog-items li {
    padding-left: 1.2em;
    position: relative;
    font-size: 0.95rem;
    line-height: 1.5;
}
.changelog-items li::before {
    content: "▸";
    position: absolute;
    left: 0;
    color: var(--neon-green);
    opacity: 0.7;
}
.changelog-cat {
    color: var(--neon-cyan);
    margin-right: 0.2em;
}

/* ================================================ */
/* FAQ                                               */
/* ================================================ */
.faq-section {
    margin: 0 0 2rem;
}
.faq-section-title {
    font-family: 'Tilt Neon', system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--neon-cyan);
    text-shadow: var(--soft-glow-cyan);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 1rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--glass-border);
}
.faq-item {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    overflow: hidden;
    transition: 0.2s ease;
}
.faq-item[open] {
    border-color: rgba(57, 255, 240, 0.3);
    background: rgba(255, 255, 255, 0.035);
}
.faq-q {
    cursor: pointer;
    list-style: none;
    padding: 0.9rem 1.1rem;
    font-weight: 600;
    color: var(--neon-pink-soft);
    transition: 0.2s ease;
    position: relative;
    padding-right: 2.4rem;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
    content: "+";
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Press Start 2P', monospace;
    color: var(--neon-cyan);
    font-size: 0.85rem;
    transition: transform 0.2s ease;
}
.faq-item[open] .faq-q::after { content: "−"; }
.faq-q:hover { background: rgba(255, 138, 204, 0.04); }
.faq-a {
    padding: 0 1.1rem 1rem;
    color: #c6fcff;
    line-height: 1.55;
    font-size: 0.95rem;
}
.faq-a code {
    background: rgba(0, 0, 0, 0.3);
    padding: 0.05em 0.4em;
    border-radius: 3px;
    color: var(--neon-cyan);
    font-size: 0.85em;
}

/* In-feed poll rendering. Pre-vote: each option is a button. Post-vote /
   closed: each option is a result row with a colored bar showing percentage.
   Bars use position:absolute behind the text so the row height stays uniform. */
.post-poll {
    margin: 0.7rem 0 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    padding: 0.6rem 0.7rem;
    background: rgba(255, 138, 204, 0.04);
    border: 1px solid rgba(255, 138, 204, 0.25);
    border-radius: 7px;
}
.post-poll-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.55em 0.8em;
    background: transparent;
    border: 1px solid rgba(255, 138, 204, 0.35);
    border-radius: 5px;
    color: #c6fcff;
    text-align: left;
    font-family: inherit;
    font-size: 0.92rem;
    line-height: 1.35;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease;
    overflow: hidden;
}
button.post-poll-row:hover {
    border-color: var(--neon-pink-soft);
    background: rgba(255, 138, 204, 0.08);
}
.post-poll-row.is-result {
    cursor: default;
    background: rgba(255, 138, 204, 0.04);
}
.post-poll-bar {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 138, 204, 0.25), rgba(57, 255, 240, 0.18));
    z-index: 0;
}
.post-poll-text {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    word-wrap: break-word;
}
.post-poll-meta {
    position: relative;
    z-index: 1;
    color: var(--neon-pink-soft);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    flex: 0 0 auto;
    text-shadow: 0 0 4px rgba(255, 138, 204, 0.3);
}
.post-poll-row.is-my-pick { border-color: var(--neon-pink-soft); }
.post-poll-row.is-my-pick .post-poll-bar {
    background: linear-gradient(90deg, rgba(255, 138, 204, 0.4), rgba(57, 255, 240, 0.25));
}
.post-poll.is-closed { opacity: 0.93; }
.post-poll-foot {
    margin: 0.15rem 0 0;
    font-size: 0.75rem;
    color: #8888ff;
    font-style: italic;
}

/* Composer upload progress + error UI. The progress strip surfaces what is
   actually happening (compress → upload N% → server saving) instead of the
   old silent "preparing image…" placeholder. The error block lets the user
   retry without losing the body/image they already prepared. */
.composer-upload {
    margin: 0.7rem 0 0.2rem;
    padding: 0.7rem 0.8rem;
    background: rgba(57, 255, 240, 0.05);
    border: 1px solid rgba(57, 255, 240, 0.3);
    border-radius: 7px;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}
.composer-upload[hidden] { display: none; }
.composer-upload-head {
    display: flex;
    align-items: center;
    gap: 0.6em;
}
.composer-upload-label {
    flex: 1 1 auto;
    color: var(--neon-cyan);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
    letter-spacing: 0.03em;
    text-shadow: 0 0 4px rgba(57, 255, 240, 0.3);
}
.composer-upload-bar {
    width: 100%;
    height: 6px;
    background: rgba(57, 255, 240, 0.08);
    border-radius: 3px;
    overflow: hidden;
}
.composer-upload-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink-soft));
    box-shadow: 0 0 6px rgba(57, 255, 240, 0.4);
    transition: width 220ms ease;
}
.composer-upload-stall {
    margin: 0;
    font-size: 0.78rem;
    color: #ffb060;
    font-style: italic;
}
.composer-upload-stall[hidden] { display: none; }

.composer-error {
    margin: 0.7rem 0 0.2rem;
    padding: 0.65rem 0.85rem;
    background: rgba(255, 68, 88, 0.08);
    border: 1px solid rgba(255, 68, 88, 0.4);
    border-radius: 7px;
    display: flex;
    align-items: center;
    gap: 0.7em;
    flex-wrap: wrap;
}
.composer-error[hidden] { display: none; }
.composer-error #composer-error-text {
    flex: 1 1 auto;
    color: #ff8888;
    font-size: 0.88rem;
}
.composer-btn-sm {
    padding: 0.35em 0.85em;
    font-size: 0.85rem;
}

/* Composer poll panel. Hidden by default; the small "🗳 add poll" trigger
   in the top row reveals it. Options live in a small grid; duration is a
   single-select. Server validates on create. */
.composer-poll-row {
    margin-top: 0.6rem;
    padding: 0.8rem 0.95rem;
    background: rgba(255, 138, 204, 0.05);
    border: 1px solid rgba(255, 138, 204, 0.3);
    border-radius: 7px;
    display: flex;
    flex-direction: column;
    gap: 0.55em;
}
.composer-poll-row[hidden] { display: none; }
.composer-poll-title {
    margin: 0 0 0.2em;
    font-size: 0.8rem;
    color: var(--neon-pink-soft);
    font-family: 'Press Start 2P', monospace;
    letter-spacing: 0.05em;
}
.composer-poll-options {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
}
.composer-poll-option {
    display: flex;
    align-items: center;
    gap: 0.6em;
}
.composer-poll-option-num {
    font-family: 'JetBrains Mono', monospace;
    color: var(--neon-pink-soft);
    width: 1.2em;
    text-align: center;
    font-size: 0.85rem;
}
.composer-poll-input { flex: 1 1 auto; min-width: 0; }
.composer-poll-foot {
    display: flex;
    align-items: center;
    gap: 0.9em;
    flex-wrap: wrap;
}
.composer-poll-duration {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: 0.8rem;
    color: #8888ff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-left: auto;
}
.composer-poll-duration-select {
    background: rgba(0, 0, 0, 0.4);
    color: var(--neon-cyan);
    padding: 0.3em 0.5em;
}

/* Composer schedule row. The element-level `display:flex` here would beat the
   browser default for [hidden] (display:none) at equal specificity, so the
   `[hidden]` override below is required to keep the row truly hidden on
   first paint. Same trick on .scheduled-reschedule-row further down. */
.composer-schedule-row {
    margin-top: 0.6rem;
    padding: 0.7rem 0.8rem;
    background: rgba(57, 255, 240, 0.05);
    border: 1px solid rgba(57, 255, 240, 0.25);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 0.4em;
}
.composer-schedule-row[hidden] { display: none; }
.composer-schedule-label {
    display: flex;
    align-items: center;
    gap: 0.7em;
    font-size: 0.85rem;
    color: #8888ff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.composer-schedule-input {
    flex: 1;
    min-width: 0;
    background: rgba(0, 0, 0, 0.4);
    color: var(--neon-cyan);
}
.composer-attach.is-active {
    border-color: var(--neon-cyan);
    color: var(--neon-cyan);
    background: rgba(57, 255, 240, 0.08);
}

/* Composer draft restore — small inline hint when localStorage rehydrates
   the textarea on page load. Hidden once the user types or posts. */
.composer-draft-hint {
    margin: 0.3rem 0 0;
    font-size: 0.8rem;
    color: #8888ff;
    display: flex;
    align-items: center;
    gap: 0.5em;
}
.composer-draft-hint[hidden] { display: none; }
.composer-draft-hint-dot {
    color: var(--neon-pink-soft);
    font-size: 0.7em;
    text-shadow: 0 0 6px rgba(255, 138, 204, 0.5);
}
.composer-draft-clear {
    background: transparent;
    border: 0;
    color: var(--neon-cyan);
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    font: inherit;
    padding: 0;
}
.composer-draft-clear:hover {
    color: var(--neon-pink-soft);
}

/* Profile photo gallery — grid of thumbnails on /u/<handle>/photos.
   Square-ish tiles, slight neon hover, click opens the lightbox. */
.photo-gallery {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.6rem;
}
.photo-gallery-count {
    margin: 0.5rem 0 0;
    font-size: 0.82rem;
    color: #8888ff;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.03em;
}
.photo-tile {
    aspect-ratio: 1 / 1;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    overflow: hidden;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.photo-tile:hover {
    border-color: rgba(57, 255, 240, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 6px rgba(57, 255, 240, 0.18);
}
.photo-tile-link {
    display: block;
    width: 100%;
    height: 100%;
}
.photo-tile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Lightbox — fullscreen overlay with the larger image + a caption + nav. */
.photo-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(4, 2, 14, 0.92);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.photo-lightbox[hidden] { display: none; }
body.lightbox-open { overflow: hidden; }
.photo-lightbox-frame {
    max-width: 92vw;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
}
.photo-lightbox-img {
    max-width: 92vw;
    max-height: 80vh;
    object-fit: contain;
    border: 1px solid rgba(57, 255, 240, 0.35);
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
    background: #0a0613;
}
.photo-lightbox-caption {
    color: #c6fcff;
    font-size: 0.88rem;
    max-width: 92vw;
    text-align: center;
    line-height: 1.4;
}
.photo-lightbox-perma {
    color: var(--neon-cyan);
}
.photo-lightbox-close,
.photo-lightbox-nav {
    position: absolute;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(57, 255, 240, 0.35);
    color: var(--neon-cyan);
    font-family: inherit;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    width: 2.4rem;
    height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s ease;
}
.photo-lightbox-close:hover,
.photo-lightbox-nav:hover {
    background: rgba(57, 255, 240, 0.18);
    color: var(--neon-pink-soft);
    border-color: var(--neon-pink-soft);
}
.photo-lightbox-close { top: 1rem;    right: 1rem; }
.photo-lightbox-prev  { left: 1rem;   top: 50%; transform: translateY(-50%); }
.photo-lightbox-next  { right: 1rem;  top: 50%; transform: translateY(-50%); }

@media (max-width: 600px) {
    .photo-gallery { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.45rem; }
    .photo-lightbox-close,
    .photo-lightbox-nav { width: 2rem; height: 2rem; font-size: 1.3rem; }
    .photo-lightbox-img { max-height: 72vh; }
}

/* /account theme picker — radio grid with preview swatches per theme. */
.style-themes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.55rem;
}
.style-theme {
    display: flex;
    align-items: center;
    gap: 0.75em;
    padding: 0.7em 0.85em;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--glass-border);
    border-radius: 7px;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease;
}
.style-theme:hover { border-color: rgba(57, 255, 240, 0.4); }
.style-theme.is-current {
    border-color: var(--neon-pink-soft);
    background: rgba(255, 138, 204, 0.06);
}
.style-theme input { display: none; }
.style-theme-preview {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.style-theme-neon       .style-theme-preview { background: linear-gradient(135deg, #ff8acc, #39fff0 50%, #8eff5c); }
.style-theme-paper      .style-theme-preview { background: linear-gradient(135deg, #f4ead0, #d9c39a); }
.style-theme-terminal   .style-theme-preview { background: linear-gradient(135deg, #001000, #00ff66 80%, #001000); }
.style-theme-vaporwave  .style-theme-preview { background: linear-gradient(135deg, #ff66cc, #9966ff 50%, #33ccff); }
.style-theme-monochrome .style-theme-preview { background: linear-gradient(135deg, #fff, #888 50%, #000); }
.style-theme-sunset     .style-theme-preview { background: linear-gradient(135deg, #ffca8a, #ff7a5c 50%, #b8455e); }
.style-theme-info {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    min-width: 0;
}
.style-theme-name {
    font-family: 'Tilt Neon', system-ui, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--neon-cyan);
    font-size: 0.85rem;
}
.style-theme-blurb { color: #8888ff; font-size: 0.78rem; }

/* Theme bundles. Each [data-profile-theme=...] block is scoped to the
   profile <main> only; the header, footer, and feed pages stay default
   neon. Themes redefine CSS variables for color, plus a few targeted
   overrides where variable substitution alone wouldn't carry the look. */

/* paper — warm cream + dark serif, low-contrast. */
main[data-profile-theme="paper"] {
    background: linear-gradient(180deg, #f4ead0 0%, #ede0bc 100%);
    color: #3a2e1a;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: inset 0 0 0 1px rgba(58, 46, 26, 0.08);
}
main[data-profile-theme="paper"] .profile-card,
main[data-profile-theme="paper"] .post,
main[data-profile-theme="paper"] .side-card,
main[data-profile-theme="paper"] .top-8-grid {
    background: rgba(255, 250, 232, 0.7);
    border-color: rgba(58, 46, 26, 0.2);
    color: #3a2e1a;
}
main[data-profile-theme="paper"] .post {
    border-left-color: rgba(192, 80, 80, 0.7);
    border-bottom-color: rgba(192, 80, 80, 0.7);
}
main[data-profile-theme="paper"] .profile-handle,
main[data-profile-theme="paper"] .post-handle,
main[data-profile-theme="paper"] .onion-glow,
main[data-profile-theme="paper"] .side-title,
main[data-profile-theme="paper"] .feed-title { color: #8a3a2a; text-shadow: none; }
main[data-profile-theme="paper"] .profile-bio,
main[data-profile-theme="paper"] .profile-status,
main[data-profile-theme="paper"] .post-body,
main[data-profile-theme="paper"] .side-body { color: #3a2e1a; font-family: 'Georgia', 'Times New Roman', serif; }
main[data-profile-theme="paper"] .post-time,
main[data-profile-theme="paper"] .post-meta { color: #7a5a32; }

/* terminal — phosphor green monospace on black. */
main[data-profile-theme="terminal"] {
    background: #050a04;
    color: #4eff8a;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    border-radius: 4px;
    padding: 1.2rem;
    text-shadow: 0 0 4px rgba(78, 255, 138, 0.35);
}
main[data-profile-theme="terminal"] .profile-card,
main[data-profile-theme="terminal"] .post,
main[data-profile-theme="terminal"] .side-card,
main[data-profile-theme="terminal"] .top-8-grid {
    background: rgba(0, 30, 10, 0.5);
    border-color: rgba(78, 255, 138, 0.35);
    color: #4eff8a;
    font-family: inherit;
    border-radius: 3px;
}
main[data-profile-theme="terminal"] .post {
    border-left-color: #4eff8a;
    border-bottom-color: #4eff8a;
}
main[data-profile-theme="terminal"] .profile-handle,
main[data-profile-theme="terminal"] .post-handle,
main[data-profile-theme="terminal"] .onion-glow,
main[data-profile-theme="terminal"] .side-title { color: #80ffaa; text-shadow: 0 0 4px rgba(78, 255, 138, 0.5); }
main[data-profile-theme="terminal"] a { color: #4effe0; }

/* vaporwave — magenta + cyan on indigo, slightly glowy. */
main[data-profile-theme="vaporwave"] {
    background: linear-gradient(160deg, #2a0a4a 0%, #4a1a6a 50%, #2a0a4a 100%);
    color: #ffe5ff;
    border-radius: 12px;
    padding: 1.5rem;
}
main[data-profile-theme="vaporwave"] .profile-card,
main[data-profile-theme="vaporwave"] .post,
main[data-profile-theme="vaporwave"] .side-card,
main[data-profile-theme="vaporwave"] .top-8-grid {
    background: rgba(255, 102, 204, 0.05);
    border-color: rgba(255, 102, 204, 0.4);
}
main[data-profile-theme="vaporwave"] .post {
    border-left-color: #ff66cc;
    border-bottom-color: #33ccff;
}
main[data-profile-theme="vaporwave"] .profile-handle,
main[data-profile-theme="vaporwave"] .post-handle,
main[data-profile-theme="vaporwave"] .onion-glow,
main[data-profile-theme="vaporwave"] .side-title,
main[data-profile-theme="vaporwave"] .feed-title { color: #ff66cc; text-shadow: 0 0 6px rgba(255, 102, 204, 0.5); }
main[data-profile-theme="vaporwave"] .post-body,
main[data-profile-theme="vaporwave"] .side-body,
main[data-profile-theme="vaporwave"] .profile-bio,
main[data-profile-theme="vaporwave"] .profile-status { color: #ffe5ff; }
main[data-profile-theme="vaporwave"] a { color: #33ccff; }

/* monochrome — clean B&W, no neon. */
main[data-profile-theme="monochrome"] {
    background: #fafafa;
    color: #111;
    border-radius: 4px;
    padding: 1.5rem;
}
main[data-profile-theme="monochrome"] .profile-card,
main[data-profile-theme="monochrome"] .post,
main[data-profile-theme="monochrome"] .side-card,
main[data-profile-theme="monochrome"] .top-8-grid {
    background: #fff;
    border-color: #111;
    color: #111;
    border-radius: 3px;
}
main[data-profile-theme="monochrome"] .post {
    border-left-color: #111;
    border-bottom-color: #111;
}
main[data-profile-theme="monochrome"] .profile-handle,
main[data-profile-theme="monochrome"] .post-handle,
main[data-profile-theme="monochrome"] .onion-glow,
main[data-profile-theme="monochrome"] .side-title,
main[data-profile-theme="monochrome"] .feed-title { color: #111; text-shadow: none; }
main[data-profile-theme="monochrome"] .post-body,
main[data-profile-theme="monochrome"] .side-body,
main[data-profile-theme="monochrome"] .profile-bio,
main[data-profile-theme="monochrome"] .profile-status { color: #111; font-family: 'Helvetica', 'Arial', sans-serif; }
main[data-profile-theme="monochrome"] .post-time,
main[data-profile-theme="monochrome"] .post-meta { color: #555; }
main[data-profile-theme="monochrome"] a { color: #111; text-decoration: underline; }

/* sunset — warm coral + gold gradients on deep plum. */
main[data-profile-theme="sunset"] {
    background: linear-gradient(160deg, #2b1233 0%, #6a263f 55%, #b8553a 110%);
    color: #ffe8d6;
    border-radius: 12px;
    padding: 1.5rem;
}
main[data-profile-theme="sunset"] .profile-card,
main[data-profile-theme="sunset"] .post,
main[data-profile-theme="sunset"] .side-card,
main[data-profile-theme="sunset"] .top-8-grid {
    background: rgba(255, 170, 120, 0.06);
    border-color: rgba(255, 150, 110, 0.4);
}
main[data-profile-theme="sunset"] .post {
    border-left-color: #ff9466;
    border-bottom-color: #ffcc6a;
}
main[data-profile-theme="sunset"] .profile-handle,
main[data-profile-theme="sunset"] .post-handle,
main[data-profile-theme="sunset"] .onion-glow,
main[data-profile-theme="sunset"] .side-title,
main[data-profile-theme="sunset"] .feed-title { color: #ffb27a; text-shadow: 0 0 6px rgba(255, 140, 90, 0.5); }
main[data-profile-theme="sunset"] .post-body,
main[data-profile-theme="sunset"] .side-body,
main[data-profile-theme="sunset"] .profile-bio,
main[data-profile-theme="sunset"] .profile-status { color: #ffe8d6; }
main[data-profile-theme="sunset"] .post-time,
main[data-profile-theme="sunset"] .post-meta { color: #e0a07a; }
main[data-profile-theme="sunset"] a { color: #ffc07a; }

/* /account status editor */
.status-form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.status-form-row {
    display: flex;
    align-items: center;
    gap: 0.6em;
    flex-wrap: wrap;
}
.status-form-row .composer-count { margin-right: auto; }
.status-feedback {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: var(--neon-green);
    min-height: 1em;
}

/* Profile status / away-message line — sits just under the bio. The mark
   character is the AIM-era visual cue; the "set X ago" meta lets stale
   statuses read as stale without us having to auto-clear them. */
.profile-status {
    margin: 0.6rem 0 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.45em;
    color: #c6fcff;
    font-size: 0.95rem;
    line-height: 1.4;
    font-style: italic;
}
.profile-status-mark {
    color: var(--neon-pink-soft);
    font-style: normal;
    text-shadow: 0 0 4px rgba(255, 138, 204, 0.35);
}
.profile-status-text {
    flex: 1 1 auto;
    word-wrap: break-word;
}
.profile-status-meta {
    font-size: 0.72rem;
    color: #8888ff;
    font-style: normal;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.03em;
}

/* /scheduled page — list of pending future-dated posts owned by viewer. */
.scheduled-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.scheduled-row {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--glass-border);
    border-left: 3px solid rgba(255, 138, 204, 0.55);
    border-radius: 8px;
    padding: 0.95rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.scheduled-when {
    display: flex;
    align-items: baseline;
    gap: 0.8em;
    font-size: 0.78rem;
}
.scheduled-when-rel {
    font-family: 'Press Start 2P', monospace;
    color: var(--neon-pink-soft);
    text-shadow: 0 0 4px rgba(255, 138, 204, 0.3);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
}
.scheduled-when-abs {
    color: #8888ff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
}
.scheduled-body {
    color: #e8f4ff;
    font-size: 0.97rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.scheduled-edit {
    width: 100%;
    min-height: 5.5rem;
    resize: vertical;
    font-family: inherit;
    font-size: 0.97rem;
    line-height: 1.45;
}
.scheduled-meta {
    margin: 0;
    font-size: 0.78rem;
    color: #8888ff;
    font-style: italic;
}
.scheduled-reschedule-row {
    margin-top: 0.3rem;
    padding: 0.55rem 0.7rem;
    background: rgba(57, 255, 240, 0.05);
    border: 1px solid rgba(57, 255, 240, 0.25);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 0.3em;
}
.scheduled-reschedule-row[hidden] { display: none; }
.scheduled-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
    margin-top: 0.2rem;
}
.scheduled-action-feedback {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--neon-green);
    font-family: 'JetBrains Mono', monospace;
}

/* Composer visibility trigger — small text link toggling between the user's
   default (matches profile public/private) and the override (opposite). Sits
   to the LEFT of the schedule trigger in the top row. Stays mostly invisible
   in default state; pinks up when the user has overridden it. */
.composer-vis-trigger {
    margin-left: auto;
    background: transparent;
    border: 0;
    color: rgba(155, 155, 219, 0.75);
    font-family: inherit;
    font-size: 0.82rem;
    padding: 0.2em 0.4em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    line-height: 1.2;
    transition: color 140ms ease;
}
.composer-vis-trigger:hover {
    color: var(--neon-cyan);
}
.composer-vis-trigger.is-override {
    color: var(--neon-pink-soft);
    text-shadow: 0 0 6px rgba(255, 138, 204, 0.3);
}
.composer-vis-trigger-icon {
    font-size: 0.95em;
    opacity: 0.85;
}
.composer-vis-trigger-text {
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    text-decoration-color: rgba(155, 155, 219, 0.35);
}
.composer-vis-trigger:hover .composer-vis-trigger-text {
    text-decoration-color: rgba(57, 255, 240, 0.65);
}
.composer-vis-trigger.is-override .composer-vis-trigger-text {
    text-decoration-color: rgba(255, 138, 204, 0.55);
}

/* When the visibility trigger is present it claims margin-left:auto, so the
   schedule trigger stops needing it. Keep it intact for the fallback case
   where vis is absent (logged-out renders, etc) but a small gap between the
   two keeps them from kerning together. */
.composer-vis-trigger + .composer-schedule-trigger {
    margin-left: 0.4em;
}

@media (max-width: 600px) {
    .composer-vis-trigger { font-size: 0.78rem; }
}

/* Composer schedule trigger — a small text link in the top row of the
   composer, opposite "posting as @handle". Clicking it reveals the
   publish-at row below the textarea and swaps the POST button to SCHEDULE.
   Clicking again hides the row, clears the value, and reverts the button. */
.composer-schedule-trigger {
    margin-left: auto;
    background: transparent;
    border: 0;
    color: rgba(155, 155, 219, 0.75);
    font-family: inherit;
    font-size: 0.82rem;
    padding: 0.2em 0.4em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    line-height: 1.2;
    transition: color 140ms ease;
}
.composer-schedule-trigger:hover {
    color: var(--neon-cyan);
}
.composer-schedule-trigger.is-active {
    color: var(--neon-pink-soft);
    text-shadow: 0 0 6px rgba(255, 138, 204, 0.3);
}
.composer-schedule-trigger-icon {
    font-size: 0.95em;
    opacity: 0.85;
}
.composer-schedule-trigger-text {
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    text-decoration-color: rgba(155, 155, 219, 0.35);
}
.composer-schedule-trigger:hover .composer-schedule-trigger-text {
    text-decoration-color: rgba(57, 255, 240, 0.65);
}
.composer-schedule-trigger.is-active .composer-schedule-trigger-text {
    text-decoration-color: rgba(255, 138, 204, 0.55);
}

@media (max-width: 600px) {
    .composer-schedule-trigger { font-size: 0.78rem; }
}

/* ================================================ */
/* Style picker (accent color + profile frame)       */
/* ================================================ */
.style-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.style-row {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.style-row-label {
    font-size: 0.78rem;
    color: #8888ff;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Accent swatches */
.style-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}
.style-swatch {
    --swatch: var(--neon-pink-soft);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3em;
    padding: 0.5em 0.6em;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s ease;
    background: rgba(255, 255, 255, 0.02);
}
.style-swatch input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.style-swatch-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--swatch);
    box-shadow: 0 0 4px var(--swatch);
}
.style-swatch[style*="--swatch"]:not([style*="--swatch:"]) .style-swatch-dot,
.style-swatch:not([style]) .style-swatch-dot {
    /* "default" swatch (no --swatch set) — black is the default accent now */
    background: #000;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    opacity: 1;
}
.style-swatch-name {
    font-size: 0.72rem;
    color: #8888ff;
    text-transform: lowercase;
    letter-spacing: 0.05em;
}
.style-swatch:hover {
    border-color: var(--neon-cyan);
}
.style-swatch.is-current {
    border-color: var(--neon-cyan);
    background: rgba(57, 255, 240, 0.06);
}

/* Profile frame picker */
.style-frames {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}
.style-frame {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3em;
    padding: 0.5em 0.7em;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s ease;
}
.style-frame input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.style-frame-preview {
    width: 42px;
    height: 42px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
}
.style-frame-name {
    font-size: 0.72rem;
    color: #8888ff;
    text-transform: lowercase;
    letter-spacing: 0.05em;
}
.style-frame:hover { border-color: var(--neon-cyan); }
.style-frame.is-current {
    border-color: var(--neon-cyan);
    background: rgba(57, 255, 240, 0.06);
}

/* ================================================ */
/* Profile frame animations                           */
/* Apply via .profile-card.frame-X                    */
/* ================================================ */
.profile-card.frame-pulse {
    animation: framePulse 2.6s ease-in-out infinite;
}
@keyframes framePulse {
    0%, 100% { box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.02),
        0 6px 24px rgba(0, 0, 0, 0.28),
        0 0 0 0 rgba(255, 138, 204, 0.0); }
    50%      { box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.02),
        0 6px 24px rgba(0, 0, 0, 0.28),
        0 0 28px 4px rgba(255, 138, 204, 0.42); }
}

.profile-card.frame-scan {
    position: relative;
    overflow: hidden;
}
.profile-card.frame-scan::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 100%;
    background: linear-gradient(180deg,
        transparent 0%,
        transparent 47%,
        rgba(57, 255, 240, 0.32) 49.5%,
        rgba(57, 255, 240, 0.55) 50%,
        rgba(57, 255, 240, 0.32) 50.5%,
        transparent 53%,
        transparent 100%);
    animation: frameScan 3.5s linear infinite;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: screen;
}
.profile-card.frame-scan > * { position: relative; z-index: 2; }
@keyframes frameScan {
    from { transform: translateY(-100%); }
    to   { transform: translateY(100%); }
}

.profile-card.frame-glow {
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.02),
        0 6px 24px rgba(0, 0, 0, 0.28),
        0 0 32px rgba(142, 255, 92, 0.32),
        0 0 8px rgba(142, 255, 92, 0.55);
    border-color: rgba(142, 255, 92, 0.6);
}

.profile-card.frame-aurora {
    animation: frameAurora 6s linear infinite;
}
@keyframes frameAurora {
    0%, 100% { border-color: rgba(57, 255, 240, 0.6);  box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 6px 24px rgba(0, 0, 0, 0.28), 0 0 26px rgba(57, 255, 240, 0.4); }
    33%      { border-color: rgba(255, 138, 204, 0.6); box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 6px 24px rgba(0, 0, 0, 0.28), 0 0 26px rgba(255, 138, 204, 0.4); }
    66%      { border-color: rgba(157, 78, 221, 0.6);  box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 6px 24px rgba(0, 0, 0, 0.28), 0 0 26px rgba(157, 78, 221, 0.4); }
}

.profile-card.frame-glitch {
    animation: frameGlitch 7s steps(1) infinite;
}
@keyframes frameGlitch {
    0%, 96%, 100% { transform: translate(0); filter: none; }
    96.5% { transform: translate(-1px, 0); filter: hue-rotate(15deg); }
    97%   { transform: translate(1px, -1px); filter: hue-rotate(-20deg) saturate(1.4); }
    97.5% { transform: translate(0, 1px); filter: none; }
    98%   { transform: translate(-2px, 0); filter: hue-rotate(40deg); }
    98.5% { transform: translate(0); filter: none; }
}

/* Frame previews (smaller swatches inside the picker) */
.frame-preview-pulse  { animation: framePulse 3s ease-in-out infinite; }
.frame-preview-glow   {
    box-shadow: 0 0 8px rgba(142, 255, 92, 0.5);
    border-color: rgba(142, 255, 92, 0.5);
}
.frame-preview-scan   {
    background: linear-gradient(180deg,
        rgba(255,255,255,0.04) 0%,
        rgba(255,255,255,0.04) 45%,
        rgba(57, 255, 240, 0.5) 50%,
        rgba(255,255,255,0.04) 55%,
        rgba(255,255,255,0.04) 100%);
    background-size: 100% 200%;
    animation: framePreviewScan 2.5s linear infinite;
}
@keyframes framePreviewScan {
    from { background-position: 0 -100%; }
    to   { background-position: 0 100%; }
}
.frame-preview-glitch { animation: frameGlitch 4s steps(1) infinite; }
.frame-preview-none   { opacity: 0.3; }
.frame-preview-aurora { animation: framePreviewAurora 4s linear infinite; }
@keyframes framePreviewAurora {
    0%, 100% { box-shadow: 0 0 9px rgba(57, 255, 240, 0.6);  border-color: rgba(57, 255, 240, 0.6); }
    33%      { box-shadow: 0 0 9px rgba(255, 138, 204, 0.6); border-color: rgba(255, 138, 204, 0.6); }
    66%      { box-shadow: 0 0 9px rgba(157, 78, 221, 0.6);  border-color: rgba(157, 78, 221, 0.6); }
}

/* ================================================ */
/* MOBILE — narrow viewport overrides                */
/* ================================================ */

/* All buttons + tappable links: remove the 300ms iOS tap delay. */
button, a, [role="button"], input[type="submit"], input[type="button"] {
    touch-action: manipulation;
}

/* Tap target floor — anything ".post-act" gets enough vertical room.
   We don't apply min-height to ALL buttons (e.g. composer-btn is already big). */
@media (hover: none) and (pointer: coarse) {
    .post-act, .net-nav-link, .net-nav-btn, .net-nav-btn-link,
    .search-tab, .feed-tab, .privacy-radio {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }
}

/* iOS Safari auto-zooms any input < 16px on focus. Force >= 16px on every
   text-entry control. We do this UNCONDITIONALLY so it applies on desktop too
   (zero visual cost — 16px is already the baseline for these). */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea,
select {
    font-size: 16px;
}

/* ---------------------------------------- */
/* Tablet / large phone — up to 700px       */
/* ---------------------------------------- */
@media (max-width: 700px) {

    /* Header — tighter padding, smaller wordmark */
    .net-header-inner {
        padding: 0.7rem 0.9rem;
        gap: 0.6rem;
    }
    .net-brand { line-height: 1; }
    .net-brand-mark { font-size: 1.1rem; }
    .net-brand-tag {
        font-size: 0.72rem;
        margin-top: 0.3em;
    }
    .net-nav {
        gap: 0.4em 0.7em;
        font-size: 0.9rem;
        width: 100%;
        justify-content: flex-start;
    }
    .net-nav-link {
        padding: 0.3em 0.1em;
    }
    .net-nav-me span {
        max-width: 9em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Verification banner — wrap better */
    .net-verify-banner {
        flex-direction: column;
        gap: 0.4em;
        font-size: 0.85rem;
        padding: 0.6em 1em;
    }

    /* Main grid — tighter padding + gap; sidebar already stacks below feed
       since the 900px+ rule doesn't fire. */
    .net-main {
        padding: 1.5rem 0.9rem 2.5rem;
        gap: 1.5rem;
    }
    .net-narrow {
        padding: 1.75rem 1rem 3rem;
    }

    /* Page titles — calmer */
    .net-page-title { font-size: 1.65rem; }
    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.25rem; }

    /* Composer */
    .composer {
        padding: 1.1rem 1rem;
        margin-bottom: 1.5rem;
        border-radius: 8px;
    }
    .composer-row { flex-wrap: wrap; gap: 0.4em; }
    .composer-body {
        min-height: 6em;
        font-size: 16px; /* explicit, in case ::placeholder etc. cascade */
        padding: 0.65em;
    }
    .composer-btn {
        padding: 0.7em 1.2em;
        font-size: 0.95rem;
        width: 100%;
        max-width: 100%;
    }
    .composer-foot { flex-direction: column; align-items: stretch; gap: 0.7em; }
    .composer-count { text-align: center; }

    /* Image attach control */
    .composer-image-pick {
        width: 100%;
        justify-content: center;
    }
    #post-image-alt {
        font-size: 16px;
    }

    /* Feed posts */
    .feed { gap: 0.9rem; }
    .post {
        padding: 1rem 1rem;
        border-radius: 7px;
    }
    .post-head { gap: 0.6em; }
    .post-head-meta { min-width: 0; }
    .post-handle { font-size: 0.95rem; }
    .post-time { font-size: 0.75rem; }
    .post-body { font-size: 1rem; line-height: 1.45; }
    .post-foot { gap: 0.5em; }
    .post-act {
        padding: 0.45em 0.75em;
        font-size: 0.85rem;
    }
    .post-meta {
        display: none; /* "no boost · no reach score · no impressions" — hide on phone, save space */
    }

    /* Share card inside posts */
    .share-card { padding: 0.8rem; }
    .share-card-head { gap: 0.4em; flex-wrap: wrap; }
    .share-card-body { font-size: 0.92rem; }

    /* Feed header (tabs) */
    .feed-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3em;
    }
    .feed-title { font-size: 1.2rem; }
    .feed-sub { font-size: 0.78rem; }
    .feed-tabs { width: 100%; }

    /* Profile */
    .profile-card { padding: 1.1rem; }
    .profile-handle { font-size: 1.45rem; }
    .profile-actions {
        flex-wrap: wrap;
        gap: 0.4em;
    }
    .profile-actions .composer-btn,
    .profile-actions .post-act {
        flex: 1 1 auto;
        width: auto;
        max-width: none;
    }

    /* Sidebar — already single-column at <900px, just tighten spacing */
    .net-side-col { gap: 1rem; }
    .side-card { padding: 1rem 1.1rem; border-radius: 7px; }
    .side-title { font-size: 0.7rem; }
    .side-body { font-size: 0.9rem; }

    /* Search */
    .search-form { flex-direction: column; gap: 0.5em; }
    .search-form .composer-btn { width: 100%; }
    .search-tabs { gap: 0.3em; }
    .search-tab { padding: 0.4em 0.7em; font-size: 0.85rem; }
    .search-user-link { padding: 0.7em 0.8em; gap: 0.7em; }
    .search-user-bio { font-size: 0.82rem; }

    /* Directory */
    .directory-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 0.7rem;
    }
    .directory-card-link {
        padding: 0.9rem 0.6rem;
        min-height: 160px;
    }
    .directory-handle { font-size: 0.95rem; }
    .directory-bio { font-size: 0.78rem; }
    .directory-meta { font-size: 0.72rem; }

    /* Auth forms */
    .auth-form { padding: 1.1rem; gap: 1rem; }
    .auth-input { padding: 0.65em 0.7em; }
    .auth-submit { width: 100%; }

    /* Avatars */
    .avatar-xl { width: 88px; height: 88px; }
    .profile-card { padding: 1.25rem 1.15rem 1rem; }
    .profile-handle { font-size: 1.55rem; }
    .profile-bio { font-size: 0.98rem; padding: 0.5rem 0.7rem 0.5rem 0.85rem; }
    .profile-meta { font-size: 0.82rem; gap: 0.35rem 0.55rem; }
    .profile-head { gap: 1rem; }
    .profile-head .avatar-xl { box-shadow:
        0 0 0 3px rgba(0, 0, 0, 0.45),
        0 0 14px var(--post-accent, rgba(57, 255, 240, 0.22)); }
    .avatar-lg { width: 56px; height: 56px; }
    .avatar-md { width: 36px; height: 36px; }

    /* Flash messages */
    .flash {
        margin: 0.6em 0.9rem;
        font-size: 0.9rem;
    }

    /* Account page sections */
    .account-section { padding: 1rem 1.1rem; }
    .account-h2 { font-size: 1rem; }

    /* Friends page rows */
    .friends-page-section { padding: 1rem 1.1rem; }
    .friend-row { flex-wrap: wrap; gap: 0.6em; padding: 0.7em; }
    .friend-row-meta { min-width: 0; flex: 1 1 200px; }

    /* Blocked list rows */
    .blocked-row { flex-wrap: wrap; gap: 0.5em; padding: 0.5em 0.7em; }

    /* Footer */
    .onion-footer {
        padding: 2.5rem 1rem;
        font-size: 0.82rem;
    }
}

/* ---------------------------------------- */
/* Small phone — up to 420px                */
/* ---------------------------------------- */
@media (max-width: 420px) {

    /* Hide the tagline — wordmark is enough */
    .net-brand-tag { display: none; }
    .net-brand-mark { font-size: 1rem; }

    /* Nav fits in one line at narrowest */
    .net-nav { font-size: 0.85rem; gap: 0.3em 0.6em; }

    /* Tighter still */
    .net-main { padding: 1.2rem 0.7rem 2rem; }
    .composer { padding: 0.9rem 0.85rem; }
    .post { padding: 0.85rem 0.85rem; }
    .side-card { padding: 0.85rem 0.95rem; }

    .net-page-title { font-size: 1.4rem; }

    /* Directory becomes single column */
    .directory-grid { grid-template-columns: 1fr; }

    /* Tighter post head: handle + time wraps */
    .post-head { flex-wrap: wrap; }
    .post-head-meta { flex: 1 1 calc(100% - 50px); }

    /* Friend actions row stacks */
    .profile-actions .composer-btn,
    .profile-actions .post-act { width: 100%; }
}

/* ============================================ */
/* onioncore garnishes — subtle glitch + texture */
/* ============================================ */

/* Slow breathe-pulse on the wordmark — barely visible, just feels alive. */
.net-brand-mark {
    animation: brandPulse 6s ease-in-out infinite;
}
@keyframes brandPulse {
    0%, 100% {
        text-shadow: 0 0 4px rgba(142, 255, 92, 0.45);
    }
    50% {
        text-shadow:
            0 0 5px rgba(142, 255, 92, 0.7),
            0 0 14px rgba(142, 255, 92, 0.2);
    }
}

/* Rare staccato jitter on the wordmark's pink "life" — 97% of the time
   it sits still, then twitches for ~30ms once every cycle. */
.net-brand-mark .onion-glow {
    display: inline-block;
    animation: brandJitter 9s steps(1) infinite;
}
@keyframes brandJitter {
    0%, 96%, 100% { transform: translate(0); }
    97%  { transform: translate(-1px, 0.5px) skewX(1deg); }
    98%  { transform: translate(1px, -0.5px) skewX(-1deg); }
    99%  { transform: translate(0); }
}

/* Soft slow breathe on every .onion-glow accent — pink text feels neon-warm
   instead of static. Keeps the existing color, just modulates the shadow. */
.onion-glow {
    animation: onionBreathe 7s ease-in-out infinite;
}
@keyframes onionBreathe {
    0%, 100% { text-shadow: 0 0 2px rgba(255, 102, 204, 0.55); }
    50%      { text-shadow:
                  0 0 3px rgba(255, 102, 204, 0.78),
                  0 0 9px rgba(255, 102, 204, 0.18); }
}

/* Gradient hairline across the top of every post card — that horizontal
   sweep from magenta to cyan to transparent. Subtle, ~1px tall, decorative. */
.post {
    overflow: hidden;   /* required so ::before doesn't poke out of the rounded corner */
}
.post::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(255, 138, 204, 0.5) 0%,
        rgba(57, 255, 240, 0.2)  40%,
        transparent              90%
    );
    pointer-events: none;
}

/* Replace the feed-head's dashed border with a magenta→cyan→transparent
   gradient line. Same horizontal-sweep treatment. */
.feed-head {
    border-bottom: none;
    position: relative;
    padding-bottom: 0.6rem;
}
.feed-head::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(255, 102, 204, 0.45) 0%,
        rgba(57, 255, 240, 0.18)  35%,
        transparent               85%
    );
    pointer-events: none;
}

/* Same treatment on the feed-tabs underline if it has one */
.feed-tabs {
    position: relative;
}

/* Terminal cursor utility — apply by adding `terminal-cursor` to any
   element. A small blinking _ sits to its right. */
.terminal-cursor::after {
    content: "_";
    display: inline-block;
    margin-left: 0.2em;
    color: var(--neon-cyan);
    font-weight: 600;
    animation: termBlink 1.1s step-end infinite;
}
@keyframes termBlink {
    50% { opacity: 0; }
}

/* Apply terminal cursor to feed-sub so the "newest first · no boosts · no
   shadowbans · no ads" line feels like a status readout. */
.feed-sub::after {
    content: " _";
    color: var(--neon-cyan);
    font-weight: 600;
    animation: termBlink 1.1s step-end infinite;
}

/* Section labels inside auth/account pages get a gradient sweep too */
.account-h2 {
    position: relative;
    padding-bottom: 0.5rem;
}
.account-h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40%;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(57, 255, 240, 0.55),
        transparent
    );
    pointer-events: none;
}

/* Respect reduced-motion: kill every continuous animation we just added.
   Static one-and-done shadows still apply. */
@media (prefers-reduced-motion: reduce) {
    .net-brand-mark,
    .net-brand-mark .onion-glow,
    .onion-glow,
    .terminal-cursor::after,
    .feed-sub::after {
        animation: none !important;
    }
}

/* ============================================================
   inline reply — composer that expands under a feed card
   ============================================================ */

.inline-reply {
    margin: -0.4rem 0 1.2rem 1.2rem;
    padding: 0.85rem 1rem 0.9rem;
    background: linear-gradient(165deg, rgba(15, 25, 36, 0.6), rgba(20, 32, 44, 0.4));
    border: 1px solid rgba(57, 255, 240, 0.22);
    border-left: 3px solid var(--neon-pink-soft, #ff8acc);
    border-radius: 0 8px 8px 0;
    position: relative;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 180ms ease, opacity 140ms ease, padding 180ms ease;
    padding-top: 0;
    padding-bottom: 0;
}
.inline-reply.is-open {
    max-height: 380px;
    opacity: 1;
    padding-top: 0.85rem;
    padding-bottom: 0.9rem;
}

/* Little "↰" elbow connecting the reply box back to the parent post */
.inline-reply::before {
    content: "";
    position: absolute;
    left: -1.05rem;
    top: 0.6rem;
    width: 0.7rem;
    height: 0.85rem;
    border-left: 1px solid rgba(255, 138, 204, 0.45);
    border-bottom: 1px solid rgba(255, 138, 204, 0.45);
    border-bottom-left-radius: 6px;
    pointer-events: none;
}

.inline-reply-body {
    width: 100%;
    min-height: 5.5rem;
    margin: 0;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(57, 255, 240, 0.15);
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
    color: var(--ink-1, #e9eef2);
    font-family: inherit;
    font-size: 0.98rem;
    line-height: 1.45;
    resize: vertical;
}
.inline-reply-body:focus {
    outline: none;
    border-color: var(--neon-cyan, #39fff0);
    box-shadow: 0 0 0 1px rgba(57, 255, 240, 0.4);
}

.inline-reply-foot {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.6rem;
}
.inline-reply-count {
    margin-right: auto;
    color: rgba(155, 155, 219, 0.7);
    font-size: 0.8rem;
}

.inline-reply-status {
    margin: 0.45rem 0 0;
    font-size: 0.85rem;
    color: rgba(155, 155, 219, 0.75);
    min-height: 1.2em;
}
.inline-reply-status.is-ok { color: var(--neon-green, #8eff5c); }
.inline-reply-status.is-err { color: #ff8888; }

@media (max-width: 640px) {
    .inline-reply { margin-left: 0.6rem; padding-left: 0.85rem; padding-right: 0.85rem; }
    .inline-reply::before { left: -0.5rem; }
    /* Tighter thread indent on small screens — cap at 2 levels so deep
       conversations don't run off the edge. */
    .thread-reply { margin-left: calc(min(var(--lvl, 0), 2) * 13px); padding-left: 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
    .inline-reply { transition: none; }
}

/* ============================================================
   Top 8 — profile grid + /friends manage UI
   ============================================================ */

.top-friends-block {
    margin: 1.2rem 0 1.4rem;
    padding: 1rem 1rem 1.05rem;
    background: rgba(8, 14, 22, 0.45);
    border: 1px solid rgba(57, 255, 240, 0.15);
    border-radius: 8px;
}

.top-friends-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.85rem;
}

.top-friends-title {
    margin: 0;
    font-family: var(--font-mono, 'Press Start 2P'), monospace;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: var(--neon-cyan, #39fff0);
    text-shadow: 0 0 10px rgba(57, 255, 240, 0.32);
}

.top-friends-edit { font-size: 0.85rem; }

.top-friends-empty {
    margin: 0;
    color: var(--ink-2, #cfd6dc);
    font-style: italic;
    font-size: 0.92rem;
}

.top-friends-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.65rem;
}

.top-friend {
    position: relative;
    list-style: none;
    border-radius: 8px;
    background: linear-gradient(165deg, rgba(15, 25, 36, 0.65), rgba(20, 32, 44, 0.4));
    border: 1px solid rgba(57, 255, 240, 0.12);
    transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
    min-height: 7.5rem;
}
.top-friend:hover {
    border-color: rgba(255, 138, 204, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 5px 18px rgba(255, 138, 204, 0.16);
}

/* Position #1 gets a brighter border + a small numbered badge — it's
   meant to read as "favorite." Position 2 gets a softer secondary tint
   so the visual hierarchy in the grid mirrors the social meaning. */
.top-friend[data-position="1"] {
    border-color: rgba(57, 255, 240, 0.55);
    box-shadow: inset 0 0 12px rgba(57, 255, 240, 0.1), 0 4px 18px rgba(57, 255, 240, 0.16);
}
.top-friend[data-position="1"]::before {
    content: "★";
    position: absolute;
    top: 0.3rem;
    right: 0.45rem;
    color: var(--neon-cyan, #39fff0);
    text-shadow: 0 0 8px rgba(57, 255, 240, 0.7);
    font-size: 0.78rem;
    line-height: 1;
    pointer-events: none;
}
.top-friend[data-position="2"] {
    border-color: rgba(255, 138, 204, 0.35);
}

.top-friend-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 0.85rem 0.45rem 0.7rem;
    height: 100%;
    gap: 0.55rem;
}

.top-friend-avatar {
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(57, 255, 240, 0.25);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.top-friend[data-position="1"] .top-friend-avatar {
    width: 4rem;
    height: 4rem;
    border-color: rgba(57, 255, 240, 0.6);
    box-shadow: 0 0 10px rgba(57, 255, 240, 0.4);
}

.top-friend-handle {
    font-size: 0.8rem;
    color: var(--neon-pink, #ff8acc);
    word-break: break-word;
    text-align: center;
    line-height: 1.25;
    max-width: 100%;
    text-shadow: 0 0 6px rgba(255, 138, 204, 0.24);
    font-weight: 500;
}

.top-friend-empty {
    border-style: dashed;
    opacity: 0.3;
    pointer-events: none;
    min-height: 7.5rem;
    background: rgba(15, 25, 36, 0.25);
}

@media (max-width: 640px) {
    .top-friends-grid { grid-template-columns: repeat(2, 1fr); gap: 0.55rem; }
    .top-friend       { min-height: 6.4rem; }
    .top-friend-empty { min-height: 6.4rem; }
    .top-friend-avatar { width: 3rem; height: 3rem; }
    .top-friend[data-position="1"] .top-friend-avatar { width: 3.35rem; height: 3.35rem; }
}

/* ── /friends manage section ────────────────────────────────── */

.top-8-manage .account-explain { margin-bottom: 0.6rem; }

.top-8-list {
    list-style: none;
    margin: 0.4rem 0 0.85rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.top-8-row {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.65rem;
    background: rgba(15, 25, 36, 0.5);
    border: 1px solid rgba(57, 255, 240, 0.12);
    border-radius: 6px;
}

.top-8-pos {
    width: 1.6rem;
    text-align: center;
    color: var(--neon-cyan, #39fff0);
    font-weight: 600;
    font-family: var(--font-mono, 'Press Start 2P'), monospace;
    font-size: 0.78rem;
    flex-shrink: 0;
}

.top-8-handle {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

.top-8-arrows {
    display: inline-flex;
    gap: 0.3rem;
}

.top-8-arrow {
    width: 1.9rem;
    height: 1.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(57, 255, 240, 0.28);
    background: transparent;
    color: var(--neon-cyan, #39fff0);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
}
.top-8-arrow:hover:not([disabled]) { border-color: var(--neon-cyan, #39fff0); }
.top-8-arrow[disabled] { opacity: 0.25; cursor: not-allowed; }

.top-8-remove { white-space: nowrap; }

.top-8-picker {
    margin-top: 0.3rem;
    border: 1px dashed rgba(57, 255, 240, 0.2);
    border-radius: 6px;
    padding: 0.55rem 0.8rem;
}
.top-8-picker[open] { padding-bottom: 0.85rem; }

.top-8-picker-summary {
    cursor: pointer;
    color: var(--ink-2, #cfd6dc);
    font-size: 0.92rem;
    list-style: none;
    padding: 0.15rem 0;
}
.top-8-picker-summary::-webkit-details-marker { display: none; }
.top-8-picker-summary::before {
    content: "▸ ";
    display: inline-block;
    transition: transform 120ms ease;
    color: var(--neon-cyan, #39fff0);
}
.top-8-picker[open] .top-8-picker-summary::before { transform: rotate(90deg); }

.top-8-picker-list {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.55rem;
}
.top-8-picker-row {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.55rem;
    background: rgba(15, 25, 36, 0.55);
    border: 1px solid rgba(57, 255, 240, 0.14);
    border-radius: 4px;
}
.top-8-picker-link {
    color: var(--neon-pink, #ff8acc);
    text-decoration: none;
    font-size: 0.9rem;
}

@media (max-width: 480px) {
    .top-8-row { flex-wrap: wrap; row-gap: 0.4rem; }
    .top-8-handle { flex-basis: 100%; }
}

/* ============================================================
   composer live link preview
   ============================================================ */

.composer-preview {
    margin: 0.6rem 0 0.3rem;
}

.composer-preview-card {
    /* inherits from .link-preview-card — just slightly dimmed to read
       as a "preview of the preview" rather than the real thing */
    opacity: 0.96;
}

.composer-preview-loading {
    padding: 0.7rem 0.9rem;
    border: 1px dashed rgba(57, 255, 240, 0.22);
    border-radius: 6px;
    color: var(--ink-2, #cfd6dc);
    font-size: 0.88rem;
    font-style: italic;
    background: rgba(8, 14, 22, 0.3);
}

/* ============================================================
   push notifications (account page)
   ============================================================ */

#push-settings {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-top: 0.35rem;
}

.push-status {
    margin: 0;
    font-size: 0.9rem;
    color: var(--ink-2, #cfd6dc);
    font-style: italic;
    min-height: 1.2em;
}

.push-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
}

.push-types {
    border: 1px solid rgba(57, 255, 240, 0.18);
    border-radius: 4px;
    padding: 0.75rem 1rem 0.9rem;
    margin: 0.3rem 0 0;
    background: rgba(8, 14, 22, 0.35);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.push-types-legend {
    padding: 0 0.4rem;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--neon-cyan, #39fff0);
    opacity: 0.9;
}

.push-type {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.95rem;
    cursor: pointer;
    padding: 0.18rem 0;
    line-height: 1.35;
}

.push-type input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--neon-cyan, #39fff0);
    cursor: pointer;
    flex-shrink: 0;
}

.push-ios-note {
    margin-top: 0.15rem;
    font-size: 0.82rem;
    opacity: 0.78;
}

/* ============================================================
   push pre-prompt modal — shown before the OS permission prompt
   ============================================================ */

.push-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    /* fade-in handled by .is-open */
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}
.push-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}
.push-modal[hidden] { display: none; }

.push-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 5, 10, 0.72);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    cursor: pointer;
}

.push-modal-card {
    position: relative;
    max-width: 540px;
    width: 100%;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    background: var(--bg-1, #0b1218);
    border: 1px solid rgba(57, 255, 240, 0.32);
    border-radius: 8px;
    box-shadow:
        0 0 0 1px rgba(57, 255, 240, 0.06),
        0 20px 60px rgba(0, 0, 0, 0.55),
        0 0 22px rgba(57, 255, 240, 0.18);
    padding: 1.3rem 1.5rem 1.1rem;
    transform: translateY(0);
}

.push-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.7rem;
}

.push-modal-title {
    margin: 0;
    font-family: var(--font-mono, 'Press Start 2P'), monospace;
    font-size: 0.86rem;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: var(--neon-cyan, #39fff0);
    text-shadow: 0 0 10px rgba(57, 255, 240, 0.4);
}

.push-modal-x {
    flex-shrink: 0;
    background: transparent;
    color: var(--ink-2, #cfd6dc);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    width: 2rem;
    height: 2rem;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color 120ms ease, color 120ms ease;
}
.push-modal-x:hover { color: var(--neon-pink, #ff8acc); border-color: rgba(255, 138, 204, 0.55); }

.push-modal-body { font-size: 0.95rem; line-height: 1.55; }

.push-modal-intro {
    margin: 0.2rem 0 0.55rem;
    color: var(--ink-1, #e9eef2);
}

.push-modal-types {
    list-style: none;
    margin: 0 0 0.85rem;
    padding: 0 0 0 0.4rem;
}
.push-modal-types li {
    margin: 0.28rem 0;
    color: var(--ink-1, #e9eef2);
}
.push-modal-bullet {
    display: inline-block;
    width: 1em;
    color: var(--neon-cyan, #39fff0);
    margin-right: 0.2rem;
}

.push-modal-promise {
    margin: 0.55rem 0;
    font-size: 0.94rem;
}

.push-modal-fine {
    margin: 0.4rem 0 0;
    color: var(--ink-2, #cfd6dc);
    font-size: 0.84rem;
    line-height: 1.5;
}

.push-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1.1rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 480px) {
    .push-modal-card { padding: 1.05rem 1rem 0.95rem; }
    .push-modal-title { font-size: 0.78rem; }
    .push-modal-foot { flex-direction: column-reverse; }
    .push-modal-foot .composer-btn,
    .push-modal-foot .post-act { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .push-modal { transition: none; }
}