/* ── Reset & base ─────────────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg:        #0e0f11;
      --surface:   #16181c;
      --surface2:  #1d2026;
      --border:    #2a2d35;
      --border2:   #353840;
      --text:      #e8e9eb;
      --muted:     #6e7380;
      --muted2:    #9099a8;
      --accent:    #e8a045;
      --accent2:   #f0bc6e;
      --indigo:    #7c83f5;
      --indigo2:   #a5aaff;
      --green:     #4caf82;
      --red:       #e05c5c;
      --radius:    14px;
      --radius-sm: 8px;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'DM Sans', sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.65;
      min-height: 100vh;
    }

    /* ── Scrollbar ────────────────────────────────────────────────────────── */
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: var(--bg); }
    ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }

    /* ── Top nav ──────────────────────────────────────────────────────────── */
    .topnav {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(14,15,17,0.88);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--border);
      height: 65px;
      display: flex;
      align-items: center;
      padding: 0 2rem;
      gap: 2rem;
    }

    .nav-brand {
      font-family: 'Lora', serif;
      font-weight: 700;
      font-size: 1.2rem;
      color: var(--accent);
      text-decoration: none;
      letter-spacing: -0.01em;
      white-space: nowrap;
    }

    .nav-search {
      flex: 1;
      max-width: 360px;
      position: relative;
    }
    .nav-search input {
      width: 100%;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 0.45rem 1rem 0.45rem 2.4rem;
      font-size: 0.85rem;
      color: var(--text);
      font-family: 'DM Sans', sans-serif;
      transition: border-color 0.2s;
      outline: none;
    }
    .nav-search input:focus { border-color: var(--accent); }
    .nav-search input::placeholder { color: var(--muted); }
    .nav-search svg {
      position: absolute;
      left: 0.8rem;
      top: 50%;
      transform: translateY(-50%);
      color: var(--muted);
      pointer-events: none;
    }

    .nav-links {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 0.25rem;
    }
    .nav-links a {
      color: var(--muted2);
      text-decoration: none;
      font-size: 0.85rem;
      font-weight: 500;
      padding: 0.4rem 0.85rem;
      border-radius: 999px;
      transition: all 0.15s;
    }
    .nav-links a:hover { background: var(--surface2); color: var(--text); }
    .nav-links .btn-join {
      background: var(--accent);
      color: #0e0f11;
      font-weight: 600;
    }
    .nav-links .btn-join:hover { background: var(--accent2); }
    .nav-links .nav-chat-btn {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      color: var(--muted2);
    }
    .nav-links .nav-chat-btn:hover { color: var(--text); background: var(--surface2); }

    .nav-chat-icon-wrap {
      position: relative;
      display: inline-flex;
      align-items: center;
    }
    .nav-unread-badge {
      position: absolute;
      top: -6px;
      right: -8px;
      background: #ef4444;
      color: #fff;
      font-size: 10px;
      font-weight: 700;
      min-width: 16px;
      height: 16px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 3px;
      line-height: 1;
      pointer-events: none;
    }

    /* ── Mobile right group (auth + hamburger) ────────────────────────────── */
    .nav-mobile-right {
      display: none;
      align-items: center;
      gap: 0.4rem;
      margin-left: auto;
    }
    .nav-mobile-login {
      color: var(--muted2);
      text-decoration: none;
      font-size: 0.82rem;
      font-weight: 500;
      padding: 0.35rem 0.7rem;
      border-radius: 999px;
      white-space: nowrap;
    }
    .nav-mobile-login:hover { background: var(--surface2); color: var(--text); }
    .nav-mobile-join {
      background: var(--accent);
      color: #0e0f11;
      text-decoration: none;
      font-size: 0.82rem;
      font-weight: 600;
      padding: 0.35rem 0.7rem;
      border-radius: 999px;
      white-space: nowrap;
    }
    .nav-mobile-join:hover { background: var(--accent2); }

    /* ── Hamburger ────────────────────────────────────────────────────────── */
    .nav-hamburger {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0.4rem;
      margin-left: auto;
    }
    .nav-hamburger span {
      display: block;
      width: 22px;
      height: 2px;
      background: var(--text);
      border-radius: 2px;
      transition: opacity 0.2s;
    }
    .nav-hamburger:hover span { opacity: 0.7; }

    /* ── Sidebar overlay ──────────────────────────────────────────────────── */
    .sidebar-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.55);
      z-index: 199;
    }
    .sidebar-overlay.open { display: block; }

    /* ── Nav sidebar ──────────────────────────────────────────────────────── */
    .nav-sidebar {
      position: fixed;
      top: 0;
      right: 0;
      width: min(300px, 85vw);
      height: 100dvh;
      background: var(--surface);
      border-left: 1px solid var(--border);
      z-index: 200;
      transform: translateX(100%);
      transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
      display: flex;
      flex-direction: column;
      padding: 1.25rem 1.25rem 2rem;
      overflow-y: auto;
      gap: 1.25rem;
    }
    .nav-sidebar.open { transform: translateX(0); }

    .sidebar-close {
      align-self: flex-end;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 50%;
      width: 34px;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--text);
      flex-shrink: 0;
    }
    .sidebar-close:hover { background: var(--border); }

    .sidebar-search {
      position: relative;
    }
    .sidebar-search input {
      width: 100%;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 0.55rem 1rem 0.55rem 2.4rem;
      font-size: 0.9rem;
      color: var(--text);
      font-family: 'DM Sans', sans-serif;
      outline: none;
      transition: border-color 0.2s;
      box-sizing: border-box;
    }
    .sidebar-search input:focus { border-color: var(--accent); }
    .sidebar-search input::placeholder { color: var(--muted); }
    .sidebar-search svg {
      position: absolute;
      left: 0.8rem;
      top: 50%;
      transform: translateY(-50%);
      color: var(--muted);
      pointer-events: none;
    }

    .sidebar-links {
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
    }
    .sidebar-link {
      color: var(--muted2);
      text-decoration: none;
      font-size: 0.95rem;
      font-weight: 500;
      padding: 0.6rem 0.9rem;
      border-radius: 10px;
      transition: all 0.15s;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .sidebar-link:hover { background: var(--surface2); color: var(--text); }
    .sidebar-link--accent {
      background: var(--accent);
      color: #0e0f11 !important;
      font-weight: 600;
      justify-content: center;
      margin-top: 0.25rem;
    }
    .sidebar-link--accent:hover { background: var(--accent2); }

    .sidebar-discord {
      display: flex;
      align-items: center;
      gap: 0.55rem;
      background: #5865F2;
      color: #fff;
      text-decoration: none;
      font-size: 0.9rem;
      font-weight: 600;
      padding: 0.6rem 0.9rem;
      border-radius: 10px;
      transition: opacity 0.15s;
    }
    .sidebar-discord:hover { opacity: 0.88; }

    .sidebar-tags-section {
      border-top: 1px solid var(--border);
      padding-top: 1rem;
    }
    .sidebar-section-label {
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      margin: 0 0 0.65rem;
    }
    .sidebar-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
    }
    .sidebar-tag {
      font-size: 0.8rem;
      color: var(--muted2);
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 0.3rem 0.75rem;
      text-decoration: none;
      transition: all 0.15s;
    }
    .sidebar-tag:hover,
    .sidebar-tag.active { background: var(--accent); color: #0e0f11; border-color: var(--accent); }

    /* ── Page layout ──────────────────────────────────────────────────────── */
    .page-wrap {
      max-width: 1140px;
      margin: 0 auto;
      padding: 2rem 1.5rem;
      display: grid;
      grid-template-columns: 1fr 320px;
      gap: 2rem;
      align-items: start;
    }

    /* ── Filter bar ───────────────────────────────────────────────────────── */
    .filter-bar {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 1.5rem;
      flex-wrap: wrap;
    }
    .filter-pill {
      font-size: 0.78rem;
      font-weight: 600;
      padding: 0.35rem 0.9rem;
      border-radius: 999px;
      border: 1px solid var(--border2);
      background: var(--surface);
      color: var(--muted2);
      text-decoration: none;
      cursor: pointer;
      transition: all 0.15s;
      white-space: nowrap;
    }
    .filter-pill:hover { border-color: var(--accent); color: var(--accent); }
    .filter-pill.active { background: var(--accent); color: #0e0f11; border-color: var(--accent); }
    .filter-divider {
      width: 1px; height: 18px;
      background: var(--border);
      margin: 0 0.25rem;
    }

    /* ── Post card ────────────────────────────────────────────────────────── */
    .post-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      margin-bottom: 1.5rem;
      transition: border-color 0.2s;
      animation: fadeUp 0.35s ease both;
    }
    .post-card:hover { border-color: var(--border2); }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    {% for i in "12345678" %}
    .post-card:nth-child({{ forloop.counter }}) { animation-delay: {{ forloop.counter0 }}0ms; }
    {% endfor %}

    /* Card header */
    .card-header {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 1rem 1.25rem 0.75rem;
    }
    .card-avatar {
      width: 38px; height: 38px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--indigo), var(--accent));
      display: flex; align-items: center; justify-content: center;
      font-size: 1rem;
      flex-shrink: 0;
    }
    .card-meta-info { flex: 1; min-width: 0; }
    .card-author { font-size: 0.8rem; font-weight: 600; color: var(--text); }
    .card-timestamp { font-size: 0.73rem; color: var(--muted); margin-top: 1px; }
    .card-type-badge {
      font-size: 0.67rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      padding: 0.2rem 0.55rem;
      border-radius: 4px;
    }
    .badge-article { background: #1e2a3a; color: #5fa3e0; }
    .badge-video   { background: #2a1e2e; color: #c084fc; }
    .badge-audio   { background: #1e2a25; color: #4ade80; }
    .badge-poll    { background: #2a251e; color: var(--accent); }
    .badge-gallery { background: #2a1e24; color: #fb7185; }

    /* Thumbnail */
    .card-thumb-wrap {
      position: relative;
      overflow: hidden;
      max-height: 380px;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      background-size: cover;
      background-position: center;
    }
    .card-thumb-wrap::before {
      content: '';
      position: absolute;
      inset: -20px;
      background: inherit;
      background-size: cover;
      background-position: center;
      filter: blur(18px) brightness(0.6);
      z-index: 0;
    }
    .card-thumb {
      position: relative;
      z-index: 1;
      width: 100%;
      max-height: 380px;
      object-fit: contain;
      display: block;
    }

    /* Card body */
    .card-body { padding: 1.1rem 1.25rem; }
   .card-body p a,
  .card-body ul a,
  .card-body li a {
    text-decoration: underline !important;
    color: var(--accent) !important;
  }
    .card-title {
      font-family: 'Lora', serif;
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--text) !important;
      line-height: 1.35;
      margin-bottom: 0.6rem;
      text-decoration: none;
      display: block;
      text-decoration: none !important;
    }
    .card-title:hover { color: var(--accent); }

    .card-excerpt {
      font-size: 0.9rem;
      color: var(--muted2);
      line-height: 1.65;
      /* margin-left: -0.25rem; */
    }
    .card-excerpt--collapsible {
      display: -webkit-box;
      -webkit-line-clamp: 10;
      line-clamp: 10;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .card-excerpt--collapsible.card-excerpt--expanded {
      display: block;
      overflow: visible;
    }
    .card-excerpt-toggle {
      background: none;
      border: none;
      padding: 0;
      margin-top: 4px;
      font-size: 0.82rem;
      color: var(--accent);
      cursor: pointer;
      display: block;
    }
    .card-excerpt-toggle:hover { opacity: 0.75; }

    /* Tags */
    .card-tags {
      display: flex;
      gap: 0.4rem;
      flex-wrap: wrap;
      margin-top: 0.85rem;
    }
    .card-tag {
      font-size: 0.72rem;
      font-weight: 500;
      color: var(--muted);
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 0.15rem 0.5rem;
      text-decoration: none;
      transition: all 0.15s;
    }
    .card-tag:hover { color: var(--accent); border-color: var(--accent); }

    /* Card footer */
    .card-footer {
      padding: 0.7rem 1.25rem;
      border-top: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 1rem;
    }
    .card-stat {
      display: flex;
      align-items: center;
      gap: 0.3rem;
      font-size: 0.78rem;
      color: var(--muted);
    }
    .card-stat svg { opacity: 0.6; }
    .read-more {
      margin-left: auto;
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--accent);
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 0.3rem;
      transition: gap 0.15s;
    }
    .read-more:hover { gap: 0.5rem; }

    /* ── Lock overlay ─────────────────────────────────────────────────────── */
    .lock-banner {
      margin: 0 1.25rem 1rem;
      background: linear-gradient(135deg, rgba(124,131,245,0.08), rgba(232,160,69,0.08));
      border: 1px solid var(--border2);
      border-radius: var(--radius-sm);
      padding: 0.75rem 1rem;
      display: flex;
      align-items: center;
      gap: 0.6rem;
    }
    .lock-banner .lock-icon { font-size: 1.1rem; }
    .lock-banner p { font-size: 0.82rem; color: var(--muted2); }
    .lock-banner a { color: var(--accent); text-decoration: none; font-weight: 600; }

    /* ── Poll ─────────────────────────────────────────────────────────────── */
    .poll-wrap { padding: 0 1.25rem 0.5rem; }
    .poll-question {
      font-family: 'Lora', serif;
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 1rem;
      line-height: 1.4;
    }

    .poll-options-outer {
      position: relative;
    }
    .poll-options {
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
    }
    .poll-options--collapsible {
      max-height: 280px;
      overflow: hidden;
      transition: max-height 0.4s ease;
    }
    .poll-options--collapsible.expanded { max-height: 2000px; }

    .poll-fade {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 80px;
      background: linear-gradient(to bottom, transparent, var(--surface));
      pointer-events: none;
      transition: opacity 0.3s;
    }
    .poll-options--collapsible.expanded + .poll-fade { opacity: 0; }

    .poll-choice {
      position: relative;
      border-radius: var(--radius-sm);
      overflow: hidden;
      border: 1px solid var(--border2);
      cursor: pointer;
      transition: border-color 0.15s;
      min-height: fit-content;
    }
    .poll-choice:hover { border-color: var(--accent); }
    .poll-choice.voted { border-color: var(--indigo); }

    .poll-choice-bar {
      position: absolute;
      top: 0; left: 0; bottom: 0;
      width: 0%;
      background: linear-gradient(90deg, rgba(124,131,245,0.15), rgba(124,131,245,0.05));
      transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .poll-choice.voted .poll-choice-bar {
      background: linear-gradient(90deg, rgba(124,131,245,0.25), rgba(124,131,245,0.08));
    }

    .poll-choice-inner {
      position: relative;
      padding: 0.65rem 0.9rem;
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }
    .poll-radio {
      width: 18px; height: 18px;
      border-radius: 50%;
      border: 2px solid var(--border2);
      background: transparent;
      flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      transition: border-color 0.15s;
    }
    .poll-choice.voted .poll-radio {
      border-color: var(--indigo);
      background: var(--indigo);
    }
    .poll-radio::after {
      content: '';
      width: 7px; height: 7px;
      border-radius: 50%;
      background: white;
      opacity: 0;
      transition: opacity 0.15s;
    }
    .poll-choice.voted .poll-radio::after { opacity: 1; }

    .poll-choice-text { font-size: 0.88rem; color: var(--text); flex: 1; }
    .poll-choice-pct { font-size: 0.8rem; font-weight: 600; color: var(--muted2); }
    .poll-choice.voted .poll-choice-pct { color: var(--indigo2); }

    .poll-show-more {
      margin-top: 0.75rem;
      background: none;
      border: 1px solid var(--border2);
      border-radius: 999px;
      color: var(--muted2);
      font-size: 0.8rem;
      font-weight: 600;
      font-family: 'DM Sans', sans-serif;
      padding: 0.4rem 1rem;
      cursor: pointer;
      transition: all 0.15s;
      width: 100%;
    }
    .poll-show-more:hover { border-color: var(--accent); color: var(--accent); }

    .poll-meta {
      margin-top: 0.85rem;
      display: flex;
      align-items: center;
      gap: 1rem;
    }
    .poll-vote-count { font-size: 0.78rem; color: var(--muted); }
    .poll-status {
      font-size: 0.72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      padding: 0.2rem 0.6rem;
      border-radius: 4px;
    }
    .poll-open { background: rgba(76,175,130,0.12); color: var(--green); }
    .poll-closed { background: rgba(224,92,92,0.12); color: var(--red); }

    .poll-vote-btn {
      margin-left: auto;
      background: var(--accent);
      color: #0e0f11;
      border: none;
      font-family: 'DM Sans', sans-serif;
      font-weight: 700;
      font-size: 0.82rem;
      padding: 0.45rem 1.1rem;
      border-radius: 999px;
      cursor: pointer;
      transition: background 0.15s;
    }
    .poll-vote-btn:disabled {
      background: var(--accent);
      opacity: 0.6;
      cursor: not-allowed;
    }
    .poll-choice[data-locked="true"] {
        cursor: default;
        opacity: 0.85;
      }
    .poll-choice--disabled {
      cursor: not-allowed;
      opacity: 0.45;
      pointer-events: none;
    }
    .poll-multi-hint {
      font-size: 0.78rem;
      color: var(--muted);
      margin: 0 0 0.6rem;
    }
    .poll-vote-btn:hover { background: var(--accent2); }
    .poll-login-btn { text-decoration: none; }

    /* htmx indicator */
    .poll-spinner { display: none; margin-right: 0.3rem; animation: spin 0.8s linear infinite; }
    .htmx-request .poll-spinner { display: inline; }
    .htmx-request.poll-vote-btn { opacity: 0.6; pointer-events: none; }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ── Locked poll ──────────────────────────────────────────────────────── */
    .poll-locked {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      padding: 2rem;
      background: var(--surface2);
      border-radius: var(--radius-sm);
      border: 1px dashed var(--border2);
      text-align: center;
    }
    .poll-locked .lock-emoji { font-size: 1.75rem; }
    .poll-locked p { font-size: 0.85rem; color: var(--muted2); }
    .poll-locked a { color: var(--accent); text-decoration: none; font-weight: 600; }

    /* ── Featured label ───────────────────────────────────────────────────── */
    .featured-label {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      font-size: 0.7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--accent);
    }
    .featured-label::before {
      content: '';
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--accent);
      animation: pulse 2s infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%       { opacity: 0.5; transform: scale(1.4); }
    }

    /* ── Empty state ──────────────────────────────────────────────────────── */
    .empty-state {
      text-align: center;
      padding: 4rem 2rem;
      color: var(--muted);
    }
    .empty-state .emoji { font-size: 3rem; margin-bottom: 1rem; }
    .empty-state h3 { font-family: 'Lora', serif; font-size: 1.2rem; color: var(--muted2); margin-bottom: 0.5rem; }

    /* ── Pagination ───────────────────────────────────────────────────────── */
    .pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.35rem;
      margin-top: 0.5rem;
      padding-bottom: 2rem;
    }
    .pg-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px; height: 38px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--muted2);
      text-decoration: none;
      font-size: 0.85rem;
      font-weight: 600;
      transition: all 0.15s;
    }
    .pg-btn:hover { background: var(--surface2); border-color: var(--border2); color: var(--text); }
    .pg-btn.active { background: var(--accent); color: #0e0f11; border-color: var(--accent); }
    .pg-btn.disabled { opacity: 0.3; pointer-events: none; }

    /* ── RIGHT SIDEBAR ────────────────────────────────────────────────────── */
    .sidebar { position: sticky; top: 74px; }

    .sidebar-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      margin-bottom: 1.25rem;
    }
    .sidebar-card-head {
      padding: 0.85rem 1.1rem 0.6rem;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .sidebar-card-head h3 {
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
    }
    .sidebar-card-head .dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--accent);
    }

    /* Membership card */
    .membership-card {
      background: linear-gradient(135deg, #1a1610 0%, #1d1a10 50%, #181620 100%);
      border: 1px solid rgba(232,160,69,0.25);
      position: relative;
      overflow: hidden;
    }
    .membership-card::before {
      content: '';
      position: absolute;
      top: -40px; right: -40px;
      width: 160px; height: 160px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(232,160,69,0.12) 0%, transparent 70%);
      pointer-events: none;
    }
    .membership-body { padding: 1.25rem; position: relative; }
    .membership-crown { font-size: 1.75rem; margin-bottom: 0.5rem; }
    .membership-title {
      font-family: 'Lora', serif;
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 0.3rem;
    }
    .membership-desc {
      font-size: 0.8rem;
      color: var(--muted2);
      line-height: 1.55;
      margin-bottom: 1rem;
    }

    .tier-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
    .tier-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(232,160,69,0.12);
      border-radius: var(--radius-sm);
      padding: 0.55rem 0.8rem;
    }
    .tier-item-name { font-size: 0.82rem; font-weight: 600; color: var(--text); }
    .tier-item-price { font-size: 0.82rem; font-weight: 700; color: var(--accent); }

    .btn-join-full {
      display: block;
      width: 100%;
      background: linear-gradient(135deg, var(--accent), #d4843a);
      color: #0e0f11;
      text-align: center;
      font-weight: 700;
      font-size: 0.875rem;
      padding: 0.7rem;
      border-radius: var(--radius-sm);
      text-decoration: none;
      transition: opacity 0.15s;
    }
    .btn-join-full:hover { opacity: 0.9; }

    /* Recent posts sidebar */
    .sidebar-post {
      display: flex;
      gap: 0.75rem;
      padding: 0.85rem 1.1rem;
      border-bottom: 1px solid var(--border);
      text-decoration: none;
      transition: background 0.15s;
    }
    .sidebar-post:last-child { border-bottom: none; }
    .sidebar-post:hover { background: var(--surface2); }
    .sidebar-post-thumb {
      width: 52px; height: 52px;
      border-radius: 8px;
      object-fit: cover;
      flex-shrink: 0;
      background: var(--surface2);
    }
    .sidebar-post-thumb-placeholder {
      width: 52px; height: 52px;
      border-radius: 8px;
      background: var(--surface2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      flex-shrink: 0;
    }
    .sidebar-post-info {}
    .sidebar-post-title {
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--text);
      line-height: 1.35;
      margin-bottom: 0.2rem;
    }
    .sidebar-post-date { font-size: 0.72rem; color: var(--muted); }

    /* Access legend */
    .access-legend { padding: 0.85rem 1.1rem; }
    .legend-item {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      padding: 0.3rem 0;
    }
    .legend-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .legend-item p { font-size: 0.78rem; color: var(--muted2); }
    .legend-item strong { color: var(--text); }

    /* ── Responsive ───────────────────────────────────────────────────────── */
    @media (max-width: 900px) {
      .page-wrap { grid-template-columns: 1fr; }
      .sidebar { position: static; }
    }
    @media (max-width: 600px) {
      .topnav { padding: 0 1rem; gap: 1rem; }
      .nav-search { display: none; }
      .nav-links { display: none; }
      .nav-mobile-right { display: flex; }
      .page-wrap { padding: 1rem; }
    }


    /* ── Locked thumbnail blur ────────────────────────────────────────────── */
    .locked-thumb-wrap {
      position: relative;
      overflow: hidden;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }
    .locked-thumb {
      width: 100%;
      max-height: 280px;
      object-fit: cover;
      display: block;
      filter: blur(12px) brightness(0.5);
      transform: scale(1.05); /* hide blur edge artifacts */
    }
    .locked-thumb-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 1.5rem;
      text-align: center;
    }

    /* ── Locked content mask ──────────────────────────────────────────────── */
    .card-body--locked { position: relative; }

    .locked-mask {
      position: relative;
      margin-top: 0.5rem;
      border-radius: var(--radius-sm);
      height:150px;
      overflow: hidden;
    }
    .locked-mask__text {
      font-size: 0.9rem;
      color: transparent;
      text-shadow: 0 0 10px rgba(232,233,235,0.15);
      user-select: none;
      line-height: 1.7;
      letter-spacing: 0.02em;
    }
    .locked-mask__text.mt { margin-top: 0.4rem; }
    .locked-mask__overlay {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
      background: linear-gradient(to bottom,
        rgba(22,24,28,0.3) 0%,
        rgba(22,24,28,0.92) 40%,
        rgba(22,24,28,1) 100%
      );
      padding: 1rem;
      text-align: center;
    }
    .lock-icon-lg { font-size: 1.4rem; }
    .locked-mask__reason { font-size: 0.82rem; color: var(--muted2); }
    .lock-cta {
      display: inline-block;
      font-size: 0.78rem;
      font-weight: 700;
      padding: 0.35rem 0.9rem;
      border-radius: 999px;
      border: 1px solid var(--border2);
      color: var(--muted2);
      text-decoration: none;
      transition: all 0.15s;
      margin: 0 0.2rem;
    }
    .lock-cta:hover { border-color: var(--accent); color: var(--accent); }
    .lock-cta--accent {
      background: var(--accent);
      color: #0e0f11;
      border-color: var(--accent);
    }
    .lock-cta--accent:hover { background: var(--accent2); border-color: var(--accent2); color: #0e0f11; }
.like-btn { transition: transform 0.15s; user-select: none; }
.like-btn:hover { transform: scale(1.2); }
.like-btn.liked { color: #e05c5c; }

/* ── Comments ─────────────────────────────────────────────────────────────── */
.comments-wrap {
  padding: 0.75rem 1.25rem 1rem;
  border-top: 1px solid var(--border);
}
.comments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.comments-count { font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.comments-sort-select {
  font-size: 0.72rem;
  color: var(--muted);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
  outline: none;
}
.comments-sort-select:hover { border-color: var(--accent); }

.comment-form { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.comment-input {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem;
  font-size: 0.85rem;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s;
}
.comment-input:focus { border-color: var(--accent); }
.comment-input--sm { font-size: 0.82rem; }

.comment-submit-btn {
  align-self: flex-end;
  background: var(--accent);
  color: #0e0f11;
  border: none;
  border-radius: 999px;
  padding: 0.35rem 1rem;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: background 0.15s;
}
.comment-submit-btn:hover { background: var(--accent2); }
.comment-submit-btn--sm { padding: 0.3rem 0.8rem; font-size: 0.75rem; }

.comment-login-hint { font-size: 0.82rem; color: var(--muted); margin-bottom: 0.75rem; }
.comment-login-hint a { color: var(--accent); text-decoration: none; }

.comments-list { display: flex; flex-direction: column; gap: 0.85rem; }

.comment { display: flex; gap: 0.65rem; }
.comment--reply { margin-top: 0.6rem; }

.comment-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--indigo), var(--accent));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.comment-avatar--sm { width: 24px; height: 24px; font-size: 0.65rem; }

.comment-body { flex: 1; min-width: 0; }
.comment-meta { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.2rem; }
.comment-author { font-size: 0.8rem; font-weight: 600; color: var(--text); }
.comment-time { font-size: 0.72rem; color: var(--muted); }
.comment-content { font-size: 0.85rem; color: var(--muted2); line-height: 1.55; }

.comment-content-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.comment-content-row .comment-content { flex: 1; }
.comment-delete-form { flex-shrink: 0; margin: 0; }
.comment-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0.2rem;
  color: var(--muted);
  cursor: pointer;
  border-radius: 4px;
  transition: color 0.15s;
}
.comment-delete-btn:hover { color: #e05c5c; }

.comment-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.25rem;
}
.comment-like-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--muted);
  user-select: none;
  transition: color 0.15s;
}
.comment-like-btn:hover { color: #e05c5c; }
.comment-like-btn.liked { color: #e05c5c; }

.reply-toggle-btn {
  background: none; border: none;
  color: var(--muted); font-size: 0.75rem;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer; padding: 0;
  transition: color 0.15s;
}
.reply-toggle-btn:hover { color: var(--accent); }

.reply-form { margin-top: 0.5rem; }
.reply-form-actions { display: flex; gap: 0.5rem; margin-top: 0.4rem; }
.reply-cancel-btn {
  background: none; border: 1px solid var(--border2);
  border-radius: 999px; color: var(--muted);
  font-size: 0.75rem; font-family: 'DM Sans', sans-serif;
  padding: 0.3rem 0.8rem; cursor: pointer;
  transition: all 0.15s;
}
.reply-cancel-btn:hover { border-color: var(--red); color: var(--red); }

.replies-list { margin-top: 0.6rem; padding-left: 0.5rem; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 0.6rem; }

.no-comments { font-size: 0.82rem; color: var(--muted); text-align: center; padding: 1rem 0; }

.see-all-comments-btn {
  display: block;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  padding: 0.5rem 0;
  border-top: 1px solid var(--border);
  margin-top: 0.5rem;
  transition: opacity 0.15s;
}
.see-all-comments-btn:hover { opacity: 0.75; }

/* ── Post detail layout ───────────────────────────────────────────────────── */
.detail-wrap {
  max-width: 720px;
  margin: 2rem auto;
  padding: 0 1.5rem 4rem;
}

.detail-inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.detail-back {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s;
}
.detail-back:hover { color: var(--accent); }

/* Make the card feel more editorial on detail page */
.detail-wrap .post-card {
  border-radius: 16px;
}

.detail-wrap .card-title {
  font-size: 1.6rem;
  line-height: 1.3;
}

.detail-wrap .card-excerpt,
.detail-wrap .card-body p {
  font-size: 0.95rem;
  line-height: 1.75;
}

.detail-wrap .card-thumb-wrap,
.detail-wrap .card-thumb {
  max-height: 480px;
}

/* ── CKEditor rich-content prose styles ─────────────────────────────────── */
.card-body ul li{
  margin-left: 2rem;
}
.card-body ol li{
  margin-left: 2rem;
}


@media (max-width: 600px) {
  .detail-wrap { padding: 0 1rem 3rem; }
  .detail-wrap .card-title { font-size: 1.3rem; }
}
/* Default state — hide spinner, show text */
#auth-spinner {
  display: none;
}
#auth-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* HTMX adds .htmx-request to the indicator's closest form or the indicator itself */
.htmx-request #auth-spinner,
.htmx-request#auth-spinner {
  display: inline;
}

