/* forums.css — DTN Forums (Discord-style, glass panels)
   Targets:
   - /app/forums/index.html (forumsShellV2 / forumsGridV2)
   - /app/forums/thread.html
   Keep consistent with site-wide vars in assets/css/style.css
*/

:root{
  --f-blue: var(--accent, #00B3FF);
  --f-violet: var(--violet, #7C4DFF);

  --f-bg0: rgba(10,12,20,.78);
  --f-bg1: rgba(14,18,32,.66);
  --f-bg2: rgba(255,255,255,.03);

  --f-line: rgba(255,255,255,.10);
  --f-line2: rgba(255,255,255,.14);

  --f-shadow: 0 22px 70px rgba(0,0,0,.55);
  --f-shadow2: 0 12px 32px rgba(0,0,0,.45);

  --f-radius: 22px;
  --f-radius2: 16px;

  --f-side-w: 320px;
  --f-gap: 14px;
}

/* Ensure the page background stays your site style */
body.page-app{
  color: var(--text, #E6F0FF);
}

/* Outer width + centering */
.forumsWrap{
  max-width: 1560px;
  margin: 18px auto 40px;
  padding: 0 14px;
}

/* Main glass shell */
.forumsShellV2{
  position: relative;
  border-radius: var(--f-radius);
  padding: 18px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--f-shadow);
  overflow: hidden;

  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(0,179,255,.16), transparent 60%),
    radial-gradient(900px 520px at 90% 0%, rgba(124,77,255,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));

  backdrop-filter: blur(10px);
}

.forumsShellV2::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(0,179,255,.18), rgba(124,77,255,.18));
  opacity:.35;
  filter: blur(18px);
}

.forumsShellV2 > *{ position: relative; z-index: 1; }

/* Headings */
.forumsTitle,
.forums-title{
  font-family: "Orbitron", system-ui, sans-serif;
  letter-spacing: .03em;
  font-size: clamp(30px, 3vw, 44px);
  margin: 0 0 6px;
  color: rgba(230,240,255,.96);
  text-shadow: 0 0 18px rgba(0,179,255,.10);
}

.forumsSub,
.forums-sub{
  margin: 0 0 14px;
  color: rgba(230,240,255,.72);
  font-size: 13.5px;
}

/* 2-column layout */
.forumsGridV2,
.forums-grid{
  display: grid;
  grid-template-columns: var(--f-side-w) minmax(0, 1fr);
  gap: var(--f-gap);
  align-items: start;
}

/* Sidebar panel */
.forumsSidebar{
  border-radius: var(--f-radius2);
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(0,179,255,.10), transparent 55%),
    radial-gradient(700px 360px at 90% 0%, rgba(124,77,255,.10), transparent 55%),
    linear-gradient(180deg, rgba(12,14,22,.72), rgba(10,12,20,.58));
  box-shadow: var(--f-shadow2);
  overflow: hidden;
}

.forumsSidebarHeader,
.sidebarHeader{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 12px 12px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.forumsSidebarHeader .hdrTitle,
.sidebarHeader .sidebarTitle{
  font-weight: 800;
  font-size: 12px;
  letter-spacing:.06em;
  color: rgba(230,240,255,.72);
  text-transform: uppercase;
}

.forumsSidebarHeader .hdrDots,
.sidebarHeader .sidebarDots{
  display:flex;
  gap: 6px;
}

.forumsSidebarHeader .hdrDots span,
.sidebarHeader .sidebarDots span{
  width: 7px; height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset;
}

.forumsSidebarHeader .hdrDots span:nth-child(1){ background: rgba(0,179,255,.65); }
.forumsSidebarHeader .hdrDots span:nth-child(2){ background: rgba(124,77,255,.65); }
.forumsSidebarHeader .hdrDots span:nth-child(3){ background: rgba(255,206,66,.65); }

.forumsSidebarBody,
.sidebarBody{
  max-height: calc(100vh - 270px);
  overflow: auto;
  padding: 10px;
}

/* Scrollbars (WebKit) */
.forumsSidebarBody::-webkit-scrollbar{ width: 10px; }
.forumsSidebarBody::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.10);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.35);
}

