/* =========================================================
   PALCOMIX SOCIAL — IMMERSIVE PROTOTYPE
   Neo-brutalist exhibit aesthetic.
   Deep violet canvas + crisp white poster cards + Oswald.
   Hard black borders, hard offset shadows, skewed buttons.
   ========================================================= */

:root {
  /* ===== Brand tokens (Immersive style guide adapted: violet canvas) ===== */
  --primary:    #4c1d95;   /* deep violet canvas */
  --primary-dk: #3b0764;   /* deeper violet (hover ground, mobile nav) */
  --primary-lt: #6d28d9;   /* lighter violet accent */
  --secondary:  #0023D1;   /* cobalt blue — decorative */
  --accent:     #EC4899;   /* hot pink — decorative */
  --accent-2:   #FBBF24;   /* sunshine yellow — sparingly */
  --success:    #16A34A;
  --warning:    #D97706;
  --danger:     #DC2626;

  --ink:        #111827;   /* near-black — text & borders */
  --ink-soft:   #4B5563;   /* secondary text on white */
  --paper:      #FFFFFF;   /* card surface */
  --paper-2:    #F4EFE4;   /* warm off-white (rare, accent on cards) */
  --text-inv:   #FFFFFF;   /* white text on green */
  --text-inv-soft: rgba(255,255,255,.78);

  /* ===== Lines & shadows ===== */
  --border-w:   3px;
  --border-w-thick: 4px;
  --shadow-sm:  3px 3px 0 var(--ink);
  --shadow:     6px 6px 0 var(--ink);
  --shadow-lg:  10px 10px 0 var(--ink);
  --shadow-pink: 6px 6px 0 var(--accent);
  --shadow-blue: 6px 6px 0 var(--secondary);

  /* ===== Type ===== */
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    'Oswald', 'Arial Narrow', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* ===== Radius — neo-brutalist: SHARP ===== */
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;

  /* ===== Spacing ===== */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
input, textarea { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-inv);
  background: var(--primary);
  /* Subtle dotted overlay for texture, like an old poster */
  background-image:
    radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 22px 22px;
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== App shell — 3-column desktop =====
   Page entry-points wrap the 3 columns in <main class="layout">; that wrapper
   would normally break the grid auto-placement (only one direct child of .app).
   `display: contents` on .layout makes the wrapper invisible to layout while
   keeping its semantic <main> role intact for a11y. The grid then sees the
   3 columns as direct children. */
.app {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 340px;
  gap: 24px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px 24px 64px;
  align-items: start;
}
.layout { display: contents; }

/* ===== Community tag suggestions ===== */
.tag-suggest { margin-top: 1rem; }
.tag-suggest-pending {
  border: 2px solid var(--accent-2, #FBBF24);
  border-radius: 12px; padding: .75rem .9rem; margin-bottom: .75rem;
  background: rgba(251, 191, 36, .10);
}
.tag-suggest-h {
  margin: 0 0 .5rem; font-family: 'Oswald', sans-serif; font-weight: 800;
  font-size: 1rem; text-transform: uppercase; letter-spacing: .03em;
}
.tag-suggest-row {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  padding: .35rem 0; border-top: 1px solid var(--border, #3a2a55);
}
.tag-suggest-row:first-of-type { border-top: none; }
.ts-chip {
  font-weight: 800; font-size: .9rem; padding: .2rem .6rem; border-radius: 999px;
  background: var(--accent, #EC4899); color: #fff;
}
.ts-by { font-size: .82rem; opacity: .8; font-weight: 600; }
.ts-actions { margin-left: auto; display: inline-flex; gap: .4rem; }
.ts-approve {
  font-weight: 800; font-size: .8rem; cursor: pointer;
  background: #10b981; color: #fff; border: 2px solid #10b981;
  padding: .3rem .65rem; border-radius: 8px;
}
.ts-reject {
  font-weight: 800; font-size: .9rem; cursor: pointer; line-height: 1;
  background: transparent; color: #dc2626; border: 2px solid #dc2626;
  padding: .3rem .55rem; border-radius: 8px;
}
.tag-suggest-form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.tag-suggest-form input[name="tag"] {
  flex: 1 1 200px; min-width: 0; padding: .55rem .8rem;
  border: 2px solid var(--border, #3a2a55); border-radius: 10px;
  background: rgba(0, 0, 0, .25); color: inherit; font: inherit; font-size: .95rem;
}
.ts-suggest-btn {
  font-weight: 800; font-size: .88rem; cursor: pointer; white-space: nowrap;
  background: var(--accent-2, #FBBF24); color: #1a1a1a;
  border: 2px solid var(--ink, #111827); padding: .5rem .9rem; border-radius: 10px;
}

/* ===== Ad poster card ===== */
.ad-card { border: 3px solid var(--accent-2, #FBBF24); padding: 0; overflow: hidden; }
.ad-card-link { display: block; text-decoration: none; color: #fff; position: relative; }
.ad-card-media { position: relative; line-height: 0; }
.ad-card-media--noimg {
  min-height: 170px; line-height: normal;
  background: linear-gradient(150deg, #4c1d95, #2e1065);
}
.ad-card-img { width: 100%; display: block; }
.ad-card-badge {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  background: rgba(17, 24, 39, .9); color: var(--accent-2, #FBBF24);
  font-family: 'Oswald', sans-serif; font-weight: 800; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .08em;
  padding: .3rem .6rem; border-radius: 6px; border: 1.5px solid var(--accent-2, #FBBF24);
}
.ad-card-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.6rem 1rem .9rem;
  background: linear-gradient(to top, rgba(0, 0, 0, .9) 25%, rgba(0, 0, 0, .55) 65%, transparent);
  color: #fff;
}
.ad-card-media--noimg .ad-card-caption { position: static; background: none; padding: 1.5rem 1.15rem; }
.ad-card-title {
  font-family: 'Oswald', sans-serif; font-weight: 800; font-size: 1.3rem;
  line-height: 1.15; margin-bottom: .25rem; text-shadow: 0 1px 5px rgba(0, 0, 0, .7);
}
.ad-card-text {
  font-size: .93rem; line-height: 1.4; font-weight: 600;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .7); opacity: .97;
}
.ad-card-link:hover .ad-card-title { text-decoration: underline; }

/* ===== Marketplace feed card ===== */
/* Reuses the ad-card poster structure but is teal-bordered + teal badge so it
   reads as community marketplace, not a Palcomix ad. Internal link (no
   sponsored/nofollow). */
.mp-card { border-color: #14B8A6; }
.mp-card-media--noimg { background: linear-gradient(150deg, #115E59, #042F2E); }
.mp-card-badge {
  color: #5EEAD4; border-color: #14B8A6;
}
.mp-card-meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .8rem;
}
.mp-card-price {
  font-family: 'Oswald', sans-serif; font-weight: 800; font-size: 1.05rem; color: #5EEAD4;
}
.mp-card-cat { font-size: .82rem; opacity: .95; }
.mp-card-seller { font-size: .82rem; font-weight: 700; opacity: .9; }
.mp-card-link:hover .ad-card-title { text-decoration: underline; }

/* ===== Trial-expiry reminder banner ===== */
/* Email-not-confirmed banner — high-contrast call to action (distinct red/amber
   from the gold trial banner). Large + bold for accessibility. */
.verify-banner {
  grid-column: 1 / -1; /* span all 3 columns of .app's grid — it's a direct grid child (the strip lives in header.php, before .layout which is display:contents) */
  display: flex; align-items: center; gap: .85rem;
  margin: 14px 0 0; padding: .9rem 1rem;
  background: #fde68a; color: #1a1205;
  border: 3px solid #b45309; border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25); flex-wrap: wrap;
}
.verify-banner-ico { font-size: 1.9rem; color: #b45309; flex: 0 0 auto; }
.verify-banner-txt { flex: 1 1 240px; min-width: 0; line-height: 1.3; }
.verify-banner-txt strong { display: block; font-family: 'Oswald', sans-serif; font-weight: 800; font-size: 1.1rem; }
.verify-banner-txt span { font-size: .9rem; font-weight: 600; }
.verify-banner-cta {
  flex: 0 0 auto; font-weight: 800; text-decoration: none;
  background: #b45309; color: #fff; border: 2px solid #1a1205;
  box-shadow: var(--shadow-sm); padding: .55rem 1.1rem; border-radius: 10px;
  font-size: .9rem; cursor: pointer;
}
.verify-banner-cta:hover { transform: translate(-1px,-1px); }
.verify-banner-cta:disabled { opacity: .7; cursor: default; }
.verify-banner-note { flex: 1 0 100%; margin-top: 4px; font-weight: 700; font-size: .85rem; color: #1a1205; }

.trial-reminder {
  display: flex; align-items: center; gap: .85rem;
  margin: 14px 0 0;
  padding: .85rem 1rem;
  background: linear-gradient(150deg, rgba(251, 191, 36, .20), rgba(245, 158, 11, .12));
  border: 2px solid var(--accent-2, #FBBF24);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  flex-wrap: wrap;
}
.trial-reminder-ico { font-size: 1.8rem; color: #f59e0b; flex: 0 0 auto; }
.trial-reminder-txt { flex: 1 1 240px; min-width: 0; line-height: 1.3; }
.trial-reminder-txt strong {
  display: block; font-family: 'Oswald', sans-serif; font-weight: 800;
  font-size: 1.05rem; letter-spacing: .01em;
}
.trial-reminder-txt span { font-size: .85rem; opacity: .9; font-weight: 600; }
.trial-reminder-cta {
  flex: 0 0 auto; font-weight: 800; text-decoration: none;
  background: var(--accent-2, #FBBF24); color: #1a1a1a;
  border: 2px solid var(--ink, #111827); box-shadow: var(--shadow-sm);
  padding: .5rem 1rem;
}
.trial-reminder-x {
  flex: 0 0 auto; background: none; border: none; cursor: pointer;
  font-size: 1.6rem; line-height: 1; color: inherit; opacity: .7; padding: .1rem .35rem;
}
.trial-reminder-x:hover { opacity: 1; }

/* ===== Premium perks — luxe grid (become-premium page) ===== */
.prem-perks-wrap { max-width: 840px; margin: 0 0 1.5rem; }
.prem-perks-head {
  display: flex; align-items: center; gap: .55rem; margin: 0 0 1rem;
  font-family: 'Oswald', sans-serif; font-weight: 800; font-size: 1.25rem;
  text-transform: uppercase; letter-spacing: .04em;
}
.prem-perks-head .fa-crown { color: var(--accent-2, #FBBF24); }
.prem-perks-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: .75rem;
}
.prem-perk {
  display: flex; align-items: center; gap: .85rem;
  padding: .9rem 1rem;
  background: linear-gradient(150deg, rgba(124, 58, 237, .20), rgba(46, 16, 101, .30));
  border: 2px solid rgba(251, 191, 36, .45);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.prem-perk:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
  border-color: var(--accent-2, #FBBF24);
}
.prem-perk-ico {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #FBBF24, #f59e0b);
  color: #3b1d00; font-size: 1.05rem;
  box-shadow: 0 2px 6px rgba(245, 158, 11, .4);
}
.prem-perk-txt { font-weight: 700; font-size: .95rem; line-height: 1.35; }

/* ===== Welcome premium-trial modal ===== */
.pw-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 8, 40, 0.74);
  padding: 1rem;
  opacity: 0; transition: opacity .25s ease;
}
.pw-overlay.is-open { opacity: 1; }
.pw-modal {
  position: relative;
  width: 100%; max-width: 420px;
  background: linear-gradient(160deg, #5b21b6 0%, #2e1065 100%);
  color: #fff;
  border: 4px solid var(--accent-2, #FBBF24);
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .6);
  padding: 2.25rem 1.5rem 1.5rem;
  text-align: center;
  transform: scale(.82) translateY(18px);
  transition: transform .3s cubic-bezier(.18, .89, .32, 1.28);
  overflow: hidden;
}
.pw-overlay.is-open .pw-modal { transform: scale(1) translateY(0); }
.pw-close {
  position: absolute; top: 6px; right: 12px;
  background: none; border: none; color: #fff;
  font-size: 2rem; line-height: 1; cursor: pointer; opacity: .85;
}
.pw-close:hover { opacity: 1; }
.pw-crown {
  font-size: 3rem; color: var(--accent-2, #FBBF24);
  animation: pw-bounce 1.5s ease-in-out infinite;
}
@keyframes pw-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.pw-title {
  font-family: 'Oswald', sans-serif; font-weight: 800;
  font-size: 1.6rem; text-transform: uppercase; letter-spacing: .03em;
  margin: .5rem 0 .25rem;
}
.pw-lead { font-size: 1.3rem; font-weight: 900; margin: .25rem 0 .5rem; color: var(--accent-2, #FBBF24); }
.pw-sub  { font-size: .98rem; opacity: .92; margin: 0 0 1.25rem; line-height: 1.5; }
.pw-actions { display: flex; flex-direction: column; gap: .6rem; }
.pw-actions .btn { width: 100%; font-weight: 800; }
.pw-cta { background: var(--accent-2, #FBBF24); color: #1a1a1a; border-color: var(--accent-2, #FBBF24); }
.pw-confetti { position: absolute; inset: 0 0 auto 0; height: 0; pointer-events: none; }
.pw-confetti span { position: absolute; top: -12px; font-size: 1.25rem; animation: pw-fall 3s linear infinite; }
.pw-confetti span:nth-child(1) { left: 8%;  animation-delay: 0s; }
.pw-confetti span:nth-child(2) { left: 24%; animation-delay: .5s; }
.pw-confetti span:nth-child(3) { left: 44%; animation-delay: 1s; }
.pw-confetti span:nth-child(4) { left: 62%; animation-delay: .3s; }
.pw-confetti span:nth-child(5) { left: 78%; animation-delay: .8s; }
.pw-confetti span:nth-child(6) { left: 90%; animation-delay: 1.3s; }
@keyframes pw-fall {
  0%   { transform: translateY(0) rotate(0); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(300px) rotate(330deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pw-crown, .pw-confetti span { animation: none; }
  .pw-overlay, .pw-modal { transition: none; }
}

/* Compose "new post" type switcher: on phones, lay the type buttons out as a
   2×2 grid instead of 3-in-a-row + 1 orphan on the next line. Inline style sets
   the desktop flex; this overrides it only on narrow screens. */
@media (max-width: 560px) {
  .compose-types {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
    width: 100%;
    max-width: 340px;     /* a touch narrower than the screen */
    margin-inline: auto;  /* centered, so it doesn't touch the edges */
  }
  .compose-types > * {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* Wide desktop: render the whole app slightly zoomed-out so there are always
   comfortable purple side gutters and a "framed" composition — the look Alex
   prefers at ~80% browser zoom, without anyone having to zoom manually. Scoped
   to wide viewports (>=1200px) so the tablet/mobile layouts stay full-size.
   Tune the factor to taste: 0.8 == exactly the 80%-zoom screenshot. */
@media (min-width: 1200px) {
  .app { zoom: 0.9; }
  /* Sidebar zoom compensation lives AFTER the .col-left-inner base rule (search
     "zoom override") so source order lets it win. */
}

/* Admin pages: drop the right rail and let the center (tables, queues)
   use the full width. Without this, admin tables get crushed into the
   narrow center column and rows balloon. See header.php (admin-body). */
body.admin-body .app { grid-template-columns: 280px minmax(0, 1fr); }
body.admin-body .col-right { display: none !important; }
@media (max-width: 980px) {
  body.admin-body .app { grid-template-columns: 80px minmax(0, 1fr); }
}
@media (max-width: 720px) {
  body.admin-body .app { grid-template-columns: 1fr; }
}

@media (max-width: 1180px) {
  .app { grid-template-columns: 240px minmax(0, 1fr) 300px; }
}
@media (max-width: 980px) {
  .app { grid-template-columns: 80px minmax(0, 1fr); }
  .col-right { display: none; }
  .nav-label, .brand-name, .brand-dot, .sf-meta, .sf-chevron, .nav-badge, .cta-premium span, .brand-legacy { display: none; }
  .nav-item, .cta-premium { justify-content: center; }
}
@media (max-width: 720px) {
  .app { grid-template-columns: 1fr; padding: 0 0 88px; gap: 0; }
  .col-left { display: none !important; } /* !important defeats the unconditional display:flex at line ~145 — source-order would otherwise win on mobile */
  .col-right { display: none !important; }
}

/* =========================================================
   CARDS — the immersive "poster on the green canvas" pattern
   ========================================================= */
.card,
.featured,
.post,
.profile-header,
.r-section,
.dropdown-content,
.lang-menu,
.search-wrap > .search {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  border: var(--border-w) solid var(--ink);
  border-radius: var(--r-0);
  box-shadow: var(--shadow);
}

/* Decorative geometric blocks that peek BEHIND major cards.
   Strategic: only on .featured, .profile-header, and a marked post.   */
.deco-block {
  position: absolute;
  z-index: -1;
  border: var(--border-w) solid var(--ink);
  background: var(--secondary);
  pointer-events: none;
}
.deco-block.pink { background: var(--accent); }
.deco-block.yellow { background: var(--accent-2); }

/* =========================================================
   LEFT SIDEBAR — 3-zone layout (Wave 8.5):
   brand fixed at top · nav scrolls in middle · footer fixed at bottom.
   Prevents the user-avatar dropdown (logout etc.) from being clipped
   below the viewport on shorter screens or when the nav grows.
   ========================================================= */
/* Outer column fills the full grid row so the sticky inner box has room to
   stay pinned as the page scrolls. */
.col-left {
  align-self: stretch;
}
/* Sticky sidebar, viewport-tall. Brand pinned at top, profile footer pinned at
   the BOTTOM (outside/below the menu), and only the middle <nav> scrolls (the
   pink scrollbar). Height fills the viewport — see the zoom override below for
   the wide-desktop `.app { zoom: 0.9 }` case. */
.col-left-inner {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: calc(100vh - 48px);
  padding-right: 4px;
  overflow: hidden;
}
.col-left-inner > .brand { flex-shrink: 0; }
/* Brand row: the logo + a small "LEGACY" tag beside it (moved out of the nav). */
.brand-row { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.brand-row > .brand { flex: 0 1 auto; min-width: 0; }
.brand-legacy {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  padding: 5px 8px;
  border: 2px solid var(--ink);
  background: var(--accent-2);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 800; font-size: .64rem;
  text-transform: uppercase; letter-spacing: .06em;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.brand-legacy:hover { filter: brightness(1.08); transform: translateY(-1px); }
.col-left-inner > .sidebar-footer-wrap,
.col-left-inner > a.sidebar-footer { flex-shrink: 0; margin-top: auto; }
.col-left-inner > nav.nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}
.col-left-inner > nav.nav::-webkit-scrollbar { width: 8px; }
.col-left-inner > nav.nav::-webkit-scrollbar-track { background: transparent; }
.col-left-inner > nav.nav::-webkit-scrollbar-thumb { background: var(--accent); border: 1px solid var(--ink); }

/* zoom override — must come AFTER the base .col-left-inner rule so it wins.
   On wide desktop the .app is zoom:0.9, which scales the sidebar down and
   leaves a gap below the avatar. Dividing the height by the zoom factor makes
   the box fill the visual viewport. Tune the trailing px to taste. */
@media (min-width: 1200px) {
  .col-left-inner { height: calc(100vh / 0.9 - 36px); }
}

/* Brand wordmark */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--paper);
  border: var(--border-w) solid var(--ink);
  box-shadow: var(--shadow);
  color: var(--ink);
  transform: skew(-4deg);
  transition: transform .12s ease, box-shadow .12s ease;
}
.brand:hover { transform: skew(-4deg) translate(-2px, -2px); box-shadow: var(--shadow-lg); }
.brand > * { transform: skew(4deg); display: inline-block; }
.brand-logo {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--accent);
  border: 2px solid var(--ink);
  color: var(--ink);
  font-size: 1rem;
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1;
}
.brand-dot { color: var(--accent); font-weight: 900; font-size: 1.4rem; line-height: 1; }

/* Nav */
.nav { display: flex; flex-direction: column; gap: 4px; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  border: 2px solid transparent;
  color: var(--text-inv);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .1s ease, background .1s ease, color .1s ease;
}
.nav-item:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.2);
}
.nav-item.is-active {
  background: var(--paper);
  color: var(--ink);
  border: var(--border-w) solid var(--ink);
  box-shadow: var(--shadow-sm);
  transform: translate(-1px, -1px);
}
.nav-icon { width: 22px; text-align: center; font-size: 1.05rem; }
.nav-label { flex: 1; }
.nav-badge {
  font-family: var(--font-mono);
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 2px 6px;
  background: var(--accent-2);
  color: var(--ink);
  border: 2px solid var(--ink);
}

.nav-divider {
  height: 0;
  border-top: 2px dashed rgba(255,255,255,.3);
  margin: 6px 4px;
}

/* Premium CTA — the loudest poster button */
.cta-premium {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 9px 14px;
  margin: 4px 0;
  background: var(--accent-2);
  color: var(--ink);
  border: var(--border-w) solid var(--ink);
  box-shadow: var(--shadow);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  transform: skew(-4deg);
  transition: transform .12s ease, box-shadow .12s ease;
}
.cta-premium > * { transform: skew(4deg); }
.cta-premium:hover {
  transform: skew(-4deg) translate(-2px, -2px);
  box-shadow: var(--shadow-lg);
}

/* Partner Sites dropdown */
.dropdown { width: 100%; }
.dropdown > summary { list-style: none; cursor: pointer; }
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown[open] > summary { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }
.dropdown-content {
  margin: 6px 0 4px 22px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: var(--shadow-sm);
}
.dropdown-content a {
  padding: 6px 8px;
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--ink);
  border-bottom: 1px dashed rgba(0,0,0,.2);
}
.dropdown-content a:last-child { border-bottom: none; }
.dropdown-content a:hover { background: var(--accent); color: var(--paper); }

/* Sidebar footer (current user) */
.sidebar-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--paper);
  border: var(--border-w) solid var(--ink);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  margin-top: auto;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.sidebar-footer:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow); }
.sf-avatar {
  width: 38px; height: 38px;
  border: var(--border-w) solid var(--ink);
  background: var(--accent);
  color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .85rem;
}
.sf-meta { flex: 1; min-width: 0; }
.sf-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1.1;
}
.sf-handle {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--ink-soft);
  margin-top: 2px;
}
.sf-chevron { font-size: .7rem; color: var(--ink-soft); }

/* =========================================================
   CENTER COLUMN
   ========================================================= */
.col-center {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

/* Search bar */
.search-wrap { position: relative; }
/* Pin the feed search bar to the top of the central column (desktop). The wrap
   gets an opaque band background so posts scroll cleanly underneath it. The
   mobile @media block further down re-tunes this for small screens. */
.col-center > .search-wrap {
  position: sticky;
  top: 24px;            /* matches the .app 24px top padding so it pins exactly
                           where it starts — no jump — and aligns with the
                           top:24px side panels. */
  z-index: 30;
  background: var(--primary);
  padding: 0 0 12px;   /* card flush at the top (aligned with side panels);
                          opaque band below so posts scroll cleanly under it. */
}
/* Cover the 24px strip BETWEEN the viewport top and the pinned bar, so posts
   scrolling up don't peek out above the search bar before leaving the screen. */
.col-center > .search-wrap::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 26px;
  background: var(--primary);
}
.search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--paper);
  color: var(--ink);
}
.search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: .02em;
}
.search input::placeholder {
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.search > i { color: var(--ink); font-size: 1.05rem; }
.search-kbd {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 8px;
  background: var(--primary);
  color: var(--text-inv);
  border: 2px solid var(--ink);
}
/* "/" keyboard hint is meaningless on touch devices and on mobile it sits
   under the floating hamburger button — hide it ≤720px. */
@media (max-width: 720px) {
  .search-kbd { display: none; }
}

/* =========================================================
   BBCode toolbar + rendered tag styles
   ========================================================= */
.bbcode-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px;
  border: 2px solid var(--border, #3a2a55);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}
.bbcode-toolbar button {
  min-width: 36px;
  height: 32px;
  padding: 0 10px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-weight: 800;
  font-family: inherit;
  font-size: .9rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.bbcode-toolbar button:hover {
  background: var(--ink);
  color: var(--paper);
}
.bbcode-toolbar button[data-bb="b"]      { font-weight: 900; }
.bbcode-toolbar button[data-bb="i"]      { font-style: italic; }
.bbcode-toolbar button[data-bb="u"]      { text-decoration: underline; }
.bbcode-toolbar button[data-bb="big"]    { font-size: 1.05rem; }
.bbcode-toolbar button[data-bb="small"]  { font-size: .75rem; }

/* Rendered BBCode in post bodies */
.post-body .bb-big   { font-size: 1.25em; }
.post-body .bb-small { font-size: .82em; }
.post-body ul,
.post-body ol { margin: .35rem 0 .35rem 1.4rem; padding: 0; }
.post-body li { margin: .1rem 0; }

/* =========================================================
   FEATURED — Autor destacado (the BIG poster)
   ========================================================= */
.featured {
  padding: 0;
  overflow: visible;
}
.featured::before,
.featured::after {
  content: "";
  position: absolute;
  z-index: -1;
  border: var(--border-w) solid var(--ink);
  pointer-events: none;
}
.featured::before {
  /* Cobalt block peeking top-right */
  width: 120px; height: 120px;
  top: -18px; right: -18px;
  background: var(--secondary);
  transform: rotate(8deg);
}
.featured::after {
  /* Hot pink block peeking bottom-left */
  width: 90px; height: 90px;
  bottom: -20px; left: -20px;
  background: var(--accent);
  transform: rotate(-12deg);
}

.featured-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: var(--border-w) solid var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.tag i { color: var(--accent-2); }
.icon-btn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: transparent;
  color: var(--paper);
  font-size: 1rem;
  transition: transform .1s ease, color .1s ease;
}
.icon-btn:hover { color: var(--accent-2); transform: scale(1.15); }

/* Featured hero — bold poster art block */
.featured-hero {
  height: 140px;
  background:
    linear-gradient(135deg, var(--accent) 0%, var(--accent) 50%, var(--secondary) 50%, var(--secondary) 100%);
  position: relative;
  border-bottom: var(--border-w) solid var(--ink);
  overflow: hidden;
}
.featured-hero::before {
  /* Big stylized P */
  content: "P";
  position: absolute;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 14rem;
  line-height: .8;
  color: rgba(0,0,0,.18);
  top: -30px;
  left: 20px;
  letter-spacing: -.08em;
}
.featured-hero::after {
  /* Diagonal stripes for poster feel */
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0,
    transparent 18px,
    rgba(0,0,0,.08) 18px,
    rgba(0,0,0,.08) 19px
  );
}

.featured-body {
  display: flex;
  gap: 16px;
  padding: 18px 18px 16px;
  position: relative;
}
.featured-avatar {
  width: 88px; height: 88px;
  margin-top: -60px;
  background: var(--ink);
  color: var(--paper);
  border: var(--border-w-thick) solid var(--ink);
  outline: 4px solid var(--paper);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.4rem;
  letter-spacing: .04em;
  position: relative;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}
.verified-badge {
  position: absolute;
  bottom: -6px; right: -6px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: var(--secondary);
  color: var(--paper);
  border: 2px solid var(--ink);
  font-size: .7rem;
}
.featured-info { flex: 1; min-width: 0; }
.featured-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2rem;
  letter-spacing: .01em;
  text-transform: uppercase;
  line-height: 1;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.featured-name .check { color: var(--secondary); font-size: 1.1rem; }
.featured-handle {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .82rem;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.featured-bio {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .98rem;
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 10px;
}
.featured-stats {
  display: flex;
  gap: 18px;
  font-family: var(--font-display);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-soft);
}
.featured-stats span { display: inline-flex; align-items: baseline; gap: 6px; }
.featured-stats strong {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}

/* Featured rotator — promo strip at bottom */
.featured-rotator {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--primary);
  color: var(--paper);
  border-top: var(--border-w) solid var(--ink);
}
.rotator-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--accent-2);
  color: var(--ink);
  border: var(--border-w) solid var(--ink);
  font-size: 1.1rem;
  flex-shrink: 0;
}
/* When the latest post/comic has an image, show its thumbnail — a small tilted
   poster with a hard shadow (matches the mockup) instead of the generic icon. */
.rotator-icon--thumb {
  background: transparent;
  border: 0;
  overflow: visible;
  width: auto;          /* let the box size to the natural-ratio thumbnail */
  min-width: 44px;
  margin-top: -8px;     /* nudge up a few px (moved off the img so the paper aligns) */
}
.rotator-thumb-link { position: relative; display: inline-block; line-height: 0; }
/* Blank "paper / magazine page" peeking out behind the thumbnail: same size,
   nudged down-left, tilted 2° more, with its own soft shadow. */
.rotator-thumb-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  border: 2px solid var(--ink);
  box-shadow: 2px 3px 0 rgba(0,0,0,.25);
  transform: translate(-4px, 5px) rotate(-9deg);
  z-index: 0;
}
.rotator-thumb {
  height: 72px;         /* fixed height, width auto → keeps original proportions */
  width: auto;
  max-width: 120px;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 1;
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  transform: rotate(-7deg);
  transition: transform .12s ease;
}
.rotator-thumb-link:hover .rotator-thumb { transform: rotate(-7deg) translateY(-2px); }

/* ===== Repost (quote-repost) ===== */
.repost-indicator {
  display: flex; align-items: center; gap: .4rem;
  font-size: .8rem; font-weight: 800; opacity: .7;
  color: var(--ink); margin: 0 0 .3rem;
}
.repost-indicator i { color: #10b981; }
/* Pinned-post label (profile wall) + the author's pin toggle in the header. */
.pin-indicator {
  display: flex; align-items: center; gap: .4rem;
  font-size: .82rem; font-weight: 800; opacity: .95;
  color: #f59e0b; margin: 0 0 .35rem;
  text-transform: uppercase; letter-spacing: .03em;
}
.pin-toggle { color: var(--ink); opacity: .55; }
.pin-toggle:hover { opacity: 1; }
.pin-toggle.is-pinned { color: #f59e0b; opacity: 1; transform: rotate(20deg); }
.repost-embed {
  display: block; text-decoration: none; color: var(--ink);
  border: 2px solid var(--ink);
  background: rgba(0,0,0,.035);
  padding: .7rem .85rem; margin: .5rem 0 0;
}
.repost-embed:hover { background: rgba(0,0,0,.06); }
.repost-embed-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.repost-embed-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.repost-embed-avatar--fb { display: grid; place-items: center; background: #4c1d95; color: #fff; font-weight: 800; font-size: .8rem; }
.repost-embed-name { font-weight: 800; font-size: .9rem; }
.repost-embed-text { font-size: .92rem; line-height: 1.4; margin-bottom: .4rem; word-wrap: break-word; }
.repost-embed-img { max-width: 100%; max-height: 320px; border: 2px solid var(--ink); display: block; }
.repost-embed--gone { opacity: .6; font-style: italic; font-size: .9rem; }
.post-action.repost:hover i { color: #10b981; }

/* Admin users list — clickable avatar+name → profile. */
.admin-user-link:hover .admin-user-name { text-decoration: underline; }
.admin-user-link:hover img, .admin-user-link:hover > div:first-child { filter: brightness(1.08); }
.rotator-body { flex: 1; min-width: 0; }
.rotator-kicker {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 2px;
}
.rotator-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: .01em;
  line-height: 1.15;
  text-transform: uppercase;
}
.rotator-sub {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: .85rem;
  color: var(--text-inv-soft);
  margin-top: 2px;
}

/* =========================================================
   BUTTONS — the skewed poster blocks
   ========================================================= */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--paper);
  color: var(--ink);
  border: var(--border-w) solid var(--ink);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  transform: skew(-4deg);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  white-space: nowrap;
}
.btn > * { transform: skew(4deg); }
.btn:hover {
  transform: skew(-4deg) translate(-2px, -2px);
  box-shadow: var(--shadow);
}
.btn-primary {
  background: var(--accent-2);
  color: var(--ink);
}
.btn-secondary {
  background: var(--paper);
}
.btn-ghost {
  background: transparent;
  color: var(--text-inv);
  border-color: var(--text-inv);
  box-shadow: 3px 3px 0 var(--text-inv);
}
.btn-ghost:hover { box-shadow: 6px 6px 0 var(--text-inv); }

/* Small follow buttons in sidebars */
.btn-small {
  padding: 6px 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn-small:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.btn-follow { background: var(--ink); color: var(--paper); }
.btn-following { background: var(--paper); color: var(--ink); }

/* =========================================================
   POSTS
   ========================================================= */
.post { padding: 16px 18px 12px; }

/* Wave R2 — shadowbanned author's post, shown ONLY to staff. Grey wash +
   a capsule so a moderator can spot "harmless post from a shadowbanned
   user" at a glance. Regular users never see this state (the post is
   hidden from their feeds entirely). */
.post.is-shadow {
  position: relative;
  background: #e5e7eb;
  filter: grayscale(0.35);
}
.post.is-shadow .post-body,
.post.is-shadow .post-author,
.post.is-shadow .post-sub { color: #4b5563; }
.shadow-capsule {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding: 3px 10px;
  background: #6b7280;
  color: #fff;
  font-family: var(--font-mono, monospace);
  font-weight: 800;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  border: 2px solid var(--ink);
}

/* One occasionally marked post gets a pink deco block — strategic. */
.post.has-deco { overflow: visible; }
.post.has-deco::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 70px; height: 70px;
  top: -16px; right: -16px;
  background: var(--accent);
  border: var(--border-w) solid var(--ink);
  transform: rotate(10deg);
  pointer-events: none;
}

.post-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.post-avatar {
  width: 46px; height: 46px;
  border: var(--border-w) solid var(--ink);
  background: var(--accent);
  color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .85rem;
  letter-spacing: .04em;
  flex-shrink: 0;
}
.post-meta { flex: 1; min-width: 0; }
/* The post header's overflow ⋯ menu is a <details class="dropdown">. The
   global .dropdown rules give it width:100% and place .dropdown-content
   inline (position:relative) — which works in the sidebar but here it
   eats the entire flex row, collapsing .post-meta to 0 width so each
   word wraps to its own line. Scope the post header so the trigger is
   a fixed-size icon and the menu floats absolutely. */
.post-head .dropdown {
  width: auto;
  flex: 0 0 auto;
  position: relative;
}
.post-head .dropdown-content {
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  width: max-content;
  min-width: 180px;
  max-width: 260px;
  margin: 4px 0 0;
  z-index: 20;
}
.post-author {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.1;
}
.post-author .check { color: var(--secondary); font-size: .85rem; margin-left: 4px; }
/* TEMP placeholder premium badge — gold pill, high-contrast + text label
   (color + word, not color alone). Replace styling when the real badge ships. */
.premium-badge {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 6px; padding: 2px 9px; border-radius: 999px;
  background: #f5b301; color: #1a1205; border: 2px solid #1a1205;
  font-size: .8rem; font-weight: 800; line-height: 1.3; white-space: nowrap;
  vertical-align: middle;
}
.premium-badge i { font-size: .8rem; }
.profile-name .premium-badge { font-size: .9rem; padding: 3px 11px; }

/* Premium crown — sits above the avatar, tilted slightly left. Gold with a soft
   shadow so it reads on any background. */
.premium-crown {
  position: absolute;
  color: #FFC83D;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
  pointer-events: none;
  z-index: 3;
}
/* Comments: small, touching the top-left edge of the 38px circle. */
.premium-crown--sm {
  font-size: .82rem;
  top: -7px;
  left: -3px;
  transform: rotate(-22deg);
}
/* Profile: bigger, on top of the head (top-centre) of the square avatar. */
.premium-crown--lg {
  font-size: 1.7rem;
  top: -16px;
  left: 50%;
  transform: translateX(-62%) rotate(-15deg);
}
.post-sub {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: .75rem;
  color: var(--ink-soft);
  margin-top: 2px;
}
.post .icon-btn { color: var(--ink); }
.post .icon-btn:hover { color: var(--accent); }

.post-body p {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink);
}
.post-body strong {
  font-weight: 700;
  color: var(--ink);
  background: linear-gradient(transparent 60%, var(--accent-2) 60%);
  padding: 0 2px;
}

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tag-chip {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  padding: 3px 8px;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  letter-spacing: .02em;
}
.tag-chip:hover { background: var(--accent); color: var(--paper); }

/* External image in posts */
.post-image {
  margin: 12px -18px;
  border-top: var(--border-w) solid var(--ink);
  border-bottom: var(--border-w) solid var(--ink);
  background: var(--paper-2);
  min-height: 280px;
  display: grid; place-items: center;
  position: relative;
  background-image:
    repeating-linear-gradient(45deg, transparent 0, transparent 30px, rgba(0,0,0,.04) 30px, rgba(0,0,0,.04) 31px);
}
/* Wave J (F2-10) — CLS bound: the wrapper has min-height:280px reserve,
 * and the img must be constrained so a tall portrait image doesn't blow
 * the card width. object-fit:contain keeps aspect ratio without crop. */
.post-image img {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 720px;
  object-fit: contain;
}
.post-image .ph {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--ink-soft);
  text-align: center;
  padding: 20px;
  letter-spacing: .04em;
}

/* Comic grid (2x2) */
.comic-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 0 4px;
}
.comic-page {
  aspect-ratio: 3/4;
  border: var(--border-w) solid var(--ink);
  background: var(--paper-2);
  position: relative;
  display: grid; place-items: center;
  overflow: hidden;
  box-shadow: 3px 3px 0 var(--ink);
}
.comic-page.p1 { background: linear-gradient(135deg, #FCE7F3 0%, #F9A8D4 100%); }
.comic-page.p2 { background: linear-gradient(135deg, #DBEAFE 0%, #93C5FD 100%); }
.comic-page.p3 { background: linear-gradient(135deg, #FEF3C7 0%, #FCD34D 100%); }
.comic-page.p4 { background: linear-gradient(135deg, #D1FAE5 0%, #6EE7B7 100%); }
.comic-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, transparent 0, transparent 14px, rgba(0,0,0,.06) 14px, rgba(0,0,0,.06) 15px);
}
.comic-page-label {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .1em;
  padding: 4px 10px;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
}

.comic-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  margin-top: 8px;
}
.nav-arrow {
  width: 40px; height: 40px;
  background: var(--paper);
  color: var(--ink);
  border: var(--border-w) solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  display: grid; place-items: center;
  font-size: 1rem;
  transition: transform .12s ease, box-shadow .12s ease;
}
.nav-arrow:hover:not([disabled]) {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--ink);
  background: var(--accent-2);
}
.nav-arrow[disabled] { opacity: .35; cursor: not-allowed; }
.comic-page-info {
  flex: 1;
  text-align: center;
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--ink);
}
.comic-page-info strong { color: var(--secondary); font-weight: 700; }
.comic-page-info a { color: var(--secondary); text-decoration: underline; font-weight: 700; }

/* Single hero comic page (comic-post page) */
.comic-hero-page {
  aspect-ratio: 3/4;
  max-height: 560px;
  margin: 12px -18px;
  border-top: var(--border-w) solid var(--ink);
  border-bottom: var(--border-w) solid var(--ink);
  background:
    linear-gradient(180deg, #FEF3C7 0%, #FBBF24 60%, #F472B6 100%);
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.comic-hero-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, transparent 0, transparent 30px, rgba(0,0,0,.05) 30px, rgba(0,0,0,.05) 31px);
}
.comic-hero-page::after {
  content: "PALCOMIX";
  position: absolute;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 7rem;
  letter-spacing: -.05em;
  color: rgba(0,0,0,.06);
  bottom: -30px;
  right: -10px;
  line-height: 1;
}

/* Post footer reactions */
.post-foot {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-top: 12px;
  border-top: 2px dashed rgba(0,0,0,.15);
  margin-top: 8px;
}
.pf-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  color: var(--ink);
  border: 2px solid transparent;
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 600;
  transition: transform .1s ease, background .1s ease, border-color .1s ease;
}
.pf-btn:hover {
  background: var(--paper-2);
  border-color: var(--ink);
}
.pf-btn.like:hover { color: var(--accent); }
.pf-btn.comment:hover { color: var(--secondary); }
.pf-btn.share:hover { color: var(--primary); }
.pf-btn.save:hover { color: var(--accent-2); }
.pf-btn i { font-size: 1.05rem; }
.pf-count {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .82rem;
}
.pf-btn:last-child { margin-left: auto; }

/* =========================================================
   PROFILE HEADER
   ========================================================= */
.profile-header { padding: 0; overflow: visible; position: relative; }

/* Facebook-style camera buttons to edit cover / avatar from the profile.
   High-contrast (amber + thick dark border) for low-vision readability. */
.profile-cam {
  position: absolute;
  z-index: 4;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  background: var(--accent-2, #FBBF24);
  color: #1a1a1a;
  border: 3px solid var(--ink, #111827);
  box-shadow: var(--shadow-sm);
}
.profile-cam:hover { filter: brightness(1.08); transform: translate(-1px, -1px); }
.profile-cam i { pointer-events: none; }
.profile-cam--cover  { top: 12px; right: 12px; width: 46px; height: 46px; border-radius: 10px; font-size: 1.2rem; }
.profile-cam--avatar { right: -8px; bottom: -8px; width: 40px; height: 40px; border-radius: 50%; font-size: 1.05rem; }

/* Positioning context so the avatar camera sits on the avatar's corner.
   Carries the same -76px lift the bare .profile-avatar used. */
.profile-avatar-wrap { position: relative; width: 110px; height: 110px; margin-top: -76px; flex: 0 0 auto; }
.profile-avatar-wrap > .profile-avatar { margin-top: 0; }
.profile-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 110px; height: 110px;
  top: -22px; right: -22px;
  background: var(--secondary);
  border: var(--border-w) solid var(--ink);
  transform: rotate(-10deg);
  pointer-events: none;
}
.profile-header::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 80px; height: 80px;
  bottom: 40px; left: -22px;
  background: var(--accent);
  border: var(--border-w) solid var(--ink);
  transform: rotate(14deg);
  pointer-events: none;
}

.profile-cover {
  height: 180px;
  border-bottom: var(--border-w) solid var(--ink);
  background:
    linear-gradient(135deg, var(--accent) 0%, var(--accent) 50%, var(--accent-2) 50%, var(--accent-2) 100%);
  position: relative;
  overflow: hidden;
}
.profile-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, transparent 0, transparent 22px, rgba(0,0,0,.08) 22px, rgba(0,0,0,.08) 23px);
}
.profile-cover::after {
  content: "EXHIBIT";
  position: absolute;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 5rem;
  letter-spacing: .05em;
  color: rgba(0,0,0,.18);
  bottom: -10px;
  left: 20px;
  text-transform: uppercase;
  line-height: 1;
}
.profile-cover.cover-user {
  background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary) 55%, var(--primary-lt) 55%, var(--primary-lt) 100%);
}
.profile-cover.cover-user::after { content: "PROFILE"; color: rgba(255,255,255,.2); }
/* When a real cover image is set, drop the decorative watermark text and the
   diagonal stripe overlay so the uploaded image shows clean (and no faint
   ghost letters — accessibility: no low-contrast text over images). */
.profile-cover.has-cover::before,
.profile-cover.has-cover::after { content: none; display: none; }

.profile-body {
  padding: 18px 22px 16px;
  position: relative;
}
.profile-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 6px;
}
.profile-avatar {
  width: 110px; height: 110px;
  margin-top: -76px;
  background: var(--ink);
  color: var(--paper);
  border: var(--border-w-thick) solid var(--ink);
  outline: 5px solid var(--paper);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.8rem;
  position: relative;
  box-shadow: var(--shadow);
}
.profile-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.profile-actions .btn { padding: 8px 14px; font-size: .8rem; }
.profile-actions .btn-ghost { color: var(--ink); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); background: transparent; }
.profile-actions .btn-ghost:hover { box-shadow: 5px 5px 0 var(--ink); }

.profile-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.4rem;
  letter-spacing: .01em;
  text-transform: uppercase;
  line-height: 1;
  margin: 4px 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.profile-handle {
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.role-pill {
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 8px;
  background: var(--accent-2);
  color: var(--ink);
  border: 2px solid var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.role-pill i { font-size: .7rem; }
.profile-bio {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: .98rem;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 12px;
  max-width: 540px;
}
.profile-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px 14px;
  background: var(--primary);
  color: var(--paper);
  border: var(--border-w) solid var(--ink);
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.profile-stats span { display: inline-flex; align-items: baseline; gap: 6px; }
.profile-stats strong {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--accent-2);
}

/* Tabs */
.tabs {
  display: flex;
  gap: 0;
  border-top: var(--border-w) solid var(--ink);
  margin: 14px -22px -16px;
  background: var(--ink);
}
.tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 12px;
  background: var(--ink);
  color: var(--text-inv-soft);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-right: 2px solid rgba(255,255,255,.15);
  cursor: pointer;
  position: relative;
  transition: background .12s ease, color .12s ease;
}
.tab:last-child { border-right: none; }
.tab:hover { color: var(--accent-2); }
.tab.is-active {
  background: var(--accent-2);
  color: var(--ink);
}
.tab.is-active::after {
  content: "";
  position: absolute;
  inset: 0 0 -3px 0;
  border-bottom: 3px solid var(--accent-2);
}

/* =========================================================
   RIGHT SIDEBAR
   ========================================================= */
/* The right panel grows to its full natural height and scrolls with the page
   (there's nothing below it). No inner max-height / overflow, so there's no
   separate scrollbar inside the box — Alex's request: stretch it down instead
   of scrolling a little pane. */
/* Sticky right rail with its OWN scrollbar. max-height fills the viewport (so
   it reaches the bottom) and the cards scroll inside when they overflow; short
   content just sizes to itself (no empty box). The zoom override below fills
   the visual viewport under the wide-desktop .app { zoom: 0.9 }. */
.col-right {
  position: sticky;
  top: 24px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}
.col-right::-webkit-scrollbar { width: 8px; }
.col-right::-webkit-scrollbar-track { background: transparent; }
.col-right::-webkit-scrollbar-thumb { background: var(--accent); border: 1px solid var(--ink); }
/* zoom override — AFTER the base rule so source order lets it win (matches the
   left sidebar). Tune the trailing px to taste. */
@media (min-width: 1200px) {
  .col-right { max-height: calc(100vh / 0.9 - 36px); }
}

/* Top icon row — pinned to the top of the (scrolling) right rail so the icons
   (notifications, messages, language, profile, settings) stay put while the
   cards scroll underneath. Opaque band + padding/negative-margin so cards pass
   cleanly under it without peeking through the gap. */
.right-icons {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;  /* spread icons edge-to-edge so the row fills the column width (aligns with the cards below) */
  gap: 4px;
  flex-wrap: nowrap;        /* always one row — never let a button drop below */
  background: var(--primary);
  padding-bottom: 16px;
  margin-bottom: -16px;
}
.right-icon-btn {
  position: relative;
  flex: 0 1 auto;           /* squares by default; can shrink a hair before ever wrapping */
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: var(--paper);
  color: var(--ink);
  border: var(--border-w) solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-size: 1rem;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.right-icon-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--ink);
  background: var(--accent-2);
}
.right-icon-btn.disabled,
.right-icon-btn[aria-disabled="true"] {
  background: var(--paper-2);
  color: var(--ink-soft);
  opacity: .55;
  cursor: not-allowed;
}
.right-icon-btn.disabled:hover {
  transform: none;
  box-shadow: 3px 3px 0 var(--ink);
  background: var(--paper-2);
}
.right-icon-btn.is-active {
  background: var(--accent-2);
  transform: translate(-1px, -1px);
}
.right-avatar {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .72rem;
}

.notif-dot {
  position: absolute;
  top: -8px; right: -8px;
  min-width: 22px; height: 22px;
  padding: 0 5px;
  display: grid; place-items: center;
  background: var(--accent);
  color: var(--paper);
  border: 2px solid var(--ink);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .68rem;
  border-radius: 999px;
}

/* Language switcher — skewed pill */
.lang-switch { position: relative; }
.lang-switch > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--paper);
  color: var(--ink);
  border: var(--border-w) solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  transform: skew(-4deg);
  transition: transform .12s ease, box-shadow .12s ease;
  height: 42px;
}
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch > summary > * { transform: skew(4deg); display: inline-flex; align-items: center; }
.lang-switch > summary:hover {
  transform: skew(-4deg) translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--ink);
}
.lang-flag {
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.lang-flag-svg {
  display: block;
  border: 1px solid rgba(0,0,0,.25);
  border-radius: 1px;
}
.lang-code { font-weight: 700; }
.lang-caret { font-size: .6rem; }
/* Slim the language pill inside the right-column icon row so all icons fit one line. */
.right-icons .lang-switch > summary { padding: 6px 8px; gap: 4px; height: 38px; letter-spacing: .04em; }
.right-icons .lang-switch { flex: 0 1 auto; min-width: 0; }

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  min-width: 200px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .04em;
  color: var(--ink);
  text-transform: uppercase;
  border: 2px solid transparent;
  cursor: pointer;
}
.lang-option:hover { background: var(--accent-2); border-color: var(--ink); }
.lang-option.is-active { background: var(--ink); color: var(--paper); }
.lang-option.is-active .lang-check { display: inline; }
.lang-check { display: none; margin-left: auto; color: var(--accent-2); }
.lang-native { flex: 1; }

/* Right sidebar sections */
.r-section { padding: 14px 16px 16px; }
.r-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: var(--border-w) solid var(--ink);
}
.r-section-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}
.r-section-link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--secondary);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.r-section-link:hover { color: var(--accent); }

/* Per-card search box in the right rail — routes (GET) to the area's full
   page filtered by ?q=. High-contrast / large per accessibility. */
.r-search { display: flex; gap: 6px; margin: 0 0 12px; }
.r-search input[type="search"] {
  flex: 1; min-width: 0;
  padding: .45rem .6rem;
  border: 2px solid var(--ink);
  background: var(--paper); color: var(--ink);
  font: inherit; font-size: .85rem; font-weight: 600;
}
.r-search button {
  flex-shrink: 0;
  padding: .45rem .65rem;
  border: 2px solid var(--ink);
  background: var(--ink); color: var(--paper);
  cursor: pointer; font-size: .85rem;
}
.r-search button:hover { background: var(--accent); border-color: var(--accent); }

/* Top 10 this week — single large thumbnail in the right rail. */
.top-week-pic {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-sm);
}
.top-week-pic img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .2s ease;
}
.top-week-pic:hover img { transform: scale(1.04); }

