/* ── 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: 58px;
      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); }

    /* ── 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 {
      width: 100%;
      max-height: 380px;
      object-fit: cover;
      display: block;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }

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

    .card-excerpt {
      font-size: 0.9rem;
      color: var(--muted2);
      line-height: 1.65;
      margin-left: -0.25rem;
    }

    /* 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; }
      .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);
      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 {
  max-height: 480px;
}

@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: column;
  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-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); }

@media (max-width: 600px) {
  .creator-cover { min-height: 280px; }
  .creator-name { font-size: 2rem; }
  .creator-bio { font-size: 0.9rem; }
  .creator-cta { top: 1rem; right: 1rem; }
  .creator-join-btn { font-size: 0.8rem; padding: 0.5rem 1rem; }
}