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

  :root {
    --navy:  #091525;
    --navy2: #0d1e32;
    --navy3: #122540;
    --panel: rgba(120,190,230,0.06);
    --panel-border: rgba(120,190,230,0.14);
    --gold:  #88c8e8;
    --gold2: #b2def5;
    --gold-dim: rgba(136,200,232,0.15);
    --text:  #dceef8;
    --text-dim: #6a8ea8;
    --blue-accent: #f0a0c0;
    --red:   #e88898;
    --green: #88c5a4;
    --pink:  #f0a0c0;
    --pink2: #f8c8d8;
    --radius: 12px;
  }

  * { 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%, rgba(100,180,230,0.09) 0%, transparent 60%),
      radial-gradient(ellipse 60% 40% at 80% 80%, rgba(240,160,192,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 rgba(240,160,192,0.3);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 0 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(240,160,192,0.05) inset;
    position: relative;
  }

  .container::before {
    content: '';
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(240,160,192,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, #060f1e 0%, #0a1830 100%);
    border-bottom: 1px solid rgba(240,160,192,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 rgba(240,160,192,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: rgba(240,160,192,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: #0d1528;
  }
  .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: rgba(240,160,192,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: rgba(240,160,192,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: rgba(240,160,192,0.08);
    border: 1px solid rgba(240,160,192,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: rgba(240,160,192,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: rgba(240,160,192,0.25);
  }

  .bookmark-card.mine {
    border-color: rgba(240,160,192,0.2);
  }

  .mine-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--gold-dim);
    border: 1px solid rgba(240,160,192,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: rgba(8,13,26,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: rgba(240,160,192,0.12);
    border: 1px solid rgba(240,160,192,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: rgba(4,9,18,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 rgba(240,160,192,0.35);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 0 80px rgba(0,0,0,0.8), 0 0 0 1px rgba(240,160,192,0.05) inset;
    animation: cardIn 0.4s ease both;
    margin: 20px;
  }

  .login-hero {
    background: linear-gradient(180deg, #060f1e 0%, #0a1830 100%);
    border-bottom: 1px solid rgba(240,160,192,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 rgba(240,160,192,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: rgba(240,160,192,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: #080d1a;
    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 rgba(240,160,192,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: rgba(240,160,192,0.05);
    border: 1px solid rgba(240,160,192,0.15);
    transition: background 0.18s, border-color 0.18s;
    margin-bottom: 0;
  }
  .admin-section-header:hover { background: rgba(240,160,192,0.1); border-color: rgba(240,160,192,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: rgba(136,200,232,0.05);
    user-select: none;
    transition: background 0.15s;
    gap: 10px;
  }
  .faq-question:hover { background: rgba(136,200,232,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: rgba(240,160,192,0.04);
    border: 1px solid rgba(240,160,192,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: rgba(240,160,192,0.4); }
  .faq-add-form textarea { min-height: 80px; resize: vertical; }
  .btn-faq-remove {
    background: rgba(232,136,152,0.08);
    border: 1px solid rgba(232,136,152,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: rgba(232,136,152,0.2); }

  /* ─── 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: rgba(136,200,232,0.07); border-color: var(--panel-border); }
  .user-posts-row.active-filter { background: rgba(240,160,192,0.08); border-color: rgba(240,160,192,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: rgba(136,200,232,0.08); border: 1px solid rgba(136,200,232,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 rgba(240,160,192,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 rgba(240,160,192,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-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: rgba(136,200,232,0.04);
    border: 1px solid rgba(136,200,232,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: rgba(136,200,232,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: rgba(136,200,232,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,rgba(136,200,232,0.2),rgba(240,160,192,0.2));
    border: 1px solid rgba(240,160,192,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 rgba(136,200,232,0.4); }
  .activity-type-like    { border-left: 3px solid rgba(240,160,192,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: rgba(240,160,192,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 rgba(240,160,192,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,rgba(136,200,232,0.25),rgba(240,160,192,0.25));
    border: 1px solid rgba(240,160,192,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,rgba(136,200,232,0.25),rgba(240,160,192,0.25));
    border: 1px solid rgba(240,160,192,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: rgba(136,200,232,0.05); border-color: var(--panel-border); }
  .mod-actions-panel {
    margin-top: 16px; padding: 14px;
    background: rgba(240,160,192,0.04);
    border: 1px solid rgba(240,160,192,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: rgba(136,200,232,0.08); border: 1px solid rgba(136,200,232,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: rgba(136,200,232,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: rgba(8,13,26,0.45);
    cursor: pointer;
  }
  .nsfw-label {
    font-family: 'Cinzel', serif; font-size: 0.65rem; letter-spacing: 0.14em;
    color: rgba(240,160,192,0.9); text-transform: uppercase;
    background: rgba(8,13,26,0.75); padding: 3px 10px; border-radius: 10px;
    border: 1px solid rgba(240,160,192,0.25);
  }
  .nsfw-reveal-btn {
    font-family: 'Cinzel', serif; font-size: 0.6rem; letter-spacing: 0.1em;
    background: rgba(240,160,192,0.15); border: 1px solid rgba(240,160,192,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: rgba(240,160,192,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: rgba(8,13,26,0.88);
    border: 1px solid rgba(136,200,232,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: rgba(136,200,232,0.08);
    border: 1px solid rgba(136,200,232,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: rgba(136,200,232,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: rgba(136,200,232,0.04);
    border: 1px solid rgba(136,200,232,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: rgba(136,200,232,0.4); }
  /* ─── PENDING ACCOUNTS ───────────────────────────────────────── */
  .pending-badge {
    font-size: 0.65rem; padding: 2px 7px; border-radius: 4px;
    background: rgba(136,200,232,0.15); border: 1px solid rgba(136,200,232,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: rgba(232,136,152,0.1); border: 1px solid rgba(232,136,152,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: rgba(232,136,152,0.22); }
  /* Registration panel on login screen */
  .register-panel {
    margin-top: 16px; padding-top: 16px;
    border-top: 1px solid rgba(240,160,192,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 rgba(240,160,192,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: rgba(136,200,232,0.04);
    border: 1px solid rgba(136,200,232,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: rgba(240,160,192,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; }
  .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: rgba(240,160,192,0.2); color: var(--pink2); border: 1px solid rgba(240,160,192,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: rgba(240,160,192,0.05);
    border: 1px solid rgba(240,160,192,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: rgba(240,160,192,0.45); }
  .role-change-select:hover { border-color: rgba(240,160,192,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: rgba(240,160,192,0.45);
  }

  /* ─── CARD OWNER BADGE ───────────────────────────────────────────────────── */
  .owner-badge {
    position: absolute; top: 8px; left: 8px;
    background: rgba(8,13,26,0.85);
    border: 1px solid rgba(240,160,192,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 rgba(240,160,192,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: rgba(240,160,192,0.45); }
  .sort-select option { background: var(--navy2); }

  /* Global: ensure all native select dropdowns are readable */
  select option { background: #0d1e32; color: #dceef8; }

  /* ─── 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: rgba(240,160,192,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: rgba(240,160,192,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: rgba(91,196,245,0.15);  border-color: rgba(91,196,245,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: rgba(240,127,160,0.15); border-color: rgba(240,127,160,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: rgba(91,196,245,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: rgba(240,127,160,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: rgba(240,160,192,0.4); }
  .edit-form {
    border-top: 1px solid rgba(240,160,192,0.2);
    padding: 14px;
    background: rgba(240,160,192,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: rgba(240,160,192,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: rgba(240,160,192,0.08);
    border: 1px solid rgba(240,160,192,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: rgba(240,160,192,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: rgba(240,160,192,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: rgba(240,160,192,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: rgba(240,160,192,0.1);
    border: 1px solid rgba(240,160,192,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: rgba(240,160,192,0.18); }
  .btn-like.liked { background: rgba(240,160,192,0.22); border-color: var(--pink); color: var(--pink2); }

  .btn-comments-toggle {
    background: rgba(136,200,232,0.08);
    border: 1px solid rgba(136,200,232,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: rgba(240,160,192,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: rgba(136,200,232,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: rgba(240,160,192,0.5); }
  .comment-submit {
    background: rgba(136,200,232,0.15); border: 1px solid rgba(136,200,232,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: rgba(240,160,192,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: rgba(240,160,192,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: rgba(240,160,192,0.1); }
  .page-num.active { background: rgba(240,160,192,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: rgba(136,200,232,0.1);
    border: 1px solid rgba(136,200,232,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: rgba(136,200,232,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: rgba(136,200,232,0.15); color: var(--gold2); }
  .det-badge.feat { background: rgba(232,200,100,0.15); color: #e8c864; }
  .det-badge.draft{ background: rgba(240,160,192,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: rgba(240,160,192,0.45);
    box-shadow: 0 0 0 1px rgba(240,160,192,0.2), 0 4px 20px rgba(0,0,0,0.5);
  }
  .pin-strip {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    background: rgba(240,160,192,0.12);
    border-bottom: 1px solid rgba(240,160,192,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: rgba(240,160,192,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: rgba(136,200,232,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 rgba(232,136,152,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: rgba(232,136,152,0.1); }
  .btn-upload-img {
  background: rgba(136,200,232,0.1);
  border: 1px solid rgba(136,200,232,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: rgba(136,200,232,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: rgba(136,200,232,0.06);
    border: 1px dashed rgba(136,200,232,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 rgba(240,160,192,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 rgba(240,160,192,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, rgba(136,200,232,0.25), rgba(240,160,192,0.25));
    border: 2px solid rgba(240,160,192,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: rgba(232,136,152,0.06);
    border: 1px solid rgba(232,136,152,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: rgba(232,136,152,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: rgba(240,160,192,0.08); }
  .btn-userbar-admin:hover { border-color: var(--gold); color: var(--gold2); background: rgba(136,200,232,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 rgba(240,160,192,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: rgba(240,160,192,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: rgba(8,13,26,0.92);
    border: 1px solid rgba(240,160,192,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: rgba(136,200,232,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: rgba(136,200,232,0.08); border: 1px solid rgba(136,200,232,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: rgba(136,200,232,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: rgba(240,160,192,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: rgba(240,160,192,0.1); border: 1px solid rgba(240,160,192,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: rgba(240,160,192,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 ──────────────────────────────────────────────── */
  body.light-mode {
    --navy:  #fdf0f5;
    --navy2: #f8e0eb;
    --navy3: #f0ccdc;
    --panel: rgba(240,160,192,0.08);
    --panel-border: rgba(240,160,192,0.28);
    --gold:  #3a7abf;
    --gold2: #2060a0;
    --gold-dim: rgba(136,200,232,0.2);
    --text:  #1a2a3a;
    --text-dim: #6a7a8a;
    --pink:  #c0508a;
    --pink2: #e078b0;
    --red:   #c03050;
    --green: #287050;
    background: #fdf0f5;
    color: #1a2a3a;
  }
  body.light-mode::before { opacity: 0.04; }
  body.light-mode .bookmark-card {
    background: rgba(255,255,255,0.85);
    box-shadow: 0 2px 12px rgba(180,100,140,0.12);
  }
  body.light-mode .bookmark-card:hover { box-shadow: 0 8px 28px rgba(180,100,140,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: rgba(240,160,192,0.06) !important;
    color: #1a2a3a !important;
    border-color: rgba(240,160,192,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: rgba(250,230,240,0.97); }
  .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 rgba(240,160,192,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, rgba(9,21,37,0.92) 0%, rgba(9,21,37,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, rgba(9,21,37,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: rgba(240,160,192,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: #88c8e8; border-color: rgba(136,200,232,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, rgba(240,160,192,0.18), rgba(136,200,232,0.12));
    border: 1px solid rgba(240,160,192,0.5);
    box-shadow: 0 0 24px rgba(240,160,192,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%, rgba(240,160,192,0.06) 50%, transparent 100%);
    animation: rezzShine 2.5s ease-in-out infinite;
  }
  @keyframes rezzPulse {
    0%,100% { box-shadow: 0 0 18px rgba(240,160,192,0.15); }
    50%      { box-shadow: 0 0 36px rgba(240,160,192,0.35); }
  }
  @keyframes rezzShine {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }
  .rezzday-icon { font-size: 2rem; filter: drop-shadow(0 0 8px rgba(240,160,192,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 rgba(240,160,192,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: rgba(240,160,192,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: rgba(240,160,192,0.5);
    background: rgba(240,160,192,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: rgba(136,200,232,0.15);
    border: 1px solid rgba(136,200,232,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: rgba(240,160,192,0.25); border-color: var(--pink); }
  .cal-event-dot.recurring { border-color: rgba(136,200,232,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: rgba(240,160,192,0.3); }
  .cal-event-item.today-event { border-color: rgba(240,160,192,0.5); background: rgba(240,160,192,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: rgba(240,160,192,0.2); color: var(--pink2); border: 1px solid rgba(240,160,192,0.4); }
  .cal-badge-past   { background: rgba(106,142,168,0.15); color: var(--text-dim); border: 1px solid rgba(106,142,168,0.25); }
  .cal-badge-recur  { background: rgba(136,200,232,0.12); color: var(--gold2); border: 1px solid rgba(136,200,232,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: rgba(136,200,232,0.1);
    border: 1px solid rgba(136,200,232,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: rgba(136,200,232,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: rgba(136,200,232,0.04);
    border: 1px dashed rgba(136,200,232,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 rgba(136,200,232,0.2);
  }
  .cal-happening-today {
    background: linear-gradient(135deg, rgba(240,160,192,0.1), rgba(136,200,232,0.06));
    border: 1px solid rgba(240,160,192,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 rgba(136,200,232,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: rgba(136,200,232,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: rgba(136,200,232,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, rgba(136,200,232,0.07), rgba(240,160,192,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:rgba(240,160,192,0.12); color:#f0a0c0; border-color:rgba(240,160,192,0.3); }
  .loc-cat-Roleplay    { background:rgba(136,200,232,0.1);  color:#88c8e8; border-color:rgba(136,200,232,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:rgba(178,222,245,0.1);  color:#b2def5; border-color:rgba(178,222,245,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:rgba(106,142,168,0.1);  color:#6a8ea8; border-color:rgba(106,142,168,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: rgba(136,200,232,0.1);
    border: 1px solid rgba(136,200,232,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: rgba(136,200,232,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 rgba(136,200,232,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: rgba(136,200,232,0.04);
    border: 1px dashed rgba(136,200,232,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: rgba(136,200,232,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:#0d1e32; color:#dceef8; }
  /* 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 rgba(240,160,192,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 rgba(240,160,192,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: rgba(240,160,192,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: rgba(232,136,152,0.1);  border: 1px solid rgba(232,136,152,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: rgba(240,160,192,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), #f8c8d8); }
  .poll-vote-btn {
    width: 100%; margin-top: 12px; padding: 9px;
    background: linear-gradient(135deg, var(--gold), var(--gold2));
    color: #0d1528; 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 rgba(240,160,192,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: rgba(136,200,232,0.04); border: 1px solid rgba(136,200,232,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: rgba(136,200,232,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 rgba(232,136,152,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: rgba(232,136,152,0.1); }
  .btn-add-poll-opt {
    background: rgba(136,200,232,0.06); border: 1px dashed rgba(136,200,232,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: rgba(240,160,192,0.06); }
  .poll-toggle-pill.active,
  .poll-toggle-pill[data-active="true"] {
    background: rgba(240,160,192,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: rgba(240,160,192,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: rgba(9,21,37,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 rgba(136,200,232,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: rgba(136,200,232,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: rgba(136,200,232,0.12); border: 1px solid rgba(136,200,232,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: rgba(240,160,192,0.12); border: 1px solid rgba(240,160,192,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: rgba(192,80,138,0.25);
    box-shadow: -8px 0 48px rgba(180,100,140,0.15);
  }
  body.light-mode .polls-panel-header { border-color: rgba(192,80,138,0.15); }
  body.light-mode .poll-card {
    background: rgba(255,255,255,0.95);
    border-color: rgba(192,80,138,0.18);
    box-shadow: 0 2px 10px rgba(180,100,140,0.08);
  }
  body.light-mode .poll-card-header { border-color: rgba(192,80,138,0.12); }
  body.light-mode .poll-question { color: #1a2a3a; }
  body.light-mode .poll-option-btn {
    background: rgba(255,255,255,0.9);
    border-color: rgba(192,80,138,0.2);
    color: #1a2a3a;
  }
  body.light-mode .poll-option-btn:hover {
    background: rgba(192,80,138,0.06);
    border-color: var(--pink);
  }
  body.light-mode .poll-result-label { color: #1a2a3a; }
  body.light-mode .poll-result-track { background: rgba(0,0,0,0.1); }
  body.light-mode .poll-add-form {
    background: rgba(192,80,138,0.05);
    border-color: rgba(192,80,138,0.2);
  }
  body.light-mode .poll-add-form input,
  body.light-mode .poll-add-form select {
    background: #fff !important;
    color: #1a2a3a !important;
    border-color: rgba(192,80,138,0.25) !important;
  }
  body.light-mode .poll-hidden-notice {
    color: #4a5a6a;
    border-color: rgba(192,80,138,0.25);
  }
  body.light-mode .btn-add-poll-opt {
    background: rgba(192,80,138,0.04);
    border-color: rgba(192,80,138,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: rgba(192,80,138,0.3);
    color: var(--pink);
    box-shadow: -4px 0 16px rgba(180,100,140,0.15);
  }

  /* ─── LIGHT MODE: AVATAR LOOKBOOK  — v4.6.1 ─────────────────────── */
  body.light-mode .lookbook-card {
    background: #fff;
    border-color: rgba(192,80,138,0.18);
    box-shadow: 0 2px 12px rgba(180,100,140,0.1);
  }
  body.light-mode .lookbook-card:hover {
    box-shadow: 0 8px 24px rgba(180,100,140,0.2);
    border-color: rgba(192,80,138,0.35);
  }
  body.light-mode .lookbook-card-title { color: #1a2a3a; }
  body.light-mode .lookbook-img-placeholder {
    background: rgba(192,80,138,0.06);
    color: rgba(192,80,138,0.4);
  }
  body.light-mode #lookbookDetailOverlay .loc-detail-box { background: #fff; }
  body.light-mode .lb-detail-cred-row { border-color: rgba(192,80,138,0.15); }
  body.light-mode .lb-detail-cred-item { color: #1a2a3a; }

  /* ─── LIGHT MODE: GROUP NOTICES  — v4.6.1 ───────────────────────── */
  body.light-mode .notice-card {
    background: rgba(255,255,255,0.9);
    border-color: rgba(192,80,138,0.18);
  }
  body.light-mode .notice-card:hover { border-color: rgba(192,80,138,0.3); }
  body.light-mode .notice-title { color: #1a2a3a; }
  body.light-mode .notice-meta  { color: #4a5a6a; }
  body.light-mode .notice-body-text { color: #2a3a4a; }
  body.light-mode .notice-body-wrap { border-color: rgba(192,80,138,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: rgba(192,80,138,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: rgba(192,80,138,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: rgba(240,160,192,0.08); color: var(--text); }
  .reaction-pill.mine {
    border-color: rgba(240,160,192,0.5);
    background: rgba(240,160,192,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 rgba(240,160,192,0.4);
    background: rgba(240,160,192,0.08); color: var(--pink);
    cursor: pointer; transition: all 0.18s;
  }
  .btn-react:hover { background: rgba(240,160,192,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 rgba(240,160,192,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: rgba(240,160,192,0.12);
    border-color: rgba(240,160,192,0.2);
    transform: scale(1.18);
  }
  .reaction-picker-emoji.already-reacted {
    background: rgba(240,160,192,0.18);
    border-color: rgba(240,160,192,0.38);
  }
  /* Light mode */
  body.light-mode .reaction-picker {
    background: #fff;
    border-color: rgba(192,80,138,0.25);
    box-shadow: 0 8px 24px rgba(180,100,140,0.15);
  }
  body.light-mode .reaction-pill { background: rgba(255,255,255,0.9); }
  body.light-mode .reaction-pill.mine { background: rgba(192,80,138,0.1); border-color: rgba(192,80,138,0.4); }
  body.light-mode .reaction-picker-emoji:hover { background: rgba(192,80,138,0.1); }
  body.light-mode .reaction-picker-emoji.already-reacted { background: rgba(192,80,138,0.15); border-color: rgba(192,80,138,0.3); }