.fav-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-bottom: 1px dashed rgba(0,0,0,.15);
  cursor: pointer;
}
.fav-list-item:last-of-type { border-bottom: none; }
.fav-thumb {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 2px solid var(--ink);
  color: var(--paper);
  font-size: .95rem;
  flex-shrink: 0;
}
.fav-thumb.t1 { background: var(--accent-2); color: var(--ink); }
.fav-thumb.t2 { background: var(--accent); }
.fav-thumb.t3 { background: var(--secondary); }
.fav-meta { flex: 1; min-width: 0; }
.fav-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--ink);
  line-height: 1.1;
}
.fav-count {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--ink-soft);
  margin-top: 2px;
}

.new-list-btn {
  width: 100%;
  margin-top: 8px;
  padding: 8px 10px;
  background: transparent;
  color: var(--ink);
  border: 2px dashed var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.new-list-btn:hover { background: var(--accent-2); border-style: solid; }

.user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px dashed rgba(0,0,0,.15);
}
.user-row:last-of-type { border-bottom: none; }
.ur-avatar {
  width: 38px; height: 38px;
  border: 2px solid var(--ink);
  background: var(--accent);
  color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .72rem;
  flex-shrink: 0;
}
.ur-meta { flex: 1; min-width: 0; }
.ur-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .88rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--ink);
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ur-handle {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--ink-soft);
  margin-top: 2px;
}

