/* =========================================================
   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 (FLIPS to light in dark mode) */
  --ink-fixed:  #111827;   /* always-dark text — for light-colored surfaces (gold/accent-2
                              buttons) that stay light in BOTH themes. NOT overridden in dark. */
  --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;

  /* Define --border so the 90+ `var(--border,#3a2a55)` call sites read a real
     variable (value = the old fallback, so light mode is unchanged) that dark
     mode can flip. */
  --border:     #3a2a55;
}

/* =====================================================================
   Dark mode — opt-in (html[data-theme="dark"]), deep-violet, high contrast.
   Most of the site uses var(--paper)/var(--ink)/var(--border), so redefining
   the palette here flips it automatically. Hardcoded colors (background:#fff,
   rgba(0,0,0,…) inputs, literal dark text) are cleaned up case-by-case.
   ===================================================================== */
:root[data-theme="dark"] {
  --primary:    #150c26;   /* page canvas — deep near-black violet */
  --primary-dk: #0e0719;
  --primary-lt: #7c3aed;

  --ink:        #ECE9F5;   /* near-white: text & borders on dark surfaces */
  --ink-soft:   #b6abd2;   /* secondary text */
  --paper:      #241738;   /* card surface — violet-tinted dark */
  --paper-2:    #2f2049;   /* raised / alternate surface */
  --text-inv:   #F3F1FA;   /* page already dark → "inverse" text stays light */
  --text-inv-soft: rgba(243,241,250,.74);
  --border:     #5e4d8c;   /* visible violet border on dark cards */

  /* Hard offset shadows use var(--ink); in dark that would be near-white and
     glary. Pin them to a deep shadow so cards read as raised, not outlined. */
  --shadow-sm:  3px 3px 0 rgba(0,0,0,.55);
  --shadow:     6px 6px 0 rgba(0,0,0,.55);
  --shadow-lg:  10px 10px 0 rgba(0,0,0,.55);
}

/* Theme toggle button (sidebar + mobile drawer — both on the dark page canvas,
   so light text/border in BOTH themes). */
.theme-toggle-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  width: 100%; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: .85rem;
  text-transform: uppercase; letter-spacing: .03em;
  padding: .55rem .85rem; cursor: pointer;
  background: transparent; color: var(--text-inv);
  border: 2px solid var(--text-inv-soft); border-radius: 8px;
}
.theme-toggle-btn:hover { background: rgba(255,255,255,.12); }
.theme-toggle-btn i { font-size: 1rem; }
/* In the mobile drawer the surface is var(--paper) (white in light, dark in
   dark) — match the drawer items so the toggle is visible in BOTH themes
   instead of light-text-on-white. */
.drawer-list .theme-toggle-btn {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
}
.drawer-list .theme-toggle-btn:hover { background: var(--ink); color: var(--paper); }

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Root background matches the theme so no white shows in any edge gap, scrollbar
   gutter or overscroll bounce (was a white line down the right edge on mobile). */
html { background: var(--primary); }
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. */
.-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;
}
.-banner-ico { font-size: 1.9rem; color: #b45309; flex: 0 0 auto; }
.-banner-txt { flex: 1 1 240px; min-width: 0; line-height: 1.3; }
.-banner-txt strong { display: block; font-family: 'Oswald', sans-serif; font-weight: 800; font-size: 1.1rem; }
.-banner-txt span { font-size: .9rem; font-weight: 600; }
.-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;
}
.-banner-cta:hover { transform: translate(-1px,-1px); }
.-banner-cta:disabled { opacity: .7; cursor: default; }
.-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; }

/* =====  perks — luxe grid (become- 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 -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;
}
/* Same click-trap guard as .push-prompt: the class sets display:flex, which
   defeats the [hidden] attribute's display:none. Without this, a dismissed/
   already-seen welcome modal stays as a full-screen (inset:0) invisible
   (opacity:0) overlay that swallows EVERY click on the home page. */
.pw-overlay[hidden] { display: none; }
.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. */
}

/*  pages: drop the right rail and let the center (tables, queues)
   use the full width. Without this,  tables get crushed into the
   narrow center column and rows balloon. See header.php (-body). */
body.-body .app { grid-template-columns: 280px minmax(0, 1fr); }
body.-body .col-right { display: none !important; }
@media (max-width: 980px) {
  body.-body .app { grid-template-columns: 80px minmax(0, 1fr); }
}
@media (max-width: 720px) {
  body.-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- span, .brand-legacy { display: none; }
  .nav-item, .cta- { 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 -avatar dropdown ( 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: visible;   /* was hidden — it clipped the brand logo's top spill. The
                          inner <nav> scrolls on its own (overflow-y:auto), so the
                          sidebar still doesn't grow a scrollbar of its own. */
}
.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-fixed);
  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;
}

/* Image logo OVERLAID on the original skewed brand box: the white box + pink
   bolt mark stay, and the transparent logo overlaps and SPILLS OUT of the box
   (not contained inside it). The "palcomix" text is dropped. The collapsed 80px
   rail hides the logo and keeps just the bolt mark.
   Fine-tune knobs: .brand-img { left / top / width }. */
.brand-row { margin-bottom: 14px; }       /* small gap; the logo's downward spill is transparent + pointer-events:none, so HOME can sit close (aligned with the center column's first bar) */
.brand--logo {
  position: relative; overflow: visible;
  width: 100%; box-sizing: border-box;   /* full-width white frame, like the nav buttons */
  min-height: 60px;
}
.brand-row > .brand--logo { flex: 1 1 auto; }
.brand--logo .brand-name { display: none; }
.brand-img {
  position: absolute; z-index: 3; pointer-events: none;
  left: 46px; top: 50%;
  width: 208px; height: auto;
  transform: translateY(-50%) skew(4deg);   /* counter the box's -4deg skew → upright */
}
@media (max-width: 980px) {
  .brand-row { margin-bottom: 0; }
  .brand--logo { width: auto; min-width: 0; min-height: 0; }
  .brand--logo .brand-img { display: none; }   /* collapsed rail: just the bolt */
}
.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-fixed);
  border: 2px solid var(--ink);
}

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

/*  CTA — the loudest poster button */
.cta- {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 9px 14px;
  margin: 4px 0;
  background: var(--accent-2);
  color: var(--ink-fixed);
  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- > * { transform: skew(4deg); }
.cta-: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 ) */
.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;
}
/* "View as member" indicator pill, shown next to the owner's name. */
.mm-pill {
  display: inline-block;
  vertical-align: middle;
  font-family: var(--font-mono, monospace);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 4px;
  background: #D97706;
  color: #fff;
  white-space: nowrap;
}
.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); transition: transform .15s ease; transform: rotate(180deg); }
/* The  menu sits at the BOTTOM of the sidebar, so it opens UPWARD: float
   it absolutely above the avatar (the inline bottom:64px anchors it to the
   position:relative wrap) so opening it never reflows / shoves the avatar up.
   Chevron points UP when closed (menu is above), flips down when open. */
.sidebar-footer-wrap > .dropdown-content { position: absolute; z-index: 50; }
.sidebar-footer-wrap[open] .sf-chevron { transform: rotate(0deg); }

/* =========================================================
   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 s. */
  z-index: 30;
  background: var(--primary);
  padding: 0 0 12px;   /* card flush at the top (aligned with side s);
                          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(--text-inv);
  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
  );
}

/* The hero + author block link to the artist's profile. Block-level, looks
   like the card (no link colour/underline) but the whole area is clickable. */
.featured-cardlink {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.featured-cardlink:hover .featured-name,
.featured-cardlink:focus-visible .featured-name { text-decoration: underline; }
.featured-cardlink:focus-visible { outline: 3px solid var(--accent-2, #FBBF24); outline-offset: -3px; }

.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(--text-inv);
  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(--text-inv);
  border-top: var(--border-w) solid var(--ink);
}
/* Mobile: the CTA ("Visit profile"/"Read now") drops to its own full-width line
   below the text instead of squeezing the title into a one-word-per-line column. */
@media (max-width: 640px) {
  .featured-rotator { flex-wrap: wrap; }
  .featured-rotator > .btn { flex-basis: 100%; justify-content: center; margin-top: 4px; }
}
.rotator-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--accent-2);
  color: var(--ink-fixed);
  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; }

/*  s list — clickable avatar+name → profile. */
.--link:hover .--name { text-decoration: underline; }
.--link:hover img, .--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-fixed);
}
.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); }
/* In the public CONTENT column (.col-center), ghost buttons sit on a paper
   CARD whose surface flips light↔dark, so they must use --ink (which flips too)
   instead of --text-inv (always-light). Otherwise in LIGHT mode they're
   white-on-white and vanish — e.g. the inactive Notifications tabs.
    pages are the exception: their .col-center content renders directly on
   the purple page body (no paper card), so there --ink would be DARK-on-purple
   and vanish in LIGHT mode. Scope this override away from  so  ghost
   buttons keep the base --text-inv (always-light, correct on purple). */
body:not(.-body) .col-center .btn-ghost {
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}
body:not(.-body) .col-center .btn-ghost:hover { box-shadow: 6px 6px 0 var(--ink); }

/* 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 — reach-limited author's post, shown ONLY to staff. Grey wash +
   a capsule so a  can spot "harmless post from a reach-limited
   " at a glance. Regular s never see this state (the post is
   hidden from their feeds entirely). */
.post.is-limited {
  position: relative;
  background: #e5e7eb;
  filter: grayscale(0.35);
}
.post.is-limited .post-body,
.post.is-limited .post-author,
.post.is-limited .post-sub { color: #4b5563; }
/* Shadowbanned comment — -only mark, mirrors .post.is-limited so the owner
   can tell a reply is hidden from the public (see comment-item.php $ciShadowMark). */
.comment-item.is-limited { background: #e5e7eb; filter: grayscale(0.35); border-radius: 6px; padding-left: .7rem; }
.comment-item.is-limited .comment-content,
.comment-item.is-limited .comment-meta,
.comment-item.is-limited .comment-meta a { color: #4b5563; }
/* Shadowbanned club thread OP + reply — staff-only mark, mirrors .post.is-limited
   so mods spot a shadowbanned troll writing in a club (see club-thread.php). */
.club-op.is-limited,
.club-comment.is-limited { background: #e5e7eb; filter: grayscale(0.35); border-radius: 6px; }
.club-op.is-limited .club-op-body,
.club-op.is-limited .club-op-title,
.club-op.is-limited .club-op-author,
.club-comment.is-limited .club-comment-body,
.club-comment.is-limited .club-comment-author { color: #4b5563; }
.exposure-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: 60;   /* above an overhanging sticker (z-30) from the next post, so Edit/Delete stay clickable */
}
.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  badge — gold pill, high-contrast + text label
   (color + word, not color alone). Replace styling when the real badge ships. */
.-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;
}
.-badge i { font-size: .8rem; }
.profile-name .-badge { font-size: .9rem; padding: 3px 11px; }

/*  crown — sits above the avatar, tilted slightly left. Gold with a soft
   shadow so it reads on any background. */
.-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. */
.-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. */
.-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;
}
/* When this post sits directly above one with a sticker, the sticker overhangs
   UP into this footer (intentional "peek" look — we keep the overlap). Lift the
   footer above the sticker (z-index 30) so the action buttons stay visible and
   clickable instead of hiding behind it. */
.post:has(+ .post.has-sticker) .post-foot { position: relative; z-index: 40; }
.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;
}
/* Left-align ALL post actions (no auto-margin pushing the last one to the far
   right) so a button doesn't sit under the next post's overhanging sticker. */
.pf-btn:last-child { margin-left: 0; }

/* ===== Reactions (multi-emoji like) ===== */
/* The chosen reaction emoji shown ON the like button (replaces the heart icon). */
.react-emoji { font-style: normal; font-size: 1.15rem; line-height: 1; }
.pf-btn.like.is-active { color: var(--accent); }

/* Breakdown chips next to the like button: ❤️3 😄2 … */
.reaction-chips { display: inline-flex; align-items: center; gap: .3rem; flex-wrap: wrap; vertical-align: middle; }
.reaction-chips:empty { display: none; }
.rc-chip {
  display: inline-flex; align-items: center; gap: .15rem;
  font-size: .95rem; line-height: 1;
  padding: .12rem .4rem; border-radius: 999px;
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
}
.rc-chip b { font-family: var(--font-mono); font-weight: 800; font-size: .76rem; }

/* The 6-emoji picker popover (portaled to <body>). */
.reaction-picker {
  position: absolute; z-index: 1200;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem;
  max-width: 92vw;
  padding: .4rem .5rem;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 22px;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.reaction-picker[hidden] { display: none; }
.rp-emoji {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  width: 2.3rem; padding: .25rem .1rem;
  border: 0; background: none; border-radius: 12px; cursor: pointer;
  transition: transform .1s ease, background .1s ease;
}
.rp-face { font-size: 1.45rem; line-height: 1; }
.rp-n { font-family: var(--font-mono); font-weight: 800; font-size: .72rem; line-height: 1; color: var(--ink); min-height: .72rem; }
.rp-emoji:hover { transform: scale(1.12); background: var(--paper-2); }
.rp-emoji.is-current { background: var(--accent); box-shadow: 0 0 0 2px var(--ink) inset; }
.rp-emoji.is-current .rp-n { color: #fff; }

/* =========================================================
   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- {
  background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary) 55%, var(--primary-lt) 55%, var(--primary-lt) 100%);
}
.profile-cover.cover-::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 ed 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); }

/* The "Proud member of" clubs capsule floats over the top-left of the header
   (beside the avatar). When it's present, lay the action buttons out as a
   compact 2×2 block pinned to the RIGHT — so they sit to the right of the
   capsule in two tidy rows (Message/Following on top, Block/Mod below) instead
   of a single wide row that the capsule would overlap. Desktop only — on mobile
   (≤720px) the buttons already stack in their own full-width column. */
@media (min-width: 721px) {
  .profile-actions--clubs-clear { width: 264px; align-content: flex-start; }
  .profile-actions--clubs-clear > a,
  .profile-actions--clubs-clear > button,
  .profile-actions--clubs-clear > form,
  .profile-actions--clubs-clear > .profile-mod { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .profile-actions--clubs-clear > form { display: flex; }
  .profile-actions--clubs-clear .btn,
  .profile-actions--clubs-clear .profile-mod > .profile-mod-btn {
    width: 100%; justify-content: center; box-sizing: border-box; padding: 8px 8px;
  }
}

/* Mobile profile header — professional "identity first" layout.
   On desktop the avatar + action buttons share the top row (unchanged). On
   mobile we (1) dissolve that row so the buttons reflow BELOW name/bio/stats,
   and (2) lay the buttons out as a tidy 2-per-row bar where Follow is the only
   filled (primary) button and everything else is a quiet outline. */
@media (max-width: 720px) {
  .profile-body    { display: flex; flex-direction: column; }
  .profile-top-row { display: contents; }            /* let its children  the column */
  .profile-avatar-wrap { order: 0; }
  .profile-name    { order: 1; }
  .profile-handle  { order: 2; }
  .profile-bio     { order: 3; }
  .profile-stats   { order: 4; }
  .profile-actions { order: 5; margin-top: 14px; align-items: stretch; }

  /* two equal buttons per row */
  .profile-actions > a,
  .profile-actions > button,
  .profile-actions > form,
  .profile-actions > .profile-mod { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .profile-actions > form { display: flex !important; }   /* beats inline display:inline */
  .profile-actions .btn,
  .profile-actions .profile-mod > .profile-mod-btn {
    width: 100%; justify-content: center; box-sizing: border-box;
  }
}

/* Staff-only moderation control: compact red "Mod" button + dropdown .
   Only ever rendered for staff, so a moderated  can never see it. */
.profile-mod { position: relative; display: inline-block; }
.profile-mod > summary { list-style: none; cursor: pointer; }
.profile-mod > summary::-webkit-details-marker { display: none; }
/* Mod = staff-only utility. De-emphasized OUTLINE (not a loud filled-red slab)
   so it never out-shouts the primary Follow action. It only goes solid red when
   the target is actually reach-limited / banned (.is-active), where the loud
   colour conveys real state instead of just decoration. */
.profile-mod-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; font-size: .8rem; font-weight: 800;
  color: #ef4444; background: transparent;
  border: 2px solid #ef4444; border-radius: 8px;
  box-shadow: 3px 3px 0 var(--ink);
}
.profile-mod-btn:hover { box-shadow: 5px 5px 0 var(--ink); }
.profile-mod-btn.is-active { color: #fff; background: #dc2626; border-color: #dc2626; box-shadow: 3px 3px 0 #7f1d1d; }
.profile-mod-tag {
  margin-left: 2px; font-size: .72rem; font-weight: 800;
  background: rgba(0,0,0,.28); color: #fff; padding: 1px 7px; border-radius: 99px;
}
.profile-mod-tag.is-ban { background: #111827; }
.profile-mod- {
  position: absolute; z-index: 50; top: calc(100% + 6px); left: 0;
  min-width: 270px; display: flex; flex-direction: column; gap: 10px;
  padding: 12px; border: 2px solid #dc2626; border-radius: 12px;
  background: var(--paper); box-shadow: 6px 6px 0 rgba(0,0,0,.35);
}
.profile-mod-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.profile-mod-label { font-weight: 800; font-size: .82rem; color: var(--ink); width: 100%; }
.profile-mod-select {
  font-weight: 800; font-size: .85rem; padding: 6px;
  border: 2px solid #6b7280; border-radius: 6px;
  background: var(--paper); color: var(--ink);
}
.profile-mod-apply { font-weight: 800; padding: 6px 14px; font-size: .82rem; }
.profile-mod-ban, .profile-mod-unban {
  width: 100%; font-weight: 800; padding: 8px 14px; font-size: .85rem;
  color: #fff; border-radius: 8px; cursor: pointer;
}
.profile-mod-ban { background: #dc2626; border: 2px solid #dc2626; }
.profile-mod-unban { background: #16a34a; border: 2px solid #16a34a; }
@media (max-width: 720px) { .profile-mod- { left: auto; right: 0; } }

.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;
  flex-wrap: wrap;            /* safety net: pill drops below instead of overlapping */
  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-fixed);
  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(--text-inv);
  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-fixed);
}
.tab.is-active::after {
  content: "";
  position: absolute;
  inset: 0 0 -3px 0;
  border-bottom: 3px solid var(--accent-2);
}

/* Home feed tab bar (Feed / Latest / Trending / Discover) — sits below the
   composer. Theme-aware: paper/ink flip in dark; active is gold with fixed
   dark text. Scrolls horizontally on narrow screens. */
.feed-tabs {
  display: flex;
  gap: 8px;
  margin: 14px 0 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.feed-tabs::-webkit-scrollbar { display: none; }
.feed-tab {
  flex: 1 1 0;
  min-width: max-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}
.feed-tab:hover { background: var(--ink); color: var(--paper); }
.feed-tab.is-active {
  background: var(--accent-2);
  color: var(--ink-fixed);
}
.feed-tab i { font-size: .95rem; }
@media (max-width: 540px) {
  /* On phones the 4 tabs overflowed a hidden horizontal scroll, so Discover
     (the last one) was clipped off-screen and looked unreadable. Wrap them to
     two rows instead — all four fully visible, no hidden scroll. */
  .feed-tabs { flex-wrap: wrap; overflow-x: visible; }
  .feed-tab  { flex: 1 1 calc(50% - 4px); min-width: 0; padding: 9px 11px; }
  .feed-tab span { font-size: .8rem; }
}

/* =========================================================
   RIGHT SIDEBAR
   ========================================================= */
/* The right  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: visible;        /* DON'T clip — the icon-row badges + language dropdown must overflow freely */
}
/* The cards scroll here, INSIDE the non-clipping column, so the icon row above
   can pop its badges / dropdown out without being cut off. */
.right-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}
.right-scroll::-webkit-scrollbar { width: 8px; }
.right-scroll::-webkit-scrollbar-track { background: transparent; }
.right-scroll::-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 
   cleanly under it without peeking through the gap. */
.right-icons {
  flex: 0 0 auto;           /* fixed top row, outside the scroll — never shrinks */
  z-index: 20;              /* its badges + language dropdown sit above the scrolling cards */
  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: 3px;
  flex-wrap: nowrap;        /* always one row — never let a button drop below */
}
.right-icon-btn {
  position: relative;
  flex: 0 1 auto;           /* squares by default; can shrink a hair before ever wrapping */
  width: 34px; height: 34px;  /* slightly smaller so all 7 icons fit the column */
  display: grid; place-items: center;
  background: var(--paper);
  color: var(--ink);
  border: var(--border-w) solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  font-size: .92rem;
  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: 4px 6px; gap: 3px; height: 34px; letter-spacing: .03em; font-size: .9rem; }
.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-fixed); }
.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; }

.-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px dashed rgba(0,0,0,.15);
}
.-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(--text-inv);
  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-fixed); }
