/* Vampire Panic — comments + forum island styles (self-contained).
   Decoupled from the React bundle; safe to edit without rebuilding app.js. */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Cinzel+Decorative:wght@700&family=EB+Garamond:ital@0;1&display=swap');
#site-comments, #vp-forum{
  --ink:#e9dec7; --ink-dim:#bcae93; --muted:#9a8e75;
  --gold:#c79a3e; --blood:#a01c1c; --blood-bright:#c4453f;
  --line:rgba(201,165,92,.18); --panel:#15110d; --panel2:#1a1510;
  --ac:#c4453f; --c-science:#7aa06a;
}
  /* ---------- Comments ---------- */
  .thread{ margin-top:16px; border-top:1px solid var(--line); padding-top:14px; }
  .thread .th-head{ font-family:'Cinzel',serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:12px; display:flex; align-items:center; gap:8px; }
  .thread .th-head .cnt{ font-family:'EB Garamond',serif; letter-spacing:0; color:var(--muted); font-size:13px; }
  .c-list{ display:flex; flex-direction:column; gap:12px; }
  .c-item{ background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:11px 13px; }
  .c-item.reply{ margin-left:18px; border-left:2px solid var(--ac, var(--blood)); }
  .c-meta{ display:flex; align-items:baseline; gap:9px; margin-bottom:5px; flex-wrap:wrap; }
  .c-name{ font-family:'Cinzel',serif; font-size:13px; color:var(--ink); font-weight:600; }
  .c-time{ font-size:12px; color:var(--muted); font-style:italic; }
  .c-body{ font-size:15px; color:var(--ink-dim); white-space:pre-wrap; word-break:break-word; }
  .c-actions{ margin-top:7px; display:flex; gap:14px; }
  .c-actions button{ background:none; border:0; color:var(--muted); font-family:'Cinzel',serif; font-size:10px; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; padding:0; transition:color .15s; }
  .c-actions button:hover{ color:var(--gold); }
  .c-empty{ font-size:14px; color:var(--muted); font-style:italic; }
  .c-form{ margin-top:14px; display:flex; flex-direction:column; gap:9px; }
  .c-form textarea, .c-form input[type=email], .c-form input[type=text]{
    width:100%; background:var(--panel); border:1px solid var(--line); border-radius:7px;
    color:var(--ink); font-family:'EB Garamond',serif; font-size:15px; padding:10px 12px; resize:vertical; outline:none;
  }
  .c-form textarea:focus, .c-form input:focus{ border-color:var(--gold); }
  .c-form textarea{ min-height:74px; }
  .c-row{ display:flex; gap:9px; align-items:center; flex-wrap:wrap; }
  .c-btn{ font-family:'Cinzel',serif; font-size:11px; letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
    background:var(--blood); color:#f4e6d6; border:1px solid var(--blood-bright); border-radius:7px; padding:9px 16px; transition:all .15s; }
  .c-btn:hover{ background:var(--blood-bright); }
  .c-btn.ghost{ background:transparent; color:var(--ink-dim); border-color:var(--line); }
  .c-btn.ghost:hover{ color:var(--gold); border-color:var(--gold); }
  .c-btn:disabled{ opacity:.5; cursor:default; }
  .c-note{ font-size:13px; color:var(--muted); font-style:italic; }
  .c-note.ok{ color:var(--c-science); }
  .c-note.err{ color:var(--blood-bright); }
  .c-honey{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
  .reply-box{ margin:10px 0 2px 18px; }
  /* site-wide */
  #site-comments{ max-width:780px; margin:48px auto 0; padding:0 16px; position:relative; z-index:1; }
  #site-comments .sc-title{ font-family:'Cinzel Decorative',serif; font-weight:700; font-size:24px; color:var(--ink); text-align:center; }
  #site-comments .sc-sub{ text-align:center; color:var(--muted); font-style:italic; margin:6px 0 22px; font-size:15px; }
  #site-comments .thread{ border-top:0; }

/* ===================== Vampire Panic — Forum styles ===================== */
#vp-forum{
  position:fixed; inset:0; z-index:1000; overflow-y:auto;
  background:radial-gradient(1200px 600px at 50% -10%, rgba(160,28,28,.10), transparent 60%), #0c0a09;
  color:var(--ink, #e9dec7);
  font-family:'EB Garamond', Georgia, serif;
  padding:0 0 80px;
}
body.fx-open{ overflow:hidden; }
.fx-bar{
  position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:16px;
  padding:14px 22px; background:rgba(12,10,9,.92); backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(201,165,92,.25);
}
.fx-home{ font-family:'Cinzel', serif; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  font-size:13px; color:var(--gold,#c9a55c); text-decoration:none; }
.fx-id{ margin-left:auto; font-size:13px; color:var(--ink-dim,#bcae93); }
.fx-id a, .fx-signin{ color:var(--blood-bright,#c93030); text-decoration:none; border-bottom:1px dotted; cursor:pointer; }
.fx-mod{ font-size:12px; color:var(--gold); text-decoration:none; border:1px solid rgba(201,165,92,.4);
  padding:4px 10px; border-radius:20px; }
.fx-body{ max-width:760px; margin:0 auto; padding:30px 22px; }
.fx-loading{ max-width:760px; margin:60px auto; text-align:center; color:var(--ink-dim); font-style:italic; }
.fx-h{ font-family:'Cinzel Decorative','Cinzel',serif; font-size:30px; color:var(--ink); margin:6px 0 6px; line-height:1.15; }
.fx-sub{ color:var(--ink-dim); margin:0 0 22px; font-size:16px; }
.fx-crumbs{ font-size:13px; color:var(--ink-dim); margin-bottom:8px; }
.fx-crumbs a{ color:var(--gold); text-decoration:none; }
.fx-empty,.fx-note{ color:var(--ink-dim); font-style:italic; padding:14px 0; }
.fx-note{ font-size:14px; }

/* categories */
.fx-cats{ display:flex; flex-direction:column; gap:12px; }
.fx-cat{ display:flex; gap:16px; justify-content:space-between; align-items:center;
  padding:16px 18px; border:1px solid rgba(201,165,92,.22); border-radius:10px;
  background:rgba(255,255,255,.015); text-decoration:none; color:inherit; transition:border-color .15s, background .15s; }
.fx-cat:hover{ border-color:rgba(201,165,92,.55); background:rgba(160,28,28,.06); }
.fx-cat-name{ font-family:'Cinzel',serif; font-size:18px; color:var(--ink); }
.fx-cat-desc{ font-size:14px; color:var(--ink-dim); margin-top:3px; }
.fx-cat-meta{ text-align:right; font-size:12px; color:var(--ink-dim); min-width:120px; }
.fx-count{ display:block; color:var(--gold); }
.fx-latest{ display:block; margin-top:4px; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fx-latest.dim{ opacity:.6; }

/* threads list */
.fx-threads{ display:flex; flex-direction:column; gap:8px; margin-top:18px; }
.fx-thread{ display:block; padding:13px 16px; border:1px solid rgba(201,165,92,.18); border-radius:9px;
  text-decoration:none; color:inherit; background:rgba(255,255,255,.012); }
.fx-thread:hover{ border-color:rgba(201,165,92,.45); }
.fx-thread-t{ font-size:17px; color:var(--ink); }
.fx-thread-m{ display:flex; gap:14px; font-size:12px; color:var(--ink-dim); margin-top:5px; }
.fx-pin{ color:var(--gold); } .fx-lock{ opacity:.7; }

/* thread detail */
.fx-op{ padding:16px 18px; border:1px solid rgba(201,165,92,.3); border-radius:10px;
  background:rgba(160,28,28,.05); margin:8px 0 22px; }
.fx-post-m{ display:flex; gap:12px; align-items:baseline; margin-bottom:7px; }
.fx-post-name{ font-family:'Cinzel',serif; font-size:14px; color:var(--gold); }
.fx-post-time{ font-size:12px; color:var(--ink-dim); }
.fx-post-b{ font-size:16px; line-height:1.6; color:var(--ink); }
.fx-replies-h{ font-size:13px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.1em; margin:0 0 10px; }
.fx-replies{ display:flex; flex-direction:column; gap:10px; }
.fx-post{ padding:13px 16px; border-left:2px solid rgba(201,165,92,.25); background:rgba(255,255,255,.012); border-radius:0 8px 8px 0; }
.fx-postmod{ margin-top:8px; }

/* forms */
.fx-newform,.fx-replyform{ display:flex; flex-direction:column; gap:9px; margin:14px 0 6px; }
.fx-replyform{ margin-top:22px; padding-top:20px; border-top:1px solid rgba(201,165,92,.18); }
.fx-title,.fx-dname,.fx-bodyin{ width:100%; box-sizing:border-box; background:rgba(0,0,0,.3);
  border:1px solid rgba(201,165,92,.3); border-radius:7px; color:var(--ink); padding:10px 12px;
  font-family:'EB Garamond',serif; font-size:15px; }
.fx-bodyin{ min-height:96px; resize:vertical; line-height:1.5; }
.fx-honey{ position:absolute; left:-9999px; }
.fx-row{ display:flex; gap:10px; align-items:center; }
.fx-btn{ font-family:'Cinzel',serif; font-size:13px; letter-spacing:.06em; cursor:pointer;
  background:var(--blood,#a01c1c); color:#f4ead2; border:1px solid rgba(201,165,92,.4);
  padding:8px 18px; border-radius:7px; }
.fx-btn:hover{ background:var(--blood-bright,#c93030); }
.fx-btn.ghost{ background:transparent; color:var(--ink-dim); }
.fx-msg{ font-size:13px; color:var(--ink-dim); } .fx-msg.err{ color:var(--blood-bright); } .fx-msg.ok{ color:#7aa06a; }

/* moderation */
.fx-modbar{ display:flex; gap:8px; margin:0 0 16px; flex-wrap:wrap; }
.fx-mbtn{ font-size:12px; font-family:'Cinzel',serif; cursor:pointer; color:var(--ink-dim);
  background:transparent; border:1px solid rgba(201,165,92,.35); padding:5px 12px; border-radius:6px; }
.fx-mbtn:hover{ border-color:var(--gold); color:var(--gold); }
.fx-mbtn.danger:hover{ border-color:var(--blood-bright); color:var(--blood-bright); }
.fx-queue{ display:flex; flex-direction:column; gap:12px; }
.fx-q{ padding:14px 16px; border:1px solid rgba(201,165,92,.3); border-radius:10px; background:rgba(255,255,255,.015); }
.fx-q-h{ font-size:12px; color:var(--ink-dim); }
.fx-q-kind{ font-family:'Cinzel',serif; color:var(--gold); text-transform:uppercase; letter-spacing:.08em; }
.fx-q-t{ font-size:17px; color:var(--ink); margin:6px 0 2px; }
.fx-q-b{ font-size:15px; color:var(--ink); line-height:1.5; margin:6px 0 12px; }

/* entry to forum from the page */
.fx-launch{ display:inline-flex; align-items:center; gap:8px; margin-top:14px;
  font-family:'Cinzel',serif; font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold); text-decoration:none; border:1px solid rgba(201,165,92,.4); padding:9px 18px; border-radius:24px; }
.fx-launch:hover{ background:rgba(160,28,28,.1); border-color:var(--gold); }

@media (max-width:560px){
  .fx-h{ font-size:24px; } .fx-cat{ flex-direction:column; align-items:flex-start; }
  .fx-cat-meta{ text-align:left; } .fx-latest{ max-width:none; }
}


/* comment moderation panel */
.c-modpanel{ margin:10px 0 16px; padding:14px; border:1px solid rgba(201,165,92,.3); border-radius:9px; background:rgba(160,28,28,.05); }
.c-modhead{ font-family:'Cinzel',serif; font-size:13px; color:var(--gold,#c9a55c); text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px; }
.c-modrow{ padding:10px 0; border-top:1px solid rgba(201,165,92,.18); }
.c-modrow:first-of-type{ border-top:0; }
.c-modmeta{ font-size:12px; color:var(--muted,#9a8e75); margin-bottom:4px; }
.c-modbody{ font-size:14px; color:var(--ink); line-height:1.5; }
.cm-act{ font-family:'Cinzel',serif; font-size:12px; cursor:pointer; background:transparent; color:var(--ink-dim,#bcae93); border:1px solid rgba(201,165,92,.35); padding:5px 12px; border-radius:6px; }
.cm-act:hover{ border-color:var(--gold,#c9a55c); color:var(--gold,#c9a55c); }
.th-head{ display:flex; align-items:center; }