/* ============================================================
 * /community/community.css
 * Shared styles used by:
 *   - The embedded "👥 Community" tab on tirumala-live-status.php
 *   - The standalone /community/ page (community/index.php)
 *
 * Created 25-May-2026 (Phase 1a · photos)
 * ============================================================ */

/* ===== Visual language ===== */
#ttv-com-root { font-family: -apple-system, system-ui, "Inter", "Noto Sans", sans-serif; padding-bottom: 30px; }

/* ===== Header card ===== */
.tcom-hdr {
  background: linear-gradient(160deg, rgba(212,160,23,.12), rgba(60,8,8,.18));
  border: 1.5px solid rgba(212,160,23,.30);
  border-radius: 14px; padding: 14px 16px;
  margin-bottom: 12px; position: relative; overflow: hidden;
}
body.light .tcom-hdr {
  background: linear-gradient(160deg, rgba(212,160,23,.12), rgba(255,248,225,.85));
  border-color: rgba(212,160,23,.45);
}
.tcom-hdr .om { position: absolute; top: -10px; right: -8px; font-size: 70px; opacity: .05; pointer-events: none; }
.tcom-hdr h2 { font-family: 'Cinzel', serif; margin: 0; color: var(--goldbright, #FFD700); font-size: 15px; letter-spacing: .5px; }
.tcom-hdr p { margin: 4px 0 0; font-size: 11.5px; color: var(--txt3, rgba(255,255,255,.65)); }
.tcom-hdr .stats { margin-top: 8px; display: flex; gap: 12px; font-size: 10.5px; color: var(--txt4, rgba(255,255,255,.45)); flex-wrap: wrap; }
.tcom-hdr .stats b { color: var(--goldbright, #FFD700); }

/* [25-May-2026] Header row: title + "Open full page" pill (only shown when
   embedded inside live status page; hidden on standalone /community/ page) */
.tcom-hdr-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.tcom-open-full {
  display: inline-flex; align-items: center;
  background: rgba(212,160,23,.10);
  border: 1px solid rgba(212,160,23,.45);
  color: var(--goldbright, #FFD700);
  padding: 6px 12px; border-radius: 7px;
  text-decoration: none;
  font-size: 11.5px; font-weight: 600;
  white-space: nowrap;
  transition: all .15s;
}
.tcom-open-full:hover {
  background: rgba(212,160,23,.20);
  border-color: var(--goldbright, #FFD700);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(212,160,23,.25);
}
body.light .tcom-open-full {
  background: rgba(122,48,16,.08);
  border-color: rgba(122,48,16,.45);
  color: #7a3010;
}
body.light .tcom-open-full:hover {
  background: rgba(122,48,16,.16);
}

/* ===== Composer ===== */
.tcom-composer {
  background: rgba(0,0,0,.35); border: 1px solid rgba(212,160,23,.22);
  border-radius: 12px; padding: 12px; margin-bottom: 12px;
  transition: all .2s;
}
body.light .tcom-composer { background: rgba(255,255,255,.7); border-color: rgba(212,160,23,.35); }
.tcom-composer.expanded { border-color: rgba(212,160,23,.55); box-shadow: 0 4px 14px rgba(212,160,23,.18); }
.tcom-composer .row { display: flex; gap: 10px; align-items: flex-start; }
.tcom-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #D4A017, #FF8A00);
  color: #1c0e04; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0;
}
.tcom-stub {
  flex: 1; background: rgba(20,12,6,.5);
  border: 1px solid rgba(212,160,23,.22);
  border-radius: 22px; padding: 10px 14px;
  color: var(--txt3, rgba(255,255,255,.55)); font-size: 13px; cursor: text;
}
body.light .tcom-stub { background: #fffdf6; color: #8a4a25; border-color: rgba(122,48,16,.22); }
.tcom-composer textarea {
  width: 100%; min-height: 100px; resize: vertical;
  background: rgba(20,12,6,.5); border: 1px solid rgba(212,160,23,.22);
  border-radius: 12px; padding: 10px 14px;
  color: var(--ink, #fbe7b8); font: inherit; font-size: 13.5px;
  box-sizing: border-box;
}
body.light .tcom-composer textarea { background: #fffdf6; color: #5d2317; border-color: rgba(122,48,16,.22); }
.tcom-tools {
  display: none; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(212,160,23,.18);
  align-items: center; gap: 8px; flex-wrap: wrap;
}
.tcom-composer.expanded .tcom-tools { display: flex; }
.tcom-photo-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 8px;
  border: 1px dashed rgba(212,160,23,.45);
  background: rgba(20,12,6,.4); color: var(--txt3, rgba(255,255,255,.65));
  cursor: pointer; font-size: 12px;
}
body.light .tcom-photo-btn { background: #fffdf6; color: #7a3010; }
.tcom-photo-btn:hover { border-color: var(--goldbright, #FFD700); color: var(--goldbright, #FFD700); }
.tcom-photo-btn input { display: none; }
.tcom-tag {
  padding: 5px 11px; border-radius: 999px;
  background: rgba(20,12,6,.4); border: 1px solid rgba(212,160,23,.22);
  color: var(--txt3, rgba(255,255,255,.65)); font-size: 11.5px; cursor: pointer;
}
.tcom-tag.on { background: rgba(212,160,23,.18); border-color: rgba(212,160,23,.55); color: var(--goldbright, #FFD700); }
body.light .tcom-tag { background: #fffdf6; color: #7a3010; }
body.light .tcom-tag.on { background: rgba(212,160,23,.18); color: #7a3010; }
.tcom-sp { flex: 1; }
.tcom-counter { font-size: 10.5px; color: var(--txt4, rgba(255,255,255,.45)); }
.tcom-counter.warn { color: #d98717; }
.tcom-submit {
  padding: 8px 16px; border-radius: 8px; border: 0;
  background: linear-gradient(135deg, #D4A017, #FF8A00);
  color: #1c0e04; font-weight: 700; font-size: 12.5px; cursor: pointer;
}
.tcom-submit:disabled { opacity: .5; cursor: not-allowed; }
.tcom-preview-img {
  margin-top: 10px; max-width: 200px;
  border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(212,160,23,.22); position: relative;
}
.tcom-preview-img img { width: 100%; display: block; }
.tcom-preview-img .rm {
  position: absolute; top: 4px; right: 4px;
  background: rgba(0,0,0,.7); color: white; border: 0;
  padding: 3px 8px; border-radius: 5px; cursor: pointer; font-size: 11px;
}
.tcom-msg {
  margin-top: 8px; padding: 8px 12px; border-radius: 7px;
  font-size: 12px; display: none;
}
.tcom-msg.show { display: block; }
.tcom-msg.ok   { background: rgba(46,167,106,.14); border: 1px solid rgba(46,167,106,.5); color: #6cda9b; }
.tcom-msg.err  { background: rgba(192,58,42,.14); border: 1px solid rgba(192,58,42,.5); color: #ff9a8b; }
.tcom-msg.info { background: rgba(58,143,217,.14); border: 1px solid rgba(58,143,217,.5); color: #afd5ff; }

/* ===== Login gate (not logged in yet) ===== */
.tcom-gate {
  background: rgba(0,0,0,.35); border: 1px solid rgba(212,160,23,.22);
  border-radius: 12px; padding: 16px; margin-bottom: 12px; text-align: center;
}
body.light .tcom-gate { background: rgba(255,255,255,.7); border-color: rgba(122,48,16,.22); }
.tcom-gate .ic { font-size: 30px; }
.tcom-gate h3 { margin: 6px 0 4px; font-size: 14px; color: var(--goldbright, #FFD700); }
.tcom-gate p { font-size: 12px; color: var(--txt3, rgba(255,255,255,.65)); margin: 0 0 10px; line-height: 1.55; }
.tcom-gate button {
  padding: 8px 18px; border-radius: 7px; border: 0;
  background: linear-gradient(135deg, #D4A017, #FF8A00);
  color: #1c0e04; font-weight: 700; font-size: 12.5px; cursor: pointer;
}

/* ===== Post card ===== */
.tcom-post {
  background: rgba(0,0,0,.35); border: 1px solid rgba(212,160,23,.18);
  border-radius: 14px; padding: 12px; margin-bottom: 12px;
}
body.light .tcom-post { background: rgba(255,255,255,.75); border-color: rgba(122,48,16,.18); }

/* [25-May-2026] Pending post (only author can see it) — amber border + badge */
.tcom-post.is-pending {
  border-color: rgba(217,135,23,.45);
  background: rgba(40,28,12,.45);
}
body.light .tcom-post.is-pending {
  border-color: rgba(217,135,23,.55);
  background: rgba(255,248,225,.85);
}
.tcom-pending-badge {
  background: linear-gradient(135deg, rgba(217,135,23,.18), rgba(212,160,23,.10));
  border: 1px solid rgba(217,135,23,.55);
  border-radius: 8px;
  padding: 8px 12px;
  margin: -4px -4px 10px;
  font-size: 11.5px;
  color: #fbbf24;
  display: flex; align-items: center; gap: 6px; line-height: 1.4;
}
body.light .tcom-pending-badge { color: #7a4a0a; background: linear-gradient(135deg, rgba(217,135,23,.18), rgba(255,248,225,.6)); }
.tcom-pending-badge b { color: inherit; font-weight: 700; }
.tcom-own-tag {
  display: inline-block;
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(46,167,106,.20);
  border: 1px solid rgba(46,167,106,.5);
  color: #6cda9b;
  margin-left: 6px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
body.light .tcom-own-tag { color: #1f6b2e; background: rgba(46,167,106,.18); }
.tcom-post-hdr { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }

/* [25-May-2026] Visible permalink chip — top-right of each post header */
.tcom-permalink-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(212,160,23,.10);
  border: 1px solid rgba(212,160,23,.28);
  color: var(--goldbright, #FFD700);
  font-size: 10.5px; font-weight: 600;
  font-family: ui-monospace, "SF Mono", monospace;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
body.light .tcom-permalink-chip {
  background: rgba(122,48,16,.07);
  border-color: rgba(122,48,16,.30);
  color: #7a3010;
}
.tcom-permalink-chip:hover {
  background: rgba(212,160,23,.22);
  border-color: var(--goldbright, #FFD700);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(212,160,23,.20);
}
.tcom-permalink-id {
  max-width: 110px;
  overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 460px) {
  /* On narrow screens, hide the ID text — keep just the 🔗 icon */
  .tcom-permalink-id { display: none; }
  .tcom-permalink-chip { padding: 4px 7px; }
}
.tcom-post-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 12px; font-weight: 700;
}
.tcom-post-meta { flex: 1; min-width: 0; }
.tcom-post-meta .name { font-size: 13px; font-weight: 600; color: var(--ink, #fbe7b8); }
body.light .tcom-post-meta .name { color: #5d2317; }
.tcom-post-meta .sub {
  font-size: 10.5px; color: var(--txt3, rgba(255,255,255,.55));
  display: flex; gap: 5px; flex-wrap: wrap; align-items: center;
}
.tcom-post-meta .sub .sep { opacity: .6; }
.tcom-loc {
  padding: 1px 7px; border-radius: 999px;
  background: rgba(212,160,23,.14); color: var(--goldbright, #FFD700);
  font-size: 10px; font-weight: 600;
}
.tcom-post-text {
  font-size: 13.5px; line-height: 1.55;
  margin: 6px 0 10px; color: var(--ink, #fbe7b8);
  white-space: pre-wrap; word-wrap: break-word;
}
body.light .tcom-post-text { color: #5d2317; }
.tcom-post-img {
  margin: 6px -12px 8px;
  background: #000;
  border-top: 1px solid rgba(212,160,23,.18);
  border-bottom: 1px solid rgba(212,160,23,.18);
}
.tcom-post-img img { width: 100%; max-height: 540px; object-fit: contain; display: block; }
.tcom-eng {
  display: flex; gap: 4px;
  padding-top: 6px; margin-top: 6px;
  border-top: 1px solid rgba(212,160,23,.18);
}
.tcom-eng-btn {
  flex: 1; background: transparent; border: 0;
  padding: 6px; border-radius: 7px;
  color: var(--txt3, rgba(255,255,255,.65));
  cursor: pointer; font: inherit; font-size: 12px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.tcom-eng-btn:hover { background: rgba(212,160,23,.10); color: var(--goldbright, #FFD700); }
.tcom-eng-btn.liked { color: #FF8A00; }
.tcom-eng-btn .ic { font-size: 15px; }

/* ===== Empty / loading states ===== */
.tcom-empty, .tcom-loading {
  background: rgba(0,0,0,.25); border: 1px dashed rgba(212,160,23,.25);
  border-radius: 12px; padding: 40px 20px; text-align: center;
}
body.light .tcom-empty, body.light .tcom-loading { background: rgba(255,255,255,.5); }
.tcom-empty .ic { font-size: 40px; opacity: .4; }
.tcom-empty h3, .tcom-loading h3 { margin: 12px 0 4px; color: var(--ink, #fbe7b8); font-size: 15px; }
.tcom-empty p, .tcom-loading p { color: var(--txt3, rgba(255,255,255,.55)); font-size: 12px; margin: 0; }
.tcom-more {
  width: 100%; padding: 10px;
  background: rgba(0,0,0,.25); border: 1px solid rgba(212,160,23,.18);
  border-radius: 8px; color: var(--txt3, rgba(255,255,255,.65));
  cursor: pointer; font: inherit; font-size: 12.5px; margin: 8px 0 20px;
}
.tcom-more:hover { background: rgba(212,160,23,.10); color: var(--goldbright, #FFD700); }

/* ============================================================
 *   LOGIN MODAL · 3-step flow (email → OTP → profile)
 * ============================================================ */
.tcom-modal-bg {
  position: fixed; inset: 0; z-index: 99998;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center;
  padding: 16px;
  animation: tcom-modal-in .2s ease-out;
}
.tcom-modal-bg.show { display: flex; }
@keyframes tcom-modal-in { from { opacity: 0; } to { opacity: 1; } }
.tcom-modal {
  background: linear-gradient(180deg, rgba(40,24,12,.99), rgba(20,12,6,.99));
  border: 1.5px solid rgba(212,160,23,.45);
  border-radius: 16px;
  max-width: 440px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  padding: 22px 22px 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  color: var(--ink, #fbe7b8);
  position: relative;
  animation: tcom-modal-pop .25s cubic-bezier(.34,1.56,.64,1);
}
body.light .tcom-modal {
  background: linear-gradient(180deg, rgba(255,250,240,.99), rgba(250,238,210,.99));
  color: #5d2317;
}
@keyframes tcom-modal-pop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.tcom-modal .close {
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  color: rgba(255,255,255,.7);
  cursor: pointer; font-size: 14px;
}
body.light .tcom-modal .close {
  background: rgba(122,48,16,.06); color: #7a3010; border-color: rgba(122,48,16,.18);
}
.tcom-modal h2 {
  font-family: 'Cinzel', serif; font-size: 18px;
  margin: 0 0 4px; color: #FFD700; letter-spacing: .5px;
}
body.light .tcom-modal h2 { color: #7a3010; }
.tcom-modal .lede { font-size: 12px; color: rgba(255,255,255,.6); margin: 0 0 16px; line-height: 1.5; }
body.light .tcom-modal .lede { color: rgba(122,48,16,.65); }
.tcom-steps {
  display: flex; gap: 4px; margin-bottom: 18px;
}
.tcom-step {
  flex: 1; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,.08);
}
.tcom-step.on { background: linear-gradient(90deg, #D4A017, #FF8A00); }
.tcom-step.done { background: #2ea76a; }
.tcom-field { margin-bottom: 12px; }
.tcom-field label {
  display: block; font-size: 11.5px;
  color: rgba(255,255,255,.65); margin-bottom: 5px; letter-spacing: .03em;
}
body.light .tcom-field label { color: #7a3010; }
.tcom-field input {
  width: 100%; padding: 10px 12px;
  background: rgba(0,0,0,.3);
  border: 1.5px solid rgba(212,160,23,.25);
  border-radius: 8px; color: var(--ink, #fbe7b8);
  font: inherit; font-size: 14px;
  box-sizing: border-box;
}
body.light .tcom-field input {
  background: white; border-color: rgba(122,48,16,.22); color: #5d2317;
}
.tcom-field input:focus {
  outline: 0; border-color: #FFD700;
  box-shadow: 0 0 0 3px rgba(212,160,23,.18);
}
.tcom-field input.otp-input {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 22px; letter-spacing: 8px;
  text-align: center; font-weight: 600;
}
.tcom-row-2 {
  display: grid; grid-template-columns: 1fr auto; gap: 8px;
  align-items: stretch;
}
.tcom-secondary-btn {
  padding: 8px 14px; border-radius: 8px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  color: var(--ink, #fbe7b8); cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600;
  white-space: nowrap;
}
.tcom-secondary-btn:hover { background: rgba(212,160,23,.18); border-color: #FFD700; color: #FFD700; }
.tcom-secondary-btn:disabled { opacity: .5; cursor: not-allowed; }
.tcom-primary-btn {
  width: 100%; padding: 11px 16px; border-radius: 8px;
  background: linear-gradient(135deg, #D4A017, #FF8A00);
  border: 0; color: #1c0e04;
  font: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer; margin-top: 8px;
}
.tcom-primary-btn:disabled { opacity: .5; cursor: not-allowed; }
.tcom-primary-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(212,160,23,.35); }
.tcom-status {
  font-size: 11.5px; margin-top: 6px;
  padding: 6px 10px; border-radius: 6px;
  display: none;
}
.tcom-status.show { display: block; }
.tcom-status.ok   { background: rgba(46,167,106,.14); border: 1px solid rgba(46,167,106,.5); color: #6cda9b; }
.tcom-status.err  { background: rgba(192,58,42,.14); border: 1px solid rgba(192,58,42,.5); color: #ff9a8b; }
.tcom-status.info { background: rgba(58,143,217,.14); border: 1px solid rgba(58,143,217,.5); color: #afd5ff; }
.tcom-step-panel { display: none; }
.tcom-step-panel.active { display: block; animation: tcom-step-in .25s ease-out; }
@keyframes tcom-step-in { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } }
.tcom-foot {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 11px; color: rgba(255,255,255,.45); text-align: center; line-height: 1.6;
}
body.light .tcom-foot { color: rgba(122,48,16,.5); border-color: rgba(122,48,16,.1); }
.tcom-foot a { color: #FFD700; text-decoration: none; }

/* ============================================================
 *   Sort selector · Newest vs Top (engagement-ranked)
 * ============================================================ */
.tcom-sort-bar {
  display: flex; align-items: center; gap: 6px;
  margin: 4px 0 12px;
  flex-wrap: wrap;
}
.tcom-sort-lbl {
  font-size: 11px; color: rgba(255,255,255,.5);
  text-transform: uppercase; letter-spacing: .06em;
  margin-right: 4px;
}
body.light .tcom-sort-lbl { color: rgba(122,48,16,.6); }
.tcom-sort-btn {
  padding: 6px 12px; border-radius: 999px;
  background: rgba(0,0,0,.25); border: 1px solid rgba(212,160,23,.20);
  color: rgba(255,255,255,.7);
  cursor: pointer; font: inherit; font-size: 12px;
}
body.light .tcom-sort-btn { background: rgba(255,255,255,.6); color: rgba(122,48,16,.75); border-color: rgba(122,48,16,.20); }
.tcom-sort-btn:hover { color: #FFD700; border-color: rgba(212,160,23,.45); }
.tcom-sort-btn.on {
  background: linear-gradient(135deg, rgba(212,160,23,.22), rgba(255,138,0,.18));
  color: #FFD700; border-color: #FFD700; font-weight: 600;
}
body.light .tcom-sort-btn.on { color: #7a3010; border-color: #7a3010; }

/* Clickable post body (links to /community/p/<id>) */
.tcom-post-body-link { display: block; text-decoration: none; color: inherit; }
.tcom-post-body-link:hover .tcom-post-text { color: #FFD700; }
body.light .tcom-post-body-link:hover .tcom-post-text { color: #7a3010; }
.tcom-time-link { color: inherit; text-decoration: none; opacity: .85; }
.tcom-time-link:hover { color: #FFD700; opacity: 1; }
body.light .tcom-time-link:hover { color: #7a3010; }

/* ============================================================
 *   Comments section (toggles below each post)
 * ============================================================ */
.tcom-comments-section {
  margin-top: 8px; padding-top: 12px;
  border-top: 1px solid rgba(212,160,23,.18);
  animation: tcom-step-in .25s ease-out;
}
.tcom-comments-loading, .tcom-comments-empty, .tcom-comments-err {
  text-align: center; padding: 12px;
  font-size: 12px; color: rgba(255,255,255,.5);
}
body.light .tcom-comments-loading, body.light .tcom-comments-empty { color: rgba(122,48,16,.6); }
.tcom-comments-err { color: #ff9a8b; }
.tcom-comment {
  display: flex; gap: 8px; margin-bottom: 8px;
}
.tcom-comment-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 11px; font-weight: 700;
  flex-shrink: 0;
}
.tcom-comment-body { flex: 1; min-width: 0; }
.tcom-comment-bubble {
  background: rgba(0,0,0,.3); border: 1px solid rgba(212,160,23,.10);
  border-radius: 14px; padding: 7px 12px;
  font-size: 12.5px; color: var(--ink, #fbe7b8);
  word-wrap: break-word;
}
body.light .tcom-comment-bubble { background: rgba(255,255,255,.65); color: #5d2317; border-color: rgba(122,48,16,.12); }
.tcom-comment-name {
  font-weight: 600; color: var(--goldbright, #FFD700);
  margin-right: 6px;
}
body.light .tcom-comment-name { color: #7a3010; }
.tcom-comment-text { white-space: pre-wrap; }
.tcom-comment-meta {
  font-size: 10.5px; color: rgba(255,255,255,.45);
  margin: 3px 0 0 12px;
  display: flex; align-items: center; gap: 10px;
}
body.light .tcom-comment-meta { color: rgba(122,48,16,.55); }
.tcom-comment-del {
  background: transparent; border: 0;
  color: rgba(255,255,255,.4); cursor: pointer;
  font: inherit; font-size: 11px;
}
.tcom-comment-del:hover { color: #ff9a8b; }
.tcom-comment-composer {
  display: flex; gap: 8px; align-items: center;
  margin-top: 10px;
}
.tcom-comment-composer input {
  flex: 1; padding: 7px 12px; border-radius: 999px;
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(212,160,23,.22);
  color: var(--ink, #fbe7b8); font: inherit; font-size: 12.5px;
}
body.light .tcom-comment-composer input { background: white; color: #5d2317; border-color: rgba(122,48,16,.22); }
.tcom-comment-composer button {
  padding: 7px 14px; border-radius: 999px;
  background: linear-gradient(135deg, #D4A017, #FF8A00);
  border: 0; color: #1c0e04;
  font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.tcom-comment-composer button:disabled { opacity: .5; }
.tcom-comment-signin {
  text-align: center; padding: 10px;
  background: rgba(0,0,0,.2); border: 1px dashed rgba(212,160,23,.25);
  border-radius: 8px; cursor: pointer;
  font-size: 12px; color: rgba(255,255,255,.6);
  margin-top: 10px;
}
body.light .tcom-comment-signin { background: rgba(255,255,255,.5); color: rgba(122,48,16,.65); border-color: rgba(122,48,16,.22); }
.tcom-comment-signin:hover { background: rgba(212,160,23,.10); color: #FFD700; border-color: #FFD700; }

/* Smaller share buttons in feed cards */
.tcom-eng .tcom-share-cp .ic { font-size: 14px; }
.tcom-eng .tcom-share-cp { flex: 0 0 36px; padding: 6px; }

/* ============================================================
 *   LOGIN WALL · standalone page only (when not signed in)
 *   Big hero, feature grid, single "Sign in" CTA
 * ============================================================ */
.tcom-wall {
  background: linear-gradient(160deg, rgba(212,160,23,.12), rgba(60,8,8,.18));
  border: 1.5px solid rgba(212,160,23,.30);
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  margin-top: 14px;
  position: relative; overflow: hidden;
  animation: tcom-wall-in .35s ease-out;
}
@keyframes tcom-wall-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
body.light .tcom-wall {
  background: linear-gradient(160deg, rgba(212,160,23,.12), rgba(255,248,225,.85));
  border-color: rgba(212,160,23,.45);
}
.tcom-wall-hero { margin-bottom: 26px; }
.tcom-wall-emoji { font-size: 64px; line-height: 1; margin-bottom: 12px; }
.tcom-wall h1 {
  font-family: 'Cinzel', serif;
  font-size: 24px; margin: 0 0 8px;
  color: #FFD700; letter-spacing: .5px;
}
body.light .tcom-wall h1 { color: #7a3010; }
.tcom-wall-lede {
  font-size: 13.5px; line-height: 1.6;
  color: rgba(255,255,255,.75); margin: 0 auto;
  max-width: 480px;
}
body.light .tcom-wall-lede { color: #7a3010; }

.tcom-wall-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  max-width: 600px;
  margin: 22px auto;
}
.tcom-wall-feat {
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(212,160,23,.20);
  border-radius: 10px;
  padding: 14px 10px;
  text-align: center;
}
body.light .tcom-wall-feat {
  background: rgba(255,255,255,.7);
  border-color: rgba(122,48,16,.20);
}
.tcom-wall-feat .ic { font-size: 24px; }
.tcom-wall-feat .lbl {
  font-size: 12px; font-weight: 600; color: #FFD700; margin-top: 6px;
}
body.light .tcom-wall-feat .lbl { color: #7a3010; }
.tcom-wall-feat .sub {
  font-size: 10.5px; color: rgba(255,255,255,.55); margin-top: 2px;
}
body.light .tcom-wall-feat .sub { color: rgba(122,48,16,.65); }

.tcom-wall-cta { margin-top: 20px; }
.tcom-wall-cta .tcom-primary-btn {
  display: block;
  padding: 14px 22px;
  font-size: 15px;
  width: 100%;
  box-shadow: 0 6px 22px rgba(212,160,23,.28);
}
.tcom-wall-cta .tcom-primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(212,160,23,.4);
}
.tcom-wall-tos {
  font-size: 11px; color: rgba(255,255,255,.5);
  margin: 14px auto 0; max-width: 380px; line-height: 1.6;
}
body.light .tcom-wall-tos { color: rgba(122,48,16,.6); }

.tcom-wall-foot {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.08);
}
body.light .tcom-wall-foot { border-color: rgba(122,48,16,.12); }
.tcom-wall-back {
  font-size: 11.5px; color: rgba(255,255,255,.55);
  text-decoration: none;
}
.tcom-wall-back:hover { color: #FFD700; text-decoration: underline; }
body.light .tcom-wall-back { color: rgba(122,48,16,.65); }
body.light .tcom-wall-back:hover { color: #7a3010; }

/* ============================================================
 *   [Batch 1 · 25-May-2026] C7, C11, C12, C13, C15, C17, C19
 * ============================================================ */

/* C11 · Author name link */
.tcom-author-link { color: inherit; text-decoration: none; font-weight: 600; cursor: pointer; }
.tcom-author-link:hover { color: var(--goldbright, #FFD700); text-decoration: underline; }
body.light .tcom-author-link:hover { color: #7a3010; }

/* C12 · Trusted ✓ badge */
.tcom-trusted {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  background: #3a8fd9; color: white;
  font-size: 9px; font-weight: 700;
  margin-left: 4px; vertical-align: middle;
}

/* C15 · Featured post banner above card */
.tcom-featured-banner {
  background: linear-gradient(135deg, var(--gold, #D4A017), #FF8A00);
  color: #1c0e04;
  padding: 5px 14px;
  border-radius: 10px 10px 0 0;
  margin: -12px -12px 10px;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  display: flex; align-items: center; gap: 6px;
}
.tcom-post.is-featured { border-color: rgba(212,160,23,.55); box-shadow: 0 0 0 1px rgba(212,160,23,.3), 0 6px 20px rgba(212,160,23,.18); }

/* C17 · ⋯ post menu */
.tcom-post-menu-btn {
  background: transparent; border: 0;
  color: rgba(255,255,255,.5);
  font-size: 18px; cursor: pointer;
  padding: 4px 8px; border-radius: 6px;
  flex-shrink: 0;
}
body.light .tcom-post-menu-btn { color: rgba(122,48,16,.55); }
.tcom-post-menu-btn:hover { background: rgba(212,160,23,.10); color: var(--goldbright, #FFD700); }
.tcom-post-menu {
  background: rgba(20,15,10,.98); border: 1px solid rgba(212,160,23,.45);
  border-radius: 10px; padding: 6px;
  width: 200px; z-index: 9999;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  font-family: -apple-system, system-ui, sans-serif;
}
body.light .tcom-post-menu { background: rgba(255,250,240,.98); border-color: rgba(122,48,16,.35); }
.tcom-post-menu .item {
  padding: 8px 12px; font-size: 12.5px;
  cursor: pointer; border-radius: 6px;
  display: flex; align-items: center; gap: 8px;
  color: var(--ink, #fbe7b8);
}
body.light .tcom-post-menu .item { color: #5d2317; }
.tcom-post-menu .item:hover { background: rgba(212,160,23,.10); color: var(--goldbright, #FFD700); }
body.light .tcom-post-menu .item:hover { color: #7a3010; }

/* C13 · Edit-window bar (own posts within 30 min) */
.tcom-edit-bar {
  background: rgba(58,143,217,.10); border: 1px solid #3a8fd9;
  border-radius: 7px; padding: 7px 12px;
  margin: 8px 0; font-size: 11.5px;
  color: #afd5ff;
  display: flex; align-items: center; gap: 10px;
}
body.light .tcom-edit-bar { background: rgba(58,143,217,.08); color: #2a6db5; }
.tcom-edit-bar .tcom-edit-timer { font-family: ui-monospace, monospace; font-weight: 700; }
.tcom-edit-bar button {
  background: rgba(0,0,0,.30); border: 1px solid rgba(255,255,255,.18);
  color: inherit; padding: 4px 10px; border-radius: 5px;
  font: inherit; font-size: 11px; cursor: pointer;
}
body.light .tcom-edit-bar button { background: white; border-color: rgba(122,48,16,.22); }
.tcom-edit-bar button.del { color: #ff9a8b; border-color: #c03a2a; }
.tcom-edit-bar button:hover { background: rgba(212,160,23,.14); border-color: #FFD700; color: #FFD700; }

/* C7 · Bookmark button in engagement row */
.tcom-bookmark-btn { flex: 0 0 36px; padding: 6px; }
.tcom-bookmark-btn.saved { color: var(--goldbright, #FFD700); }
.tcom-bookmark-btn.saved .ic { font-size: 15px; }

/* C19 · Recently viewed strip */
.tcom-recent-strip {
  background: rgba(0,0,0,.30); border: 1px solid var(--line, rgba(212,160,23,.22));
  border-radius: 12px; padding: 14px; margin: 20px 0;
}
body.light .tcom-recent-strip { background: rgba(255,255,255,.65); }
.tcom-recent-lbl {
  font-size: 11px; color: rgba(255,255,255,.55);
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 8px; font-weight: 600;
}
body.light .tcom-recent-lbl { color: rgba(122,48,16,.65); }
.tcom-recent-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 540px) { .tcom-recent-items { grid-template-columns: 1fr; } }
.tcom-recent-item {
  padding: 10px; background: var(--field-bg, rgba(20,12,6,.6));
  border: 1px solid var(--line, rgba(212,160,23,.18));
  border-radius: 8px; font-size: 11.5px;
  text-decoration: none; color: inherit;
}
body.light .tcom-recent-item { background: rgba(255,255,255,.8); border-color: rgba(122,48,16,.18); }
.tcom-recent-item:hover { border-color: var(--goldbright, #FFD700); transform: translateY(-1px); }
.tcom-recent-au { font-weight: 600; color: var(--goldbright, #FFD700); font-size: 12px; }
body.light .tcom-recent-au { color: #7a3010; }
.tcom-recent-ex {
  color: var(--ink-2, #c8a560); margin-top: 4px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
body.light .tcom-recent-ex { color: #7a3010; }

/* ============================================================
 *   STANDALONE PAGE wrapper styles (used only by /community/index.php)
 * ============================================================ */
body.tcom-standalone {
  background: #0f0a06; color: #fbe7b8;
  font-family: -apple-system, system-ui, "Inter", sans-serif;
  margin: 0; padding: 0;
  min-height: 100vh;
}
body.tcom-standalone.light { background: #fff7e6; color: #5d2317; }
.tcom-page {
  max-width: 760px; margin: 0 auto;
  padding: 14px 14px 40px;
}
.tcom-page-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; margin-bottom: 14px;
  border-bottom: 1px solid rgba(212,160,23,.18);
  position: sticky; top: 0;
  background: linear-gradient(180deg, #0f0a06 90%, transparent);
  z-index: 10;
}
body.tcom-standalone.light .tcom-page-hdr { background: linear-gradient(180deg, #fff7e6 90%, transparent); }
.tcom-page-hdr .logo {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none; color: inherit;
  font-family: 'Cinzel', serif; font-size: 15px; font-weight: 700;
}
.tcom-page-hdr .logo .om { font-size: 22px; }
.tcom-page-hdr .logo .name b { color: #FFD700; }
body.tcom-standalone.light .tcom-page-hdr .logo .name b { color: #7a3010; }
.tcom-page-hdr .back-link {
  font-size: 12px; color: rgba(255,255,255,.7);
  text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
}
.tcom-page-hdr .back-link:hover { background: rgba(212,160,23,.14); color: #FFD700; border-color: #FFD700; }
body.tcom-standalone.light .tcom-page-hdr .back-link {
  color: #7a3010; background: rgba(122,48,16,.06); border-color: rgba(122,48,16,.18);
}
.tcom-page-ftr {
  margin-top: 32px; padding: 20px 0;
  border-top: 1px solid rgba(212,160,23,.18);
  text-align: center; font-size: 11.5px; color: rgba(255,255,255,.5);
  line-height: 1.6;
}
.tcom-page-ftr a { color: #FFD700; text-decoration: none; }
.tcom-page-ftr a:hover { text-decoration: underline; }
.tcom-page-ftr .row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; }
body.tcom-standalone.light .tcom-page-ftr { color: rgba(122,48,16,.55); border-color: rgba(122,48,16,.18); }
body.tcom-standalone.light .tcom-page-ftr a { color: #7a3010; }