.comic-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px dashed rgba(0,0,0,.15);
}
.comic-row:last-of-type { border-bottom: none; }
.comic-thumb {
  width: 42px; height: 42px;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--accent-2);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: .8rem;
  letter-spacing: .04em;
  flex-shrink: 0;
}
.cr-meta { flex: 1; min-width: 0; }
.cr-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--ink);
  line-height: 1.1;
}
.cr-author {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--ink-soft);
  margin-top: 2px;
}
.cr-chapter {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .72rem;
  padding: 3px 8px;
  background: var(--secondary);
  color: var(--paper);
  border: 2px solid var(--ink);
  letter-spacing: .05em;
}

/* Avatar color variants used inline */
.av-palcomix { background: var(--ink); color: var(--accent-2); }
.av-inktrix  { background: var(--secondary); color: var(--paper); }
.av-miryjam  { background: var(--accent); color: var(--paper); }
.av-dibu     { background: var(--primary-lt); color: var(--paper); }
.av-tinta    { background: var(--accent-2); color: var(--ink); }
.av-mecha    { background: var(--ink); color: var(--accent); }
.av-nox      { background: var(--danger); color: var(--paper); }

/* =========================================================
   MOBILE — Facebook-style bottom nav layout
   ========================================================= */
.mobile-view .app { padding: 0; max-width: 100%; }
.mobile-view .col-center { padding: 14px 14px 24px; gap: 16px; }

