/* ================================================================
   SRJ Reading Circles v2.0 — Frontend CSS
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Lato:wght@300;400;700&display=swap');

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --ink:    #2a1a12;
  --bark:   #4a2a1a;
  --clay:   #7a5c3c;
  --dust:   #b09a8c;
  --cream:  #faf5ef;
  --paper:  #f5ede3;
  --gold:   #d4af37;
  --rose:   #c0446e;
  --green:  #3d6b4a;
  --shadow: 0 2px 12px rgba(42,26,18,.10);
  --shadow-lg: 0 8px 40px rgba(42,26,18,.16);
}

/* ── Base ───────────────────────────────────────────────────── */
.srjc-wrap { font-family:'Lato',sans-serif; color:var(--ink); max-width:1100px; margin:0 auto; padding:0 16px 60px; box-sizing:border-box; }
.srjc-wrap * { box-sizing:border-box; }
.srjc-loading { text-align:center; padding:60px 20px; color:var(--dust); font-size:14px; }
.srjc-spin { width:28px; height:28px; border:3px solid rgba(192,68,110,.15); border-top-color:var(--rose); border-radius:50%; animation:srjcSpin .7s linear infinite; display:inline-block; margin-right:8px; vertical-align:middle; }
@keyframes srjcSpin { to { transform:rotate(360deg); } }
@keyframes srjcFadeUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }
@keyframes srjcSlideUp { from{opacity:0;transform:translateY(40px) scale(.97)} to{opacity:1;transform:none} }
@keyframes srjcMsgIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
@keyframes srjcPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.3)} }
@keyframes srjcPopIn { from{opacity:0;transform:translateY(-8px) scale(.96)} to{opacity:1;transform:none} }