/* Channel groups */
.channelGroup,
.chanGroup{
  margin: 10px 0 12px;
}

.channelGroupTitle,
.chanGroupTitle{
  font-size: 11px;
  color: rgba(230,240,255,.55);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 0 8px 6px;
}

.channelList,
.chanList{
  display:flex;
  flex-direction: column;
  gap: 7px;
}

/* Channel button — Discord-ish */
.channelBtn,
.chanBtn{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-decoration: none;
  color: rgba(230,240,255,.88);

  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);

  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));

  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}

.channelBtn:hover,
.chanBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(0,179,255,.25);
  background:
    radial-gradient(420px 120px at 20% 0%, rgba(0,179,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: 0 16px 34px rgba(0,0,0,.45);
}

.channelBtn.isActive,
.chanBtn.isActive{
  border-color: rgba(0,179,255,.42);
  box-shadow: 0 0 0 1px rgba(0,179,255,.22) inset, 0 18px 40px rgba(0,0,0,.45);
  background:
    radial-gradient(520px 150px at 10% 0%, rgba(0,179,255,.18), transparent 62%),
    radial-gradient(420px 150px at 95% 0%, rgba(124,77,255,.14), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}

.channelLeft,
.chanLeft{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}

.channelHash,
.chanHash{
  width: 22px;
  height: 22px;
  display:grid;
  place-items:center;
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  color: rgba(230,240,255,.65);
  flex: 0 0 auto;
}

.channelName,
.chanName{
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.channelMeta,
.chanMeta{
  display:flex;
  align-items:center;
  gap: 8px;
  flex: 0 0 auto;
}

.badgeTag,
.chanBadge{
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  color: rgba(230,240,255,.72);
}

.badgeTag.postOnly{ border-color: rgba(255,206,66,.35); color: rgba(255,230,180,.82); }
.chanBadge.postOnly{ border-color: rgba(255,206,66,.35); color: rgba(255,230,180,.82); }
.badgeTag.locked{ border-color: rgba(255,77,109,.35); color: rgba(255,180,190,.82); }
.chanBadge.locked{ border-color: rgba(255,77,109,.35); color: rgba(255,180,190,.82); }

.kDot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.25);
  box-shadow: 0 0 0 2px rgba(0,0,0,.35);
}
.kDot.pub{ background: rgba(0,179,255,.75); }
.kDot.staff{ background: rgba(255,206,66,.75); }
.kDot.duel{ background: rgba(124,77,255,.75); }
.kDot.mem{ background: rgba(180,190,210,.70); }


/* Main panel (threads list / thread view) */
.forumsMain{
  min-width: 0;
}

.mainCard,
.glassCard{
  border-radius: var(--f-radius2);
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(1100px 520px at 30% -10%, rgba(0,179,255,.10), transparent 55%),
    radial-gradient(900px 520px at 95% 0%, rgba(124,77,255,.10), transparent 55%),
    linear-gradient(180deg, rgba(12,14,22,.72), rgba(10,12,20,.58));
  box-shadow: var(--f-shadow2);
  overflow: hidden;
}

.mainCardHeader,
.threadsHeader,
.boardHead{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 14px;
}

.boardTitle,
.threadsHeader h2,
.boardHead h2{
  font-weight: 900;
  font-size: 18px;
  margin: 0;
}

.boardSub,
.threadsHeader .desc,
.boardHead .desc{
  margin-top: 2px;
  color: rgba(230,240,255,.65);
  font-size: 12px;
}

.boardControls,
.threadsHeader .controls,
.boardHead .controls{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.boardControls label{
  font-size: 12px;
  color: rgba(230,240,255,.70);
}

.boardControls input,
.boardControls select{
  height: 34px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.30);
  color: rgba(230,240,255,.92);
  outline: none;
}

.boardControls input:focus,
.boardControls select:focus{
  border-color: rgba(0,179,255,.40);
  box-shadow: 0 0 0 3px rgba(0,179,255,.12);
}

.btnPrimary{
  height: 34px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,179,255,.30);
  background:
    linear-gradient(180deg, rgba(0,179,255,.16), rgba(124,77,255,.12));
  color: rgba(230,240,255,.96);
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(0,0,0,.35);
}