.mobile-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: var(--primary);
  border-bottom: var(--border-w) solid var(--ink);
  margin: -14px -14px 0;
}
.mobile-header .brand {
  padding: 6px 10px;
  box-shadow: 2px 2px 0 var(--ink);
}
.mobile-header .brand-name { font-size: 1.05rem; }
.mobile-header-icons { display: flex; align-items: center; gap: 6px; }
.mobile-header-icons .right-icon-btn { width: 38px; height: 38px; }

.mobile-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--paper);
  color: var(--ink);
  border: var(--border-w) solid var(--ink);
  box-shadow: var(--shadow-sm);
}
.mobile-search input {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: var(--font-display); font-weight: 500; font-size: .95rem;
}
.mobile-search input::placeholder { color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }

/* Bottom nav — MOBILE ONLY (≤720px) */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 50;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
  padding: 8px 6px 10px;
  background: var(--paper);
  border-top: var(--border-w-thick) solid var(--ink);
  box-shadow: 0 -6px 0 var(--ink);
}
@media (min-width: 721px) {
  .bottom-nav { display: none; }
}

/* =========================================================
   Mobile hamburger + slide-in drawer (logged-in only).
   Floats over the viewport. Hidden entirely on desktop.
   Wired up by /social/assets/js/mobile-drawer.js.
   ========================================================= */
.mobile-top-menu {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 60;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--paper);
  border: var(--border-w-thick) solid var(--ink);
  box-shadow: 3px 3px 0 var(--accent, #EC4899);
  font-size: 1.25rem;
  transform: skew(-4deg);
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.mobile-top-menu i { transform: skew(4deg); }
.mobile-top-menu .m-icon-close { display: none; }
/* When drawer is open, hide the hamburger entirely — the X button inside
   the drawer header handles closing, avoiding two overlapping X icons. */
.mobile-top-menu.is-open { display: none; }

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 58;
}
.drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.drawer-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: min(320px, 88vw);
  height: 100vh;
  background: var(--paper);
  border-left: var(--border-w-thick) solid var(--ink);
  z-index: 59;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  box-shadow: -6px 0 0 var(--ink);
}
.drawer-panel.is-open {
  transform: translateX(0);
}

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 0.85rem;
  border-bottom: var(--border-w-thick) solid var(--ink);
  background: var(--paper);
  flex-shrink: 0;
}
.drawer-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.05rem;
  color: var(--ink);
}
.drawer-close-btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--ink);
  cursor: pointer;
  font-size: 1.05rem;
  font-family: inherit;
  padding: 0;
}
.drawer-close-btn:hover {
  background: var(--accent, #EC4899);
  color: var(--ink);
}

.drawer-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.6rem 0.7rem calc(env(safe-area-inset-bottom, 0) + 0.7rem);
  flex: 1;
  overflow-y: auto;
}
.drawer-list a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--ink);
  background: var(--paper);
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
  font-size: 0.92rem;
  box-shadow: 2px 2px 0 var(--ink);
  min-height: 40px;
}
.drawer-list a:hover {
  background: var(--ink);
  color: var(--paper);
}
.drawer-list a i.fa-solid:first-child {
  font-size: 1.05rem;
  width: 1.4rem;
  text-align: center;
  color: inherit;
}
.drawer-list a span {
  flex: 1;
  color: inherit;
}
.drawer-chev {
  opacity: 0.5;
  font-size: 0.8rem;
  color: inherit;
}

/* Logout sits as the last item inside .drawer-list so it scrolls with the
   rest and never gets hidden behind the iOS Safari URL bar. Styled red
   so it stays visually distinct from the navigation items above. */