.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);
}
/* Anonymous-only variant: left/right groups flank a CENTERED post button (the
   logged-out bar has no notifications item). Both groups take equal space so
   the + sits dead-centre. Logged-in keeps the original equal-column grid. */
.bottom-nav--centered { display: flex; align-items: stretch; }
.bottom-nav--centered .bn-group { display: flex; flex: 1 1 0; min-width: 0; }
.bottom-nav--centered .bn-group > .bn-item { flex: 1 1 0; min-width: 0; }
.bottom-nav--centered .bn-post-wrap { flex: 0 0 auto; }
/* While a text field is focused (mobile keyboard up), hide the bar so it doesn't
   detach from the bottom and float over content. Toggled by keyboard-nav.js. */
body.kb-open .bottom-nav { display: none; }
@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- {
  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;
  /* Closed: slide fully off-screen INCLUDING the left box-shadow (-6px). Just
     translateX(100%) left the 6px shadow peeking at the right edge as a vertical
     line (white in dark mode, since --ink is light). The extra 10px clears it. */
  transform: translateX(calc(100% + 24px));
  transition: transform 0.25s ease;
  box-shadow: none;
}
.drawer-.is-open { box-shadow: -6px 0 0 var(--ink); }
.drawer-.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;
}

/*  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--inline {
  margin: 0.4rem 0 0;
  padding: 0;
}
.drawer--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--inline button i.fa-solid {
  font-size: 1.05rem;
  width: 1.4rem;
  text-align: center;
}
.drawer--inline button span {
  flex: 1;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.drawer--inline button:hover {
  background: #dc2626;
  color: var(--paper);
}

@media (min-width: 721px) {
  .mobile-top-menu,
  .drawer-backdrop,
  .drawer- { 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-:focus-visible {
  outline-offset: 4px;
}

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

/* =========================================================
   AUTH PAGES (Wave 2.2A —  / )
   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;
}
/* : 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-- { max-width: 760px; }
/* Compact the  shell so the 2-column form fits one screen. */
.auth-shell--compact { padding-top: 16px; padding-bottom: 24px; gap: 14px; }
.auth-card-- { padding: 20px 26px 24px; }
.auth-card-- .auth-title { margin: 0 0 2px; }
.auth-card-- .auth-subtitle { margin: 0 0 12px; }
.auth-card-- .auth-field { margin-bottom: 11px; }
.auth-card-- fieldset.auth-field { padding: .7rem .85rem !important; }
.auth-card-- .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-- { 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-fixed);
  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); }

/*  form inside the sidebar dropdown — strip the button chrome
   so it visually matches the sibling <a> links. */
.sf--form { margin: 0; padding: 0; display: block; }
.sf--btn {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 8px 12px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: block;
}
.sf--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.:hover { color: var(--primary); }
/* Toast shown when a logged-out viewer right-clicks a protected image.
   It's a link to  (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);
}
/* Empty preview must stay invisible — the display:flex above otherwise overrides
   the [hidden] attribute and leaves a dark empty capsule under the file input. */
.img-preview[hidden] { display: none !important; }

/* Ad editor — current image with a corner "×" to remove it (marks for removal;
   confirmed on save, with an undo). */
.ad-img-wrap { position: relative; display: inline-block; }
.ad-img-current { max-width: 220px; max-height: 220px; border: 2px solid var(--ink); display: block; }
.ad-img-remove {
  position: absolute; top: -12px; right: -12px;
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid #fff; background: #dc2626; color: #fff;
  font-size: 1.4rem; font-weight: 900; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.45);
}
.ad-img-remove:hover { background: #b91c1c; transform: scale(1.08); }
.ad-img-wrap.is-removing .ad-img-current { opacity: .35; filter: grayscale(1); }
.ad-img-wrap.is-removing .ad-img-remove { display: none; }
.ad-img-removed-note { margin: .5rem 0 0; font-weight: 800; color: #dc2626; font-size: .88rem; }
.ad-img-undo { background: none; border: 0; color: #2563eb; font-weight: 800; text-decoration: underline; cursor: pointer; padding: 0 .2rem; font: inherit; }
.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;
}

/* =========================================================
    show/hide eye toggle (progressive enhancement —
   added by /social/assets/js/-toggle.js). Works on
   any input[type=]; 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 s. */
  .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 s 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);
}

/* Per-tab unread badge (red "uñero") on the notification filter pills. */
.notif-tab-badge {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  margin-left: 4px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-family: var(--font-mono, monospace);
  font-size: .68rem;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
  vertical-align: middle;
}

/* Rich comment preview (Comments filter): comment text clamped to 3 lines +
   a thumbnail of the post/comic it's on (click the row to open it in full). */
.notif-body { flex: 1; min-width: 0; }
.notif-comment-preview {
  margin: 4px 0 2px;
  font-size: .9rem;
  line-height: 1.4;
  color: var(--ink);
  opacity: .92;
  white-space: pre-wrap;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* The @you inside a mention-notification snippet — pops so the  sees
   exactly where they were named. */
.notif-mention-hl {
  background: var(--accent, #ec4899);
  color: #fff;
  padding: 0 4px;
  border-radius: 4px;
  font-weight: 800;
}
.notif-comment-thumb {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border: 2px solid var(--ink);
  border-radius: 8px;
  align-self: center;
}
.notif-comment-thumb--empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-2);
  color: var(--ink-soft, #6b7280);
  font-size: 1.25rem;
}

/* Unread accent — pink left bar so it pops even when actor avatar is faded. */
.notif-item.is-unread {
  background: #FFF7FB; /* very light pink wash; es 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 /  events) — yellow highlight so s
   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; }

/* Dark mode: the unread/staff washes above are hardcoded LIGHT tints, but
   .notif-item text is var(--ink) which flips to light in dark mode → that was
   white-on-white. Override with dark-tinted washes (pink-ish for unread, amber-
   ish for staff) so the light text stays high-contrast. */
:root[data-theme="dark"] .notif-item.is-unread { background: #3a2140; }
:root[data-theme="dark"] .notif-item.is-staff  { background: #3d2f12; }
:root[data-theme="dark"] .notif-item.is-staff .notif-text > i { color: #FBBF24; }

/* Unread DM conversation row wash (messages.php). Light lavender in light mode;
   a dark purple in dark mode so the var(--ink) text (which flips to light)
   stays readable and the row still reads as "unread" vs the --paper read rows. */
:root                    { --dm-unread-bg: #ece4ff; }
:root[data-theme="dark"] { --dm-unread-bg: #2e1c4f; }

/* The notification row is a <li> with a STRETCHED content link (.notif-row-link)
   covering the whole card, plus the avatar and the actor's name as their own
   links sitting ABOVE it (z-index:1) — so clicking the person (avatar OR name)
   opens their profile, and clicking anywhere else opens the post/comic. */
.notif-avatar-link { position: relative; z-index: 1; flex-shrink: 0; display: inline-block; line-height: 0; text-decoration: none; color: inherit; }
.notif-avatar-link:hover .notif-avatar { filter: brightness(1.08); }
.notif-actor-link { position: relative; z-index: 1; text-decoration: none; color: inherit; }
.notif-actor-link:hover { text-decoration: underline; }
.notif-row-link { position: absolute; inset: 0; z-index: 0; font-size: 0; overflow: hidden; }
/* Club notif row actions (View / Stop following) — above the stretched link. */
.notif-club-actions { position: relative; z-index: 1; display: flex; gap: .5rem; flex-wrap: wrap; align-self: center; }
.notif-ca-btn {
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
  padding: .35rem .7rem; border: 2px solid var(--ink); background: var(--paper);
  font: inherit; font-weight: 700; font-size: .8rem; color: var(--ink);
  text-decoration: none; cursor: pointer;
}
.notif-ca-btn:hover { background: var(--accent, #ec4899); color: #fff; }
.notif-ca-btn--off:hover { background: #dc2626; border-color: #dc2626; color: #fff; }
/* Mobile: drop the action buttons to their own full-width line so they don't
   squeeze the notification text into a one-word-per-line column. */
@media (max-width: 640px) {
  .notif-item { flex-wrap: wrap; }
  .notif-club-actions { flex-basis: 100%; align-self: stretch; margin-top: .5rem; }
  .notif-ca-btn { flex: 1; justify-content: center; }
}

.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=""],
.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) */
/* ── Pics grid (pics.php, behind pics_grid_enabled) — 3 columns of capsules ── */
.pics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 720px) { .pics-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
@media (max-width: 460px) { .pics-grid { grid-template-columns: 1fr; } }
.pics-grid-promo { grid-column: 1 / -1; } /* full-width ad/marketplace break */
.pic-cap {
  display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
  background: var(--paper); border: 2px solid var(--ink); box-shadow: var(--shadow);
  border-radius: 8px; overflow: hidden; transition: transform .12s ease, box-shadow .12s ease;
}
.pic-cap:hover, .pic-cap:focus-visible { transform: translate(-2px, -2px); box-shadow: var(--shadow-lg); outline: none; }
.pic-cap-thumb {
  position: relative; width: 100%; aspect-ratio: 1; /* overridden inline per image */
  background: var(--paper-2, #2f2049); border-bottom: 2px solid var(--ink); overflow: hidden;
}
.pic-cap-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pic-cap-multi {
  position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,.62); color: #fff;
  border-radius: 6px; padding: 2px 7px; font-size: .7rem; font-weight: 800;
}
.pic-cap-foot { padding: 8px 10px 9px; display: flex; flex-direction: column; gap: 3px; }
.pic-cap-cap {
  font-size: .82rem; line-height: 1.32; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pic-cap- { font-size: .8rem; font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pic-cap-stats { display: flex; gap: .7rem; font-size: .74rem; font-weight: 700; color: var(--muted, #9b8bc2); }
.pic-cap-stats i { margin-right: 3px; }

.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: var(--paper);
  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);
}

/* ---- Comic  progress (comic-.js) ---- */
.cu-status {
  margin: .7rem 0;
  padding: .75rem .95rem;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
}
.cu-status-text {
  font-weight: 800;
  font-size: .98rem;
  margin-bottom: .5rem;
}
.cu-bar {
  height: 16px;
  background: var(--paper-2);
  border: 2px solid var(--ink);
  border-radius: 8px;
  overflow: hidden;
}
.cu-bar-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .2s ease;
}
/* Indeterminate phases (packaging / server-side work): full bar that pulses. */
.cu-status.is-indeterminate .cu-bar-fill {
  width: 100% !important;
  animation: cuPulse 1.1s ease-in-out infinite;
}
@keyframes cuPulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.cu-status.is-error {
  border-color: #dc2626;
  background: rgba(220, 38, 38, .12);
}
.cu-status.is-error .cu-bar-fill { background: #dc2626; animation: none; }

/* ---- 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;
  /* --paper, not #fff: --ink/--paper flip together, so an --ink fill always
     pairs with a contrasting --paper text in BOTH themes. Hardcoded #fff went
     white-on-light in dark mode (the filled chip's bg is --ink = light there). */
  color: var(--paper) !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 —  pages
   ===================================================================== */
.-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.-stat-card {
  background: var(--paper);
  border: var(--border-w) solid var(--ink);
  box-shadow: var(--shadow);
  padding: 16px 18px;
}
.-stat-card .stat-label {
  font-family: var(--font-mono);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-soft);
}
.-stat-card .stat-value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
}
.-table {
  width: 100%;
  background: var(--paper);
  border: var(--border-w) solid var(--ink);
  box-shadow: var(--shadow);
  border-collapse: collapse;
  color: var(--ink);
}
.-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);
}
.-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--ink-soft);
  font-size: .88rem;
  vertical-align: middle;
}
/*  -search typeahead dropdown. */
.-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;
}
.-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);
}
.-suggest-item:last-child { border-bottom: none; }
.-suggest-item.is-active,
.-suggest-item:hover { background: var(--ink); color: var(--paper); }
.-suggest-item img,
.-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);
}
.-suggest-item .as-name { font-weight: 800; font-size: .88rem; }
.-suggest-item .as-email { font-family: var(--font-mono, monospace); font-size: .72rem; opacity: .7; }
.-suggest-item .as-role { font-size: .65rem; text-transform: uppercase; background: var(--accent,#EC4899); color:#fff; padding:0 4px; border-radius:3px; }
.-suggest-item .as-banned { font-size: .65rem; text-transform: uppercase; background:#dc2626; color:#fff; padding:0 4px; border-radius:3px; }

.-table .actions { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.-table .actions form { display: inline-flex; margin: 0; }
/* Manage s stacks its actions one logical group per line (look / moderate /
   dials /  / delete) instead of letting a dozen controls flex-wrap into
   ragged columns. Opt-in class: every other  table keeps the plain blob. */
.-table .actions-stacked { flex-direction: column; align-items: stretch; gap: 5px; }
.-table .act-row { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
/* One height for every control in the column — buttons and selects disagreed by
   a couple of pixels, which is most of what read as "messy". */
.-table .act-row > a,
.-table .act-row > form > button,
.-table .act-row > form > select,
.-table .act-row > form > input[type="text"] {
  height: 26px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  line-height: 1;
}
/* Compact the action controls so the row doesn't balloon to ~180px and you
   can see many more  without scrolling. */
.-table .actions a,
.-table .actions button {
  padding: 4px 8px;
  font-size: .72rem;
}
.-table .actions select { padding: 3px 6px; font-size: .72rem; }
.-table .actions input[type="text"] { width: 96px; padding: 4px 6px; font-size: .72rem; }
/* Smaller avatar in the  cell. */
.-table td img[style*="border-radius:50%"],
.-table td div[style*="border-radius:50%"] {
  width: 28px !important;
  height: 28px !important;
  font-size: .68rem !important;
}

/* Menú lateral del  (reemplaza la nav del sitio dentro de /social//).
   Los colores salen de las mismas variables que el resto: hereda tema claro y
   oscuro sin tocar nada. */
.-menu { display: flex; flex-direction: column; gap: 10px; }
.-menu-back {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; text-decoration: none;
  font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; font-size: .82rem;
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.-menu-nav { display: flex; flex-direction: column; gap: 2px; }
.-menu-sec {
  margin: 14px 0 4px; padding: 0 4px;
  font-family: var(--font-display); font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-inv); opacity: .6;
}
.-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; text-decoration: none;
  font-weight: 700; font-size: .9rem;
  color: var(--text-inv); border: 2px solid transparent;
}
.-menu-item:hover { border-color: var(--ink); background: var(--paper); color: var(--ink); }
.-menu-item.is-active {
  background: var(--paper); color: var(--ink);
  border-color: var(--ink); box-shadow: var(--shadow-sm);
}
.-menu-item i { width: 18px; text-align: center; }
.-menu-text { flex: 1; }
.-menu-badge {
  min-width: 20px; padding: 1px 6px; text-align: center;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 800;
  background: #dc2626; color: #fff; border: 2px solid var(--ink);
}

/* Barra de pestañas de grupo (Colas, Dibujo, Logros, Salud). Hace que varias
   páginas separadas se naveguen como una sola pantalla, sin fusionar archivos. */
.-tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin: 0 0 1.1rem; padding-bottom: 6px;
  border-bottom: 3px solid var(--ink);
}
.-tab {
  padding: 7px 14px; text-decoration: none;
  font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: .03em; font-size: .82rem;
  border: 2px solid var(--ink); background: var(--paper-2); color: var(--ink);
}
.-tab.is-active { background: var(--ink); color: var(--paper); }
.-tab-count {
  display: inline-block; margin-left: 6px; padding: 0 6px;
  font-family: var(--font-mono); font-size: .72rem;
  background: #dc2626; color: #fff; border: 1px solid var(--ink);
}

/* =========================================================
   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 —  s + reports
   ===================================================================== */
.-filters { display: flex; gap: 12px; margin-bottom: 16px; align-items: center; flex-wrap: wrap; }
.-filters select,
.-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--list,
.search-comic-list,
.search-post-list {
  display: grid;
  gap: 12px;
}
.search--list  { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.search-comic-list { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.search--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--card:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-lg);
}
.search--card .avatar {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}
.search--card .name {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1rem;
}
.search--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-fixed);
  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=""],
  .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);
  }
}

@media (max-width: 539px) {
  /* Phones: 3-up thumbnail grid so you can scan many comics at a glance.
     (The base auto-fill minmax(220px) only fits 1 column on a phone, which
     made each comic full-width and clumsy to browse.) */
  .comics-grid,
  .fav-comic-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  /* Let the cards shrink to the 1/3 track. Without min-width:0 the cover image's
     intrinsic width (~400px) keeps each card wide, so the 3 columns overflow the
     screen and you only see one-and-a-bit covers. */
  .comics-grid .comic-card,
  .fav-comic-grid .comic-card,
  .comics-grid .comic-card .cover,
  .fav-comic-grid .comic-card .cover {
    min-width: 0;
  }
  /* Keep the cards thumbnail-clean: small title, drop the status/pages chips. */
  .comics-grid .comic-card .title,
  .fav-comic-grid .comic-card .title {
    font-size: .7rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
  .comics-grid .comic-card .meta,
  .fav-comic-grid .comic-card .meta {
    padding: 6px;
  }
  .comics-grid .comic-card .meta-row,
  .fav-comic-grid .comic-card .meta-row {
    display: none;
  }
}

/* =========================================================
    — MOBILE ONLY (≤720px). Desktop is left 100% untouched:
   every rule here is scoped to `.-area` and/or lives inside the
   ≤720px media query, so the desktop  view never sees any of it.
   The pages are desktop-first (data-dense tables, bulk ops); on phones
   we make them comfortable — tables scroll sideways instead of breaking
   the layout, toolbars wrap, and the gutters tighten so data uses the
   full width. (Replaces the old "designed for desktop" guard banner.)
   ========================================================= */
@media (max-width: 720px) {
  /* Use the full width — trim the centre column's side padding. */
  .-area .col-center { padding-left: 10px; padding-right: 10px; }

  /* Header + filter/tab/toolbar rows wrap instead of overflowing. */
  .-area .col-center > header,
  .-area .col-center > nav { flex-wrap: wrap; gap: .55rem; }

  /* Data tables scroll horizontally (each page wraps its table in an
     overflow:auto box). These keep grids/stat rows scrollable too. */
  .-table,
  .-grid,
  .-stat-card-row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── "See more" expander for long () 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; }
.reore-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;
}
.reore-btn:hover, .reore-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. (Legacy — superseded by .post-carousel.) */
.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; }