.btnPrimary:hover{
  border-color: rgba(0,179,255,.50);
  box-shadow: 0 16px 34px rgba(0,0,0,.45);
}

/* Tabs / filters */
.filterTabs,
.threadsHeader .filters{
  display:flex;
  gap: 6px;
  padding: 10px 14px 12px;
}

.filterTabs button{
  height: 28px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  color: rgba(230,240,255,.80);
  cursor: pointer;
}

.filterTabs button.isActive{
  border-color: rgba(0,179,255,.40);
  box-shadow: 0 0 0 1px rgba(0,179,255,.20) inset;
}

/* Thread list */
.threadList,
.threadListWrap{
  padding: 12px 14px 14px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.threadRow,
.threadRowLink{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.22);
  text-decoration: none;
  color: rgba(230,240,255,.92);
}

.threadRow:hover,
.threadRowLink:hover{
  border-color: rgba(0,179,255,.25);
  background:
    radial-gradient(520px 160px at 15% 0%, rgba(0,179,255,.10), transparent 60%),
    rgba(0,0,0,.20);
}

.threadRowTitle,
.threadRowLink .title{
  font-weight: 900;
}

.threadRowMeta,
.threadRowLink .meta{
  color: rgba(230,240,255,.60);
  font-size: 12px;
}

.threadRowGo,
.threadRowLink .go{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  color: rgba(230,240,255,.85);
}

/* Pagination */
.pager{
  padding: 0 14px 14px;
  display:flex;
  gap: 10px;
  align-items: center;
}

.pager button{
  height: 32px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  color: rgba(230,240,255,.85);
  cursor:pointer;
}

.pager button:hover{
  border-color: rgba(0,179,255,.25);
}

/* Thread page layout */
.threadWrap{
  max-width: 1560px;
  margin: 18px auto 40px;
  padding: 0 14px;
}

.threadShell{
  border-radius: var(--f-radius);
  padding: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(0,179,255,.16), transparent 60%),
    radial-gradient(900px 520px at 90% 0%, rgba(124,77,255,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  box-shadow: var(--f-shadow);
  overflow: hidden;
}

.threadShell > *{ position: relative; z-index: 1; }

.threadGrid{
  display:grid;
  grid-template-columns: var(--f-side-w) minmax(0, 1fr);
  gap: var(--f-gap);
  align-items: start;
}

.threadTopRow{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}

.threadTitle{
  font-family: "Orbitron", system-ui, sans-serif;
  letter-spacing:.03em;
  margin: 0;
  font-size: 34px;
}

.threadMetaLine{
  color: rgba(230,240,255,.62);
  font-size: 12px;
  margin-top: 6px;
}

/* Posts */
.forumsPost,
.postCard{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(0,179,255,.08), transparent 55%),
    radial-gradient(700px 360px at 90% 0%, rgba(124,77,255,.08), transparent 55%),
    rgba(0,0,0,.20);
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
  padding: 14px;
}

.postHeader,
.postHead{
  display:flex;
  gap: 12px;
  align-items:flex-start;
}

.postAvatar{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
}

.postHeadMain{ min-width: 0; }

.postAuthor,
.postUser{
  font-weight: 900;
  color: rgba(0,179,255,.92);
  text-decoration: none;
}

.postAuthor:hover{ text-decoration: underline; }

.postTime{
  color: rgba(230,240,255,.55);
  font-size: 12px;
  margin-top: 2px;
}

.roleBadges{
  display:flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.roleBadge{
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.30);
  color: rgba(230,240,255,.78);
  letter-spacing: .02em;
}

.roleBadge.ADMIN{ border-color: rgba(255,206,66,.38); color: rgba(255,236,195,.90); }
.roleBadge.MODERATOR{ border-color: rgba(0,179,255,.38); }
.roleBadge.TOURNAMENT_HOST{ border-color: rgba(124,77,255,.38); }
.roleBadge.DUELTAINER{ border-color: rgba(160,120,255,.40); }

.forumsPostBody{
  margin-top: 10px;
  color: rgba(230,240,255,.88);
  line-height: 1.45;
}