.drawer-logout-inline {
  margin: 0.4rem 0 0;
  padding: 0;
}
.drawer-logout-inline button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.75rem;
  border: 2px solid #dc2626;
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
  font-weight: 800;
  font-size: 0.92rem;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 2px 2px 0 #dc2626;
  min-height: 40px;
}
.drawer-logout-inline button i.fa-solid {
  font-size: 1.05rem;
  width: 1.4rem;
  text-align: center;
}
.drawer-logout-inline button span {
  flex: 1;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.drawer-logout-inline button:hover {
  background: #dc2626;
  color: var(--paper);
}

@media (min-width: 721px) {
  .mobile-top-menu,
  .drawer-backdrop,
  .drawer-panel { display: none; }
}

.bn-item, .bn-post-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 4px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.bn-item i { font-size: 1.2rem; }
.bn-item .right-avatar { width: 26px; height: 26px; font-size: .65rem; border: 2px solid var(--ink); }
.bn-item .notif-dot { top: 0px; right: 12px; }
.bn-item.is-active {
  color: var(--paper);
  background: var(--ink);
  transform: skew(-4deg);
}
.bn-item.is-active > * { transform: skew(4deg); }

.bn-post-wrap { gap: 2px; }
.bn-post {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: var(--accent);
  color: var(--paper);
  border: var(--border-w) solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-size: 1.2rem;
  transform: skew(-4deg) translateY(-10px);
  transition: transform .12s ease, box-shadow .12s ease;
  position: relative;
}
.bn-post::before {
  /* Pink peeking behind */
  content: "";
  position: absolute;
  inset: -6px;
  z-index: -1;
  background: var(--accent-2);
  border: var(--border-w) solid var(--ink);
  transform: rotate(8deg);
}
.bn-post i { transform: skew(4deg); }
.bn-post:hover { transform: skew(-4deg) translateY(-12px); box-shadow: 5px 5px 0 var(--ink); }

/* =========================================================
   Focus states — accessibility
   ========================================================= */
*:focus-visible {
  outline: 3px solid var(--accent-2);
  outline-offset: 2px;
}
.nav-item:focus-visible,
.btn:focus-visible,
.cta-premium:focus-visible {
  outline-offset: 4px;
}

/* Misc utility */
.check { color: var(--secondary); }

/* =========================================================
   AUTH PAGES (Wave 2.2A — register / login)
   Focused single-column layout: no sidebars, just a white poster
   card centered on the violet canvas.
   ========================================================= */
.auth-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 48px 20px 80px;
  gap: 32px;
  /* Establish positioning context so .auth-lang-switch (top-right floating
     language selector — Wave 2 audit #3) anchors to the shell, not <body>. */
  position: relative;
}
.auth-shell .brand {
  align-self: center;
}
/* Auth pages live inside the 3-column .app grid, which would drop the
   single auth-shell into the narrow 280px left column on desktop (it only
   looked right on mobile because the grid collapses to 1 column there).
   On auth pages, make .app a normal block so the shell spans the full
   width and centers its card. No effect on mobile (already 1 column). */
body.auth-body .app {
  display: block;
}

.auth-card {
  width: 100%;
  max-width: 520px;
  background: var(--paper);
  color: var(--ink);
  border: var(--border-w) solid var(--ink);
  box-shadow: var(--shadow-lg);
  padding: 28px 28px 32px;
  position: relative;
}
/* Decorative pink block peeking from behind the card. */
.auth-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 70px; height: 70px;
  top: -18px; left: -18px;
  background: var(--accent);
  border: var(--border-w) solid var(--ink);
  transform: rotate(-8deg);
}
.auth-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.85rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0 0 4px;
  line-height: 1.1;
  color: var(--ink);
}
.auth-subtitle {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink-soft);
  margin: 0 0 22px;
}
.auth-flash {
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 3px solid var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .02em;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 10px;
}
.auth-flash.is-error   { background: #FECACA; color: #7F1D1D; }
.auth-flash.is-success { background: #BBF7D0; color: #14532D; }
.auth-flash.is-info    { background: #FEF3C7; color: #78350F; }
.auth-flash i { font-size: 1.1rem; }

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
/* Register: two-column layout on desktop so the form fits one screen.
   Collapses to a single column on mobile (keeps the current stacked form). */
.auth-card--register { max-width: 760px; }
/* Compact the register shell so the 2-column form fits one screen. */
.auth-shell--compact { padding-top: 16px; padding-bottom: 24px; gap: 14px; }
.auth-card--register { padding: 20px 26px 24px; }
.auth-card--register .auth-title { margin: 0 0 2px; }
.auth-card--register .auth-subtitle { margin: 0 0 12px; }
.auth-card--register .auth-field { margin-bottom: 11px; }
.auth-card--register fieldset.auth-field { padding: .7rem .85rem !important; }
.auth-card--register .auth-submit { margin-top: 6px; }
.reg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.1rem;
}
.reg-grid .reg-span-2 { grid-column: 1 / -1; }
.reg-roles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
}
.reg-roles .reg-role-card { margin: 0 !important; }
@media (max-width: 760px) {
  .auth-card--register { max-width: 520px; }
  .reg-grid, .reg-roles { grid-template-columns: 1fr; }
}
.auth-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
}
.auth-input {
  width: 100%;
  padding: 12px 14px;
  background: var(--paper);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  outline: none;
  box-shadow: 3px 3px 0 var(--ink);
  transition: box-shadow .12s ease, transform .12s ease;
}
.auth-input:focus {
  box-shadow: 5px 5px 0 var(--accent);
  transform: translate(-1px, -1px);
}
.auth-help {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .85rem;
  color: var(--ink-soft);
}
.auth-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  color: var(--ink);
}
.auth-checkbox-row input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  flex-shrink: 0;
  accent-color: var(--primary);
  cursor: pointer;
}
.auth-checkbox-row label { cursor: pointer; line-height: 1.35; }
.auth-checkbox-row .auth-help { display: block; margin-top: 2px; }

.auth-submit {
  width: 100%;
  margin-top: 4px;
  padding: 14px 18px;
  background: var(--accent-2);
  color: var(--ink);
  border: var(--border-w) solid var(--ink);
  box-shadow: var(--shadow);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transform: skew(-4deg);
  transition: transform .12s ease, box-shadow .12s ease;
}
.auth-submit > span { display: inline-block; transform: skew(4deg); }
.auth-submit:hover { transform: skew(-4deg) translate(-2px, -2px); box-shadow: var(--shadow-lg); }

.auth-footer-link {
  text-align: center;
  margin-top: 22px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .95rem;
  color: var(--ink-soft);
}
.auth-footer-link a {
  color: var(--primary-lt);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.auth-footer-link a:hover { color: var(--accent); }

/* Logout form inside the sidebar dropdown — strip the button chrome
   so it visually matches the sibling <a> links. */
.sf-logout-form { margin: 0; padding: 0; display: block; }
.sf-logout-btn {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 8px 12px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: block;
}
.sf-logout-btn:hover { background: rgba(76, 29, 149, .08); }

/* ============================================================
   Wave 2 audit — Anonymous viewers disabled action footer
   When the viewer is not logged in, post action buttons
   (like/comment/share/save) render with the `disabled` attribute
   and the footer carries `.is-disabled`. We mute the icons and
   ensure the cursor signals non-interactivity, while keeping the
   counts readable (alto contraste — Alex RP accessibility).
   ============================================================ */
.post-foot.is-disabled .pf-btn,
.post-foot .pf-btn[disabled],
.post-foot .pf-btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  filter: grayscale(40%);
}
.post-foot.is-disabled .pf-btn:hover,
.post-foot .pf-btn[disabled]:hover {
  /* prevent hover lift / color change that suggests interactivity */
  transform: none;
  background: transparent;
  color: inherit;
}
.post-foot.is-disabled .pf-count,
.post-foot .pf-btn[disabled] .pf-count {
  /* counts stay legible (accessibility — alto contraste) */
  opacity: 1;
  font-weight: 700;
}
/* The comment action is ALWAYS a real link (read the thread + comment),
   so it must stay inviting even for logged-out viewers — never the muted
   "prohibited" look. It also carries a visible "Comment" label as a CTA. */
.post-foot.is-disabled .pf-btn.comment {
  opacity: 1;
  cursor: pointer;
  filter: none;
}
.post-foot.is-disabled .pf-btn.comment:hover { color: var(--secondary); transform: none; }
.pf-btn.comment .pf-label {
  font-weight: 800;
  font-size: .85rem;
  margin-left: 2px;
}
/* Mobile: drop the word next to the comment icon so it matches the other
   icon-only actions (like, repost, share). Desktop keeps the label. */
@media (max-width: 720px) {
  .pf-btn.comment .pf-label { display: none; }
}
/* Share is a real action for everyone (incl. logged-out) — keep it lit. */
.post-foot.is-disabled .pf-btn.share {
  opacity: 1; cursor: pointer; filter: none;
}
.post-foot.is-disabled .pf-btn.share:hover { color: var(--primary); transform: none; }
.post-share-inline > summary::-webkit-details-marker { display: none; }
.post-share-popover .share-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  background: transparent; border: none; width: 100%;
  text-align: left; cursor: pointer;
  font: inherit; font-size: .85rem; font-weight: 700;
  color: var(--ink); text-decoration: none;
}
.post-share-popover .share-opt:hover { background: var(--ink); color: var(--paper); }
.post-share-popover .share-opt i { width: 18px; text-align: center; }
.pf-btn.download:hover { color: var(--primary); }
/* Toast shown when a logged-out viewer right-clicks a protected image.
   It's a link to sign-in (clickable). */
.pl-toast {
  position: fixed;
  z-index: 9999;
  padding: 8px 12px;
  background: var(--ink);
  color: #fff;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--accent, #EC4899);
  font-weight: 800;
  font-size: .85rem;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  pointer-events: none;       /* enabled only while visible (below) */
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease;
}
.pl-toast.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.pl-toast:hover { background: var(--accent, #EC4899); color: var(--ink); }
.pl-toast i { margin-right: 4px; }

/* Composer image preview (thumbnail before posting). */
.img-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: .5rem;
  padding: 8px;
  border: 2px solid var(--border, #3a2a55);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.25);
}
.img-preview-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border: 2px solid var(--ink);
  border-radius: 6px;
  flex: 0 0 auto;
}
.img-preview-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.img-preview-name { font-weight: 700; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.img-preview-size { font-family: var(--font-mono, monospace); font-size: .72rem; opacity: .7; }
.img-preview-remove {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: transparent;
  border: 2px solid var(--border, #3a2a55);
  border-radius: 6px;
  color: inherit;
  cursor: pointer;
}
.img-preview-remove:hover { background: #dc2626; color: #fff; border-color: #dc2626; }

/* =========================================================
   WAVE 2 AUDIT FIXES — appended 2026-05-25
   - Auth shell language switcher (top-right floating)
   - Featured rotator CSS crossfade animation
   - Share button disabled state polish
   ========================================================= */

/* --- Auth shell: floating compact lang switcher (audit #3) ---
   The auth pages use .auth-shell (no sidebars), so the lang switcher
   has no natural home. Pin a compact version to the top-right corner
   of the viewport. Stays accessible without crowding the auth card.
*/
.auth-lang-switch {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 10;
}

/* =========================================================
   Password show/hide eye toggle (progressive enhancement —
   added by /social/assets/js/password-toggle.js). Works on
   any input[type=password]; styled to sit inside the field.
   ========================================================= */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 44px !important; }
.pw-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--ink, #111827);
  font-size: 1rem;
  padding: 0;
  opacity: .7;
}
.pw-toggle:hover { opacity: 1; }
.pw-toggle:focus-visible { outline: 3px solid var(--accent-2, #7c3aed); outline-offset: 2px; }
.auth-lang-switch .lang-switch {
  /* Compact pill on a contrast background so it's clearly clickable. */
  background: var(--paper);
  border: var(--border-w) solid var(--ink);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 540px) {
  /* On small screens, scoot it down so it doesn't fight the brand block. */
  .auth-lang-switch {
    top: 12px;
    right: 12px;
  }
}

/* --- Featured author rotator: CSS-only crossfade (audit #4) ---
   .featured-rotator-stage stacks N rotator items. With .is-rotating + .items-2
   we crossfade them on a 10s cycle (~5s visible each, 0.6s fade). One item
   is just shown statically — no animation needed when there's nothing to
   rotate to. Respect reduced-motion: snap visibility, no fade animation.
*/
.featured-rotator-stage {
  position: relative;
}
.featured-rotator-stage.is-rotating .featured-rotator-item {
  /* Stack: absolute siblings under the first, which keeps layout height
     stable. The first item sets the box; absolute siblings overlay it. */
}
.featured-rotator-stage.is-rotating .featured-rotator-item + .featured-rotator-item {
  position: absolute;
  inset: 0;
}

.featured-rotator-stage.is-rotating.items-2 .featured-rotator-item {
  animation: featured-rotator-fade 10s ease-in-out infinite;
}
.featured-rotator-stage.is-rotating.items-2 .featured-rotator-item:nth-child(1) {
  animation-delay: 0s;
}
.featured-rotator-stage.is-rotating.items-2 .featured-rotator-item:nth-child(2) {
  animation-delay: -5s; /* offset by half the cycle */
}

@keyframes featured-rotator-fade {
  /* Each item: visible 0%-45%, fading 45%-50%, hidden 50%-95%, fading-in 95%-100%.
     Pairing two with -5s delay gives a smooth crossfade. */
  0%, 45%   { opacity: 1; visibility: visible; }
  50%, 95%  { opacity: 0; visibility: hidden; }
  100%      { opacity: 1; visibility: visible; }
}

@media (prefers-reduced-motion: reduce) {
  .featured-rotator-stage.is-rotating .featured-rotator-item {
    animation: none !important;
  }
  /* Show only the first item — no flicker for reduced-motion users. */
  .featured-rotator-stage.is-rotating .featured-rotator-item + .featured-rotator-item {
    display: none;
  }
}

/* --- Share button disabled state (audit #5) ---
   Keeps the button visible / discoverable but communicates non-interactive.
   High-contrast cursor + reduced opacity ON THE ICON ONLY (count stays
   bold/legible for Alex's RP — accessibility rule from CLAUDE.md). The
   tooltip carries the "coming in Phase 2" message; no hover surprise. */
.pf-btn.is-disabled,
.pf-btn[disabled] {
  cursor: not-allowed;
}
.pf-btn.is-disabled > i,
.pf-btn[disabled] > i {
  opacity: 0.45;
}
.pf-btn.is-disabled:hover,
.pf-btn[disabled]:hover {
  /* Kill the standard hover-lift so disabled really feels disabled. */
  transform: none;
  background: transparent;
}

/* ============================================================
   WAVE 3.2 — post-card action wire-up (inline POST forms)
   Logged-in users see real form-buttons that POST to /social/api/*.
   Each button is wrapped in a tiny form; the form must not break
   the flex row layout of .post-foot.
   ============================================================ */
.post-action-form {
  display: inline-block;
  margin: 0;
  padding: 0;
}
.post-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 2px solid transparent;
  padding: 6px 10px;
  border-radius: var(--r-2);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.post-action:hover:not(:disabled):not(.is-disabled) {
  background: rgba(76, 29, 149, 0.06);
  color: var(--ink);
  border-color: var(--ink);
}
.post-action.is-active {
  color: var(--accent);
}
.post-action.is-active:hover {
  background: rgba(236, 72, 153, 0.1);
  color: var(--accent);
}
.post-action.is-disabled,
.post-action:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* =====================================================================
   WAVE 4.1 — Notifications inbox
   ===================================================================== */

.notif-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.notif-item {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  background: var(--paper);
  border: var(--border-w) solid var(--ink);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  position: relative;
  transition: transform .12s ease, box-shadow .12s ease;
}
.notif-item:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow);
}

/* Unread accent — pink left bar so it pops even when actor avatar is faded. */
.notif-item.is-unread {
  background: #FFF7FB; /* very light pink wash; passes contrast against --ink text */
}
.notif-item.is-unread::before {
  content: '';
  position: absolute;
  left: -4px; top: -3px; bottom: -3px;
  width: 8px;
  background: var(--accent);
  border: 2px solid var(--ink);
}

/* Staff alerts (reports / admin events) — yellow highlight so moderators
   spot them instantly. Defined AFTER .is-unread so a fresh (unread) report
   shows the yellow wash + amber bar rather than the pink ones. Dark --ink
   text on light amber keeps high contrast. */
.notif-item.is-staff {
  background: #FEF3C7;
}
.notif-item.is-staff::before {
  content: '';
  position: absolute;
  left: -4px; top: -3px; bottom: -3px;
  width: 8px;
  background: #D97706;
  border: 2px solid var(--ink);
}
.notif-item.is-staff .notif-text > i { color: #B45309; }

.notif-avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 2px solid var(--ink);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .85rem;
  background: var(--ink);
  color: var(--paper);
  object-fit: cover;
}

.notif-body {
  flex: 1;
  min-width: 0;
}

.notif-text {
  font-size: .98rem;
  line-height: 1.4;
  color: var(--ink);
  font-weight: 500;
}
.notif-text strong {
  font-weight: 800;
  color: var(--ink);
}

.notif-time {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
}

/* "NEW" pill inline with the text — double-channel cue (color + label). */
.notif-new-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  background: var(--accent);
  color: var(--paper);
  border: 2px solid var(--ink);
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: middle;
  border-radius: 3px;
}

.notif-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

/* Inline badge used inside the page header next to the title. */
.notif-badge {
  background: var(--accent);
  color: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 800;
}

/* =====================================================================
   WAVE 4.1 — Settings page
   ===================================================================== */
.settings-section {
  background: var(--paper);
  color: var(--ink);
  border: var(--border-w) solid var(--ink);
  box-shadow: var(--shadow);
  padding: 22px 24px;
  margin-bottom: 24px;
}
.settings-section h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 18px;
  color: var(--ink);
}
.settings-row { margin-bottom: 14px; }
.settings-row label {
  display: block;
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
  color: var(--ink-soft);
}
.settings-row input[type="text"],
.settings-row input[type="email"],
.settings-row input[type="password"],
.settings-row textarea,
.settings-row select {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid var(--ink);
  background: var(--paper);
  font: inherit;
  color: var(--ink);
  border-radius: var(--r-0);
}
.settings-help {
  font-size: .8rem;
  color: var(--ink-soft);
  margin-top: 4px;
}
.settings-locked input { background: var(--paper-2); cursor: not-allowed; }

