*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:   #0c0c0c; --bg2: #141414; --bg3: #1c1c1c;
  --b:    #242424; --b2:  #2e2e2e;
  --tx:   #e2e2e2; --tx2: #b0b0b0; --tx3: #878787;
  --ac:   #4a9eff; --acd: #1a3a66;
  --up:   #ff6b35;
  --serif:'Instrument Serif', Georgia, serif;
  --mono: 'JetBrains Mono', monospace;
  --sans: 'DM Sans', system-ui, sans-serif;
}
html,body { background:var(--bg); color:var(--tx); font-family:var(--sans); min-height:100vh; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.header {
  position:sticky; top:0; z-index:100;
  background:rgba(12,12,12,.92); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--b);
}
.header-inner {
  max-width:720px; margin:0 auto; padding:0 20px;
  height:56px; display:flex; align-items:center; gap:20px;
}
.logo {
  font-family:var(--mono); font-size:13px; font-weight:700; color:var(--ac);
  letter-spacing:.06em; white-space:nowrap; flex-shrink:0;
  background:none; border:none; cursor:pointer; padding:0; transition:opacity .15s;
}
.logo:hover { opacity:.7; }
.search-container { flex:1; position:relative; }
.pv-search-container { flex:none; width:100%; max-width:280px; }
.search-container .search-wrap { flex:none; width:100%; }
.autocomplete-dropdown {
  position:absolute; top:calc(100% + 3px); left:0; right:0; z-index:200;
  background:var(--bg2); border:1px solid var(--b2); border-radius:6px;
  overflow:hidden; display:none; box-shadow:0 8px 24px rgba(0,0,0,.5);
}
.autocomplete-dropdown.open { display:block; }
.autocomplete-item {
  display:flex; align-items:center; gap:8px; padding:9px 14px;
  font-family:var(--mono); font-size:12px; color:var(--tx2); letter-spacing:.03em;
  cursor:pointer; transition:background .1s, color .1s;
}
.autocomplete-item::before { content:'r/'; color:var(--tx3); font-size:10px; }
.autocomplete-item:hover, .autocomplete-item.focused { background:var(--bg3); color:var(--tx); }

.search-wrap {
  display:flex; align-items:center;
  background:var(--bg2); border:1px solid var(--b2);
  border-radius:6px; overflow:hidden; transition:border-color .15s;
}
.search-wrap:focus-within { border-color:var(--ac); }
.search-prefix {
  font-family:var(--mono); font-size:13px; color:var(--ac);
  padding:0 10px 0 14px; pointer-events:none;
}
#subreddit-input, #pv-subreddit-input {
  flex:1; background:transparent; border:none; outline:none;
  font-family:var(--mono); font-size:13px; color:var(--tx);
  padding:10px 4px; min-width:0;
}
#subreddit-input::placeholder, #pv-subreddit-input::placeholder { color:var(--tx3); }
.pv-search-wrap { width:100%; }
#search-btn, #pv-search-btn {
  background:transparent; border:none; border-left:1px solid var(--b2);
  cursor:pointer; padding:0 14px; height:100%; color:var(--tx2);
  transition:color .15s,background .15s; display:flex; align-items:center;
}
#search-btn:hover, #pv-search-btn:hover { color:var(--ac); background:var(--bg3); }

