:root{
  --bg0:#0b0b10;
  --bg1:#10101a;
  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.10);
  --text:#eef0ff;
  --muted: rgba(238,240,255,.68);
  --line: rgba(255,255,255,.10);
  --accent:#ff2e4d;
  --accent2:#ff5a73;
  --good:#31d0aa;
  --warn:#ffb020;
  --shadow: 0 18px 50px rgba(0,0,0,.55);
  --radius: 18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(255,46,77,.35), transparent 60%),
    radial-gradient(1000px 700px at 90% 10%, rgba(49,208,170,.22), transparent 55%),
    radial-gradient(900px 600px at 40% 100%, rgba(88,139,255,.18), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  color: var(--text);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1100px;margin:0 auto;padding:18px}
.shell{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.topbar{
  position:sticky;top:0;z-index:50;
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(16,16,26,.86), rgba(16,16,26,.55));
  border-bottom: 1px solid var(--line);
}
.topbar .row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 18px;
}
.brand{display:flex;align-items:center;gap:10px}
.logo{
  width:38px;height:38px;border-radius:12px;
  background: radial-gradient(circle at 30% 30%, var(--accent2), var(--accent));
  box-shadow: 0 10px 26px rgba(255,46,77,.28);
  display:grid;place-items:center;
  font-weight:800;
}
.brand h1{font-size:14px;letter-spacing:.3px;margin:0}
.brand .sub{font-size:12px;color:var(--muted);margin:0}
.nav{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:999px;border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  transition: .15s ease transform, .15s ease background, .15s ease border;
  font-size:13px;color: var(--muted);
}
.pill:hover{transform: translateY(-1px);border-color: rgba(255,255,255,.18);background: rgba(255,255,255,.06);color:var(--text)}
.pill.active{background: rgba(255,46,77,.12);border-color: rgba(255,46,77,.4);color: var(--text)}
.badge{
  min-width:18px;height:18px;border-radius:999px;
  background: var(--accent); color:#fff;
  display:inline-grid;place-items:center;
  font-size:11px;font-weight:700;padding:0 6px;
}
.grid{
  display:grid;gap:14px;
}
@media(min-width: 920px){
  .layout{grid-template-columns: 320px 1fr;}
}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.card .hd{
  padding:14px 16px;border-bottom: 1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.card .hd h2{margin:0;font-size:14px;letter-spacing:.2px}
.card .bd{padding:14px 16px}
.muted{color:var(--muted)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:11px 13px;border-radius:14px;border:1px solid rgba(255,46,77,.45);
  background: linear-gradient(180deg, rgba(255,46,77,.18), rgba(255,46,77,.10));
  color: var(--text);
  font-weight:700;font-size:13px;
  transition:.15s ease transform, .15s ease filter, .15s ease background;
  cursor:pointer;
}
.btn:hover{transform: translateY(-1px);filter: brightness(1.05)}
.btn.secondary{
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
  font-weight:600;color:var(--muted)
}
.btn.secondary:hover{color:var(--text)}
.btn.danger{
  border-color: rgba(255,46,77,.55);
  background: rgba(255,46,77,.08);
}
.btn.small{padding:8px 10px;border-radius:12px;font-size:12px}
.row{display:flex;gap:12px;align-items:center}

/* Comment/post action buttons */
.comment-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  max-width:100%;
}
.comment-actions form{margin:0}
.comment-actions .btn{white-space:nowrap}

@media (max-width: 640px){
  /* On narrow screens, stack header rows and keep action buttons usable */
  .comment .row{flex-wrap:wrap}

  .comment-actions{
    width:100%;
    flex: 0 0 100%;
    justify-content:flex-start;
    gap:6px;
  }

  .comment-actions .btn{
    padding:8px 10px;
    font-size:12px;
  }
}
.stack{display:flex;flex-direction:column;gap:10px}
.field{display:flex;flex-direction:column;gap:7px}
label{font-size:12px;color:var(--muted)}
input,textarea,select{
  width:100%;
  padding:12px 12px;border-radius:14px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color: var(--text);
  outline:none;
}
textarea{min-height:100px;resize:vertical}
input:focus, textarea:focus, select:focus{
  border-color: rgba(255,46,77,.45);
  box-shadow: 0 0 0 3px rgba(255,46,77,.12);
}
.note{font-size:12px;color:var(--muted);line-height:1.4}
.alert{
  padding:12px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  font-size:13px;
}
.alert.ok{border-color: rgba(49,208,170,.45);background: rgba(49,208,170,.08)}
.alert.bad{border-color: rgba(255,46,77,.45);background: rgba(255,46,77,.08)}
.avatar{
  width:52px;height:52px;border-radius:16px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  overflow:hidden;
  display:grid;place-items:center;
  font-weight:800;color: rgba(238,240,255,.8);
}
.avatar--profile {
    width: auto !important;
    height: 200px;
}

