/* SL Journal — style.css  v4.9.5 */

  /* ═══════════════════════════════════════════════════════════════
     THEME SYSTEM — three named themes, swappable from Admin panel
     ───────────────────────────────────────────────────────────────
     Each theme overrides RGB-triple variables on body[data-theme=…]
     Use rgb(var(--xxx-rgb) / 0.3) syntax for alpha, or var(--xxx)
     for the solid color.
     ═══════════════════════════════════════════════════════════════ */
  :root {
    /* ─── ANGEL'S JOURNAL (default) — pink + blue + deep navy ─── */
    --bg-rgb:               9 21 37;
    --bg2-rgb:              13 30 50;
    --bg3-rgb:              18 37 64;
    --primary-rgb:          240 160 192;   /* pink */
    --primary-deep-rgb:     192 80 138;
    --primary-soft-rgb:     232 136 152;
    --secondary-rgb:        136 200 232;   /* blue */
    --secondary-deep-rgb:   91 196 245;
    --secondary-soft-rgb:   178 222 245;
    --text-rgb:             220 238 248;
    --text-dim-rgb:         106 142 168;

    /* ─── Solid-color aliases (for var(--name) usage) ─── */
    --navy:        rgb(var(--bg-rgb));
    --navy2:       rgb(var(--bg2-rgb));
    --navy3:       rgb(var(--bg3-rgb));
    --gold:        rgb(var(--secondary-rgb));
    --gold2:       rgb(var(--secondary-soft-rgb));
    --gold-dim:    rgb(var(--secondary-rgb) / 0.15);
    --pink:        rgb(var(--primary-rgb));
    --pink2:       rgb(var(--primary-soft-rgb));
    --text:        rgb(var(--text-rgb));
    --text-dim:    rgb(var(--text-dim-rgb));
    --blue-accent: rgb(var(--primary-rgb));
    --panel:        rgb(var(--secondary-rgb) / 0.06);
    --panel-border: rgb(var(--secondary-rgb) / 0.14);

    /* ─── Status colors (stay constant across themes) ─── */
    --red:   #e88898;
    --green: #88c5a4;

    --radius: 12px;
  }

  /* ═══════════════ EMBER (Tara's) — deep aubergine + warm copper + muted sage ═══════════════ */
  /* v4.8.2 — reverted to original concept now that the chained-var bug from
     v4.7.0 is fixed. The original aubergine was masked by Angel's frozen pink/blue
     leaking through the alias chain; with v4.7.3's per-theme alias redeclaration,
     these colors finally get a proper showing. */
  body[data-theme="ember"] {
    --bg-rgb:             26 16 24;        /* deep aubergine — like ink-stained leather */
    --bg2-rgb:            36 22 32;
    --bg3-rgb:            46 26 40;        /* panel bg */
    --primary-rgb:        212 146 118;     /* warm copper */
    --primary-deep-rgb:   168 100 76;
    --primary-soft-rgb:   232 179 154;
    --secondary-rgb:      136 184 157;     /* muted sage */
    --secondary-deep-rgb: 96 144 117;
    --secondary-soft-rgb: 168 208 184;
    --text-rgb:           232 220 208;     /* warm cream */
    --text-dim-rgb:       168 144 128;     /* dusty mauve */

    /* v4.7.3 — alias redeclaration so they recompute against THIS theme's RGB triples */
    --navy:        rgb(var(--bg-rgb));
    --navy2:       rgb(var(--bg2-rgb));
    --navy3:       rgb(var(--bg3-rgb));
    --gold:        rgb(var(--secondary-rgb));
    --gold2:       rgb(var(--secondary-soft-rgb));
    --gold-dim:    rgb(var(--secondary-rgb) / 0.15);
    --pink:        rgb(var(--primary-rgb));
    --pink2:       rgb(var(--primary-soft-rgb));
    --text:        rgb(var(--text-rgb));
    --text-dim:    rgb(var(--text-dim-rgb));
    --blue-accent: rgb(var(--primary-rgb));
    --panel:        rgb(var(--secondary-rgb) / 0.06);
    --panel-border: rgb(var(--secondary-rgb) / 0.14);
  }

  /* ═══════════════ KITH & CART — old-world shop: rust, brass, walnut, parchment ═══════════════ */
  body[data-theme="kith"] {
    --bg-rgb:             28 22 18;       /* dark walnut */
    --bg2-rgb:            42 32 26;       /* antique leather */
    --bg3-rgb:            56 42 32;       /* aged tobacco panels */
    --primary-rgb:        196 108 68;     /* burnt sienna / pumpkin-rust */
    --primary-deep-rgb:   150 80 46;     /* deep brick */
    --primary-soft-rgb:   228 156 108;    /* warm terracotta */
    --secondary-rgb:      200 170 108;    /* antique brass / aged gold */
    --secondary-deep-rgb: 168 140 80;
    --secondary-soft-rgb: 232 210 160;    /* parchment cream */
    --text-rgb:           240 224 200;    /* aged paper */
    --text-dim-rgb:       168 140 108;    /* faded ink */

    /* v4.7.3 — alias redeclaration (see Ember block for reasoning) */
    --navy:        rgb(var(--bg-rgb));
    --navy2:       rgb(var(--bg2-rgb));
    --navy3:       rgb(var(--bg3-rgb));
    --gold:        rgb(var(--secondary-rgb));
    --gold2:       rgb(var(--secondary-soft-rgb));
    --gold-dim:    rgb(var(--secondary-rgb) / 0.15);
    --pink:        rgb(var(--primary-rgb));
    --pink2:       rgb(var(--primary-soft-rgb));
    --text:        rgb(var(--text-rgb));
    --text-dim:    rgb(var(--text-dim-rgb));
    --blue-accent: rgb(var(--primary-rgb));
    --panel:        rgb(var(--secondary-rgb) / 0.06);
    --panel-border: rgb(var(--secondary-rgb) / 0.14);
  }


  * { margin:0; padding:0; box-sizing:border-box; }

  body {
    font-family: 'Crimson Pro', Georgia, serif;
    background: var(--navy);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
  }

  /* Background texture */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
      radial-gradient(ellipse 80% 50% at 20% 10%, rgb(var(--secondary-rgb) / 0.09) 0%, transparent 60%),
      radial-gradient(ellipse 60% 40% at 80% 80%, rgb(var(--primary-rgb) / 0.07) 0%, transparent 50%),
      url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.015'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
  }

  .page-wrap {
    max-width: 1100px;
    margin: 30px auto;
    padding: 0 20px 40px;
    position: relative;
    z-index: 1;
  }

  .container {
    border: 1px solid rgb(var(--primary-rgb) / 0.3);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 0 80px rgba(0,0,0,0.7), 0 0 0 1px rgb(var(--primary-rgb) / 0.05) inset;
    position: relative;
  }

  .container::before {
    content: '';
    position: absolute;
    inset: 5px;
    border: 1px solid rgb(var(--primary-rgb) / 0.07);
    border-radius: 14px;
    pointer-events: none;
    z-index: 0;
  }

  .container-inner {
    padding: 28px 28px 36px;
    position: relative;
    z-index: 1;
  }

  /* HEADER */
  header {
    text-align: center;
    margin-bottom: 0;
    padding: 0;
    position: relative;
  }

  /* ── HERO GRAPHIC ── */
  .hero-graphic {
    width: 100%;
    display: block;
    background: linear-gradient(180deg, var(--navy) 0%, #0a1830 100%);
    border-bottom: 1px solid rgb(var(--primary-rgb) / 0.25);
    position: relative;
  }

  .hero-graphic svg { width: 100%; height: auto; display: block; }

  /* HUD corner brackets on hero */
  .corner { position: absolute; width: 20px; height: 20px; z-index: 5; pointer-events: none; }
  .corner-tl { top: 12px; left: 12px; border-top: 2px solid var(--pink); border-left: 2px solid var(--pink); opacity: 0.55; }
  .corner-tr { top: 12px; right: 12px; border-top: 2px solid var(--pink); border-right: 2px solid var(--pink); opacity: 0.55; }
  .corner-bl { bottom: 12px; left: 12px; border-bottom: 2px solid var(--pink); border-left: 2px solid var(--pink); opacity: 0.55; }
  .corner-br { bottom: 12px; right: 12px; border-bottom: 2px solid var(--pink); border-right: 2px solid var(--pink); opacity: 0.55; }

  .header-text-block {
    padding: 22px 20px 20px;
    border-bottom: 1px solid var(--panel-border);
    margin-bottom: 28px;
    position: relative;
  }

  .header-eyebrow {
    font-family: 'Cinzel', serif;
    font-size: 0.62rem;
    letter-spacing: 0.45em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    opacity: 0.75;
  }

  h1 {
    font-family: 'Cinzel', serif;
    font-size: clamp(1.5rem, 4vw, 2.4rem);
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.06em;
    line-height: 1.1;
  }

  h1 .title-prefix { color: var(--pink); }
  h1 .title-suffix { color: var(--gold); }

  .subtitle {
    color: var(--text-dim);
    font-size: 0.9rem;
    margin-top: 8px;
    font-style: italic;
  }

  .session-badge {
    display: inline-block;
    margin-top: 10px;
    padding: 4px 12px;
    background: var(--gold-dim);
    border: 1px solid rgb(var(--primary-rgb) / 0.3);
    border-radius: 20px;
    font-size: 0.7rem;
    color: var(--gold2);
    letter-spacing: 0.05em;
  }

  /* Gold diamond divider */
  .gold-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    opacity: 0.35;
  }
  .gold-divider::before, .gold-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--gold);
  }
  .gold-divider-diamond { color: var(--gold); font-size: 0.55rem; }

  /* NOTIFICATIONS */
  #toast {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
  }

  .toast-msg {
    background: var(--navy3);
    border: 1px solid var(--panel-border);
    border-left: 3px solid var(--pink);
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--text);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    animation: toastIn 0.3s ease forwards;
    pointer-events: auto;
  }

  .toast-msg.success { border-left-color: var(--green); }
  .toast-msg.error { border-left-color: var(--red); }

  @keyframes toastIn {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
  }

  /* ADD FORM PANEL */
  .add-panel {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    padding: 28px;
    margin-bottom: 32px;
    backdrop-filter: blur(8px);
  }

  .panel-title {
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 20px;
    opacity: 0.85;
  }

  .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
  }

  .form-group { display: flex; flex-direction: column; }
  .form-group.full { grid-column: 1 / -1; }

  label {
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    margin-bottom: 6px;
    text-transform: uppercase;
  }

  input[type="text"], input[type="url"] {
    padding: 11px 14px;
    background: rgba(255,255,255,0.04);
    color: var(--text);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    font-family: 'Crimson Pro', serif;
    font-size: 1rem;
    transition: border-color 0.2s, background 0.2s;
  }

  input:focus {
    outline: none;
    border-color: rgb(var(--primary-rgb) / 0.45);
    background: rgba(255,255,255,0.06);
  }

  input::placeholder { color: var(--text-dim); opacity: 0.7; }

  .form-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
  }

  .btn {
    padding: 10px 22px;
    border: none;
    border-radius: 8px;
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
  }

  .btn-gold {
    background: linear-gradient(135deg, var(--gold), var(--gold2));
    color: var(--navy2);
  }
  .btn-gold:hover { filter: brightness(1.1); transform: translateY(-1px); }

  .btn-ghost {
    background: transparent;
    color: var(--text-dim);
    border: 1px solid var(--panel-border);
  }
  .btn-ghost:hover { border-color: var(--pink); color: var(--pink); }

  .btn-danger {
    background: rgba(192,57,43,0.15);
    color: #e74c3c;
    border: 1px solid rgba(192,57,43,0.3);
  }
  .btn-danger:hover { background: rgba(192,57,43,0.25); }

  /* CONTROLS BAR */
  .controls-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
  }
  .controls-row-1 { margin-bottom: 10px; }
  .controls-row-2 { margin-bottom: 10px; flex-wrap: wrap; }
  .btn-controls {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--panel-border);
    color: var(--text-dim);
    border-radius: 8px;
    padding: 6px 13px;
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.18s;
  }
  .btn-controls:hover { border-color: var(--pink); color: var(--pink); background: rgb(var(--primary-rgb) / 0.06); }

  .search-wrap {
    flex: 1;
    min-width: 200px;
    position: relative;
  }

  .search-wrap input {
    width: 100%;
    padding: 11px 14px 11px 40px;
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    font-family: 'Crimson Pro', serif;
    font-size: 1rem;
    transition: border-color 0.2s;
  }

  .search-wrap input:focus { outline: none; border-color: rgb(var(--primary-rgb) / 0.45); }
  .search-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dim);
    font-size: 0.9rem;
    pointer-events: none;
  }

  /* CATEGORY PILLS */
  .category-pills {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    overflow: hidden;
    margin-bottom: 18px;
    align-items: center;
    position: relative;
  }
  .pill-overflow-btn {
    flex-shrink: 0;
    background: rgb(var(--primary-rgb) / 0.08);
    border: 1px solid rgb(var(--primary-rgb) / 0.25);
    color: var(--pink);
    border-radius: 20px;
    padding: 5px 12px;
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
  }
  .pill-overflow-btn:hover { background: rgb(var(--primary-rgb) / 0.15); }

  .pill {
    padding: 6px 16px;
    border-radius: 20px;
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    cursor: pointer;
    border: 1px solid var(--panel-border);
    background: var(--panel);
    color: var(--text-dim);
    transition: all 0.2s;
  }

  .pill:hover { border-color: var(--pink); color: var(--pink); }
  .pill.active {
    background: var(--gold-dim);
    border-color: var(--gold);
    color: var(--gold2);
  }

  /* STATUS BAR */
  .status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-size: 0.85rem;
    color: var(--text-dim);
  }

  .loading-state {
    text-align: center;
    padding: 60px;
    color: var(--text-dim);
    font-style: italic;
  }

  .spinner {
    width: 36px;
    height: 36px;
    border: 2px solid var(--panel-border);
    border-top-color: var(--pink);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 16px;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* GRID */
  .bookmark-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  /* CARDS */
  .bookmark-card {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    position: relative;
    animation: cardIn 0.35s ease both;
  }

  @keyframes cardIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .bookmark-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.5);
    border-color: rgb(var(--primary-rgb) / 0.25);
  }

  .bookmark-card.mine {
    border-color: rgb(var(--primary-rgb) / 0.2);
  }

  .mine-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--gold-dim);
    border: 1px solid rgb(var(--primary-rgb) / 0.4);
    color: var(--gold2);
    font-family: 'Cinzel', serif;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    padding: 2px 8px;
    border-radius: 10px;
    z-index: 2;
  }

  .card-img-wrap[onclick] { cursor: zoom-in !important; }
  .card-img-wrap {
    width: 100%;
    aspect-ratio: 4 / 3;
    position: relative;
    overflow: hidden;
    background: var(--navy3);
  }

  .card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
  }

  .bookmark-card:hover .card-img-wrap img { transform: scale(1.04); }

  .img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--text-dim);
    opacity: 0.4;
  }

  .category-tag {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgb(var(--bg-rgb) / 0.85);
    border: 1px solid var(--panel-border);
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    padding: 3px 9px;
    border-radius: 10px;
    backdrop-filter: blur(4px);
  }

  .card-body { padding: 10px 12px 12px; }

  .card-title {
    font-family: 'Cinzel', serif;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--text);
    margin-bottom: 6px;
    line-height: 1.3;
  }

  .card-url {
    font-size: 0.8rem;
    color: var(--blue-accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.8;
  }

  .card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
  }

  .card-date {
    font-size: 0.72rem;
    color: var(--text-dim);
    font-style: italic;
  }

  .delete-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(192,57,43,0.35);
    background: rgba(192,57,43,0.12);
    color: #e74c3c;
    cursor: pointer;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
  }

  .delete-btn:hover { background: rgba(192,57,43,0.35); transform: scale(1.1); }

  /* EMPTY STATE */
  .empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 20px;
    color: var(--text-dim);
  }
  .empty-icon { font-size: 3.5rem; margin-bottom: 16px; opacity: 0.4; }
  .empty-state h3 { font-family: 'Cinzel', serif; font-size: 1rem; margin-bottom: 8px; letter-spacing: 0.1em; }
  .empty-state p { font-style: italic; font-size: 0.9rem; }

  /* BACKUP / RESTORE */
  .data-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    padding-top: 18px;
    border-top: 1px solid var(--panel-border);
    flex-wrap: wrap;
  }

  .setup-banner {
    background: rgb(var(--primary-rgb) / 0.12);
    border: 1px solid rgb(var(--primary-rgb) / 0.4);
    border-radius: var(--radius);
    padding: 20px 24px;
    margin-bottom: 28px;
    font-size: 0.95rem;
    line-height: 1.7;
  }
  .setup-banner strong {
    font-family: 'Cinzel', serif;
    color: var(--gold2);
    display: block;
    margin-bottom: 8px;
    letter-spacing: 0.05em;
  }
  .setup-banner code {
    background: rgba(0,0,0,0.3);
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--gold2);
  }
  .setup-banner a { color: var(--gold2); }


  @media (max-width: 900px) {
    .bookmark-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  }
  @media (max-width: 600px) {
    .form-grid { grid-template-columns: 1fr; }
    .bookmark-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .card-img-wrap { aspect-ratio: 1 / 1; }
    h1 { font-size: 1.6rem; }
    .page-wrap { margin: 10px auto; padding: 0 10px 30px; }
  }

  /* ─── LOGIN OVERLAY ─────────────────────────────────────────────────────── */
  .login-overlay {
    position: fixed; inset: 0; z-index: 9000;
    background: rgb(var(--bg-rgb) / 0.97);
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(8px);
  }

  .login-box {
    width: 100%; max-width: 400px;
    background: var(--navy2);
    border: 1px solid rgb(var(--primary-rgb) / 0.35);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 0 80px rgba(0,0,0,0.8), 0 0 0 1px rgb(var(--primary-rgb) / 0.05) inset;
    animation: cardIn 0.4s ease both;
    margin: 20px;
  }

  .login-hero {
    background: linear-gradient(180deg, var(--navy) 0%, #0a1830 100%);
    border-bottom: 1px solid rgb(var(--primary-rgb) / 0.2);
    padding: 32px 20px 24px;
    text-align: center;
    position: relative;
  }

  .login-hero-icon {
    font-size: 2.8rem;
    margin-bottom: 10px;
    filter: drop-shadow(0 0 12px rgb(var(--primary-rgb) / 0.4));
  }

  .login-eyebrow {
    font-family: 'Cinzel', serif;
    font-size: 0.6rem;
    letter-spacing: 0.45em;
    color: var(--gold);
    opacity: 0.7;
    margin-bottom: 6px;
  }

  .login-title {
    font-family: 'Cinzel', serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.05em;
  }

  .login-title .title-prefix { color: var(--pink); }
  .login-title .title-suffix { color: var(--gold); }

  .login-body { padding: 28px 28px 32px; }

  .login-body label {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    color: var(--text-dim);
    text-transform: uppercase;
    margin-bottom: 6px;
    display: block;
  }

  .login-body input {
    width: 100%;
    padding: 11px 14px;
    background: rgba(255,255,255,0.04);
    color: var(--text);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    font-family: 'Crimson Pro', serif;
    font-size: 1rem;
    margin-bottom: 16px;
    transition: border-color 0.2s;
  }

  .login-body input:focus {
    outline: none;
    border-color: rgb(var(--primary-rgb) / 0.45);
    background: rgba(255,255,255,0.06);
  }

  .login-error {
    color: #e74c3c;
    font-size: 0.85rem;
    margin-bottom: 12px;
    min-height: 20px;
    font-style: italic;
  }

  .btn-login {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, var(--gold), var(--gold2));
    color: var(--navy);
    border: none;
    border-radius: 8px;
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    cursor: pointer;
    transition: all 0.2s;
  }

  .btn-login:hover { filter: brightness(1.1); transform: translateY(-1px); }
  .btn-login:disabled { opacity: 0.6; cursor: default; transform: none; }

  /* ─── SETTINGS PANEL ─────────────────────────────────────────── */
  .settings-section-label {
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    color: var(--pink);
    text-transform: uppercase;
    margin: 4px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgb(var(--primary-rgb) / 0.2);
  }
  /* ─── COLLAPSIBLE ADMIN SECTIONS ─────────────────────────────── */
  .admin-section { margin-bottom: 4px; }
  .admin-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    padding: 9px 12px;
    border-radius: 8px;
    background: rgb(var(--primary-rgb) / 0.05);
    border: 1px solid rgb(var(--primary-rgb) / 0.15);
    transition: background 0.18s, border-color 0.18s;
    margin-bottom: 0;
  }
  .admin-section-header:hover { background: rgb(var(--primary-rgb) / 0.1); border-color: rgb(var(--primary-rgb) / 0.28); }
  .admin-section-header .asc-title {
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    color: var(--pink);
    text-transform: uppercase;
  }
  .admin-section-header .asc-chevron {
    color: var(--pink);
    font-size: 0.7rem;
    transition: transform 0.2s;
    opacity: 0.7;
  }
  .admin-section-header.collapsed .asc-chevron { transform: rotate(-90deg); }
  .admin-section-body { padding: 14px 2px 6px; }
  .admin-section-body.collapsed { display: none; }
  /* ─── USER LIST PAGINATION ────────────────────────────────────── */
  .user-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--panel-border);
    font-size: 0.78rem;
    color: var(--text-dim);
  }
  .user-pager-btns { display: flex; gap: 6px; }
  .user-pager-btn {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--panel-border);
    color: var(--text-dim);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.05em;
  }
  .user-pager-btn:hover:not(:disabled) { border-color: var(--pink); color: var(--pink); }
  .user-pager-btn:disabled { opacity: 0.3; cursor: default; }

  /* ─── FAQ MODAL ───────────────────────────────────────────────── */
  .faq-item {
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    margin-bottom: 8px;
    overflow: hidden;
  }
  .faq-question {
    padding: 12px 16px;
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    color: var(--gold2);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgb(var(--secondary-rgb) / 0.05);
    user-select: none;
    transition: background 0.15s;
    gap: 10px;
  }
  .faq-question:hover { background: rgb(var(--secondary-rgb) / 0.1); }
  .faq-question .faq-chevron { font-size: 0.65rem; color: var(--text-dim); transition: transform 0.22s; flex-shrink:0; }
  .faq-question.open .faq-chevron { transform: rotate(90deg); }
  .faq-answer {
    display: none;
    padding: 12px 16px 14px;
    font-size: 0.9rem;
    color: var(--text-dim);
    line-height: 1.65;
    border-top: 1px solid var(--panel-border);
    background: rgba(0,0,0,0.15);
  }
  .faq-answer.open { display: block; }
  .faq-add-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    background: rgb(var(--primary-rgb) / 0.04);
    border: 1px solid rgb(var(--primary-rgb) / 0.18);
    border-radius: 10px;
    margin-top: 4px;
  }
  .faq-add-form input,
  .faq-add-form textarea {
    width: 100%;
    font-family: 'Crimson Pro', serif;
    font-size: 0.92rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--panel-border);
    color: var(--text);
    border-radius: 7px;
    padding: 8px 11px;
    transition: border-color 0.15s;
  }
  .faq-add-form input:focus,
  .faq-add-form textarea:focus { outline: none; border-color: rgb(var(--primary-rgb) / 0.4); }
  .faq-add-form textarea { min-height: 80px; resize: vertical; }
  .btn-faq-remove {
    background: rgb(var(--primary-soft-rgb) / 0.08);
    border: 1px solid rgb(var(--primary-soft-rgb) / 0.25);
    color: var(--red);
    border-radius: 6px;
    padding: 3px 9px;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.15s;
  }
  .btn-faq-remove:hover { background: rgb(var(--primary-soft-rgb) / 0.2); }

  /* ─── GUIDE MODAL  v4.6.3 ─────────────────────────────────────── */
  .guide-intro {
    font-size: 0.88rem;
    color: var(--text-dim);
    line-height: 1.65;
    padding: 4px 2px 14px;
    border-bottom: 1px solid var(--panel-border);
    margin-bottom: 14px;
  }
  .guide-intro strong { color: var(--gold2); font-family: 'Cinzel', serif; letter-spacing: 0.04em; }
  .guide-intro em     { color: var(--pink); font-style: normal; }
  .guide-search-wrap {
    position: relative;
    margin-bottom: 16px;
  }
  .guide-search {
    width: 100%;
    font-family: 'Crimson Pro', serif;
    font-size: 0.92rem;
    padding: 10px 36px 10px 14px;
    background: rgba(0,0,0,0.18);
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    color: var(--text);
    transition: border-color 0.18s, background 0.18s;
  }
  .guide-search:focus {
    outline: none;
    border-color: rgb(var(--primary-rgb) / 0.5);
    background: rgba(0,0,0,0.25);
  }
  .guide-search::placeholder { color: var(--text-dim); font-style: italic; }
  .guide-search-clear {
    position: absolute;
    right: 8px; top: 50%; transform: translateY(-50%);
    background: transparent; border: none;
    color: var(--text-dim); font-size: 0.85rem;
    width: 26px; height: 26px; border-radius: 50%;
    cursor: pointer; transition: all 0.15s;
    display: flex; align-items: center; justify-content: center;
  }
  .guide-search-clear:hover { background: rgb(var(--primary-rgb) / 0.12); color: var(--pink); }
  .guide-section {
    margin-bottom: 22px;
  }
  .guide-section-header {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgb(var(--primary-rgb) / 0.08), rgb(var(--secondary-rgb) / 0.06));
    border-left: 3px solid var(--pink);
    border-radius: 6px;
    margin-bottom: 10px;
    cursor: pointer;
    user-select: none;
    transition: background 0.18s, border-color 0.18s;
  }
  .guide-section-header:hover {
    background: linear-gradient(135deg, rgb(var(--primary-rgb) / 0.16), rgb(var(--secondary-rgb) / 0.12));
    border-left-color: var(--gold);
  }
  .guide-section-icon {
    font-size: 1.05rem;
    flex-shrink: 0;
  }
  .guide-section-title {
    font-family: 'Cinzel', serif;
    font-size: 0.84rem;
    letter-spacing: 0.12em;
    color: var(--gold2);
    text-transform: uppercase;
  }
  .guide-section-count {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--text-dim);
    font-family: 'Cinzel', serif;
    letter-spacing: 0.08em;
  }
  .guide-section-chevron {
    font-size: 0.7rem;
    color: var(--text-dim);
    transition: transform 0.22s ease;
    flex-shrink: 0;
    margin-left: 4px;
  }
  /* Collapsed state — hide the feature list, rotate chevron */
  .guide-section.collapsed .guide-feature       { display: none; }
  .guide-section.collapsed .guide-section-chevron { transform: rotate(-90deg); }
  .guide-section.collapsed .guide-section-header { margin-bottom: 0; }

  /* ─── GUIDE TOOLBAR  v4.6.4 ──────────────────────────────────── */
  .guide-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    padding: 8px 4px 0;
    flex-wrap: wrap;
  }
  .guide-toolbar-stats {
    font-size: 0.74rem;
    color: var(--text-dim);
    font-family: 'Cinzel', serif;
    letter-spacing: 0.08em;
  }
  .guide-toolbar-actions {
    display: flex;
    gap: 6px;
  }
  .guide-toolbar-btn {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--panel-border);
    color: var(--text-dim);
    border-radius: 7px;
    padding: 5px 11px;
    font-family: 'Cinzel', serif;
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.15s;
    text-transform: uppercase;
  }
  .guide-toolbar-btn:hover {
    border-color: var(--pink);
    color: var(--pink);
    background: rgb(var(--primary-rgb) / 0.08);
  }
  .guide-feature {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 10px;
    padding: 10px 12px 12px;
    border: 1px solid var(--panel-border);
    border-radius: 9px;
    margin-bottom: 7px;
    background: rgba(255,255,255,0.015);
    transition: border-color 0.18s, background 0.18s, transform 0.18s;
  }
  .guide-feature:hover {
    border-color: rgb(var(--primary-rgb) / 0.3);
    background: rgb(var(--primary-rgb) / 0.04);
    transform: translateX(2px);
  }
  .guide-feature-icon {
    font-size: 1rem;
    line-height: 1.4;
    text-align: center;
  }
  .guide-feature-body { min-width: 0; }
  .guide-feature-title {
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: var(--text);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .guide-feature-desc {
    font-size: 0.85rem;
    color: var(--text-dim);
    line-height: 1.55;
  }
  .guide-feature-hint {
    font-size: 0.78rem;
    color: var(--text-dim);
    line-height: 1.5;
    margin-top: 5px;
    padding: 6px 10px;
    background: rgb(var(--secondary-rgb) / 0.05);
    border-left: 2px solid rgb(var(--secondary-rgb) / 0.3);
    border-radius: 0 5px 5px 0;
    font-style: italic;
  }
  .guide-badge {
    display: inline-block;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    padding: 1px 8px;
    border-radius: 999px;
    font-family: 'Cinzel', serif;
    text-transform: uppercase;
  }
  .guide-badge-mod {
    background: rgba(244,205,144,0.12);
    border: 1px solid rgba(244,205,144,0.35);
    color: var(--gold2);
  }
  .guide-badge-new {
    background: linear-gradient(135deg, rgb(var(--primary-rgb) / 0.32), rgb(var(--secondary-rgb) / 0.22));
    border: 1px solid rgb(var(--primary-rgb) / 0.7);
    color: var(--pink2);
    font-weight: 600;
    font-size: 0.62rem;
    padding: 2px 9px;
    box-shadow: 0 0 12px rgb(var(--primary-rgb) / 0.35);
    animation: guide-new-pulse 2.6s ease-in-out infinite;
  }
  @keyframes guide-new-pulse {
    0%, 100% { box-shadow: 0 0 12px rgb(var(--primary-rgb) / 0.35); }
    50%      { box-shadow: 0 0 22px rgb(var(--primary-rgb) / 0.6); }
  }

  /* v4.8.1 — Count indicator on Guide button (set via JS) */
  .guide-btn-newcount {
    display: inline-block;
    margin-left: 6px;
    background: linear-gradient(135deg, rgb(var(--primary-rgb)), rgb(var(--primary-soft-rgb)));
    color: var(--navy);
    font-family: 'Cinzel', serif;
    font-size: 0.6rem; font-weight: 700;
    padding: 1px 7px; border-radius: 999px;
    box-shadow: 0 0 10px rgb(var(--primary-rgb) / 0.55);
    animation: guide-new-pulse 2.6s ease-in-out infinite;
    vertical-align: middle;
  }
  .guide-empty {
    text-align: center;
    padding: 30px 14px;
    color: var(--text-dim);
    font-style: italic;
    font-size: 0.9rem;
  }
  .guide-footer {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--panel-border);
    text-align: center;
    font-size: 0.82rem;
    color: var(--text-dim);
  }
  .guide-footer a {
    color: var(--pink);
    text-decoration: none;
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
  }
  .guide-footer a:hover { text-decoration: underline; }

  /* Highlight matches when searching */
  .guide-feature mark {
    background: rgba(244,205,144,0.3);
    color: var(--gold2);
    padding: 0 2px;
    border-radius: 3px;
  }

  /* ─── USER FILTER MODAL ───────────────────────────────────────── */
  .user-posts-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 12px; border-radius: 9px; cursor: pointer;
    border: 1px solid transparent; transition: all 0.15s; margin-bottom: 5px;
  }
  .user-posts-row:hover { background: rgb(var(--secondary-rgb) / 0.07); border-color: var(--panel-border); }
  .user-posts-row.active-filter { background: rgb(var(--primary-rgb) / 0.08); border-color: rgb(var(--primary-rgb) / 0.3); }
  .user-posts-count { font-size: 0.72rem; color: var(--text-dim); white-space: nowrap; }
  .user-filter-search {
    width: 100%; font-family: inherit; font-size: 0.88rem;
    background: rgba(255,255,255,0.04); border: 1px solid var(--panel-border);
    color: var(--text); border-radius: 8px; padding: 8px 12px;
    margin-bottom: 12px;
  }
  .btn-clear-user-filter {
    background: rgb(var(--secondary-rgb) / 0.08); border: 1px solid rgb(var(--secondary-rgb) / 0.25);
    color: var(--gold2); border-radius: 8px; padding: 6px 14px;
    font-family: 'Cinzel', serif; font-size: 0.7rem; letter-spacing: 0.08em;
    cursor: pointer; transition: all 0.15s; width: 100%; margin-top: 4px;
  }
  .btn-clear-user-filter:hover { border-color: var(--gold); color: var(--gold); }



  /* ─── SITE FOOTER ─────────────────────────────────────────────── */
  .site-footer {
    margin-top: 40px;
    padding: 28px 40px;
    border-top: 1px solid rgb(var(--primary-rgb) / 0.15);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
  }
  .footer-copyright {
    text-align: left;
    font-size: 0.75rem;
    color: var(--text-dim);
    line-height: 1.7;
    flex: 1;
    min-width: 260px;
  }
  .footer-copyright strong { color: var(--text); font-weight: 600; }
  .footer-links {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex-direction: column;
    text-align: right;
  }
  .btn-footer {
    background: transparent;
    border: 1px solid rgb(var(--primary-rgb) / 0.2);
    color: var(--text-dim);
    border-radius: 8px;
    padding: 5px 14px;
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.18s;
    text-transform: uppercase;
  }
  .btn-footer:hover { border-color: var(--pink); color: var(--pink); }
  /* ─── CHANGELOG MODAL ─────────────────────────────────────────── */
  .changelog-intro {
    font-size: 0.82rem;
    color: var(--text-dim);
    line-height: 1.6;
    padding: 4px 2px 14px;
    border-bottom: 1px solid var(--panel-border);
    margin-bottom: 8px;
    font-style: italic;
  }
  .changelog-entry {
    padding: 14px 0;
    border-bottom: 1px solid var(--panel-border);
  }
  .changelog-entry:last-child { border-bottom: none; }
  .changelog-entry-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
  }
  .changelog-entry-version {
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    color: var(--gold2);
  }
  .changelog-entry-date {
    font-size: 0.72rem;
    color: var(--text-dim);
    white-space: nowrap;
  }
  .changelog-entry-body {
    font-size: 0.88rem;
    color: var(--text-dim);
    line-height: 1.65;
    white-space: pre-wrap;
  }
  .changelog-add-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    background: rgb(var(--secondary-rgb) / 0.04);
    border: 1px solid rgb(var(--secondary-rgb) / 0.15);
    border-radius: 10px;
    margin-top: 4px;
  }
  .changelog-add-form input,
  .changelog-add-form textarea {
    width: 100%;
    font-family: 'Crimson Pro', serif;
    font-size: 0.92rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--panel-border);
    color: var(--text);
    border-radius: 7px;
    padding: 8px 11px;
    transition: border-color 0.15s;
  }
  .changelog-add-form input:focus,
  .changelog-add-form textarea:focus { outline: none; border-color: rgb(var(--secondary-rgb) / 0.4); }
  .changelog-add-form textarea { min-height: 100px; resize: vertical; }


  /* ─── ACTIVITY FEED MODAL ─────────────────────────────────────── */
  .activity-feed { display: flex; flex-direction: column; gap: 0; }
  .activity-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
    cursor: pointer; transition: background 0.15s; border-radius: 6px;
    padding-left: 6px; padding-right: 6px;
  }
  .activity-item:hover { background: rgb(var(--secondary-rgb) / 0.05); }
  .activity-item:last-child { border-bottom: none; }
  .activity-avatar {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg,rgb(var(--secondary-rgb) / 0.2),rgb(var(--primary-rgb) / 0.2));
    border: 1px solid rgb(var(--primary-rgb) / 0.25);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Cinzel', serif; color: var(--pink2); font-size: 0.75rem;
    overflow: hidden;
  }
  .activity-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .activity-icon {
    font-size: 0.85rem; margin-top: 2px;
  }
  .activity-body { flex: 1; min-width: 0; }
  .activity-line {
    font-size: 0.88rem; color: var(--text); line-height: 1.4;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .activity-line strong { color: var(--gold2); }
  .activity-line .activity-target { color: var(--pink); }
  .activity-time { font-size: 0.7rem; color: var(--text-dim); margin-top: 3px; }
  .activity-preview {
    font-size: 0.78rem; color: var(--text-dim); margin-top: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-style: italic;
  }
  .activity-type-post    { border-left: 3px solid rgb(var(--secondary-rgb) / 0.4); }
  .activity-type-like    { border-left: 3px solid rgb(var(--primary-rgb) / 0.4); }
  .activity-type-comment { border-left: 3px solid rgba(200,180,100,0.4); }
  .activity-filters {
    display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px;
  }
  .activity-filter-btn {
    font-family: 'Cinzel', serif; font-size: 0.65rem; letter-spacing: 0.08em;
    padding: 4px 12px; border-radius: 20px; cursor: pointer;
    border: 1px solid var(--panel-border); background: transparent;
    color: var(--text-dim); transition: all 0.15s; text-transform: uppercase;
  }
  .activity-filter-btn.active { border-color: var(--pink); color: var(--pink); background: rgb(var(--primary-rgb) / 0.08); }
  .activity-empty {
    text-align: center; padding: 30px 0; color: var(--text-dim);
    font-style: italic; font-size: 0.88rem;
  }
  /* ─── STATS MODAL ─────────────────────────────────────────────── */
  .stats-table { width: 100%; border-collapse: collapse; }
  .stats-table th {
    font-family: 'Cinzel', serif; font-size: 0.62rem; letter-spacing: 0.12em;
    color: var(--pink); text-transform: uppercase; text-align: left;
    padding: 6px 10px; border-bottom: 1px solid rgb(var(--primary-rgb) / 0.2);
  }
  .stats-table th:not(:first-child) { text-align: right; }
  .stats-table td {
    padding: 10px 10px; border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 0.88rem; color: var(--text-dim); vertical-align: middle;
  }
  .stats-table td:not(:first-child) { text-align: right; }
  .stats-user-btn {
    background: none; border: none; cursor: pointer;
    font-family: 'Crimson Pro', serif; font-size: 0.92rem; color: var(--text);
    display: flex; align-items: center; gap: 8px; padding: 0;
    transition: color 0.15s; text-align: left;
  }
  .stats-user-btn:hover { color: var(--pink); }
  .stats-avatar-sm {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg,rgb(var(--secondary-rgb) / 0.25),rgb(var(--primary-rgb) / 0.25));
    border: 1px solid rgb(var(--primary-rgb) / 0.3);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Cinzel', serif; color: var(--pink2); font-size: 0.72rem;
    overflow: hidden;
  }
  .stats-avatar-sm img { width: 100%; height: 100%; object-fit: cover; }

  /* ─── VIEW USER MODAL ─────────────────────────────────────────── */
  .view-user-header {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 16px; padding-bottom: 14px;
    border-bottom: 1px solid var(--panel-border);
  }
  .view-user-avatar {
    width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg,rgb(var(--secondary-rgb) / 0.25),rgb(var(--primary-rgb) / 0.25));
    border: 1px solid rgb(var(--primary-rgb) / 0.3);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Cinzel', serif; color: var(--pink2); font-size: 1.2rem;
    overflow: hidden;
  }
  .view-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .view-user-bio {
    font-size: 0.85rem; color: var(--text-dim);
    font-style: italic; margin-top: 4px; line-height: 1.5;
  }
  .view-user-stats {
    display: flex; gap: 18px; margin-bottom: 16px; flex-wrap: wrap;
  }
  .view-user-stat { text-align: center; }
  .view-user-stat .stat-num { font-size: 1.3rem; font-family: 'Cinzel', serif; color: var(--gold2); }
  .view-user-stat .stat-label { font-size: 0.65rem; color: var(--text-dim); letter-spacing: 0.08em; text-transform: uppercase; }
  .view-user-posts { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
  .view-post-row {
    display: flex; align-items: center; gap: 8px; padding: 7px 10px;
    border-radius: 8px; cursor: pointer; transition: background 0.15s;
    border: 1px solid transparent;
  }
  .view-post-row:hover { background: rgb(var(--secondary-rgb) / 0.05); border-color: var(--panel-border); }
  .mod-actions-panel {
    margin-top: 16px; padding: 14px;
    background: rgb(var(--primary-rgb) / 0.04);
    border: 1px solid rgb(var(--primary-rgb) / 0.15);
    border-radius: 10px;
  }
  .mod-actions-label {
    font-family: 'Cinzel', serif; font-size: 0.65rem; letter-spacing: 0.12em;
    color: var(--pink); text-transform: uppercase; margin-bottom: 10px;
  }
  .mod-actions-row { display: flex; gap: 8px; flex-wrap: wrap; }
  .btn-cleanup-r2 {
    background: rgb(var(--secondary-rgb) / 0.08); border: 1px solid rgb(var(--secondary-rgb) / 0.25);
    color: var(--gold2); border-radius: 6px; padding: 6px 12px;
    font-size: 0.75rem; cursor: pointer; transition: all 0.15s;
    font-family: 'Cinzel', serif; letter-spacing: 0.05em; white-space: nowrap;
  }
  .btn-cleanup-r2:hover { background: rgb(var(--secondary-rgb) / 0.18); border-color: var(--gold2); }


  /* ─── NSFW BLUR SYSTEM ────────────────────────────────────────── */
  .nsfw-wrap { position: relative; }
  .nsfw-blur { filter: blur(18px); pointer-events: none; user-select: none; }
  .nsfw-overlay {
    position: absolute; inset: 0; z-index: 5;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 6px;
    background: rgb(var(--bg-rgb) / 0.45);
    cursor: pointer;
  }
  .nsfw-label {
    font-family: 'Cinzel', serif; font-size: 0.65rem; letter-spacing: 0.14em;
    color: rgb(var(--primary-rgb) / 0.9); text-transform: uppercase;
    background: rgb(var(--bg-rgb) / 0.75); padding: 3px 10px; border-radius: 10px;
    border: 1px solid rgb(var(--primary-rgb) / 0.25);
  }
  .nsfw-reveal-btn {
    font-family: 'Cinzel', serif; font-size: 0.6rem; letter-spacing: 0.1em;
    background: rgb(var(--primary-rgb) / 0.15); border: 1px solid rgb(var(--primary-rgb) / 0.4);
    color: var(--pink); border-radius: 8px; padding: 4px 12px;
    cursor: pointer; text-transform: uppercase; transition: all 0.15s;
  }
  .nsfw-reveal-btn:hover { background: rgb(var(--primary-rgb) / 0.28); }
  .nsfw-badge {
    position: absolute; top: 8px; left: 8px; z-index: 3;
    background: rgba(232,100,100,0.85);
    color: #fff; font-family: 'Cinzel', serif;
    font-size: 0.55rem; letter-spacing: 0.1em;
    padding: 2px 7px; border-radius: 8px;
    pointer-events: none; text-transform: uppercase;
  }
  /* Profile toggle */
  .nsfw-profile-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; border-radius: 8px;
    background: rgba(232,100,100,0.06);
    border: 1px solid rgba(232,100,100,0.18);
    margin-bottom: 10px;
  }
  .nsfw-toggle-label {
    font-size: 0.85rem; color: var(--text-dim);
    display: flex; align-items: center; gap: 8px;
  }
  .nsfw-toggle {
    width: 38px; height: 20px; appearance: none; background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2); border-radius: 10px; cursor: pointer;
    position: relative; transition: background 0.2s; flex-shrink: 0;
  }
  .nsfw-toggle::after {
    content: ''; position: absolute; width: 14px; height: 14px;
    background: #fff; border-radius: 50%; top: 2px; left: 2px;
    transition: left 0.2s;
  }
  .nsfw-toggle:checked { background: rgba(232,100,100,0.6); border-color: rgba(232,100,100,0.5); }
  .nsfw-toggle:checked::after { left: 20px; }
  /* ─── SERIES / COLLECTIONS ────────────────────────────────────── */
  .series-badge {
    position: absolute; bottom: 8px; left: 8px;
    background: rgb(var(--bg-rgb) / 0.88);
    border: 1px solid rgb(var(--secondary-rgb) / 0.45);
    color: var(--gold2);
    font-family: 'Cinzel', serif;
    font-size: 0.58rem;
    letter-spacing: 0.09em;
    padding: 2px 8px;
    border-radius: 10px;
    z-index: 2;
    backdrop-filter: blur(4px);
    pointer-events: none;
    white-space: nowrap;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .series-chip {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgb(var(--secondary-rgb) / 0.08);
    border: 1px solid rgb(var(--secondary-rgb) / 0.25);
    color: var(--gold2);
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 0.72rem;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .series-chip:hover { border-color: var(--gold2); background: rgb(var(--secondary-rgb) / 0.14); }
  .series-filter-active .series-chip { border-color: var(--gold); background: rgba(232,200,100,0.12); color: var(--gold); }
  .series-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; border-radius: 8px;
    border: 1px solid var(--panel-border);
    margin-bottom: 6px; gap: 10px;
    background: rgba(255,255,255,0.02);
  }
  .series-item-info { flex: 1; min-width: 0; }
  .series-item-name { font-size: 0.88rem; color: var(--gold2); font-family: 'Cinzel', serif; font-size: 0.75rem; }
  .series-item-count { font-size: 0.7rem; color: var(--text-dim); margin-top: 2px; }
  .series-posts-list { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
  .series-post-row {
    display: flex; align-items: center; gap: 8px; padding: 6px 10px;
    border-radius: 7px; background: rgba(255,255,255,0.02);
    border: 1px solid var(--panel-border); cursor: grab;
    font-size: 0.82rem; color: var(--text-dim);
  }
  .series-post-order {
    font-family: 'Cinzel', serif; font-size: 0.7rem;
    color: var(--gold2); min-width: 20px; text-align: center;
  }
  .series-add-form {
    display: flex; flex-direction: column; gap: 8px;
    padding: 12px; background: rgb(var(--secondary-rgb) / 0.04);
    border: 1px solid rgb(var(--secondary-rgb) / 0.15); border-radius: 10px; margin-top: 4px;
  }
  .series-add-form input { width: 100%; font-family: 'Crimson Pro', serif; font-size: 0.92rem;
    background: rgba(255,255,255,0.04); border: 1px solid var(--panel-border);
    color: var(--text); border-radius: 7px; padding: 8px 11px; }
  .series-add-form input:focus { outline: none; border-color: rgb(var(--secondary-rgb) / 0.4); }
  /* ─── PENDING ACCOUNTS ───────────────────────────────────────── */
  .pending-badge {
    font-size: 0.65rem; padding: 2px 7px; border-radius: 4px;
    background: rgb(var(--secondary-rgb) / 0.15); border: 1px solid rgb(var(--secondary-rgb) / 0.35);
    color: var(--gold2); font-family: 'Cinzel', serif; letter-spacing: 0.06em;
    margin-left: 4px;
  }
  .btn-approve {
    background: rgba(136,197,164,0.12); border: 1px solid rgba(136,197,164,0.35);
    color: var(--green); border-radius: 6px; padding: 4px 9px;
    font-size: 0.72rem; cursor: pointer; transition: all 0.15s;
    font-family: 'Cinzel', serif; letter-spacing: 0.04em; white-space: nowrap;
  }
  .btn-approve:hover { background: rgba(136,197,164,0.28); border-color: var(--green); }
  .btn-reject {
    background: rgb(var(--primary-soft-rgb) / 0.1); border: 1px solid rgb(var(--primary-soft-rgb) / 0.28);
    color: var(--red); border-radius: 6px; padding: 4px 9px;
    font-size: 0.72rem; cursor: pointer; transition: all 0.15s;
    font-family: 'Cinzel', serif; letter-spacing: 0.04em; white-space: nowrap;
  }
  .btn-reject:hover { background: rgb(var(--primary-soft-rgb) / 0.22); }
  /* Registration panel on login screen */
  .register-panel {
    margin-top: 16px; padding-top: 16px;
    border-top: 1px solid rgb(var(--primary-rgb) / 0.15);
  }
  .register-panel .register-title {
    font-family: 'Cinzel', serif; font-size: 0.72rem; letter-spacing: 0.12em;
    color: var(--pink); text-transform: uppercase; margin-bottom: 14px;
    text-align: center;
  }
  .btn-register-toggle {
    width: 100%; background: transparent;
    border: 1px solid rgb(var(--primary-rgb) / 0.25); color: var(--text-dim);
    border-radius: 8px; padding: 10px; font-family: 'Cinzel', serif;
    font-size: 0.7rem; letter-spacing: 0.1em; cursor: pointer;
    transition: all 0.18s; margin-top: 10px;
  }
  .btn-register-toggle:hover { border-color: var(--pink); color: var(--pink); }
  .pending-section {
    margin-top: 16px; padding: 12px;
    background: rgb(var(--secondary-rgb) / 0.04);
    border: 1px solid rgb(var(--secondary-rgb) / 0.15);
    border-radius: 10px;
  }
  .pending-section-label {
    font-family: 'Cinzel', serif; font-size: 0.68rem; letter-spacing: 0.1em;
    color: var(--gold2); text-transform: uppercase; margin-bottom: 10px;
    display: flex; align-items: center; justify-content: space-between;
  }
  .pending-count-badge {
    background: rgb(var(--primary-rgb) / 0.2); color: var(--pink);
    border-radius: 10px; padding: 1px 8px; font-size: 0.65rem;
  }
  /* ─── SUSPEND / USER STATUS ──────────────────────────────────── */
  .suspended-badge {
    font-size: 0.65rem; padding: 2px 7px; border-radius: 4px;
    background: rgba(232,180,40,0.18); border: 1px solid rgba(232,180,40,0.4);
    color: #e8b428; font-family: 'Cinzel', serif; letter-spacing: 0.06em;
    margin-left: 4px;
  }
  .user-row.suspended-row { opacity: 0.65; }
  .btn-suspend {
    background: rgba(232,180,40,0.1); border: 1px solid rgba(232,180,40,0.35);
    color: #e8b428; border-radius: 6px; padding: 4px 9px;
    font-size: 0.72rem; cursor: pointer; transition: all 0.15s;
    font-family: 'Cinzel', serif; letter-spacing: 0.04em; white-space: nowrap;
  }
  .btn-suspend:hover { background: rgba(232,180,40,0.25); border-color: #e8b428; }
  .btn-unsuspend {
    background: rgba(39,174,96,0.1); border: 1px solid rgba(39,174,96,0.35);
    color: #27ae60; border-radius: 6px; padding: 4px 9px;
    font-size: 0.72rem; cursor: pointer; transition: all 0.15s;
    font-family: 'Cinzel', serif; letter-spacing: 0.04em; white-space: nowrap;
  }
  .btn-unsuspend:hover { background: rgba(39,174,96,0.25); border-color: #27ae60; }
  .btn-del-content {
    background: rgba(192,57,43,0.1); border: 1px solid rgba(192,57,43,0.3);
    color: #e74c3c; border-radius: 6px; padding: 4px 9px;
    font-size: 0.72rem; cursor: pointer; transition: all 0.15s;
    font-family: 'Cinzel', serif; letter-spacing: 0.04em; white-space: nowrap;
  }
  .btn-del-content:hover { background: rgba(192,57,43,0.25); border-color: #e74c3c; }

  /* ═══════════════════════════════════════════════════════════════════
     v4.9.0 — On This Day banner · Follow button · Following filter
  ═══════════════════════════════════════════════════════════════════ */
  .otd-banner {
    margin: 14px 20px 10px; padding: 0;
    background: linear-gradient(135deg, rgb(var(--primary-rgb) / 0.14), rgb(var(--secondary-rgb) / 0.1));
    border: 1px solid rgb(var(--primary-rgb) / 0.4);
    border-radius: 12px;
    box-shadow: 0 0 18px rgb(var(--primary-rgb) / 0.18);
    transition: all 0.2s;
    position: relative; z-index: 2;
  }
  .otd-banner:hover {
    background: linear-gradient(135deg, rgb(var(--primary-rgb) / 0.22), rgb(var(--secondary-rgb) / 0.16));
    border-color: rgb(var(--primary-rgb) / 0.6);
    transform: translateY(-1px);
  }
  .otd-banner-inner {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px;
  }
  .otd-icon { font-size: 1.6rem; flex-shrink: 0; filter: drop-shadow(0 0 6px rgb(var(--primary-rgb) / 0.45)); }
  .otd-text { flex: 1; min-width: 0; }
  .otd-title {
    font-family: 'Cinzel', serif; font-size: 0.88rem;
    color: var(--pink); letter-spacing: 0.06em; margin-bottom: 2px;
  }
  .otd-sub { font-size: 0.82rem; color: var(--text); font-style: italic; }
  .otd-more { color: var(--text-dim); font-size: 0.78rem; }
  .otd-dismiss {
    background: none; border: 1px solid var(--panel-border);
    color: var(--text-dim); border-radius: 6px;
    width: 26px; height: 26px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.78rem; flex-shrink: 0; transition: all 0.15s;
  }
  .otd-dismiss:hover { border-color: var(--red); color: var(--red); }

  /* Follow button on View User modal */
  .btn-follow {
    background: rgb(var(--primary-rgb) / 0.12);
    border: 1px solid rgb(var(--primary-rgb) / 0.4);
    color: var(--pink); border-radius: 8px;
    padding: 7px 14px; font-family: 'Cinzel', serif;
    font-size: 0.74rem; letter-spacing: 0.06em;
    cursor: pointer; transition: all 0.15s; white-space: nowrap;
    align-self: flex-start; flex-shrink: 0;
  }
  .btn-follow:hover {
    background: rgb(var(--primary-rgb) / 0.22);
    border-color: var(--pink);
    box-shadow: 0 0 14px rgb(var(--primary-rgb) / 0.3);
  }
  .btn-follow.following {
    background: rgb(var(--secondary-rgb) / 0.14);
    border-color: rgb(var(--secondary-rgb) / 0.45);
    color: var(--gold2);
  }
  .btn-follow.following:hover {
    background: rgba(232,100,100,0.14);
    border-color: var(--red);
    color: var(--red);
  }

  /* Following filter button — active state */
  #followingFilterBtn.active {
    background: linear-gradient(135deg, rgb(var(--primary-rgb) / 0.22), rgb(var(--secondary-rgb) / 0.18));
    border-color: rgb(var(--primary-rgb) / 0.55);
    color: var(--pink2);
    box-shadow: 0 0 12px rgb(var(--primary-rgb) / 0.3);
  }

  .settings-sub-label {
    font-family: 'Cinzel', serif;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    color: var(--text-dim);
    text-transform: uppercase;
    margin-bottom: 7px;
    margin-top: 4px;
  }
  .settings-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
  }
  .settings-list-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.85rem;
  }
  .settings-list-row .row-label { flex: 1; color: var(--text); }
  .settings-list-row .row-meta  { font-size: 0.72rem; color: var(--text-dim); }
  .settings-add-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 4px;
  }
  .settings-add-row input,
  .settings-add-row select {
    background: rgba(255,255,255,0.04);
    color: var(--text);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    padding: 7px 9px;
    font-family: 'Crimson Pro', serif;
    font-size: 0.9rem;
    flex: 1;
    min-width: 80px;
  }
  .btn-remove-setting {
    background: none;
    border: 1px solid rgba(192,57,43,0.3);
    color: var(--red);
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 0.75rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s;
  }
  .btn-remove-setting:hover { opacity: 1; }

  .browser-disclaimer {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--panel-border);
    text-align: center;
    font-size: 0.72rem;
    color: var(--text-dim);
    line-height: 1.7;
  }
  .browser-disclaimer strong {
    display: block;
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    margin-bottom: 4px;
  }
  .browser-icons { font-size: 1rem; margin-top: 4px; letter-spacing: 4px; }

  /* ─── USER INFO BAR ──────────────────────────────────────────────────────── */
  .user-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: rgba(0,0,0,0.25);
    border-bottom: 1px solid var(--panel-border);
    font-size: 0.8rem;
    position: relative;
    z-index: 2;
  }

  .user-info { display: flex; align-items: center; gap: 10px; }
  .user-name { color: var(--text); font-family: 'Cinzel', serif; font-size: 0.75rem; letter-spacing: 0.05em; }

  .role-badge {
    padding: 3px 10px;
    border-radius: 12px;
    font-family: 'Cinzel', serif;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
  }

  .role-badge.admin  { background: rgb(var(--primary-rgb) / 0.2); color: var(--pink2); border: 1px solid rgb(var(--primary-rgb) / 0.4); }
  .role-badge.mod    { background: rgba(74,144,217,0.15); color: #7ab8f5; border: 1px solid rgba(74,144,217,0.35); }
  .role-badge.user   { background: rgba(255,255,255,0.06); color: var(--text-dim); border: 1px solid var(--panel-border); }

  .btn-logout {
    padding: 5px 12px;
    background: transparent;
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    color: var(--text-dim);
    font-family: 'Cinzel', serif;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.2s;
  }
  .btn-logout:hover { border-color: var(--red); color: #e74c3c; }

  /* ─── ADMIN PANEL ────────────────────────────────────────────────────────── */
  .admin-panel {
    background: rgb(var(--primary-rgb) / 0.05);
    border: 1px solid rgb(var(--primary-rgb) / 0.2);
    border-radius: var(--radius);
    padding: 22px;
    margin-bottom: 24px;
  }

  .admin-panel-title {
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    letter-spacing: 0.25em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .user-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }

  .user-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
  }

  .user-row-info { display: flex; align-items: center; gap: 10px; }
  .user-row-name { font-family: 'Cinzel', serif; font-size: 0.8rem; color: var(--text); }


  .role-change-select {
    background: rgba(255,255,255,0.04);
    color: var(--text);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    padding: 4px 8px;
    font-family: 'Crimson Pro', serif;
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color 0.18s;
  }
  .role-change-select:focus { outline: none; border-color: rgb(var(--primary-rgb) / 0.45); }
  .role-change-select:hover { border-color: rgb(var(--primary-rgb) / 0.4); }

  .btn-reset-pwd {
    padding: 4px 10px;
    background: rgba(74,144,217,0.12);
    border: 1px solid rgba(74,144,217,0.3);
    border-radius: 6px;
    color: #7ab8f5;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
  }
  .btn-reset-pwd:hover { background: rgba(74,144,217,0.25); }

  .btn-remove-user {
    padding: 4px 10px;
    background: rgba(192,57,43,0.12);
    border: 1px solid rgba(192,57,43,0.3);
    border-radius: 6px;
    color: #e74c3c;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
  }
  .btn-remove-user:hover { background: rgba(192,57,43,0.25); }

  .add-user-form {
    display: grid;
    grid-template-columns: minmax(70px,1fr) minmax(70px,1fr) minmax(72px,auto) auto;
    gap: 6px;
    align-items: end;
    padding-top: 14px;
    border-top: 1px solid var(--panel-border);
  }

  .add-user-form input, .add-user-form select {
    padding: 8px 7px;
    background: rgba(255,255,255,0.04);
    color: var(--text);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    font-family: 'Crimson Pro', serif;
    font-size: 0.85rem;
    transition: border-color 0.2s;
    min-width: 0;
  }

  .add-user-form select option { background: var(--navy2); }
  .add-user-form input:focus, .add-user-form select:focus {
    outline: none; border-color: rgb(var(--primary-rgb) / 0.45);
  }

  /* ─── CARD OWNER BADGE ───────────────────────────────────────────────────── */
  .owner-badge {
    position: absolute; top: 8px; left: 8px;
    background: rgb(var(--bg-rgb) / 0.85);
    border: 1px solid rgb(var(--primary-rgb) / 0.3);
    color: var(--gold2);
    font-family: 'Cinzel', serif;
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: 10px;
    z-index: 2;
    backdrop-filter: blur(4px);
  }

  /* ─── VISITED CARDS ──────────────────────────────────────────── */
  .bookmark-card.visited { opacity: 0.55; }
  .bookmark-card.visited .card-img-wrap::after {
    content: '✓';
    position: absolute;
    inset: 0;
    background: rgba(39,174,96,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: #27ae60;
    font-weight: bold;
    backdrop-filter: blur(1px);
  }
  .btn-visit {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(39,174,96,0.35);
    background: rgba(39,174,96,0.1);
    color: #27ae60;
    cursor: pointer;
    font-size: 0.8rem;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s; flex-shrink: 0;
  }
  .btn-visit:hover { background: rgba(39,174,96,0.3); transform: scale(1.1); }
  .btn-visit.visited-active { background: rgba(39,174,96,0.25); border-color: #27ae60; }

  /* ─── COPY URL BUTTON ────────────────────────────────────────── */
  .copy-btn {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(74,144,217,0.3);
    background: rgba(74,144,217,0.08);
    color: #4a90d9;
    cursor: pointer;
    font-size: 0.75rem;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s; flex-shrink: 0;
  }
  .copy-btn:hover { background: rgba(74,144,217,0.25); transform: scale(1.1); }

  /* ─── NOTES ─────────────────────────────────────────────────── */
  .note-tag {
    font-size: 0.76rem;
    color: var(--text-dim);
    font-style: italic;
    padding: 5px 8px;
    background: rgba(255,255,255,0.03);
    border-left: 2px solid rgb(var(--primary-rgb) / 0.3);
    border-radius: 0 4px 4px 0;
    margin: 6px 0 4px;
    line-height: 1.4;
  }
  .note-author { color: var(--gold); font-style: normal; font-size: 0.68rem; margin-right: 4px; }

  /* ─── SORT SELECT ────────────────────────────────────────────── */
  .sort-select {
    padding: 10px 12px;
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: border-color 0.2s;
    appearance: none;
    padding-right: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23c9a84c' opacity='0.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
  }
  .sort-select:focus { outline: none; border-color: rgb(var(--primary-rgb) / 0.45); }
  .sort-select option { background: var(--navy2); }

  /* Global: ensure all native select dropdowns are readable */
  select option { background: var(--navy2); color: var(--text); }

  /* ─── REFRESH INDICATOR ──────────────────────────────────────── */
  .refresh-label {
    font-size: 0.72rem;
    color: var(--text-dim);
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
  }
  .refresh-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--green);
    animation: pulse 2s infinite;
  }
  @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.3;} }

  /* ─── CLEAR VISITED BTN ──────────────────────────────────────── */
  .btn-clear-visited {
    padding: 6px 14px;
    background: rgba(39,174,96,0.1);
    border: 1px solid rgba(39,174,96,0.3);
    border-radius: 8px;
    color: #27ae60;
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
  }
  .btn-clear-visited:hover { background: rgba(39,174,96,0.2); }

  /* ─── BULK CLEAR BTN on pills ────────────────────────────────── */
  .pill-wrap { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
  .pill { flex-shrink: 0; }
  .bulk-clear-btn {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(192,57,43,0.3);
    background: rgba(192,57,43,0.08);
    color: #e74c3c;
    cursor: pointer;
    font-size: 0.6rem;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
  }
  .bulk-clear-btn:hover { background: rgba(192,57,43,0.25); }

  /* ─── NOTES FORM ─────────────────────────────────────────────── */
  .form-group textarea {
    padding: 9px 14px;
    background: rgba(255,255,255,0.04);
    color: var(--text);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    font-family: 'Crimson Pro', serif;
    font-size: 0.95rem;
    resize: vertical;
    min-height: 60px;
    transition: border-color 0.2s;
    width: 100%;
  }
  .form-group textarea:focus { outline: none; border-color: rgb(var(--primary-rgb) / 0.45); background: rgba(255,255,255,0.06); }
  .form-group textarea::placeholder { color: var(--text-dim); opacity: 0.7; }


  /* ─── QUICK LINKS BAR ────────────────────────────────────────── */
  .quick-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(0,0,0,0.3);
    border-bottom: 1px solid var(--panel-border);
    flex-wrap: wrap;
  }
  .quick-links a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 20px;
    color: var(--text-dim);
    text-decoration: none;
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    transition: all 0.2s;
    white-space: nowrap;
  }
  .quick-links a:hover { border-color: var(--pink); color: var(--pink); background: rgb(var(--primary-rgb) / 0.12); }

  /* ─── COLLAPSIBLE ADD FORM ───────────────────────────────────── */
  .add-panel-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    margin-bottom: 0;
  }
  .add-panel-toggle .panel-title { margin-bottom: 0; }
  .add-toggle-icon {
    color: var(--gold);
    font-size: 0.9rem;
    transition: transform 0.25s ease;
    opacity: 0.7;
  }
  .add-panel-body {
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.3s ease;
    max-height: 600px;
    opacity: 1;
  }
  .add-panel-body.collapsed { max-height: 0; opacity: 0; pointer-events: none; }

  /* ─── CATEGORY COLORS ────────────────────────────────────────── */
  .pill.cat-HW      { background: rgba(232,201,122,0.18); border-color: rgba(232,201,122,0.5); color: #e8c97a; }
  .pill.cat-FLF     { background: rgb(var(--secondary-deep-rgb) / 0.15);  border-color: rgb(var(--secondary-deep-rgb) / 0.45); color: #5bc4f5; }
  .pill.cat-TSS     { background: rgba(176,127,212,0.15); border-color: rgba(176,127,212,0.4); color: #c39bd3; }
  .pill.cat-K9      { background: rgba(77,207,176,0.15);  border-color: rgba(77,207,176,0.4);  color: #4dcfb0; }
  .pill.cat-C88     { background: rgb(var(--primary-rgb) / 0.15); border-color: rgb(var(--primary-rgb) / 0.4); color: #f07fa0; }
  .pill.cat-UBER    { background: rgba(245,166,35,0.15);  border-color: rgba(245,166,35,0.4);  color: #f5a623; }
  .pill.cat-EQUAL10 { background: rgba(143,201,110,0.15); border-color: rgba(143,201,110,0.4); color: #8fc96e; }
  .pill.cat-CHAPTER4{ background: rgba(240,96,96,0.15);   border-color: rgba(240,96,96,0.4);   color: #f06060; }
  .pill.cat-WLRP    { background: rgba(122,184,144,0.15); border-color: rgba(122,184,144,0.4); color: #7ab890; }
  .pill.cat-TMD     { background: rgba(122,155,245,0.15); border-color: rgba(122,155,245,0.4); color: #7a9bf5; }
  .pill.cat-GENRE   { background: rgba(245,122,122,0.15); border-color: rgba(245,122,122,0.4); color: #f57a7a; }
  .pill.cat-ARCADE  { background: rgba(245,195,122,0.15); border-color: rgba(245,195,122,0.4); color: #f5c37a; }

  /* Active states for colored pills */
  .pill.cat-HW.active      { background: rgba(232,201,122,0.35); }
  .pill.cat-FLF.active     { background: rgb(var(--secondary-deep-rgb) / 0.3);   }
  .pill.cat-TSS.active     { background: rgba(176,127,212,0.3);  }
  .pill.cat-K9.active      { background: rgba(77,207,176,0.3);   }
  .pill.cat-C88.active     { background: rgb(var(--primary-rgb) / 0.3);  }
  .pill.cat-UBER.active    { background: rgba(245,166,35,0.3);   }
  .pill.cat-EQUAL10.active { background: rgba(143,201,110,0.3);  }
  .pill.cat-CHAPTER4.active{ background: rgba(240,96,96,0.3);    }
  .pill.cat-WLRP.active    { background: rgba(122,184,144,0.3);  }
  .pill.cat-TMD.active     { background: rgba(122,155,245,0.3);  }
  .pill.cat-GENRE.active   { background: rgba(245,122,122,0.3);  }
  .pill.cat-ARCADE.active  { background: rgba(245,195,122,0.3);  }

  /* ─── EVENT COUNTDOWN BADGE ──────────────────────────────────── */
  .event-badge {
    font-size: 0.58rem;
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: 4px;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.05em;
    vertical-align: middle;
    white-space: nowrap;
  }
  .event-badge.live {
    background: rgba(39,174,96,0.25);
    border: 1px solid rgba(39,174,96,0.5);
    color: #27ae60;
    animation: pulseBadge 1.5s infinite;
  }
  .event-badge.soon {
    background: rgba(245,166,35,0.2);
    border: 1px solid rgba(245,166,35,0.4);
    color: #f5a623;
  }
  .event-badge.monthly {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--panel-border);
    color: var(--text-dim);
  }
  @keyframes pulseBadge { 0%,100%{opacity:1;} 50%{opacity:0.6;} }

  /* ─── HOT DEAL ───────────────────────────────────────────────── */
  .hot-deal-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(240,60,60,0.85);
    border: 1px solid rgba(255,100,100,0.6);
    color: white;
    font-size: 0.65rem;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: 10px;
    z-index: 3;
    backdrop-filter: blur(4px);
    animation: hotPulse 2s infinite;
  }
  @keyframes hotPulse { 0%,100%{box-shadow:0 0 6px rgba(255,80,80,0.5);} 50%{box-shadow:0 0 12px rgba(255,80,80,0.8);} }
  .bookmark-card.hot-deal { border-color: rgba(240,80,80,0.3) !important; }

  .btn-hot {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(240,96,96,0.3);
    background: rgba(240,96,96,0.08);
    color: #f06060;
    cursor: pointer;
    font-size: 0.8rem;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s; flex-shrink: 0;
  }
  .btn-hot.active { background: rgba(240,96,96,0.25); border-color: #f06060; }
  .btn-hot:hover  { background: rgba(240,96,96,0.3); transform: scale(1.1); }

  /* ─── VOTE BUTTONS ───────────────────────────────────────────── */
  .vote-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 5px 0 2px;
  }

  /* ─── EDIT FORM ───────────────────────────────────────────────── */
  .bookmark-card.editing { border-color: rgb(var(--primary-rgb) / 0.4); }
  .edit-form {
    border-top: 1px solid rgb(var(--primary-rgb) / 0.2);
    padding: 14px;
    background: rgb(var(--primary-rgb) / 0.04);
  }
  
  .edit-form-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 7px 10px;
    align-items: center;
    margin-bottom: 12px;
  }
  .edit-form-grid label {
    font-size: 0.75rem;
    color: var(--text-dim);
    white-space: nowrap;
  }
  .edit-form-grid input,
  .edit-form-grid textarea {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    padding: 6px 9px;
    color: var(--text);
    font-family: 'Crimson Pro', serif;
    font-size: 0.9rem;
    width: 100%;
    box-sizing: border-box;
  }
  .edit-form-grid input:focus,
  .edit-form-grid textarea:focus {
    outline: none;
    border-color: rgb(var(--primary-rgb) / 0.5);
  }
  .edit-form-grid textarea { grid-column: 2; resize: vertical; }
  .edit-form-actions { display: flex; gap: 8px; justify-content: flex-end; }
  .edit-btn {
    background: rgb(var(--primary-rgb) / 0.08);
    border: 1px solid rgb(var(--primary-rgb) / 0.2);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 0.8rem;
    cursor: pointer;
    color: var(--text-dim);
    transition: all 0.18s;
  }
  .edit-btn:hover { background: rgb(var(--primary-rgb) / 0.18); border-color: var(--pink); color: var(--pink); }



  /* ─── CHANGE PASSWORD PANEL ───────────────────────────────────── */
/* btn-change-pwd removed — using btn-userbar now */
/* changePwdPanel CSS removed — lives in modal now */

  .change-pwd-grid {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 8px 10px;
    align-items: center;
    margin-bottom: 14px;
  }
  .change-pwd-grid label {
    font-size: 0.8rem;
    color: var(--text-dim);
    text-align: right;
    padding-right: 4px;
  }
  .change-pwd-grid input {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: 8px 10px;
    color: var(--text);
    font-family: 'Crimson Pro', serif;
    font-size: 0.9rem;
    transition: border-color 0.18s;
  }
  .change-pwd-grid input:focus { outline: none; border-color: rgb(var(--primary-rgb) / 0.5); }
  .change-pwd-actions { display: flex; gap: 8px; justify-content: flex-end; }

  /* ─── TOGGLE SWITCH ───────────────────────────────────────────── */
  .toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    cursor: pointer;
  }
  .toggle-switch input { opacity: 0; width: 0; height: 0; }
  .toggle-slider {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.1);
    border: 1px solid var(--panel-border);
    border-radius: 24px;
    transition: all 0.25s;
  }
  .toggle-slider::before {
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    left: 3px; top: 3px;
    background: var(--text-dim);
    border-radius: 50%;
    transition: all 0.25s;
  }
  .toggle-switch input:checked + .toggle-slider {
    background: rgb(var(--primary-rgb) / 0.25);
    border-color: var(--pink);
  }
  .toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px);
    background: var(--pink);
  }

  /* ─── GUEST STYLES ────────────────────────────────────────────── */
  .guest-stat {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.8rem;
    color: var(--text-dim);
    padding: 4px 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--panel-border);
    border-radius: 20px;
    white-space: nowrap;
  }
  .guest-comment-hint {
    font-size: 0.78rem;
    color: var(--text-dim);
    font-style: italic;
    text-align: center;
    padding: 8px 0 4px;
    opacity: 0.7;
  }

  /* ─── LIKE BUTTON ─────────────────────────────────────────────── */
  .btn-like {
    background: rgb(var(--primary-rgb) / 0.1);
    border: 1px solid rgb(var(--primary-rgb) / 0.25);
    color: var(--text-dim);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.18s;
    white-space: nowrap;
  }
  .btn-like:hover { border-color: var(--pink); color: var(--pink); background: rgb(var(--primary-rgb) / 0.18); }
  .btn-like.liked { background: rgb(var(--primary-rgb) / 0.22); border-color: var(--pink); color: var(--pink2); }

  .btn-comments-toggle {
    background: rgb(var(--secondary-rgb) / 0.08);
    border: 1px solid rgb(var(--secondary-rgb) / 0.2);
    color: var(--text-dim);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.18s;
    white-space: nowrap;
  }
  .btn-comments-toggle:hover { border-color: var(--pink); color: var(--pink); }
  .btn-comments-toggle.active { background: rgb(var(--primary-rgb) / 0.15); border-color: var(--pink); color: var(--pink2); }

  /* ─── COMMENTS SECTION ────────────────────────────────────────── */
  .comments-section {
    border-top: 1px solid var(--panel-border);
    padding: 12px 14px 10px;
    background: rgb(var(--secondary-rgb) / 0.03);
  }
  .comments-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
  .no-comments { font-size: 0.8rem; color: var(--text-dim); font-style: italic; text-align: center; padding: 6px 0; }
  .comment-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: 8px 10px;
  }
  .comment-author { font-family: 'Cinzel', serif; font-size: 0.65rem; letter-spacing: 0.08em; color: var(--pink); margin-bottom: 3px; }
  .comment-text   { font-size: 0.88rem; color: var(--text); line-height: 1.45; word-break: break-word; }
  .comment-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 5px; }
  .comment-date   { font-size: 0.7rem; color: var(--text-dim); }
  .comment-del    { background: none; border: none; color: var(--red); cursor: pointer; font-size: 0.7rem; opacity: 0.6; transition: opacity 0.15s; padding: 0; }
  .comment-del:hover { opacity: 1; }
  .comment-input-row { display: flex; gap: 6px; }
  .comment-input {
    flex: 1; background: rgba(255,255,255,0.04); border: 1px solid var(--panel-border);
    border-radius: 8px; padding: 8px 10px; color: var(--text);
    font-family: 'Crimson Pro', serif; font-size: 0.9rem;
  }
  .comment-input:focus { outline: none; border-color: rgb(var(--primary-rgb) / 0.5); }
  .comment-submit {
    background: rgb(var(--secondary-rgb) / 0.15); border: 1px solid rgb(var(--secondary-rgb) / 0.3);
    color: var(--gold2); border-radius: 8px; padding: 8px 14px;
    font-family: 'Cinzel', serif; font-size: 0.7rem; letter-spacing: 0.08em;
    cursor: pointer; transition: all 0.18s; white-space: nowrap;
  }
  .comment-submit:hover { background: rgb(var(--primary-rgb) / 0.28); border-color: var(--pink); }

  /* ─── PAGINATION ──────────────────────────────────────────────── */
  .pagination-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 0 8px;
    flex-wrap: wrap;
  }
  .page-numbers { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; }
  .page-btn {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--panel-border);
    color: var(--text-dim);
    border-radius: 8px;
    padding: 7px 14px;
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.18s;
    white-space: nowrap;
  }
  .page-btn:hover:not([disabled]) { border-color: var(--pink); color: var(--pink); background: rgb(var(--primary-rgb) / 0.1); }
  .page-btn[disabled] { opacity: 0.35; cursor: default; }
  .page-num {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--panel-border);
    color: var(--text-dim);
    border-radius: 6px;
    padding: 6px 11px;
    font-family: 'Crimson Pro', serif;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.18s;
    min-width: 36px;
    text-align: center;
  }
  .page-num:hover { border-color: var(--pink); color: var(--pink); background: rgb(var(--primary-rgb) / 0.1); }
  .page-num.active { background: rgb(var(--primary-rgb) / 0.2); border-color: var(--pink); color: var(--pink2); font-weight: 600; }
  .page-ellipsis { color: var(--text-dim); padding: 0 4px; font-size: 0.9rem; }
  /* ─── POST DETAIL MODAL ──────────────────────────────────────── */
  .detail-body { display: flex; flex-direction: column; }
  .detail-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 4px;
    max-height: 320px;
    overflow-y: auto;
    background: #000;
    border-radius: 4px 4px 0 0;
  }
  .detail-gallery-img {
    width: 100%; height: 180px;
    object-fit: cover;
    cursor: zoom-in;
    transition: opacity 0.18s;
  }
  .detail-gallery-img:hover { opacity: 0.85; }
  .detail-content { padding: 18px 22px; }
  .detail-meta-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
  }
  .detail-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
  .detail-tag {
    background: rgb(var(--secondary-rgb) / 0.1);
    border: 1px solid rgb(var(--secondary-rgb) / 0.25);
    color: var(--gold2);
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 0.75rem;
    font-family: 'Crimson Pro', serif;
  }
  .detail-location-link {
    display: inline-block;
    color: var(--pink);
    font-size: 0.82rem;
    text-decoration: none;
    margin-bottom: 12px;
    opacity: 0.8;
    transition: opacity 0.15s;
  }
  .detail-location-link:hover { opacity: 1; }
  .detail-text {
    font-size: 0.95rem;
    color: var(--text);
    line-height: 1.65;
    margin-bottom: 16px;
    white-space: pre-wrap;
    word-break: break-word;
  }
  .detail-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--panel-border);
    margin-bottom: 0;
  }
  /* In the detail modal these buttons carry text labels — override fixed-circle sizing */
  .detail-actions .btn-visit,
  .detail-actions .delete-btn {
    width: auto;
    height: auto;
    border-radius: 8px;
    padding: 5px 11px;
    font-size: 0.8rem;
  }
  .detail-comments {
    padding: 18px 22px;
    border-top: 1px solid var(--panel-border);
    background: rgb(var(--secondary-rgb) / 0.02);
  }
  .det-badge {
    font-size: 0.68rem;
    border-radius: 4px;
    padding: 2px 7px;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.06em;
  }
  .det-badge.pin  { background: rgb(var(--secondary-rgb) / 0.15); color: var(--gold2); }
  .det-badge.feat { background: rgba(232,200,100,0.15); color: #e8c864; }
  .det-badge.draft{ background: rgb(var(--primary-rgb) / 0.12); color: var(--pink); }

  /* ─── CARD BADGES ────────────────────────────────────────────── */
  .multi-img-badge {
    position: absolute; bottom: 38px; right: 8px;
    background: rgba(0,0,0,0.65);
    color: #fff;
    border-radius: 6px;
    padding: 2px 7px;
    font-size: 0.72rem;
    pointer-events: none;
  }

  /* ─── PINNED CARD INDICATOR ──────────────────────────────────── */
  .bookmark-card.is-pinned {
    border-color: rgb(var(--primary-rgb) / 0.45);
    box-shadow: 0 0 0 1px rgb(var(--primary-rgb) / 0.2), 0 4px 20px rgba(0,0,0,0.5);
  }
  .pin-strip {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    background: rgb(var(--primary-rgb) / 0.12);
    border-bottom: 1px solid rgb(var(--primary-rgb) / 0.22);
    font-family: 'Cinzel', serif;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    color: var(--pink);
    text-transform: uppercase;
  }
  .feat-strip {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    background: rgba(232,200,100,0.1);
    border-bottom: 1px solid rgba(232,200,100,0.25);
    font-family: 'Cinzel', serif;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    color: #e8c864;
    text-transform: uppercase;
  }
  .pin-badge {
    position: absolute; top: 8px; right: 8px;
    font-size: 1rem;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
    pointer-events: none;
  }
  .featured-badge {
    position: absolute; top: 8px; left: 8px;
    background: rgba(232,200,100,0.85);
    color: #1a1400;
    border-radius: 5px;
    padding: 2px 7px;
    font-size: 0.68rem;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.06em;
    pointer-events: none;
  }
  .draft-badge {
    position: absolute; bottom: 38px; left: 8px;
    background: rgb(var(--primary-rgb) / 0.8);
    color: #1a0a10;
    border-radius: 5px;
    padding: 2px 7px;
    font-size: 0.68rem;
    font-family: 'Cinzel', serif;
    pointer-events: none;
  }
  .bookmark-card.featured { border-color: rgba(232,200,100,0.4); box-shadow: 0 0 0 1px rgba(232,200,100,0.2); }
  .bookmark-card.draft-card { opacity: 0.7; }
  .btn-pin, .btn-feature {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    padding: 4px 7px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.18s;
    color: var(--text-dim);
  }
  .btn-pin:hover    { border-color: var(--gold); }
  .btn-feature:hover{ border-color: rgba(232,200,100,0.5); }
  .btn-pin.active   { background: rgb(var(--secondary-rgb) / 0.15); border-color: var(--gold); }
  .btn-feature.active { background: rgba(232,200,100,0.15); border-color: rgba(232,200,100,0.5); }

  /* ─── ADD FORM EXTRAS ────────────────────────────────────────── */
  .img-input-row {
    display: flex; gap: 6px; align-items: center;
  }
  .img-input-row input { flex: 1; }
  .btn-rm-img {
    background: none;
    border: 1px solid rgb(var(--primary-soft-rgb) / 0.3);
    color: var(--red);
    border-radius: 5px;
    padding: 4px 8px;
    font-size: 0.75rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s;
  }
  .btn-rm-img:hover { background: rgb(var(--primary-soft-rgb) / 0.1); }
  .btn-upload-img {
  background: rgb(var(--secondary-rgb) / 0.1);
  border: 1px solid rgb(var(--secondary-rgb) / 0.3);
  color: var(--gold);
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.78rem;
  transition: all 0.2s;
  white-space: nowrap;
}
.btn-upload-img:hover {
  background: rgb(var(--secondary-rgb) / 0.2);
  border-color: var(--gold);
}
.btn-upload-img:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.img-input-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.img-input-row input { flex: 1; }
.btn-add-img {
    background: rgb(var(--secondary-rgb) / 0.06);
    border: 1px dashed rgb(var(--secondary-rgb) / 0.25);
    color: var(--text-dim);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.8rem;
    cursor: pointer;
    width: 100%;
    margin-top: 4px;
    transition: all 0.18s;
    font-family: 'Crimson Pro', serif;
  }
  .btn-add-img:hover { border-color: var(--gold); color: var(--gold); }

  /* ─── PROFILE EXTRAS ─────────────────────────────────────────── */
  .my-post-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid var(--panel-border);
  }
  .my-post-row:hover { background: rgba(255,255,255,0.04); }
  .my-post-row:last-child { border-bottom: none; }
  /* ─── MODAL SYSTEM ────────────────────────────────────────────── */
  .modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  .modal-box {
    background: var(--navy2);
    border: 1px solid rgb(var(--primary-rgb) / 0.2);
    border-radius: 16px;
    width: 100%;
    max-width: 480px;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 24px 80px rgba(0,0,0,0.7);
    animation: modalIn 0.2s ease;
  }
  .modal-box-wide { max-width: 780px; }
  @keyframes modalIn {
    from { opacity:0; transform:translateY(-16px) scale(0.97); }
    to   { opacity:1; transform:translateY(0)   scale(1); }
  }
  .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--panel-border);
  }
  .modal-title {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    letter-spacing: 0.14em;
    color: var(--pink);
    text-transform: uppercase;
  }
  .modal-close {
    background: none;
    border: 1px solid var(--panel-border);
    color: var(--text-dim);
    border-radius: 6px;
    width: 28px; height: 28px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.18s;
    display: flex; align-items: center; justify-content: center;
  }
  .modal-close:hover { border-color: var(--red); color: var(--red); }
  .modal-body { padding: 20px 22px 24px; }
  .modal-section-label {
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    color: var(--pink);
    text-transform: uppercase;
    padding-bottom: 8px;
    border-bottom: 1px solid rgb(var(--primary-rgb) / 0.15);
    margin-bottom: 12px;
  }
  .modal-actions { display: flex; gap: 8px; flex-wrap: wrap; }

  /* ─── PROFILE MODAL ───────────────────────────────────────────── */
  .profile-info-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--panel-border);
  }
  .profile-avatar {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgb(var(--secondary-rgb) / 0.25), rgb(var(--primary-rgb) / 0.25));
    border: 2px solid rgb(var(--primary-rgb) / 0.35);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Cinzel', serif;
    font-size: 1.3rem;
    color: var(--pink2);
    flex-shrink: 0;
  }
  .profile-username {
    font-family: 'Cinzel', serif;
    font-size: 1.05rem;
    color: var(--text);
    letter-spacing: 0.06em;
    margin-bottom: 5px;
  }
  .profile-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 22px;
  }
  .stat-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    padding: 12px 8px;
    text-align: center;
  }
  .stat-num {
    font-family: 'Cinzel', serif;
    font-size: 1.4rem;
    color: var(--pink);
    line-height: 1;
    margin-bottom: 4px;
  }
  .stat-label {
    font-size: 0.72rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .btn-danger-outline {
    background: rgb(var(--primary-soft-rgb) / 0.06);
    border: 1px solid rgb(var(--primary-soft-rgb) / 0.3);
    color: var(--red);
    border-radius: 8px;
    padding: 8px 16px;
    font-family: 'Crimson Pro', serif;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.18s;
  }
  .btn-danger-outline:hover { background: rgb(var(--primary-soft-rgb) / 0.15); border-color: var(--red); }

  /* ─── USER BAR BUTTONS ────────────────────────────────────────── */
  .btn-userbar {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--panel-border);
    color: var(--text-dim);
    border-radius: 8px;
    padding: 6px 12px;
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.18s;
    white-space: nowrap;
  }
  .btn-userbar:hover { border-color: var(--pink); color: var(--pink); background: rgb(var(--primary-rgb) / 0.08); }
  .btn-userbar-admin:hover { border-color: var(--gold); color: var(--gold2); background: rgb(var(--secondary-rgb) / 0.08); }



  /* ─── LIGHTBOX CAROUSEL ───────────────────────────────────────── */
  #lightbox {
    display: none; position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,0.93); backdrop-filter: blur(8px);
    align-items: center; justify-content: center;
    flex-direction: column; gap: 14px;
  }
  #lightboxImg {
    max-width: 88vw; max-height: 80vh;
    border-radius: 10px;
    box-shadow: 0 8px 48px rgba(0,0,0,0.8);
    object-fit: contain;
    border: 1px solid rgb(var(--primary-rgb) / 0.2);
    transition: opacity 0.18s;
    cursor: default;
    user-select: none;
  }
  #lightboxImg.fading { opacity: 0; }
  .lightbox-controls {
    display: flex; align-items: center; gap: 18px;
  }
  .lightbox-arrow {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff; width: 44px; height: 44px;
    border-radius: 50%; font-size: 1.1rem;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, border-color 0.15s;
    flex-shrink: 0;
  }
  .lightbox-arrow:hover { background: rgb(var(--primary-rgb) / 0.22); border-color: var(--pink); }
  .lightbox-arrow:disabled { opacity: 0.25; cursor: default; }
  .lightbox-counter {
    font-family: 'Cinzel', serif; font-size: 0.72rem;
    letter-spacing: 0.14em; color: rgba(255,255,255,0.55);
    min-width: 60px; text-align: center;
  }
  .lightbox-dots {
    display: flex; gap: 6px; justify-content: center;
  }
  .lightbox-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255,255,255,0.3); cursor: pointer;
    transition: background 0.15s, transform 0.15s;
    border: none; padding: 0;
  }
  .lightbox-dot.active { background: var(--pink); transform: scale(1.35); }
  .lightbox-close {
    position: fixed; top: 18px; right: 22px;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
    color: #fff; width: 38px; height: 38px; border-radius: 50%;
    font-size: 1rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s; z-index: 10000;
  }
  .lightbox-close:hover { background: rgba(232,100,100,0.35); border-color: rgba(232,100,100,0.5); }
  .lightbox-caption {
    font-family: 'Crimson Pro', serif; font-size: 0.88rem;
    color: rgba(255,255,255,0.45); text-align: center;
    max-width: 70vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* ─── BACK TO TOP ─────────────────────────────────────────────── */
  #backToTopBtn {
    position: fixed; bottom: 28px; right: 28px; z-index: 900;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgb(var(--bg-rgb) / 0.92);
    border: 1px solid rgb(var(--primary-rgb) / 0.35);
    color: var(--pink); font-size: 1.15rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    opacity: 0; pointer-events: none;
    transform: translateY(12px);
    transition: opacity 0.25s, transform 0.25s, border-color 0.15s;
    backdrop-filter: blur(8px);
  }
  #backToTopBtn.visible {
    opacity: 1; pointer-events: auto; transform: translateY(0);
  }
  #backToTopBtn:hover {
    border-color: var(--pink);
    box-shadow: 0 6px 22px rgba(0,0,0,0.6);
  }

  /* ─── READING LIST / BOOKMARKS ────────────────────────────────── */
  .btn-bookmark {
    background: none; border: 1px solid var(--panel-border);
    color: var(--text-dim); border-radius: 6px; padding: 4px 9px;
    font-size: 0.8rem; cursor: pointer; transition: all 0.15s;
    line-height: 1;
  }
  .btn-bookmark:hover { border-color: var(--gold2); color: var(--gold2); }
  .btn-bookmark.bookmarked { background: rgba(232,200,100,0.12); border-color: rgba(232,200,100,0.45); color: #e8c864; }
  .bookmark-card-indicator {
    position: absolute; top: 8px; right: 36px; z-index: 3;
    font-size: 0.8rem; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.7));
    pointer-events: none;
  }
  .reading-list-row {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    border-radius: 8px; cursor: pointer; border: 1px solid var(--panel-border);
    background: rgba(255,255,255,0.02); margin-bottom: 5px; transition: background 0.14s;
  }
  .reading-list-row:hover { background: rgb(var(--secondary-rgb) / 0.06); }
  .reading-list-empty { font-size:0.85rem;color:var(--text-dim);font-style:italic;padding:6px 0; }

  /* ─── REVISION HISTORY ─────────────────────────────────────────── */
  .revision-item {
    padding: 10px 12px; border-radius: 8px;
    border: 1px solid var(--panel-border);
    background: rgba(255,255,255,0.02); margin-bottom: 6px;
  }
  .revision-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap; margin-bottom: 5px;
  }
  .revision-meta { font-size: 0.75rem; color: var(--text-dim); }
  .revision-title { font-size: 0.88rem; color: var(--text); }
  .revision-diff {
    font-size: 0.75rem; color: var(--text-dim); margin-top: 4px;
    line-height: 1.5; border-top: 1px solid var(--panel-border); padding-top: 5px;
  }
  .btn-restore {
    background: rgb(var(--secondary-rgb) / 0.08); border: 1px solid rgb(var(--secondary-rgb) / 0.28);
    color: var(--gold2); border-radius: 6px; padding: 3px 10px;
    font-size: 0.7rem; cursor: pointer; white-space: nowrap;
    font-family: 'Cinzel', serif; letter-spacing: 0.05em; transition: all 0.15s;
  }
  .btn-restore:hover { background: rgb(var(--secondary-rgb) / 0.18); border-color: var(--gold2); }
  .btn-history {
    background: none; border: 1px solid var(--panel-border);
    color: var(--text-dim); border-radius: 6px; padding: 4px 9px;
    font-size: 0.75rem; cursor: pointer; transition: all 0.15s;
  }
  .btn-history:hover { border-color: var(--gold2); color: var(--gold2); }

  /* ─── ADVANCED SEARCH ──────────────────────────────────────────── */
  .search-advanced-panel {
    background: var(--panel); border: 1px solid var(--panel-border);
    border-radius: 12px; padding: 14px 16px; margin-bottom: 14px;
    display: none; grid-template-columns: 1fr 1fr; gap: 10px;
  }
  .search-advanced-panel.open { display: grid; }
  .search-adv-label {
    font-family: 'Cinzel', serif; font-size: 0.65rem; letter-spacing: 0.1em;
    color: var(--text-dim); text-transform: uppercase; margin-bottom: 4px;
  }
  .search-adv-input {
    width: 100%; background: rgba(255,255,255,0.04);
    border: 1px solid var(--panel-border); color: var(--text);
    border-radius: 7px; padding: 7px 10px;
    font-family: 'Crimson Pro', serif; font-size: 0.9rem;
    transition: border-color 0.15s;
  }
  .search-adv-input:focus { outline: none; border-color: rgb(var(--primary-rgb) / 0.4); }
  .search-adv-row { display: flex; flex-direction: column; }
  .search-adv-full { grid-column: 1 / -1; }
  .btn-search-toggle {
    background: none; border: none; color: var(--text-dim);
    font-family: 'Cinzel', serif; font-size: 0.65rem; letter-spacing: 0.08em;
    cursor: pointer; padding: 4px 2px; white-space: nowrap;
    transition: color 0.15s; text-transform: uppercase;
  }
  .btn-search-toggle:hover { color: var(--pink); }
  .btn-search-toggle.active { color: var(--pink); }
  .search-active-chip {
    background: rgb(var(--primary-rgb) / 0.1); border: 1px solid rgb(var(--primary-rgb) / 0.3);
    color: var(--pink); border-radius: 8px; padding: 3px 10px;
    font-size: 0.68rem; font-family: 'Cinzel', serif; letter-spacing: 0.06em;
    cursor: pointer; white-space: nowrap; transition: all 0.15s;
  }
  .search-active-chip:hover { background: rgb(var(--primary-rgb) / 0.2); }

  /* ─── SHARE / DIRECT LINK ─────────────────────────────────────── */
  .btn-share {
    background: none; border: 1px solid var(--panel-border);
    color: var(--text-dim); border-radius: 6px; padding: 4px 9px;
    font-size: 0.78rem; cursor: pointer; transition: all 0.15s; line-height: 1;
  }
  .btn-share:hover { border-color: var(--gold2); color: var(--gold2); }
  .card-share-btn {
    background: none; border: none; color: rgba(255,255,255,0.35);
    font-size: 0.78rem; cursor: pointer; padding: 2px 4px;
    transition: color 0.15s; line-height: 1;
  }
  .card-share-btn:hover { color: var(--gold2); }

  /* ─── LIGHT MODE ──────────────────────────────────────────────── */
  /* ═══════════════════════════════════════════════════════════════════
     LIGHT MODE  — v4.6.1 base, v4.8.3 made theme-aware
     ─────────────────────────────────────────────────────────────────
     The base `body.light-mode` block defines the TWILIGHT LIGHT palette
     (the original light mode). Then `body.light-mode[data-theme="X"]`
     overrides the alias variables for Ember and Kith. The 67 class-
     specific light-mode rules below mostly use var() and auto-track.
     ═══════════════════════════════════════════════════════════════════ */
  body.light-mode {
    /* Twilight light — pinkish whites, deep pink + blue accents */
    --navy:  #fdf0f5;
    --navy2: #f8e0eb;
    --navy3: #f0ccdc;
    --panel: rgb(var(--primary-rgb) / 0.08);
    --panel-border: rgb(var(--primary-rgb) / 0.28);
    --gold:  #3a7abf;
    --gold2: #2060a0;
    --gold-dim: rgb(var(--secondary-rgb) / 0.2);
    --text:  #1a2a3a;
    --text-dim: #6a7a8a;
    --pink:  #c0508a;
    --pink2: #e078b0;
    --red:   #c03050;
    --green: #287050;
    background: var(--navy);
    color: var(--text);
  }

  /* Ember light — warm cream + deep copper + deep sage (candlelit library by daylight) */
  body.light-mode[data-theme="ember"] {
    --navy:  #fbf3ec;
    --navy2: #f3e6d8;
    --navy3: #e6d3c0;
    --gold:  #527a64;     /* deep sage (secondary slot) */
    --gold2: #6e9580;
    --pink:  #a05a40;     /* deep warm copper (primary slot) */
    --pink2: #c08068;
    --red:   #b04030;
    --green: #4a7050;
    --text:  #2e1a14;
    --text-dim: #6a4f3e;
  }

  /* Kith light — aged parchment + burnt sienna + antique brass (apothecary in daylight) */
  body.light-mode[data-theme="kith"] {
    --navy:  #faf3df;
    --navy2: #f0e3c0;
    --navy3: #e0cd96;
    --gold:  #6e562a;     /* deep antique brass (secondary slot) */
    --gold2: #8a6e36;
    --pink:  #9c4818;     /* deep burnt sienna / rust (primary slot) */
    --pink2: #c46c44;
    --red:   #a83820;
    --green: #5a6a30;
    --text:  #2e1c0e;
    --text-dim: #6a4f28;
  }
  body.light-mode::before { opacity: 0.04; }
  body.light-mode .bookmark-card {
    background: rgba(255,255,255,0.85);
    box-shadow: 0 2px 12px rgb(var(--primary-deep-rgb) / 0.12);
  }
  body.light-mode .bookmark-card:hover { box-shadow: 0 8px 28px rgb(var(--primary-deep-rgb) / 0.2); }
  body.light-mode .modal-box { background: #fff; }
  body.light-mode .login-box { background: #fff; }
  body.light-mode .add-panel { background: rgba(255,255,255,0.9); }
  body.light-mode input, body.light-mode textarea, body.light-mode select {
    background: rgb(var(--primary-rgb) / 0.06) !important;
    color: #1a2a3a !important;
    border-color: rgb(var(--primary-rgb) / 0.3) !important;
  }
  body.light-mode .pill { background: #fff; }
  body.light-mode .site-footer { background: rgba(255,255,255,0.6); }
  body.light-mode .toast-msg { background: #fff; }
  body.light-mode #lightbox { background: var(--navy); }
  .theme-toggle-btn {
    background: none; border: 1px solid var(--panel-border);
    color: var(--text-dim); border-radius: 8px; padding: 5px 10px;
    font-size: 0.82rem; cursor: pointer; transition: all 0.18s;
    white-space: nowrap;
  }
  .theme-toggle-btn:hover { border-color: var(--pink); color: var(--pink); }

  /* ─── PINNED POST HERO ─────────────────────────────────────────── */
  .pinned-hero {
    width: 100%; border-radius: var(--radius); overflow: hidden;
    margin-bottom: 22px; position: relative; cursor: pointer;
    min-height: 240px; display: flex; align-items: flex-end;
    background: var(--navy2);
    border: 1px solid rgb(var(--primary-rgb) / 0.3);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    transition: box-shadow 0.2s, transform 0.2s;
  }
  .pinned-hero:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0,0,0,0.55); }
  .pinned-hero-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    transition: transform 0.4s; z-index: 0;
  }
  .pinned-hero:hover .pinned-hero-img { transform: scale(1.03); }
  .pinned-hero-overlay {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top, rgb(var(--bg-rgb) / 0.92) 0%, rgb(var(--bg-rgb) / 0.4) 50%, transparent 100%);
  }
  body.light-mode .pinned-hero-overlay {
    background: linear-gradient(to top, rgba(253,240,245,0.95) 0%, rgba(253,240,245,0.5) 50%, transparent 100%);
  }
  .pinned-hero-content { position: relative; z-index: 2; padding: 24px 28px; width: 100%; }
  .pinned-hero-label {
    font-family: 'Cinzel', serif; font-size: 0.62rem; letter-spacing: 0.18em;
    color: var(--pink); text-transform: uppercase; margin-bottom: 8px;
    display: flex; align-items: center; gap: 6px;
  }
  .pinned-hero-title {
    font-family: 'Cinzel', serif; font-size: 1.6rem; font-weight: 700;
    color: var(--text); letter-spacing: 0.03em; line-height: 1.2;
    margin-bottom: 8px; text-shadow: 0 2px 8px rgba(0,0,0,0.4);
  }
  .pinned-hero-excerpt {
    font-size: 0.95rem; color: var(--text-dim); line-height: 1.5;
    margin-bottom: 14px; max-width: 600px;
  }
  .pinned-hero-meta {
    font-size: 0.78rem; color: var(--text-dim);
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
  }
  .pinned-hero-btn {
    font-family: 'Cinzel', serif; font-size: 0.72rem; letter-spacing: 0.1em;
    background: var(--pink); color: #fff; border: none;
    border-radius: 8px; padding: 9px 20px; cursor: pointer;
    transition: opacity 0.15s, transform 0.15s;
    text-transform: uppercase;
  }
  .pinned-hero-btn:hover { opacity: 0.85; transform: scale(1.02); }
  .pinned-hero-no-img { background: linear-gradient(135deg,var(--navy2),var(--navy3)); }

  /* ─── INLINE IMAGE PREVIEW ─────────────────────────────────────── */
  .img-input-row { position: relative; }
  .img-preview {
    width: 52px; height: 52px; border-radius: 7px; object-fit: cover;
    border: 1px solid var(--panel-border); flex-shrink: 0;
    display: none; transition: opacity 0.2s;
    cursor: zoom-in;
  }
  .img-preview.loaded { display: block; }
  .img-preview.error  { display: none; }

  /* ─── CARD HOVER QUICK-ACTIONS ─────────────────────────────────── */
  .card-quick-actions {
    position: absolute; bottom: 0; left: 0; right: 0;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 12px 10px;
    background: linear-gradient(to top, rgb(var(--bg-rgb) / 0.88), transparent);
    opacity: 0; transform: translateY(6px);
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none; z-index: 4;
  }
  body.light-mode .card-quick-actions {
    background: linear-gradient(to top, rgba(253,240,245,0.9), transparent);
  }
  .bookmark-card:hover .card-quick-actions {
    opacity: 1; transform: translateY(0); pointer-events: auto;
  }
  /* Disable on touch/mobile — no hover */
  @media (hover: none) { .card-quick-actions { display: none !important; } }
  .card-qa-btn {
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,0.12); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.85); font-size: 0.88rem;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.15s; flex-shrink: 0;
  }
  body.light-mode .card-qa-btn {
    background: rgba(253,240,245,0.8);
    border-color: rgb(var(--primary-rgb) / 0.4);
    color: var(--pink);
  }
  .card-qa-btn:hover { transform: scale(1.12); background: rgba(255,255,255,0.22); }
  .card-qa-btn.qa-liked { color: var(--gold); border-color: rgb(var(--secondary-rgb) / 0.5); }
  .card-qa-btn.qa-bookmarked { color: #e8c864; border-color: rgba(232,200,100,0.5); }

  /* ─── REZZ DAY BANNER ──────────────────────────────────────────── */
  .rezzday-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: 14px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, rgb(var(--primary-rgb) / 0.18), rgb(var(--secondary-rgb) / 0.12));
    border: 1px solid rgb(var(--primary-rgb) / 0.5);
    box-shadow: 0 0 24px rgb(var(--primary-rgb) / 0.15);
    animation: rezzPulse 2.5s ease-in-out infinite;
    position: relative;
    overflow: hidden;
  }
  .rezzday-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgb(var(--primary-rgb) / 0.06) 50%, transparent 100%);
    animation: rezzShine 2.5s ease-in-out infinite;
  }
  @keyframes rezzPulse {
    0%,100% { box-shadow: 0 0 18px rgb(var(--primary-rgb) / 0.15); }
    50%      { box-shadow: 0 0 36px rgb(var(--primary-rgb) / 0.35); }
  }
  @keyframes rezzShine {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }
  .rezzday-icon { font-size: 2rem; filter: drop-shadow(0 0 8px rgb(var(--primary-rgb) / 0.6)); }
  .rezzday-text { text-align: center; }
  .rezzday-title {
    font-family: 'Cinzel', serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--pink2);
    letter-spacing: 0.06em;
    margin-bottom: 3px;
  }
  .rezzday-sub { font-size: 0.88rem; color: var(--text-dim); font-style: italic; }
  .rezzday-dismiss {
    background: none; border: none; color: var(--text-dim); cursor: pointer;
    font-size: 1rem; opacity: 0.5; padding: 4px; transition: opacity 0.15s;
    position: absolute; top: 8px; right: 10px;
  }
  .rezzday-dismiss:hover { opacity: 1; }

  /* ─── CALENDAR MODAL ───────────────────────────────────────────── */
  .cal-modal-box {
    background: var(--navy2);
    border: 1px solid rgb(var(--primary-rgb) / 0.2);
    border-radius: 16px;
    width: 100%;
    max-width: 780px;
    max-height: 90vh;
    overflow-y: auto;
    animation: cardIn 0.3s ease both;
  }
  .cal-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--panel-border);
    padding-bottom: 12px;
  }
  .cal-tab {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--panel-border);
    color: var(--text-dim);
    border-radius: 8px;
    padding: 6px 14px;
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.18s;
    white-space: nowrap;
  }
  .cal-tab:hover { border-color: var(--pink); color: var(--pink); }
  .cal-tab.active { background: rgb(var(--primary-rgb) / 0.15); border-color: var(--pink); color: var(--pink2); }
  /* Month grid */
  .cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
  }
  .cal-nav-btn {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--panel-border);
    color: var(--text-dim);
    border-radius: 8px;
    padding: 6px 14px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.18s;
  }
  .cal-nav-btn:hover { border-color: var(--pink); color: var(--pink); }
  .cal-month-label {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    letter-spacing: 0.08em;
    color: var(--text);
  }
  .cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
  }
  .cal-dow {
    text-align: center;
    font-family: 'Cinzel', serif;
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    color: var(--text-dim);
    padding: 6px 2px 8px;
    text-transform: uppercase;
  }
  .cal-day {
    min-height: 64px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    padding: 4px;
    position: relative;
    transition: background 0.15s;
  }
  .cal-day.other-month { opacity: 0.3; }
  .cal-day.today {
    border-color: rgb(var(--primary-rgb) / 0.5);
    background: rgb(var(--primary-rgb) / 0.07);
  }
  .cal-day-num {
    font-size: 0.72rem;
    color: var(--text-dim);
    font-family: 'Cinzel', serif;
    margin-bottom: 2px;
  }
  .cal-day.today .cal-day-num { color: var(--pink2); font-weight: 700; }
  .cal-event-dot {
    display: block;
    font-size: 0.65rem;
    color: var(--text);
    background: rgb(var(--secondary-rgb) / 0.15);
    border: 1px solid rgb(var(--secondary-rgb) / 0.3);
    border-radius: 4px;
    padding: 1px 4px;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background 0.15s;
    line-height: 1.4;
  }
  .cal-event-dot:hover { background: rgb(var(--primary-rgb) / 0.25); border-color: var(--pink); }
  .cal-event-dot.recurring { border-color: rgb(var(--secondary-rgb) / 0.5); }
  /* Event list view */
  .cal-event-item {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 10px;
    transition: border-color 0.18s;
  }
  .cal-event-item:hover { border-color: rgb(var(--primary-rgb) / 0.3); }
  .cal-event-item.today-event { border-color: rgb(var(--primary-rgb) / 0.5); background: rgb(var(--primary-rgb) / 0.06); }
  .cal-event-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
  }
  .cal-event-title {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    color: var(--text);
    letter-spacing: 0.03em;
  }
  .cal-event-badges { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; flex-shrink: 0; }
  .cal-event-badge {
    font-size: 0.65rem;
    border-radius: 4px;
    padding: 2px 7px;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }
  .cal-badge-today  { background: rgb(var(--primary-rgb) / 0.2); color: var(--pink2); border: 1px solid rgb(var(--primary-rgb) / 0.4); }
  .cal-badge-past   { background: rgb(var(--text-dim-rgb) / 0.15); color: var(--text-dim); border: 1px solid rgb(var(--text-dim-rgb) / 0.25); }
  .cal-badge-recur  { background: rgb(var(--secondary-rgb) / 0.12); color: var(--gold2); border: 1px solid rgb(var(--secondary-rgb) / 0.3); }
  .cal-event-times {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 6px;
    font-size: 0.82rem;
  }
  .cal-time-block { display: flex; flex-direction: column; gap: 1px; }
  .cal-time-label { font-size: 0.65rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.1em; font-family: 'Cinzel', serif; }
  .cal-time-value { color: var(--gold2); font-weight: 600; }
  .cal-time-local  { color: var(--pink); }
  .cal-event-desc { font-size: 0.87rem; color: var(--text-dim); line-height: 1.5; margin-bottom: 8px; }
  .cal-event-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
  }
  .cal-rsvp-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .cal-rsvp-count { font-size: 0.78rem; color: var(--text-dim); }
  .btn-rsvp {
    background: rgb(var(--secondary-rgb) / 0.1);
    border: 1px solid rgb(var(--secondary-rgb) / 0.3);
    color: var(--gold2);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.78rem;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 0.18s;
    white-space: nowrap;
  }
  .btn-rsvp:hover { background: rgb(var(--secondary-rgb) / 0.2); border-color: var(--gold2); }
  .btn-rsvp.rsvp-yes { background: rgba(136,197,164,0.2); border-color: var(--green); color: var(--green); }
  .btn-rsvp.rsvp-yes:hover { background: rgba(136,197,164,0.1); }
  .cal-event-actions { display: flex; gap: 6px; }
  .cal-slurl { color: var(--pink); font-size: 0.8rem; text-decoration: none; opacity: 0.8; transition: opacity 0.15s; }
  .cal-slurl:hover { opacity: 1; }
  /* Add event form */
  .cal-add-form {
    background: rgb(var(--secondary-rgb) / 0.04);
    border: 1px dashed rgb(var(--secondary-rgb) / 0.25);
    border-radius: 10px;
    padding: 18px;
    margin-top: 16px;
  }
  .cal-add-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
  }
  .cal-add-grid .full { grid-column: 1 / -1; }
  .cal-section-label {
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgb(var(--secondary-rgb) / 0.2);
  }
  .cal-happening-today {
    background: linear-gradient(135deg, rgb(var(--primary-rgb) / 0.1), rgb(var(--secondary-rgb) / 0.06));
    border: 1px solid rgb(var(--primary-rgb) / 0.35);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
  }
  .cal-happening-label {
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    color: var(--pink);
    text-transform: uppercase;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .cal-happening-label::before { content: '●'; animation: blink 1.5s step-end infinite; }
  @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.2} }
  @media (max-width:600px) {
    .cal-add-grid { grid-template-columns: 1fr; }
    .cal-event-times { flex-direction: column; gap: 6px; }
  }

  /* ─── LOCATION DIRECTORY ──────────────────────────────────────────── */
  .loc-modal-box {
    background: var(--navy2);
    border: 1px solid rgb(var(--secondary-rgb) / 0.2);
    border-radius: 16px;
    width: 100%;
    max-width: 860px;
    max-height: 90vh;
    overflow-y: auto;
    animation: cardIn 0.3s ease both;
  }
  /* Category filter pills for locations */
  .loc-cat-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 16px;
  }
  .loc-cat-pill {
    padding: 5px 14px;
    border-radius: 20px;
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    cursor: pointer;
    border: 1px solid var(--panel-border);
    background: var(--panel);
    color: var(--text-dim);
    transition: all 0.18s;
    white-space: nowrap;
  }
  .loc-cat-pill:hover { border-color: var(--gold); color: var(--gold); }
  .loc-cat-pill.active { background: rgb(var(--secondary-rgb) / 0.15); border-color: var(--gold); color: var(--gold2); }
  /* Location grid */
  .loc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 18px;
  }
  @media (max-width:700px) { .loc-grid { grid-template-columns: repeat(2,1fr); } }
  @media (max-width:480px) { .loc-grid { grid-template-columns: 1fr; } }
  .loc-card {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
  }
  .loc-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 36px rgba(0,0,0,0.45);
    border-color: rgb(var(--secondary-rgb) / 0.35);
  }
  .loc-thumb {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    background: var(--navy3);
    display: block;
    transition: transform 0.4s;
  }
  .loc-card:hover .loc-thumb { transform: scale(1.04); }
  .loc-thumb-placeholder {
    width: 100%;
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, rgb(var(--secondary-rgb) / 0.07), rgb(var(--primary-rgb) / 0.04));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--text-dim);
    opacity: 0.4;
  }
  .loc-card-body { padding: 10px 12px 12px; flex: 1; display: flex; flex-direction: column; }
  .loc-card-name {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
    line-height: 1.3;
  }
  .loc-card-cat {
    font-family: 'Cinzel', serif;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 10px;
    display: inline-block;
    margin-bottom: 6px;
    border: 1px solid;
  }
  /* Category colour map */
  .loc-cat-Shopping    { background:rgb(var(--primary-rgb) / 0.12); color:var(--pink); border-color:rgb(var(--primary-rgb) / 0.3); }
  .loc-cat-Roleplay    { background:rgb(var(--secondary-rgb) / 0.1);  color:var(--gold); border-color:rgb(var(--secondary-rgb) / 0.3); }
  .loc-cat-Sandbox     { background:rgba(136,197,164,0.12); color:#88c5a4; border-color:rgba(136,197,164,0.3); }
  .loc-cat-Hangout     { background:rgba(232,200,100,0.1);  color:#e8c864; border-color:rgba(232,200,100,0.3); }
  .loc-cat-PhotoSpot   { background:rgb(var(--secondary-soft-rgb) / 0.1);  color:var(--gold2); border-color:rgb(var(--secondary-soft-rgb) / 0.3); }
  .loc-cat-Music       { background:rgba(200,136,232,0.12); color:#c888e8; border-color:rgba(200,136,232,0.3); }
  .loc-cat-Shopping,.loc-cat-Roleplay,.loc-cat-Sandbox,.loc-cat-Hangout,.loc-cat-PhotoSpot,.loc-cat-Music { white-space:nowrap; }
  .loc-cat-Other       { background:rgb(var(--text-dim-rgb) / 0.1);  color:var(--text-dim); border-color:rgb(var(--text-dim-rgb) / 0.3); }
  .loc-card-desc {
    font-size: 0.8rem;
    color: var(--text-dim);
    line-height: 1.45;
    margin-bottom: 8px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .loc-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    flex-wrap: wrap;
  }
  /* Star rating */
  .loc-stars {
    display: flex;
    gap: 2px;
    align-items: center;
  }
  .loc-star {
    font-size: 0.95rem;
    cursor: pointer;
    transition: transform 0.1s;
    line-height: 1;
    color: #3a3530;
  }
  .loc-star.filled { color: #e8c864; }
  .loc-star:hover  { transform: scale(1.25); }
  .loc-rating-count { font-size: 0.7rem; color: var(--text-dim); margin-left: 3px; }
  .loc-slurl-btn {
    background: rgb(var(--secondary-rgb) / 0.1);
    border: 1px solid rgb(var(--secondary-rgb) / 0.3);
    color: var(--gold2);
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: all 0.15s;
    white-space: nowrap;
  }
  .loc-slurl-btn:hover { background: rgb(var(--secondary-rgb) / 0.22); border-color: var(--gold); }
  /* Detail panel */
  .loc-detail-overlay {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
  }
  .loc-detail-box {
    background: var(--navy2);
    border: 1px solid rgb(var(--secondary-rgb) / 0.3);
    border-radius: 16px;
    max-width: 600px; width: 100%;
    max-height: 88vh; overflow-y: auto;
    animation: cardIn 0.25s ease;
  }
  .loc-detail-img { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:12px 12px 0 0; display:block; }
  .loc-detail-content { padding: 20px 22px; }
  .loc-detail-name {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem; font-weight: 700;
    color: var(--text); margin-bottom: 4px;
    letter-spacing: 0.04em;
  }
  .loc-detail-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
  .loc-detail-desc { font-size:0.92rem; color:var(--text); line-height:1.6; margin-bottom:16px; white-space:pre-wrap; }
  .loc-detail-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
  /* Comments in loc detail */
  .loc-comments { border-top:1px solid var(--panel-border); padding-top:14px; }
  .loc-comment-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--panel-border);
    border-radius: 8px; padding:8px 10px; margin-bottom:7px;
  }
  /* Add location form */
  .loc-add-form {
    background: rgb(var(--secondary-rgb) / 0.04);
    border: 1px dashed rgb(var(--secondary-rgb) / 0.25);
    border-radius: 10px; padding: 18px; margin-top: 16px;
  }
  .loc-add-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px; margin-bottom: 12px;
  }
  .loc-add-grid .full { grid-column:1/-1; }
  @media(max-width:580px) { .loc-add-grid { grid-template-columns:1fr; } }
  /* Search bar for locations */
  .loc-search-row {
    display: flex; gap: 8px; align-items: center;
    margin-bottom: 14px; flex-wrap: wrap;
  }
  .loc-search-input {
    flex: 1; min-width: 180px;
    padding: 9px 14px 9px 36px;
    background: var(--panel); color: var(--text);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    font-family: 'Crimson Pro', serif; font-size: 0.95rem;
    transition: border-color 0.2s;
    position: relative;
  }
  .loc-search-input:focus { outline:none; border-color: rgb(var(--secondary-rgb) / 0.45); }
  .loc-search-wrap { flex:1; min-width:180px; position:relative; }
  .loc-search-wrap .search-icon { left:11px; }
  /* Sort select for locations */
  .loc-sort-select {
    background: rgba(255,255,255,0.04); color: var(--text);
    border: 1px solid var(--panel-border); border-radius:8px;
    padding: 8px 10px; font-family:'Crimson Pro',serif; font-size:0.88rem;
  }
  .loc-sort-select option { background:var(--navy2); color:var(--text); }
  /* Empty state */
  .loc-empty {
    grid-column:1/-1; text-align:center; padding:60px 20px;
    color:var(--text-dim); font-style:italic;
  }
  .loc-empty-icon { font-size:3rem; margin-bottom:14px; opacity:0.35; }

  /* ═══════════════════════════════════════════════════════════════════
     POLLS FLOATING PANEL  — v4.6.0
  ═══════════════════════════════════════════════════════════════════ */
  .polls-tab-btn {
    position: fixed; right: 0; top: 50%; transform: translateY(-50%);
    z-index: 900; background: var(--navy2);
    border: 1px solid rgb(var(--primary-rgb) / 0.35); border-right: none;
    border-radius: 10px 0 0 10px;
    color: var(--pink); font-family: 'Cinzel', serif;
    font-size: 0.58rem; letter-spacing: 0.12em;
    padding: 16px 7px; cursor: pointer;
    writing-mode: vertical-rl; text-orientation: mixed;
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    transition: all 0.2s;
    box-shadow: -4px 0 20px rgba(0,0,0,0.4);
  }
  .polls-tab-btn:hover { background: var(--navy3); border-color: var(--pink); }
  .polls-tab-icon { font-size: 1.1rem; writing-mode: horizontal-tb; }
  .polls-tab-count {
    background: var(--pink); color: var(--navy);
    border-radius: 10px; padding: 2px 5px;
    font-size: 0.6rem; font-family: 'Cinzel', serif;
    writing-mode: horizontal-tb; min-width: 17px; text-align: center;
  }
  .polls-panel {
    position: fixed; right: -380px; top: 0;
    width: 360px; height: 100vh; z-index: 950;
    background: var(--navy2);
    border-left: 1px solid rgb(var(--primary-rgb) / 0.2);
    box-shadow: -8px 0 48px rgba(0,0,0,0.55);
    transition: right 0.32s cubic-bezier(0.4,0,0.2,1);
    display: flex; flex-direction: column; overflow: hidden;
  }
  .polls-panel.open { right: 0; }
  .polls-backdrop {
    display: none; position: fixed; inset: 0;
    z-index: 940; background: rgba(0,0,0,0.4);
    backdrop-filter: blur(2px);
  }
  .polls-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px 14px; border-bottom: 1px solid var(--panel-border);
    flex-shrink: 0;
  }
  .polls-panel-title {
    font-family: 'Cinzel', serif; font-size: 0.82rem;
    letter-spacing: 0.16em; color: var(--pink); text-transform: uppercase;
  }
  .polls-panel-close {
    background: none; border: 1px solid var(--panel-border);
    color: var(--text-dim); border-radius: 6px;
    width: 28px; height: 28px; cursor: pointer;
    transition: all 0.15s; display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem;
  }
  .polls-panel-close:hover { border-color: var(--red); color: var(--red); }
  .polls-panel-body {
    flex: 1; overflow-y: auto; padding: 16px;
    display: flex; flex-direction: column; gap: 14px;
  }
  /* Poll card */
  .poll-card {
    background: rgba(255,255,255,0.03); border: 1px solid var(--panel-border);
    border-radius: 12px; overflow: hidden; transition: border-color 0.15s;
  }
  .poll-card:hover { border-color: rgb(var(--primary-rgb) / 0.25); }
  .poll-card-header { padding: 14px 14px 10px; border-bottom: 1px solid var(--panel-border); }
  .poll-question { font-family: 'Crimson Pro', serif; font-size: 1.05rem; color: var(--text); line-height: 1.4; margin-bottom: 6px; }
  .poll-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.72rem; color: var(--text-dim); }
  .poll-timer {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 8px; border-radius: 10px;
    font-family: 'Cinzel', serif; font-size: 0.6rem; letter-spacing: 0.05em;
  }
  .poll-timer.live  { background: rgba(136,197,164,0.12); border: 1px solid rgba(136,197,164,0.3); color: var(--green); }
  .poll-timer.ended { background: rgb(var(--primary-soft-rgb) / 0.1);  border: 1px solid rgb(var(--primary-soft-rgb) / 0.2); color: var(--red); }
  .poll-body { padding: 12px 14px 14px; }
  .poll-option { margin-bottom: 9px; }
  .poll-option:last-child { margin-bottom: 0; }
  .poll-option-btn {
    width: 100%; text-align: left;
    background: rgba(255,255,255,0.03); border: 1px solid var(--panel-border);
    border-radius: 8px; padding: 9px 13px;
    font-family: 'Crimson Pro', serif; font-size: 0.92rem; color: var(--text);
    cursor: pointer; transition: all 0.15s;
    display: flex; align-items: center; gap: 8px;
  }
  .poll-option-btn:hover { border-color: var(--pink); background: rgb(var(--primary-rgb) / 0.05); }
  /* Results */
  .poll-result-row { margin-bottom: 10px; }
  .poll-result-row:last-child { margin-bottom: 0; }
  .poll-result-label {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 5px; font-size: 0.88rem; color: var(--text);
  }
  .poll-result-pct { font-family: 'Cinzel', serif; font-size: 0.72rem; color: var(--gold2); }
  .poll-result-track { height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; }
  .poll-result-fill { height: 100%; background: linear-gradient(90deg, var(--pink), var(--gold)); border-radius: 3px; transition: width 0.4s ease; }
  .poll-result-row.my-vote .poll-result-label { color: var(--pink2); }
  .poll-result-row.my-vote .poll-result-fill { background: linear-gradient(90deg, var(--pink), var(--pink2)); }
  .poll-vote-btn {
    width: 100%; margin-top: 12px; padding: 9px;
    background: linear-gradient(135deg, var(--gold), var(--gold2));
    color: var(--navy2); border: none; border-radius: 8px;
    font-family: 'Cinzel', serif; font-size: 0.72rem; letter-spacing: 0.1em; font-weight: 600;
    cursor: pointer; transition: all 0.2s;
  }
  .poll-vote-btn:hover { filter: brightness(1.1); }
  .poll-vote-btn:disabled { opacity: 0.5; cursor: not-allowed; filter: none; }
  .poll-hidden-notice {
    text-align: center; padding: 10px;
    font-size: 0.8rem; color: var(--text-dim); font-style: italic;
    border: 1px dashed rgb(var(--primary-rgb) / 0.2); border-radius: 8px; margin-top: 8px;
  }
  .poll-voters-btn {
    background: none; border: none; font-size: 0.7rem;
    color: var(--text-dim); cursor: pointer; padding: 4px 0;
    transition: color 0.15s; font-family: 'Crimson Pro', serif;
    text-decoration: underline; text-underline-offset: 2px; display: block; margin-top: 6px;
  }
  .poll-voters-btn:hover { color: var(--gold2); }
  /* Create poll form */
  .poll-add-form {
    background: rgb(var(--secondary-rgb) / 0.04); border: 1px solid rgb(var(--secondary-rgb) / 0.15);
    border-radius: 12px; padding: 16px;
  }
  .poll-add-title {
    font-family: 'Cinzel', serif; font-size: 0.68rem;
    letter-spacing: 0.14em; color: var(--gold2);
    text-transform: uppercase; margin-bottom: 12px;
  }
  .poll-add-form input,
  .poll-add-form textarea,
  .poll-add-form select {
    width: 100%; background: rgba(255,255,255,0.04);
    border: 1px solid var(--panel-border); color: var(--text);
    border-radius: 8px; padding: 8px 11px;
    font-family: 'Crimson Pro', serif; font-size: 0.9rem;
    margin-bottom: 8px; transition: border-color 0.15s;
  }
  .poll-add-form input:focus,
  .poll-add-form select:focus,
  .poll-add-form textarea:focus { outline: none; border-color: rgb(var(--secondary-rgb) / 0.4); }
  .poll-options-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
  .poll-option-input-row { display: flex; gap: 6px; align-items: center; }
  .poll-option-input-row input { margin-bottom: 0; flex: 1; }
  .btn-rm-poll-opt {
    background: none; border: 1px solid rgb(var(--primary-soft-rgb) / 0.3);
    color: var(--red); border-radius: 5px; padding: 5px 9px;
    font-size: 0.75rem; cursor: pointer; flex-shrink: 0; transition: all 0.15s;
  }
  .btn-rm-poll-opt:hover { background: rgb(var(--primary-soft-rgb) / 0.1); }
  .btn-add-poll-opt {
    background: rgb(var(--secondary-rgb) / 0.06); border: 1px dashed rgb(var(--secondary-rgb) / 0.25);
    color: var(--text-dim); border-radius: 6px; padding: 6px 12px;
    font-size: 0.8rem; cursor: pointer; width: 100%;
    transition: all 0.18s; font-family: 'Crimson Pro', serif; margin-bottom: 8px;
  }
  .btn-add-poll-opt:hover { border-color: var(--gold); color: var(--gold); }
  .poll-form-row {
    display: flex; gap: 10px; align-items: center; margin-bottom: 7px; flex-wrap: wrap;
  }
  .poll-form-row label { font-size: 0.88rem; color: var(--text); display: flex; align-items: center; gap: 5px; cursor: pointer; text-transform: none; letter-spacing: 0; font-family: 'Crimson Pro', serif; }
  .poll-form-row select { flex: 1; min-width: 110px; margin-bottom: 0; }

  /* Poll toggle pills — match site pill aesthetic */
  .poll-toggle-pill {
    padding: 6px 16px;
    border-radius: 20px;
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid var(--panel-border);
    background: var(--panel);
    color: var(--text-dim);
    transition: all 0.2s;
    white-space: nowrap;
  }
  .poll-toggle-pill:hover { border-color: var(--pink); color: var(--pink); background: rgb(var(--primary-rgb) / 0.06); }
  .poll-toggle-pill.active,
  .poll-toggle-pill[data-active="true"] {
    background: rgb(var(--primary-rgb) / 0.15);
    border-color: var(--pink);
    color: var(--pink2);
  }


  /* ═══════════════════════════════════════════════════════════════════
     AVATAR LOOKBOOK  — v4.6.0
  ═══════════════════════════════════════════════════════════════════ */
  .lookbook-grid {
    columns: 3; column-gap: 14px;
  }
  @media (max-width: 720px) { .lookbook-grid { columns: 2; } }
  @media (max-width: 460px) { .lookbook-grid { columns: 1; } }
  .lookbook-card {
    break-inside: avoid; margin-bottom: 14px;
    background: rgba(255,255,255,0.03); border: 1px solid var(--panel-border);
    border-radius: 12px; overflow: hidden; cursor: pointer;
    transition: all 0.2s; position: relative;
  }
  .lookbook-card:hover { border-color: rgb(var(--primary-rgb) / 0.35); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
  .lookbook-img { width: 100%; display: block; }
  .lookbook-img-placeholder { height: 160px; background: rgba(255,255,255,0.03); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: var(--text-dim); }
  .lookbook-card-body { padding: 10px 12px 12px; }
  .lookbook-card-title { font-family: 'Cinzel', serif; font-size: 0.78rem; letter-spacing: 0.05em; color: var(--text); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lookbook-card-meta { font-size: 0.72rem; color: var(--text-dim); line-height: 1.4; }
  .lookbook-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
  .lookbook-like-btn { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 0.8rem; display: flex; align-items: center; gap: 4px; transition: color 0.15s; font-family: 'Crimson Pro', serif; padding: 0; }
  .lookbook-like-btn:hover, .lookbook-like-btn.liked { color: var(--pink); }
  .lb-img-count-badge {
    position: absolute; top: 8px; right: 8px;
    background: rgb(var(--bg-rgb) / 0.85); color: var(--gold2);
    border-radius: 8px; padding: 2px 7px; font-size: 0.65rem;
    font-family: 'Cinzel', serif; letter-spacing: 0.05em;
    border: 1px solid rgb(var(--secondary-rgb) / 0.25); pointer-events: none;
  }
  /* Lookbook detail */
  .lb-detail-cred-row { display: flex; gap: 8px; font-size: 0.88rem; color: var(--text-dim); padding: 5px 0; border-bottom: 1px solid var(--panel-border); }
  .lb-detail-cred-item { flex: 1; color: var(--text); }

  /* ═══════════════════════════════════════════════════════════════════
     GROUP NOTICES  — v4.6.0
  ═══════════════════════════════════════════════════════════════════ */
  .notice-card {
    border: 1px solid var(--panel-border); border-radius: 10px;
    overflow: hidden; margin-bottom: 10px;
    background: rgba(255,255,255,0.02); transition: border-color 0.15s;
  }
  .notice-card:hover { border-color: rgb(var(--secondary-rgb) / 0.22); }
  .notice-card-header {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 13px 15px 11px; cursor: pointer; user-select: none;
  }
  .notice-type-badge {
    font-family: 'Cinzel', serif; font-size: 0.58rem; letter-spacing: 0.1em;
    padding: 3px 8px; border-radius: 8px; flex-shrink: 0; margin-top: 2px; white-space: nowrap;
  }
  .notice-type-Event        { background: rgb(var(--secondary-rgb) / 0.12); border: 1px solid rgb(var(--secondary-rgb) / 0.3); color: var(--gold2); }
  .notice-type-Sale         { background: rgba(136,197,164,0.12); border: 1px solid rgba(136,197,164,0.3); color: var(--green); }
  .notice-type-Announcement { background: rgb(var(--primary-rgb) / 0.12); border: 1px solid rgb(var(--primary-rgb) / 0.3); color: var(--pink); }
  .notice-type-Community    { background: rgba(232,200,100,0.1);  border: 1px solid rgba(232,200,100,0.25); color: #e8c864; }
  .notice-info { flex: 1; min-width: 0; }
  .notice-title { font-family: 'Cinzel', serif; font-size: 0.8rem; letter-spacing: 0.04em; color: var(--text); margin-bottom: 4px; }
  .notice-meta  { font-size: 0.7rem; color: var(--text-dim); line-height: 1.5; }
  .notice-body-wrap { padding: 0 15px 14px; border-top: 1px solid var(--panel-border); padding-top: 12px; }
  .notice-body-wrap.collapsed { display: none; }
  .notice-body-text { font-size: 0.9rem; color: var(--text-dim); line-height: 1.7; white-space: pre-wrap; }
  .notice-chevron { color: var(--text-dim); font-size: 0.85rem; flex-shrink: 0; margin-top: 2px; transition: transform 0.2s; }
  .notice-card.expanded .notice-chevron { transform: rotate(180deg); }

  /* ─── LIGHT MODE: POLLS PANEL  — v4.6.1 ────────────────────────── */
  body.light-mode .polls-panel {
    background: #fff;
    border-color: rgb(var(--primary-deep-rgb) / 0.25);
    box-shadow: -8px 0 48px rgb(var(--primary-deep-rgb) / 0.15);
  }
  body.light-mode .polls-panel-header { border-color: rgb(var(--primary-deep-rgb) / 0.15); }

  /* ═══════════════════════════════════════════════════════════════════
     TODAY'S HAPPENINGS PANEL  — v4.8.0
     Mirrors polls-panel styling. Tab sits ABOVE polls tab with a
     vertical gap (bumped 'top' so it doesn't overlap).
  ═══════════════════════════════════════════════════════════════════ */
  .today-tab-btn {
    position: fixed; right: 0; top: calc(50% - 130px); /* above polls tab */
    z-index: 900; background: var(--navy2);
    border: 1px solid rgb(var(--secondary-rgb) / 0.4); border-right: none;
    border-radius: 10px 0 0 10px;
    color: var(--gold); font-family: 'Cinzel', serif;
    font-size: 0.58rem; letter-spacing: 0.12em;
    padding: 16px 7px; cursor: pointer;
    writing-mode: vertical-rl; text-orientation: mixed;
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    transition: all 0.2s;
    box-shadow: -4px 0 20px rgba(0,0,0,0.4);
  }
  .today-tab-btn:hover { background: var(--navy3); border-color: var(--gold); }
  .today-tab-icon { font-size: 1.1rem; writing-mode: horizontal-tb; }
  .today-tab-count {
    background: var(--gold); color: var(--navy);
    border-radius: 10px; padding: 2px 5px;
    font-size: 0.6rem; font-family: 'Cinzel', serif;
    writing-mode: horizontal-tb; min-width: 17px; text-align: center;
  }
  .today-panel {
    position: fixed; right: -380px; top: 0;
    width: 360px; height: 100vh; z-index: 950;
    background: var(--navy2);
    border-left: 1px solid rgb(var(--secondary-rgb) / 0.25);
    box-shadow: -8px 0 48px rgba(0,0,0,0.55);
    transition: right 0.32s cubic-bezier(0.4,0,0.2,1);
    display: flex; flex-direction: column; overflow: hidden;
  }
  .today-panel.open { right: 0; }
  .today-backdrop {
    display: none; position: fixed; inset: 0;
    z-index: 940; background: rgba(0,0,0,0.4);
    backdrop-filter: blur(2px);
  }
  .today-backdrop.open { display: block; }
  .today-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px 14px; border-bottom: 1px solid var(--panel-border);
    flex-shrink: 0;
  }
  .today-panel-title {
    font-family: 'Cinzel', serif; font-size: 0.82rem;
    letter-spacing: 0.16em; color: var(--gold); text-transform: uppercase;
  }
  .today-panel-close {
    background: none; border: 1px solid var(--panel-border);
    color: var(--text-dim); border-radius: 6px;
    width: 28px; height: 28px; cursor: pointer;
    transition: all 0.15s; display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem;
  }
  .today-panel-close:hover { border-color: var(--red); color: var(--red); }
  .today-panel-body {
    flex: 1; overflow-y: auto; padding: 14px 16px 20px;
    display: flex; flex-direction: column; gap: 10px;
  }
  .today-panel-foot {
    flex-shrink: 0; padding: 9px 16px;
    border-top: 1px solid var(--panel-border);
    font-size: 0.66rem; color: var(--text-dim); font-style: italic;
    text-align: center; letter-spacing: 0.04em;
  }
  .today-date {
    font-family: 'Cinzel', serif; font-size: 0.82rem;
    letter-spacing: 0.06em; color: var(--pink);
    text-align: center; padding: 6px 0 10px;
    border-bottom: 1px dashed var(--panel-border);
    margin-bottom: 8px;
  }
  .today-empty {
    text-align: center; padding: 40px 16px; color: var(--text-dim);
    font-style: italic;
  }
  .today-empty-icon { font-size: 2.2rem; margin-bottom: 12px; opacity: 0.65; }
  .today-empty-sub { font-size: 0.78rem; margin-top: 8px; opacity: 0.7; }
  .today-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 13px; border-radius: 10px;
    background: rgb(var(--secondary-rgb) / 0.05);
    border: 1px solid rgb(var(--secondary-rgb) / 0.15);
    cursor: pointer; transition: all 0.18s;
  }
  .today-item:hover {
    background: rgb(var(--secondary-rgb) / 0.1);
    border-color: rgb(var(--secondary-rgb) / 0.3);
    transform: translateX(-2px);
  }
  .today-item-me {
    background: linear-gradient(135deg, rgb(var(--primary-rgb) / 0.18), rgb(var(--secondary-rgb) / 0.1));
    border-color: rgb(var(--primary-rgb) / 0.4);
    box-shadow: 0 0 18px rgb(var(--primary-rgb) / 0.18);
  }
  .today-item-me:hover {
    background: linear-gradient(135deg, rgb(var(--primary-rgb) / 0.25), rgb(var(--secondary-rgb) / 0.15));
    border-color: rgb(var(--primary-rgb) / 0.55);
  }
  .today-item-icon { font-size: 1.4rem; line-height: 1.1; flex-shrink: 0; }
  .today-item-body { flex: 1; min-width: 0; }
  .today-item-label {
    font-family: 'Cinzel', serif; font-size: 0.82rem;
    color: var(--text); letter-spacing: 0.04em; margin-bottom: 3px;
  }
  .today-item-sub {
    font-size: 0.74rem; color: var(--text-dim); line-height: 1.45;
  }
  .today-item-arrow {
    color: var(--text-dim); font-size: 1rem; align-self: center;
    flex-shrink: 0; transition: color 0.15s, transform 0.15s;
  }
  .today-item:hover .today-item-arrow { color: var(--gold); transform: translateX(2px); }

  /* ═══════════════════════════════════════════════════════════════════
     MEMBERS DIRECTORY  — v4.8.0
  ═══════════════════════════════════════════════════════════════════ */
  .members-toolbar {
    display: flex; gap: 10px; flex-wrap: wrap;
    align-items: center; margin-bottom: 12px;
  }
  .members-search {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--panel-border);
    color: var(--text); border-radius: 8px;
    padding: 8px 12px; font-family: 'Crimson Pro', serif; font-size: 0.92rem;
  }
  .members-search:focus { outline: none; border-color: var(--pink); }
  .members-sort-group { display: inline-flex; gap: 4px; flex-shrink: 0; }
  .members-sort-btn {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--panel-border);
    color: var(--text-dim); border-radius: 7px;
    padding: 7px 11px; font-family: 'Cinzel', serif;
    font-size: 0.66rem; letter-spacing: 0.07em;
    cursor: pointer; transition: all 0.15s;
  }
  .members-sort-btn:hover { color: var(--text); border-color: rgb(var(--primary-rgb) / 0.3); }
  .members-sort-btn.active {
    background: rgb(var(--primary-rgb) / 0.15);
    border-color: rgb(var(--primary-rgb) / 0.45);
    color: var(--pink);
  }
  .members-count {
    font-size: 0.78rem; color: var(--text-dim);
    margin-bottom: 10px; padding: 0 2px;
  }
  .members-count strong { color: var(--text); font-weight: 600; }
  .members-online-count { color: var(--green); }
  .members-list {
    display: flex; flex-direction: column; gap: 8px;
    max-height: 540px; overflow-y: auto;
    padding-right: 4px;
  }
  .members-empty {
    text-align: center; padding: 30px 0;
    color: var(--text-dim); font-style: italic;
  }
  .member-card {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 11px 13px; border-radius: 10px;
    background: rgb(var(--secondary-rgb) / 0.05);
    border: 1px solid rgb(var(--secondary-rgb) / 0.15);
    cursor: pointer; transition: all 0.18s;
  }
  .member-card:hover {
    background: rgb(var(--secondary-rgb) / 0.1);
    border-color: rgb(var(--primary-rgb) / 0.3);
    transform: translateX(-1px);
  }
  .member-card.online {
    border-color: rgb(var(--secondary-rgb) / 0.35);
    background: rgb(var(--secondary-rgb) / 0.08);
  }
  .member-avatar-wrap { position: relative; flex-shrink: 0; }
  .member-online-dot {
    position: absolute; bottom: 0; right: 0;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--green);
    border: 2px solid var(--navy2);
    box-shadow: 0 0 8px rgba(136,197,164,0.6);
    animation: member-pulse 2.4s ease-in-out infinite;
  }
  @keyframes member-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(136,197,164,0.6); }
    50%      { box-shadow: 0 0 14px rgba(136,197,164,0.9); }
  }
  .member-body { flex: 1; min-width: 0; }
  .member-name-row {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    margin-bottom: 2px;
  }
  .member-name {
    font-family: 'Cinzel', serif; font-size: 0.88rem;
    color: var(--text); letter-spacing: 0.03em;
  }
  .member-handle {
    font-size: 0.72rem; color: var(--text-dim);
    margin-bottom: 4px;
  }
  .member-meta {
    font-size: 0.74rem; color: var(--text-dim); margin-bottom: 4px;
  }
  .member-card.online .member-meta { color: var(--green); }
  .member-lastpost { font-size: 0.74rem; color: var(--text-dim); }
  .member-lastpost-link {
    color: var(--pink); text-decoration: none;
    border-bottom: 1px dashed rgb(var(--primary-rgb) / 0.4);
    transition: color 0.15s, border-color 0.15s;
  }
  .member-lastpost-link:hover { color: var(--gold2); border-color: var(--gold); }
  .member-lastpost-none { font-style: italic; opacity: 0.6; }
  .member-role-badge {
    font-family: 'Cinzel', serif; font-size: 0.55rem;
    letter-spacing: 0.1em; padding: 2px 7px;
    border-radius: 999px; text-transform: uppercase;
  }
  .member-role-badge.admin {
    background: rgb(var(--primary-rgb) / 0.18);
    border: 1px solid rgb(var(--primary-rgb) / 0.45);
    color: var(--pink);
  }
  .member-role-badge.mod {
    background: rgb(var(--secondary-rgb) / 0.15);
    border: 1px solid rgb(var(--secondary-rgb) / 0.4);
    color: var(--gold2);
  }
  .member-role-badge.suspended {
    background: rgba(232,100,100,0.12);
    border: 1px solid rgba(232,100,100,0.4);
    color: var(--red);
  }
  .member-new-badge {
    font-family: 'Cinzel', serif; font-size: 0.55rem;
    letter-spacing: 0.12em; padding: 2px 7px;
    border-radius: 999px; text-transform: uppercase;
    background: linear-gradient(135deg, rgb(var(--primary-rgb) / 0.25), rgb(var(--secondary-rgb) / 0.2));
    border: 1px solid rgb(var(--primary-rgb) / 0.5);
    color: var(--pink2);
    box-shadow: 0 0 10px rgb(var(--primary-rgb) / 0.25);
    animation: new-badge-shimmer 3s ease-in-out infinite;
  }
  @keyframes new-badge-shimmer {
    0%, 100% { box-shadow: 0 0 10px rgb(var(--primary-rgb) / 0.25); }
    50%      { box-shadow: 0 0 18px rgb(var(--primary-rgb) / 0.5); }
  }

  body.light-mode .poll-card {
    background: rgba(255,255,255,0.95);
    border-color: rgb(var(--primary-deep-rgb) / 0.18);
    box-shadow: 0 2px 10px rgb(var(--primary-deep-rgb) / 0.08);
  }
  body.light-mode .poll-card-header { border-color: rgb(var(--primary-deep-rgb) / 0.12); }
  body.light-mode .poll-question { color: var(--text); }
  body.light-mode .poll-option-btn {
    background: rgba(255,255,255,0.9);
    border-color: rgb(var(--primary-deep-rgb) / 0.2);
    color: #1a2a3a;
  }
  body.light-mode .poll-option-btn:hover {
    background: rgb(var(--primary-deep-rgb) / 0.06);
    border-color: var(--pink);
  }
  body.light-mode .poll-result-label { color: var(--text); }
  body.light-mode .poll-result-track { background: rgba(0,0,0,0.1); }
  body.light-mode .poll-add-form {
    background: rgb(var(--primary-deep-rgb) / 0.05);
    border-color: rgb(var(--primary-deep-rgb) / 0.2);
  }
  body.light-mode .poll-add-form input,
  body.light-mode .poll-add-form select {
    background: #fff !important;
    color: #1a2a3a !important;
    border-color: rgb(var(--primary-deep-rgb) / 0.25) !important;
  }
  body.light-mode .poll-hidden-notice {
    color: #4a5a6a;
    border-color: rgb(var(--primary-deep-rgb) / 0.25);
  }
  body.light-mode .btn-add-poll-opt {
    background: rgb(var(--primary-deep-rgb) / 0.04);
    border-color: rgb(var(--primary-deep-rgb) / 0.2);
    color: #4a5a6a;
  }
  body.light-mode .btn-add-poll-opt:hover { color: var(--pink); border-color: var(--pink); }
  body.light-mode .poll-voters-btn { color: #4a5a6a; }
  body.light-mode .polls-tab-btn {
    background: #fff;
    border-color: rgb(var(--primary-deep-rgb) / 0.3);
    color: var(--pink);
    box-shadow: -4px 0 16px rgb(var(--primary-deep-rgb) / 0.15);
  }

  /* ─── LIGHT MODE: AVATAR LOOKBOOK  — v4.6.1 ─────────────────────── */
  body.light-mode .lookbook-card {
    background: #fff;
    border-color: rgb(var(--primary-deep-rgb) / 0.18);
    box-shadow: 0 2px 12px rgb(var(--primary-deep-rgb) / 0.1);
  }
  body.light-mode .lookbook-card:hover {
    box-shadow: 0 8px 24px rgb(var(--primary-deep-rgb) / 0.2);
    border-color: rgb(var(--primary-deep-rgb) / 0.35);
  }
  body.light-mode .lookbook-card-title { color: var(--text); }
  body.light-mode .lookbook-img-placeholder {
    background: rgb(var(--primary-deep-rgb) / 0.06);
    color: rgb(var(--primary-deep-rgb) / 0.4);
  }
  body.light-mode #lookbookDetailOverlay .loc-detail-box { background: #fff; }
  body.light-mode .lb-detail-cred-row { border-color: rgb(var(--primary-deep-rgb) / 0.15); }
  body.light-mode .lb-detail-cred-item { color: var(--text); }

  /* ─── LIGHT MODE: GROUP NOTICES  — v4.6.1 ───────────────────────── */
  body.light-mode .notice-card {
    background: rgba(255,255,255,0.9);
    border-color: rgb(var(--primary-deep-rgb) / 0.18);
  }
  body.light-mode .notice-card:hover { border-color: rgb(var(--primary-deep-rgb) / 0.3); }
  body.light-mode .notice-title { color: var(--text); }
  body.light-mode .notice-meta  { color: #4a5a6a; }
  body.light-mode .notice-body-text { color: var(--text); }
  body.light-mode .notice-body-wrap { border-color: rgb(var(--primary-deep-rgb) / 0.12); }
  body.light-mode .notice-chevron { color: #6a7a8a; }

  /* placeholder readable in both modes */
  body.light-mode input::placeholder,
  body.light-mode textarea::placeholder { color: #8a8a9a; opacity: 1; }

  body.light-mode .poll-toggle-pill {
    background: rgba(255,255,255,0.8);
    border-color: rgb(var(--primary-deep-rgb) / 0.25);
    color: #4a5a6a;
  }
  body.light-mode .poll-toggle-pill:hover { border-color: var(--pink); color: var(--pink); }
  body.light-mode .poll-toggle-pill.active,
  body.light-mode .poll-toggle-pill[data-active="true"] {
    background: rgb(var(--primary-deep-rgb) / 0.12);
    border-color: var(--pink);
    color: var(--pink);
  }

  /* ═══════════════════════════════════════════════════════════════════
     EMOJI REACTIONS  — v4.6.1
  ═══════════════════════════════════════════════════════════════════ */
  .reaction-area {
    display: flex; flex-direction: column;
    gap: 5px; padding: 5px 0 2px;
  }
  .reaction-pills-row {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  }
  .reaction-pill {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 3px 10px; border-radius: 20px;
    font-size: 0.82rem; line-height: 1.4;
    border: 1px solid var(--panel-border);
    background: var(--panel); cursor: pointer;
    transition: all 0.15s; color: var(--text-dim);
    font-family: 'Crimson Pro', serif;
  }
  .reaction-pill:hover { border-color: var(--pink); background: rgb(var(--primary-rgb) / 0.08); color: var(--text); }
  .reaction-pill.mine {
    border-color: rgb(var(--primary-rgb) / 0.5);
    background: rgb(var(--primary-rgb) / 0.14);
    color: var(--pink2);
  }
  .btn-react {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 4px 10px; border-radius: 20px;
    font-size: 0.7rem; font-family: 'Cinzel', serif;
    letter-spacing: 0.06em; text-transform: uppercase;
    border: 1px solid rgb(var(--primary-rgb) / 0.4);
    background: rgb(var(--primary-rgb) / 0.08); color: var(--pink);
    cursor: pointer; transition: all 0.18s;
  }
  .btn-react:hover { background: rgb(var(--primary-rgb) / 0.18); border-color: var(--pink); }
  .reaction-picker {
    display: flex; gap: 4px; flex-wrap: wrap;
    padding: 7px 10px; border-radius: 12px;
    background: var(--navy2);
    border: 1px solid rgb(var(--primary-rgb) / 0.3);
    box-shadow: 0 4px 18px rgba(0,0,0,0.35);
    animation: toastIn 0.15s ease;
    width: fit-content;
  }
  .reaction-picker-emoji {
    background: none; border: 1px solid transparent;
    border-radius: 8px; font-size: 1.25rem;
    cursor: pointer; padding: 5px 6px;
    transition: all 0.12s; line-height: 1;
  }
  .reaction-picker-emoji:hover {
    background: rgb(var(--primary-rgb) / 0.12);
    border-color: rgb(var(--primary-rgb) / 0.2);
    transform: scale(1.18);
  }
  .reaction-picker-emoji.already-reacted {
    background: rgb(var(--primary-rgb) / 0.18);
    border-color: rgb(var(--primary-rgb) / 0.38);
  }
  /* Light mode */
  body.light-mode .reaction-picker {
    background: #fff;
    border-color: rgb(var(--primary-deep-rgb) / 0.25);
    box-shadow: 0 8px 24px rgb(var(--primary-deep-rgb) / 0.15);
  }
  body.light-mode .reaction-pill { background: rgba(255,255,255,0.9); }
  body.light-mode .reaction-pill.mine { background: rgb(var(--primary-deep-rgb) / 0.1); border-color: rgb(var(--primary-deep-rgb) / 0.4); }
  body.light-mode .reaction-picker-emoji:hover { background: rgb(var(--primary-deep-rgb) / 0.1); }
  body.light-mode .reaction-picker-emoji.already-reacted { background: rgb(var(--primary-deep-rgb) / 0.15); border-color: rgb(var(--primary-deep-rgb) / 0.3); }


  /* ═══════════════════════════════════════════════════════════════════
     v4.6.5 — NOTIFICATIONS, MENTIONS, BADGES, TRENDING, PROFILE PINS
     ═══════════════════════════════════════════════════════════════════ */

  /* ─── NOTIFICATION BELL & BADGE ─────────────────────────────────── */
  .notif-bell-wrap { position: relative; display: inline-block; }
  .btn-notif-bell {
    position: relative;
    padding: 6px 10px !important;
    font-size: 0.95rem !important;
    letter-spacing: 0 !important;
  }
  .notif-badge {
    position: absolute;
    top: -3px; right: -3px;
    background: var(--pink);
    color: #fff;
    font-family: 'Cinzel', serif;
    font-size: 0.6rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 999px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    border: 2px solid var(--navy, var(--navy2));
    animation: notifPulse 2.4s ease-in-out infinite;
  }
  @keyframes notifPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.12); }
  }

  /* ─── NOTIFICATION PANEL ─────────────────────────────────────────── */
  .notif-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 380px;
    max-width: 92vw;
    max-height: 480px;
    background: var(--navy2, var(--navy2));
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    box-shadow: 0 10px 32px rgba(0,0,0,0.55), 0 0 0 1px rgb(var(--primary-rgb) / 0.08);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: notifPanelIn 0.18s ease;
  }
  @keyframes notifPanelIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .notif-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--panel-border);
    background: linear-gradient(135deg, rgb(var(--primary-rgb) / 0.06), rgb(var(--secondary-rgb) / 0.04));
    flex-shrink: 0;
  }
  .notif-panel-title {
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    color: var(--gold2);
    text-transform: uppercase;
  }
  .notif-panel-actions { display: flex; gap: 6px; }
  .notif-action-btn {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--panel-border);
    color: var(--text-dim);
    border-radius: 6px;
    padding: 4px 10px;
    font-family: 'Cinzel', serif;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.15s;
  }
  .notif-action-btn:hover { border-color: var(--pink); color: var(--pink); background: rgb(var(--primary-rgb) / 0.08); }
  .notif-panel-list {
    overflow-y: auto;
    flex: 1;
    padding: 4px;
  }
  .notif-empty {
    text-align: center;
    padding: 30px 14px;
    color: var(--text-dim);
    font-style: italic;
    font-size: 0.88rem;
    line-height: 1.6;
  }

  /* ─── INDIVIDUAL NOTIF ITEM ─────────────────────────────────────── */
  .notif-item {
    position: relative;
    display: grid;
    grid-template-columns: 38px 1fr 12px;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    cursor: pointer;
    transition: background 0.15s;
    align-items: start;
  }
  .notif-item:last-child { border-bottom: none; }
  .notif-item:hover { background: rgb(var(--primary-rgb) / 0.06); }
  .notif-item.unread { background: rgb(var(--primary-rgb) / 0.04); }
  .notif-item.unread:hover { background: rgb(var(--primary-rgb) / 0.10); }
  .notif-avatar {
    position: relative;
    width: 36px; height: 36px;
    flex-shrink: 0;
  }
  .notif-avatar-img,
  .notif-avatar-text {
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: linear-gradient(135deg, var(--pink), var(--gold));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 0.95rem;
  }
  .notif-type-icon {
    position: absolute;
    bottom: -3px; right: -3px;
    background: var(--navy2, var(--navy2));
    border: 1.5px solid var(--panel-border);
    border-radius: 50%;
    width: 18px; height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    line-height: 1;
  }
  .notif-body { min-width: 0; }
  .notif-text {
    font-size: 0.86rem;
    color: var(--text);
    line-height: 1.45;
    word-break: break-word;
  }
  .notif-text strong {
    color: var(--gold2);
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    font-weight: 500;
  }
  .notif-post-title {
    color: var(--pink2);
    font-style: italic;
  }
  .notif-excerpt {
    margin-top: 4px;
    padding: 5px 9px;
    background: rgba(0,0,0,0.18);
    border-left: 2px solid var(--panel-border);
    border-radius: 0 5px 5px 0;
    font-size: 0.76rem;
    color: var(--text-dim);
    font-style: italic;
    line-height: 1.4;
  }
  .notif-time {
    margin-top: 5px;
    font-size: 0.7rem;
    color: var(--text-dim);
    letter-spacing: 0.05em;
  }
  .notif-unread-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--pink);
    margin-top: 6px;
    box-shadow: 0 0 6px rgb(var(--primary-rgb) / 0.6);
    flex-shrink: 0;
  }

  /* ─── @MENTION LINKS (in posts/comments) ─────────────────────────── */
  .mention-link {
    color: var(--pink);
    background: rgb(var(--primary-rgb) / 0.08);
    border: 1px solid rgb(var(--primary-rgb) / 0.22);
    border-radius: 5px;
    padding: 0 5px;
    cursor: pointer;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s;
    font-size: 0.92em;
    display: inline-block;
    line-height: 1.4;
  }
  .mention-link:hover {
    background: rgb(var(--primary-rgb) / 0.18);
    border-color: rgb(var(--primary-rgb) / 0.45);
    color: var(--pink2);
  }

  /* ─── @MENTION AUTOCOMPLETE ─────────────────────────────────────── */
  .mention-autocomplete {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    background: var(--navy2, var(--navy2));
    border: 1px solid var(--pink);
    border-radius: 10px;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.85);
    z-index: 9999;
    min-width: 240px;
    max-width: 320px;
    overflow: hidden;
  }
  .mention-autocomplete-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.1s;
  }
  .mention-autocomplete-row:hover { background: rgb(var(--primary-rgb) / 0.18); }
  .mention-ac-avatar {
    width: 26px; height: 26px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
  }
  .mention-ac-avatar-text {
    background: linear-gradient(135deg, var(--pink), var(--gold));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    font-weight: 600;
  }
  .mention-ac-name {
    font-size: 0.86rem;
    color: var(--text);
    font-family: 'Crimson Pro', serif;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ─── ACHIEVEMENT BADGES ─────────────────────────────────────────── */
  .view-user-badges, .profile-badges {
    display: block;
    margin-bottom: 12px;
    padding: 4px 0 8px;
  }
  .badges-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px 5px 8px;
    background: linear-gradient(135deg, rgba(244,205,144,0.10), rgb(var(--primary-rgb) / 0.08));
    border: 1px solid rgba(244,205,144,0.28);
    border-radius: 999px;
    transition: all 0.18s;
    cursor: help;
  }
  .badge-pill:hover {
    border-color: rgba(244,205,144,0.55);
    background: linear-gradient(135deg, rgba(244,205,144,0.18), rgb(var(--primary-rgb) / 0.14));
    transform: translateY(-1px);
  }
  .badge-icon { font-size: 0.95rem; line-height: 1; }
  .badge-name {
    font-family: 'Cinzel', serif;
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    color: var(--gold2);
    text-transform: uppercase;
  }
  .badges-empty {
    font-size: 0.82rem;
    color: var(--text-dim);
    font-style: italic;
    padding: 4px 2px;
  }

  /* ─── TRENDING TAGS STRIP ────────────────────────────────────────── */
  .trending-tags-wrap {
    margin: 14px 0 18px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgb(var(--secondary-rgb) / 0.04), rgb(var(--primary-rgb) / 0.04));
    border: 1px solid var(--panel-border);
    border-radius: 12px;
  }
  .trending-tags-header {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
  }
  .trending-tags-icon { font-size: 0.95rem; }
  .trending-tags-label {
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    color: var(--gold2);
    text-transform: uppercase;
    flex: 1;
  }
  .trending-tags-chevron {
    font-size: 0.7rem;
    color: var(--text-dim);
    transition: transform 0.22s ease;
  }
  .trending-tags-wrap.collapsed .trending-tags-chevron { transform: rotate(-90deg); }
  .trending-tags-wrap.collapsed .trending-tags-list    { display: none; }
  .trending-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    align-items: center;
  }
  .trending-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 11px;
    background: rgb(var(--primary-rgb) / 0.08);
    border: 1px solid rgb(var(--primary-rgb) / 0.22);
    border-radius: 999px;
    color: var(--pink);
    font-family: 'Crimson Pro', serif;
    cursor: pointer;
    transition: all 0.18s;
    line-height: 1.4;
    white-space: nowrap;
  }
  .trending-tag:hover {
    background: rgb(var(--primary-rgb) / 0.18);
    border-color: rgb(var(--primary-rgb) / 0.5);
    transform: translateY(-1px);
    color: var(--pink2);
  }
  .trending-tag-count {
    font-size: 0.7rem;
    opacity: 0.7;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.04em;
  }

  /* ─── PROFILE PIN BUTTON (in detail action row) ──────────────────── */
  .btn-profile-pin {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--panel-border);
    color: var(--text-dim);
    border-radius: 8px;
    padding: 6px 12px;
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.18s;
  }
  .btn-profile-pin:hover {
    border-color: var(--pink);
    color: var(--pink);
    background: rgb(var(--primary-rgb) / 0.08);
  }
  .btn-profile-pin.active {
    background: rgb(var(--primary-rgb) / 0.18);
    border-color: var(--pink);
    color: var(--pink2);
  }

  /* ─── VIEW USER section labels ───────────────────────────────────── */
  .view-user-section-label {
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    color: var(--gold2);
    text-transform: uppercase;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--panel-border);
  }
  .view-post-row.pinned-row {
    background: rgb(var(--primary-rgb) / 0.06);
    border: 1px solid rgb(var(--primary-rgb) / 0.2);
    border-radius: 7px;
    padding: 6px 9px;
    margin-bottom: 4px;
  }

  /* ─── LIGHT MODE OVERRIDES ───────────────────────────────────────── */
  body.light-mode .notif-panel {
    background: #fff;
    box-shadow: 0 10px 32px rgb(var(--primary-deep-rgb) / 0.18);
  }
  body.light-mode .notif-badge {
    border-color: #fff;
  }
  body.light-mode .notif-item.unread { background: rgb(var(--primary-deep-rgb) / 0.06); }
  body.light-mode .notif-type-icon { background: #fff; }
  body.light-mode .mention-autocomplete { background: #fff; }
  body.light-mode .mention-link {
    background: rgb(var(--primary-deep-rgb) / 0.08);
    border-color: rgb(var(--primary-deep-rgb) / 0.22);
  }
  body.light-mode .mention-link:hover {
    background: rgb(var(--primary-deep-rgb) / 0.16);
  }

  /* ─── @MENTION LIVE PREVIEW (v4.6.6) ─────────────────────────────── */
  .mention-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 7px 11px;
    background: rgb(var(--secondary-rgb) / 0.04);
    border: 1px dashed rgb(var(--primary-rgb) / 0.22);
    border-radius: 8px;
    font-family: 'Crimson Pro', serif;
    font-size: 0.82rem;
    line-height: 1.4;
    animation: mentionPreviewIn 0.18s ease;
  }
  @keyframes mentionPreviewIn {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .mention-preview-label {
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    color: var(--text-dim);
    text-transform: uppercase;
    margin-right: 2px;
    flex-shrink: 0;
  }
  .mention-preview-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px 3px 8px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1.3;
    white-space: nowrap;
    font-size: 0.82rem;
  }
  /* Recognized — vibrant clickable pill */
  .mention-preview-pill.ok {
    background: rgb(var(--primary-rgb) / 0.14);
    border: 1px solid rgb(var(--primary-rgb) / 0.4);
    color: var(--pink);
  }
  .mention-preview-pill.ok:hover {
    background: rgb(var(--primary-rgb) / 0.24);
    border-color: var(--pink);
    color: var(--pink2);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgb(var(--primary-rgb) / 0.25);
  }
  /* Unrecognized — faded warning, not clickable */
  .mention-preview-pill.bad {
    background: rgba(255,255,255,0.03);
    border: 1px dashed rgb(var(--primary-soft-rgb) / 0.3);
    color: var(--text-dim);
    cursor: help;
    text-decoration: line-through;
    text-decoration-color: rgb(var(--primary-soft-rgb) / 0.4);
  }
  .mention-preview-icon {
    font-size: 0.72rem;
    line-height: 1;
    flex-shrink: 0;
  }
  .mention-preview-pill.ok .mention-preview-icon {
    color: var(--pink);
    font-weight: 700;
  }

  /* Light mode */
  body.light-mode .mention-preview {
    background: rgb(var(--primary-deep-rgb) / 0.04);
    border-color: rgb(var(--primary-deep-rgb) / 0.22);
  }
  body.light-mode .mention-preview-pill.ok {
    background: rgb(var(--primary-deep-rgb) / 0.10);
    border-color: rgb(var(--primary-deep-rgb) / 0.4);
  }
  body.light-mode .mention-preview-pill.ok:hover {
    background: rgb(var(--primary-deep-rgb) / 0.18);
  }

  /* ─── BELL FLASH ON NEW NOTIF (v4.6.7) ───────────────────────────── */
  @keyframes notifBellShake {
    0%, 100% { transform: rotate(0deg); }
    15%      { transform: rotate(-12deg); }
    30%      { transform: rotate(10deg); }
    45%      { transform: rotate(-8deg); }
    60%      { transform: rotate(6deg); }
    75%      { transform: rotate(-4deg); }
  }
  .notif-bell-flash {
    animation: notifBellShake 0.6s ease-in-out 2;
    border-color: var(--pink) !important;
    background: rgb(var(--primary-rgb) / 0.18) !important;
  }

  /* ─── PROFILE MY-POSTS PINNED ROW (v4.6.8) ────────────────────────── */
  .my-post-row-pinned {
    background: linear-gradient(135deg, rgb(var(--primary-rgb) / 0.07), rgb(var(--secondary-rgb) / 0.04));
    border: 1px solid rgb(var(--primary-rgb) / 0.22);
    border-radius: 9px;
    padding: 7px 10px;
    margin-bottom: 4px;
    transition: all 0.18s;
  }
  .my-post-row-pinned:hover {
    border-color: rgb(var(--primary-rgb) / 0.45);
    background: linear-gradient(135deg, rgb(var(--primary-rgb) / 0.13), rgb(var(--secondary-rgb) / 0.07));
  }
  .my-post-unpin {
    background: rgb(var(--primary-soft-rgb) / 0.08);
    border: 1px solid rgb(var(--primary-soft-rgb) / 0.25);
    color: var(--red);
    border-radius: 50%;
    width: 22px; height: 22px;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
  }
  .my-post-unpin:hover {
    background: rgb(var(--primary-soft-rgb) / 0.22);
    border-color: var(--red);
    transform: rotate(90deg);
  }