/* ── Time filter (search) ───────────────────────────────────────────────── */
.time-filter-wrap { display:flex; align-items:center; padding:0 12px; border-left:1px solid var(--b); }
.time-filter {
  background:var(--bg2); border:1px solid var(--b2); border-radius:4px;
  color:var(--tx2); font-family:var(--mono); font-size:11px; letter-spacing:.05em;
  padding:4px 8px; cursor:pointer; outline:none;
}
.time-filter:focus { border-color:var(--ac); }
.nsfw-toggle {
  background:none; border:1px solid var(--b2); border-radius:3px; cursor:pointer;
  font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.06em;
  color:var(--tx3); padding:3px 7px; margin:auto 0; transition:color .15s,border-color .15s,background .15s;
}
.nsfw-toggle:hover { color:#ff5050; border-color:#ff5050; }
.nsfw-toggle.active { color:#ff5050; border-color:#ff5050; background:rgba(255,80,80,.12); }
.scope-chip {
  display:flex; align-items:center; gap:5px; margin-left:auto; padding:0 4px 0 12px;
  border-left:1px solid var(--b);
  font-family:var(--mono); font-size:10px; color:var(--tx2); letter-spacing:.04em;
}
.scope-chip-label { color:var(--ac); }
.scope-chip-remove {
  background:none; border:none; cursor:pointer; color:var(--tx3);
  font-size:13px; line-height:1; padding:2px 4px; transition:color .15s;
}
.scope-chip-remove:hover { color:var(--tx); }

/* ── Sort tabs ───────────────────────────────────────────────────────────── */
.sort-bar {
  max-width:720px; margin:0 auto; padding:0 20px;
  display:flex; border-bottom:1px solid var(--b);
}
.sort-btn {
  background:none; border:none; border-bottom:2px solid transparent;
  padding:10px 16px; margin-bottom:-1px;
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.08em; color:var(--tx3); cursor:pointer;
  text-transform:uppercase; transition:color .15s,border-color .15s;
}
.sort-btn:hover { color:var(--tx2); }
.sort-btn.active { color:var(--ac); border-bottom-color:var(--ac); }

/* ── Context info bar (sub or user) ─────────────────────────────────────── */
.ctx-info {
  max-width:720px; margin:0 auto; padding:14px 20px 0;
  display:none; align-items:center; gap:12px;
}
.ctx-info.visible { display:flex; }
.ctx-icon {
  width:38px; height:38px; border-radius:50%;
  object-fit:cover; background:var(--bg3); flex-shrink:0; border:1px solid var(--b2);
}
.ctx-meta { display:flex; flex-direction:column; gap:3px; }
.ctx-title { font-family:var(--serif); font-size:16px; color:var(--tx); font-style:italic; }
.ctx-stats { font-family:var(--mono); font-size:10px; color:var(--tx3); letter-spacing:.05em; }
.ctx-stats span { color:var(--ac); }

/* ── Feed ────────────────────────────────────────────────────────────────── */
#feed {
  max-width:720px; margin:0 auto;
  padding:20px 20px 80px;
  display:flex; flex-direction:column; gap:14px;
}

/* ── Post card ───────────────────────────────────────────────────────────── */
@keyframes fadeUp { to { opacity:1; transform:translateY(0); } }
.post {
  display:flex; flex-direction:column;
  background:var(--bg2); border:1px solid var(--b); border-radius:8px; overflow:hidden;
  opacity:0; transform:translateY(8px); animation:fadeUp .3s ease forwards;
  transition:border-color .18s, box-shadow .18s;
}
.post:hover { border-color:var(--b2); box-shadow:0 4px 24px rgba(0,0,0,.4); }

.post-header { padding:14px 16px 10px; }
.post-meta-top { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:7px; }
.flair {
  font-family:var(--mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase;
  background:var(--acd); color:var(--ac); padding:2px 6px; border-radius:2px;
  display:inline-flex; align-items:center; gap:3px;
}
.flair-emoji {
  width:16px; height:16px; vertical-align:middle; flex-shrink:0;
  border-radius:2px;
}
.nsfw-tag {
  font-family:var(--mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase;
  background:rgba(255,80,80,.15); color:#ff5050; padding:2px 6px; border-radius:2px;
}
.post-title {
  font-family:var(--sans); font-size:16px; font-weight:500; line-height:1.4; color:var(--tx);
  background:none; border:none; padding:0; cursor:pointer;
  text-align:left; width:100%; transition:color .15s; display:block; word-break:break-word;
  text-decoration:none;
}
.post-title.is-italic { font-style:normal; }
.post-title:hover { color:var(--ac); }

/* Card media */
.post-media {
  width:100%; background:var(--bg3);
  border-top:1px solid var(--b); border-bottom:1px solid var(--b);
  position:relative; overflow:hidden;
}
.post-media img { width:100%; height:auto; max-height:560px; object-fit:contain; display:block; background:var(--bg3); }
.post-media.no-media { display:none; }

/* Compact link post */
.post-compact { flex-direction:row; align-items:stretch; }
.post-compact-left { flex:1; min-width:0; display:flex; flex-direction:column; }
.post-compact .post-header { flex:1; }
.post-compact .post-footer { margin-top:auto; }
.post-compact .post-title { font-size:15px; }
.post-compact-thumb {
  width:90px; flex-shrink:0;
  background:var(--bg3); border-left:1px solid var(--b);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; text-decoration:none; color:inherit;
}
.post-compact-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.post-compact-thumb svg { opacity:.15; }
.gallery-badge {
  position:absolute; bottom:8px; right:8px;
  background:rgba(0,0,0,.7); color:#fff;
  font-family:var(--mono); font-size:10px; letter-spacing:.04em;
  padding:3px 8px; border-radius:3px; pointer-events:none;
}

/* Card video */
.post-video { width:100%; background:#000; border-top:1px solid var(--b); border-bottom:1px solid var(--b); }
.post-video video { width:100%; max-height:560px; display:block; }
.post-video iframe { width:100%; aspect-ratio:16/9; display:block; border:none; }

/* Card excerpt */
.post-excerpt {
  padding:10px 16px 2px;
  font-family:var(--sans); font-size:13px; line-height:1.65; color:#d8d8d8;
}
.post-excerpt .md { display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }

/* Card footer */
.post-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px 12px; margin-top:auto;
  border-top:1px solid var(--b); gap:8px; flex-wrap:wrap;
}
.footer-left  { display:flex; align-items:center; gap:10px; }
.score-block  { display:flex; align-items:center; gap:5px; }
.score-num    { font-family:var(--mono); font-size:13px; font-weight:700; color:var(--up); }
.ratio-bar    { width:28px; height:2px; background:var(--b2); border-radius:1px; overflow:hidden; }
.ratio-fill   { height:100%; background:var(--up); border-radius:1px; }
.meta-item    { font-family:var(--mono); font-size:10px; color:var(--tx3); letter-spacing:.03em; white-space:nowrap; }
.meta-item .ac { color:var(--ac); }
.meta-item.link { text-decoration:none; cursor:pointer; transition:color .15s; background:none; border:none; padding:0; font:inherit; color:inherit; }
.meta-item.link:hover { color:var(--ac); }
.footer-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.comments-link {
  font-family:var(--mono); font-size:10px; color:var(--tx3);
  background:none; border:none; padding:0; cursor:pointer;
  letter-spacing:.03em; transition:color .15s;
  display:flex; align-items:center; gap:4px; white-space:nowrap;
}
.comments-link:hover { color:var(--ac); }
.ext-link {
  font-family:var(--mono); font-size:10px; color:var(--tx3); text-decoration:none;
  letter-spacing:.03em; transition:color .15s;
  display:flex; align-items:center; gap:4px;
  max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ext-link:hover { color:var(--tx2); }

/* ── Markdown ────────────────────────────────────────────────────────────── */
.md { word-break:break-word; }
.md p { margin-bottom:.6em; }
.md p:last-child { margin-bottom:0; }
.md a { color:var(--ac); text-decoration:none; }
.md a:hover { text-decoration:underline; }
.md strong { color:var(--tx); font-weight:500; }
.md em { font-style:italic; }
.md code { font-family:var(--mono); font-size:.88em; background:var(--bg3); padding:1px 5px; border-radius:3px; }
.md pre { background:var(--bg3); padding:10px 14px; border-radius:4px; overflow-x:auto; margin:.6em 0; }
.md pre code { background:none; padding:0; font-size:.85em; }
.md ul,.md ol { padding-left:1.5em; margin:.4em 0; }
.md li { margin-bottom:.2em; }
.md blockquote { border-left:2px solid var(--b2); margin:.6em 0; padding:.2em .8em; color:var(--tx3); font-style:italic; }
.md img { max-width:100%; border-radius:4px; margin:6px 0; display:block; }
.md h1,.md h2,.md h3 { font-family:var(--serif); margin:.8em 0 .3em; color:var(--tx); font-weight:normal; }
.md hr { border:none; border-top:1px solid var(--b); margin:.8em 0; }
.md table { border-collapse:collapse; width:100%; margin:.6em 0; font-size:.9em; }
.md th,.md td { border:1px solid var(--b2); padding:5px 10px; }
.md th { background:var(--bg3); color:var(--tx2); font-family:var(--mono); font-size:.85em; }
.md .md-gif-embed { width:100%; max-width:400px; aspect-ratio:16/9; border-radius:4px; overflow:hidden; margin:6px 0; }
.md .md-gif-embed iframe { width:100%; height:100%; border:none; }
.spoiler { background:var(--tx); color:var(--tx); border-radius:3px; cursor:pointer; padding:0 2px; user-select:none; transition:background .15s,color .15s; }
.spoiler.revealed { background:var(--bg3); color:var(--tx); }
.redgifs-wrap video { width:100%; display:block; border-radius:inherit; }
.rg-loading { width:100%; aspect-ratio:16/9; background:var(--bg2); display:flex; align-items:center; justify-content:center; color:var(--tx3); font-size:.85em; }
.rg-loading::after { content:'Loading…'; }
.rg-error { padding:12px; color:var(--tx3); font-size:.85em; text-align:center; }

/* Comments: keep images compact */
.pv-comments .md img { max-height:300px; width:auto; max-width:100%; }
.pv-comments .md .md-gif-embed { max-width:360px; }

/* ── Skeletons ───────────────────────────────────────────────────────────── */
.skeleton-post { background:var(--bg2); border:1px solid var(--b); border-radius:8px; overflow:hidden; }
.skel { background:var(--bg3); border-radius:3px; animation:pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:.4} 50%{opacity:.8} }
.skel-header { padding:14px 16px 10px; }
.skel-title  { width:90%; height:18px; margin-bottom:10px; }
.skel-title2 { width:65%; height:18px; }
.skel-banner { width:100%; height:220px; border-radius:0; border-top:1px solid var(--b); }
.skel-footer { padding:10px 16px; height:36px; border-top:1px solid var(--b); }

/* ── Load More ───────────────────────────────────────────────────────────── */
#load-more-btn {
  display:none; margin:32px auto;
  background:transparent; border:1px solid var(--b2); color:var(--tx3);
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  padding:12px 32px; cursor:pointer; border-radius:4px;
  transition:border-color .15s,color .15s;
}
#load-more-btn:hover { border-color:var(--ac); color:var(--ac); }
.load-more-wrap { text-align:center; }

/* ── Profile comment card ────────────────────────────────────────────────── */
.user-comment-card {
  background:var(--bg2); border:1px solid var(--b); border-radius:8px; overflow:hidden;
  padding:14px 16px;
  opacity:0; transform:translateY(8px); animation:fadeUp .3s ease forwards;
}
.ucc-context {
  font-family:var(--mono); font-size:10px; color:var(--tx3); letter-spacing:.03em;
  margin-bottom:8px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.ucc-context a { color:var(--ac); text-decoration:none; }
.ucc-context a:hover { text-decoration:underline; }
.ucc-body { font-family:var(--sans); font-size:13px; line-height:1.6; color:var(--tx2); }
.ucc-footer {
  display:flex; gap:10px; margin-top:8px;
  font-family:var(--mono); font-size:10px; color:var(--tx3); flex-wrap:wrap;
}
.ucc-score { color:var(--up); }

/* ── Gallery (post view) ─────────────────────────────────────────────────── */
.gallery { background:var(--bg3); border-top:1px solid var(--b); }
.gallery-stage { position:relative; }
.gallery-stage img { width:100%; height:auto; max-height:600px; object-fit:contain; display:block; }
.gallery-nav {
  position:absolute; bottom:0; left:0; right:0;
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:8px; background:linear-gradient(transparent,rgba(0,0,0,.6));
}
.gallery-btn {
  background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.2);
  color:#fff; font-family:var(--mono); font-size:16px; line-height:1;
  padding:6px 12px; cursor:pointer; border-radius:4px; transition:background .15s;
}
.gallery-btn:disabled { opacity:.3; cursor:default; }
.gallery-btn:not(:disabled):hover { background:rgba(0,0,0,.8); }
.gallery-counter { font-family:var(--mono); font-size:11px; color:rgba(255,255,255,.8); }
.gallery-thumbs {
  display:flex; gap:4px; padding:6px; overflow-x:auto;
  scrollbar-width:thin; background:var(--bg3);
}
.gallery-thumb {
  width:56px; height:42px; object-fit:cover; border-radius:3px; flex-shrink:0;
  cursor:pointer; opacity:.5; border:2px solid transparent; transition:opacity .15s,border-color .15s;
}
.gallery-thumb.active { opacity:1; border-color:var(--ac); }
.gallery-caption {
  padding:6px 12px; font-family:var(--sans); font-size:12px;
  color:var(--tx3); line-height:1.4;
}

/* ── Full-screen Post View ───────────────────────────────────────────────── */
.post-view {
  position:fixed; inset:0; z-index:300;
  background:var(--bg);
  display:flex; flex-direction:column;
  transform:translateY(100%);
  transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.post-view.open { transform:translateY(0); }

.pv-bar {
  height:48px; display:grid; align-items:center;
  grid-template-columns:1fr auto 1fr;
  padding:0 20px; gap:12px;
  border-bottom:1px solid var(--b); flex-shrink:0;
  background:rgba(12,12,12,.95); backdrop-filter:blur(12px);
}
.pv-bar-left  { display:flex; align-items:center; gap:8px; }
.pv-bar-right { display:flex; align-items:center; justify-content:flex-end; }
.pv-home {
  background:none; border:none; color:var(--tx); cursor:pointer;
  font-family:var(--mono); font-size:13px; letter-spacing:.03em;
  padding:6px 10px; border-radius:4px; transition:color .15s, background .15s;
  white-space:nowrap;
}
.pv-home:hover { color:var(--ac); background:var(--bg3); }
.pv-breadcrumb {
  flex:1; font-family:var(--mono); font-size:11px; color:var(--tx3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; letter-spacing:.04em;
}
.pv-breadcrumb a { color:var(--tx3); text-decoration:none; }
.pv-breadcrumb a:hover { color:var(--ac); }
.pv-open {
  font-family:var(--mono); font-size:11px; color:var(--tx3);
  text-decoration:none; letter-spacing:.04em; white-space:nowrap;
  transition:color .15s;
}
.pv-open:hover { color:var(--ac); }

.pv-scroll { flex:1; overflow-y:auto; }

.pv-wrap {
  max-width:760px; margin:0 auto;
  padding:28px 20px 80px;
}

/* Post view: post content */
.pv-sub-link {
  display:inline-block; font-family:var(--mono); font-size:11px; color:var(--ac);
  text-decoration:none; letter-spacing:.04em; opacity:.8; margin-bottom:8px;
  transition:opacity .15s;
}
.pv-sub-link:hover { opacity:1; }
.pv-title {
  font-family:var(--sans); font-size:21px; font-weight:500; line-height:1.35;
  color:var(--tx); margin-bottom:10px; word-break:break-word;
}
.pv-title.is-italic { font-style:normal; }
.pv-meta {
  display:flex; gap:12px; flex-wrap:wrap;
  font-family:var(--mono); font-size:10px; color:var(--tx3); letter-spacing:.03em;
  margin-bottom:16px;
}
.pv-meta .up { color:var(--up); }
.pv-meta a { color:var(--tx3); text-decoration:none; transition:color .15s; }
.pv-meta a:hover { color:var(--ac); }
.pv-media { margin-bottom:16px; }
.pv-media img { width:100%; height:auto; max-height:640px; object-fit:contain; border-radius:6px; background:var(--bg3); }
.pv-media video { width:100%; max-height:640px; border-radius:6px; display:block; background:#000; }
.pv-media iframe { width:100%; aspect-ratio:16/9; border:none; border-radius:6px; display:block; }
.pv-body { margin-bottom:24px; font-size:14px; line-height:1.7; color:#d8d8d8; }
.pv-body .md img { max-height:500px; }

.pv-divider {
  display:flex; align-items:center; gap:12px; margin-bottom:20px;
}
.pv-divider-line { flex:1; height:1px; background:var(--b); }
.pv-divider-label {
  font-family:var(--mono); font-size:11px; color:var(--tx3); letter-spacing:.06em;
  text-transform:uppercase; white-space:nowrap;
}

/* Comment tree in post view */
.comment {
  border-bottom:1px solid var(--b); padding:10px 16px;
}
.comment-header {
  display:flex; align-items:center; gap:8px; margin-bottom:5px;
  flex-wrap:wrap; cursor:pointer; user-select:none;
}
.comment-collapse {
  background:none; border:1px solid var(--b2); border-radius:3px;
  color:var(--tx3); cursor:pointer; font-family:var(--mono);
  font-size:11px; line-height:1; padding:1px 5px; flex-shrink:0;
  transition:color .12s,border-color .12s;
}
.comment-collapse:hover { color:var(--ac); border-color:var(--ac); }
.comment-author { font-family:var(--mono); font-size:10px; font-weight:500; color:var(--ac); cursor:pointer; }
.comment-author:hover { text-decoration:underline; }
.comment-score  { font-family:var(--mono); font-size:10px; color:var(--up); }
.comment-time   { font-family:var(--mono); font-size:10px; color:var(--tx3); }
.comment-body   { font-family:var(--sans); font-size:13px; line-height:1.6; color:#d8d8d8; }
.comment-op {
  font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.04em;
  color:#fff; background:var(--ac); padding:1px 4px; border-radius:2px; flex-shrink:0;
}
.comment-mod {
  font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.04em;
  color:#fff; background:#46d160; padding:1px 4px; border-radius:2px; flex-shrink:0;
}
.comment-admin {
  font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.04em;
  color:#fff; background:#ff585b; padding:1px 4px; border-radius:2px; flex-shrink:0;
}
.comment-author.is-mod { color:#46d160; }
.author-flair {
  font-family:var(--mono); font-size:9px; letter-spacing:.04em;
  background:var(--bg3); color:var(--tx3); padding:1px 5px; border-radius:2px;
  display:inline-flex; align-items:center; gap:2px; flex-shrink:0;
  max-width:160px; overflow:hidden;
}
.author-flair-emoji { width:14px; height:14px; vertical-align:middle; flex-shrink:0; }

/* Post card author link */
.post-author {
  font-family:var(--mono); font-size:10px; color:var(--tx2); cursor:pointer;
  letter-spacing:.03em; background:none; border:none; padding:0;
  transition:color .15s; white-space:nowrap;
}
.post-author:hover { color:var(--ac); }
.post-sub-link {
  font-family:var(--mono); font-size:10px; color:var(--ac); letter-spacing:.03em;
  text-decoration:none; white-space:nowrap; opacity:.8; transition:opacity .15s;
}
.post-sub-link:hover { opacity:1; }

/* ── Lightbox ────────────────────────────────────────────────────────────── */
#lightbox {
  display:none; position:fixed; inset:0; z-index:500;
  background:rgba(0,0,0,.92); align-items:center; justify-content:center;
  cursor:zoom-out;
}
#lightbox.open { display:flex; }
#lightbox-img {
  max-width:94vw; max-height:94vh; object-fit:contain;
  border-radius:4px; cursor:default; user-select:none;
}
.post-media img, .pv-media img, .md img, .gallery-main-img { cursor:zoom-in; }
.comment-deleted > .comment-body { color:#d8d8d8; font-style:italic; }
.comment.collapsed > .comment-body,
.comment.collapsed > .comment-replies { display:none; }
.comment.collapsed > .comment-header { margin-bottom:0; }
.comment-replies {
  margin-left:14px; margin-top:6px;
  border-left:2px solid rgba(255,255,255,.07);
  padding-left:4px;
}
.comment[data-depth="0"] > .comment-replies { border-left-color:rgba(255,107,53,.4); }
.comment[data-depth="1"] > .comment-replies { border-left-color:rgba(255,195,60,.35); }
.comment[data-depth="2"] > .comment-replies { border-left-color:rgba(80,205,110,.3); }
.comment[data-depth="3"] > .comment-replies { border-left-color:rgba(60,175,255,.3); }
.comment[data-depth="4"] > .comment-replies { border-left-color:rgba(175,95,255,.3); }
.comment[data-depth="5"] > .comment-replies { border-left-color:rgba(255,80,148,.3); }
.continue-thread {
  display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.03em;
  color:var(--ac); opacity:.65; text-decoration:none; padding:6px 0;
  transition:opacity .15s;
}
.continue-thread:hover { opacity:1; }
.thread-banner {
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; margin-bottom:12px;
  background:var(--acd); border-radius:4px;
  font-family:var(--mono); font-size:11px; letter-spacing:.03em; color:var(--ac);
}
.thread-banner a { color:inherit; text-decoration:none; }
.thread-banner a:hover { text-decoration:underline; }

/* ── States ──────────────────────────────────────────────────────────────── */
.state { padding:80px 24px; text-align:center; }
.state-icon  { font-family:var(--mono); font-size:32px; margin-bottom:16px; opacity:.3; }
.state-title { font-family:var(--serif); font-size:22px; font-style:italic; color:var(--tx2); margin-bottom:8px; }
.state-sub   { font-family:var(--mono); font-size:11px; color:var(--tx3); letter-spacing:.05em; }

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--b2); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:#3a3a3a; }

/* ── Cross-post banner ───────────────────────────────────────────────────── */
.crosspost-banner {
  font-family:var(--mono); font-size:10px; color:var(--tx3); letter-spacing:.03em;
  margin-bottom:8px; display:flex; align-items:center; gap:4px;
}
.crosspost-banner a { color:var(--ac); text-decoration:none; }
.crosspost-banner a:hover { text-decoration:underline; }

/* ── Comment sort bar (inside post view) ─────────────────────────────────── */
.comment-sort-bar {
  display:flex; flex-wrap:wrap; gap:0;
  border-bottom:1px solid var(--b); margin-bottom:16px;
}
.comment-sort-bar .sort-btn { padding:8px 12px; font-size:10px; }

/* ── Post badges (sticky, OC, spoiler, locked) ───────────────────────────── */
.badge {
  font-family:var(--mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase;
  padding:2px 6px; border-radius:2px; flex-shrink:0;
}
.badge-sticky  { background:rgba(70,209,96,.15);  color:#46d160; }
.badge-oc      { background:rgba(74,158,255,.15); color:var(--ac); }
.badge-spoiler { background:rgba(255,255,255,.08); color:var(--tx3); }
.badge-locked  { background:rgba(255,195,60,.15); color:#ffc33c; }

/* ── Edited timestamp ────────────────────────────────────────────────────── */
.edited-mark {
  font-family:var(--mono); font-size:9px; color:var(--tx3); letter-spacing:.03em;
  opacity:.7; font-style:italic;
}

/* ── Flair filter (clickable flair in feed) ──────────────────────────────── */
.flair.flair-clickable { cursor:pointer; transition:opacity .15s; }
.flair.flair-clickable:hover { opacity:.75; }

/* ── State retry button ──────────────────────────────────────────────────── */
.state-retry-btn {
  margin-top:16px;
  background:transparent; border:1px solid var(--b2); color:var(--tx3);
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  padding:10px 24px; cursor:pointer; border-radius:4px;
  transition:border-color .15s, color .15s;
}
.state-retry-btn:hover { border-color:var(--ac); color:var(--ac); }

/* ── Scope checkbox (search within sub) ──────────────────────────────────── */
.scope-check-label {
  display:flex; align-items:center; gap:5px; flex-shrink:0;
  padding:0 4px 0 12px; border-left:1px solid var(--b);
  font-family:var(--mono); font-size:10px; color:var(--tx2); letter-spacing:.04em;
  cursor:pointer; white-space:nowrap; user-select:none;
}
.scope-check-input {
  accent-color:var(--ac); width:12px; height:12px; cursor:pointer; flex-shrink:0;
}

/* ── Sidebar panel ───────────────────────────────────────────────────────── */
.sidebar-toggle {
  background:none; border:1px solid var(--b2); border-radius:3px; cursor:pointer;
  font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.06em;
  color:var(--tx3); padding:3px 8px; margin:auto 0; transition:color .15s,border-color .15s;
  white-space:nowrap;
}
.sidebar-toggle:hover, .sidebar-toggle.active { color:var(--ac); border-color:var(--ac); }

.sidebar-panel {
  max-width:720px; margin:0 auto 0; padding:0 20px;
  overflow:hidden; max-height:0; transition:max-height .3s ease, padding .3s ease;
}
.sidebar-panel.open { max-height:2000px; padding:16px 20px; }
.sidebar-inner {
  background:var(--bg2); border:1px solid var(--b); border-radius:8px;
  padding:16px 18px;
}
.sidebar-section { margin-bottom:18px; }
.sidebar-section:last-child { margin-bottom:0; }
.sidebar-section-title {
  font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tx3); margin-bottom:10px;
  padding-bottom:6px; border-bottom:1px solid var(--b);
}
.sidebar-desc { font-family:var(--sans); font-size:13px; line-height:1.6; color:var(--tx2); }
.sidebar-rules { list-style:none; display:flex; flex-direction:column; gap:6px; }
.sidebar-rule {
  font-family:var(--sans); font-size:12px; color:var(--tx2); line-height:1.4;
  display:flex; gap:8px; align-items:baseline;
}
.sidebar-rule-num {
  font-family:var(--mono); font-size:10px; color:var(--ac); flex-shrink:0; min-width:16px;
}

/* ── Search type tabs (Posts / Communities / Users) ──────────────────────── */
.search-type-bar {
  max-width:720px; margin:0 auto; padding:0 20px;
  display:flex; gap:0; border-bottom:1px solid var(--b);
}
.search-type-btn {
  background:none; border:none; border-bottom:2px solid transparent;
  padding:9px 14px; margin-bottom:-1px;
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.06em; color:var(--tx3); cursor:pointer;
  text-transform:uppercase; transition:color .15s,border-color .15s;
}
.search-type-btn:hover { color:var(--tx2); }
.search-type-btn.active { color:var(--ac); border-bottom-color:var(--ac); }

/* Community search result card */
.community-card, .user-card {
  background:var(--bg2); border:1px solid var(--b); border-radius:8px;
  padding:14px 16px; display:flex; align-items:center; gap:14px;
  cursor:pointer; transition:border-color .15s;
  opacity:0; transform:translateY(8px); animation:fadeUp .3s ease forwards;
}
.community-card:hover, .user-card:hover { border-color:var(--b2); }
.community-card-icon, .user-card-icon {
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  background:var(--bg3); border:1px solid var(--b2);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:13px; color:var(--ac); font-weight:700;
  overflow:hidden;
}
.community-card-icon img, .user-card-icon img { width:100%; height:100%; object-fit:cover; }
.community-card-body, .user-card-body { flex:1; min-width:0; }
.community-card-name {
  font-family:var(--mono); font-size:12px; color:var(--ac); letter-spacing:.04em; margin-bottom:3px;
}
.community-card-title, .user-card-name {
  font-family:var(--sans); font-size:14px; font-weight:500; color:var(--tx); margin-bottom:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.community-card-desc {
  font-family:var(--sans); font-size:12px; color:var(--tx3); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.community-card-stats, .user-card-stats {
  font-family:var(--mono); font-size:10px; color:var(--tx3); letter-spacing:.03em; margin-top:4px;
}
.community-card-stats span, .user-card-stats span { color:var(--ac); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:680px) {
  /* ── Header ── */
  .header-inner { gap:10px; padding:0 12px; }
  #subreddit-input, #pv-subreddit-input { padding:12px 4px; }

  /* ── Feed ── */
  #feed { padding:12px 12px 80px; gap:10px; }
  /* iOS safe-area bottom padding */
  #feed { padding-bottom:calc(80px + env(safe-area-inset-bottom, 0px)); }

  /* ── Sort bar: scrollable so sidebar/scope chips never overflow viewport ── */
  .sort-bar {
    padding:0 12px;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; flex-wrap:nowrap;
  }
  .sort-bar::-webkit-scrollbar { display:none; }
  .sort-btn, .sidebar-toggle, .nsfw-toggle,
  .time-filter-wrap { flex-shrink:0; }
  /* Scope chip: remove auto-margin so it appears right after nsfw toggle */
  .scope-chip { flex-shrink:0; margin-left:6px; }

  /* ── Context info / sidebar ── */
  .ctx-info { padding:12px 12px 0; }
  .sidebar-panel { padding:0 12px; }
  .sidebar-panel.open { padding:12px; }

  /* ── Post view bar: center column expands to fill remaining space ── */
  .pv-bar { grid-template-columns:auto 1fr auto; padding:0 12px; gap:8px; }
  .pv-search-container { max-width:none; width:100%; }
  .pv-search-wrap { max-width:none; }
  .pv-open { font-size:10px; letter-spacing:0; }

  /* ── Post view content ── */
  .pv-wrap { padding:20px 16px calc(60px + env(safe-area-inset-bottom, 0px)); }
  .pv-title { font-size:18px; }
  /* Cap video height so it doesn't eat the whole screen */
  .pv-media video { max-height:min(640px, 60vh); }

  /* ── Search type tabs: scrollable in case of overflow ── */
  .search-type-bar {
    padding:0 12px;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .search-type-bar::-webkit-scrollbar { display:none; }
  .search-type-btn { flex-shrink:0; }

  /* ── Touch targets: increase tap area for small interactive elements ── */
  .comments-link { padding:5px 0; }
  .post-author    { padding:5px 0; }
  .comment-collapse { padding:5px 9px; font-size:12px; }
  .continue-thread  { padding:8px 0; }
  .gallery-btn      { padding:8px 16px; }

  /* ── Comment tree: reduce indent so deep threads don't overflow ── */
  .comment-replies { margin-left:10px; }

  /* ── Gallery image: don't let it dominate a short screen ── */
  .gallery-stage img { max-height:55vh; }

  /* ── Markdown tables: scroll horizontally instead of overflowing ── */
  .md table { display:block; overflow-x:auto; max-width:100%; }
}