.htmx-request .htmx-hide-on-request {
  display: none;
}
/* The spinner itself */
.auth-spinner-icon {
  display: inline-block;
  animation: spin 0.7s linear infinite;
  margin-right: 0.3rem;
}
.
/* ── Creator banner ───────────────────────────────────────────────────────── */
.creator-banner {
  border-radius: 0;
  border: none;
  overflow: hidden;
  margin-bottom: 1.75rem;
}

.creator-cover {
  position: relative;
  min-height: 380px;
  background: #0e0f11;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.creator-cover-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 1;
}

/* Dark gradient so text is always readable over any image */
.creator-cover-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.15)  0%,
    rgba(0,0,0,0.55)  50%,
    rgba(0,0,0,0.88) 100%
  );
}

/* Centered title + subtitle */
.creator-cover-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.5rem 2rem;
  gap: 0.75rem;
}

.creator-name {
  font-family: 'Lora', serif;
  font-size: 3.25rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 24px rgba(0,0,0,0.7);
}
.creator-bio {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.55;
  max-width: 520px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}

/* CTA — pinned to top-right corner, isolated from background */
.creator-cta {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 3;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 0.35rem;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 0.6rem 0.85rem;
}
.creator-join-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: linear-gradient(135deg, var(--accent), #d4843a);
  color: #0e0f11;
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.6rem 1.35rem;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s;
  box-shadow: 0 2px 12px rgba(232,160,69,0.3);
}
.creator-join-btn:hover { opacity: 0.9; }
.creator-join-btn--discord {
  background: linear-gradient(135deg, #5865f2, #7983f5);
  color: #fff;
  box-shadow: 0 2px 12px rgba(88,101,242,0.4);
}
.creator-join-btn--link1 {
  background: linear-gradient(135deg, #1a1a1a, #171111);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.creator-cta {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.creator-cta-sub {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.55);
  text-align: right;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* Active member badge */
.creator-member-badge {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: rgba(76,175,130,0.15);
  border: 1px solid rgba(76,175,130,0.35);
  border-radius: 999px;
  padding: 0.45rem 1rem 0.45rem 0.7rem;
  backdrop-filter: blur(8px);
}
.creator-member-check { color: var(--green); font-size: 0.9rem; }
.creator-member-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.creator-member-tier { font-size: 0.75rem; color: rgba(255,255,255,0.6); }

/* ── Nav plain link ──────────────────────────────────────────────────────── */
.nav-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.4rem;
}
.footer-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.35rem;
}
.footer-brand {
  display: flex;
  align-items: center;
}

.nav-link-plain {
  color: var(--muted2);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s;
}
.nav-link-plain:hover { color: var(--text); }

/* ── About page ──────────────────────────────────────────────────────────── */
.about-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}
.about-hero {
  text-align: center;
  margin-bottom: 3.5rem;
}
.about-logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin-bottom: 1.25rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.about-hero-badge {
  display: inline-block;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  margin-bottom: 1.2rem;
}
.about-title {
  font-family: 'Lora', serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
  margin-bottom: 1rem;
}
.about-sub {
  color: var(--muted2);
  font-size: 1.05rem;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.75;
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 3.5rem;
}
.about-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
}
.about-card-icon { font-size: 1.6rem; margin-bottom: 0.75rem; }
.about-card h2 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.5rem;
}
.about-card p { color: var(--muted2); font-size: 0.9rem; line-height: 1.7; }
.about-card a { color: var(--accent); text-decoration: none; }
.about-cta-block {
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3rem 2rem;
}
.about-cta-block h2 {
  font-family: 'Lora', serif;
  font-size: 1.6rem;
  color: var(--text);
  margin-bottom: 0.5rem;
}
.about-cta-block p { color: var(--muted2); font-size: 0.95rem; margin-bottom: 1.75rem; }
.about-cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.about-btn-secondary {
  display: inline-block;
  padding: 0.65rem 1.4rem;
  border: 1px solid var(--border2);
  border-radius: 999px;
  color: var(--muted2);
  text-decoration: none;
  font-size: 0.9rem;
  transition: border-color 0.2s, color 0.2s;
}
.about-btn-secondary:hover { border-color: var(--text); color: var(--text); }
@media (max-width: 640px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-title { font-size: 1.7rem; }
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 4rem;
  padding: 2rem;
}
.footer-inner {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-brand {
  font-family: 'Lora', serif;
  font-weight: 700;
  color: var(--accent);
  font-size: 1rem;
}
.footer-links {
  display: flex;
  gap: 1.5rem;
}
.footer-links a {
  color: var(--muted2);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--text); }
.footer-copy {
  color: var(--muted);
  font-size: 0.8rem;
}

/* ── Legal pages ──────────────────────────────────────────────────────────── */
.legal-page {
  padding: 3rem 1.5rem;
}
.legal-container {
  max-width: 760px;
  margin: 0 auto;
}
.legal-container h1 {
  font-family: 'Lora', serif;
  font-size: 2rem;
  color: var(--text);
  margin-bottom: 0.4rem;
}
.legal-updated {
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 2.5rem;
}
.legal-container section {
  margin-bottom: 2rem;
}
.legal-container h2 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 0.6rem;
}
.legal-container p,
.legal-container li {
  color: var(--muted2);
  font-size: 0.95rem;
  line-height: 1.75;
}
.legal-container ul {
  padding-left: 1.4rem;
  margin-top: 0.4rem;
}
.legal-container a {
  color: var(--accent);
  text-decoration: none;
}
.legal-container a:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .legal-container h1 { font-size: 1.5rem; }
}

@media (max-width: 600px) {
  .creator-cover { min-height: 280px; }
  .creator-name { font-size: 2rem; }
  .creator-bio { font-size: 0.9rem; }
  .creator-cta { display: none; }
}