/* ── Multi-image post carousel (filmstrip, swipe/drag) ───────────────
   Replaces the Twitter-style grid: images sit side-by-side at a uniform
   height and scroll horizontally with snap (swipe on touch/trackpad,
   scrollbar/arrows on desktop). Tapping any image opens the lightbox
   gallery (handled by image-lightbox.js via .post-image). The "N/M"
   counter is server-rendered and live-updated by post-carousel.js. */
.post-carousel-wrap { position: relative; margin: 12px -18px; }
.post-image.post-carousel {
  display: flex; gap: 4px; margin: 0;
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  background: #000; cursor: grab;
  border-top: var(--border-w) solid var(--ink);
  border-bottom: var(--border-w) solid var(--ink);
  scrollbar-width: thin; scrollbar-color: var(--ink) transparent;
}
.post-image.post-carousel.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.post-image.post-carousel.is-dragging img { cursor: grabbing; }
.post-image.post-carousel img {
  flex: 0 0 auto; scroll-snap-align: start;
  height: clamp(144px, 31vw, 264px);   /* ~40% shorter than the single-image hero */
  width: auto; max-width: 92%;
  object-fit: cover; display: block; border-radius: 0; cursor: zoom-in;
  -select: none; -webkit--drag: none; -webkit--select: none;
}
.post-image.post-carousel::-webkit-scrollbar { height: 8px; }
.post-image.post-carousel::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 4px; }
.pc-badge {
  position: absolute; top: 12px; right: 26px; z-index: 2;
  background: rgba(0,0,0,.78); color: #fff;
  font: 800 .8rem/1 'Oswald', Arial, sans-serif; letter-spacing: .04em;
  padding: 5px 9px; border-radius: 999px; pointer-events: none;
}

/* 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-name { display: block; font-size: .68rem; font-weight: 700; margin-top: .25rem; text-align: center; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.img-preview-cell .img-preview-size { display: block; font-size: .72rem; opacity: .8; margin-top: .1rem; 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; }
/* Drag-to-reorder (multi-image composer) */
.img-preview--stack { flex-direction: column; align-items: stretch; }
.img-preview-hint { margin: 0 0 .4rem; font-size: .78rem; font-weight: 700; opacity: .85; display: flex; align-items: center; gap: .35rem; }
.img-preview-grid.is-reorderable .img-preview-cell { cursor: grab; touch-action: none; -webkit--select: none; -select: none; }
.img-preview-cell.is-dragging { cursor: grabbing; }
/* The placeholder slot the lifted thumb left behind */
.img-preview-cell.is-dragging .img-preview-thumb { opacity: .25; border-style: dashed; }
.img-preview-cell.is-dragging .img-preview-ord,
.img-preview-cell.is-dragging .img-preview-remove { visibility: hidden; }
/* The floating clone that follows the cursor */
.img-preview-ghost {
  position: fixed; left: 0; top: 0; z-index: 100000; pointer-events: none;
  border-radius: 8px; box-shadow: 0 12px 28px rgba(0,0,0,.55);
}
.img-preview-ghost img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; border-radius: 8px; border: 2px solid #fff;
}
.img-preview-ord {
  position: absolute; top: 4px; left: 4px; z-index: 1;
  min-width: 20px; height: 20px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent, #ec4899); color: #fff;
  font-weight: 800; font-size: .72rem; line-height: 1;
  border-radius: 999px; border: 2px solid #fff; pointer-events: none;
}

/* ── Comic er 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; }
/* Boxed story excerpt in the feed — the opening of the body in a serif
   "reading" face, clamped with an auto ellipsis. 10 lines: con 3 no se
   alcanzaba a enganchar a nadie, era un asomo en vez de un adelanto. */
.story-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 10;
  line-clamp: 10;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: .3rem 0 .7rem;
  padding: .75rem .95rem;
  border: 2px solid var(--ink);
  border-left: 5px solid var(--accent-2, #FBBF24);
  background: var(--paper-2);
  color: var(--ink);
  border-radius: 10px;
  font-family: Georgia, 'Times New Roman', 'Noto Serif', serif;
  font-size: 1.02rem;
  line-height: 1.55;
}
/* En pantallas chicas, 10 lineas de serif ocupan casi todo el alto util:
   se recorta a 7 para que abajo del recuadro siga vieindose el boton de leer. */
@media (max-width: 720px) {
  .story-excerpt { -webkit-line-clamp: 7; line-clamp: 7; font-size: .98rem; }
}
.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;
  background: rgba(0, 0, 0, 0.92);
}
.pcx-lightbox[hidden] { display: none; }
/* Image area — fills the space left of the comments  (full width when
   there is no ). */
.pcx-lightbox-stage {
  flex: 1; min-width: 0; position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem 1rem;
}
/* Comments  (Facebook-photo style) — white, scrollable, on the right. */
.pcx-lightbox-side {
  width: 384px; flex-shrink: 0;
  background: var(--paper); color: var(--ink);
  overflow-y: auto;
  border-left: 3px solid #111827;
  padding: 14px 14px 48px;
}
.pcx-lightbox-side[hidden] { display: none; }
.pcx-lightbox-side .comments-section { margin-top: 0; }
.pcx-lb-loading { text-align: center; padding: 2.5rem 1rem; font-size: 1.6rem; color: var(--ink-soft); }
@media (max-width: 820px) {
  .pcx-lightbox.has-side { flex-direction: column; }
  .pcx-lightbox.has-side .pcx-lightbox-stage { max-height: 52vh; padding: .5rem; }
  .pcx-lightbox.has-side .pcx-lightbox-side { width: 100%; border-left: 0; border-top: 3px solid #111827; }
}
.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%;
  z-index: 3; /* above the comments  so it stays clickable */
}
.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; }
}
/* Live-drawer count next to the dot. */
.nav-item .live-count {
  flex: 0 0 auto; margin-left: auto;
  font-family: var(--font-display, 'Oswald'), sans-serif; font-weight: 800; font-size: .82rem;
  color: #ef4444; line-height: 1;
}
.nav-item .live-count + .live-dot { margin-left: 4px; }   /* sit right after the number */
/* Nobody live → grey, static dot (no pulse), pushed to the right like the count. */
.nav-item .live-dot--off {
  background: #9ca3af; box-shadow: none; animation: none; opacity: .6; margin-left: auto;
}