/* Markdown content */
.forumsPostBody h1,
.forumsPostBody h2,
.forumsPostBody h3{
  font-family: "Orbitron", system-ui, sans-serif;
  letter-spacing: .02em;
  margin: 14px 0 8px;
}

.forumsPostBody a{ color: rgba(0,179,255,.95); }
.forumsPostBody a:hover{ color: rgba(124,77,255,.95); }

.forumsPostBody code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
  padding: 2px 6px;
  border-radius: 10px;
}

.forumsPostBody pre{
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
  padding: 12px;
  border-radius: 16px;
  overflow: auto;
}

/* Image resizing / containment */
.forumsPostBody img{
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.28);
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
  margin: 10px 0;
}

/* When images are huge, keep them from blowing up the whole screen */
@supports (object-fit: contain){
  .forumsPostBody img{
    max-height: 560px;
    object-fit: contain;
  }
}

/* Reply composer */
.replyCard{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(0,179,255,.08), transparent 55%),
    radial-gradient(700px 360px at 90% 0%, rgba(124,77,255,.08), transparent 55%),
    rgba(0,0,0,.18);
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
  overflow: hidden;
}

.replyCardHeader{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(90deg, rgba(0,179,255,.10), rgba(124,77,255,.10));
}

.replyCardHeader .title{
  font-weight: 900;
}

.replyToolbar{
  padding: 10px 14px;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items:center;
}

.replyToolbar button{
  height: 28px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  color: rgba(230,240,255,.85);
  cursor: pointer;
}

.replyToolbar button:hover{ border-color: rgba(0,179,255,.25); }

.replyTextArea{
  width: 100%;
  min-height: 180px;
  padding: 12px 14px;
  border: 0;
  outline: none;
  resize: vertical;
  background: rgba(0,0,0,.18);
  color: rgba(230,240,255,.92);
}

.replyFooter{
  padding: 12px 14px 14px;
  display:flex;
  justify-content: flex-end;
}

.replyFooter .btnPrimary{ height: 36px; }

/* Utility */
.smallMuted{ color: rgba(230,240,255,.55); font-size: 12px; }

/* Responsive */
@media (max-width: 1040px){
  :root{ --f-side-w: 290px; }
}

@media (max-width: 900px){
  .forumsGridV2,
  .threadGrid{ grid-template-columns: 1fr; }
  .forumsSidebarBody,
.sidebarBody{ max-height: none; }
}

/* Thread page — mod/action toolbar */
.toolbarBar{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  margin: 0 0 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}

.toolbarBar button,
.toolbarBar .btn{
  height: 30px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  color: rgba(230,240,255,.85);
  cursor:pointer;
}

.toolbarBar button:hover,
.toolbarBar .btn:hover{
  border-color: rgba(0,179,255,.25);
}

/* Composer (uses glassCard + composer + mdToolbar) */
.composer{
  padding: 12px 14px 14px;
}

.composer .hint{
  margin-top: 2px;
  color: rgba(230,240,255,.55);
  font-size: 12px;
}

.mdToolbar{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(90deg, rgba(0,179,255,.06), rgba(124,77,255,.06));
}

.mdToolbar button{
  height: 28px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  color: rgba(230,240,255,.85);
  cursor: pointer;
}

.mdToolbar button:hover{ border-color: rgba(0,179,255,.25); }

.composer textarea,
#reply_text,
#new_thread_body{
  width: 100%;
  min-height: 180px;
  padding: 12px 14px;
  border: 0;
  outline: none;
  resize: vertical;
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  color: rgba(230,240,255,.92);
}

.composer .actions{
  display:flex;
  justify-content: flex-end;
  padding-top: 10px;
}

/* Keep main column truly wide (the previous "widen" patch was overriding this) */
.forumsMain,
.threadsMain,
.threadMain{
  width: 100%;
  min-width: 0;
}

/* If a previous patch forced a narrow max-width, kill it */
.threadsCard,
#threads_card,
#thread_card{
  max-width: none !important;
}


/* ===== Forum avatars (thread posts / replies) =====
   forums-utils.js renders avatars with class .pfp
   Keep compact so posts don't get dominated by images.
*/
.postUser .pfp,
.postUser .pfpFallback{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  flex: 0 0 36px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 22px rgba(0,0,0,.35);
}