.avatar.sm{width:40px;height:40px;border-radius:14px}
.avatar.lg{width:92px;height:92px;border-radius:26px}
.avatar.xl{width:104px;height:104px;border-radius:30px}
.avatar.xxl{width:136px;height:136px;border-radius:36px}
.meta{font-size:12px;color:var(--muted)}
.post{
  padding:14px 14px;border-radius: 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}
.post .top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.post .content{white-space:pre-wrap;line-height:1.55}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{font-size:12px;color:var(--muted);border:1px solid rgba(255,255,255,.12);padding:6px 10px;border-radius:999px;background: rgba(255,255,255,.04)}
.post img.media{
  margin-top:12px;border-radius: 14px;border:1px solid rgba(255,255,255,.12);
}
.divider{height:1px;background: var(--line);margin:12px 0}
.comment{padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background: rgba(255,255,255,.04)}

/* Pinned/highlight wrapper in rooms (keep readable in dark theme) */
.pinned-wrap{
  border:2px solid rgba(255,176,32,.55);
  background: rgba(255,176,32,.10);
}

.pinned-wrap .meta{color: var(--text)}
/* Chat */
.chatWrap{display:grid;gap:12px}
@media(min-width: 920px){ .chatWrap{grid-template-columns: 320px 1fr;} }
.chatList{max-height: calc(100vh - 190px);overflow:auto}
.chatItem{
  padding:12px;border-radius:16px;border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  display:flex;gap:10px;align-items:center;justify-content:space-between;
}
.chatItem.unread{border-color: rgba(255,46,77,.45);background: rgba(255,46,77,.07)}
.bubble{
  max-width: 86%;
  padding:10px 12px;border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  line-height:1.5;
}
.bubble.me{
  margin-left:auto;
  border-color: rgba(255,46,77,.40);
  background: rgba(255,46,77,.10);
}
.chatMsgs{display:flex;flex-direction:column;gap:10px;max-height: calc(100vh - 320px);overflow:auto;padding-right:6px}
.footerBar{
  margin-top:18px;
  padding:18px;
  color: rgba(238,240,255,.55);
  font-size:12px;
  text-align:center;
}

/* Styled file input */
.fileWrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap;position:relative}
.fileWrap input[type=file]{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.fileBtn{
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 13px;border-radius:14px;border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
  color: var(--muted);
  cursor:pointer;
  transition:.15s ease transform, .15s ease background, .15s ease border, .15s ease color;
  font-size:13px;font-weight:650;
}
.fileBtn:hover{transform: translateY(-1px);border-color: rgba(255,255,255,.22);background: rgba(255,255,255,.07);color:var(--text)}
.fileName{font-size:12px;color:var(--muted)}

/* Long lists on mobile: keep cards compact and scrollable */
.scrollbox{max-height:none}
@media(max-width: 720px){
  .scrollbox{max-height: 280px; overflow:auto; padding-right:6px}
  .profileRoomsGrid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))!important}
}

/* Room cover image should not be cropped */
.coverImg{width:100%;height:220px;object-fit:contain;background: rgba(255,255,255,.04)}


/* Chat input bar */
.chat-input-bar {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid #ddd;
         background: #1f2937;
    border-top: 1px solid #374151;

    position: sticky;
    bottom: 0;
}