/* =========================================================
   WAVE 4.1 — Filtered feed pages
   (following.php / fav-comics.php / saved-posts.php)
   ========================================================= */
.empty-state {
  background: var(--paper);
  color: var(--ink);
  border: var(--border-w) solid var(--ink);
  box-shadow: var(--shadow);
  padding: 32px 28px;
  text-align: center;
}
.empty-state h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 8px;
  color: var(--ink);
}
.empty-state p {
  font-size: .95rem;
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.empty-state .btn { display: inline-flex; }

/* Fav comics grid */
.fav-comic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.fav-comic-card {
  background: var(--paper);
  border: var(--border-w) solid var(--ink);
  box-shadow: var(--shadow);
  padding: 12px;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.fav-comic-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-lg);
}
.fav-comic-cover {
  width: 100%;
  aspect-ratio: 3/4;
  background: var(--primary-dk, #3b0764);
  border: 2px solid var(--ink);
  overflow: hidden;
}
.fav-comic-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fav-comic-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--ink);
}
.fav-comic-author {
  font-size: .8rem;
  color: var(--ink-soft);
}

/* ==================================================================
   WAVE 5 — comic_release post variant
   Renders the auto-post that fires when an artist publishes a comic
   or drops a new chapter. High-contrast accent border + bold "NEW
   COMIC" kicker + chunky "Read now" CTA (Alex RP — no subtle styling).
   ================================================================== */
.post.is-comic-release {
  border-color: var(--accent);
  box-shadow: var(--shadow-pink);
}
.post.is-comic-release .post-kicker {
  background: var(--accent);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 4px 10px;
  display: inline-block;
  margin-bottom: 10px;
}
.post.is-comic-release .read-now-cta {
  display: inline-flex;
  align-items: center;
  margin-top: 14px;
  padding: 10px 18px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  border: 2px solid var(--ink);
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.post.is-comic-release .read-now-cta:hover,
.post.is-comic-release .read-now-cta:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-lg);
  outline: none;
}

/* =====================================================================
   WAVE 5 — comic detail + viewer + global comics listing
   ===================================================================== */

.comic-header {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  background: var(--paper);
  color: var(--ink);
  border: var(--border-w) solid var(--ink);
  box-shadow: var(--shadow);
  padding: 22px 24px;
  margin-bottom: 24px;
}
@media (max-width: 640px) {
  .comic-header {
    grid-template-columns: 1fr;
  }
}
.comic-cover {
  width: 100%;
  aspect-ratio: 3/4;
  background: var(--paper-2);
  border: 2px solid var(--ink);
  overflow: hidden;
}
.comic-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.comic-meta h1 {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 0 0 8px;
}
.comic-meta .comic-author {
  font-family: var(--font-mono);
  color: var(--ink-soft);
  font-size: .95rem;
}
.comic-meta .comic-author strong {
  color: var(--ink);
  font-weight: 700;
}
.comic-meta .comic-parody {
  margin-top: 4px;
  font-size: .85rem;
  opacity: .9;
}
.comic-meta .comic-desc {
  margin: 14px 0;
  line-height: 1.5;
}
.comic-meta .comic-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}
.comic-meta .comic-tag-chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--surface-2, rgba(124, 58, 237, .18));
  border: 1px solid var(--accent, #7c3aed);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
}
.comic-meta .comic-tag-chip:hover {
  background: var(--accent, #7c3aed);
  color: #fff;
}
.comic-meta .comic-stats {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-soft);
  align-items: center;
}
.comic-meta .comic-stats .status-badge {
  display: inline-block;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  border: 2px solid var(--ink);
  background: var(--accent-2, #facc15);
  color: var(--ink);
}

/* Page thumbnails grid (comic detail) */
.comic-pages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.comic-page-thumb {
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-sm);
  position: relative;
  display: block;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.comic-page-thumb:hover,
.comic-page-thumb:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow);
  outline: none;
}
.comic-page-thumb img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
}
.comic-page-thumb .page-num {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 700;
  padding: 2px 6px;
  letter-spacing: .05em;
}

/* Viewer (single-page + long-strip) */
.viewer-stage {
  background: var(--paper);
  border: var(--border-w) solid var(--ink);
  box-shadow: var(--shadow);
  padding: 20px;
  text-align: center;
  margin-top: 14px;
}
.viewer-stage img {
  max-width: 100%;
  max-height: 80vh;
  margin: 0 auto;
  display: block;
}
.viewer-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 18px 0;
  gap: 10px;
  flex-wrap: wrap;
}
.viewer-page-indicator {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
}
.viewer-longstrip > div {
  margin-bottom: 12px;
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-sm);
  padding: 4px;
}
.viewer-longstrip img {
  width: 100%;
  height: auto;
  display: block;
}

/* Global comics grid + card (comics.php + profile comics tab) */
.comics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.comic-card {
  background: var(--paper);
  color: var(--ink);
  border: var(--border-w) solid var(--ink);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform .12s ease, box-shadow .12s ease;
}
.comic-card:hover,
.comic-card:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-lg);
  outline: none;
}
.comic-card .cover {
  aspect-ratio: 3/4;
  background: var(--paper-2);
  border-bottom: 2px solid var(--ink);
  overflow: hidden;
}
.comic-card .cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Gallery toolbar (profile comics/pics): sort + search ---- */
.gallery-toolbar {
  display: flex;
  flex-wrap: nowrap;          /* keep everything on one line (desktop) */
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin: 14px 0 4px;
}
.gallery-sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;             /* sort keeps its size; the search shrinks instead */
}
.gallery-sort-label {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-soft);
  margin-right: 2px;
}
.gallery-sort-btn {
  padding: .4rem .85rem;
  font-size: .9rem;
}
.gallery-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  flex: 1 1 auto;            /* take the remaining width on the row */
  min-width: 0;
}
.gallery-search-field {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 2px solid var(--ink);
  padding: .35rem .7rem;
  flex: 1 1 auto;           /* the field fills the leftover space, shrinks if tight */
  min-width: 140px;
}
/* Narrow screens: let the toolbar wrap and the search take its own full row. */
@media (max-width: 720px) {
  .gallery-toolbar { flex-wrap: wrap; }
  .gallery-search { flex-basis: 100%; }
}
.gallery-search-field i { color: var(--ink-soft); }
.gallery-search-field input {
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: .95rem;
  width: 100%;
}
.gallery-search-summary {
  margin: 6px 0 0;
  font-weight: 700;
  color: var(--ink-soft);
}

/* ---- Tag picker (onboarding + settings interests) ---- */
.onboarding-tag-grid label { transition: background .15s, color .15s; color: var(--ink); }
.onboarding-tag-grid label:has(input:checked) {
  background: var(--ink) !important;
  color: #fff !important;
}
.onboarding-tag-grid:not(.show-all) .onboarding-tag-extra { display: none !important; }