/* ===== 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; }
}

/* ===== Shared composer (composer-core.php) — feed, profile & compose.php ===== */
.composer-inline { padding: 1rem 1.1rem; border: 2px solid var(--accent-2, #FBBF24); border-radius: 14px; background: rgba(76,29,149,0.08); }
.composer- { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.composer-core { display: flex; flex-direction: column; gap: .8rem; }
.composer-core--full { padding: 1.25rem; border: 2px solid var(--border, #3a2a55); border-radius: 14px; background: rgba(76,29,149,0.08); }

.cc-compose { display: flex; align-items: flex-start; gap: .7rem; }
.cc-text-wrap { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .4rem; }
.cc-ta { position: relative; }
.cc-ta textarea,
.cc-input, .cc-file {
  width: 100%; padding: .7rem .85rem; border-radius: 10px;
  border: 2px solid var(--border, #3a2a55); background: rgba(0,0,0,0.25);
  color: inherit; font: inherit; font-size: .97rem;
}
.cc-ta textarea { resize: vertical; min-height: 5rem; line-height: 1.5; padding-bottom: 1.8rem; }
.cc-file { cursor: pointer; border-style: dashed; }
.cc-input--auto { width: auto; }

/* "n / max" badge in the textarea's bottom-right corner (always readable: opaque
   dark chip + light text, regardless of light/dark theme behind it). */
.cc-charcount {
  position: absolute; right: .55rem; bottom: .5rem;
  font-size: .78rem; font-weight: 800; letter-spacing: .02em;
  color: #f3f4f6; background: rgba(17,24,39,.82);
  padding: .12rem .5rem; border-radius: 8px; pointer-events: none;
}
.cc-charcount.is-near { color: #fde047; }
.cc-charcount.is-full { color: #fca5a5; }

.cc-group { border: 2px solid var(--border, #3a2a55); border-radius: 12px; padding: .85rem .9rem; display: flex; flex-direction: column; gap: .85rem; }
.cc-group-title { font-family: 'Oswald', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: .82rem; opacity: .85; display: flex; align-items: center; gap: .4rem; }
.cc-field { display: flex; flex-direction: column; gap: .35rem; }
.cc-field > label { font-weight: 800; font-size: .92rem; display: inline-flex; align-items: center; gap: .4rem; }
.cc-field-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.cc-field-head label { font-weight: 800; font-size: .92rem; margin: 0; }
.cc-rules-link { white-space: nowrap; font-weight: 700; font-size: .8rem; text-decoration: underline; opacity: .9; }
.cc-help { margin: 0; font-size: .82rem; opacity: .78; line-height: 1.4; }
.cc-locked { padding: .7rem .9rem; border: 2px dashed var(--border, #3a2a55); border-radius: 10px; background: rgba(0,0,0,0.18); font-size: .9rem; font-weight: 600; line-height: 1.5; }
/* Format toolbar + "Add sticker" share the top row; the sticker sits at the right. */
.cc-toolbar-row { display: flex; align-items: center; gap: .5rem .6rem; flex-wrap: wrap; }
.cc-toolbar-row .bbcode-toolbar { margin: 0; }
.cc-toolbar-sticker { margin-left: auto; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
/* Solid adaptive fill (--paper) + adaptive text (--ink) so the label always
   contrasts — the old translucent fill left dark text on the dark composer. */
.cc-sticker-btn { font-weight: 800; font-size: .92rem; padding: .55rem 1rem; border: 2px solid #f59e0b; background: var(--paper); color: var(--ink); border-radius: 10px; cursor: pointer; }

.cc-detail { border: 2px solid var(--border, #3a2a55); border-radius: 10px; padding: .5rem .7rem; }
.cc-detail > summary { cursor: pointer; font-weight: 800; font-size: .9rem; }
.cc-detail-body { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .55rem; }
.cc-inline-check { display: inline-flex; align-items: center; gap: .4rem; font-weight: 800; }
.cc-inline-check input { width: 1rem; height: 1rem; }
.cc-lock-toggle { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; border: 2px solid #f59e0b; border-radius: 12px; padding: .7rem .85rem; background: rgba(245,158,11,.08); }
.cc-lock-toggle > input { margin-top: .2rem; width: 1.2rem; height: 1.2rem; flex: 0 0 auto; }
.cc-lock-title { display: block; font-weight: 800; }

/* DeviantArt cross-post toggle (composer). Greyed + non-interactive until a
   single image is attached (deviantart-compose.js sets .is-disabled). */
.cc-da-toggle { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; border: 2px solid #05cc47; border-radius: 12px; padding: .7rem .85rem; background: rgba(5,204,71,.08); margin-top: .6rem; }
.cc-da-toggle > input { margin-top: .2rem; width: 1.2rem; height: 1.2rem; flex: 0 0 auto; }
.cc-da-title { display: block; font-weight: 800; }
.cc-da-warn { display: block; }
.cc-da-toggle.is-disabled { opacity: .5; cursor: not-allowed; border-color: var(--border, #3a2a55); background: rgba(148,163,184,.08); }
.cc-da-toggle.is-disabled > input { cursor: not-allowed; }

/* "Add signature" row (looks like the schedule row; opens the popup). */
.cc-signature-btn { display: flex; align-items: center; justify-content: space-between; gap: .6rem; width: 100%; cursor: pointer; background: transparent; color: inherit; font: inherit; font-weight: 800; text-align: left; }
.cc-signature-btn > span:first-child { display: inline-flex; align-items: center; gap: .5rem; }
.cc-sig-edit { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 800; color: #f59e0b; }
.cc-signature-btn:hover .cc-sig-edit { text-decoration: underline; }

/* Signature popup */
.signature-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.signature-modal[hidden] { display: none; }
.signature-box { width: min(480px, 100%); background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 14px; padding: 1rem 1.1rem; box-shadow: var(--shadow); }
.signature-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; font-size: 1.05rem; margin-bottom: .5rem; }
.signature-close { background: none; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--ink); padding: 0 .2rem; }
.signature-help { margin: 0 0 .6rem; font-size: .85rem; opacity: .82; line-height: 1.4; }
.signature-text { width: 100%; padding: .7rem .85rem; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; font-size: 1rem; line-height: 1.45; resize: vertical; min-height: 4.5rem; }
.signature-actions { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; margin-top: .85rem; }
.signature-cancel { font-weight: 800; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); }
/* "Add automatically" toggle inside the signature popup + the AUTO badge on the button */
.signature-auto-row { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; border: 2px solid #f59e0b; border-radius: 12px; padding: .7rem .85rem; background: rgba(245,158,11,.08); margin-top: .7rem; }
.signature-auto-row > input { margin-top: .2rem; width: 1.2rem; height: 1.2rem; flex: 0 0 auto; }
.signature-auto-title { display: block; font-weight: 800; }
.signature-auto-row .signature-help { margin: .15rem 0 0; }
.cc-sig-state { display: inline-flex; align-items: center; gap: .6rem; }
.cc-sig-auto { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 800; color: #34d399; }
.cc-sig-auto[hidden] { display: none; }
.cc-signature-btn.is-auto { border-color: #34d399; background: rgba(52,211,153,.10); }

/* "Add QR" row (same look as the signature row; opens the corner popup). */
.cc-qr-btn { display: flex; align-items: center; justify-content: space-between; gap: .6rem; width: 100%; cursor: pointer; background: transparent; color: inherit; font: inherit; font-weight: 800; text-align: left; }
.cc-qr-btn > span:first-child { display: inline-flex; align-items: center; gap: .5rem; }
.cc-qr-state { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 800; color: #34d399; }
.cc-qr-state[hidden] { display: none; } /* class rule above out-specifies the UA [hidden]; restore it */
.cc-qr-btn.is-on { border-color: #34d399; background: rgba(52,211,153,.10); }

/* QR corner popup */
.qr-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.qr-modal[hidden] { display: none; }
.qr-box { width: min(460px, 100%); background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 14px; padding: 1rem 1.1rem; box-shadow: var(--shadow); }
.qr-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; font-size: 1.05rem; margin-bottom: .5rem; }
.qr-close { background: none; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--ink); padding: 0 .2rem; }
.qr-help { margin: 0 0 .8rem; font-size: .85rem; opacity: .82; line-height: 1.4; }
.qr-corner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.qr-corner-opt { display: flex; align-items: center; gap: .55rem; cursor: pointer; font: inherit; font-weight: 800; font-size: .92rem; color: var(--ink); background: var(--paper); border: 2px solid var(--border, #3a2a55); border-radius: 12px; padding: .7rem .8rem; text-align: left; }
.qr-corner-opt:hover { border-color: #f59e0b; }
.qr-corner-opt.is-sel { border-color: #34d399; background: rgba(52,211,153,.12); box-shadow: 0 0 0 2px rgba(52,211,153,.35) inset; }
.qr-dot { position: relative; flex: 0 0 auto; width: 30px; height: 22px; border: 2px solid currentColor; border-radius: 4px; opacity: .9; }
.qr-dot::after { content: ""; position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #f59e0b; }
.qr-dot-tl::after { top: 2px; left: 2px; }
.qr-dot-tr::after { top: 2px; right: 2px; }
.qr-dot-bl::after { bottom: 2px; left: 2px; }
.qr-dot-br::after { bottom: 2px; right: 2px; }
.qr-corner-opt.is-sel .qr-dot::after { background: #34d399; }
.qr-actions { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .9rem; }
.qr-off-btn { font-weight: 800; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); }

.cc-bottom { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.cc-orcreate { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.cc-orcreate-label { font-size: .82rem; font-weight: 800; opacity: .9; }
.cc-orcreate-btn { text-decoration: none; font-weight: 800; padding: .4rem .9rem; font-size: .88rem; }
/* Story/Comic read as solid buttons (white-on-dark / dark-on-light), not the
   ghost style whose dark text vanished on the dark composer. Specific enough to
   beat .btn-ghost. */
.cc-bottom .cc-orcreate-btn { background: var(--paper); color: var(--ink); border: 2px solid var(--border, #3a2a55); }
.cc-submit { font-family: 'Oswald', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: .65rem 1.5rem; font-size: .97rem; }
.cc-cancel-link { text-decoration: none; font-weight: 800; padding: .55rem .9rem; opacity: .85; color: inherit; }
.cc-cancel-link:hover { opacity: 1; text-decoration: underline; }

/* ── Compose redesign (2026-06-20): drop-zone media, collapsible settings,
   segmented type tabs. Shared by inline (feed/profile) + full compose page. ── */

/* Drag & drop media zone — the real <input type=file> is hidden; the zone +
   " files" button trigger it (composer-dropzone.js), and a drop sets its
   files. .img-preview stays inside so image-preview.js renders thumbs below. */
.cc-dropzone { position: relative; border: 2px dashed var(--border, #5e4d8c); border-radius: 14px; padding: 1.4rem 1rem; background: rgba(128,128,128,.10); transition: border-color .15s ease, background .15s ease; }
.cc-dropzone.is-dragover { border-color: #fbbf24; background: rgba(251,191,36,.12); }
.cc-dropzone .cc-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cc-dz-prompt { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; }
.cc-dz-icon { font-size: 1.9rem; color: var(--accent, #ec4899); opacity: .9; }
.cc-dz-title { font-weight: 800; font-size: .95rem; }
.cc-dz-or { font-size: .8rem; opacity: .6; font-weight: 700; }
.cc-dz-btn { background: #fbbf24; color: #1a1a1a; border: 2px solid #1a1a1a; font-weight: 800; padding: .5rem 1.1rem; border-radius: 10px; cursor: pointer; }
.cc-dz-hint { font-size: .78rem; opacity: .65; font-weight: 600; }
.cc-dropzone .img-preview:not([hidden]) { margin-top: 1rem; }

/* Collapsible "Post settings" (a <details>, collapsed by default). */
.cc-settings { padding: 0; }
.cc-settings > .cc-settings-summary { cursor: pointer; list-style: none; padding: .85rem .9rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.cc-settings > .cc-settings-summary::-webkit-details-marker { display: none; }
.cc-settings-chev { transition: transform .18s ease; opacity: .8; }
.cc-settings[open] > .cc-settings-summary > .cc-settings-chev { transform: rotate(180deg); }
.cc-settings[open] > .cc-settings-summary { border-bottom: 2px solid var(--border, #3a2a55); margin-bottom: .85rem; }
.cc-settings > :not(summary) { margin-left: .9rem; margin-right: .9rem; }
.cc-settings > :last-child { margin-bottom: .9rem; }

/* Segmented type tabs (Post / Draw / Comic / Story) — on the compose page header
   AND at the top of the inline composer (.cc-tabs). */
.compose-types { display: flex; gap: 0; flex-wrap: wrap; border: 2px solid var(--ink); border-radius: 12px; overflow: hidden; }
.compose-types.cc-tabs { margin-bottom: .8rem; }
.compose-types .ct-tab { flex: 1 1 0; min-width: 84px; text-decoration: none; text-align: center; justify-content: center; display: inline-flex; align-items: center; gap: .4rem; padding: .7rem .9rem; font-family: 'Oswald', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; font-size: .9rem; color: var(--ink); background: var(--paper); border-right: 2px solid var(--ink); }
.compose-types .ct-tab:last-child { border-right: 0; }
.compose-types .ct-tab.is-active { background: #fbbf24; color: #1a1a1a; pointer-events: none; }
.compose-types .ct-tab:not(.is-active):hover { background: rgba(251,191,36,.18); }
@media (max-width: 560px) {
  .compose-types { border-radius: 12px; }
  .compose-types .ct-tab { border-right: 0; flex-basis: 50%; }
}

/* Edit mode — current ed images, each with a "remove" checkbox. */
.cc-existing-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .5rem; margin-bottom: .6rem; }
.cc-eimg { position: relative; display: block; cursor: pointer; }
.cc-eimg img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 8px; border: 2px solid var(--border, #3a2a55); display: block; }
.cc-eimg-remove { position: absolute; top: 5px; right: 5px; display: inline-flex; align-items: center; gap: .3rem; background: #dc2626; color: #fff; font-size: .72rem; font-weight: 800; padding: .2rem .45rem; border-radius: 6px; border: 2px solid #fff; }
.cc-eimg-remove input { width: 1rem; height: 1rem; margin: 0; }

/* ===== 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: 12px;         /* near the top-right corner (nudged right so it clears the left-aligned action row) */
  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));
}
/* Mobile: smaller sticker (80% of desktop) nudged further LEFT, and a slightly
   tighter action row, so the sticker and the buttons share the row with more
   breathing room. Desktop keeps the full 100px. */
@media (max-width: 720px) {
  /* Scale (not resize) so the bottom-right corner stays anchored where the 100px
     version sat (right:18, bottom:+20) — no upward drift, no left shift; it just
     shrinks to 80% toward that corner. */
  .post-sticker { transform: scale(0.8); transform-origin: bottom right; }
  .post-foot { gap: 1px; margin-left: -6px; }              /* tighter row, shifted a touch left */
  .post-foot .pf-btn { min-width: 40px; padding-left: 8px; padding-right: 8px; }  /* narrower buttons */
}

/* ===== 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-- { 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; }
/* Heroes + Allies split under the mini bar. */
.rescue-mini-split { margin-top: 8px; text-align: center; font-size: .72rem; font-weight: 800; letter-spacing: .02em; color: var(--text-inv); opacity: .92; }

.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-stat-sub { font-size: .62rem; font-weight: 700; color: var(--ink-soft); margin-top: 3px; line-height: 1.2; }
.rescue-stat--allies .rescue-stat-num { color: #db2777; }
.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); }
/* Aliados (donations): covered line, dynamic "or" gap line, two-path cards, Ally button. */
.rescue-covered { margin-top: 8px; text-align: center; font-weight: 800; font-size: .82rem; color: var(--ink-soft); }
.rescue-orline { margin-top: 10px; text-align: center; font-weight: 800; font-size: .92rem; color: #db2777; border: 2px dashed #db2777; border-radius: 8px; padding: 8px 10px; }
.rescue-orline[hidden] { display: none; }
.rescue-paths { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; text-align: left; }
.rescue-path { padding: 11px 14px; border: 2px solid var(--ink); border-radius: 8px; background: var(--paper-2); font-size: .9rem; line-height: 1.45; }
.rescue-path--ally { border-color: #db2777; }
.rescue-path strong { color: var(--primary); }
.rescue-path--ally strong { color: #db2777; }
.rescue-btn-ally { background: #db2777; color: #fff; box-shadow: var(--shadow-sm); }
.rescue-btn-ally:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow); }
.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;
  /* El padding inferior le RESERVA sitio a la barra de zoom. Si se superpone,
     tapa los ultimos ~45px de la pagina, que en estos comics son los creditos
     del autor. Mejor una imagen un pelin mas chica que una imagen recortada. */
  padding: 24px 24px 92px; min-width: 0; position: relative;   /* ancla flechas + barra */
}
/* El lienzo recorta lo que sobra al ampliar; sin overflow:hidden la imagen
   escalada se saldria por encima de la barra y de la columna de comentarios. */
.cvlb-canvas {
  flex: 1; min-width: 0; height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  touch-action: none;            /* el arrastre lo gestiona el JS, no el navegador */
}
.cvlb-img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  border: 3px solid #111827; background: #fff;
  cursor: zoom-in; -select: none; -webkit--drag: none;
  transform-origin: center center;
  /* SIN will-change: transform. Promociona la imagen a capa de GPU y el
     navegador la rasteriza UNA vez al tamano ajustado; al ampliar estiraba ese
     mapa de bits en vez de remuestrear del archivo (1449x2048) y se veia
     pixelada. El zoom se hace cambiando el ancho real, ver comic-page.js. */
}
.cvlb-canvas.is-zoomed .cvlb-img {
  max-width: none; max-height: none;
  /* flex-shrink:0 es imprescindible: la imagen es un item flex y por defecto se
     encoge para caber en el lienzo, asi que el ancho que pide el zoom se
     ignoraba y los ultimos pasos no hacian nada. Que se salga: el lienzo
     recorta (overflow:hidden) y se navega arrastrando. */
  flex-shrink: 0;
}

/* --- flechas de pagina ------------------------------------------------- */
.cvlb-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 52px; height: 72px; display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; line-height: 1;
  background: #fff; color: #111827; border: 3px solid #111827; border-radius: 8px;
  box-shadow: 4px 4px 0 rgba(0,0,0,.45);
  cursor: pointer; transition: transform .12s ease, background .12s ease;
}
.cvlb-arrow:hover { background: #facc15; }
.cvlb-arrow:active { transform: translateY(-50%) translate(2px, 2px); box-shadow: 2px 2px 0 rgba(0,0,0,.45); }
.cvlb-arrow[hidden] { display: none !important; }   /* gemelo obligatorio, ver hidden_overlay_clicktrap */
.cvlb-arrow--prev { left: 14px; }
.cvlb-arrow--next { right: 14px; }

/* --- barra de zoom + indicador de pagina -------------------------------- */
.cvlb-bar {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 3;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: #fff; color: #111827; border: 3px solid #111827; border-radius: 10px;
  box-shadow: 4px 4px 0 rgba(0,0,0,.45);
}
.cvlb-bar button {
  min-width: 36px; height: 34px; padding: 0 8px;
  background: transparent; color: #111827; border: 0; border-radius: 6px;
  font: inherit; font-weight: 800; font-size: .95rem; cursor: pointer;
}
.cvlb-bar button:hover:not(:disabled) { background: #facc15; }
.cvlb-bar button:disabled { opacity: .35; cursor: default; }
.cvlb-bar-pct { font-variant-numeric: tabular-nums; min-width: 58px; }
.cvlb-bar-sep { width: 2px; height: 22px; background: #111827; opacity: .25; }
.cvlb-bar-page {
  font-family: var(--font-display, inherit); font-weight: 800; font-size: .9rem;
  padding: 0 6px; white-space: nowrap;
}

.cvlb-side.is-loading { opacity: .55; transition: opacity .15s ease; }

/* --- selector de pagina (se despliega sobre la barra) ------------------- */
.cvlb-bar-page { cursor: pointer; }
.cvlb-bar-page::after {
  content: '\25B4';          /* triangulito: avisa de que se despliega */
  font-size: .7em; margin-left: .35em; opacity: .6;
}
.cvlb-jump {
  position: absolute; left: 50%; bottom: 76px; transform: translateX(-50%); z-index: 4;
  width: min(420px, calc(100% - 32px));
  background: #fff; color: #111827; border: 3px solid #111827; border-radius: 10px;
  box-shadow: 6px 6px 0 rgba(0,0,0,.45);
  padding: 10px 12px 12px;
}
.cvlb-jump[hidden] { display: none !important; }   /* gemelo obligatorio, ver hidden_overlay_clicktrap */
.cvlb-jump-head {
  font-family: var(--font-display, inherit); font-weight: 800; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px;
}
.cvlb-jump-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 6px; max-height: 40vh; overflow-y: auto;
}
.cvlb-jump-cell {
  height: 38px; background: var(--paper, #fff); color: #111827;
  border: 2px solid #111827; border-radius: 6px;
  font: inherit; font-weight: 800; font-size: .9rem; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.cvlb-jump-cell:hover { background: #facc15; }
.cvlb-jump-cell.is-current { background: #111827; color: #fff; }

@media (max-width: 820px) {
  .cvlb-jump { bottom: 58px; padding: 8px 10px 10px; }
  .cvlb-jump-grid { grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); max-height: 34vh; }
  .cvlb-jump-cell { height: 34px; font-size: .82rem; }
}
.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 8px 58px; max-height: 60vh; }
  .cvlb-side { width: 100%; border-left: 0; border-top: 3px solid #111827; }
  .cvlb-arrow { width: 40px; height: 56px; font-size: 1.2rem; }
  .cvlb-arrow--prev { left: 4px; }
  .cvlb-arrow--next { right: 4px; }
  .cvlb-bar { bottom: 8px; gap: 2px; padding: 4px 6px; }
  .cvlb-bar button { min-width: 32px; height: 30px; padding: 0 5px; }
  .cvlb-bar-pct { min-width: 50px; font-size: .85rem; }
  .cvlb-bar-page { font-size: .8rem; }
}

/* Marketplace listing detail — 2-col (content + 280px buy ) on desktop,
   stacks to a single column on mobile (was crushing the content to ~75px). */
.mp-listing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 1.25rem;
  align-items: start;
}
.mp-listing-aside { position: sticky; top: 1rem; }
@media (max-width: 760px) {
  /* minmax(0,1fr) — not plain 1fr — so a long unbreakable string (e.g. a pasted
     URL in the description) can't push the column wider than the viewport. */
  .mp-listing-grid { grid-template-columns: minmax(0, 1fr); }
  .mp-listing-aside { position: static; }
}
/* Hard stop: nothing inside a listing may exceed the column width on any screen. */
.mp-listing-grid, .mp-listing-grid * { min-width: 0; }
.mp-listing-grid img { max-width: 100%; height: auto; }

/* Mobile: give the marketplace LISTING page a small horizontal gutter so the
   ad title/description don't touch the screen edges. Scoped to that page only
   (body.mp-listing-page) — the feed and the rest of the app stay edge-to-edge. */
@media (max-width: 720px) {
  body.mp-listing-page .col-center { padding-left: 12px; padding-right: 12px; }
}

/* Rescue card pinned to the top of the mobile drawer. The base .rescue-mini is
   translucent (built for the dark sidebar); here it sits on the WHITE drawer
   , so use a SOLID purple background to keep the white/gold text legible. */
.rescue-mini--drawer {
  background: var(--primary, #4c1d95);
  color: #fff;
  border-color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  margin-bottom: .55rem;
}
.rescue-mini--drawer:hover { background: var(--primary-dk, #3b0764); transform: translateY(-1px); }
.rescue-mini-title {
  display: flex; align-items: center; gap: .4rem;
  font-weight: 800; font-size: .92rem; color: #fff;
  margin-bottom: 9px; letter-spacing: .01em; line-height: 1.15;
}
.rescue-mini-title i { color: var(--accent-2, #FBBF24); }

/* Marketplace listing aside header: price (left) + seller (right) on one row,
   so the wide mobile  uses the horizontal space instead of leaving the
   right half empty. Wraps to stacked when the  is too narrow (desktop). */
.mp-aside-head { display: flex; align-items: center; justify-content: space-between; gap: .9rem; flex-wrap: wrap; }
.mp-aside-head .mp-aside-price { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.mp-aside-head .mp-aside-seller { flex-shrink: 0; }

/* Days-left line in the drawer rescue card (gold on the solid purple card). */
.rescue-mini-days {
  display: flex; align-items: center; gap: .4rem;
  font-size: .8rem; font-weight: 800; color: var(--accent-2, #FBBF24);
  margin-bottom: 9px; letter-spacing: .01em;
}
/* Final-24h countdown: red, monospaced, tabular so the ticking digits don't jitter. */
.rescue-countdown [data-rescue-days] {
  color: #ef4444; font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums; font-weight: 900; letter-spacing: .02em;
}
.rescue-stat.rescue-countdown .rescue-stat-num { color: #ef4444; font-family: var(--font-mono, monospace); font-variant-numeric: tabular-nums; font-size: 1.5rem; }

/* ===================== Pal Coins ===================== */
/* Sidebar wallet pill */
.pal-wallet { width: 100%; cursor: pointer; font: inherit; text-align: left; }
.pal-wallet .nav-icon { color: #FBBF24; }
.pal-wallet-amount {
  margin-left: auto;
  font-weight: 900;
  font-size: .95rem;
  color: var(--ink-fixed, #111827);
  background: var(--accent-2, #FBBF24);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: .1rem .55rem;
  min-width: 2.2rem;
  text-align: center;
}
.pal-wallet-amount.pal-pulse { animation: palPulse .5s ease; }
@keyframes palPulse { 0%{transform:scale(1)} 35%{transform:scale(1.35)} 100%{transform:scale(1)} }

/* Coins flying to the wallet */
.pal-fly-coin {
  position: fixed; z-index: 100000; pointer-events: none;
  color: #FBBF24; font-size: 1.5rem; line-height: 1;
  transform: translate(0,0); opacity: 1;
  transition: transform .35s ease;
  text-shadow: 0 2px 6px rgba(0,0,0,.5);
}

/* Shared modal overlay (checklist) */
.pal-modal, .pal-welcome {
  position: fixed; inset: 0; z-index: 99990;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: rgba(0,0,0,.6);
}
.pal-modal[hidden], .pal-welcome[hidden] { display: none; }
.pal-modal-card, .pal-welcome-card {
  background: var(--paper); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  width: 100%; max-width: 420px; padding: 1.4rem 1.3rem; position: relative;
}
.pal-modal-x {
  position: absolute; top: .6rem; right: .6rem;
  background: transparent; border: none; color: var(--ink);
  font-size: 1.35rem; cursor: pointer; line-height: 1; padding: .3rem;
}
.pal-wallet-head {
  display: flex; align-items: center; gap: .5rem;
  font-weight: 900; font-size: 1.8rem; margin-bottom: .4rem;
}
.pal-wallet-head .fa-coins { color: #FBBF24; }
.pal-wallet-unit { font-size: .9rem; font-weight: 800; opacity: .8; }
.pal--nudge {
  font-size: .9rem; font-weight: 700; margin: .2rem 0 .6rem;
  padding: .5rem .7rem; border-radius: 10px;
  border: 2px solid #D97706; background: rgba(217,119,6,.15); color: var(--ink);
}
.pal-tasks-title { font-size: 1rem; font-weight: 800; margin: .8rem 0 .5rem; }
.pal-tasklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.pal-task {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .7rem; border: 2px solid var(--border, #3a2a55);
  border-radius: 10px; background: var(--paper-2); font-weight: 700;
}
.pal-task.is-done { border-color: #10b981; }
.pal-task-check { font-size: 1.1rem; color: var(--ink-soft, #9ca3af); }
.pal-task.is-done .pal-task-check { color: #10b981; }
.pal-task-streak .pal-task-check { color: #f97316; }
.pal-task-label { flex: 1; min-width: 0; }
.pal-task-ico { opacity: .8; margin-right: .15rem; }
.pal-task-coins {
  font-weight: 900; color: var(--ink-fixed, #111827);
  background: var(--accent-2, #FBBF24); border-radius: 999px;
  padding: .05rem .5rem; font-size: .82rem;
}
.pal-save-hint {
  margin: .9rem 0 0; font-size: .85rem; font-weight: 600; line-height: 1.45;
  opacity: .9; display: flex; gap: .45rem; align-items: flex-start;
}
.pal-save-hint .fa-piggy-bank { color: #FBBF24; margin-top: .15rem; }

/* Daily welcome modal */
.pal-welcome-card { text-align: center; max-width: 380px; border-color: var(--accent-2, #FBBF24); }
.pal-welcome-coin { font-size: 3rem; color: #FBBF24; margin-bottom: .3rem; animation: palCoinSpin 1.2s ease infinite; }
@keyframes palCoinSpin { 0%,100%{transform:rotate(-8deg) scale(1)} 50%{transform:rotate(8deg) scale(1.08)} }
.pal-welcome-title { font-family: 'Oswald', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; font-size: 1.6rem; margin: .2rem 0 .1rem; }
.pal-welcome-sub { font-size: .95rem; opacity: .85; margin: 0 0 .6rem; }
.pal-welcome-amount { font-weight: 900; font-size: 2.6rem; color: #FBBF24; text-shadow: 0 2px 8px rgba(0,0,0,.4); margin: .2rem 0 .6rem; }
.pal-welcome-breakdown { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.pal-welcome-breakdown li { display: flex; justify-content: space-between; gap: 1rem; font-weight: 700; font-size: .95rem; padding: .35rem .7rem; border: 2px solid var(--border, #3a2a55); border-radius: 9px; background: var(--paper-2); }
.pal-welcome-breakdown strong { color: #FBBF24; }
.pal-welcome-claim { width: 100%; }

/* ============================================================
   "Who liked this" popover (Facebook-style, hover desktop / tap mobile)
   High contrast + generous sizing (Alex RP accessibility).
   ============================================================ */
.likers-trigger {
  cursor: pointer;
  border-radius: 4px;
  padding: 0 .25rem;
  transition: background .12s ease;
}
.likers-trigger:hover,
.likers-trigger:focus { text-decoration: underline; background: rgba(0,0,0,.06); }

.likers-popover {
  position: absolute;
  z-index: 1200;
  min-width: 220px;
  max-width: 300px;
  max-height: 320px;
  overflow-y: auto;
  padding: .5rem;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-sm);
  border-radius: 8px;
}
.likers-pop-head {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .9rem;
  color: var(--ink);
  padding: .15rem .35rem .45rem;
  border-bottom: 2px solid var(--ink);
  margin-bottom: .35rem;
  display: flex; align-items: center; gap: .4rem;
}
.likers-pop-head .fa-heart { color: #ec4899; }
.likers-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .35rem .35rem;
  border-radius: 6px;
  color: var(--ink);
  text-decoration: none;
}
.likers-row:hover { background: rgba(0,0,0,.08); }
.likers-avatar {
  width: 34px; height: 34px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  object-fit: cover;
  display: grid; place-items: center;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .68rem;
  flex-shrink: 0;
}
.likers-name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
  font-size: .9rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.likers-reaction {
  flex: 0 0 auto;
  margin-left: .5rem;
  font-size: 1.15rem;
  line-height: 1;
}
.likers-more,
.likers-empty {
  padding: .4rem .35rem .2rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.likers-loading {
  width: 22px; height: 22px;
  margin: .8rem auto;
  border: 3px solid rgba(0,0,0,.15);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: likers-spin .7s linear infinite;
}
@keyframes likers-spin { to { transform: rotate(360deg); } }

/* ============================================================
   @mention — capsule link in post/comment bodies + autocomplete
   dropdown in the composer. High contrast (Alex RP).
   ============================================================ */
.mention {
  display: inline;
  font-weight: 800;
  color: var(--accent);
  background: rgba(124, 58, 237, .12);
  padding: .02em .3em;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
}
.mention:hover,
.mention:focus { text-decoration: underline; background: rgba(124, 58, 237, .22); }

/* Autolinked URLs in  content (marketplace listing description). Bold +
   underlined for a clear, high-contrast link affordance; wraps long URLs. */
.ugc-link { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; word-break: break-word; }
.ugc-link:hover, .ugc-link:focus { text-decoration: none; }

/* Per-page drip status badges on comic-manage.php (owner's page list). */
.drip-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .72rem; font-weight: 800; line-height: 1.2;
  padding: 2px 8px; border-radius: 999px; border: 1.5px solid transparent;
  width: fit-content;
}
.drip-badge--pub    { background: rgba(16,185,129,.15); color: #10b981; border-color: rgba(16,185,129,.5); }
.drip-badge--sch    { background: rgba(245,158,11,.15); color: #f59e0b; border-color: rgba(245,158,11,.5); }
.drip-badge--paused { background: rgba(148,163,184,.18); color: #94a3b8; border-color: rgba(148,163,184,.5); }
.drip-badge--next   { box-shadow: 0 0 0 2px rgba(245,158,11,.35); }
.drip-date-edit summary { list-style: none; }
.drip-date-edit summary::-webkit-details-marker { display: none; }

/* "You're leaving Palcomix" interstitial for outbound links. */
.extlink-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.62); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.extlink-modal[hidden] { display: none; }
.extlink-box { background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 14px; max-width: 440px; width: 100%; padding: 1.25rem 1.35rem; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.extlink-title { display: block; font-size: 1.2rem; font-weight: 800; }
.extlink-body { margin: .75rem 0 .35rem; line-height: 1.55; }
.extlink-domain { font-weight: 800; font-size: 1.05rem; color: var(--accent); word-break: break-all; margin: .15rem 0 1.1rem; }
.extlink-actions { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; }
.extlink-actions .btn { text-decoration: none; }

.mention-suggest {
  position: absolute;
  z-index: 1300;
  max-height: 280px;
  overflow-y: auto;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-sm);
  border-radius: 8px;
  padding: .25rem;
}
.mention-opt {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem .5rem;
  border-radius: 6px;
  cursor: pointer;
}
.mention-opt.is-active,
.mention-opt:hover { background: var(--accent); color: var(--paper); }
.mention-opt.is-active .mention-nm,
.mention-opt:hover .mention-nm { color: var(--paper); }
.mention-av {
  width: 30px; height: 30px;
  flex-shrink: 0;
  border: 2px solid var(--ink);
  border-radius: 50%;
  overflow: hidden;
  display: grid; place-items: center;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .62rem;
}
.mention-av img { width: 100%; height: 100%; object-fit: cover; }
.mention-nm {
  font-weight: 700;
  font-size: .92rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mention-crown { color: #F59E0B; margin-left: auto; font-size: .8rem; }

/* Right-sidebar follow widgets — clickable avatar + name, and the (count). */
.r-section-count {
  font-weight: 800;
  color: var(--accent);
  font-size: .9em;
}
.ur-avatar-link { cursor: pointer; text-decoration: none; }
.ur-meta-link {
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  display: block;
}
.ur-meta-link:hover .ur-name,
.ur-avatar-link:hover + .ur-meta-link .ur-name { text-decoration: underline; }
.ur-avatar-link:hover .ur-avatar { filter: brightness(1.08); }

/* Echo-activity thumbnails with hover-zoom preview (). */
.echo-thumb { position: relative; display: inline-block; line-height: 0; }
.echo-thumb-inner {
  width: 64px; height: 64px;
  border: 2px solid var(--ink);
  background: repeating-conic-gradient(#e5e7eb 0% 25%, #f9fafb 0% 50%) 50%/14px 14px;
  display: grid; place-items: center; overflow: hidden;
}
.echo-thumb-inner img { width: 100%; height: 100%; object-fit: cover; }
.echo-thumb-zoom {
  display: none;
  position: absolute;
  left: 72px; top: 0;
  width: 340px;            /* explicit so the box doesn't shrink-wrap to 0 */
  z-index: 200;
  border: 3px solid var(--ink);
  box-shadow: var(--shadow);
  background: #111;
}
.echo-thumb-zoom img { display: block; width: 340px; height: 340px; object-fit: contain; max-width: none; }
.echo-thumb:hover .echo-thumb-zoom { display: block; }
@media (max-width: 720px) { .echo-thumb-zoom { display: none !important; } } /* no hover on touch */

/* ============================================================
   Stickers — composer button, picker modal,  (owner/)
   ============================================================ */
.sticker-selected { display:inline-flex; align-items:center; gap:.4rem; }
.sticker-selected[hidden] { display:none; }
.sticker-selected-img { width:38px; height:38px; object-fit:contain; border:2px solid var(--ink); border-radius:8px; background:rgba(0,0,0,.2); }
.sticker-clear-btn { background:transparent; border:none; color:#dc2626; font-weight:900; cursor:pointer; font-size:1.2rem; line-height:1; }

.sticker-modal {
  position: fixed; inset: 0; z-index: 1400;
  background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.sticker-modal[hidden] { display: none; }
.sticker-modal-box {
  width: 100%; max-width: 460px; max-height: 86vh; overflow-y: auto;
  background: var(--paper); color: var(--ink);
  border: 3px solid var(--ink); box-shadow: var(--shadow);
  border-radius: 12px; padding: 1rem;
}
.sticker-modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.7rem; font-size:1.05rem; }
.sticker-modal-close { background:transparent; border:none; color:var(--ink); font-size:1.6rem; line-height:1; cursor:pointer; font-weight:800; }
.sticker-grid, .sticker-grid-default { display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:.5rem; margin-bottom:1rem; }
/* Folder headings inside the picker (Default pack vs the 's own). */
.sticker-folder-h { display:flex; align-items:center; gap:.4rem; font-weight:800; font-size:.82rem; text-transform:uppercase; letter-spacing:.03em; color:var(--ink); margin:.2rem 0 .5rem; }
.sticker-folder-cap { margin-left:auto; font-family:var(--font-mono); font-size:.78rem; font-weight:700; color:var(--ink-soft); }
.sticker-cap-note { margin:.4rem 0 0; font-size:.82rem; font-weight:700; color:var(--ink-soft); background:rgba(124,58,237,.10); border:2px solid #7c3aed; border-radius:10px; padding:.5rem .7rem; }
.sticker-pick {
  border:2px solid var(--ink); border-radius:10px; background:repeating-conic-gradient(#e5e7eb 0% 25%,#f9fafb 0% 50%) 50%/12px 12px;
  padding:.25rem; cursor:pointer; aspect-ratio:1/1; display:grid; place-items:center;
}
.sticker-pick:hover { outline:3px solid var(--accent); }
.sticker-pick img { width:100%; height:100%; object-fit:contain; }
.sticker-cell { position:relative; }
.sticker-cell .sticker-pick { width:100%; }
.sticker-del {
  position:absolute; top:-7px; right:-7px; width:22px; height:22px; border-radius:50%;
  background:#dc2626; color:#fff; border:2px solid #fff; font-size:14px; font-weight:900; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; z-index:3;
  box-shadow:0 1px 3px rgba(0,0,0,.45);
}
.sticker-del:hover { background:#b91c1c; transform:scale(1.1); }
.sticker-empty { grid-column:1/-1; color:var(--ink-soft); font-weight:700; font-size:.85rem; text-align:center; padding:.5rem; }
.sticker-empty[hidden] { display:none; }

.sticker- { border-top:2px solid var(--ink); padding-top:.6rem; }
.sticker- > summary { cursor:pointer; font-weight:800; font-size:.9rem; padding:.2rem 0; }
.sticker--body { display:flex; flex-direction:column; gap:.6rem; margin-top:.6rem; }
.sticker-dim-note { margin:0; font-size:.8rem; font-weight:700; color:var(--accent); }
.sticker-file { font:inherit; }
.sticker-preview-frame { display:flex; justify-content:center; padding:110px 0 .5rem; }
.sticker-preview-card {
  position:relative; width:240px; height:120px; border:2px solid var(--ink); border-radius:10px;
  background:rgba(0,0,0,.08); overflow:visible; display:flex; align-items:flex-end; padding:.4rem;
}
.sticker-preview-label { font-size:.72rem; font-weight:700; color:var(--ink-soft); }
/* Same geometry as the real .post-sticker (100px, top:-80+offset) → true WYSIWYG. */
.sticker-preview-img { position:absolute; top:-80px; right:18px; width:100px; height:100px; object-fit:contain; filter:drop-shadow(0 3px 5px rgba(0,0,0,.45)); }
.sticker-offset-label { display:flex; align-items:center; gap:.5rem; font-weight:700; font-size:.85rem; }
.sticker-offset { flex:1; }
.sticker-offset-val { min-width:42px; text-align:right; font-weight:800; }
.sticker--err { margin:0; color:#dc2626; font-weight:700; font-size:.82rem; }
.sticker--err[hidden] { display:none; }
.sticker-rules { margin:.9rem 0 0; font-size:.78rem; line-height:1.4; color:var(--ink-soft); border-top:2px dashed var(--ink); padding-top:.6rem; }
/* "Locked" popup — the sticker button is always visible but gated until earned. */
.sticker-lock-pop { position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.62); display:flex; align-items:center; justify-content:center; padding:1rem; }
.sticker-lock-pop[hidden] { display:none; }
.sticker-lock-box { background:var(--paper); color:var(--ink); border:2px solid var(--ink); border-radius:14px; max-width:360px; width:100%; padding:1.4rem 1.3rem; text-align:center; box-shadow:0 10px 40px rgba(0,0,0,.5); }
.sticker-lock-ic { font-size:2.2rem; color:#f59e0b; margin-bottom:.6rem; }
.sticker-lock-msg { margin:0 0 1.1rem; font-weight:700; line-height:1.5; }
.sticker-lock-ok { text-decoration:none; min-width:5rem; }

/* ── Post-audit fixes (2026-06-21) ───────────────────────────────────── */
/* Right icon row: at the tighter desktop band the column is snug with 7 icons
   (incl. the new theme toggle) — shrink the buttons/gap/lang so nothing clips. */
@media (max-width: 1180px) {
  .right-icons { gap: 2px; }
  .right-icon-btn { width: 32px; height: 32px; font-size: .88rem; }
  .right-icons .lang-switch > summary { padding: 4px 5px; height: 32px; font-size: .85rem; }
  /* The brand logo (left:46px width:208px) would reach 254px and spill past the
     narrowed 240px left column now that .col-left-inner is overflow:visible. */
  .brand-img { left: 40px; width: 178px; }
}
/* Collapsed 80px rail: drop the auto-margin so the live count/dot stay next to
   the Watch-Live icon instead of floating to the far edge of the centered item. */
@media (max-width: 980px) {
  .nav-item .live-count, .nav-item .live-dot--off { margin-left: 4px; }
}

/* Clickable follower/following counts — clearer affordance (bold + hover colour)
   for low-contrast vision (Alex RP). */
.profile-stats .pf-stat-link { color: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.profile-stats .pf-stat-link:hover { color: var(--accent-2, #fbbf24); text-decoration-thickness: 2px; }
.r-section-count:hover { color: var(--accent-2, #fbbf24); }

/* ====================================================================== */
/* CLUBS — Facebook-Groups-style mini-forums.                             */
/* Deliberately NOT shaped like profiles: square icons, gold left-spine,  */
/* forum-row thread lists, a "CLUB" kicker. High-contrast for Alex (RP).  */
/* ====================================================================== */

/* "Soon" pill on the gated nav item. */
.nav-item .nav-soon {
  margin-left: auto;
  font-size: .62rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase;
  background: var(--accent-2, #fbbf24); color: #1a1a1a;
  padding: .12rem .4rem; border: 2px solid var(--ink); border-radius: 6px; line-height: 1.2;
}

/* ---------- Clubs directory hero + search ---------- */
.clubs-hero {
  margin-top: 14px; padding: 1.1rem 1.3rem;
  border: 3px solid var(--ink); background: var(--paper); color: var(--ink);
  box-shadow: var(--shadow);
  border-left-width: 10px; border-left-color: var(--accent-2, #fbbf24);
}
.clubs-hero-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.clubs-hero-title {
  margin: 0; font-family: var(--font-display); font-size: 1.8rem; font-weight: 800;
  letter-spacing: .02em; text-transform: uppercase; display: flex; align-items: center; gap: .5rem;
}
.clubs-hero-title .fa-s-rectangle { color: var(--accent, #ec4899); }
.clubs-create-btn { text-decoration: none; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.clubs-hero-sub { margin: .5rem 0 0; font-size: .95rem; font-weight: 600; opacity: .9; }
.clubs-search {
  margin-top: .9rem; display: flex; align-items: center; gap: .5rem;
  border: 3px solid var(--ink); background: var(--paper); color: var(--ink); padding: .35rem .35rem .35rem .7rem;
}
.clubs-search .fa-magnifying-glass { opacity: .7; }
.clubs-search input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 1rem; font-weight: 600; padding: .4rem; }
.clubs-search button {
  border: 3px solid var(--ink); background: var(--accent, #ec4899); color: #fff;
  font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: .45rem .9rem; cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.clubs-search button:hover { transform: translate(-1px,-1px); }

/* ---------- Clubs grid + cards ---------- */
.clubs-grid {
  margin-top: 16px; display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.club-card {
  display: block; position: relative; text-decoration: none; color: var(--ink);
  border: 3px solid var(--ink); background: var(--paper); box-shadow: var(--shadow);
  transition: transform .08s ease, box-shadow .08s ease;
}
.club-card:hover { transform: translate(-2px,-2px); box-shadow: 9px 9px 0 var(--ink); }
.club-card-cover {
  position: relative; aspect-ratio: 16 / 9; background: #2a2342 center/cover no-repeat;
  border-bottom: 3px solid var(--ink);
  background-image: linear-gradient(135deg, #3b2a63 0%, #1f1535 100%);
}
.club-kicker {
  position: absolute; top: 10px; left: 10px;
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--ink); color: var(--paper);
  font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
  padding: .22rem .5rem; border: 2px solid var(--accent-2, #fbbf24);
}
.club-kicker--lg { font-size: .8rem; padding: .3rem .65rem; }
.club-private-badge {
  position: absolute; top: 10px; right: 10px;
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--paper); color: var(--ink);
  font-size: .68rem; font-weight: 900; text-transform: uppercase;
  padding: .2rem .45rem; border: 2px solid var(--ink);
}
.club-pending-badge { background: var(--accent-2, #fbbf24); color: #1a1333; }
.club-frozen-pill { background: #1e293b; color: #fff; border-color: var(--ink); }

/* Frozen club — big lock covering the icon (banner + card). */
.club-banner-icon.is-frozen img, .club-card-icon.is-frozen img { filter: grayscale(.6) brightness(.45); }
.club-frozen-lock {
  position: absolute; inset: 0; z-index: 5; display: grid; place-items: center;
  background: rgba(20, 16, 40, .55); color: #fff;
}
.club-banner-icon .club-frozen-lock { font-size: 2.6rem; }
.club-card-icon .club-frozen-lock { font-size: 1.9rem; }
.club-card-icon {
  position: absolute; bottom: -36px; left: 14px; /* hangs from the cover's bottom-left */
  width: 72px; height: 72px; border: 3px solid var(--ink); background: var(--accent, #ec4899);
  display: grid; place-items: center; overflow: hidden; box-shadow: var(--shadow-sm);
  z-index: 2;
}
.club-card-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.club-icon-initials { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; color: #fff; text-transform: uppercase; }
.club-card-body { padding: 12px 14px 14px; }
/* Name + subtitle sit to the RIGHT of the icon (which hangs 36px into the body,
   72px wide at left:14px). The indent keeps every line — including wrapped ones
   — clear of the avatar; min-height reserves the icon's vertical space so the
   tags/meta below always start under it, never beside it. */
.club-card-titles { margin-left: 84px; min-height: 40px; }
.club-card-name { margin: 0; font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; line-height: 1.15; }
.club-card-sub { margin: .25rem 0 0; font-size: .9rem; font-weight: 600; opacity: .9; }
.club-card-tags { margin-top: .55rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.club-tag-chip {
  font-size: .76rem; font-weight: 800; text-decoration: none; color: var(--ink);
  background: var(--accent-2, #fbbf24); padding: .12rem .45rem; border: 2px solid var(--ink); border-radius: 999px;
}
a.club-tag-chip:hover { filter: brightness(.95); }
.club-card-meta { margin-top: .65rem; display: flex; gap: 1rem; font-size: .82rem; font-weight: 800; opacity: .95; }
.club-card-meta i { color: var(--accent, #ec4899); margin-right: .25rem; }

.clubs-pager { margin: 18px 0 6px; display: flex; justify-content: space-between; gap: 1rem; }

/* ---------- Club banner (the club page header) ---------- */
.club-pending-banner {
  margin-top: 14px; display: flex; align-items: center; gap: .5rem;
  background: var(--accent-2, #fbbf24); color: #1a1a1a; font-weight: 800;
  border: 3px solid var(--ink); padding: .65rem .9rem; box-shadow: var(--shadow-sm);
}
.club-banner {
  margin-top: 14px; border: 3px solid var(--ink); background: var(--paper); color: var(--ink);
  box-shadow: var(--shadow); overflow: hidden;
}
.club-banner-cover {
  position: relative; aspect-ratio: 16 / 9; background: #2a2342 center/cover no-repeat; border-bottom: 3px solid var(--ink);
  background-image: linear-gradient(135deg, #3b2a63 0%, #1f1535 100%);
}
.club-banner-bar {
  position: relative; display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap;
  padding: 0 1.2rem 1.1rem; /* icon overlaps upward */
  border-left: 10px solid var(--accent-2, #fbbf24);
}
.club-banner-icon {
  position: relative;
  /* Straddle the cover/title divide (half in each), like profile avatars. The bar
     is align-items:flex-end for the meta/actions, so the icon must opt out with
     align-self:flex-start — otherwise it sticks to the bar bottom and only its tip
     pokes into the cover. The -52px (half of 104) then lifts it across the line. */
  align-self: flex-start;
  width: 104px; height: 104px; margin-top: -52px; flex-shrink: 0;
  border: 3px solid var(--ink); background: var(--accent, #ec4899);
  display: grid; place-items: center; overflow: visible; box-shadow: var(--shadow-sm);
}
.club-banner-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* On-the-fly cover/icon camera buttons (creators + club s/mods). */
.club-cam {
  position: absolute; z-index: 6; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; background: var(--accent-2, #fbbf24); color: #1a1a1a;
  border: 3px solid var(--ink); box-shadow: var(--shadow-sm);
}
.club-cam:hover { filter: brightness(1.08); transform: translate(-1px,-1px); }
.club-cam i { pointer-events: none; }
.club-cam--cover { top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 10px; font-size: 1.15rem; }
.club-cam--icon  { right: -10px; bottom: -10px; width: 34px; height: 34px; border-radius: 50%; font-size: .95rem; }
.club-banner-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.club-banner-icon .club-icon-initials { font-size: 2.4rem; }
.club-banner-meta { flex: 1 1 240px; min-width: 0; padding-top: .6rem; }
.club-banner-name { margin: 0; font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; line-height: 1.1; }
.club-banner-sub { margin: .25rem 0 0; font-size: 1rem; font-weight: 600; opacity: .9; }
.club-banner-stats { margin-top: .55rem; display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .85rem; font-weight: 800; }
.club-banner-stats i { color: var(--accent, #ec4899); margin-right: .25rem; }
.club-banner-stats a { color: inherit; }
.club-vis-pill {
  display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .5rem;
  border: 2px solid var(--ink); border-radius: 999px; font-size: .78rem; font-weight: 900; text-transform: uppercase;
}
.club-vis-pill.is-public { background: #16a34a; color: #fff; }
.club-vis-pill.is-private { background: var(--ink); color: var(--paper); }
.club-vis-pill i { color: inherit !important; margin: 0; }
.club-banner-actions { display: flex; align-items: center; gap: .5rem; padding-top: .6rem; flex-wrap: wrap; }
.club-owner-pill {
  display: inline-flex; align-items: center; gap: .4rem; font-weight: 800;
  background: var(--accent-2, #fbbf24); color: #1a1a1a; border: 3px solid var(--ink);
  padding: .5rem .85rem; box-shadow: var(--shadow-sm);
}

/* ---------- Club tabs ---------- */
.club-tabs { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.club-tab {
  display: inline-flex; align-items: center; gap: .45rem; text-decoration: none;
  font-weight: 800; text-transform: uppercase; letter-spacing: .02em; font-size: .92rem;
  color: var(--ink); background: var(--paper); border: 3px solid var(--ink);
  padding: .5rem .95rem; box-shadow: var(--shadow-sm);
}
.club-tab i { color: var(--accent, #ec4899); }
.club-tab.is-active { background: var(--ink); color: var(--paper); }
.club-tab.is-active i { color: var(--accent-2, #fbbf24); }
.club-tab:hover { transform: translate(-1px,-1px); }

/* ---------- New-thread CTA ---------- */
.club-newthread-cta {
  margin-top: 14px; display: flex; align-items: center; gap: .5rem; text-decoration: none;
  font-weight: 800; color: #fff; background: var(--accent, #ec4899); border: 3px solid var(--ink);
  padding: .7rem 1rem; box-shadow: var(--shadow-sm);
}
.club-newthread-cta:hover { transform: translate(-1px,-1px); }
.club-newthread-cta--muted { background: var(--paper); color: var(--ink); }
.club--hint {
  margin-top: 14px; display: flex; align-items: center; gap: .5rem; font-weight: 700;
  background: var(--paper); color: var(--ink); border: 2px dashed var(--ink); padding: .6rem .8rem;
}
.club--hint i, .club-newthread-cta--muted i { color: var(--accent, #ec4899); }

/* ---------- Forum thread list (rows, NOT a post wall) ---------- */
.club-thread-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.club-thread-row {
  display: flex; align-items: stretch;
  border: 3px solid var(--ink); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm);
  border-left: 8px solid transparent;
}
.club-thread-row.is-pinned { border-left-color: var(--accent-2, #fbbf24); background: color-mix(in srgb, var(--accent-2, #fbbf24) 12%, var(--paper)); }
.club-thread-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: .85rem; padding: .7rem .9rem; text-decoration: none; color: inherit; }
/*  pin/unpin column on the right of each thread row. */
.club-thread-pin { display: flex; align-items: stretch; margin: 0; }
.club-thread-pin-btn {
  cursor: pointer; border: 0; border-left: 2px solid var(--ink); background: var(--paper); color: var(--ink);
  padding: 0 .85rem; font-size: 1.05rem;
}
.club-thread-pin-btn:hover { background: var(--accent-2, #fbbf24); color: #1a1a1a; }
.club-thread-pin-btn.is-on { background: var(--accent-2, #fbbf24); color: #1a1a1a; }
.club-thread-pin-btn.is-on i { transform: rotate(-30deg); }
.club-thread-row:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--ink); }
.club-thread-thumb {
  width: 56px; height: 56px; flex-shrink: 0; border: 2px solid var(--ink); overflow: hidden;
  display: grid; place-items: center; background: #2a2342;
}
.club-thread-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.club-thread-thumb--none { background: var(--paper); color: var(--accent, #ec4899); font-size: 1.3rem; }
.club-thread-main { flex: 1; min-width: 0; }
.club-thread-title { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; line-height: 1.2; }
.club-thread-sub { display: block; font-size: .85rem; font-weight: 600; opacity: .92; margin-top: .15rem; }
.club-thread-lastreply { display: block; font-size: .82rem; font-weight: 700; margin-top: .12rem; color: var(--accent, #ec4899); }
.club-thread-lastreply i { margin-right: .15rem; }
/* DM image attachment (staff-only): composer button + bubble image */
.dm-img-zone { display: flex; align-items: flex-start; gap: .6rem; flex-wrap: wrap; }
.dm-image-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.dm-image-btn { cursor: pointer; font-weight: 700; display: inline-flex; align-items: center; gap: .4rem; }
.dm-img-zone .img-preview { flex: 1 1 100%; }
.dm-image { margin: 0; }
.dm-image img { max-width: 260px; max-height: 280px; width: auto; height: auto; display: block; border: 2px solid rgba(0,0,0,.25); border-radius: 8px; cursor: zoom-in; }

/* "Latest comics updated" home carousel */
.latest-comics { margin: 14px 0 0; border: var(--border-w) solid var(--ink); background: var(--paper); box-shadow: var(--shadow); }
.latest-comics-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .65rem 1rem; border-bottom: 2px solid var(--ink); }
.latest-comics-title { margin: 0; font-family: var(--font-display); font-size: 1.12rem; display: inline-flex; align-items: center; gap: .5rem; color: var(--ink); }
.latest-comics-title i { color: var(--accent, #ec4899); }
.latest-comics-headl { display: flex; align-items: center; gap: .8rem; min-width: 0; flex-wrap: wrap; }
.latest-comics-viewall { display: inline-flex; align-items: center; gap: .3rem; font-weight: 800; font-size: .82rem; text-decoration: none; color: var(--accent, #ec4899); white-space: nowrap; }
.latest-comics-viewall:hover { text-decoration: underline; }

/* Comic Showcase (home right column) — cover + first pages fanned in a staircase */
.comic-showcase { margin: 0 0 1.1rem; }
.comic-showcase-stack { position: relative; display: block; width: 100%; padding-bottom: 60%; margin: .5rem 0 .45rem; }
.comic-showcase-pg { position: absolute; top: 0; width: 40%; aspect-ratio: 2 / 3; border: 2px solid var(--ink); border-radius: 6px; overflow: hidden; background: var(--paper); box-shadow: 2px 3px 9px rgba(0,0,0,.4); }
.comic-showcase-pg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.comic-showcase-stack:hover .comic-showcase-pg:first-child { box-shadow: 4px 4px 0 var(--accent, #ec4899); }
.comic-showcase-name { display: block; font-weight: 800; font-size: .9rem; color: var(--ink); text-decoration: none; line-height: 1.25; }
.comic-showcase-name:hover { color: var(--accent, #ec4899); text-decoration: underline; }
.latest-comics-nav { display: flex; gap: .4rem; flex-shrink: 0; }
.latest-comics-arrow { width: 34px; height: 34px; display: grid; place-items: center; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; border-radius: 8px; font-size: .9rem; }
.latest-comics-arrow:hover:not(:disabled) { background: var(--accent, #ec4899); color: #fff; }
.latest-comics-arrow:disabled { opacity: .3; cursor: default; }
.latest-comics-track { display: flex; gap: .7rem; padding: .8rem 1rem; overflow-x: auto; scroll-behavior: smooth; cursor: grab; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.latest-comics-track.is-dragging { cursor: grabbing; scroll-behavior: auto; -select: none; }
.latest-comics-track::-webkit-scrollbar { height: 8px; }
.latest-comics-track::-webkit-scrollbar-thumb { background: var(--ink-soft); border-radius: 8px; }
.latest-comic-card { flex: 0 0 auto; width: 120px; text-decoration: none; color: var(--ink); display: block; }
.latest-comic-cover { display: block; position: relative; width: 120px; height: 170px; border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; background: var(--paper-2, #f3f4f6); }
/* Fecha de ultima actualizacion, encima de la portada. Se apoya en el
   position:relative de .latest-comic-cover (agregado arriba para esto). */
.latest-comic-date { position: absolute; left: 0; right: 0; bottom: 0; padding: .2rem .3rem; font-family: var(--font-mono, monospace); font-size: .64rem; font-weight: 700; letter-spacing: .01em; text-align: center; color: #fff; background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.55) 70%, rgba(0,0,0,0)); text-shadow: 0 1px 2px rgba(0,0,0,.9); pointer-events: none; }
.latest-comic-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.latest-comic-cover--none { width: 100%; height: 100%; display: grid; place-items: center; font-size: 1.6rem; color: var(--ink-soft); }
.latest-comic-card:hover .latest-comic-cover { box-shadow: 4px 4px 0 var(--accent, #ec4899); }
.latest-comic-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-top: .35rem; font-size: .8rem; font-weight: 700; line-height: 1.25; width: 120px; overflow: hidden; }
@media (max-width: 560px) {
  .latest-comic-card, .latest-comic-cover, .latest-comic-name { width: 104px; }
  .latest-comic-cover { height: 148px; }
}
.club-thread-counts { display: flex; flex-direction: column; gap: .25rem; flex-shrink: 0; align-items: flex-end; }
.club-count-chip {
  display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 800;
  background: var(--ink); color: var(--paper); padding: .12rem .45rem; border-radius: 6px;
}
.club-count-chip i { color: var(--accent-2, #fbbf24); }
.club-badge-pin { color: var(--accent-2, #fbbf24); }
.club-badge-lock { color: var(--accent, #ec4899); }

/* ---------- About tab ---------- */
.club-about-h { margin: 0 0 .5rem; font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; display: flex; align-items: center; gap: .5rem; }
.club-about-h i { color: var(--accent, #ec4899); }
.club-about-welcome, .club-about-rules { font-size: .98rem; line-height: 1.55; }
.club-about-tags { margin-top: .7rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.club-rules-empty { font-style: italic; opacity: .85; font-weight: 600; margin: .25rem 0 0; }

/* ----------  tab ---------- */
.club--list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.club-member-item {
  display: flex; align-items: center; gap: .7rem; padding: .55rem .75rem;
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm);
}
.club-member-item .ur-meta { flex: 1; min-width: 0; }
.club-role-pill {
  display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; font-weight: 900; text-transform: uppercase;
  padding: .15rem .5rem; border: 2px solid var(--ink); border-radius: 999px;
}
.club-role-pill--creator { background: var(--accent-2, #fbbf24); color: #1a1a1a; }
.club-role-pill--mod { background: var(--accent, #ec4899); color: #fff; }

/* ---------- Thread page (OP + replies) ---------- */
.club-breadcrumb {
  margin-top: 14px; display: inline-flex; align-items: center; gap: .4rem; text-decoration: none;
  font-weight: 800; color: var(--ink); background: var(--paper); border: 2px solid var(--ink);
  padding: .4rem .8rem; box-shadow: var(--shadow-sm);
}
.club-op {
  position: relative; /* anchors the decorative .post-sticker overlay */
  margin-top: 12px; border: 3px solid var(--ink); background: var(--paper); color: var(--ink);
  box-shadow: var(--shadow); padding: 1.1rem 1.2rem; border-left: 10px solid var(--accent, #ec4899);
}
.club-op.is-pinned { border-left-color: var(--accent-2, #fbbf24); }
/* Make room for the sticker that overflows the top edge (-80px). */
.club-op.has-sticker { margin-top: 72px; }
/* Club compose toolbar row (bbcode + sticker) above the textarea. */
.club-compose-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.club-op-head { display: flex; align-items: center; gap: .7rem; }
.club-op-avatar { width: 48px; height: 48px; border: 2px solid var(--ink); object-fit: cover; display: block; }
.club-op-avatar--ini { display: grid; place-items: center; background: var(--accent, #ec4899); color: #fff; font-weight: 800; }
.club-op-meta { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.club-op-author { font-weight: 800; text-decoration: none; color: inherit; }
.club-op-author:hover { text-decoration: underline; }
.club-op-time { font-size: .85rem; opacity: .9; font-weight: 600; }
.club-op-title { margin: .8rem 0 .5rem; font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; line-height: 1.15; }
/* Newspaper layout: OP image floats right (~1/3), body text wraps on the left. */
.club-op-article { display: flow-root; margin: .6rem 0; }
.club-op-figure { float: right; width: 33%; max-width: 320px; margin: .1rem 0 .7rem 1.1rem; cursor: zoom-in; }
.club-op-figure img { width: 100%; height: auto; display: block; border: 2px solid var(--ink); border-radius: 8px; }
@media (max-width: 560px) { .club-op-figure { float: none; width: 100%; max-width: none; margin: 0 0 .7rem; } }
.club-op-body { font-size: 1rem; line-height: 1.6; }
.club-op-foot { margin-top: .9rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; border-top: 2px solid var(--ink); padding-top: .7rem; }
.club-op-foot-btn {
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
  background: none; border: none; font: inherit; font-weight: 700; font-size: .9rem;
  color: var(--ink); padding: 0;
}
.club-op-foot-btn:hover { color: var(--accent, #ec4899); }
.club-thread-embed .club-thread-embed-title { font-weight: 800; font-size: 1rem; margin-bottom: .25rem; }
.club-op-replycount { font-weight: 800; opacity: .9; }
.club-op-replycount i { color: var(--accent, #ec4899); margin-right: .25rem; }

/* Like buttons (thread + comment). */
.club-like-btn, .club-clike-btn {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  font-weight: 800; color: var(--ink); background: var(--paper); border: 2px solid var(--ink);
  padding: .35rem .7rem; text-decoration: none; box-shadow: var(--shadow-sm);
}
.club-like-btn.is-liked, .club-clike-btn.is-liked { background: var(--accent, #ec4899); color: #fff; }
.club-like-btn.is-liked i, .club-clike-btn.is-liked i { color: #fff; }
.club-like-btn:not(.is-liked) i, .club-clike-btn:not(.is-liked) i { color: var(--accent, #ec4899); }
.club-like-static { display: inline-flex; align-items: center; gap: .4rem; font-weight: 800; opacity: .85; }

/* OP/thread overflow menu. */
/* Thread notification subscribe toggle (next to the ⋮ menu). */
.club-op-subbtn {
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
  padding: .35rem .6rem; border: 2px solid var(--ink); background: var(--paper);
  box-shadow: var(--shadow-sm); cursor: pointer; font: inherit; font-weight: 700;
  font-size: .82rem; color: var(--ink);
}
.club-op-subbtn.is-on { background: var(--accent, #ec4899); color: #fff; }
.club-op-subbtn:hover { filter: brightness(.96); }
@media (max-width: 560px) { .club-op-subbtn-txt { display: none; } }
.club-op-menu { position: relative; }
.club-op-menu > summary { list-style: none; cursor: pointer; padding: .35rem .55rem; border: 2px solid var(--ink); background: var(--paper); box-shadow: var(--shadow-sm); font-size: 1.1rem; }
.club-op-menu > summary::-webkit-details-marker { display: none; }
.club-op-menu-pop {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 190px;
  border: 3px solid var(--ink); background: var(--paper); box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.club-op-menu-pop form { display: flex; flex-direction: column; }
.club-op-menu-pop button,
.club-op-menu-pop a {
  display: flex; align-items: center; gap: .55rem; text-align: left; cursor: pointer; text-decoration: none;
  background: var(--paper); color: var(--ink); border: 0; border-bottom: 1px solid var(--ink);
  padding: .6rem .8rem; font-weight: 700; font-size: .9rem;
}
.club-op-menu-pop button:hover,
.club-op-menu-pop a:hover { background: var(--accent, #ec4899); color: #fff; }
.club-op-menu-pop .club-menu-danger { color: #b91c1c; }
.club-op-menu-pop .club-menu-danger:hover { background: #b91c1c; color: #fff; }

/* Reply composer + locked note. */
.club-reply-form, .club-inline-reply {
  margin-top: 12px; border: 3px solid var(--ink); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm); padding: .8rem;
}
.club-inline-reply { margin-top: .6rem; box-shadow: none; border-width: 2px; }
.club-reply-form textarea, .club-inline-reply textarea {
  width: 100%; box-sizing: border-box; border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
  font: inherit; font-size: 1rem; padding: .6rem; resize: vertical;
}
.club-reply-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .55rem; flex-wrap: wrap; }
.club-reply-hint { font-size: .85rem; opacity: .92; font-weight: 600; }
.club-locked-note {
  margin-top: 12px; display: flex; align-items: center; gap: .5rem; font-weight: 800;
  background: var(--ink); color: var(--paper); border: 3px solid var(--ink); padding: .7rem .9rem;
}
.club-locked-note i { color: var(--accent-2, #fbbf24); }

/* Replies list. */
.club-replies-h { margin: 1.4rem 0 .6rem; font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; }
.club-comments { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.club-comment {
  display: flex; gap: .7rem; padding: .8rem .9rem; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm);
}
.club-comment--child { margin-left: 2.2rem; border-left: 6px solid var(--accent, #ec4899); }
/* "↳ Replying to @X" — context for a reply-to-a-reply (all replies stay at ONE
   visual level, so this label is how you tell who answered whom). */
.club-comment-replyto { font-size: .82rem; font-weight: 700; color: var(--accent, #ec4899); margin: .1rem 0 .15rem; display: flex; align-items: center; gap: .3rem; }
.club-comment-av { width: 40px; height: 40px; border: 2px solid var(--ink); object-fit: cover; display: block; }
.club-comment-av--ini { display: grid; place-items: center; background: var(--accent, #ec4899); color: #fff; font-weight: 800; }
.club-comment-main { flex: 1; min-width: 0; }
.club-comment-head { display: flex; align-items: baseline; gap: .5rem; }
.club-comment-author { font-weight: 800; text-decoration: none; color: inherit; }
.club-comment-author:hover { text-decoration: underline; }
.club-comment-time { font-size: .85rem; opacity: .9; font-weight: 600; }
.club-comment-body { margin: .35rem 0; font-size: .96rem; line-height: 1.5; }
.club-comment-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.club-comment-actions .club-clike-btn { padding: .25rem .55rem; box-shadow: none; }
.club-reply-link {
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; font-weight: 800;
  background: transparent; color: var(--ink); border: 0; padding: .25rem .3rem; font-size: .85rem;
}
.club-reply-link i { color: var(--accent, #ec4899); }
.club-reply-link:hover { text-decoration: underline; }
.club-comment-del {
  cursor: pointer; background: transparent; border: 0; color: #b91c1c; font-size: .9rem; padding: .25rem .35rem; font-weight: 700;
}
.club-comment-del:hover { color: #fff; background: #b91c1c; }

/* Poster column: avatar + per-club post count + earned title (under the avatar). */
.club-op-head { align-items: flex-start; }
.club-comment { align-items: flex-start; }
.club-poster { display: flex; flex-direction: column; align-items: center; gap: .28rem; flex-shrink: 0; width: 62px; }
.club-op-head .club-poster { width: 70px; }
.club-poster-posts {
  font-size: .78rem; font-weight: 800; color: var(--ink); opacity: .92; text-align: center; line-height: 1.1;
}
.club-poster-title {
  display: inline-block; max-width: 100%; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em;
  background: var(--accent-2, #fbbf24); color: #1a1333; border: 2px solid var(--ink);
  padding: .12rem .36rem; border-radius: 6px; text-align: center; line-height: 1.2; word-break: break-word;
}

/* Club announcements — right-column cards ( bulletins, above polls). */
.club-ann-list { display: flex; flex-direction: column; gap: .5rem; }
.club-ann-card {
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink); padding: .55rem .6rem;
  box-shadow: var(--shadow-sm); border-left: 6px solid var(--accent-2, #fbbf24);
}
.club-ann-body { font-size: .9rem; line-height: 1.45; word-break: break-word; }
.club-ann-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .35rem; }
.club-ann-time { font-size: .76rem; font-weight: 700; opacity: .85; }
.club-ann-del { cursor: pointer; background: transparent; border: 0; color: #b91c1c; font-size: .85rem; padding: .2rem .3rem; }
.club-ann-del:hover { color: #fff; background: #b91c1c; }
/* Announcements manager page rows. */
.club-ann-manage-row {
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink); padding: .7rem .8rem;
  box-shadow: var(--shadow-sm); margin-bottom: .6rem; border-left: 6px solid var(--accent-2, #fbbf24);
}
.club-ann-manage-body { font-size: .95rem; line-height: 1.5; word-break: break-word; }
.club-ann-manage-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .5rem; flex-wrap: wrap; }
.club-ann-manage-meta { font-size: .82rem; font-weight: 700; opacity: .9; }

/* In-club thread search. */
.club-search-form { display: flex; gap: .5rem; margin: 14px 0 0; align-items: stretch; }
.club-search-input {
  flex: 1; min-width: 0; padding: .6rem .8rem; border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
  font-weight: 600; font-size: .95rem;
}
.club-search-input::placeholder { color: var(--ink); opacity: .6; }
.club-search-meta { display: flex; align-items: center; gap: .6rem; margin-top: .7rem; font-weight: 700; }
.club-search-meta .club-search-clear { font-weight: 800; text-decoration: underline; }

/* Member-titles editor (club-manage). */
.club-title-rows { display: flex; flex-direction: column; gap: .5rem; }
.club-title-row { display: flex; gap: .5rem; align-items: center; }
.club-title-row input[type="text"] { flex: 1; min-width: 0; }
.club-title-row input[type="number"] { width: 96px; flex-shrink: 0; }
.club-title-row .club-title-rownum { font-weight: 800; width: 1.4rem; text-align: center; flex-shrink: 0; }

/* Showcase — member-curated post/comic thumbs (right column). */
button.r-section-link { background: transparent; border: 0; cursor: pointer; font: inherit; }
.club-sc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.club-sc-cell { position: relative; aspect-ratio: 1 / 1; }
.club-sc-thumb {
  display: block; width: 100%; height: 100%; border: 2px solid var(--ink); overflow: hidden;
  position: relative; background: #2a2342;
}
.club-sc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.club-sc-thumb:hover { filter: brightness(1.06); }
.club-sc-badge {
  position: absolute; bottom: 2px; right: 2px; background: var(--accent-2, #fbbf24); color: #1a1333;
  border: 2px solid var(--ink); border-radius: 5px; font-size: .62rem; padding: .05rem .22rem; line-height: 1.1;
}
.club-sc-rm { position: absolute; top: -7px; right: -7px; margin: 0; }
.club-sc-rm button {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ink); background: #b91c1c; color: #fff;
  font-weight: 800; cursor: pointer; box-shadow: var(--shadow-sm); display: flex; align-items: center;
  justify-content: center; font-size: .95rem; line-height: 1; padding: 0;
}
.club-sc-rm button:hover { filter: brightness(1.12); }

/* Showcase "add a pic" modal. */
.club-sc-modal {
  position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.club-sc-modal[hidden] { display: none; }
.club-sc-modal-box {
  width: 100%; max-width: 460px; background: var(--paper); color: var(--ink);
  border: 3px solid var(--ink); box-shadow: var(--shadow); padding: 1rem 1.1rem;
}
.club-sc-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; font-size: 1.1rem; }
.club-sc-modal-close { background: transparent; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--ink); font-weight: 800; }
.club-sc-form label { display: block; font-weight: 800; margin-bottom: .35rem; }
.club-sc-form input[type="url"] {
  width: 100%; padding: .6rem .7rem; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); font-size: .95rem;
}
.club-sc-hint { font-size: .82rem; font-weight: 600; opacity: .9; margin: .5rem 0 0; }
.club-sc-hint i { color: var(--accent, #ec4899); }
.club-sc-modal-foot { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }

/* ---------- Club promo cards in the home feed ---------- */
.club-feed-card, .club-thread-feed-card { position: relative; }
.club-feed-card { padding: 0; overflow: hidden; }
.club-feed-badge {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--ink); color: var(--paper); font-size: .68rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .06em; padding: .25rem .55rem; border: 2px solid var(--accent-2, #fbbf24);
}
.club-feed-link { display: block; text-decoration: none; color: var(--ink); }
.club-feed-cover {
  position: relative; aspect-ratio: 16 / 9; background: #2a2342 center/cover no-repeat;
  background-image: linear-gradient(135deg, #3b2a63, #1f1535); border-bottom: 3px solid var(--ink);
}
.club-feed-icon {
  position: absolute; bottom: -28px; left: 16px; width: 64px; height: 64px; z-index: 2;
  border: 3px solid var(--ink); background: var(--accent, #ec4899); display: grid; place-items: center; overflow: hidden;
}
.club-feed-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.club-feed-icon span { font-family: var(--font-display); font-weight: 800; color: #fff; font-size: 1.4rem; }
.club-feed-body { padding: 36px 16px 12px; }
.club-feed-name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; line-height: 1.15; }
.club-feed-sub { font-size: .92rem; font-weight: 600; margin-top: .2rem; }
.club-feed-meta { display: flex; gap: 1rem; margin-top: .5rem; font-size: .85rem; font-weight: 800; }
.club-feed-meta i { color: var(--accent, #ec4899); margin-right: .25rem; }
.club-feed-cta {
  display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 0 16px 16px; padding: .6rem;
  text-decoration: none; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  border: 3px solid var(--ink); background: var(--accent-2, #fbbf24); color: #1a1333; box-shadow: var(--shadow-sm);
}
.club-feed-cta:hover { filter: brightness(1.05); transform: translate(-1px,-1px); }

/* Club thread promo card. */
.club-thread-feed-card { padding: 14px 16px; padding-top: 40px; }
.ctf-club { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; color: var(--ink); font-weight: 800; margin-bottom: .55rem; }
.ctf-club:hover .ctf-club-name { text-decoration: underline; }
.ctf-club img, .ctf-club-ini { width: 28px; height: 28px; border: 2px solid var(--ink); object-fit: cover; flex-shrink: 0; }
.ctf-club-ini { background: var(--accent, #ec4899); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .8rem; }
.ctf-main { display: block; text-decoration: none; color: var(--ink); }
/* Split layout: text 65% left, image thumbnail 35% right (only when the thread has an image). */
.ctf-main--split { display: flex; gap: 12px; align-items: flex-start; }
.ctf-main--split .ctf-text { flex: 0 0 65%; max-width: 65%; min-width: 0; }
.ctf-main--split .ctf-image { flex: 0 0 35%; max-width: 35%; margin-top: 0; }
.ctf-main--split .ctf-image img { aspect-ratio: 4 / 3; max-height: none; }
.ctf-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; line-height: 1.2; }
.ctf-body { font-size: .95rem; margin-top: .35rem; line-height: 1.45; word-break: break-word; }
.ctf-image { margin-top: .6rem; border: 2px solid var(--ink); overflow: hidden; }
.ctf-image img { width: 100%; max-height: 360px; object-fit: cover; display: block; }
.ctf-meta { display: flex; gap: 1rem; margin-top: .55rem; font-size: .85rem; font-weight: 800; }
.ctf-meta i { color: var(--accent, #ec4899); margin-right: .2rem; }

/* ---------- Club right column widgets ---------- */
.club-r-section { border-left: 6px solid var(--accent-2, #fbbf24); padding-left: .6rem; }
.club-rules summary {
  list-style: none; cursor: pointer; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  display: flex; align-items: center; gap: .45rem; color: var(--ink);
}
.club-rules summary::-webkit-details-marker { display: none; }
.club-rules-summary i { color: var(--accent-2, #fbbf24); }
.club-rules-body { margin-top: .5rem; font-size: .9rem; line-height: 1.5; color: var(--ink); opacity: .95; }
.club--grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: .5rem; }
.club-member-av { position: relative; display: block; aspect-ratio: 1/1; line-height: 0; }
.club-member-av img, .club-member-ini {
  width: 100%; height: 100%; object-fit: cover; display: grid; place-items: center; border: 2px solid var(--ink); box-sizing: border-box;
}
.club-member-ini { background: var(--accent, #ec4899); color: #fff; font-weight: 800; font-size: .8rem; }
.club-role-dot {
  position: absolute; bottom: -3px; right: -3px; width: 16px; height: 16px; border-radius: 50%;
  display: grid; place-items: center; font-size: .55rem; border: 2px solid var(--ink); color: #1a1a1a;
}
.club-role-dot--creator { background: var(--accent-2, #fbbf24); }
.club-role-dot--mod { background: var(--accent, #ec4899); color: #fff; }
.club-popular-list { display: flex; flex-direction: column; gap: 6px; margin-top: .5rem; }
.club-popular-item {
  display: flex; flex-direction: column; gap: .15rem; text-decoration: none;
  background: var(--paper); color: var(--ink); border: 2px solid var(--ink); padding: .45rem .6rem; box-shadow: var(--shadow-sm);
}
.club-popular-item:hover { transform: translate(-1px,-1px); }
.club-popular-title { font-weight: 800; font-size: .9rem; line-height: 1.2; }
.club-popular-meta { font-size: .82rem; font-weight: 700; opacity: .95; }
.club-popular-meta i { color: var(--accent, #ec4899); }
.club-pending-badge {
  margin-left: auto; background: #b91c1c; color: #fff; font-weight: 900; font-size: .72rem;
  min-width: 18px; height: 18px; padding: 0 .3rem; border-radius: 999px; display: inline-grid; place-items: center;
}

/* ---------- Manage / create forms ---------- */
.club-form-section {
  margin-top: 14px; border: 3px solid var(--ink); background: var(--paper); color: var(--ink);
  box-shadow: var(--shadow); padding: 1.1rem 1.3rem;
}
.club-form-section h2 { margin: 0 0 .8rem; font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; }
.club-field { margin-bottom: 1rem; }
.club-field label { display: block; font-weight: 800; margin-bottom: .3rem; color: var(--ink); }
.club-field input[type=text], .club-field input[type=file], .club-field textarea, .club-field select {
  width: 100%; box-sizing: border-box; border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
  font: inherit; font-size: 1rem; padding: .55rem .65rem;
}
.club-field textarea { resize: vertical; }
.club-field-help { font-size: .85rem; opacity: .92; font-weight: 600; margin: .25rem 0 0; }
.club-radio-row { display: flex; flex-direction: column; gap: .4rem; }
.club-radio-row label { display: flex; align-items: center; gap: .5rem; font-weight: 700; cursor: pointer; }
.club-danger-zone { border-color: #b91c1c; border-left-width: 10px; }
.club-danger-zone h2 { color: #b91c1c; }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .clubs-grid { grid-template-columns: 1fr; }
  .club-banner-icon { width: 84px; height: 84px; margin-top: -42px; }
  .club-banner-name { font-size: 1.5rem; }
  .club-comment--child { margin-left: 1rem; }
  .club--grid { grid-template-columns: repeat(5, 1fr); }
}

/* ====================================================================== */
/* CLUB POLLS — builder (composer) + render (thread).                     */
/* ====================================================================== */

/* ---- Builder (inside the thread composer) ---- */
.club-poll-builder { border: 2px solid var(--ink); background: var(--paper); color: var(--ink); }
.club-poll-builder > summary {
  list-style: none; cursor: pointer; font-weight: 800; padding: .55rem .7rem;
  display: flex; align-items: center; gap: .45rem;
}
.club-poll-builder > summary::-webkit-details-marker { display: none; }
.club-poll-builder .cc-detail-body { padding: .2rem .7rem .8rem; }
.club-poll-opts { display: flex; flex-direction: column; gap: .4rem; margin: .4rem 0; }
.club-poll-opt-row { display: flex; align-items: center; gap: .4rem; }
.club-poll-opt-row input[type=text] {
  flex: 1; border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
  font: inherit; padding: .45rem .55rem;
}
.club-poll-rm {
  flex-shrink: 0; cursor: pointer; border: 2px solid var(--ink); background: var(--paper); color: #b91c1c;
  width: 34px; height: 34px; font-size: 1rem; line-height: 1;
}
.club-poll-rm:hover { background: #b91c1c; color: #fff; }
.club-poll-settings { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .6rem; }
.club-poll-fieldset { border: 2px solid var(--ink); padding: .5rem .7rem; }
.club-poll-fieldset legend { font-weight: 800; padding: 0 .3rem; }
.club-poll-fieldset label { display: flex; align-items: center; gap: .4rem; font-weight: 600; cursor: pointer; }

/* ---- Render (inside the OP) ---- */
.club-poll {
  margin: .8rem 0; border: 2px solid var(--ink); background: color-mix(in srgb, var(--accent-2, #fbbf24) 8%, var(--paper));
  color: var(--ink); padding: .8rem .9rem;
}
.club-poll-head { display: flex; align-items: baseline; gap: .35rem; font-weight: 800; flex-wrap: wrap; }
.club-poll-head > .fa-square-poll-vertical { color: var(--accent, #ec4899); }
.club-poll-title { font-family: var(--font-display); font-size: 1.05rem; }
.club-poll-meta { font-weight: 700; font-size: .85rem; opacity: .85; }
.club-poll-vote-form { display: flex; flex-direction: column; gap: .45rem; margin-top: .6rem; }
.club-poll-choice {
  display: flex; align-items: center; gap: .55rem; cursor: pointer; font-weight: 700;
  border: 2px solid var(--ink); background: var(--paper); padding: .5rem .65rem;
}
.club-poll-choice:hover { background: color-mix(in srgb, var(--accent, #ec4899) 12%, var(--paper)); }
.club-poll-choice input { width: 18px; height: 18px; flex-shrink: 0; }
.club-poll-vote-btn { margin-top: .3rem; align-self: flex-start; }
.club-poll-results { display: flex; flex-direction: column; gap: .5rem; margin-top: .6rem; }
.club-poll-bar-top { display: flex; justify-content: space-between; gap: .5rem; font-weight: 700; font-size: .9rem; }
.club-poll-bar-label { display: inline-flex; align-items: center; gap: .35rem; }
.club-poll-bar.is-mine .club-poll-bar-label { color: var(--accent, #ec4899); }
.club-poll-bar.is-mine .fa-circle-check { color: var(--accent, #ec4899); }
.club-poll-bar-pct { white-space: nowrap; font-weight: 800; }
.club-poll-bar-n { font-weight: 700; color: var(--ink-soft); }
.club-poll-bar-track {
  display: block; height: 16px; margin-top: .2rem; border: 2px solid var(--ink); background: var(--paper); overflow: hidden;
}
.club-poll-bar-fill { display: block; height: 100%; background: var(--accent, #ec4899); }
.club-poll-bar.is-mine .club-poll-bar-fill { background: var(--accent-2, #fbbf24); }
.club-poll-locked { margin-top: .5rem; font-weight: 700; opacity: .85; display: flex; align-items: center; gap: .4rem; }
.club-poll-locked .fa-lock { color: var(--accent, #ec4899); }

/* Poll "view votes"  — creator/ only. */
.club-poll-votes { margin-top: .7rem; border-top: 2px dashed var(--ink); padding-top: .6rem; }
.club-poll-votes-btn { cursor: pointer; font-weight: 800; display: inline-flex; align-items: center; gap: .4rem; list-style: none; }
.club-poll-votes-btn::-webkit-details-marker { display: none; }
.club-poll-votes-btn i { color: var(--accent, #ec4899); }
.club-poll-votes-note { font-size: .85rem; font-weight: 700; margin: .5rem 0; color: var(--ink); }
.club-poll-votes-note i { color: var(--accent-2, #fbbf24); }
.club-poll-voters-opt { margin: .55rem 0; }
.club-poll-voters-optlabel { font-weight: 800; font-size: .92rem; }
.club-poll-voters-list { display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin-top: .3rem; }
.club-poll-voter {
  font-size: .9rem; font-weight: 700; text-decoration: underline; text-underline-offset: 2px;
  color: var(--accent, #ec4899); display: inline-flex; align-items: center; gap: .25rem;
  padding: .25rem .55rem; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper);
}
.club-poll-voter:hover { background: var(--accent, #ec4899); color: #fff; text-decoration: none; }
.club-poll-voters-none { color: var(--ink-soft); font-weight: 800; }

/* Club card — unread (new activity) indicator (pull model). */
.club-card.has-unread { border-color: var(--accent, #ec4899); box-shadow: 6px 6px 0 var(--accent, #ec4899); }
.club-card-new {
  display: inline-flex; align-items: center; gap: .25rem; vertical-align: middle;
  background: var(--accent, #ec4899); color: #fff;
  font-size: .62rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase;
  padding: .12rem .4rem; border: 2px solid var(--ink); border-radius: 999px; line-height: 1.3;
}
.club-card-new i { font-size: .6rem; }

/* ====================================================================== */
/* CLUB POLL CAPSULES — right-column widget + Polls tab.                   */
/* ====================================================================== */
.club-poll-cap-list { display: flex; flex-direction: column; gap: 10px; margin-top: .5rem; }
.club-poll-cap-list--page { margin-top: 14px; gap: 14px; }
.club-poll-capsule {
  border: 3px solid var(--ink); background: var(--paper); color: var(--ink);
  box-shadow: var(--shadow-sm); border-left: 8px solid var(--accent-2, #fbbf24);
  padding: .7rem .8rem;
}
.club-poll-cap-q {
  display: flex; align-items: flex-start; gap: .4rem; text-decoration: none; color: var(--ink);
  font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; line-height: 1.2;
}
.club-poll-cap-q i { color: var(--accent, #ec4899); margin-top: .1rem; flex-shrink: 0; }
.club-poll-cap-q:hover { text-decoration: underline; }
.club-poll-cap-form { display: flex; flex-direction: column; gap: .35rem; margin-top: .55rem; }
.club-poll-cap-choice {
  display: flex; align-items: center; gap: .5rem; cursor: pointer; font-weight: 700; font-size: .9rem;
  border: 2px solid var(--ink); background: var(--paper); padding: .4rem .55rem;
}
.club-poll-cap-choice:hover { background: color-mix(in srgb, var(--accent, #ec4899) 12%, var(--paper)); }
.club-poll-cap-choice input { width: 17px; height: 17px; flex-shrink: 0; }
.club-poll-cap-btn { margin-top: .25rem; align-self: flex-start; }
.club-poll-cap-results { margin-top: .55rem; }
.club-poll-cap-locked { margin-top: .5rem; font-size: .82rem; font-weight: 700; opacity: .85; display: flex; align-items: center; gap: .35rem; }
.club-poll-cap-locked .fa-lock { color: var(--accent, #ec4899); }
.club-poll-cap-foot {
  margin-top: .6rem; padding-top: .5rem; border-top: 2px solid var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  font-size: .8rem; font-weight: 800;
}
.club-poll-cap-foot a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; }
.club-poll-cap-foot a i { color: var(--accent, #ec4899); }
.club-poll-cap-foot a:hover { text-decoration: underline; }
.club-more-polls-btn {
  display: flex; align-items: center; justify-content: center; gap: .4rem; margin-top: 10px;
  font-weight: 800; text-decoration: none; color: var(--ink);
  background: var(--accent-2, #fbbf24); border: 3px solid var(--ink); box-shadow: var(--shadow-sm);
  padding: .5rem .8rem; text-transform: uppercase; letter-spacing: .02em; font-size: .85rem;
}
.club-more-polls-btn:hover { transform: translate(-1px,-1px); }
/* On the wide Polls tab, cap capsule width so bars aren't absurdly long. */
.club-poll-cap-list--page .club-poll-capsule { max-width: 640px; }

/* Poll capsule — explanatory body. */
.club-poll-cap-body { margin-top: .45rem; font-size: .9rem; line-height: 1.5; color: var(--ink); }
.club-poll-cap-body img { max-width: 100%; height: auto; display: block; border: 2px solid var(--ink); margin: .3rem 0; }
.club-poll-cap-body p { margin: .3rem 0; }
/* In the narrow sidebar, keep a tall body from dominating (the tab shows it full). */
.club-poll-cap-list:not(.club-poll-cap-list--page) .club-poll-cap-body { max-height: 220px; overflow: auto; }

/* Custom file picker for club icon/cover (localized button + filename; replaces
   the browser's locale-dependent native file input text). */
.club-file { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.club-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.club-file-btn {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; font-weight: 800;
  background: var(--ink); color: var(--paper); border: 2px solid var(--ink); padding: .5rem .9rem;
  text-transform: uppercase; letter-spacing: .02em; font-size: .85rem;
}
.club-file-btn:hover { background: var(--accent, #ec4899); border-color: var(--accent, #ec4899); color: #fff; }
.club-file-input:focus-visible + .club-file-btn { outline: 3px solid var(--accent-2, #fbbf24); outline-offset: 2px; }
.club-file-name { font-weight: 700; opacity: .85; font-size: .9rem; color: var(--ink); }
.club-file-current {
  display: inline-flex; align-items: center; gap: .55rem; margin: .2rem 0 .5rem;
  border: 2px solid var(--ink); background: var(--paper); padding: .35rem .5rem;
}
.club-file-current img { width: 56px; height: 56px; object-fit: cover; border: 2px solid var(--ink); display: block; }
.club-file-current span { font-weight: 800; font-size: .85rem; color: var(--ink); }

/* Private club landing gate (discoverable, but content is -only). */
.club-private-gate {
  margin-top: 14px; border: 3px solid var(--ink); background: var(--paper); color: var(--ink);
  box-shadow: var(--shadow); border-left: 10px solid var(--accent, #ec4899);
  padding: 1.2rem 1.3rem; text-align: center;
}
.club-private-gate-head {
  font-family: var(--font-display); font-weight: 800; font-size: 1.4rem;
  display: inline-flex; align-items: center; gap: .5rem;
}
.club-private-gate-head .fa-lock { color: var(--accent, #ec4899); }
.club-private-gate-msg { margin: .5rem auto .9rem; max-width: 460px; font-weight: 600; font-size: 1rem; line-height: 1.5; }
.club-private-gate-actions { display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap; }
.club-private-gate-actions .btn { font-size: 1rem; }
.club-private-gate-about {
  margin: 1.1rem auto 0; max-width: 560px; text-align: left; font-size: .95rem; line-height: 1.55;
  border-top: 2px solid var(--ink); padding-top: .9rem;
}

/* Web Push soft-prompt (proactive nudge). Fixed toast, outside .app. */
.push-prompt {
  position: fixed; z-index: 1000; right: 18px; bottom: 18px; max-width: 380px;
  display: flex; align-items: flex-start; gap: .7rem; flex-wrap: wrap;
  background: var(--paper); color: var(--ink); border: 3px solid var(--ink);
  box-shadow: var(--shadow); padding: 1rem 1.1rem;
  transform: translateY(24px); opacity: 0; transition: transform .22s ease, opacity .22s ease;
}
/* The class sets display:flex, which would override the [hidden] attribute's
   display:none — leaving an invisible (opacity:0) but click-CAPTURING card
   pinned to the bottom-right corner, on top of whatever sits there (e.g. the
   marketplace Approve/Reject buttons). Force hidden to truly remove it; push.js
   sets hidden=false only when it actually wants to show the prompt. */
.push-prompt[hidden] { display: none; }
.push-prompt.is-in { transform: translateY(0); opacity: 1; }
.push-prompt-ic { font-size: 1.6rem; color: var(--accent-2, #fbbf24); flex-shrink: 0; line-height: 1.2; }
.push-prompt-body { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: .2rem; }
.push-prompt-title { font-family: var(--font-display); font-weight: 800; font-size: 1.08rem; }
.push-prompt-msg { font-weight: 600; font-size: .9rem; line-height: 1.45; }
.push-prompt-actions { display: flex; gap: .5rem; flex-wrap: wrap; width: 100%; margin-top: .35rem; }
.push-prompt-btn { font-size: .9rem; font-weight: 800; }
@media (max-width: 600px) {
  .push-prompt { right: 10px; left: 10px; bottom: 10px; max-width: none; }
}

/* ===== Achievements (Logros) ============================================ */
/* Profile showcase strip */
.profile-showcase { margin-top: .9rem; display: flex; flex-direction: column; gap: .85rem; }
.pf-clubs-label, .pf-badges-label { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #9b8bc2); }
.pf-clubs-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; align-items: center; }
.pf-club-shield { width: 38px; height: 38px; border-radius: 10px; overflow: hidden; border: 2px solid var(--border); background: var(--paper-2, #2f2049); display: flex; align-items: center; justify-content: center; text-decoration: none; transition: transform .12s; }
.pf-club-shield:hover { transform: translateY(-2px); }
.pf-club-shield img { width: 100%; height: 100%; object-fit: cover; }
.pf-club-initial { font-weight: 800; color: var(--ink); font-size: 1rem; }
.pf-club-more { font-weight: 800; font-size: .8rem; color: var(--accent); text-decoration: none; padding: 0 .3rem; }
.pf-badges-head { display: flex; align-items: center; gap: .5rem; }
.pf-badges-row { display: flex; flex-wrap: wrap; gap: 10px 6px; margin-top: .55rem; align-items: flex-start; }
/* Each featured badge = colored hexagon (category colour) with the badge inside + 1-line label below (mockup layout). */
.pf-badge-item { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 74px; text-decoration: none; transition: transform .12s; }
.pf-badge-item:hover { transform: translateY(-2px); }
/* Just the badge art — the PNG is already a shaped badge, so NO outer hexagon
   (a hexagon inside a hexagon looked absurd). The text label sits below. */
.pf-badge-art { position: relative; width: 74px; height: 74px; display: flex; align-items: center; justify-content: center; }
.pf-badge-art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
/* Fallback while a badge's art is still pending: a category-colored HEXAGON that
   matches the badge silhouette (no image inside → not a hexagon-in-a-hexagon). */
.pf-badge-fallback { align-items: center; justify-content: center; width: 100%; height: 100%;
  clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background: var(--cat, #7c3aed); color: #fff; font-size: 1.5rem;
  box-shadow: inset 0 -8px 14px rgba(0,0,0,.28), inset 0 5px 9px rgba(255,255,255,.2); }
/* Explicit fixed size (not %) — as a flex item sized only by its "+N" text
   content, width/height:100% resolved circularly and squashed the hexagon
   into a bowtie. Slightly smaller/narrower than .pf-badge-art's 74px box —
   the real badge PNGs have a ~12% breathing margin + a true (narrower-than-
   tall) hexagon baked in, so a clip-path filling the full square looked
   fatter/bigger than the actual badges next to it. */
.pf-badge-more { width: 60px; height: 66px; margin: 3px 7px 0; clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background: var(--paper-2, #2f2049); box-shadow: inset 0 0 0 2px var(--border); color: var(--muted, #9b8bc2); font-weight: 800; font-size: 1.05rem; }
.pf-badge-label { text-align: center; line-height: 1.12; max-width: 74px; }
/* Single line, no wrap — long titles/subtitles ("Conversation Starter") ellipsize
   instead of breaking to a 2nd line. Full text still available via the <a title>. */
.pf-badge-title { display: block; font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-badge-sub { display: block; font-size: .54rem; font-weight: 600; color: var(--muted, #9b8bc2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Collection page */
.ach-coll-head { padding: 1.1rem 1.25rem; margin-bottom: .9rem; }
.ach-coll-head h1 { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; margin: 0; display: flex; align-items: center; gap: .55rem; }
.ach-coll-head h1 i { color: var(--accent-2, #FBBF24); }
.ach-coll-count { margin: .3rem 0 0; font-weight: 600; color: var(--muted, #9b8bc2); }
.ach-cat { margin-bottom: 1.3rem; }
.ach-cat-title { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; margin: 0 0 .7rem; padding-left: .15rem; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .7rem; }
.ach-badge { display: flex; gap: .7rem; align-items: center; padding: .7rem .8rem; border: 2px solid var(--border); border-radius: 14px; background: var(--paper); }
.ach-badge.is-locked { opacity: .6; }
.ach-badge-icon { flex: 0 0 auto; width: 54px; height: 60px; display: flex; align-items: center; justify-content: center; }
.ach-badge-icon img { width: 100%; height: 100%; object-fit: contain; }
.ach-badge.is-locked .ach-badge-icon img { filter: grayscale(1); opacity: .85; }
.ach-badge-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); background: var(--tier, #b07cff); box-shadow: inset 0 -8px 14px rgba(0,0,0,.25), inset 0 5px 9px rgba(255,255,255,.16); color: #fff; font-size: 1.3rem; }
.ach-badge.is-locked .ach-badge-fallback { background: var(--paper-2, #2f2049); box-shadow: none; filter: grayscale(1); color: var(--muted, #9b8bc2); }
.ach-badge-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: .12rem; }
.ach-badge-title { font-weight: 800; font-size: .95rem; line-height: 1.2; color: var(--ink); }
.ach-badge-tier { font-size: .68rem; font-weight: 700; color: var(--tier, #b07cff); text-transform: uppercase; letter-spacing: .03em; }
.ach-badge.is-locked .ach-badge-tier { color: var(--muted, #9b8bc2); }
.ach-badge-sub { font-size: .8rem; color: var(--muted, #9b8bc2); }
.ach-badge-rarity { font-size: .76rem; font-weight: 700; color: var(--accent-2, #FBBF24); margin-top: .15rem; }
.ach-badge-date { font-size: .72rem; color: var(--muted, #9b8bc2); }
.ach-progress { height: 7px; border-radius: 99px; background: var(--paper-2, #2f2049); overflow: hidden; margin-top: .3rem; border: 1px solid var(--border); }
.ach-progress-bar { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.ach-progress-label { font-size: .74rem; font-weight: 700; color: var(--muted, #9b8bc2); margin-top: .2rem; }
@media (max-width: 600px) {
  .ach-grid { grid-template-columns: 1fr 1fr; }
  .ach-badge { flex-direction: column; text-align: center; align-items: center; }
  .pf-badge-art { width: 56px; height: 56px; }
  .pf-badge-more { width: 45px; height: 50px; margin: 3px 5px 0; }
  .pf-badge-item { width: 58px; }
  .pf-badge-label { max-width: 58px; }
}

/* Unlock toast (celebratory) */
.ach-toast-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(10,4,24,.55); opacity: 0; transition: opacity .3s; padding: 1rem; }
.ach-toast-overlay.is-in { opacity: 1; }
.ach-toast-card { position: relative; max-width: 340px; width: 100%; text-align: center; padding: 1.6rem 1.4rem 1.5rem; border-radius: 20px; background: var(--paper, #241738); border: 3px solid var(--tier, #b07cff); box-shadow: 0 18px 50px rgba(0,0,0,.5); cursor: pointer; transform: scale(.8) translateY(14px); opacity: 0; transition: transform .35s cubic-bezier(.2,1.3,.5,1), opacity .35s; overflow: hidden; }
.ach-toast-overlay.is-in .ach-toast-card { transform: scale(1) translateY(0); opacity: 1; }
.ach-toast-close { position: absolute; top: .4rem; right: .4rem; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(128,128,128,.18); color: var(--ink); cursor: pointer; font-size: 1rem; line-height: 1; }
.ach-toast-close:hover { background: rgba(128,128,128,.32); }
.ach-toast-hex { display: flex; align-items: center; justify-content: center; width: 96px; height: 108px; margin: 0 auto .8rem; animation: achPop .5s cubic-bezier(.2,1.4,.5,1) .1s both; }
.ach-toast-hex img { width: 100%; height: 100%; object-fit: contain; }
.ach-toast-hex.is-fallback { clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); background: var(--tier, #b07cff); box-shadow: inset 0 -12px 22px rgba(0,0,0,.28), inset 0 8px 14px rgba(255,255,255,.2); }
.ach-toast-hex .fa-trophy { color: #fff; font-size: 2.2rem; }
@keyframes achPop { from { transform: scale(.3) rotate(-12deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
.ach-toast-kicker { font-family: var(--font-display); font-weight: 800; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tier, #b07cff); }
.ach-toast-title { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: var(--ink); margin-top: .25rem; line-height: 1.15; }
.ach-toast-sub { font-size: .9rem; color: var(--muted, #9b8bc2); margin-top: .25rem; }
.ach-toast-coins { display: inline-flex; align-items: center; gap: .35rem; margin-top: .8rem; padding: .3rem .7rem; border-radius: 99px; background: rgba(251,191,36,.16); color: #d99e00; font-weight: 800; font-size: .85rem; }
.ach-confetti { position: absolute; top: 28%; width: 8px; height: 14px; border-radius: 2px; opacity: .9; animation: achConfetti 1.5s ease-out forwards; pointer-events: none; }
@keyframes achConfetti { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(220px) rotate(360deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ach-toast-card, .ach-toast-hex { animation: none; transition: opacity .2s; } }

/* "Proud Member Of" — clubs card tucked into the cover, beside the avatar */
.profile-clubs-float {
  position: absolute; top: 150px; left: 152px; z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 7px 12px 8px; border-radius: 16px;
  background: var(--paper); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  max-width: calc(100% - 172px);
}
.pcf-label { font-size: .58rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted, #9b8bc2); white-space: nowrap; }
.pcf-row { display: flex; align-items: center; gap: 6px; }
.pcf-club { width: 42px; height: 42px; border-radius: 11px; overflow: hidden; border: 2px solid var(--border); background: var(--paper-2, #2f2049); display: flex; align-items: center; justify-content: center; text-decoration: none; transition: transform .12s; }
.pcf-club:hover { transform: translateY(-2px); }
.pcf-club img { width: 100%; height: 100%; object-fit: cover; }
.pcf-initial { font-weight: 800; color: var(--ink); font-size: 1.05rem; }
.pcf-more { font-weight: 800; font-size: .85rem; color: var(--accent); text-decoration: none; padding: 0 4px; }
@media (max-width: 720px) {
  /* Stay tucked into the cover beside the avatar, just slightly smaller. */
  .profile-clubs-float { left: 138px; padding: 5px 9px 6px; gap: 3px; border-radius: 13px; max-width: calc(100% - 148px); }
  .pcf-row { gap: 5px; }
  .pcf-club { width: 34px; height: 34px; border-radius: 9px; }
  .pcf-initial { font-size: .9rem; }
  .pcf-label { font-size: .52rem; }
  .pcf-more { font-size: .78rem; }
}

/* Settings — "Proud Member Of" club curation list */
.club-curate-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ccr-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 2px solid var(--border); border-radius: 12px; background: var(--paper); }
.ccr-grip { color: var(--muted, #9b8bc2); }
.ccr-avatar { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 9px; overflow: hidden; border: 2px solid var(--border); background: var(--paper-2, #2f2049); display: flex; align-items: center; justify-content: center; }
.ccr-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ccr-initial { font-weight: 800; color: var(--ink); }
.ccr-name { flex: 1; min-width: 0; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccr-show { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--muted, #9b8bc2); font-weight: 700; white-space: nowrap; cursor: pointer; }
.ccr-moves { display: flex; gap: 4px; }
.ccr-moves button { width: 36px; height: 36px; border: 2px solid var(--border); border-radius: 8px; background: var(--paper-2, #2f2049); color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ccr-moves button:hover { border-color: var(--accent); }
.ccr-row[draggable="true"] { cursor: grab; }
.ccr-row.ccr-dragging { opacity: .45; cursor: grabbing; }
@media (max-width: 600px) { .ccr-show span { display: none; } .ccr-grip { display: none; } }

/* ── Aviso dirigido a un  (-notice-modal.php) ────────────────────
   Overlay que no se puede cerrar: se usa cuando los mensajes privados ya se
   ignoraron. El gemelo [hidden]{display:none} es obligatorio — sin él, una
   tarjeta invisible sigue capturando clics sobre toda la página. */
.unotice-overlay { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15, 8, 30, .95); }
.unotice-overlay[hidden] { display: none; }
.unotice-card { background: var(--paper, #fff); color: var(--ink, #1a1a1a); border: 4px solid #dc2626; border-radius: 14px; max-width: 640px; width: 100%; max-height: 88vh; overflow-y: auto; padding: 1.6rem 1.5rem; box-shadow: 0 18px 60px rgba(0, 0, 0, .55); text-align: center; }
.unotice-emoji { font-size: 2.4rem; line-height: 1; margin-bottom: .35rem; }
.unotice-title { font-family: 'Oswald', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; font-size: 1.4rem; margin: 0 0 .9rem; color: #dc2626; }
.unotice-body { text-align: left; line-height: 1.6; font-size: .98rem; background: rgba(220, 38, 38, .07); border: 2px solid rgba(220, 38, 38, .35); border-radius: 10px; padding: .9rem 1rem; }
.unotice-again { margin-top: 1.1rem; }
.unotice-again[hidden] { display: none; }
.unotice-again-head { font-weight: 800; font-size: .92rem; margin: 0 0 .5rem; text-transform: uppercase; letter-spacing: .04em; }
.unotice-actions { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.2rem; }
.unotice-btn { font-family: 'Oswald', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 1rem; padding: .8rem 1.2rem; border: 3px solid var(--ink, #1a1a1a); border-radius: 10px; background: var(--paper, #fff); color: var(--ink, #1a1a1a); cursor: pointer; }
.unotice-btn[hidden] { display: none; }
.unotice-btn:disabled { opacity: .5; cursor: not-allowed; }
.unotice-btn--final { background: #dc2626; border-color: #dc2626; color: #fff; }
.unotice-foot { margin: .9rem 0 0; font-size: .8rem; opacity: .75; }
.unotice-foot[hidden] { display: none; }

/* ── Video en el post (solo lo publica el dueño) ────────────────────────── */
.post-video { margin: 0 0 .5rem; background: #000; line-height: 0; }
.post-video video { width: 100%; max-height: 78vh; display: block; background: #000; }
/* Selector de video en el composer */
.cc-video { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .6rem 0 .2rem; padding: .6rem .75rem; border: 2px dashed var(--ink-soft, #7c3aed); border-radius: 10px; }
.cc-video-label { font-weight: 800; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; }
.cc-video-input { font: inherit; font-size: .85rem; max-width: 100%; }
.cc-video .cc-help { flex-basis: 100%; margin: 0; }

/* ── Suspensión temporal de subidas ─────────────────────────────────────── */
.cc--ban { display: flex; align-items: flex-start; gap: .55rem; margin: .6rem 0; padding: .7rem .85rem; border: 2px solid #dc2626; border-radius: 10px; background: rgba(220, 38, 38, .12); color: var(--ink); font-size: .86rem; font-weight: 700; line-height: 1.45; }
.ub-overlay { position: fixed; inset: 0; z-index: 10040; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15, 8, 30, .9); }
.ub-overlay[hidden] { display: none !important; }
.ub-card { background: var(--paper, #fff); color: var(--ink, #1a1a1a); border: 4px solid #dc2626; border-radius: 14px; max-width: 520px; width: 100%; padding: 1.5rem; text-align: center; box-shadow: 0 18px 60px rgba(0, 0, 0, .55); }
.ub-icon { font-size: 2.2rem; line-height: 1; margin-bottom: .5rem; }
.ub-text { margin: 0 0 1.1rem; line-height: 1.6; font-size: .96rem; text-align: left; }
.ub-btn { font-family: 'Oswald', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: .95rem; padding: .65rem 1.6rem; border: 3px solid #dc2626; border-radius: 10px; background: #dc2626; color: #fff; cursor: pointer; }

/* ── Límite de imágenes para cuentas gratuitas (debajo de la zona de arrastre) ── */
.cc-dz-limit { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: .45rem 0 .1rem; font-size: .82rem; font-weight: 600; line-height: 1.45; color: var(--ink); opacity: .9; }
.cc-dz-limit .fa-crown { color: #f59e0b; }
.cc-dz-limit a { font-weight: 800; color: var(--accent, #ec4899); text-decoration: underline; text-underline-offset: 2px; }