/* Örömforrások */
.joyIntro{font-size:13px;line-height:1.55;color:var(--muted)}
.joyIntro p{margin:0 0 10px 0}
.joyTableWrap{overflow:auto;border:1px solid var(--line);border-radius:14px;background: rgba(255,255,255,.03)}
.joyTable{width:100%;border-collapse:separate;border-spacing:0}
.joyTable td{vertical-align:top;padding:10px 12px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-width:240px}
.joyTable tr:last-child td{border-bottom:none}
.joyTable td:last-child{border-right:none}
.joyCell{cursor:pointer;transition:.15s ease filter,.15s ease background}
.joyCell:hover{filter:brightness(1.07)}
.joyCell.is-green,.joyCell.is-blue,.joyCell.is-red{color:#fff;font-weight:800}
.joyCell.is-green{background: rgba(49,208,170,.35);border-color: rgba(49,208,170,.55)}
.joyCell.is-blue{background: rgba(88,139,255,.35);border-color: rgba(88,139,255,.55)}
.joyCell.is-red{background: rgba(255,46,77,.28);border-color: rgba(255,46,77,.55)}
.joyLink{text-decoration:underline}
.joyCell{cursor:default;position:relative}
.joyCellInner{display:flex;flex-direction:column;gap:8px}
.joyCellTools{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.joyCellPick{width:18px;height:18px;border-radius:999px;border:1px solid rgba(255,255,255,.20);background: rgba(255,255,255,.04);cursor:pointer;padding:0}
.joyCellPick[data-color="green"]{background: rgba(49,208,170,.28);border-color: rgba(49,208,170,.55)}
.joyCellPick[data-color="blue"]{background: rgba(88,139,255,.28);border-color: rgba(88,139,255,.55)}
.joyCellPick[data-color="red"]{background: rgba(255,46,77,.22);border-color: rgba(255,46,77,.55)}
td.joyCell[data-color="green"] .joyCellPick[data-color="green"],td.joyCell[data-color="blue"] .joyCellPick[data-color="blue"],td.joyCell[data-color="red"] .joyCellPick[data-color="red"]{box-shadow:0 0 0 3px rgba(255,255,255,.10);filter:brightness(1.12)}
.joyPalette{display:inline-flex;align-items:center;gap:8px}
.joyPick{width:28px;height:28px;border-radius:999px;border:1px solid rgba(255,255,255,.20);background: rgba(255,255,255,.04);cursor:pointer;display:inline-grid;place-items:center;color:var(--text);font-weight:900}
.joyPick[data-color="green"]{background: rgba(49,208,170,.28);border-color: rgba(49,208,170,.55)}
.joyPick[data-color="blue"]{background: rgba(88,139,255,.28);border-color: rgba(88,139,255,.55)}
.joyPick[data-color="red"]{background: rgba(255,46,77,.22);border-color: rgba(255,46,77,.55)}
.joyPick.active{filter:brightness(1.15);box-shadow: 0 0 0 3px rgba(255,255,255,.10)}

.joyUserGrid{display:grid;gap:10px}
.joyUserCard{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background: rgba(255,255,255,.04)}
.joyUserCard:hover{border-color: rgba(255,255,255,.20);background: rgba(255,255,255,.06)}
.joyUserMeta{display:flex;flex-direction:column;gap:4px;min-width:0}
.joyUserName{font-weight:800}
.joyUserBio{font-size:12px;color:var(--muted);line-height:1.45;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}

.chat-textarea {
    flex: 1;
    resize: none;
    border-radius: 18px;
    padding: 10px 14px;
  background: #111827;
    color: #f9fafb;
    border: 1px solid #374151;
    font-size: 14px;
    line-height: 1.4;
    max-height: 120px;
    overflow-y: auto;
}

.chat-textarea:focus {
    outline: none;
    border-color: #4f46e5;
}

.chat-attach {
    cursor: pointer;
    font-size: 20px;
    user-select: none;
}

.chat-attach input {
    display: none;
}

.chat-send {
    background: #4f46e5;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    cursor: pointer;
    font-size: 16px;
}

.chat-send:hover {
    background: #4338ca;
}

/* Members collapse (room sidebar) */
.membersCollapse{border:1px solid rgba(255,255,255,.10);background: rgba(255,255,255,.03);border-radius:16px;padding:10px 12px}
.membersSummary{cursor:pointer;list-style:none;font-weight:800;display:flex;align-items:center;justify-content:space-between;gap:10px}
.membersSummary::-webkit-details-marker{display:none}
.membersList{margin-top:10px}

/* Mobile: start collapsed, Desktop: keep open */
@media(min-width: 721px){
  .membersCollapse{padding:12px 14px}
}


/* Messages mobile UX: single-pane navigation */
.chatPane{min-width:0}

.chatBack{
  display:none;
  align-items:center;
  gap:8px;
  font-weight:800;
  color: var(--text);
  text-decoration:none;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}

/* Mobile: show list OR thread (not both) */
@media(max-width: 919px){
  .chatBack{display:inline-flex}
  .chatWrap .chatPane--thread{display:none}
  .chatWrap.hasThread .chatPane--list{display:none}
  .chatWrap.hasThread .chatPane--thread{display:block}
}


.card .bd > div { display:block !important; }

/* Joy cell-level tools (always visible) */
.joyCell{cursor:default;position:relative}
.joyCellInner{display:flex;flex-direction:column;gap:8px}
.joyCellTools{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.joyCellPick{width:18px;height:18px;border-radius:999px;border:1px solid rgba(255,255,255,.20);background: rgba(255,255,255,.04);cursor:pointer;padding:0}
.joyCellPick[data-color="green"]{background: rgba(49,208,170,.28);border-color: rgba(49,208,170,.55)}
.joyCellPick[data-color="blue"]{background: rgba(88,139,255,.28);border-color: rgba(88,139,255,.55)}
.joyCellPick[data-color="red"]{background: rgba(255,46,77,.22);border-color: rgba(255,46,77,.55)}

/* Highlight the currently active color for the given cell */
.joyCell[data-color="green"] .joyCellPick[data-color="green"],
.joyCell[data-color="blue"] .joyCellPick[data-color="blue"],
.joyCell[data-color="red"] .joyCellPick[data-color="red"]{filter:brightness(1.15);box-shadow: 0 0 0 3px rgba(255,255,255,.10)}

/* Keep link readable on colored background */
.joyCell.is-green .joyLink,
.joyCell.is-blue .joyLink,
.joyCell.is-red .joyLink{color:#fff;font-weight:800}


.joyUserAvatar {
  width: 280px;
  height: 280px;
  object-fit: cover;
  border-radius: 12px;
}


.joyUserCard {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
    align-items: flex-start;
}

.joyUserInfo p {
    margin-top: 6px;
    color: white;
}


.avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}
.avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover; /* 🔥 EZ A KULCS */
}
.comment-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

/* POSZT AVATAR (div.avatar.sm-ben van) */
div.avatar.sm {
    width:40px;
    height:40px;
    flex-shrink:0;
}
div.avatar.sm img {
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
}

/* KOMMENT / VÁLASZ AVATAR (önálló img) */
img.avatar.sm {
    width:32px;
    height:32px;
    object-fit:cover;
    border-radius:50%;
    flex-shrink:0;
}
/* ===== POSZT SZÍV – JOBB OLDALI, KERETEZETT ===== */

.post-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:10px;
}

.post-heart{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  cursor:pointer;
  font-size:13px;
  font-weight:700;
  color: var(--muted);
  transition: 
    transform .12s ease,
    background .12s ease,
    border-color .12s ease;
}

.post-heart:hover{
  transform: translateY(-1px);
  background: rgba(255,46,77,.10);
  border-color: rgba(255,46,77,.45);
  color: var(--text);
}

.post-heart:active{
  transform: scale(.96);
}

.post-heart .heart-icon{
  font-size:15px;
  line-height:1;
}


/* ===== PROFIL OLDAL – NAGY AVATAR ===== */

.avatar.avatar--profile{
  width: 220px !important;
  height: 220px !important;
  border-radius: 24px;
  overflow: hidden;
  flex-shrink: 0;
}

.avatar.avatar--profile img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================
   Landing (magazine style)
   ========================= */
.landingWrap{
  display:flex;
  justify-content:center;
  padding: 8px 0 22px;
}

/* Thin column for readable, magazine-like layout */
.landingArticle{
  width: min(720px, 100%);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 6px);
  box-shadow: var(--shadow);
  padding: 26px 26px 22px;
}