/* ---- Page thumbnail lightbox (comic-manage reorder) ---- */
.reorder-thumb { cursor: zoom-in; }
.reorder-thumb:hover { outline: 3px solid var(--accent, #7c3aed); outline-offset: 1px; }
.page-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, .92);
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.page-lightbox.is-open { display: flex; }
.page-lightbox-fig {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 96vw;
}
.page-lightbox-fig img {
  max-width: 96vw;
  max-height: 84vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border: 3px solid #fff;
  background: #fff;
  box-shadow: 0 8px 40px rgba(0, 0, 0, .6);
}
.page-lightbox-cap {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.page-lightbox-close {
  position: fixed;
  top: 16px;
  right: 20px;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1;
  background: #dc2626;
  color: #fff;
  border: 3px solid #fff;
  border-radius: 50%;
  cursor: pointer;
}
.page-lightbox-close:hover { background: #b91c1c; }

/* ---- Numbered gallery pagination ---- */
.pagination-num {
  display: flex;
  flex-wrap: nowrap;          /* keep every button on a single line */
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 22px 0 8px;
  overflow-x: auto;           /* narrow screens scroll instead of wrapping */
  padding-bottom: 4px;
}
.pagination-num-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 34px;
  height: 40px;
  padding: 0 8px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: .92rem;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}
.pagination-num-link:hover {
  background: var(--accent, #7c3aed);
  color: #fff;
}
.pagination-num-link.is-current {
  background: var(--accent, #7c3aed);
  color: #fff;
  cursor: default;
}
.pagination-num-link.is-disabled {
  opacity: .4;
  pointer-events: none;
}
.pagination-num-link.pn-arrow,
.pagination-num-link.pn-skip,
.pagination-num-link.pn-last {
  font-size: .9rem;
}
.pagination-num-link.pn-last {
  background: var(--ink);
  color: var(--paper);
}
.pagination-num-link.pn-last:hover {
  background: var(--accent, #7c3aed);
  color: #fff;
}

.comic-card .meta {
  padding: 6px 10px 8px;
}
.comic-card .title {
  font-family: var(--font-display); /* Oswald — narrow/condensed */
  font-weight: 700;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: 5px;
  line-height: 1.15;
  /* Explicit dark ink — the card <a> carries an inline color:inherit that
     otherwise leaks the dark-theme's light text, making the title white on
     the white meta block (invisible). Keep to one line + ellipsis. */
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* FINISHED badge + page count + comments share one compact row. */
.comic-card .meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.comic-card .author {
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--ink-soft);
  margin-top: 0 !important;
}
.comic-card .status-badge {
  display: inline-block;
  margin-top: 0;
  padding: 2px 6px;
  font-family: var(--font-mono);
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  border: 2px solid var(--ink);
  background: var(--accent-2, #facc15);
  color: var(--ink);
}

/* =====================================================================
   WAVE 5 — admin pages
   ===================================================================== */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.admin-stat-card {
  background: var(--paper);
  border: var(--border-w) solid var(--ink);
  box-shadow: var(--shadow);
  padding: 16px 18px;
}
.admin-stat-card .stat-label {
  font-family: var(--font-mono);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-soft);
}
.admin-stat-card .stat-value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
}
.admin-table {
  width: 100%;
  background: var(--paper);
  border: var(--border-w) solid var(--ink);
  box-shadow: var(--shadow);
  border-collapse: collapse;
  color: var(--ink);
}
.admin-table th {
  font-family: var(--font-display);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 2px solid var(--ink);
  background: var(--paper-2);
}
.admin-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--ink-soft);
  font-size: .88rem;
  vertical-align: middle;
}
/* Admin user-search typeahead dropdown. */
.admin-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  max-height: 320px;
  overflow-y: auto;
}
.admin-suggest-item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--ink-soft);
  color: var(--ink);
}
.admin-suggest-item:last-child { border-bottom: none; }
.admin-suggest-item.is-active,
.admin-suggest-item:hover { background: var(--ink); color: var(--paper); }
.admin-suggest-item img,
.admin-suggest-item .as-ini {
  width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
  display: grid; place-items: center;
  background: #4c1d95; color: #fff; font-weight: 800; font-size: .65rem;
  border: 2px solid var(--ink);
}
.admin-suggest-item .as-name { font-weight: 800; font-size: .88rem; }
.admin-suggest-item .as-email { font-family: var(--font-mono, monospace); font-size: .72rem; opacity: .7; }
.admin-suggest-item .as-role { font-size: .65rem; text-transform: uppercase; background: var(--accent,#EC4899); color:#fff; padding:0 4px; border-radius:3px; }
.admin-suggest-item .as-banned { font-size: .65rem; text-transform: uppercase; background:#dc2626; color:#fff; padding:0 4px; border-radius:3px; }

.admin-table .actions { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.admin-table .actions form { display: inline-flex; margin: 0; }
/* Compact the action controls so the row doesn't balloon to ~180px and you
   can see many more members without scrolling. */
.admin-table .actions a,
.admin-table .actions button {
  padding: 4px 8px;
  font-size: .72rem;
}
.admin-table .actions select { padding: 3px 6px; font-size: .72rem; }
.admin-table .actions input[type="text"] { width: 96px; padding: 4px 6px; font-size: .72rem; }
/* Smaller avatar in the user cell. */
.admin-table td img[style*="border-radius:50%"],
.admin-table td div[style*="border-radius:50%"] {
  width: 28px !important;
  height: 28px !important;
  font-size: .68rem !important;
}

/* =========================================================
   WAVE 6 — anon action modal
   Opens when an anonymous viewer taps a like/save/follow button.
   Native <dialog>, opened by the JS in views/footer.php.
   ========================================================= */
dialog.anon-modal {
  border: var(--border-w) solid var(--ink);
  box-shadow: var(--shadow-lg);
  padding: 28px 32px;
  background: var(--paper);
  color: var(--ink);
  max-width: 420px;
  width: calc(100% - 32px);
}
dialog.anon-modal::backdrop { background: rgba(0, 0, 0, .55); }
dialog.anon-modal h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 12px;
}
dialog.anon-modal p { margin: 0 0 18px; line-height: 1.4; }
dialog.anon-modal .anon-modal-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
dialog.anon-modal button[value="cancel"] {
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 12px 18px;
  min-height: 44px;
  border: 2px solid var(--ink-soft);
  cursor: pointer;
}
dialog.anon-modal button[value="cancel"]:hover {
  background: var(--ink-soft);
  color: var(--paper);
}

/* =========================================================
   WAVE 6 — Comic comments section (comic.php)
   ========================================================= */
.comic-comments-section {
  margin-top: 32px;
}
.comic-comments-section h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin: 0 0 16px;
  color: var(--text-inv, #fff);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.comic-comments-list {
  margin-top: .25rem;
}

/* Small chip rendered on .comic-card / .fav-comic-card to show the
   comment count at a glance. Hugh-contrast, monospaced, bordered —
   reads from across the room (Alex RP accessibility). */
.comic-comments-count-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 700;
  padding: 2px 6px;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
}

/* =====================================================================
   WAVE 6 — admin users + reports
   ===================================================================== */
.admin-filters { display: flex; gap: 12px; margin-bottom: 16px; align-items: center; flex-wrap: wrap; }
.admin-filters select,
.admin-filters input[type="search"] {
  padding: 8px 10px; border: 2px solid var(--ink); font: inherit; background: var(--paper); color: var(--ink); font-weight: 700;
}
.status-badge {
  display: inline-block;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  border: 2px solid var(--ink);
}
.status-active    { background: #16A34A; color: var(--paper); }
.status-banned    { background: #DC2626; color: var(--paper); }
.status-pending   { background: #D97706; color: var(--paper); }
.status-resolved  { background: var(--ink-soft, #6b7280); color: var(--paper); }
.status-dismissed { background: var(--ink-soft, #6b7280); color: var(--paper); }
.status-hidden    { background: #D97706; color: var(--paper); }
.status-deleted   { background: #DC2626; color: var(--paper); }
.report-row {
  background: var(--paper);
  border: var(--border-w) solid var(--ink);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 12px;
}
.report-row .meta {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: .8rem; color: var(--ink-soft);
}
.report-row .detail { margin: 8px 0; font-size: .95rem; color: var(--ink); }
.report-row .actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; }

/* =====================================================================
   WAVE 7 — Search results
   ===================================================================== */
.search-section { margin-bottom: 28px; }
.search-section h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 12px;
  color: var(--text-inv);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.search-section .count {
  font-family: var(--font-mono);
  font-size: .85rem;
  color: var(--text-inv-soft);
  font-weight: 600;
}
.search-user-list,
.search-comic-list,
.search-post-list {
  display: grid;
  gap: 12px;
}
.search-user-list  { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.search-comic-list { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.search-user-card {
  background: var(--paper);
  color: var(--ink);
  border: var(--border-w) solid var(--ink);
  box-shadow: var(--shadow);
  padding: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.search-user-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-lg);
}
.search-user-card .avatar {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}
.search-user-card .name {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1rem;
}
.search-user-card .bio {
  font-size: .85rem;
  color: var(--ink-soft);
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.search-no-results {
  background: var(--paper);
  color: var(--ink);
  border: var(--border-w) solid var(--ink);
  box-shadow: var(--shadow);
  padding: 28px;
  text-align: center;
  margin-top: 14px;
}

/* =====================================================================
   WAVE 7 — Pagination
   ===================================================================== */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin: 28px 0;
  flex-wrap: wrap;
}
.pagination-link {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--paper);
  color: var(--ink);
  border: var(--border-w) solid var(--ink);
  box-shadow: var(--shadow);
  padding: 10px 18px;
  text-decoration: none;
  font-size: .95rem;
}
.pagination-link:hover:not(.is-disabled) {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-lg);
}
.pagination-link.is-disabled {
  opacity: .45;
  cursor: not-allowed;
}
.pagination-page {
  font-family: var(--font-mono);
  font-size: .9rem;
  color: var(--text-inv);
  font-weight: 700;
}

/* =====================================================================
   WAVE 7 — Ad posts (promoted variant of .post)
   ===================================================================== */
.post.is-ad {
  border-color: var(--accent-2);
  box-shadow: 6px 6px 0 var(--accent-2);
  position: relative;
}
.post.is-ad .post-kicker {
  background: var(--accent-2);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: 3px 8px;
  display: inline-block;
  margin-bottom: 10px;
}
.post.is-ad .post-foot {
  display: flex;
  justify-content: flex-end;
  border-top: 1px dashed var(--ink);
  padding-top: 12px;
  margin-top: 12px;
}
.post.is-ad .ad-visit-cta {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 8px 18px;
  border: 2px solid var(--ink);
  text-decoration: none;
  display: inline-flex;
  gap: 6px;
}
.post.is-ad .ad-visit-cta:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow); }

/* WAVE 8 — pagination polish */
.pagination-empty {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  padding: 28px;
  background: var(--paper);
  color: var(--ink);
  border: var(--border-w) solid var(--ink);
  box-shadow: var(--shadow);
  margin: 28px 0;
}
.pagination-empty p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pagination-empty .btn {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  padding: 10px 20px;
  border: 2px solid var(--ink);
  text-decoration: none;
}

/* =========================================================
   WAVE 6.5 MOBILE FIX — RE-APPLIED (Wave 8.4)
   These rules were lost during Wave 7 CSS dedupe because they
   lived only in the deployed copy, not the source-of-truth file.
   Source-order ensures they win over earlier base rules.
   ========================================================= */
@media (max-width: 720px) {
  /* Body clears the 103px fixed bottom-nav */
  body { padding-bottom: 110px; }

  /* Pin search bar to top of feed on mobile */
  .col-center > .search-wrap {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--primary);
    padding: 8px 0;
    margin: 0 -12px;
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Kill horizontal overflow + hide decorative blocks on mobile */
  html, body { overflow-x: hidden; }
  .deco-block { display: none; }

  /* Tap targets ≥ 44px */
  .post-action,
  .icon-btn,
  .pf-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 8px 12px;
  }

  /* Settings inputs ≥ 48px, font-size 16px to prevent iOS zoom */
  .settings-row input[type="text"],
  .settings-row input[type="email"],
  .settings-row input[type="password"],
  .settings-row select,
  .settings-row textarea {
    min-height: 48px;
    padding: 12px;
    font-size: 16px;
  }
}

@media (max-width: 540px) {
  /* Compose submit full-width on narrow phones for thumb reach */
  .compose-form .btn[type="submit"],
  form.compose-form button[type="submit"],
  .compose-form .btn-primary {
    width: 100%;
  }
}

@media (min-width: 540px) and (max-width: 720px) {
  /* 2-up comics grid on small tablets */
  .comics-grid,
  .fav-comic-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================================================
   W15 — Admin mobile guard
   Admin pages are desktop-first by design (data-dense tables,
   bulk operations). On phones we make them survivable rather
   than pretty: tables get a horizontal scrollbar, the stat
   grid wraps cleanly, and a banner reminds the operator that
   the desktop view is intended.
   ========================================================= */
@media (max-width: 720px) {
  .admin-mobile-warning {
    display: block;
    margin: 0 0 12px;
    padding: 10px 14px;
    border: 2px solid var(--ink, #111827);
    background: #facc15;
    color: var(--ink, #111827);
    font-weight: 800;
    font-size: .85rem;
    text-align: center;
  }
  .admin-table,
  .admin-grid,
  .admin-stat-card-row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .admin-table table {
    min-width: 540px;
  }
}
.admin-mobile-warning { display: none; }

/* ── "See more" expander for long (premium) posts ───────────────────
   Clamp by height, no fading gradient (low-contrast fades hurt RP
   readability). The toggle is a bold, obvious high-contrast pill. */
.post-content.is-clamped { max-height: 15.5em; overflow: hidden; }
.post-content.is-clamped.expanded { max-height: none; }
.readmore-btn {
  display: inline-block;
  margin: .5rem 0 .1rem;
  padding: .4rem 1rem;
  font: inherit;
  font-weight: 800;
  font-size: .9rem;
  border: 2px solid #a78bfa;
  background: #7c3aed;
  color: #fff;
  border-radius: 999px;
  cursor: pointer;
}
.readmore-btn:hover, .readmore-btn:focus-visible { background: #6d28d9; }

/* ── Multi-image post gallery (1–4) ─────────────────────────────────
   1 image = full width (handled by .post-image). 2–4 = responsive grid,
   square-cropped via object-fit. Works the same on mobile. */
.post-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.post-gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; border-radius: 6px; }
.post-gallery.g-3 img:nth-child(3) { grid-column: 1 / -1; aspect-ratio: 2 / 1; }

/* Composer thumbnail grid (before posting) */
.img-preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .5rem; margin-top: .5rem; }
.img-preview-cell { position: relative; }
.img-preview-cell .img-preview-thumb { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; border: 2px solid var(--border, #3a2a55); display: block; }
.img-preview-cell .img-preview-size { display: block; font-size: .72rem; opacity: .8; margin-top: .15rem; text-align: center; }
.img-preview-cell .img-preview-remove {
  position: absolute; top: -8px; right: -8px;
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid #fff; background: #dc2626; color: #fff;
  font-size: .8rem; font-weight: 800; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.img-preview-warn { margin: .2rem 0 .4rem; font-size: .82rem; font-weight: 700; color: #facc15; }

/* ── Comic uploader preview (client-side, before submit) ────────────── */
.comic-page-count { margin: .2rem 0 .4rem; font-weight: 800; font-size: .9rem; }
.comic-page-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .5rem; }
.comic-page-cell { position: relative; }
.comic-page-cell img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px; border: 2px solid var(--border, #3a2a55); display: block; }
.comic-page-cell .comic-page-num {
  position: absolute; bottom: 4px; left: 4px;
  background: rgba(0,0,0,.8); color: #fff; font-weight: 800; font-size: .72rem;
  padding: .1rem .4rem; border-radius: 6px;
}
.comic-page-cell:first-child .comic-page-num { background: #7c3aed; }

/* ── Owner "Edit" overlay on comic cards + reorder list ─────────────── */
.comic-card-wrap { position: relative; display: flex; }
.comic-card-wrap > .comic-card { flex: 1; width: 100%; }
.comic-edit-badge {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  background: #7c3aed; color: #fff; font-weight: 800; font-size: .78rem;
  padding: .3rem .6rem; border: 2px solid #fff; border-radius: 8px; text-decoration: none;
}
.comic-edit-badge:hover, .comic-edit-badge:focus-visible { background: #6d28d9; }

/* ── Stories / articles ─────────────────────────────────────────────── */
.story-title { font-family: 'Oswald', sans-serif; font-weight: 800; font-size: 1.3rem; line-height: 1.2; margin: .3rem 0 .5rem; }
.story-teaser { margin: .25rem 0 .6rem; line-height: 1.55; opacity: .92; }
.story-read-cta { display: inline-flex; align-items: center; }
.story-body { line-height: 1.7; font-size: 1.02rem; max-width: 70ch; }
.story-body p { margin: 0 0 .9rem; }

/* ── Reference-code embeds ([pcx]/[pcxc]) ───────────────────────────── */
.ref-embed { display: inline-block; position: relative; margin: .25rem .35rem .25rem 0; vertical-align: top; max-width: 180px; }
.ref-embed img { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: 10px; border: 2px solid var(--border, #3a2a55); }
.ref-embed-comic .ref-embed-badge {
  position: absolute; top: 6px; left: 6px;
  background: #7c3aed; color: #fff; font-size: .72rem; font-weight: 800;
  padding: .15rem .45rem; border-radius: 6px; border: 2px solid #fff;
}
.ref-embed-noimg { display: flex; align-items: center; justify-content: center; width: 120px; height: 120px; background: #4c1d95; color: #fff; font-size: 2rem; border-radius: 10px; }

/* ── Comic drip (scheduled release) badge ───────────────────────────── */
.comic-drip-badge {
  display: inline-flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  margin: .5rem 0; padding: .4rem .85rem;
  border: 2px solid #f59e0b; background: rgba(245,158,11,.15);
  border-radius: 10px; font-weight: 800; font-size: .88rem;
}
.comic-drip-badge i { color: #f59e0b; }

/* Inline images inside stories ([img] BBCode) */
.story-body .bb-img, .bb-img { max-width: 100%; height: auto; display: block; margin: .6rem 0; border-radius: 8px; }

/* Featured artist: name on the left, follower/comic stats on the right
   (same line). Wraps under the name on narrow screens. */
.featured-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 1.5rem;
  flex-wrap: wrap;
}
.featured-name-row .featured-name { margin: 0; }
.featured-name-row .featured-stats { margin: 0; }

/* Inline composer: compact by default, expands on focus (less scroll to feed).
   Progressive enhancement — the .js-collapse class is added by JS, so with JS
   off the composer stays fully expanded and usable. */
.composer-inline.js-collapse textarea[name="content"] { min-height: 2.6rem; transition: min-height .15s ease; }
.composer-inline.js-collapse.is-expanded textarea[name="content"] { min-height: 5rem; }
/* !important to beat the inline display:flex on some .composer-extra rows. */
.composer-inline.js-collapse:not(.is-expanded) .composer-extra { display: none !important; }
.composer-inline.js-collapse:not(.is-expanded) .composer-form { gap: 0; }

/* ===== Post image lightbox (assets/js/image-lightbox.js) =====
   Fullscreen viewer opened by tapping a .post-image img. Appended to <body>
   (outside .app) so desktop zoom never shrinks it. High-contrast controls. */
.post-image img { cursor: zoom-in; }
.pcx-lightbox {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem 1rem;
  background: rgba(0, 0, 0, 0.92);
}
.pcx-lightbox[hidden] { display: none; }
.pcx-lightbox-img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.7);
  cursor: default;
}
.pcx-lightbox-close,
.pcx-lightbox-nav {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: 2px solid #fff;
  cursor: pointer;
  font-weight: 800;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.pcx-lightbox-close {
  top: .7rem; right: .8rem;
  width: 3rem; height: 3rem;
  font-size: 2.2rem;
  border-radius: 50%;
}
.pcx-lightbox-nav {
  top: 50%; transform: translateY(-50%);
  width: 3rem; height: 4.2rem;
  font-size: 2.4rem;
  border-radius: 8px;
}
.pcx-lightbox-prev { left: .5rem; }
.pcx-lightbox-next { right: .5rem; }

/* ===== "Watch Live" blinking broadcast dot (sidebar-left) ===== */
.nav-item .live-dot {
  flex: 0 0 auto;
  width: .72rem;
  height: .72rem;
  margin-left: -4px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, .75);
  animation: live-dot-pulse 1.25s ease-out infinite;
}
@keyframes live-dot-pulse {
  0%   { opacity: 1;    transform: scale(1);    box-shadow: 0 0 0 0   rgba(239, 68, 68, .75); }
  70%  { opacity: .25;  transform: scale(.85);  box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); }
  100% { opacity: 1;    transform: scale(1);    box-shadow: 0 0 0 0   rgba(239, 68, 68, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-item .live-dot { animation: none; opacity: 1; }
}

/* ===== Vertical Write / Draw toggle in the profile composer ===== */
.compose-mode-toggle {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 2px;
}
.compose-mode-toggle .cmt-btn {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .65rem;
  border: 2px solid var(--border, #3a2a55);
  border-radius: 10px;
  background: rgba(0, 0, 0, .2);
  color: inherit;
  font-family: var(--font-display, inherit);
  font-weight: 800;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.compose-mode-toggle .cmt-btn i { font-size: 1.05rem; flex: 0 0 auto; }
/* Active = Write (the textarea you're in). Gold, same accent as the old icon. */
.compose-mode-toggle .cmt-btn.is-active {
  background: var(--accent-2, #FBBF24);
  border-color: var(--accent-2, #FBBF24);
  color: #1a1030;
  cursor: default;
}
/* Draw = the fake toggle that opens the tool. Purple accent like the sidebar. */
.compose-mode-toggle .cmt-draw i { color: #a855f7; }
.compose-mode-toggle .cmt-draw:hover {
  border-color: #a855f7;
  background: rgba(168, 85, 247, .18);
}
@media (max-width: 560px) {
  .compose-mode-toggle .cmt-label { display: none; }   /* icons-only on small screens */
  .compose-mode-toggle .cmt-btn { padding: .5rem; }
}

/* ===== Pics tab — thumbnail grid view (toggle in gallery-toolbar) ===== */
.pics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 1rem;
}
.pic-grid-item {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: var(--border-w, 3px) solid var(--ink, #1a1030);
  box-shadow: var(--shadow);
  background: var(--paper-2, #1a1030);
  transition: transform .12s ease, box-shadow .12s ease;
}
.pic-grid-item:hover,
.pic-grid-item:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-lg);
  outline: none;
}
.pic-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 560px) {
  .pics-grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 8px; }
}
/* List/grid view toggle (sits before the search box). */
.gallery-view { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.gallery-view-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.6rem; padding: .5rem .7rem; font-size: 1.05rem;
}

/* ===== Per-post decorative sticker (overflows the card, top-right) ===== */
.post.has-sticker {
  position: relative;
  overflow: visible;   /* let the sticker poke out of the card */
}
.post-sticker {
  position: absolute;
  top: -80px;          /* sticks out above the card's top edge */
  right: 30px;         /* near the top-right corner */
  width: 100px;
  height: 100px;
  object-fit: contain;
  pointer-events: none;  /* purely decorative — never blocks clicks beneath */
  z-index: 30;           /* render on top, even over the post above it */
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .45));
}

/* ===== Right-column quick links (moved from the left sidebar) ===== */
.r-quicklinks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* No bottom margin: .col-right already puts a 16px flex `gap` between this
     nav and whatever follows (rescue card / sections). An extra margin here
     stacked on top of the gap (~34px) and read as too much space. */
  margin: 14px 0 0;
}
.r-quicklink {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--paper);
  color: var(--ink);
  border: var(--border-w, 3px) solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .92rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.r-quicklink i { width: 1.2rem; text-align: center; font-size: 1rem; flex: 0 0 auto; }
.r-quicklink:hover,
.r-quicklink:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--ink);
  background: var(--accent-2);
  outline: none;
}
.r-quicklink--admin { border-left: 5px solid var(--accent, #EC4899); }

/* ===== "Palcomix needs heroes" rescue — sidebar mini + modal ===== */
.rescue-mini {
  display: block; width: 100%; text-align: left;
  padding: 10px 11px;
  background: rgba(236, 72, 153, .14);
  border: 2px solid var(--accent);
  border-radius: 10px;
  color: var(--text-inv); font: inherit; cursor: pointer;
  transition: background .12s ease, transform .12s ease;
}
.rescue-mini:hover { background: rgba(236, 72, 153, .26); transform: translateY(-1px); }
.rescue-mini-bar { position: relative; height: 20px; background: rgba(0, 0, 0, .55); border-radius: 10px; overflow: hidden; }
.rescue-mini-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .6s ease; }
/* Count sits centered ON TOP of the bar (saves vertical space). White with a
   hard dark halo so it stays legible over both the dark track and the
   pink→gold fill. */
.rescue-mini-count { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .76rem; letter-spacing: .02em; color: #fff; text-shadow: 0 0 3px #000, 0 1px 2px #000; pointer-events: none; }
.rescue-mini-row { display: flex; align-items: center; gap: 9px; margin-top: 9px; }
.rescue-mini-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; border: 2px solid #000; flex: 0 0 auto; }
.rescue-mini-text { font-weight: 800; font-size: .82rem; line-height: 1.2; color: var(--accent-2); text-transform: uppercase; letter-spacing: .02em; }

.rescue-overlay { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15, 8, 30, .92); }
.rescue-overlay[hidden] { display: none; }
.rescue-modal {
  position: relative; width: 100%; max-width: 680px; max-height: 92vh; overflow-y: auto;
  background: var(--paper); color: var(--ink);
  border: var(--border-w-thick) solid var(--ink); box-shadow: var(--shadow-lg);
  border-radius: 12px; padding: 26px 26px 22px; text-align: center;
}
.rescue-close { position: absolute; top: 8px; right: 12px; width: 38px; height: 38px; font-size: 1.7rem; line-height: 1; background: transparent; border: none; color: var(--ink-soft); cursor: pointer; font-weight: 800; }
.rescue-close:hover { color: var(--accent); }
.rescue-emoji { font-size: 2.4rem; line-height: 1; }
.rescue-title { font-family: var(--font-display, inherit); font-weight: 900; font-size: 1.7rem; text-transform: uppercase; letter-spacing: .02em; color: var(--primary); margin: .2rem 0 .5rem; }
.rescue-msg { font-size: .98rem; line-height: 1.55; margin: 0 0 14px; }
.rescue-msg a { color: var(--accent); font-weight: 800; text-decoration: underline; }
.rescue-stats { background: var(--paper-2); border: 2px solid var(--ink); border-radius: 10px; padding: 12px 14px; margin: 12px 0; }
.rescue-counter { display: flex; justify-content: space-around; gap: 8px; flex-wrap: wrap; }
.rescue-stat { flex: 1; min-width: 80px; }
.rescue-stat-num { font-family: var(--font-display, inherit); font-size: 2.1rem; font-weight: 900; line-height: 1; color: var(--accent); }
.rescue-stat-lbl { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); margin-top: 4px; }
.rescue-bar { height: 12px; background: #e7e1d3; border: 2px solid var(--ink); border-radius: 6px; overflow: hidden; margin-top: 12px; }
.rescue-bar-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .6s ease; }
.rescue-bonus { display: flex; gap: 14px; align-items: center; text-align: left; background: rgba(251, 191, 36, .16); border: 2px solid var(--accent-2); border-radius: 10px; padding: 12px 14px; margin: 12px 0; font-size: .9rem; line-height: 1.45; }
.rescue-bonus-img { flex: 0 0 auto; width: 120px; height: 120px; object-fit: contain; border-radius: 6px; }
.rescue-bonus-text { flex: 1; min-width: 0; }
.rescue-target { font-size: .82rem; line-height: 1.5; color: var(--ink-soft); background: rgba(76, 29, 149, .08); border-radius: 8px; padding: 10px 12px; margin-top: 6px; }
.rescue-target strong { color: var(--primary); }
.rescue-buttons { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.rescue-btn { flex: 1; min-width: 150px; padding: 13px 16px; border-radius: 8px; font-weight: 800; font-size: .95rem; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display, inherit); text-transform: uppercase; letter-spacing: .03em; border: 2px solid var(--ink); }
.rescue-btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.rescue-btn-primary:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow); }
.rescue-btn-secondary { background: var(--paper); color: var(--ink); }
.rescue-btn-secondary:hover { background: var(--paper-2); }
.rescue-modal.rescue--victory .rescue-title { color: #15803d; }
.rescue-modal.rescue--victory .rescue-stat-num { color: #15803d; }
.rescue-modal.rescue--victory .rescue-bar-fill { background: linear-gradient(90deg, #22c55e, #86efac); }
@media (max-width: 600px) { .rescue-bonus { flex-direction: column; text-align: center; } .rescue-bonus-img { width: 150px; height: 150px; } }

/* ============================================================
   Comic page engagement (comic-viewer.php) + FB-style lightbox
   ============================================================ */
.cv-engage {
  margin: 14px 0 0;
  background: var(--paper);
  color: var(--ink);
  border: var(--border-w) solid var(--ink);
  box-shadow: var(--shadow-sm);
  padding: 14px 16px;
}
.cv-actions {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 2px solid var(--ink);
}
.cv-actions .cv-act-form { margin: 0; }
.cv-act {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; font-size: .92rem; font-weight: 800;
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
  cursor: pointer; text-decoration: none; line-height: 1; border-radius: 8px;
}
.cv-act i { font-size: 1.05rem; }
.cv-act:hover { background: var(--paper-2); transform: translateY(-1px); }
.cv-act.is-on { background: var(--accent); color: #fff; border-color: var(--ink); }
.cv-act.is-on i { color: #fff; }

.cv-comments-title {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: .03em; font-size: 1.05rem; margin: 0 0 .6rem; color: var(--ink);
}
.cv-comment-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 1rem; }
.cv-comment-input {
  width: 100%; padding: .6rem .7rem; border: 2px solid var(--ink-soft); border-radius: 8px;
  font: inherit; font-size: .95rem; color: var(--ink); background: var(--paper); resize: vertical; min-height: 52px;
}
.cv-comment-form .btn { align-self: flex-start; }
.cv-comment-gate { font-weight: 700; }
.cv-comment-gate a { color: var(--accent); font-weight: 800; }
.cv-comment-list { list-style: none; margin: 0; padding: 0; }
.cv-comment-empty { opacity: .7; font-weight: 600; padding: .4rem 0; }
.cv-comment { display: flex; gap: .7rem; padding: .7rem 0; border-top: 1px solid var(--border, #e5e0f0); }
.cv-comment-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; display: block; }
.cv-comment-avatar--fb {
  display: flex; align-items: center; justify-content: center;
  background: #4c1d95; color: #fff; font-weight: 800; font-size: .85rem;
}
.cv-comment-body { flex: 1; min-width: 0; }
.cv-comment-meta { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; font-size: .9rem; margin-bottom: .15rem; }
.cv-comment-name { color: var(--ink); font-weight: 800; text-decoration: none; }
.cv-comment-when { opacity: .65; font-size: .82rem; }
.cv-comment-text { font-size: .97rem; line-height: 1.45; color: var(--ink); word-wrap: break-word; }
.cv-comment-del { margin: 0 0 0 auto; }
.cv-comment-del-btn { background: none; border: 0; color: #b91c1c; cursor: pointer; font-size: .9rem; padding: 2px 4px; }

/* FB-style lightbox */
.cvlb { position: fixed; inset: 0; z-index: 10001; background: rgba(10,6,22,.95); display: flex; }
.cvlb[hidden] { display: none; }
.cvlb-close {
  position: absolute; top: 14px; right: 18px; z-index: 2;
  width: 46px; height: 46px; font-size: 2rem; line-height: 1;
  background: #fff; color: #111827; border: 3px solid #111827; cursor: pointer; border-radius: 8px;
}
.cvlb-inner { display: flex; width: 100%; height: 100%; }
.cvlb-stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; min-width: 0; }
.cvlb-img { max-width: 100%; max-height: 100%; object-fit: contain; border: 3px solid #111827; background:#fff; }
.cvlb-side {
  width: 380px; flex-shrink: 0; background: var(--paper); color: var(--ink);
  overflow-y: auto; padding: 16px 16px 40px; border-left: 3px solid #111827;
}
.cvlb-title { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; margin-bottom: 10px; color: var(--ink); }
.cvlb-side .cv-engage { margin: 0; border: 0; box-shadow: none; padding: 0; }
@media (max-width: 820px) {
  .cvlb-inner { flex-direction: column; }
  .cvlb-stage { padding: 12px; max-height: 55vh; }
  .cvlb-side { width: 100%; border-left: 0; border-top: 3px solid #111827; }
}