.postUser .pfpFallback{
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  color: rgba(230,240,255,.85);
}


/* ===== Forum role badge colors (match profiles/members) ===== */
.roleBadge.role-admin{
  border-color: rgba(255, 77, 109, .60);
  background: rgba(255, 77, 109, .12);
  color:#ff5c74;
  box-shadow: 0 0 0 1px rgba(255, 77, 109, .18) inset, 0 0 18px rgba(255, 77, 109, .18);
}
.roleBadge.role-mod,
.roleBadge.role-moderator{
  border-color: rgba(0, 179, 255, .60);
  background: rgba(0, 179, 255, .10);
  color:#00b3ff;
  box-shadow: 0 0 0 1px rgba(0, 179, 255, .18) inset, 0 0 18px rgba(0, 179, 255, .18);
}
.roleBadge.role-host,
.roleBadge.role-tournament_host{
  border-color: rgba(124, 77, 255, .68);
  background: rgba(124, 77, 255, .12);
  color:#9f7cff;
  box-shadow: 0 0 0 1px rgba(124, 77, 255, .20) inset, 0 0 18px rgba(124, 77, 255, .18);
}
.roleBadge.role-duel,
.roleBadge.role-dueltainer{
  border-color: rgba(0, 255, 170, .55);
  background: rgba(0, 255, 170, .10);
  color:#00ffbf;
  box-shadow: 0 0 0 1px rgba(0, 255, 170, .16) inset, 0 0 18px rgba(0, 255, 170, .14);
}
.roleBadge.role-member{
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color:#cfd8ff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset, 0 0 14px rgba(255,255,255,.08);
}


/* ===== Pagination controls (threads + replies) ===== */
.pager select{
  height: 32px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  color: rgba(230,240,255,.85);
  outline: none;
}
.pager select:focus{
  border-color: rgba(0,179,255,.30);
  box-shadow: 0 0 0 2px rgba(0,179,255,.12);
}

/* Reply pager (thread page) */
.replyPager{
  display:flex;
  gap: 10px;
  align-items:center;
  margin-left:auto;
}
.replyPager .btn.ghost,
.replyPager button{
  height: 32px;
  padding: 0 12px;
  border-radius: 12px;
}
.replyPager select{
  height: 32px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  color: rgba(230,240,255,.85);
  outline:none;
}
.replyPagerInfo{
  font-size: 12px;
  color: rgba(230,240,255,.65);
  min-width: 84px;
  text-align:center;
}


/* ===== Reports page helpers ===== */
.emptyState{padding:18px 12px; opacity:.75;}


/* Quote embed (reply quoting) */
.quoteEmbed{ box-shadow: 0 10px 26px rgba(0,0,0,.35); }


/* Jump highlight for ?p=post_id */
.postCard--jump{ box-shadow: 0 0 0 1px rgba(0,179,255,.30) inset, 0 0 24px rgba(124,77,255,.35); }


/* Unified search dropdown (Phase 3) */
.dtnSearchDrop{
  margin-top: 10px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
  padding: 10px;
}
.dtnSearchTabs{ display:flex; gap:8px; align-items:center; padding: 4px 4px 10px; }
.dtnTab{
  appearance:none;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(230,240,255,.88);
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  cursor:pointer;
}
.dtnTab.isOn{
  border-color: rgba(0,179,255,.28);
  box-shadow: 0 0 0 1px rgba(124,77,255,.24) inset, 0 0 22px rgba(124,77,255,.22);
}
.dtnSearchBody{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
@media (max-width: 980px){ .dtnSearchBody{ grid-template-columns: 1fr; } }
.dtnSearchSection{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.12);
  padding: 10px;
  min-height: 120px;
}
.dtnSearchHead{ display:flex; justify-content:space-between; align-items:center; gap: 10px; margin-bottom: 8px; }
.dtnPager{ display:flex; gap:6px; align-items:center; }
.dtnSearchList a{
  display:block;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  text-decoration:none;
  margin-bottom: 8px;
}
.dtnSearchList a:hover{
  border-color: rgba(0,179,255,.22);
  box-shadow: 0 0 0 1px rgba(124,77,255,.18) inset;
}