@media(max-width: 520px){
  .landingArticle{ padding: 20px 16px 18px; }
}

.landingHeader{ margin-bottom: 16px; }

/* VERY large title */
.landingTitle{
  margin:0;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(34px, 4.2vw, 56px);
}

/* Slightly smaller lead/description */
.landingLead{
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.45;
  font-size: clamp(18px, 2.2vw, 24px);
}

/* Bigger body text than before + magazine-ish rhythm */
.landingBody{
  margin-top: 18px;
  font-size: 19px;
  line-height: 1.85;
  letter-spacing: 0.01em;
}

.landingBody a{ text-decoration: underline; }

.landingCtaRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 18px;
}


/* AI-friendly short answers under H2 sections */
.aiShortAnswer{
  margin:10px 0 10px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background:rgba(255,255,255,.04);
}
.aiShortAnswerT{ font-weight:850; margin-bottom:6px; }
.aiShortAnswerB{ color:var(--text); opacity:.92; white-space:pre-wrap; }


/* AI/SEO blocks */
.ai-definition{
  border-left:6px solid #2f8f5b;
  background:rgba(47,143,91,0.08);
  padding:14px 16px;
  margin:14px 0;
  border-radius:12px;
  font-size:18px;
  line-height:1.6;
}
.aiShortAnswer{
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.04);
  padding:12px 14px;
  margin:10px 0 14px;
  border-radius:12px;
}
.aiShortAnswerT{ font-weight:900; margin-bottom:6px; }
.aiShortAnswerB{ opacity:0.95; }
.aiSnippet{
  border:1px dashed rgba(255,255,255,0.20);
  background:rgba(255,255,255,0.03);
  padding:14px 16px;
  margin:18px 0 0;
  border-radius:14px;
}
.aiSnippetT{ font-weight:900; margin-bottom:6px; }