/* ── Buttons ────────────────────────────────────────────────── */
.srjc-btn {
  display:inline-flex; align-items:center; gap:6px;
  background:linear-gradient(135deg,var(--rose),#e8789e);
  color:#fff; border:none; border-radius:50px; padding:10px 22px;
  font-family:'Lato',sans-serif; font-size:13px; font-weight:700;
  letter-spacing:.04em; cursor:pointer; transition:all .2s;
  box-shadow:0 3px 14px rgba(192,68,110,.30); white-space:nowrap;
}
.srjc-btn:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(192,68,110,.40); }
.srjc-btn:disabled { opacity:.5; cursor:default; transform:none; }
.srjc-btn-ghost { background:none; color:var(--clay); box-shadow:none; border:1.5px solid rgba(122,92,60,.25); }
.srjc-btn-ghost:hover { background:var(--paper); box-shadow:none; }
.srjc-btn-gold { background:linear-gradient(135deg,#c8941a,var(--gold)); box-shadow:0 3px 14px rgba(212,175,55,.35); }
.srjc-btn-green { background:linear-gradient(135deg,var(--green),#5a9e6a); box-shadow:0 3px 14px rgba(61,107,74,.30); }
.srjc-btn-sm { padding:6px 14px; font-size:12px; }

/* ── Page Header ────────────────────────────────────────────── */
.srjc-page-header { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin:28px 0 24px; flex-wrap:wrap; }
.srjc-page-title { font-family:'Playfair Display',serif; font-size:clamp(24px,5vw,34px); font-weight:600; color:var(--ink); margin:0 0 4px; line-height:1.2; }
.srjc-page-sub { margin:0; color:var(--dust); font-size:14px; }

/* ── Tabs ───────────────────────────────────────────────────── */
.srjc-tabs { display:flex; gap:4px; border-bottom:2px solid rgba(212,175,55,.15); margin-bottom:24px; }
.srjc-tab { background:none; border:none; padding:10px 18px; font-family:'Lato',sans-serif; font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--dust); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:all .2s; display:flex; align-items:center; gap:6px; }
.srjc-tab:hover { color:var(--clay); }
.srjc-tab.active { color:var(--rose); border-bottom-color:var(--rose); }
.srjc-tab-badge { background:var(--rose); color:#fff; border-radius:10px; padding:1px 7px; font-size:10px; font-weight:700; }

/* ── Grid — Square cover cards ──────────────────────────────── */
.srjc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:20px; }

.srjc-card {
  background:#fff; border-radius:0; overflow:hidden;
  box-shadow:var(--shadow); cursor:pointer;
  transition:transform .2s, box-shadow .2s;
  animation:srjcFadeUp .4s both;
  border:1.5px solid rgba(212,175,55,.12);
}
.srjc-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }

/* Square cover — 1:1 ratio, no cropping distortion */
.srjc-card-cover {
  position:relative;
  width:100%;
  padding-top:100%; /* square */
  background:linear-gradient(135deg,#2a1a12,#4a2a1a);
  overflow:hidden;
}
.srjc-card-cover img {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain; /* show full cover */
  object-position:center;
  padding:12px;
}
.srjc-card-cover-ph {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:52px;
}
.srjc-card-vis-badge {
  position:absolute; top:10px; left:10px;
  background:rgba(0,0,0,.6); color:#fff; border-radius:4px;
  padding:3px 8px; font-size:10px; font-weight:700; letter-spacing:.05em;
  backdrop-filter:blur(6px);
}
.srjc-card-status-bar { position:absolute; bottom:0; left:0; right:0; height:3px; background:rgba(255,255,255,.2); }
.srjc-card-status-bar-fill { height:100%; background:linear-gradient(90deg,var(--gold),#f0d06a); transition:width .4s; }

.srjc-card-body { padding:14px 16px 16px; }
.srjc-card-book { font-family:'Playfair Display',serif; font-size:15px; font-weight:600; color:var(--ink); line-height:1.3; margin-bottom:3px; }
.srjc-card-author { font-size:12px; color:var(--dust); margin-bottom:6px; }
.srjc-card-circle-name { font-size:11px; color:var(--clay); font-style:italic; margin-bottom:6px; }
.srjc-card-meta { display:flex; gap:4px; flex-wrap:wrap; margin-top:8px; }
.srjc-meta-chip { background:var(--paper); border-radius:4px; padding:3px 8px; font-size:11px; color:var(--clay); font-weight:700; }

/* Invited highlight */
.srjc-card.invited { border-color:rgba(192,68,110,.3); }
.srjc-invite-banner { background:linear-gradient(135deg,rgba(192,68,110,.08),rgba(192,68,110,.04)); padding:8px 16px; font-size:11px; font-weight:700; color:var(--rose); letter-spacing:.05em; border-bottom:1px solid rgba(192,68,110,.12); }

/* ── Empty ──────────────────────────────────────────────────── */
.srjc-empty { text-align:center; padding:48px 24px; }
.srjc-empty-icon { font-size:48px; display:block; margin-bottom:12px; }
.srjc-empty h3 { font-family:'Playfair Display',serif; font-size:20px; color:var(--ink); margin:0 0 8px; }
.srjc-empty p { color:var(--dust); font-size:14px; line-height:1.7; max-width:320px; margin:0 auto; }

/* ── Detail ─────────────────────────────────────────────────── */
.srjc-detail { animation:srjcFadeUp .35s both; }
.srjc-detail-back { background:none; border:none; color:var(--clay); font-family:'Lato',sans-serif; font-size:13px; font-weight:700; cursor:pointer; padding:0; margin-bottom:20px; display:flex; align-items:center; gap:6px; transition:color .2s; }
.srjc-detail-back:hover { color:var(--rose); }

.srjc-detail-header {
  background:linear-gradient(135deg,#1a0e08 0%,#2d1a10 50%,#3d2418 100%);
  border-radius:0;
  padding:28px 28px 28px;
  display:flex; gap:24px; align-items:flex-start;
  margin-bottom:20px; position:relative; overflow:hidden;
}
.srjc-detail-header::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 80% 20%, rgba(212,175,55,.08) 0%, transparent 60%);
  pointer-events:none;
}
.srjc-detail-cover {
  width:90px; height:130px; object-fit:cover;
  border-radius:2px; flex-shrink:0;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}
.srjc-detail-cover-ph {
  width:90px; height:130px; border-radius:2px; flex-shrink:0;
  background:linear-gradient(135deg,#4a2a1a,var(--gold));
  display:flex; align-items:center; justify-content:center; font-size:36px;
}
.srjc-detail-book { font-family:'Playfair Display',serif; font-size:clamp(18px,4vw,26px); font-weight:600; color:#ffffff !important; margin:0 0 4px; line-height:1.25; }
.srjc-detail-author { font-size:14px; color:rgba(255,255,255,.65); margin:0 0 12px; }
.srjc-detail-name { font-size:13px; color:rgba(212,175,55,.8); font-style:italic; margin:8px 0 0; }
.srjc-detail-chips { display:flex; gap:6px; flex-wrap:wrap; }
.srjc-detail-chip { background:rgba(255,255,255,.12); color:rgba(255,255,255,.85); border-radius:20px; padding:4px 12px; font-size:11px; font-weight:700; letter-spacing:.04em; border:1px solid rgba(255,255,255,.1); }

/* ── Detail layout ──────────────────────────────────────────── */
.srjc-detail-body { display:grid; grid-template-columns:1fr 268px; gap:20px; align-items:start; }

/* ── Welcome note card ──────────────────────────────────────── */
.srjc-welcome-card {
  background:linear-gradient(135deg,#fffdf5,#fff8ea);
  border:1.5px solid rgba(212,175,55,.35);
  border-radius:0;
  padding:20px 24px;
  margin-bottom:20px;
  position:relative;
  overflow:hidden;
}
.srjc-welcome-card::before {
  content:'"'; position:absolute; top:-10px; left:16px;
  font-family:'Playfair Display',serif; font-size:120px; color:rgba(212,175,55,.12);
  line-height:1; pointer-events:none;
}
.srjc-welcome-label {
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  color:var(--gold); margin:0 0 10px; display:flex; align-items:center; gap:6px;
}
.srjc-welcome-label::after { content:''; flex:1; height:1px; background:rgba(212,175,55,.3); }
.srjc-welcome-body { font-family:'Playfair Display',serif; font-size:15px; font-style:italic; color:var(--bark); line-height:1.75; margin:0; }
.srjc-welcome-body p { margin:0 0 8px; }
.srjc-welcome-body p:last-child { margin:0; }

/* ── Progress Panel ─────────────────────────────────────────── */
.srjc-progress-panel { background:#fff; border:1.5px solid rgba(212,175,55,.18); border-radius:0; padding:20px; margin-bottom:20px; }
.srjc-progress-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--clay); margin:0 0 16px; }
.srjc-progress-row { display:grid; grid-template-columns:28px 1fr 28px auto; align-items:center; gap:8px; margin-bottom:10px; }
.srjc-progress-avatar { width:28px; height:28px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.srjc-progress-avatar-ph { width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,var(--rose),#e8789e); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; flex-shrink:0; }
.srjc-progress-label { font-size:12px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.srjc-progress-bar-wrap { background:#f0e8e0; border-radius:4px; height:7px; overflow:hidden; }
.srjc-progress-bar-fill { height:100%; background:linear-gradient(90deg,var(--gold),#f0d06a); border-radius:4px; transition:width .5s ease; }
.srjc-progress-pct { font-size:11px; font-weight:700; color:var(--clay); text-align:right; white-space:nowrap; }
.srjc-progress-mode-icon { font-size:14px; }

/* Mode setup */
.srjc-mode-setup { border-top:1.5px solid rgba(212,175,55,.15); margin-top:16px; padding-top:16px; }
.srjc-mode-label { font-size:11px; font-weight:700; color:var(--clay); text-transform:uppercase; letter-spacing:.06em; margin:0 0 10px; display:block; }
.srjc-mode-options { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:12px; }
.srjc-mode-btn {
  background:var(--paper); border:1.5px solid rgba(212,175,55,.2);
  border-radius:0; padding:10px 6px; font-family:'Lato',sans-serif;
  font-size:11px; font-weight:700; color:var(--clay); cursor:pointer;
  text-align:center; transition:all .15s;
}
.srjc-mode-btn:hover { border-color:var(--gold); }
.srjc-mode-btn.active { background:linear-gradient(135deg,rgba(192,68,110,.08),rgba(192,68,110,.04)); border-color:var(--rose); color:var(--rose); }
.srjc-mode-btn .srjc-mode-icon { font-size:20px; display:block; margin-bottom:4px; }
.srjc-mode-locked { font-size:10px; color:var(--dust); font-style:italic; text-align:center; margin-top:6px; }

.srjc-mode-fields { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.srjc-mode-field-row { display:flex; align-items:center; gap:8px; }
.srjc-mode-field-label { font-size:12px; color:var(--clay); font-weight:700; min-width:80px; }
.srjc-mode-input { border:1.5px solid rgba(212,175,55,.3); border-radius:0; padding:7px 10px; font-family:'Lato',sans-serif; font-size:13px; color:var(--ink); background:#fff; width:90px; }
.srjc-mode-input:focus { outline:none; border-color:var(--gold); }

/* Progress update */
.srjc-progress-update { margin-top:12px; padding-top:12px; border-top:1.5px solid rgba(212,175,55,.15); display:flex; flex-direction:column; gap:8px; }
.srjc-progress-update-row { display:flex; align-items:center; gap:8px; }
.srjc-progress-update-label { font-size:12px; font-weight:700; color:var(--clay); flex:1; }
.srjc-progress-update-input { border:1.5px solid rgba(212,175,55,.3); border-radius:0; padding:6px 10px; font-size:13px; font-family:'Lato',sans-serif; color:var(--ink); width:80px; background:#fff; }
.srjc-progress-update-input:focus { outline:none; border-color:var(--gold); }
.srjc-progress-update-unit { font-size:11px; color:var(--dust); }
.srjc-update-btn {
  background:linear-gradient(135deg,var(--green),#5a9e6a);
  color:#fff; border:none; border-radius:0; padding:8px 16px;
  font-family:'Lato',sans-serif; font-size:12px; font-weight:700;
  cursor:pointer; transition:all .2s; align-self:flex-end;
}
.srjc-update-btn:hover { filter:brightness(1.1); }
.srjc-progress-saved { font-size:11px; color:var(--green); font-weight:700; opacity:0; transition:opacity .3s; }
.srjc-progress-saved.show { opacity:1; }
.srjc-finished-btn {
  background:linear-gradient(135deg,var(--gold),#f0d06a);
  color:var(--bark); border:none; border-radius:0; padding:9px 18px;
  font-family:'Lato',sans-serif; font-size:12px; font-weight:700;
  cursor:pointer; transition:all .2s; margin-top:8px; width:100%;
}
.srjc-finished-btn:hover { filter:brightness(1.08); }

/* ── Members Panel ──────────────────────────────────────────── */
.srjc-members-panel { background:#fff; border:1.5px solid rgba(212,175,55,.18); border-radius:0; padding:20px; margin-bottom:20px; }
.srjc-members-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--clay); margin:0 0 14px; }
.srjc-members-list { display:flex; flex-direction:column; gap:10px; }
.srjc-member-row { display:flex; align-items:center; gap:10px; }
.srjc-member-avatar { width:36px; height:36px; border-radius:50%; object-fit:cover; flex-shrink:0; border:2px solid var(--paper); }
.srjc-member-avatar-ph { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--rose),#e8789e); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; flex-shrink:0; }
.srjc-member-info { flex:1; min-width:0; }
.srjc-member-name { font-size:13px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.srjc-member-role.host { font-size:10px; color:var(--gold); font-weight:700; letter-spacing:.05em; }
.srjc-member-progress-mini { font-size:11px; color:var(--dust); white-space:nowrap; }
.srjc-member-mode-icon { font-size:14px; }

/* ── Pace notes ─────────────────────────────────────────────── */
.srjc-pace-card { background:#f0f8f2; border-left:3px solid var(--green); border-radius:0 0 0 0; padding:10px 16px; margin-bottom:20px; font-size:13px; color:var(--green); }

/* ── Discussion ─────────────────────────────────────────────── */
.srjc-discuss { background:#fff; border:1.5px solid rgba(212,175,55,.18); border-radius:0; overflow:hidden; }
.srjc-discuss-header { display:flex; align-items:center; gap:10px; padding:16px 20px; border-bottom:1.5px solid rgba(212,175,55,.12); }
.srjc-discuss-title { font-family:'Playfair Display',serif; font-size:16px; color:var(--ink); margin:0; flex:1; }
.srjc-spoiler-hint { font-size:11px; color:var(--dust); font-weight:700; background:var(--paper); border-radius:20px; padding:4px 10px; }
.srjc-messages { max-height:500px; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:20px; scroll-behavior:smooth; }
.srjc-messages::-webkit-scrollbar { width:5px; }
.srjc-messages::-webkit-scrollbar-track { background:transparent; }
.srjc-messages::-webkit-scrollbar-thumb { background:rgba(212,175,55,.3); border-radius:3px; }

/* Messages */
.srjc-msg { display:flex; gap:10px; animation:srjcMsgIn .25s both; }
.srjc-msg.is-mine { flex-direction:row-reverse; }
.srjc-msg-avatar { width:36px; height:36px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.srjc-msg-avatar-ph { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--rose),#e8789e); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; flex-shrink:0; }
.srjc-msg-bubble-wrap { flex:1; min-width:0; max-width:85%; }
.srjc-msg.is-mine .srjc-msg-bubble-wrap { display:flex; flex-direction:column; align-items:flex-end; }
.srjc-msg-meta { display:flex; align-items:center; gap:6px; margin-bottom:4px; flex-wrap:wrap; }
.srjc-msg.is-mine .srjc-msg-meta { justify-content:flex-end; }
.srjc-msg-name { font-size:12px; font-weight:700; color:var(--clay); }
.srjc-msg-name.is-host { color:var(--gold); }
.srjc-msg-date { font-size:11px; color:var(--dust); }
.srjc-msg-gate-badge { font-size:10px; background:rgba(212,175,55,.15); color:var(--clay); border-radius:10px; padding:2px 7px; font-weight:700; }
.srjc-msg-body {
  background:var(--paper); border-radius:0 12px 12px 12px;
  padding:10px 14px; font-size:14px; color:var(--ink); line-height:1.65;
  word-break:break-word;
}
.srjc-msg-body p { margin:0 0 6px; }
.srjc-msg-body p:last-child { margin:0; }
.srjc-msg.is-mine .srjc-msg-body { background:linear-gradient(135deg,rgba(192,68,110,.1),rgba(232,120,158,.08)); border-radius:12px 0 12px 12px; }
.srjc-msg-photo { max-width:100%; max-height:240px; object-fit:cover; border-radius:8px; margin-top:8px; display:block; cursor:zoom-in; }
.srjc-msg-voice { width:100%; max-width:280px; margin-top:8px; border-radius:30px; display:block; }
.srjc-msg-locked { background:var(--paper); border:2px dashed rgba(212,175,55,.25); border-radius:12px; padding:12px 16px; display:flex; align-items:center; gap:10px; opacity:.65; }
.srjc-msg-locked-icon { font-size:18px; flex-shrink:0; }
.srjc-msg-locked-hint { font-size:11px; color:var(--dust); margin-top:2px; }
.srjc-tagged { color:var(--rose); font-weight:700; }

/* Reactions */
.srjc-reactions { display:flex; gap:4px; flex-wrap:wrap; margin-top:6px; }
.srjc-reaction-btn { background:var(--paper); border:1.5px solid rgba(212,175,55,.2); border-radius:20px; padding:3px 9px; font-size:13px; cursor:pointer; transition:all .15s; display:flex; align-items:center; gap:3px; }
.srjc-reaction-btn:hover { border-color:var(--gold); background:#fff; }
.srjc-reaction-btn.mine { background:rgba(212,175,55,.15); border-color:var(--gold); }
.srjc-reaction-btn .count { font-size:11px; font-weight:700; color:var(--clay); }
.srjc-add-reaction { background:none; border:1.5px dashed rgba(212,175,55,.3); border-radius:20px; padding:3px 9px; font-size:14px; cursor:pointer; color:var(--dust); transition:all .15s; }
.srjc-add-reaction:hover { border-color:var(--gold); color:var(--clay); }

/* Message actions */
.srjc-msg-actions { display:flex; gap:10px; margin-top:6px; opacity:0; transition:opacity .2s; }
.srjc-msg:hover .srjc-msg-actions { opacity:1; }
.srjc-msg.is-mine .srjc-msg-actions { justify-content:flex-end; }
.srjc-msg-action-btn { background:none; border:none; font-size:11px; font-weight:700; color:var(--dust); cursor:pointer; padding:0; font-family:'Lato',sans-serif; letter-spacing:.03em; transition:color .15s; }
.srjc-msg-action-btn:hover { color:var(--clay); }

/* Replies */
.srjc-replies { border-left:2px solid rgba(212,175,55,.2); padding-left:12px; margin-top:10px; display:flex; flex-direction:column; gap:10px; }
.srjc-reply { display:flex; gap:8px; }
.srjc-reply-avatar { width:26px; height:26px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.srjc-reply-avatar-ph { width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,var(--clay),var(--bark)); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#fff; flex-shrink:0; }
.srjc-reply-body { font-size:13px; color:var(--bark); line-height:1.55; }
.srjc-reply-name { font-weight:700; color:var(--clay); font-size:11px; margin-bottom:2px; }
.srjc-toggle-replies { background:none; border:none; font-size:11px; color:var(--rose); font-weight:700; cursor:pointer; font-family:'Lato',sans-serif; padding:4px 0; }

/* Compose */
.srjc-compose { border-top:1.5px solid rgba(212,175,55,.12); padding:16px 20px; }
.srjc-compose-reply-to { background:rgba(192,68,110,.06); border-radius:8px; padding:8px 12px; margin-bottom:10px; font-size:12px; color:var(--clay); display:flex; align-items:center; justify-content:space-between; }
.srjc-cancel-reply { background:none; border:none; color:var(--dust); cursor:pointer; font-size:14px; padding:0; }
.srjc-compose-gate { display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.srjc-compose-gate-label { font-size:11px; font-weight:700; color:var(--clay); letter-spacing:.04em; }
.srjc-gate-input { border:1.5px solid rgba(212,175,55,.3); border-radius:0; padding:5px 8px; font-size:12px; width:65px; background:#fff; font-family:'Lato',sans-serif; color:var(--ink); }
.srjc-gate-input:focus { outline:none; border-color:var(--gold); }
.srjc-gate-hint { font-size:11px; color:var(--dust); }
.srjc-compose-toolbar { display:flex; gap:8px; margin-bottom:8px; }
.srjc-compose-tool { background:none; border:1.5px solid rgba(212,175,55,.2); border-radius:0; padding:6px 10px; font-size:18px; cursor:pointer; transition:all .15s; color:var(--clay); }
.srjc-compose-tool:hover { border-color:var(--gold); background:var(--paper); }
.srjc-compose-tool.active { border-color:var(--rose); background:rgba(192,68,110,.06); }
.srjc-compose-row { display:flex; gap:8px; align-items:flex-end; }
.srjc-compose-input { flex:1; border:1.5px solid rgba(212,175,55,.25); border-radius:0; padding:10px 14px; font-size:14px; font-family:'Lato',sans-serif; color:var(--ink); resize:none; line-height:1.5; transition:border .2s; min-height:44px; max-height:130px; overflow-y:auto; background:#fff; }
.srjc-compose-input:focus { outline:none; border-color:var(--gold); }
.srjc-compose-input[contenteditable]:empty::before { content:attr(data-placeholder); color:var(--dust); }
.srjc-compose-send { width:40px; height:40px; background:linear-gradient(135deg,var(--rose),#e8789e); border:none; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .2s; box-shadow:0 2px 10px rgba(192,68,110,.3); }
.srjc-compose-send:hover { transform:scale(1.08); box-shadow:0 4px 16px rgba(192,68,110,.4); }
.srjc-compose-send svg { color:#fff; }

/* Voice recording */
.srjc-voice-rec { display:none; align-items:center; gap:10px; padding:10px 14px; background:rgba(192,68,110,.06); border-radius:0; margin-top:8px; }
.srjc-voice-rec.active { display:flex; }
.srjc-rec-dot { width:10px; height:10px; background:var(--rose); border-radius:50%; animation:srjcPulse 1s infinite; }
.srjc-rec-time { font-size:13px; font-weight:700; color:var(--rose); font-variant-numeric:tabular-nums; }
.srjc-rec-stop { background:var(--rose); color:#fff; border:none; border-radius:0; padding:6px 14px; font-size:12px; font-family:'Lato',sans-serif; font-weight:700; cursor:pointer; }
.srjc-photo-preview { margin-top:8px; display:none; }
.srjc-photo-preview.active { display:block; }
.srjc-photo-preview img { max-height:120px; border-radius:4px; }
.srjc-photo-preview-remove { background:none; border:none; color:var(--rose); cursor:pointer; font-size:12px; font-weight:700; margin-left:8px; }
.srjc-tag-suggestions { position:absolute; background:#fff; border:1.5px solid rgba(212,175,55,.3); border-radius:0; box-shadow:var(--shadow); z-index:100; max-height:160px; overflow-y:auto; min-width:180px; }
.srjc-tag-opt { padding:8px 14px; font-size:13px; cursor:pointer; display:flex; align-items:center; gap:8px; }
.srjc-tag-opt:hover { background:var(--paper); }
.srjc-tag-opt img { width:24px; height:24px; border-radius:50%; }

/* ── Create Modal ────────────────────────────────────────────── */
.srjc-modal-overlay { position:fixed; inset:0; background:rgba(42,26,18,.6); z-index:9999; display:flex; align-items:flex-end; justify-content:center; backdrop-filter:blur(3px); }
@media(min-width:600px){ .srjc-modal-overlay { align-items:center; } }
.srjc-modal { background:#fff; border-radius:0; width:100%; max-width:600px; max-height:90vh; overflow-y:auto; animation:srjcSlideUp .3s both; }
.srjc-modal::-webkit-scrollbar { width:4px; }
.srjc-modal::-webkit-scrollbar-thumb { background:rgba(212,175,55,.3); }
.srjc-modal-header { display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1.5px solid rgba(212,175,55,.12); position:sticky; top:0; background:#fff; z-index:1; }
.srjc-modal-title { font-family:'Playfair Display',serif; font-size:20px; color:var(--ink); margin:0; }
.srjc-modal-close { background:none; border:none; font-size:20px; color:var(--dust); cursor:pointer; line-height:1; padding:0; transition:color .15s; }
.srjc-modal-close:hover { color:var(--rose); }
.srjc-modal-body { padding:20px 24px; }

/* Form elements */
.srjc-field { margin-bottom:18px; }
.srjc-label { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--clay); margin-bottom:7px; }
.srjc-input, .srjc-textarea, .srjc-select {
  width:100%; border:1.5px solid rgba(212,175,55,.25); border-radius:0;
  padding:10px 14px; font-family:'Lato',sans-serif; font-size:14px;
  color:var(--ink); background:#fff; transition:border .2s;
}
.srjc-input:focus, .srjc-textarea:focus, .srjc-select:focus { outline:none; border-color:var(--gold); }
.srjc-textarea { resize:vertical; min-height:90px; line-height:1.55; }
.srjc-hint { font-size:11px; color:var(--dust); }
.srjc-field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* Vis toggle */
.srjc-vis-toggle { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.srjc-vis-option { border:1.5px solid rgba(212,175,55,.2); border-radius:0; padding:12px 14px; cursor:pointer; transition:all .15s; }
.srjc-vis-option input { display:none; }
.srjc-vis-option.checked { border-color:var(--rose); background:rgba(192,68,110,.04); }
.srjc-vis-option-label { font-size:13px; font-weight:700; color:var(--ink); margin-bottom:3px; }
.srjc-vis-option-desc { font-size:11px; color:var(--dust); line-height:1.4; }

/* Pace options */
.srjc-pace-options { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.srjc-pace-opt {
  border:1.5px solid rgba(212,175,55,.2); border-radius:0; padding:10px 12px;
  cursor:pointer; transition:all .15s; background:none; text-align:left;
  font-family:'Lato',sans-serif;
}
.srjc-pace-opt:hover { border-color:var(--gold); background:var(--paper); }
.srjc-pace-opt.selected { border-color:var(--green); background:rgba(61,107,74,.05); }
.srjc-pace-opt-label { font-size:12px; font-weight:700; color:var(--ink); display:block; }
.srjc-pace-opt-desc { font-size:11px; color:var(--dust); }
.srjc-pace-custom { display:none; margin-top:8px; }
.srjc-pace-custom.visible { display:block; }

/* Book search */
.srjc-book-search-result {
  border:1.5px solid rgba(212,175,55,.25); border-top:none;
  background:#fff; max-height:200px; overflow-y:auto; z-index:10; position:relative;
}
.srjc-book-option { display:flex; gap:10px; padding:10px 14px; cursor:pointer; transition:background .15s; align-items:center; }
.srjc-book-option:hover { background:var(--paper); }
.srjc-book-option img, .srjc-book-option-ph { width:36px; height:50px; object-fit:cover; border-radius:2px; flex-shrink:0; }
.srjc-book-option-ph { background:linear-gradient(135deg,var(--bark),var(--gold)); display:flex; align-items:center; justify-content:center; font-size:16px; }
.srjc-book-option-title { font-size:13px; font-weight:700; color:var(--ink); }
.srjc-book-option-author { font-size:11px; color:var(--dust); }

/* Selected book */
.srjc-selected-book { display:flex; align-items:center; gap:10px; background:var(--paper); padding:10px 14px; border:1.5px solid rgba(212,175,55,.25); }
.srjc-selected-book img { width:36px; height:50px; object-fit:cover; border-radius:2px; }
.srjc-selected-book-title { font-size:13px; font-weight:700; color:var(--ink); }
.srjc-selected-book-author { font-size:11px; color:var(--dust); }

/* Invitees */
.srjc-invitees-wrap { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.srjc-invitee-tag { background:rgba(192,68,110,.1); border:1px solid rgba(192,68,110,.2); border-radius:20px; padding:4px 10px; font-size:12px; color:var(--rose); font-weight:700; display:flex; align-items:center; gap:5px; }
.srjc-invitee-remove { background:none; border:none; color:var(--rose); cursor:pointer; padding:0; font-size:13px; line-height:1; }

/* Rich text editor in modal */
.srjc-richtext { border:1.5px solid rgba(212,175,55,.25); border-radius:0; background:#fff; }
.srjc-richtext-toolbar { padding:6px 10px; border-bottom:1px solid rgba(212,175,55,.15); display:flex; gap:4px; }
.srjc-richtext-btn { background:none; border:1px solid rgba(212,175,55,.2); border-radius:3px; padding:3px 8px; font-family:'Lato',sans-serif; font-size:12px; cursor:pointer; color:var(--clay); transition:all .15s; }
.srjc-richtext-btn:hover { background:var(--paper); }
.srjc-richtext-btn.active { background:rgba(212,175,55,.15); border-color:var(--gold); }
.srjc-richtext-body { padding:10px 14px; font-size:14px; color:var(--ink); line-height:1.65; min-height:80px; }
.srjc-richtext-body:focus { outline:none; }
.srjc-richtext-body[data-placeholder]:empty::before { content:attr(data-placeholder); color:var(--dust); }

/* ── Notification Bell ───────────────────────────────────────── */
.srjc-bell-wrap { position:relative; display:inline-block; }
.srjc-bell-btn { background:none; border:none; cursor:pointer; color:var(--clay); padding:6px; display:flex; position:relative; transition:color .2s; }
.srjc-bell-btn:hover { color:var(--rose); }
.srjc-bell-badge {
  position:absolute; top:-2px; right:-4px;
  background:var(--rose); color:#fff; border-radius:50%;
  width:18px; height:18px; font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  animation:srjcPulse 2s infinite;
}
.srjc-bell-panel {
  position:absolute; right:0; top:calc(100% + 8px);
  width:320px; background:#fff; border:1.5px solid rgba(212,175,55,.2);
  border-radius:0; box-shadow:var(--shadow-lg); z-index:9998;
  display:none; animation:srjcPopIn .2s both;
}
.srjc-bell-panel.open { display:block; }
.srjc-bell-panel-header { padding:14px 16px; border-bottom:1px solid rgba(212,175,55,.12); display:flex; align-items:center; justify-content:space-between; }
.srjc-bell-panel-title { font-family:'Playfair Display',serif; font-size:15px; color:var(--ink); margin:0; }
.srjc-mark-read-btn { background:none; border:none; font-size:11px; color:var(--rose); font-weight:700; cursor:pointer; font-family:'Lato',sans-serif; }
.srjc-notif-list { max-height:340px; overflow-y:auto; }
.srjc-notif-item { padding:12px 16px; display:flex; gap:10px; align-items:flex-start; cursor:pointer; transition:background .15s; border-bottom:1px solid rgba(212,175,55,.08); }
.srjc-notif-item:hover { background:var(--paper); }
.srjc-notif-item.unread { background:rgba(192,68,110,.03); }
.srjc-notif-dot { width:8px; height:8px; border-radius:50%; background:var(--rose); flex-shrink:0; margin-top:4px; }
.srjc-notif-dot.read { background:transparent; border:1.5px solid rgba(212,175,55,.3); }
.srjc-notif-text { font-size:13px; color:var(--ink); line-height:1.5; flex:1; }
.srjc-notif-time { display:block; font-size:11px; color:var(--dust); margin-top:2px; }

/* ── Mobile ──────────────────────────────────────────────────── */
@media(max-width:680px){
  .srjc-wrap { padding:0 12px 40px; }
  .srjc-page-header { margin:16px 0 16px; }
  .srjc-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .srjc-detail-header { flex-direction:column; padding:20px 16px; gap:16px; }
  .srjc-detail-cover { width:80px; height:116px; }
  .srjc-detail-body { grid-template-columns:1fr; }
  .srjc-btn { padding:9px 16px; font-size:12px; }
  .srjc-tabs { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .srjc-tab { white-space:nowrap; }
  .srjc-messages { max-height:340px; }
  .srjc-compose { padding:12px 14px; }
  .srjc-compose-gate { gap:6px; }
  .srjc-gate-hint { display:none; }
  .srjc-modal { border-radius:16px 16px 0 0; max-height:94vh; }
  .srjc-field-row { grid-template-columns:1fr; }
  .srjc-vis-toggle { grid-template-columns:1fr; }
  .srjc-pace-options { grid-template-columns:1fr; }
  .srjc-bell-panel { width:280px; right:-8px; }
  .srjc-progress-row { grid-template-columns:24px 1fr 0 auto; }
  .srjc-progress-row .srjc-progress-pct { display:none; }
  .srjc-mode-options { gap:4px; }
}
@media(max-width:380px){
  .srjc-grid { grid-template-columns:1fr; }
  .srjc-detail-header { padding:16px 14px; }
}