/* Solid primary button (for Join buttons etc.) */
.btn.solid{background:#e11d48;color:#fff;border:1px solid rgba(0,0,0,.08)}
.btn.solid:hover{filter:brightness(1.02)}

.shareButtons{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 10px 0;}
.shareCta{margin-top:18px;padding:14px 16px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(0,0,0,.18);}
.shareCta h3{margin:0 0 6px 0;}


.communityHero,.threadHero{background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.12);border-radius:28px;padding:28px;box-shadow:var(--shadow)}
.communityHero{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;margin-bottom:18px}
.communityHero h1,.threadHero h1{margin:6px 0 10px;font-size:clamp(28px,4vw,46px);line-height:1.02}.communityHero p,.threadHero .threadBody{max-width:900px;font-size:16px;line-height:1.7;color:var(--text)}
.communityGrid{display:grid;grid-template-columns:minmax(280px,360px) 1fr;gap:18px}.eyebrow{color:#ff8fa0;text-transform:uppercase;letter-spacing:.16em;font-weight:800;font-size:12px}.communityActions{display:flex;gap:10px;align-items:center}.threadCard,.replyCard{background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:20px;box-shadow:var(--shadow)}.threadCard h2{font-size:28px;line-height:1.1;margin:14px 0 12px}.threadCard p{color:var(--muted);line-height:1.7}.threadCardTop,.threadMeta{display:flex;justify-content:space-between;gap:10px;align-items:center}.heartPill{padding:8px 12px;border-radius:999px;background:rgba(255,46,77,.12);border:1px solid rgba(255,46,77,.35);font-weight:800}.bestReply{border-color:rgba(255,176,32,.6);background:linear-gradient(180deg,rgba(255,176,32,.12),rgba(255,255,255,.05))}.bestBadge{display:inline-block;margin-bottom:12px;padding:8px 12px;border-radius:999px;background:#ffb020;color:#221300;font-weight:900}.childReply{margin-top:14px;margin-left:24px;padding:16px;border-left:3px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);border-radius:18px}.replyForm summary{cursor:pointer;color:#ff8fa0;font-weight:700}.threadBody{white-space:pre-wrap}.adminTabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}@media(max-width:880px){.communityHero,.communityGrid{grid-template-columns:1fr}.childReply{margin-left:0}}


.seoFeatureCard{position:relative;overflow:hidden}.seoFeatureCard::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at top right,rgba(255,46,77,.16),transparent 42%);pointer-events:none}.featureLead{font-size:18px;line-height:1.8;color:var(--text);max-width:950px}.faqItem{border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:14px 16px;background:rgba(255,255,255,.04)}.faqItem summary{cursor:pointer;font-weight:800;list-style:none}.faqItem summary::-webkit-details-marker{display:none}.faqAnswer{margin-top:10px;color:var(--muted);line-height:1.7}.relatedLinks{gap:12px}.relatedLink{display:block;padding:14px 16px;border-radius:18px;text-decoration:none;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:var(--text)}.relatedLink strong{display:block;margin-bottom:6px;font-size:16px}.relatedLink span{display:block;color:var(--muted);line-height:1.5}.relatedLink:hover{border-color:rgba(255,46,77,.35);transform:translateY(-1px)}