/* ==========================================================
   PixelPoint v1.1 — ForumSpark B2 Layout Theme
   Full build: core theme + palette widget + welcome hero

   Everything is scoped to body.b2 (light) and body.b2.dark.
   Colours live in tokens (--pp-*) so dark mode only redefines
   variables. Edit section 1 (TOKENS) to recolour the theme.

   HOW THE FILE IS ORGANISED
   Sections run top to bottom in cascade order. Later sections
   and patches intentionally override earlier ones, so do not
   reorder blocks: later rules win ties.

   CONTENTS
    1. TOKENS
    2. BODY, LINKS, BASE
    3. TOP BAR + LOGO
    4. NAVIGATION (separate buttons, pressed-in hover)
    5. BREADCRUMBS
    6. #WRAP — MAIN ROUNDED CONTAINER
    7. PANELS
    8. CATEGORIES
    9. FORUM ROWS
   10. TOPIC HEADER (b2-thead) — matches the post cards
   11. FORUM HEADER CARD (title / stats / actions / New Topic)
   12. WIDGETS (users online, new posts, stats)
   13. TOPIC LIST
   14. TOPIC LIST — matches forum rows / posts
   15. TOPIC VIEW / REPLIES
   16. QUICK REPLY
   17. QUICK REPLY / COMPOSER (b2-composer) — matches posts
   18. BUTTONS (pressed-in hover everywhere)
   19. FORMS / INPUTS
   20. BADGES, PAGINATION, REACTIONS, ETC.
   21. DROPDOWNS + NOTIFICATIONS
   22. CODE BLOCKS
   23. MEMBERS PAGE
   24. MEMBERS PAGE polish (memberlist-*, member-card)
   25. USERS ONLINE + WHAT'S NEW
   26. ACTIVITY / WHAT'S NEW (.wn) — theme colours instead of green, card depth
   27. AVATARS (circles)
   28. CUSTOM MINI PROFILE (pp-mini-*)
   29. MAIN PROFILE PAGE (pp-profile-*)
   30. PROFILE PAGE (b2-prof) — matches posts / topic header
   31. USER TOOLS DROPDOWN (pp-user-tools)
   32. FOOTER / BOARD ACTIONS
   33. RESPONSIVE
   34. PixelPoint — Palette widget + Palette gallery
   35. PixelPoint — "Above Board" welcome hero
   36. SEARCH — header box, results dropdown, results page
   37. USER CP (overview cards + identity strip)
   38. LOGIN / REGISTER (guest-layout b2-auth)
   39. PRIVATE MESSAGES (cv-*) — compose card
   40. MESSAGES — inbox sidebar + open conversation (cv--thread)
   41. STAFF PAGE (staff2)
   42. NOTIFICATIONS DROPDOWN — rows + type badge
   43. USER HOVER CARD (b2-ucard)
   44. PIXEL POINT FOOTER (pp-ft) — v2, full redo
   45. PIXEL POINT — BOARD STATISTICS WIDGET
   46. PIXEL POINT — CREDITS (b2-coins) BUTTON + DROPDOWN MENU
   47. PIXEL POINT — CREDITS PAGES (cs-*): balance card, side nav
   48. PIXEL POINT — GIFT CREDITS MODAL (cs-modal)
   49. CREDITS — WALLET / SHOP CONTENT (cs-h1, cs-stats, cs-stat, cs-panel, cs-empty)
   50. ACCENT BARS — one technique everywhere: a real pseudo-element that
   51. THREAD VIEW — post body spacing + typography
   52. CATEGORY HEADERS (b2-cat) — redesign
   53. FORUM ROWS — lighter rows inside the category card + readable text
   54. SHOUTBOX (#shoutbox-container.shoutbox)
   55. SIDEBAR WIDGETS (.panel--secondary: Design Palette, Recent Activity
   56. FORUM ROWS — flat rows that belong to the category card
   57. ERROR PAGES (fs-berr: 404 etc.)
   58. SUBFORUMS — label + soft chips
   59. CATEGORY ICONS — Font Awesome tile, one colour per category
   60. SIDEBAR PANEL ICONS — same tile, Font Awesome glyph matched to the content
   61. ACCENT BARS — take the colours of their category / panel
   62. WRAP EDGE — one thin, soft line running through the cool category colours
   63. GRID VIEW REDO — matches list-view look (category colours, soft chips
   64. MOBILE LAYOUT (phones) — tighter gutters, row/card layouts that fit
   65. "WHILE YOU WERE AWAY" banner — matches the category cards
   66. UNREAD forum rows — stripe, tile and dot take the category's colours
   67. Forum row HOVER — pressed-in, tinted with the category's colours
   68. GIF PICKER — full-height thumbnails, scrollable grid
   69. FINAL PATCHES — posts, accent bars, post rail, rank pills, action bar, report popup, post links
   ========================================================== */

/* ============================================
   1. TOKENS
   ============================================ */

body.b2 {
  --pp-page-bg: linear-gradient(160deg, #d8dff0 0%, #e4e9f4 40%, #dce3ef 100%);
  --pp-text: #3a4258;
  --pp-heading: #3a4a68;
  --pp-heading-2: #455678;
  --pp-muted: #7888a8;
  --pp-faint: #9aaac0;
  --pp-link: #535f79;
  --pp-link-hover: #7758ba;
  --pp-accent: #7758ba;
  --pp-blue: #4c6ec4;
  --pp-surface: #f8fbff;
  --pp-surface-2: #eef4fb;
  --pp-surface-3: #f2f6fc;
  --pp-input: #ffffff;
  --pp-border: #c8d4e4;
  --pp-border-soft: #dde6f2;
  --pp-border-card: #d6e0ec;
  --pp-title-a: #d5ddf0;
  --pp-title-b: #c8d2e8;
  --pp-footer-a: #cdd5e8;
  --pp-footer-b: #dde5f2;
  --pp-footer-line: #7060b0;
  --pp-topbar-bg: #c8d0e2;
  --pp-topbar-border: #b2bace;
  --pp-topbar-text: #4a5578;
  --pp-wrap-bg: linear-gradient(to bottom,
      rgba(255,255,255,.72) 0%,
      rgba(248,250,255,.88) 4%,
      rgba(248,250,255,.88) 96%,
      rgba(220,228,240,.80) 100%);
  --pp-wrap-border: rgba(140,110,200,.75);
  --pp-wrap-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 4px 24px rgba(100,120,180,.18);
  --pp-card-bg: linear-gradient(to bottom, #f8fbff, #eef4fb);
  --pp-card-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 4px 14px rgba(100,120,180,.10);
  --pp-card-shadow-hover: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 24px rgba(100,120,180,.18);
  --pp-btn-bg: linear-gradient(to bottom, #ffffff, #eef4fb);
  --pp-btn-bg-hover: linear-gradient(to bottom, #f1f5f9, #e8edf5);
  --pp-btn-text: #4b5d7d;
  --pp-tab-text: #3f506d;
  --pp-tab-hover-bg: rgba(255,255,255,.48);
  --pp-tab-hover-border: rgba(184,200,224,.76);
  --pp-tab-active-bg: #f8fbff;
  --pp-tab-active-border: #b8c8e0;
  --pp-grad-accent: linear-gradient(135deg, #5f82d9, #8c6ad9);
  --fs-text-secondary: #657796;
  --fs-text-muted: #7888a8;
  --fs-text-faint: #7888a8;
  --fs-link-color: #535f79;
  --fs-forum-link-color: #535f79;
  --fs-panel-border: #c8d4e4;
  --fs-border-radius: .5rem;
  --fs-avatar-radius: 9999px;
  --fs-nav-color: #3f506d;
  --fs-nav-active-bg: #f8fbff;
  --fs-nav-active-color: #7758ba;
  --fs-user-menu-bg: #c8d0e2;
  --fs-user-menu-color: #4a5578;
}

body.b2.dark {
  --pp-page-bg: radial-gradient(circle at top left, rgba(96,135,209,.16), transparent 35%),
    linear-gradient(160deg, #070b13 0%, #0d1320 45%, #080c14 100%);
  --pp-text: #cbd5e1;
  --pp-heading: #dbeafe;
  --pp-heading-2: #dbeafe;
  --pp-muted: #8494ad;
  --pp-faint: #64748b;
  --pp-link: #8fb2ff;
  --pp-link-hover: #b69cff;
  --pp-accent: #8fb2ff;
  --pp-blue: #6a9ae0;
  --pp-surface: #121b2c;
  --pp-surface-2: #172238;
  --pp-surface-3: #111a2b;
  --pp-input: #0d1320;
  --pp-border: #273650;
  --pp-border-soft: #243047;
  --pp-border-card: #273650;
  --pp-title-a: #1e2a42;
  --pp-title-b: #172238;
  --pp-footer-a: #0d1320;
  --pp-footer-b: #151f32;
  --pp-footer-line: #7060c0;
  --pp-topbar-bg: #0b101a;
  --pp-topbar-border: #1d293d;
  --pp-topbar-text: #94a3b8;
  --pp-wrap-bg: linear-gradient(to bottom,
      rgba(18,26,41,.96) 0%,
      rgba(15,23,37,.98) 50%,
      rgba(10,15,26,.98) 100%);
  --pp-wrap-border: rgba(112,96,192,.65);
  --pp-wrap-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 28px rgba(0,0,0,.45);
  --pp-card-bg: linear-gradient(to bottom, #172238, #111a2b);
  --pp-card-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 6px 18px rgba(0,0,0,.28);
  --pp-card-shadow-hover: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 28px rgba(0,0,0,.42);
  --pp-btn-bg: linear-gradient(to bottom, #1a2740, #141f33);
  --pp-btn-bg-hover: linear-gradient(to bottom, #263653, #1d2a44);
  --pp-btn-text: #dbeafe;
  --pp-tab-text: #94a3b8;
  --pp-tab-hover-bg: rgba(255,255,255,.055);
  --pp-tab-hover-border: rgba(143,178,255,.28);
  --pp-tab-active-bg: #151f32;
  --pp-tab-active-border: #2f4263;
  --fs-text-secondary: #8494ad;
  --fs-text-muted: #8494ad;
  --fs-text-faint: #8494ad;
  --fs-link-color: #8fb2ff;
  --fs-forum-link-color: #8fb2ff;
  --fs-panel-border: #273650;
  --fs-nav-color: #94a3b8;
  --fs-nav-active-bg: #151f32;
  --fs-nav-active-color: #8fb2ff;
  --fs-user-menu-bg: #0b101a;
  --fs-user-menu-color: #94a3b8;
}

/* Outfit, loaded here so it works whatever font Theme Studio is set to */
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.bunny.net/outfit/files/outfit-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.bunny.net/outfit/files/outfit-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.bunny.net/outfit/files/outfit-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.bunny.net/outfit/files/outfit-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.bunny.net/outfit/files/outfit-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.bunny.net/outfit/files/outfit-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.bunny.net/outfit/files/outfit-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.bunny.net/outfit/files/outfit-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 800; font-display: swap; src: url(https://fonts.bunny.net/outfit/files/outfit-latin-800-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 800; font-display: swap; src: url(https://fonts.bunny.net/outfit/files/outfit-latin-ext-800-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ============================================
   2. BODY, LINKS, BASE
   ============================================ */

body.b2 {
  background: var(--pp-page-bg);
  background-attachment: fixed;
  color: var(--pp-text);
  --fs-font-family: "Outfit", system-ui, sans-serif;
  font-family: var(--fs-font-family);
  /* sizes below were tuned for Verdana; scale the font to Verdana's x-height */
  font-size-adjust: 0.545;
  font-size: 12px;
  min-height: 100vh;
  max-width: 100%;
  overflow-x: hidden;
}

/* icon fonts keep their own size */
body.b2 :is(i, .fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands, [class^="fa-"], [class*=" fa-"]),
body.b2 :is(i, .fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands, [class^="fa-"], [class*=" fa-"])::before { font-size-adjust: none; }

body.b2 *, body.b2 *::before, body.b2 *::after { box-sizing: border-box; }

body.b2 a { color: var(--pp-link); transition: color .4s ease-in-out; }

body.b2 a:hover { color: var(--pp-link-hover); text-decoration: none; }

body.b2 .panel .panel__content a:not(.username):not(.btn) { color: var(--pp-link); }

body.b2 .panel .panel__content a:not(.username):not(.btn):hover { color: var(--pp-link-hover); }

/* ============================================
   3. TOP BAR + LOGO
   b2 puts the logo inside .b2-topbar. The bar is transparent so the logo
   sits above the rounded #wrap; guests keep a colored Login/Register strip.
   ============================================ */

body.b2 .user-menu, body.b2 .user-menu.b2-topbar {
  border-bottom: 0;
  box-shadow: none;
  color: var(--pp-topbar-text);
  font-size: 13px;
}

body.b2 .user-menu:has(.user-menu__guest),
body.b2 .user-menu.b2-topbar:has(.user-menu__guest) {
  background: var(--pp-topbar-bg);
  border-bottom: 1px solid var(--pp-topbar-border);
  color: var(--pp-topbar-text);
}

body.b2 .user-menu__guest a,
body.b2 .user-menu.b2-topbar .user-menu__guest a,
body.b2 .user-menu__trigger {
  color: var(--pp-topbar-text);
  font-weight: bold;
}

body.b2 .user-menu__guest a:hover { color: var(--pp-accent); }

body.b2 .user-menu svg, body.b2 .user-menu i, body.b2 .user-menu .icon { color: var(--pp-topbar-text); }

body.b2 .user-menu a:hover svg,
body.b2 .user-menu a:hover i,
body.b2 .user-menu a:hover .icon {
  color: var(--pp-accent);
}

body.b2.dark .user-menu a,
body.b2.dark .user-menu button,
body.b2.dark .dropdown-toggle,
body.b2.dark .sidebar-toggle,
body.b2.dark .sidebar-toggle button {
  border: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
}

/* ---- Logo: left-aligned with the content, only the image is clickable ---- */

body.b2 .b2-topbar__logo {
  display: flex;
  flex: 0 0 100%;
  justify-content: flex-start;
  align-items: center;
  width: min(96%, 1800px);
  max-width: 1800px;
  margin: 0;
  padding: 18px max(56px, calc((min(96vw, 1800px) - 95rem) / 2 + 28px)) 14px;
  pointer-events: none !important;
}

body.b2 .b2-topbar__logo a {
  display: inline-block;
  flex: 0 0 auto;
  width: fit-content;
  max-width: 100%;
  line-height: 0;
  pointer-events: none !important;
}

/* Swap the default ForumSpark logo for the PixelPoint one (light / dark) */

body.b2 .b2-topbar__logo img, body.b2 .b2-topbar img[src*="FSB2logo"] {
  content: url("https://files.forumspark.net/boards/55992fd1-4197-4089-bde9-26f18f40e6b9/Etnx6z0hNEe6BsgM1GthVVIeyYNLian3927pCwcL.png");
  display: block;
  width: auto;
  height: 110px;
  max-height: none;
  margin: 0;
  pointer-events: auto !important;
}

body.b2.dark .b2-topbar__logo img, body.b2.dark .b2-topbar img[src*="FSB2logo"] {
  content: url("https://files.forumspark.net/boards/55992fd1-4197-4089-bde9-26f18f40e6b9/YpdPjsWno6fKFOQTPzP9tWDsaFFQzeT4poyYEuO1.png");
}

/* Small logo that can appear in the nav bar */

body.b2 .sub-menu img[src*="FSB2logo"] {
  content: url("https://files.forumspark.net/boards/55992fd1-4197-4089-bde9-26f18f40e6b9/Etnx6z0hNEe6BsgM1GthVVIeyYNLian3927pCwcL.png");
  width: auto;
  height: 32px;
}

body.b2.dark .sub-menu img[src*="FSB2logo"] {
  content: url("https://files.forumspark.net/boards/55992fd1-4197-4089-bde9-26f18f40e6b9/YpdPjsWno6fKFOQTPzP9tWDsaFFQzeT4poyYEuO1.png");
}

/* Legacy page header (non-b2 markup): hide the uploaded image, use the logo as background */

body.b2 .page-header {
  background: transparent;
  border: 0;
  box-shadow: none;
  height: auto;
  padding: 24px 24px 12px;
}

body.b2 .page-header__logo {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: auto;
  max-width: none;
  margin: 0;
  padding: 0 0 8px;
  background: none;
}

body.b2 .page-header__logo img { display: none !important; }

body.b2 .page-header__logo a {
  display: block;
  width: 300px;
  height: 110px;
  background: url("https://files.forumspark.net/boards/55992fd1-4197-4089-bde9-26f18f40e6b9/Etnx6z0hNEe6BsgM1GthVVIeyYNLian3927pCwcL.png") center / contain no-repeat;
}

body.b2.dark .page-header__logo a {
  background-image: url("https://files.forumspark.net/boards/55992fd1-4197-4089-bde9-26f18f40e6b9/YpdPjsWno6fKFOQTPzP9tWDsaFFQzeT4poyYEuO1.png");
}

/* ============================================
   4. NAVIGATION (separate buttons, pressed-in hover)
   Size, weight, padding and border are locked in every state so
   neighbouring buttons never shift. Only a vertical press + shadow change.
   ============================================ */

/* Bar + wrappers: no background/border/shadow so it blends into #wrap */

body.b2 .sub-menu,
body.b2.dark .sub-menu,
body.b2 .sub-menu > .container,
body.b2 .sub-menu > div,
body.b2 :where([class*="subnav"]):not([class*="subnav__user"]),
body.b2 :where([class*="b2-nav"]),
body.b2.dark :where(#wrap > nav, #board-shell > nav) {
  background: transparent !important;
  background-image: none !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

body.b2 .sub-menu::before,
body.b2 .sub-menu::after,
body.b2 .sub-menu > .container::before,
body.b2 .sub-menu > .container::after {
  content: none !important;
  display: none !important;
}

body.b2 .sub-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 16px 28px 14px;
}

body.b2 .sub-menu .nav-links {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.b2 .sub-menu .nav-links > * { flex: 0 0 auto; }

/* ---- Each link = its own button ---- */

body.b2 .sub-menu :is(.nav-link, .fs-menu__link) {
  position: relative;
  box-sizing: border-box !important;
  padding: 9px 18px !important;
  margin: 0 !important;
  border: 1px solid var(--pp-border) !important;
  border-radius: 12px;
  background: var(--pp-btn-bg);
  color: var(--pp-btn-text);
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .03em !important;
  text-decoration: none !important;
  transform: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 8px rgba(100,120,180,.10);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease, background .15s ease;
}

body.b2 .sub-menu :is(.nav-link, .fs-menu__link)::after { display: none; }

/* Hover = pressed in */

body.b2 .sub-menu :is(.nav-link, .fs-menu__link):is(:hover, :focus-visible) {
  transform: translateY(1px) !important;
  border-color: #b4c3dc !important;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc);
  color: var(--pp-accent);
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18);
}

body.b2 .sub-menu :is(.nav-link, .fs-menu__link):active {
  transform: translateY(2px) !important;
  box-shadow: inset 0 4px 9px rgba(100,120,180,.36), inset 0 1px 3px rgba(100,120,180,.22);
}

/* Active page = filled gradient button */

body.b2 .sub-menu .nav-link-active,
body.b2 .sub-menu .nav-link-active:is(:hover, :focus-visible, :active) {
  border-color: transparent !important;
  background: var(--pp-grad-accent);
  color: #fff;
  box-shadow: 0 6px 16px rgba(119,88,186,.34), inset 0 1px 0 rgba(255,255,255,.28);
}

body.b2 .sub-menu .nav-link-active:is(:hover, :focus-visible) {
  box-shadow: inset 0 3px 8px rgba(40,20,90,.40), inset 0 1px 2px rgba(40,20,90,.25);
}

body.b2 .sub-menu .nav-link-active:active {
  box-shadow: inset 0 4px 10px rgba(40,20,90,.50), inset 0 1px 3px rgba(40,20,90,.30);
}

/* Dark */

body.b2.dark .sub-menu :is(.nav-link, .fs-menu__link) {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 3px 10px rgba(0,0,0,.28);
}

body.b2.dark .sub-menu :is(.nav-link, .fs-menu__link):is(:hover, :focus-visible) {
  border-color: #354a6f !important;
  background: linear-gradient(to bottom, #0d1524, #121c2f);
  color: #8fb2ff;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.40);
}

body.b2.dark .sub-menu :is(.nav-link, .fs-menu__link):active {
  box-shadow: inset 0 4px 10px rgba(0,0,0,.65), inset 0 1px 3px rgba(0,0,0,.45);
}

body.b2.dark .sub-menu .nav-link-active,
body.b2.dark .sub-menu .nav-link-active:is(:hover, :focus-visible, :active) {
  border-color: transparent !important;
  background: var(--pp-grad-accent);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18);
}

body.b2.dark .sub-menu .nav-link-active:is(:hover, :focus-visible) {
  box-shadow: inset 0 3px 8px rgba(0,0,0,.50), inset 0 1px 2px rgba(0,0,0,.35);
}

/* Active page keeps its filled look while another tab is hovered */

body.b2 .sub-menu .nav-links .nav-link-active:not(:hover):not(:active) {
  transform: none !important;
  border-color: transparent !important;
  background: var(--pp-grad-accent) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(119,88,186,.34), inset 0 1px 0 rgba(255,255,255,.28) !important;
}

body.b2.dark .sub-menu .nav-links .nav-link-active:not(:hover):not(:active) {
  box-shadow: 0 6px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18) !important;
}

/* ---- Dropdown (Tools etc.) ---- */

/* Tools sits in the row like every other button (no extra gap) */

body.b2 .sub-menu .fs-menu__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0 !important;
  padding: 0 !important;
}

/* The open menu: a tidy list attached under its button */

body.b2 .fs-menu__panel {
  top: calc(100% + 6px);
  left: 0;
  right: auto;
  z-index: 50;
  min-width: 210px;
  padding: 6px;
  border: 1px solid var(--pp-border);
  border-radius: 12px;
  background: var(--pp-surface);
  box-shadow: 0 14px 30px rgba(100,120,180,.20);
  overflow: visible;
}

/* Invisible bridge so the menu doesn't close when the mouse crosses the gap */

body.b2 .fs-menu__panel::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

/* Menu items: flat rows, not bordered buttons */

body.b2 .sub-menu .fs-menu__panel :is(.nav-link, .fs-menu__link) {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 2px !important;
  padding: 9px 12px !important;
  border: 1px solid transparent !important;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--pp-btn-text);
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  text-align: left;
}

body.b2 .sub-menu .fs-menu__panel :is(.nav-link, .fs-menu__link):last-child {
  margin-bottom: 0 !important;
}

/* Hover = pressed in, same as the rest of the nav */

body.b2 .sub-menu .fs-menu__panel :is(.nav-link, .fs-menu__link):is(:hover, :focus-visible) {
  transform: translateY(1px) !important;
  border-color: #b4c3dc !important;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc);
  color: var(--pp-accent);
  box-shadow: inset 0 2px 5px rgba(100,120,180,.24), inset 0 1px 2px rgba(100,120,180,.14);
}

/* The Tools button stays "pressed" while its menu is open */

body.b2 .sub-menu .fs-menu__item--has-children:hover > :not(.fs-menu__panel),
body.b2 .sub-menu .fs-menu__item--has-children:has(a:focus-visible, button:focus-visible) > :not(.fs-menu__panel),
body.b2 .sub-menu .fs-menu__item--has-children:is(.open, .is-open, [open]) > :not(.fs-menu__panel),
body.b2 .sub-menu .fs-menu__item--has-children > [aria-expanded="true"] {
  transform: translateY(1px) !important;
  border-color: #b4c3dc !important;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc);
  color: var(--pp-accent);
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18);
}

/* Dark */

body.b2.dark .fs-menu__panel { box-shadow: 0 14px 30px rgba(0,0,0,.50); }

body.b2.dark .sub-menu .fs-menu__panel :is(.nav-link, .fs-menu__link):is(:hover, :focus-visible),
body.b2.dark .sub-menu .fs-menu__item--has-children:hover > :not(.fs-menu__panel),
body.b2.dark .sub-menu .fs-menu__item--has-children:has(a:focus-visible, button:focus-visible) > :not(.fs-menu__panel),
body.b2.dark .sub-menu .fs-menu__item--has-children:is(.open, .is-open, [open]) > :not(.fs-menu__panel),
body.b2.dark .sub-menu .fs-menu__item--has-children > [aria-expanded="true"] {
  border-color: #354a6f !important;
  background: linear-gradient(to bottom, #0d1524, #121c2f);
  color: #8fb2ff;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.40);
}

body.b2 .fs-menu__caret { font-size: 10px; opacity: .8; }

/* ---- Right-side cluster: icons + user menu in one pill ---- */

body.b2 .b2-subnav__user {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px auto;
  padding: 5px 6px 5px 8px;
  border: 1px solid var(--pp-border);
  border-radius: 12px;
  background: var(--pp-btn-bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 3px 10px rgba(100,120,180,.10);
}

body.b2.dark .b2-subnav__user {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 3px 10px rgba(0,0,0,.28);
}

/* Round icon buttons */

body.b2 .b2-subnav__user .notifications__icon-link,
body.b2 .b2-subnav__user .notifications__dropdown-trigger,
body.b2 .b2-subnav__user > a:not([class*="user-trigger"]),
body.b2 .b2-subnav__user > button:not([class*="user-trigger"]) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--pp-heading-2);
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

/* Hover = pressed in (same as the nav buttons) */

body.b2 .b2-subnav__user .notifications__icon-link:is(:hover, :focus),
body.b2 .b2-subnav__user .notifications__dropdown-trigger:is(:hover, :focus),
body.b2 .b2-subnav__user > a:not([class*="user-trigger"]):is(:hover, :focus),
body.b2 .b2-subnav__user > button:not([class*="user-trigger"]):is(:hover, :focus) {
  transform: translateY(1px);
  border-color: #b4c3dc;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc);
  color: var(--pp-accent);
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18);
}

body.b2 .b2-subnav__user .notifications__icon-link:active,
body.b2 .b2-subnav__user .notifications__dropdown-trigger:active,
body.b2 .b2-subnav__user > a:not([class*="user-trigger"]):active,
body.b2 .b2-subnav__user > button:not([class*="user-trigger"]):active {
  transform: translateY(2px);
  box-shadow: inset 0 4px 9px rgba(100,120,180,.36), inset 0 1px 3px rgba(100,120,180,.22);
}

body.b2.dark .b2-subnav__user .notifications__icon-link:is(:hover, :focus),
body.b2.dark .b2-subnav__user .notifications__dropdown-trigger:is(:hover, :focus),
body.b2.dark .b2-subnav__user > a:not([class*="user-trigger"]):is(:hover, :focus),
body.b2.dark .b2-subnav__user > button:not([class*="user-trigger"]):is(:hover, :focus) {
  border-color: #354a6f;
  background: linear-gradient(to bottom, #0d1524, #121c2f);
  color: #8fb2ff;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.40);
}

body.b2 .b2-subnav__user svg, body.b2 .b2-subnav__user i { width: 17px; height: 17px; font-size: 16px; }

/* Divider before the user menu */

body.b2 .b2-subnav__user > :last-child {
  margin-left: 4px;
  padding-left: 10px;
  border-left: 1px solid var(--pp-border-soft);
}

/* Notification count badge */

body.b2 .b2-subnav__user [class*="badge"], body.b2 .b2-subnav__user [class*="count"] {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border: 2px solid var(--pp-surface);
  border-radius: 999px;
  background: var(--pp-grad-accent);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  line-height: 13px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(119,88,186,.35);
}

body.b2.dark .b2-subnav__user [class*="badge"],
body.b2.dark .b2-subnav__user [class*="count"] {
  border-color: var(--pp-surface);
  background: var(--pp-grad-accent);
  color: #fff;
}

/* User menu (avatar + name + caret) */

body.b2 .b2-subnav__user [class*="user-trigger"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px 3px 4px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--pp-heading);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  overflow: visible;
  transition: background .18s ease, color .18s ease;
}

/* No separate hover on the name / avatar / caret */

body.b2 .b2-subnav__user > :last-child:hover,
body.b2 .b2-subnav__user [class*="user-trigger"]:is(:hover, :focus, :active),
body.b2 .b2-subnav__user [class*="user-trigger"]:hover * {
  transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--pp-heading) !important;
}

body.b2.dark .b2-subnav__user [class*="user-trigger"]:is(:hover, :focus, :active),
body.b2.dark .b2-subnav__user [class*="user-trigger"]:hover * {
  color: #dbeafe !important;
}

/* Nav avatar: a clean 30px circle, whatever sits inside fills it */

body.b2 .b2-subnav__user [class*="user-trigger"] [class*="avatar"],
body.b2 .b2-user-trigger__avatar {
  display: block;
  flex: 0 0 auto;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.b2 .b2-user-trigger__avatar *,
body.b2 .b2-subnav__user [class*="user-trigger"] [class*="avatar"] * {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background-color: transparent;
  box-shadow: none !important;
  object-fit: cover;
}

body.b2 .b2-subnav__user img[class*="avatar"] {
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  background: transparent !important;
  object-fit: cover;
}

/* nav row: line up with the content cards below (logo stays where it is) */

body.b2 .sub-menu { padding-left: 67px !important; padding-right: 67px !important; }

body.b2 .sub-menu > .container, body.b2 .sub-menu > div:not(.b2-subnav__user) {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (max-width: 900px) {
  body.b2 .sub-menu { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ============================================
   5. BREADCRUMBS
   ============================================ */

body.b2 .breadcrumbs {
  position: relative;
  background: linear-gradient(rgba(233,239,249,.55), rgba(238,243,251,.55)) border-box;
  border: 1px solid #d6e0f0;
  border-radius: 12px;
  box-shadow: none;
  margin: 0 auto;
  width: calc(100% - 42px);
  max-width: calc(92rem + 6px);
  font-size: 13px;
}

body.b2 .breadcrumbs a { color: #7a8aa8; }

body.b2 .breadcrumbs a:hover { color: var(--pp-accent); }

body.b2 .breadcrumbs > span:last-child { color: var(--pp-heading); font-weight: 700; }

body.b2 .breadcrumbs__divider { color: #b0bdd2; }

body.b2.dark .breadcrumbs {
  background: linear-gradient(rgba(21,32,58,.55), rgba(14,22,38,.55)) border-box;
  border-color: #1d2a44;
  box-shadow: none;
}

body.b2.dark .breadcrumbs > span:last-child { color: #e2e8f4; }

body.b2.dark .breadcrumbs a, body.b2.dark .breadcrumbs__divider { color: #8494ad; }

body.b2.dark .breadcrumbs a:hover { color: #8fb2ff; }

/* ============================================
   6. #WRAP — MAIN ROUNDED CONTAINER
   ============================================ */

body.b2 #wrap {
  position: relative;
  width: min(96%, 1800px);
  max-width: 100%;
  margin: 0 auto 20px;
  padding: 0;
  background: var(--pp-wrap-bg);
  border: 2px solid var(--pp-wrap-border);
  border-bottom-width: 3px;
  border-radius: 28px;
  box-shadow: var(--pp-wrap-shadow);
  overflow: hidden;
  /* no backdrop-filter here: it would turn the wrap into the containing block for position:fixed
     children (GIF picker, emoji picker, popovers) and displace / clip them */
}

body.b2 #board-shell { padding: 0; }

body.b2 #wrap main { max-width: 95rem; margin: 0 auto; padding: 16px 24px 28px; }

/* ============================================
   7. PANELS
   ============================================ */

/* every panel = theme card: accent bar on top, light header with a divider
   (the old blue/grey title band is gone) */

body.b2 .panel {
  position: relative;
  background: linear-gradient(#fcfdff, #f2f6fc) border-box;
  border: 1px solid var(--pp-border);
  border-top: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 8px 22px rgba(80,100,160,.10);
  margin-bottom: 10px;
}

/* accent bar: sits inside the clipped, rounded card so it follows the corners */

body.b2 .panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 3;
  background: var(--pp-grad-accent);
  pointer-events: none;
}

body.b2 .panel .panel__title, body.b2 .widget .panel__title {
  background: none;
  border: 0;
  border-bottom: 1px solid #dde5f2;
  padding: 18px 22px 12px;
  color: var(--pp-heading);
  --fs-panel-footer-accent: var(--pp-footer-line);
}

body.b2 .panel .panel__title h2,
body.b2 .panel .panel__title h2 a,
body.b2 .widget .panel__title h2,
body.b2 .widget .panel__title a:not(.btn) {
  color: var(--pp-heading);
  font-size: 16px;
  font-weight: 800;
  text-transform: none;
  letter-spacing: -.003em;
  text-decoration: none;
  text-shadow: none;
}

body.b2 .panel .panel__title h2::before,
body.b2 .widget .panel__title i,
body.b2 .widget .panel__title svg {
  color: #8c6ad9;
}

/* decorative footer strip: hidden when it has no content */

body.b2 .panel .panel__footer:empty { display: none; }

body.b2.dark .panel {
  background: linear-gradient(#15203a, #0e1626) border-box;
  border-color: #22314d;
  box-shadow: 0 8px 22px rgba(0,0,0,.4);
}

body.b2.dark .panel .panel__title, body.b2.dark .widget .panel__title {
  border-bottom-color: #22314d;
  color: #e2e8f4;
}

body.b2.dark .panel .panel__title h2,
body.b2.dark .panel .panel__title h2 a,
body.b2.dark .widget .panel__title h2,
body.b2.dark .widget .panel__title a:not(.btn) {
  color: #e2e8f4;
}

body.b2.dark .panel .panel__title h2::before,
body.b2.dark .widget .panel__title i,
body.b2.dark .widget .panel__title svg {
  color: #8fb2ff;
}

body.b2 .panel .panel__content { border-color: var(--pp-border); background: transparent; }

body.b2 .panel .panel__content--flush { border: 0; }

body.b2 .panel .panel__footer {
  background: linear-gradient(to top, var(--pp-footer-a), var(--pp-footer-b));
  border: 0;
  border-top: 1px solid var(--pp-border);
  border-bottom: 3px solid var(--pp-footer-line);
  height: 14px;
  padding: 0;
  margin: 0;
}

body.b2 .panel .panel__sub-header, body.b2 .sub-header {
  background-color: var(--pp-surface-2);
  color: var(--pp-muted);
  font-size: 11px;
}

body.b2 .panel .panel__actions { background-color: var(--pp-surface-2); }

body.b2.dark .panel .panel__content,
body.b2.dark .panel .panel__section,
body.b2.dark .panel .panel__actions,
body.b2.dark .panel .panel__sub-header {
  color: var(--pp-muted);
}

/* ============================================
   8. CATEGORIES
   ============================================ */

body.b2 .b2-cat, body.b2 .panel.category { border: 1px solid var(--pp-border); }

body.b2 .b2-cat + .b2-cat, body.b2 .category + .category { margin-top: 16px; }

body.b2 .b2-cat__title, body.b2 .b2-cat__title:hover { text-transform: none; }

body.b2.dark .b2-cat__title, body.b2.dark .b2-cat__title:hover { text-shadow: none; }

body.b2 .b2-cat__head i, body.b2 .b2-cat__head svg { color: var(--pp-heading-2); }

/* ============================================
   9. FORUM ROWS
   .b2-forum > __marker | __main | __qa | __stats | __last
   ============================================ */

body.b2 .b2-forum {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0 !important;
  margin: 12px 16px;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid var(--pp-border-card);
  border-radius: 16px;
}

/* Hover = pressed in (same feel as the nav buttons) */

body.b2 .b2-forum:hover {
  transform: translateY(1px);
  border-color: #b4c3dc;
  background: linear-gradient(to bottom, #eaf0f9, #f3f6fc);
  box-shadow: inset 0 3px 7px rgba(100,120,180,.22), inset 0 1px 2px rgba(100,120,180,.14);
}

body.b2.dark .b2-forum:hover {
  border-color: #354a6f;
  background: linear-gradient(to bottom, #0d1524, #121c2f);
  box-shadow: inset 0 3px 8px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.40);
}

/* ---- Icon column ---- */

body.b2 .b2-forum__marker {
  position: relative;
  align-items: center;
  margin: 0;
  overflow: hidden;
  border-radius: 0;
  background: rgba(119,88,186,.05);
  transition: background .15s ease;
}

body.b2 .b2-forum:hover .b2-forum__marker { background: rgba(119,88,186,.10); }

body.b2.dark .b2-forum__marker { background: rgba(143,178,255,.05); }

body.b2.dark .b2-forum:hover .b2-forum__marker { background: rgba(143,178,255,.09); }

body.b2 .b2-forum__marker svg, body.b2 .b2-forum__marker img, body.b2 .b2-forum__marker i {
  width: 32px;
  height: 32px;
  font-size: 28px;
}

/* Icon tile: soft gradient chip with a tinted icon */

body.b2 .b2-forum__marker > :not([class*="dot"]):not([class*="badge"]):not([class*="unread"]) {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0;
  border: 1px solid #d2dcee;
  border-radius: 12px;
  background: linear-gradient(to bottom, #ffffff, #e9eff9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 3px 8px rgba(100,120,180,.14);
  color: #7d8fc4;
  transition: color .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

/* Anything nested inside the chip (ForumSpark's own inner tile) is flattened and centered */

body.b2 .b2-forum__marker > :not([class*="dot"]):not([class*="badge"]):not([class*="unread"]) > * {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
}

/* Font Awesome glyphs: equal-size box, glyph centered whatever its width */

body.b2 .b2-forum__marker > :not([class*="dot"]):not([class*="badge"]):not([class*="unread"]) :is(i, [class*="fa-"]) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  text-align: center;
  color: inherit;
}

body.b2 .b2-forum__marker > :not([class*="dot"]):not([class*="badge"]):not([class*="unread"]) :is(i, [class*="fa-"])::before {
  display: block;
  width: auto;
  line-height: 1;
  text-align: center;
}

body.b2 .b2-forum__marker > :not([class*="dot"]):not([class*="badge"]):not([class*="unread"]) :is(svg, img) {
  width: 24px;
  height: 24px;
  color: inherit;
}

body.b2 .b2-forum:hover .b2-forum__marker > :not([class*="dot"]):not([class*="badge"]):not([class*="unread"]) {
  border-color: #b4c3dc;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc);
  box-shadow: inset 0 2px 5px rgba(100,120,180,.22);
  color: #7758ba;
}

body.b2.dark .b2-forum__marker > :not([class*="dot"]):not([class*="badge"]):not([class*="unread"]) {
  border-color: #22314d;
  background: linear-gradient(to bottom, #172238, #0f1726);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 3px 8px rgba(0,0,0,.35);
  color: #7f97c9;
}

body.b2.dark .b2-forum:hover .b2-forum__marker > :not([class*="dot"]):not([class*="badge"]):not([class*="unread"]) {
  border-color: #354a6f;
  background: linear-gradient(to bottom, #0d1524, #121c2f);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.50);
  color: #8fb2ff;
}

/* Unread dot sits inside the icon column's corner */

body.b2 .b2-forum__marker > :is([class*="dot"], [class*="badge"], [class*="unread"]),
body.b2 .b2-forum__marker [class*="__dot"],
body.b2 .b2-forum__marker [class*="-dot"] {
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;
  left: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: none !important;
}

/* ---- Name + description ---- */

body.b2 .b2-forum__main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  padding: 14px 18px 14px 20px;
}

body.b2 .b2-forum__main > a:first-child,
body.b2 .b2-forum__main h2 a,
body.b2 .b2-forum__main h3 a,
body.b2 .b2-forum__main [class*="b2-forum__name"],
body.b2 .b2-forum__main [class*="b2-forum__title"] {
  color: var(--pp-heading);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
}

/* Forum titles stay bold (locked against ForumSpark's own weight) */

body.b2 .b2-forum__main > :first-child,
body.b2 .b2-forum__main > :first-child a,
body.b2 .b2-forum__main :is(h2, h3, h4) a,
body.b2 .b2-forum__main :is(h2, h3, h4),
body.b2 .b2-forum__main [class*="b2-forum__name"],
body.b2 .b2-forum__main [class*="b2-forum__title"],
body.b2 .b2-forum__main [class*="b2-forum__name"] a,
body.b2 .b2-forum__main [class*="b2-forum__title"] a {
  font-weight: 800 !important;
}

body.b2 .b2-forum__main > a:first-child:hover,
body.b2 .b2-forum__main h2 a:hover,
body.b2 .b2-forum__main h3 a:hover {
  color: var(--pp-accent);
}

body.b2 .b2-forum__desc, body.b2 .b2-forum__desc p { margin: 0; line-height: 1.55; }

/* Subforums line: label + soft chips (see end of file) */

/* ---- Hover quick actions (bell / mark read) ---- */

body.b2 .b2-forum__qa { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; padding: 0 10px; }

body.b2 .b2-forum__qa-btn {
  background: var(--pp-btn-bg);
  border: 1px solid var(--pp-border);
  border-radius: 8px;
  color: var(--pp-btn-text);
}

body.b2 .b2-forum__qa-btn:is(:hover, :focus) {
  background: var(--pp-btn-bg-hover);
  border-color: var(--pp-tab-active-border);
  color: var(--pp-accent);
}

/* ---- Stats ---- */

body.b2 .b2-forum__stats {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  text-align: center;
}

body.b2 .b2-forum__stats > * {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--pp-border-soft);
  border-radius: 12px;
  color: var(--pp-heading);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.1;
}

body.b2.dark .b2-forum__stats > * { color: #dbeafe; }

/* ---- Last post ---- */

body.b2 .b2-forum__last {
  display: flex;
  flex: 0 0 270px;
  align-items: center;
  align-self: stretch;
  min-width: 0;
  margin: 0;
  border-radius: 0;
  transition: background .15s ease;
}

body.b2 .b2-forum:hover .b2-forum__last { background: rgba(100,120,180,.07); }

body.b2.dark .b2-forum:hover .b2-forum__last { background: rgba(0,0,0,.18); }

body.b2 .last-post__title { color: var(--pp-heading-2); }

body.b2 .last-post__meta { color: var(--pp-faint); }

body.b2.dark .last-post__title { color: var(--pp-text); }

body.b2.dark .last-post__title:hover, body.b2.dark .last-post__title a:hover { color: #8fb2ff; }

/* ---- Stats + last post: quieter, tidier columns ---- */

body.b2 .b2-forum__stats { gap: 6px; padding: 0 18px; }

body.b2 .b2-forum__stats > * {
  min-width: 58px;
  padding: 7px 10px 6px;
  border-color: #cdd8e8;
  background: linear-gradient(to bottom, rgba(255,255,255,.85), rgba(238,244,251,.65));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

body.b2 .b2-forum__stats > * > :first-child,
body.b2 .b2-forum__stats strong,
body.b2 .b2-forum__stats b {
  color: #3a4a68;
  font-size: 15px;
  font-weight: 900;
}

body.b2 .b2-forum__stats > * small,
body.b2 .b2-forum__stats > * span:last-child:not(:first-child),
body.b2 .b2-forum__stats [class*="label"] {
  text-transform: uppercase;
  margin-top: 3px;
  font-weight: 800;
  letter-spacing: .12em;
}

/* On row hover the chips stay readable against the pressed-in row */

body.b2 .b2-forum:hover .b2-forum__stats > * {
  border-color: #b9c8de;
  background: linear-gradient(to bottom, rgba(255,255,255,.80), rgba(233,239,249,.70));
}

body.b2.dark .b2-forum__stats > * > :first-child,
body.b2.dark .b2-forum__stats strong,
body.b2.dark .b2-forum__stats b {
  color: #dbeafe;
}

/* Dark: chips stay dark while the row is hovered */

body.b2.dark .b2-forum:hover .b2-forum__stats > * {
  border-color: #2b3d5e;
  background: linear-gradient(to bottom, rgba(19,29,49,.85), rgba(8,13,23,.55));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

body.b2.dark .b2-forum:hover .b2-forum__stats > * small,
body.b2.dark .b2-forum:hover .b2-forum__stats > * span:last-child:not(:first-child),
body.b2.dark .b2-forum:hover .b2-forum__stats [class*="label"] {
  color: #8494ad;
}

body.b2.dark .b2-forum__stats > * {
  border-color: #28395a;
  background: linear-gradient(to bottom, rgba(19,29,49,.70), rgba(8,13,23,.40));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

/* Last post column */

body.b2 .b2-forum__last { flex-basis: 280px; gap: 12px; padding: 12px 20px; }

/* Avatar: one clean circle (outer element only; nested images are flattened) */

body.b2 .b2-forum__last > :is(img, [class*="avatar"]) {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--pp-border);
  border-radius: 50%;
  background: var(--pp-surface-2);
  box-shadow: none;
  object-fit: cover;
}

body.b2 .b2-forum__last > [class*="avatar"] :is(img, svg, span) {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  object-fit: cover;
}

body.b2.dark .b2-forum__last > :is(img, [class*="avatar"]) {
  border-color: #28395a;
  background: #0d1524;
}

body.b2 .last-post__title {
  display: block;
  overflow: hidden;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.b2 .last-post__title:hover, body.b2 .last-post__title a:hover { color: var(--pp-accent); }

body.b2 .last-post__meta { margin-top: 2px; font-size: 11.5px; line-height: 1.4; }

/* Forums with no posts: centered, muted, with a small clock.
   PERF: inside :has() name exact classes, never [class*="..."]. A substring
   class test there makes Chrome restyle the whole page on ANY class change
   anywhere (~20ms each, so every hover tooltip, menu and toggle stutters). */

body.b2 .b2-forum__last:not(:has(img, .avatar, .last-post, .last-post__avatar, .last-post__title, .last-post__title-wrap, .last-post__meta, .last-post__detail, .b2-forum__lastline-avatar)) {
  justify-content: center;
  gap: 8px;
  color: var(--pp-faint);
  font-size: 12px;
  font-style: italic;
  text-align: center;
}

body.b2 .b2-forum__last:not(:has(img, .avatar, .last-post, .last-post__avatar, .last-post__title, .last-post__title-wrap, .last-post__meta, .last-post__detail, .b2-forum__lastline-avatar))::before {
  content: "\f017";
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
  font-size-adjust: none;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  opacity: .75;
}

/* ---- Unread: purple stripe down the left edge (matches "unread" only) ---- */

body.b2 .b2-forum--unread::before,
body.b2 .b2-forum.is-unread::before,
body.b2 .b2-forum:has(.b2-forum__marker .forum__marker-badge--unread)::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  z-index: 3;
  pointer-events: none;
}

/* Read / unread badges (legacy marker badges) */

body.b2 .forum__marker-badge--unread, body.b2.dark .forum__marker-badge--unread {
  background: var(--pp-grad-accent);
  color: #fff;
}

body.b2 .forum__marker-badge--read { background: rgba(100,120,180,.14); color: #7888a8; }

body.b2.dark .forum__marker-badge--read { background: rgba(143,178,255,.12); color: #8494ad; }

/* ---- Grid view cards (.b2-gv) ---- */

/* Hover = pressed in, same as list rows */

body.b2 .b2-gvc:hover {
  border-color: #b4c3dc;
}

body.b2 .b2-gvc__main { min-width: 0; }

body.b2 .b2-gvc :is(h2, h3, h4, [class*="b2-gvc__title"], [class*="b2-gvc__name"]),
body.b2 .b2-gvc :is(h2, h3, h4) a,
body.b2 .b2-gvc [class*="b2-gvc__title"] a,
body.b2 .b2-gvc [class*="b2-gvc__name"] a {
  color: var(--pp-heading);
  font-size: 14px;
  font-weight: 800 !important;
  line-height: 1.25;
}

body.b2 .b2-gvc :is(h2, h3, h4) a:hover { color: var(--pp-heading); }

body.b2 .b2-gvc :is(p, [class*="b2-gvc__desc"]) {
  color: var(--pp-muted);
  font-size: 11px;
  line-height: 1.55;
}

/* Cover cards: title sits on the image, so it stays white */

body.b2 .b2-gvc:is(.b2-gvc--hascover, .b2-gvc--case) :is(h2, h3, h4, [class*="b2-gvc__title"], [class*="b2-gvc__name"]),
body.b2 .b2-gvc:is(.b2-gvc--hascover, .b2-gvc--case) :is(h2, h3, h4) a,
body.b2 .b2-gvc:is(.b2-gvc--hascover, .b2-gvc--case) :is(h2, h3, h4) a:hover,
body.b2 .b2-gvc:is(.b2-gvc--hascover, .b2-gvc--case) [class*="b2-gvc__title"] a,
body.b2 .b2-gvc:is(.b2-gvc--hascover, .b2-gvc--case) [class*="b2-gvc__name"] a,
body.b2.dark .b2-gvc:is(.b2-gvc--hascover, .b2-gvc--case) :is(h2, h3, h4, [class*="b2-gvc__title"], [class*="b2-gvc__name"]),
body.b2.dark .b2-gvc:is(.b2-gvc--hascover, .b2-gvc--case) :is(h2, h3, h4) a {
  color: #fff !important;
  text-shadow: 0 1px 6px rgba(15,23,42,.55);
}

/* Only the big showcase card puts its description on the image */

body.b2 .b2-gvc--case :is(p, [class*="b2-gvc__desc"]) {
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 4px rgba(15,23,42,.5);
}

body.b2 .b2-gvc:not(.b2-gvc--case) :is(p, [class*="b2-gvc__desc"]) {
  color: var(--pp-muted);
  text-shadow: none;
}

body.b2.dark .b2-gvc:not(.b2-gvc--case) :is(p, [class*="b2-gvc__desc"]) { color: #8494ad; }

/* Stat chips inside cards, if present */

body.b2 .b2-gvc [class*="b2-gvc__stat"] > * {
  border: 1px solid #cdd8e8;
  background: linear-gradient(to bottom, rgba(255,255,255,.85), rgba(238,244,251,.65));
}

/* Unread stripe (same detection as list rows) */

body.b2 .b2-gvc:has(.b2-gvc__row--unread, .b2-gvc__name--unread, .b2-gvc__pname--unread, .b2-gvc__rowcount--unread, .forum__marker-badge--unread, .is-unread)::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  z-index: 3;
  pointer-events: none;
}

body.b2.dark .b2-gvc:hover {
  border-color: #354a6f;
}

body.b2.dark .b2-gvc :is(h2, h3, h4, [class*="b2-gvc__title"], [class*="b2-gvc__name"]),
body.b2.dark .b2-gvc :is(h2, h3, h4) a {
  color: #dbeafe;
}

body.b2.dark .b2-gvc :is(p, [class*="b2-gvc__desc"]) { color: #8494ad; }

/* ---- Topic preview card (hover card on the topic list) ---- */

body.b2 .b2-tpvcard {
  overflow: hidden;
  border: 1px solid var(--pp-border) !important;
  border-radius: 12px !important;
  background: var(--pp-surface) !important;
  box-shadow: 0 14px 30px rgba(100,120,180,.22) !important;
  color: var(--pp-text);
}

body.b2 .b2-tpv { color: var(--pp-text); }

body.b2 .b2-tpv__head :is(h1, h2, h3, h4, a, strong, [class*="title"]) {
  color: var(--pp-heading);
  font-weight: 800;
}

body.b2 .b2-tpv__head { color: var(--pp-muted); }

body.b2 .b2-tpv__head :is(i, svg) { color: var(--pp-faint); }

/* Quote box */

body.b2 .b2-tpv__quote {
  border: 1px solid var(--pp-border-soft);
  border-radius: 12px;
  background: linear-gradient(to bottom, #f2f6fc, #eaf0f9);
  color: var(--pp-muted);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

body.b2 .b2-tpv__quote :is(i, svg, [class*="mark"], [class*="icon"]) { color: var(--pp-accent); }

/* Author line */

body.b2 .b2-tpv__author { color: var(--pp-muted); }

body.b2 .b2-tpv__author :is(strong, b, a) { color: var(--pp-heading-2); font-weight: 800; }

body.b2 .b2-tpv__foot { border-top-color: var(--pp-border-soft) !important; }

/* Open topic button */

body.b2 .b2-tpv__cta {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px !important;
  border: 1px solid var(--pp-border) !important;
  border-radius: 12px !important;
  background: var(--pp-btn-bg) !important;
  box-shadow: 0 2px 6px rgba(100,120,180,.12) !important;
  color: var(--pp-btn-text) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  text-decoration: none !important;
  text-transform: uppercase;
  transition: background .12s ease, box-shadow .12s ease, border-color .12s ease, color .12s ease;
}

body.b2 .b2-tpv__cta i { color: var(--pp-accent); }

body.b2 #b2-tpvcard .b2-tpv__cta:is(:hover, :focus, :focus-visible, :active),
body.b2 .b2-tpvcard .b2-tpv__cta:is(:hover, :focus, :focus-visible, :active) {
  transform: translateY(1px) !important;
  border-color: #b4c3dc !important;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc) !important;
  color: var(--pp-accent) !important;
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18) !important;
  filter: none !important;
  outline: 0 !important;
}

/* Dark */

body.b2.dark .b2-tpvcard {
  border-color: #22314d !important;
  background: #0f1726 !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.55) !important;
}

body.b2.dark .b2-tpv__head :is(h1, h2, h3, h4, a, strong, [class*="title"]) { color: #dbeafe; }

body.b2.dark .b2-tpv__head, body.b2.dark .b2-tpv__author { color: #8494ad; }

body.b2.dark .b2-tpv__author :is(strong, b, a) { color: #cbd5e1; }

body.b2.dark .b2-tpv__quote {
  border-color: #1d2a44;
  background: linear-gradient(to bottom, #131d31, #0f1726);
  color: #9fb0c8;
  box-shadow: none;
}

body.b2.dark .b2-tpv__foot { border-top-color: #1d2a44 !important; }

body.b2.dark .b2-tpv__cta {
  border-color: #22314d !important;
  background: linear-gradient(to bottom, #131d31, #0f1726) !important;
  color: #cbd5e1 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.35) !important;
}

body.b2.dark .b2-tpv__cta i { color: #8fb2ff; }

body.b2.dark #b2-tpvcard .b2-tpv__cta:is(:hover, :focus, :focus-visible, :active),
body.b2.dark .b2-tpvcard .b2-tpv__cta:is(:hover, :focus, :focus-visible, :active) {
  border-color: #354a6f !important;
  background: linear-gradient(to bottom, #0d1524, #121c2f) !important;
  color: #8fb2ff !important;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.40) !important;
}

/* ---- New Topics widget: text-only hover (title changes color, nothing else) ---- */

body.b2 .widget-new-topics__title {
  color: var(--pp-heading) !important;
  text-decoration: none !important;
  transition: color .12s ease;
}

body.b2 a.widget-new-topics__title:is(:hover, :focus-visible) {
  color: var(--pp-accent) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

body.b2.dark .widget-new-topics__title { color: #dbeafe !important; }

body.b2.dark .widget-new-topics__title:is(:hover, :focus-visible) { color: #8fb2ff !important; }

/* Nothing in the widget row may move on hover */

body.b2 .widget-new-topics__title,
body.b2 .widget-new-topics__title:is(:hover, :focus, :active) {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  outline: 0 !important;
}

body.b2 .widget-new-topics__title::before, body.b2 .widget-new-topics__title::after {
  content: none !important;
  display: none !important;
}

/* Also lock position offsets, in case the hover uses top/left to nudge the row */

body.b2 [class*="widget-new-topics"]:is(:hover, :focus-within),
body.b2 [class*="widget-new-topics"]:hover > *,
body.b2 .widget-new-topics__title:is(:hover, :focus, :active) {
  transform: none !important;
  translate: none !important;
  letter-spacing: normal !important;
  text-indent: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  scale: none !important;
  rotate: none !important;
  animation: none !important;
}

/* ---- Sidebar widgets: calm link hover (no boxes / outlines) ---- */

body.b2 .board-layout__sidebar a:not([class*="btn"]):not([class*="button"]):not([class*="pp-"]):is(:hover, :focus, :focus-visible, :active) {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  color: var(--pp-accent) !important;
  text-decoration: none !important;
  transform: none !important;
}

/* Keep a soft, rounded keyboard focus ring only for keyboard users */

body.b2 .board-layout__sidebar a:not([class*="pp-"]):focus-visible {
  outline: 2px solid rgba(140,106,217,.45) !important;
  outline-offset: 2px;
  border-radius: 8px;
}

body.b2.dark .board-layout__sidebar a:not([class*="btn"]):not([class*="button"]):not([class*="pp-"]):is(:hover, :focus, :active) {
  color: #8fb2ff !important;
}

/* ---- Dark/light polish pass: checkboxes, topic titles, post footer, top posters ---- */

/* Checkboxes: rounded, theme-colored (no bright white squares) */

body.b2 input[type="checkbox"]:not([role="switch"]) {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid var(--pp-border);
  border-radius: 6px;
  background: var(--pp-input);
  box-shadow: inset 0 1px 2px rgba(100,120,180,.15);
  cursor: pointer;
  vertical-align: middle;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

body.b2 input[type="checkbox"]:not([role="switch"]):hover {
  border-color: #b4c3dc;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc);
}

body.b2 input[type="checkbox"]:not([role="switch"]):checked,
body.b2 input[type="checkbox"]:not([role="switch"]):indeterminate {
  border-color: transparent;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 12px no-repeat, linear-gradient(135deg, #5f82d9, #8c6ad9);
  box-shadow: 0 2px 6px rgba(119,88,186,.30);
}

body.b2 input[type="checkbox"]:not([role="switch"]):focus-visible {
  outline: 2px solid rgba(140,106,217,.45);
  outline-offset: 2px;
}

body.b2.dark input[type="checkbox"]:not([role="switch"]) {
  border-color: #2b3d5e;
  background: #0d1524;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.45);
}

body.b2.dark input[type="checkbox"]:not([role="switch"]):hover {
  border-color: #354a6f;
  background: linear-gradient(to bottom, #0d1524, #121c2f);
}

body.b2.dark input[type="checkbox"]:not([role="switch"]):checked,
body.b2.dark input[type="checkbox"]:not([role="switch"]):indeterminate {
  border-color: transparent;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 12px no-repeat, linear-gradient(135deg, #5f82d9, #8c6ad9);
}

/* Topic titles: bold, like the forum titles */

body.b2 .topic-row__name, body.b2 .topic-row__name a {
  color: var(--pp-heading);
  font-weight: 800 !important;
}

body.b2 .topic-row__name a:hover { color: var(--pp-accent); }

body.b2.dark .topic-row__name, body.b2.dark .topic-row__name a { color: #dbeafe; }

body.b2.dark .topic-row__name a:hover { color: #8fb2ff; }

body.b2 :is(.topic-header, [class*="topic-header"]) :is(h1, h2, [class*="__title"]):not(button):not(a) {
  color: var(--pp-heading);
  font-weight: 900 !important;
  letter-spacing: -.02em;
}

body.b2.dark :is(.topic-header, [class*="topic-header"]) :is(h1, h2, [class*="__title"]):not(button):not(a) {
  color: #eef4ff;
}

/* Post footer bar (Edit / Quote ...): soft top border, blends into the card */

body.b2 :is(div, footer)[class*="post"][class*="footer"],
body.b2 :is(div, footer)[class*="post__actions"],
body.b2 :is(div, footer)[class*="post-actions"],
body.b2 :is(div, footer)[class*="post-controls"] {
  border-top: 1px solid var(--pp-border-soft);
  background: linear-gradient(to bottom, rgba(238,244,251,.75), rgba(244,247,252,.55));
}

body.b2.dark :is(div, footer)[class*="post"][class*="footer"],
body.b2.dark :is(div, footer)[class*="post__actions"],
body.b2.dark :is(div, footer)[class*="post-actions"],
body.b2.dark :is(div, footer)[class*="post-controls"] {
  border-top-color: #1d2a44;
  background: linear-gradient(to bottom, rgba(19,29,49,.70), rgba(8,13,23,.35));
}

/* Top Posters / member list widgets: tighter rows */

body.b2 :is([class*="top-poster"], [class*="topposter"], [class*="widget-top"]) :is(li, [class*="__item"], [class*="__row"]) {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  min-height: 0 !important;
}

/* ---- Dark: topic view surfaces follow the blue/purple theme (no neutral grey) ---- */

body.b2.dark :is([id^="post-"], [class~="post"], [class*="post-card"], [class*="topic-post"], [class*="post--"], article[class*="post"]) {
  border-color: #22314d !important;
  background: linear-gradient(to bottom, #121b2c, #0f1726) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
}

/* poster column (avatar / name / group / post count) */

body.b2.dark :is([id^="post-"], [class~="post"], [class*="post-card"], [class*="topic-post"], [class*="post--"], article[class*="post"]) > :first-child {
  border-color: #1d2a44 !important;
  background: linear-gradient(to bottom, rgba(23,34,56,.85), rgba(15,23,38,.60)) !important;
}

/* the rest of the card: header bar, body, footer bar */

body.b2.dark :is([id^="post-"], [class~="post"], [class*="post-card"], [class*="topic-post"], [class*="post--"], article[class*="post"]) :is([class*="__head"], [class*="header"], [class*="__meta"]) {
  border-color: #1d2a44 !important;
  background: transparent !important;
}

body.b2.dark :is([id^="post-"], [class~="post"], [class*="post-card"], [class*="topic-post"], [class*="post--"], article[class*="post"]) :is([class*="__body"], [class*="__content"], [class*="message"]) {
  background: transparent !important;
}

body.b2.dark :is([id^="post-"], [class~="post"], [class*="post-card"], [class*="topic-post"], [class*="post--"], article[class*="post"]) :is([class*="footer"], [class*="__actions"], [class*="-actions"], [class*="controls"]) {
  border-color: #1d2a44 !important;
  background: linear-gradient(to bottom, rgba(23,34,56,.65), rgba(15,23,38,.35)) !important;
}

/* quotes inside posts */

body.b2.dark :is(blockquote, [class*="quote"]):not([class*="quick"]):not(i):not(svg):not(span) {
  border-color: #2b3d5e !important;
  background: linear-gradient(to bottom, #151f38, #101829) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

/* quick reply box */

body.b2.dark .quick-reply-wrap :is(.panel, .panel__title, .panel__content, .panel__content--flush) {
  border-color: #22314d !important;
}

body.b2.dark .quick-reply-wrap .panel {
  background: linear-gradient(to bottom, #121b2c, #0f1726) !important;
}

body.b2.dark .quick-reply-wrap .panel__title {
  background: linear-gradient(to bottom, #1e2a42, #172238) !important;
}

/* Rounded corners: children follow the card's radius so the border isn't covered */

body.b2 :is([id^="post-"], [class~="post"], [class*="post-card"], [class*="topic-post"], [class*="post--"], article[class*="post"]) {
  border-radius: 12px !important;
}

body.b2 :is([id^="post-"], [class~="post"], [class*="post-card"], [class*="topic-post"], [class*="post--"], article[class*="post"]) > :first-child {
  border-radius: 11px 0 0 11px;
}

body.b2 :is([id^="post-"], [class~="post"], [class*="post-card"], [class*="topic-post"], [class*="post--"], article[class*="post"]) > :last-child {
  border-radius: 0 11px 11px 0;
}

body.b2 :is([id^="post-"], [class~="post"], [class*="post-card"], [class*="topic-post"], [class*="post--"], article[class*="post"]) > :last-child > :first-child {
  border-top-right-radius: 11px;
}

body.b2 :is([id^="post-"], [class~="post"], [class*="post-card"], [class*="topic-post"], [class*="post--"], article[class*="post"]) > :last-child > :last-child {
  border-bottom-right-radius: 11px;
}

/* Post cards (article.b2-post): border + radius on the card itself, columns follow the radius */

body.b2 .b2-post { border: 1px solid var(--pp-border) !important; border-radius: 12px !important; }

body.b2.dark .b2-post { border-color: #22314d !important; }

body.b2 .b2-post > .b2-post__rail { border-radius: 11px 0 0 11px !important; }

body.b2 .b2-post > .b2-post__main { border-radius: 0 11px 11px 0 !important; }

body.b2 .b2-post > .b2-post__main > :first-child { border-top-right-radius: 11px; }

body.b2 .b2-post > .b2-post__main > :last-child { border-bottom-right-radius: 11px; }

/* The topic panel is just a wrapper now: each post is its own card, so nothing clips their corners */

body.b2 .topic-view .panel.topic, body.b2 .panel.topic {
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.b2 .panel.topic .replies { gap: 14px; }

body.b2 .reply, body.b2 .reply:last-child {
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
}

/* ---- Posts: depth (gradients, shadows, soft accent) so they don't look flat ---- */

body.b2 article.b2-post {
  background: linear-gradient(to bottom, #fcfdff, #f2f6fc);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 10px 26px rgba(100,120,180,.16), 0 2px 6px rgba(100,120,180,.08);
}

/* thin accent line along the top edge */

body.b2 article.b2-post::before { opacity: .9; }

/* poster column */

body.b2 article.b2-post > aside.b2-post__rail {
  background: linear-gradient(to bottom, #eef3fc, #f7f9fe);
  box-shadow: inset -1px 0 0 rgba(255,255,255,.8), inset -10px 0 14px -14px rgba(100,120,180,.25);
}

body.b2 .b2-post__avatar { box-shadow: 0 0 0 3px #fff, 0 6px 16px rgba(100,120,180,.32); }

/* header bar and footer bar */

body.b2 article.b2-post .b2-post__bar {
  background: linear-gradient(to bottom, #f6f9fe, #edf2fb) !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.7);
}

body.b2 article.b2-post .b2-post__actions {
  background: linear-gradient(to bottom, #f3f7fd, #e9f0fa) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

/* Dark */

body.b2.dark article.b2-post {
  background: linear-gradient(to bottom, #15203a, #0e1626) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 28px rgba(0,0,0,.42), 0 2px 6px rgba(0,0,0,.30) !important;
}

body.b2.dark article.b2-post::before { opacity: 1; }

body.b2.dark article.b2-post > aside.b2-post__rail {
  background: linear-gradient(to bottom, #1a2742, #111a2e) !important;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.04), inset -12px 0 16px -14px rgba(0,0,0,.6);
}

body.b2.dark .b2-post__avatar { box-shadow: 0 0 0 3px #1d2a44, 0 6px 16px rgba(0,0,0,.5); }

body.b2.dark article.b2-post .b2-post__bar {
  background: linear-gradient(to bottom, rgba(26,39,66,.85), rgba(17,26,46,.65)) !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.03);
}

body.b2.dark article.b2-post .b2-post__actions {
  background: linear-gradient(to bottom, rgba(23,34,58,.85), rgba(14,22,38,.65)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

/* ---- Posts: finishing touches ---- */

/* body area: soft tint fading from the header bar, so it isn't a flat fill */

body.b2 .b2-post__body {
  background: linear-gradient(to bottom, rgba(232,240,252,.65), rgba(232,240,252,0) 110px);
  box-shadow: inset 0 8px 10px -10px rgba(100,120,180,.25);
}

body.b2.dark .b2-post__body { box-shadow: inset 0 8px 10px -10px rgba(0,0,0,.55); }

/* subject line: the rule under it fades out instead of a hard grey line */

body.b2 .b2-post__body :is(h1, h2, h3, [class*="__title"], [class*="__subject"], [class*="subject"]) {
  border-bottom: 1px solid transparent !important;
  border-image: linear-gradient(to right, var(--pp-border), rgba(200,212,228,0)) 1 !important;
}

body.b2.dark .b2-post__body :is(h1, h2, h3, [class*="__title"], [class*="__subject"], [class*="subject"]) {
  border-image: linear-gradient(to right, #2b3d5e, rgba(43,61,94,0)) 1 !important;
}

/* post number: small rounded pill */

body.b2 .b2-post__bar :is([class*="num"], [class*="index"], [class*="anchor"], [class*="permalink"]):not(input):not([class*="avatar"]) {
  padding: 2px 9px;
  border: 1px solid var(--pp-border-soft);
  border-radius: 10px;
  background: linear-gradient(to bottom, #ffffff, #eef4fb);
  color: var(--pp-accent) !important;
  font-weight: 800;
  text-decoration: none;
}

body.b2.dark .b2-post__bar :is([class*="num"], [class*="index"], [class*="anchor"], [class*="permalink"]):not(input):not([class*="avatar"]) {
  border-color: #22314d;
  background: linear-gradient(to bottom, #172238, #0f1726);
}

/* footer links (Edit, Quote, +, ^): soft rounded buttons with the pressed-in hover */

body.b2 .b2-post__actions :is(a, button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--pp-muted);
  font-weight: 800;
  text-decoration: none;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease, color .12s ease;
}

body.b2 .b2-post__actions :is(a, button):is(:hover, :focus-visible) {
  transform: translateY(1px);
  border-color: #b4c3dc;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc);
  color: var(--pp-accent);
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18);
}

body.b2.dark .b2-post__actions :is(a, button):is(:hover, :focus-visible) {
  border-color: #354a6f;
  background: linear-gradient(to bottom, #0d1524, #121c2f);
  color: #8fb2ff;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.40);
}

/* footer buttons at rest: soft pills like the other buttons */

body.b2 article.b2-post footer :is(a, button, .btn):not(:hover):not(:focus-visible),
body.b2 .b2-post__actions :is(a, button, .btn):not(:hover):not(:focus-visible) {
  border: 1px solid #c4d2e8 !important;
  border-radius: 10px !important;
  background: linear-gradient(to bottom, #ffffff, #eef3fb) !important;
  color: #5b6d8e !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 5px rgba(100,120,180,.10) !important;
}

body.b2.dark article.b2-post footer :is(a, button, .btn):not(:hover):not(:focus-visible),
body.b2.dark .b2-post__actions :is(a, button, .btn):not(:hover):not(:focus-visible) {
  border-color: #2a3a58 !important;
  background: linear-gradient(to bottom, #1a2742, #111a2e) !important;
  color: #b9c8e6 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 6px rgba(0,0,0,.35) !important;
}

body.b2 article.b2-post footer :is(a, button, .btn):is(:hover, :focus-visible) {
  transform: translateY(1px);
  border-color: #b4c3dc !important;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc) !important;
  color: var(--pp-accent) !important;
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18) !important;
}

body.b2.dark article.b2-post footer :is(a, button, .btn):is(:hover, :focus-visible) {
  border-color: #354a6f !important;
  background: linear-gradient(to bottom, #0d1524, #121c2f) !important;
  color: #8fb2ff !important;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.40) !important;
}

/* The line above the signature (it was a hard grey rule): fades out to the right */

body.b2 .b2-post .signature {
  border-top: 1px solid transparent !important;
  border-image: linear-gradient(to right, var(--pp-border), rgba(200,212,228,0)) 1 !important;
  padding-top: 16px;
}

body.b2.dark .b2-post .signature {
  border-image: linear-gradient(to right, #2b3d5e, rgba(43,61,94,0)) 1 !important;
}

/* Light: quote boxes follow the blue/purple theme (no neutral grey) */

body.b2:not(.dark) :is(blockquote, [class*="quote"]):not([class*="quick"]):not(i):not(svg):not(span) {
  border-color: #cdd8e8 !important;
  background: linear-gradient(to bottom, #f3f6fd, #e9f0fb) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}

/* ============================================
   10. TOPIC HEADER (b2-thead) — matches the post cards
   ============================================ */

body.b2 .b2-thead {
  border: 1px solid var(--pp-border) !important;
  border-radius: 12px !important;
  background: linear-gradient(to bottom, #fcfdff, #f2f6fc) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 10px 26px rgba(100,120,180,.16), 0 2px 6px rgba(100,120,180,.08) !important;
}

/* same accent line as the posts */

body.b2 .b2-thead::before {
  bottom: auto !important;
  width: auto !important;
  border: 0 !important;
  opacity: .9 !important;
}

body.b2.dark .b2-thead {
  border-color: #22314d !important;
  background: linear-gradient(to bottom, #15203a, #0e1626) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 28px rgba(0,0,0,.42), 0 2px 6px rgba(0,0,0,.30) !important;
}

body.b2.dark .b2-thead::before { opacity: 1 !important; }

/* title + meta */

body.b2 .b2-thead__titlecol :is(h1, h2, [class*="title"]) {
  color: #354867;
  font-weight: 900;
  letter-spacing: -.02em;
}

body.b2.dark .b2-thead__titlecol :is(h1, h2, [class*="title"]) { color: #eef4ff; }

body.b2 .b2-thead__meta { color: #657796; }

body.b2.dark .b2-thead__meta { color: #8fa3c7; }

body.b2 .b2-thead__meta a:not([class*="btn"]):hover { color: var(--pp-accent); }

/* action chips */

body.b2 .b2-thead__chip {
  border: 1px solid #c4d2e8 !important;
  border-radius: 10px !important;
  background: linear-gradient(to bottom, #ffffff, #eef3fb) !important;
  color: #5b6d8e !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 5px rgba(100,120,180,.10) !important;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

body.b2 .b2-thead__chip:is(:hover, :focus-visible) {
  transform: translateY(1px);
  border-color: #b4c3dc !important;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc) !important;
  color: var(--pp-accent) !important;
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18) !important;
}

/* Reply = filled accent */

body.b2 .b2-thead__chip--reply, body.b2 .b2-thead__chip--reply:is(:hover, :focus-visible) {
  border-color: transparent !important;
  background: var(--pp-grad-accent) !important;
  color: #fff !important;
  box-shadow: 0 6px 14px rgba(119,88,186,.30), inset 0 1px 0 rgba(255,255,255,.25) !important;
}

body.b2 .b2-thead__chip--reply:is(:hover, :focus-visible) {
  transform: translateY(1px);
  background: linear-gradient(135deg, #6a8be0, #9776e0) !important;
  box-shadow: inset 0 3px 6px rgba(60,40,130,.22), inset 0 1px 2px rgba(60,40,130,.14) !important;
}

/* New Topic = outlined accent */

body.b2 .b2-thead__chip--newtopic { color: #4b5d9b !important; border-color: #aebde0 !important; }

/* Dark */

body.b2.dark .b2-thead__chip {
  border-color: #2a3a58 !important;
  background: linear-gradient(to bottom, #1a2742, #111a2e) !important;
  color: #b9c8e6 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 6px rgba(0,0,0,.35) !important;
}

body.b2.dark .b2-thead__chip:is(:hover, :focus-visible) {
  border-color: #354a6f !important;
  background: linear-gradient(to bottom, #0d1524, #121c2f) !important;
  color: #8fb2ff !important;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.4) !important;
}

body.b2.dark .b2-thead__chip--reply,
body.b2.dark .b2-thead__chip--reply:is(:hover, :focus-visible) {
  border-color: transparent !important;
  background: var(--pp-grad-accent) !important;
  color: #fff !important;
}

body.b2.dark .b2-thead__chip--reply:is(:hover, :focus-visible) {
  background: linear-gradient(135deg, #6a8be0, #9776e0) !important;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.35), inset 0 1px 2px rgba(0,0,0,.25) !important;
}

body.b2.dark .b2-thead__chip--newtopic { color: #9db4ea !important; border-color: #34466a !important; }

/* ============================================
   11. FORUM HEADER CARD (title / stats / actions / New Topic)
   ============================================ */

body.b2 [class*="b2-fhead"]:is(div, header, section):not([class*="__"]) {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
  overflow: hidden;
  border: 1px solid var(--pp-border-card);
  border-radius: 18px;
  background: var(--pp-card-bg);
  box-shadow: var(--pp-card-shadow);
}

/* Accent strip across the top */

body.b2 [class*="b2-fhead"]:is(div, header, section):not([class*="__"])::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--pp-grad-accent);
  pointer-events: none;
}

body.b2 [class*="b2-fhead"] :is(h1, h2) {
  margin: 0;
  color: var(--pp-heading);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.2;
}

body.b2.dark [class*="b2-fhead"] :is(h1, h2) { color: #eef4ff; }

body.b2 [class*="b2-fhead"] :is(p, [class*="desc"]) {
  margin: 4px 0 0;
  color: var(--pp-muted);
  font-size: 12px;
  line-height: 1.55;
}

/* Stats: one box each; the number and label inside stay plain */

body.b2 [class*="b2-fhead__stat"] { display: flex; align-items: center; gap: 8px; }

body.b2 [class*="b2-fhead__stat"] > * {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 62px;
  padding: 8px 10px;
  border: 1px solid var(--pp-border-soft);
  border-radius: 12px;
  background: rgba(255,255,255,.55);
  color: var(--pp-heading);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.1;
}

body.b2 [class*="b2-fhead__stat"] > * > * {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.b2 [class*="b2-fhead__stat"] > * > :first-child {
  color: var(--pp-heading);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.1;
}

body.b2 [class*="b2-fhead__stat"] > * > :last-child:not(:first-child) {
  margin-top: 4px;
  color: var(--pp-faint);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

body.b2.dark [class*="b2-fhead__stat"] > * {
  background: rgba(8,13,23,.35);
  border-color: var(--pp-border);
  color: #dbeafe;
}

body.b2.dark [class*="b2-fhead__stat"] > * > :first-child { color: #dbeafe; }

/* Action buttons: separate rounded squares, no frame around the group */

body.b2 [class*="b2-fhead__acts"],
body.b2 [class*="b2-fhead__actions"],
body.b2 [class*="b2-fhead__tools"],
body.b2 [class*="b2-fhead__btns"] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible !important;
}

/* The buttons' own wrappers must not clip the 1px press on hover */

body.b2 [class*="b2-fhead__acts"] > *,
body.b2 [class*="b2-fhead__actions"] > *,
body.b2 [class*="b2-fhead__tools"] > *,
body.b2 [class*="b2-fhead__btns"] > * {
  overflow: visible;
}

body.b2 .b2-fhead__act,
body.b2 [class*="b2-fhead__acts"] > :is(a, button):not(.btn),
body.b2 [class*="b2-fhead__actions"] > :is(a, button):not(.btn),
body.b2 [class*="b2-fhead__tools"] > :is(a, button):not(.btn),
body.b2 [class*="b2-fhead__btns"] > :is(a, button):not(.btn),
body.b2 [class*="b2-fhead__info"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0 !important;
  padding: 0;
  border: 1px solid var(--pp-border) !important;
  border-radius: 12px !important;
  background: var(--pp-btn-bg) !important;
  color: var(--pp-btn-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 8px rgba(100,120,180,.10);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}

body.b2 .b2-fhead__act:is(:hover, :focus),
body.b2 [class*="b2-fhead__acts"] > :is(a, button):not(.btn):hover,
body.b2 [class*="b2-fhead__actions"] > :is(a, button):not(.btn):hover,
body.b2 [class*="b2-fhead__tools"] > :is(a, button):not(.btn):hover,
body.b2 [class*="b2-fhead__btns"] > :is(a, button):not(.btn):hover,
body.b2 [class*="b2-fhead__info"]:hover {
  transform: translateY(1px) !important;
  border-color: #b4c3dc !important;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc) !important;
  color: var(--pp-accent) !important;
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18);
}

body.b2.dark .b2-fhead__act, body.b2.dark [class*="b2-fhead__info"] {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 3px 10px rgba(0,0,0,.28);
}

body.b2.dark .b2-fhead__act:is(:hover, :focus),
body.b2.dark [class*="b2-fhead__acts"] > :is(a, button):not(.btn):hover,
body.b2.dark [class*="b2-fhead__actions"] > :is(a, button):not(.btn):hover,
body.b2.dark [class*="b2-fhead__tools"] > :is(a, button):not(.btn):hover,
body.b2.dark [class*="b2-fhead__btns"] > :is(a, button):not(.btn):hover,
body.b2.dark [class*="b2-fhead__info"]:hover {
  border-color: #354a6f !important;
  background: linear-gradient(to bottom, #0d1524, #121c2f) !important;
  color: #8fb2ff !important;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.40);
}

/* New Topic sizing (styling comes from the global button rules) */

body.b2 [class*="b2-fhead"] :is(a.btn, button.btn, .btn-primary) {
  height: 40px;
  padding: 0 20px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 8px rgba(100,120,180,.10);
}

body.b2.dark [class*="b2-fhead"] :is(a.btn, button.btn, .btn-primary) {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 3px 10px rgba(0,0,0,.28);
}

/* ============================================
   12. WIDGETS (users online, new posts, stats)
   ============================================ */

body.b2 .widget .panel, body.b2 .widget-area .panel {
  border: 1px solid var(--pp-tab-active-border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--pp-surface);
}

body.b2.dark .widget .panel, body.b2.dark .widget-area .panel { border-color: var(--pp-border); }

body.b2 .widget .panel > .panel__title, body.b2 .widget-area .panel > .panel__title {
  margin: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--pp-tab-active-border);
}

body.b2.dark .widget .panel > .panel__title { border-bottom-color: var(--pp-border); }

body.b2 .widget .panel__content a:not(.username):not(.btn) { color: var(--pp-link); }

body.b2 .widget .panel__content a:not(.username):not(.btn):hover { color: var(--pp-link-hover); }

body.b2 .panel--board-stats { margin-top: 16px; }

body.b2 .stats { color: #5a6a82; }

body.b2 .stats-links { margin-top: 16px; padding-bottom: 4px; }

body.b2 .stats-links__divider { color: #9aaac0; }

body.b2.dark .stats, body.b2.dark .stats-links__divider { color: #64748b; }

/* ============================================
   13. TOPIC LIST
   ============================================ */

body.b2 .topic-row {
  background-color: rgba(242,246,252,.5);
  border-bottom: 1px solid #e2eaf7;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}

body.b2 .topic-row:hover { background: rgba(255,255,255,.55); }

body.b2.dark .topic-row {
  background: var(--pp-surface-3);
  border-color: var(--pp-border-soft);
  box-shadow: none;
  color: var(--pp-muted);
}

body.b2.dark .topic-row:hover { background: rgba(255,255,255,.035); }

body.b2 .topic-row--unread .topic-row__name a { color: var(--pp-heading); }

body.b2 .topic-row__details > :not([hidden]) ~ :not([hidden]) { border-color: var(--pp-border-soft); }

body.b2 .topic-marker--read { color: #9aaac0; }

body.b2 .topic-marker--unread { color: #5b8ad4; }

body.b2.dark .topic-marker--unread { color: #6a9ae0; }

body.b2 .active-users {
  background-color: var(--pp-surface-3);
  border-top-color: var(--pp-border-soft);
  color: var(--pp-muted);
}

body.b2 .empty-message { background-color: rgba(242,246,252,.5); color: var(--pp-muted); }

body.b2.dark .empty-message { background: var(--pp-surface-3); }

/* Edge-to-edge topic list */

body.b2 .panel:has(.topic-row) > .panel__content,
body.b2 .panel:has(.topic-row) > .panel__content--flush {
  padding: 0;
}

body.b2 .panel:has(.topic-row) .topic-row { padding: 14px 20px; margin: 0; }

body.b2 .panel:has(.topic-row) .active-users,
body.b2 .panel:has(.topic-row) .moderator-actions {
  padding: 16px 20px;
  margin: 0;
}

body.b2 .panel:has(.topic-row) .separator { display: none; }

/* ============================================
   14. TOPIC LIST — matches forum rows / posts
   ============================================ */

body.b2 .panel:has(.topic-row) {
  overflow: hidden;
  border-radius: 12px !important;
  background: linear-gradient(to bottom, #fcfdff, #f2f6fc) !important;
}

body.b2.dark .panel:has(.topic-row) {
  border-color: #22314d !important;
  background: linear-gradient(to bottom, #15203a, #0e1626) !important;
}

/* rows */

body.b2 .panel:has(.topic-row) .topic-row {
  position: relative;
  background: transparent !important;
  border-bottom: 1px solid transparent !important;
  border-image: linear-gradient(to right, var(--pp-border), rgba(200,212,228,0)) 1 !important;
  box-shadow: none !important;
  transition: background .18s ease;
}

body.b2 .panel:has(.topic-row) .topic-row:last-of-type {
  border-bottom-color: transparent !important;
  border-image: none !important;
}

body.b2 .panel:has(.topic-row) .topic-row:hover {
  background: linear-gradient(to right, rgba(95,130,217,.09), rgba(140,106,217,.04)) !important;
}

body.b2.dark .panel:has(.topic-row) .topic-row {
  border-image: linear-gradient(to right, #22314d, rgba(34,49,77,0)) 1 !important;
}

/* unread: accent stripe on the left */

body.b2 .panel:has(.topic-row) .topic-row--unread::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(to bottom, #6087d1, #7758ba);
  pointer-events: none;
}

/* avatars */

body.b2 .topic-row :is(img[class*="avatar"], [class*="avatar"] img) {
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff, 0 3px 8px rgba(100,120,180,.28);
}

body.b2.dark .topic-row :is(img[class*="avatar"], [class*="avatar"] img) {
  box-shadow: 0 0 0 2px #1d2a44, 0 3px 8px rgba(0,0,0,.5);
}

/* footer: browsing / users online */

body.b2 .b2-tl__foot {
  gap: 10px;
  border-top: 1px solid transparent;
  border-image: linear-gradient(to right, var(--pp-border), rgba(200,212,228,0)) 1;
  background: linear-gradient(to bottom, #f3f7fd, #e9f0fa) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

body.b2 .b2-tl__foot-dot {
  background: var(--pp-grad-accent) !important;
  box-shadow: 0 0 0 3px rgba(119,88,186,.16), 0 0 10px rgba(119,88,186,.4);
}

body.b2 .b2-tl__foot-text { color: #657796; }

body.b2 .b2-tl__foot-text a { font-weight: 400; }

body.b2 .b2-tl__foot-stack :is(img, [class*="avatar"]) {
  box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(100,120,180,.28);
}

body.b2.dark .b2-tl__foot {
  border-image: linear-gradient(to right, #22314d, rgba(34,49,77,0)) 1;
  background: linear-gradient(to bottom, rgba(26,39,66,.85), rgba(17,26,46,.65)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

body.b2.dark .b2-tl__foot-text { color: #8fa3c7; }

body.b2.dark .b2-tl__foot-stack :is(img, [class*="avatar"]) {
  box-shadow: 0 0 0 2px #1d2a44, 0 2px 6px rgba(0,0,0,.5);
}

/* topic list: row details */

body.b2 .topic-row__title-line a:not(.label),
body.b2 .topic-row__title-line :is(h2, h3, [class*="name"], [class*="title"]) a:not(.label) {
  color: var(--pp-heading) !important;
  font-weight: 400 !important;
}

body.b2 .topic-row__title-line a:not(.label):hover { color: var(--pp-accent) !important; }

body.b2.dark .topic-row__title-line a:not(.label):hover { color: #8fb2ff !important; }

body.b2 .topic-row__meta { color: #657796; }

body.b2 .topic-row__meta .topic-row__op-link { color: #657796; }

body.b2 .topic-row__meta .topic-row__op-link:hover { color: var(--pp-accent); }

body.b2.dark .topic-row__meta, body.b2.dark .topic-row__meta .topic-row__op-link { color: #8fa3c7; }

/* replies / views chips */

body.b2 .topic-row__stats { gap: 8px; }

body.b2 .topic-row__stats > * {
  padding: 7px 12px;
  border: 1px solid #d3dded;
  border-radius: 10px;
  background: linear-gradient(to bottom, #ffffff, #eef3fb);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 5px rgba(100,120,180,.08);
  color: #5b6d8e;
}

body.b2 .topic-row__stats > * :is(b, strong, [class*="count"], [class*="num"]) {
  color: var(--pp-heading);
  font-weight: 900;
}

body.b2.dark .topic-row__stats > * {
  border-color: #2a3a58;
  background: linear-gradient(to bottom, #1a2742, #111a2e);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 6px rgba(0,0,0,.3);
  color: #8fa3c7;
}

body.b2.dark .topic-row__stats > * :is(b, strong, [class*="count"], [class*="num"]) { color: #edf3ff; }

/* last activity */

body.b2 .topic-row__last-activity a { font-weight: 400; }

body.b2 .topic-row__last-activity { color: #657796; }

body.b2.dark .topic-row__last-activity { color: #8fa3c7; }

/* participant avatars */

body.b2 .topic-row__participants :is(img, [class*="avatar"]) {
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(100,120,180,.28);
}

body.b2.dark .topic-row__participants :is(img, [class*="avatar"]) {
  box-shadow: 0 0 0 2px #1d2a44, 0 2px 6px rgba(0,0,0,.5);
}

/* forum header: the (i) button was a pill inside a pill — flatten the inner parts */

body.b2 [class*="b2-fhead__info"] [class*="b2-fhead__info"]:not([class*="pop"]):not([class*="panel"]):not([class*="card"]):not([class*="menu"]),
body.b2 [class*="b2-fhead__info"] > :is(i, svg, span, button, a):not([class*="pop"]):not([class*="panel"]) {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  color: inherit !important;
}

body.b2 [class*="b2-fhead__info"] :is(i, svg) { color: inherit !important; opacity: 1; }

body.b2 [class*="b2-fhead__info"]:focus-visible {
  outline: 2px solid rgba(119,88,186,.45);
  outline-offset: 2px;
}

/* topic list: no flat grey surfaces behind the rows (dark + light) */

body.b2 .panel:has(.topic-row) :is(.panel__content, .panel__content--flush, .data-grid) {
  background: transparent !important;
}

body.b2.dark .panel:has(.topic-row) .topic-row {
  background: linear-gradient(to bottom, rgba(26,39,66,.55), rgba(17,26,46,.35)) !important;
  color: #8fa3c7;
}

body.b2:not(.dark) .panel:has(.topic-row) .topic-row {
  background: linear-gradient(to bottom, rgba(255,255,255,.7), rgba(238,243,252,.5)) !important;
}

body.b2.dark .panel:has(.topic-row) .topic-row:hover {
  background: linear-gradient(to right, rgba(95,130,217,.16), rgba(140,106,217,.07)) !important;
}

body.b2:not(.dark) .panel:has(.topic-row) .topic-row:hover {
  background: linear-gradient(to right, rgba(95,130,217,.10), rgba(140,106,217,.05)) !important;
}

body.b2.dark .topic-row__title-line a:not(.label) { color: #e6eeff !important; }

/* forum header: "About this forum" button — keep the full border in every state */

body.b2 .b2-fhead__act.b2-fhead__act--about,
body.b2 .b2-fhead__act.b2-fhead__act--about:is(:hover, :focus, :focus-visible, :active),
body.b2 .b2-fhead__act.b2-fhead__act--about.is-on {
  box-sizing: border-box;
  border: 1px solid var(--pp-border) !important;
  border-image: none !important;
  outline: 0 !important;
  overflow: visible !important;
}

body.b2.dark .b2-fhead__act.b2-fhead__act--about,
body.b2.dark .b2-fhead__act.b2-fhead__act--about:is(:hover, :focus, :focus-visible, :active),
body.b2.dark .b2-fhead__act.b2-fhead__act--about.is-on {
  border-color: #2a3a58 !important;
}

/* open state = accent tint, same pressed look as hover */

body.b2 .b2-fhead__act.b2-fhead__act--about:is(.is-on, :hover, :focus-visible) {
  border-color: #b4c3dc !important;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc) !important;
  color: var(--pp-accent) !important;
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18) !important;
}

body.b2.dark .b2-fhead__act.b2-fhead__act--about:is(.is-on, :hover, :focus-visible) {
  border-color: #354a6f !important;
  background: linear-gradient(to bottom, #0d1524, #121c2f) !important;
  color: #8fb2ff !important;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.4) !important;
}

/* native decorative pseudo layers on the button must not paint a highlight over the border */

body.b2 .b2-fhead__act.b2-fhead__act--about::before {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* topic list panel: draw the outline as an outer ring so row backgrounds can never cover the right edge */

body.b2 .panel:has(.topic-row) {
  border: 0 !important;
  box-shadow: 0 0 0 1px #c8d6ea, inset 0 1px 0 rgba(255,255,255,.95), 0 10px 26px rgba(100,120,180,.16), 0 2px 6px rgba(100,120,180,.08) !important;
}

body.b2.dark .panel:has(.topic-row) {
  box-shadow: 0 0 0 1px #2a3a58, inset 0 1px 0 rgba(255,255,255,.06), 0 12px 28px rgba(0,0,0,.42), 0 2px 6px rgba(0,0,0,.30) !important;
}

body.b2 .panel:has(.topic-row) > :is(.panel__title, .panel__content) { margin: 0; }

/* forum header buttons (dark): kill the light inset highlight / white top edge in every state */

body.b2.dark .b2-fhead__act,
body.b2.dark .b2-fhead__act:is(:focus, :focus-visible, :active),
body.b2.dark .b2-fhead__act.b2-fhead__act--about,
body.b2.dark [class*="b2-fhead__acts"] > :is(a, button):not(.btn):is(:focus, :focus-visible, :active) {
  border-color: #2a3a58 !important;
  border-top-color: #2a3a58 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 3px 10px rgba(0,0,0,.28) !important;
  outline: 0 !important;
  -webkit-tap-highlight-color: transparent;
}

body.b2.dark .b2-fhead__act:is(.is-on, :hover),
body.b2.dark .b2-fhead__act.b2-fhead__act--about:is(.is-on, :hover) {
  border-color: #354a6f !important;
  border-top-color: #354a6f !important;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.4) !important;
}

body.b2.dark .b2-fhead__act i {
  color: inherit !important;
  text-shadow: none !important;
  filter: none !important;
}

/* forum header: push the action icons + New Topic to the right edge */

body.b2 .b2-fhead__row { width: 100%; }

body.b2 .b2-fhead__acts { margin-left: auto !important; }

body.b2 .b2-fhead__row > :is(a.btn, .btn-primary):last-child,
body.b2 .b2-fhead__acts + :is(a.btn, .btn-primary) {
  margin-left: 0;
  flex: 0 0 auto;
}

/* view switcher (list / compact / grid / feed) + sidebar toggle — theme colours instead of green */

body.b2 .b2-lsw { gap: 6px !important; }

body.b2 .b2-lsw__btn.sidebar-toggle, body.b2 button.sidebar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #c4d2e8 !important;
  border-radius: 10px !important;
  background: linear-gradient(to bottom, #ffffff, #eef3fb) !important;
  color: #5b6d8e !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 5px rgba(100,120,180,.10) !important;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

body.b2 .b2-lsw__btn.sidebar-toggle:not(.is-on):is(:hover, :focus-visible),
body.b2 button.sidebar-toggle:not(.b2-lsw__btn):is(:hover, :focus-visible) {
  transform: translateY(1px);
  border-color: #b4c3dc !important;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc) !important;
  color: var(--pp-accent) !important;
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18) !important;
}

/* active view = gradient */

body.b2 .b2-lsw__btn.is-on, body.b2 .b2-lsw__btn.is-on:is(:hover, :focus-visible) {
  border-color: transparent !important;
  background: var(--pp-grad-accent) !important;
  color: #fff !important;
  box-shadow: 0 5px 12px rgba(119,88,186,.30), inset 0 1px 0 rgba(255,255,255,.25) !important;
}

body.b2 .b2-lsw__btn i { color: inherit !important; }

/* the round "hide sidebar" dot */

body.b2 button.sidebar-toggle:not(.b2-lsw__btn) :is(i, svg) {
  color: inherit !important;
  background: transparent !important;
}

/* the status dot inside the round toggle: theme gradient instead of green */

body.b2 button.sidebar-toggle:not(.b2-lsw__btn)::before,
body.b2 button.sidebar-toggle:not(.b2-lsw__btn)::after,
body.b2 button.sidebar-toggle:not(.b2-lsw__btn) > :is(span, div, b, em, i) {
  background: var(--pp-grad-accent) !important;
  background-color: #7758ba !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 3px rgba(119,88,186,.18), 0 0 10px rgba(119,88,186,.45) !important;
}

body.b2.dark .b2-lsw__btn.sidebar-toggle, body.b2.dark button.sidebar-toggle {
  border-color: #2a3a58 !important;
  background: linear-gradient(to bottom, #1a2742, #111a2e) !important;
  color: #9db4ea !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 6px rgba(0,0,0,.35) !important;
}

body.b2.dark .b2-lsw__btn.sidebar-toggle:not(.is-on):is(:hover, :focus-visible),
body.b2.dark button.sidebar-toggle:not(.b2-lsw__btn):is(:hover, :focus-visible) {
  border-color: #354a6f !important;
  background: linear-gradient(to bottom, #0d1524, #121c2f) !important;
  color: #8fb2ff !important;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.4) !important;
}

body.b2.dark .b2-lsw__btn.is-on,
body.b2.dark .b2-lsw__btn.is-on:is(:hover, :focus-visible) {
  border-color: transparent !important;
  background: var(--pp-grad-accent) !important;
  color: #fff !important;
  box-shadow: 0 5px 12px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.2) !important;
}

/* hide/show sidebar toggle is an SVG switch: recolour the track and knob (no pill box around it) */

html body.b2 .sidebar-toggle-row > button.sidebar-toggle,
html body.b2.dark .sidebar-toggle-row > button.sidebar-toggle {
  width: auto !important;
  height: auto !important;
  padding: 2px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #7758ba !important;
}

html body.b2 .sidebar-toggle-row > button.sidebar-toggle:is(:hover, :focus-visible) {
  transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #5f82d9 !important;
}

html body.b2 .sidebar-toggle-row > button.sidebar-toggle svg {
  width: 40px;
  height: 22px;
  overflow: visible;
}

html body.b2 .sidebar-toggle-row > button.sidebar-toggle svg rect {
  fill: #9db0d8 !important;
  opacity: .55 !important;
}

html body.b2 .sidebar-toggle-row > button.sidebar-toggle svg circle {
  fill: #7758ba !important;
  filter: drop-shadow(0 1px 2px rgba(60,40,130,.35));
}

html body.b2.dark .sidebar-toggle-row > button.sidebar-toggle { color: #8fb2ff !important; }

html body.b2.dark .sidebar-toggle-row > button.sidebar-toggle:is(:hover, :focus-visible) {
  color: #b4c9ff !important;
}

html body.b2.dark .sidebar-toggle-row > button.sidebar-toggle svg rect {
  fill: #2a3a58 !important;
  opacity: 1 !important;
}

html body.b2.dark .sidebar-toggle-row > button.sidebar-toggle svg circle {
  fill: #8fb2ff !important;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
}

html body.b2 .sidebar-toggle-row > button.sidebar-toggle:is(:hover, :focus-visible) svg circle {
  fill: #5f82d9 !important;
}

html body.b2.dark .sidebar-toggle-row > button.sidebar-toggle:is(:hover, :focus-visible) svg circle {
  fill: #b4c9ff !important;
}

/* sidebar switch: no pressed-in box on hover/focus, just a brighter knob */

html body.b2 .sidebar-toggle-row > button.sidebar-toggle:not(.b2-lsw__btn):not(.x):not(.y):is(:hover, :focus, :focus-visible, :active),
html body.b2.dark .sidebar-toggle-row > button.sidebar-toggle:not(.b2-lsw__btn):not(.x):not(.y):is(:hover, :focus, :focus-visible, :active) {
  transform: none !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* home page: smaller New Topic button */

body.b2 #b2HomeForums :is(a.btn[href*="topics/create"], a.btn-primary[href*="create"], .btn-primary.new-topic, [class*="new-topic"]:is(a, button).btn),
body.b2 #b2HomeForums .board-layout > :is(a, button).btn-primary,
body.b2 .board-actions :is(a, button).btn-primary {
  height: 36px !important;
  min-height: 0 !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  font-size: 10.5px !important;
  letter-spacing: .1em !important;
  gap: 8px;
}

body.b2 #b2HomeForums :is(a.btn[href*="topics/create"], a.btn-primary[href*="create"]) :is(i, svg) {
  font-size: 11px;
}

/* home page New Topic (.b2-newtopic) — compact */

body.b2 .b2-newtopic > button.btn.btn-primary {
  height: 38px !important;
  min-height: 0 !important;
  padding: 0 17px !important;
  font-size: 10.5px !important;
  letter-spacing: .1em !important;
  line-height: 1 !important;
}

body.b2 .b2-newtopic > button.btn.btn-primary i {
  margin-right: .35rem !important;
  font-size: .72rem !important;
}

/* category collapse toggle (b2-cat__toggle): soft pill, no stray green/purple focus ring after a click */

body.b2 .b2-cat__toggle {
  width: 34px;
  height: 34px;
  border: 1px solid #c4d2e8 !important;
  border-radius: 10px !important;
  background: linear-gradient(to bottom, #ffffff, #eef3fb) !important;
  color: #5b6d8e !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 5px rgba(100,120,180,.10) !important;
  outline: 0 !important;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

body.b2 .b2-cat__toggle:focus:not(:focus-visible) { outline: 0 !important; }

body.b2 .b2-cat__toggle:is(:hover, :focus-visible) {
  transform: translateY(1px);
  border-color: #b4c3dc !important;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc) !important;
  color: var(--pp-accent) !important;
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18) !important;
}

body.b2 .b2-cat__toggle:focus-visible {
  outline: 2px solid rgba(119,88,186,.45) !important;
  outline-offset: 2px;
}

body.b2 .b2-cat__toggle i { color: inherit !important; transition: transform .2s ease; }

body.b2.dark .b2-cat__toggle {
  border-color: #2a3a58 !important;
  background: linear-gradient(to bottom, #1a2742, #111a2e) !important;
  color: #b9c8e6 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 6px rgba(0,0,0,.35) !important;
}

body.b2.dark .b2-cat__toggle:is(:hover, :focus-visible) {
  border-color: #354a6f !important;
  background: linear-gradient(to bottom, #0d1524, #121c2f) !important;
  color: #8fb2ff !important;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.4) !important;
}

body.b2.dark .b2-cat__toggle:focus-visible { outline-color: rgba(143,178,255,.5) !important; }

/* forum topic list: filter chips, section bands, empty state */

/* filter chips (Latest / Trending / Most replies ...) */

body.b2 .b2-toolrow__chip {
  border: 1px solid #c4d2e8 !important;
  border-radius: 999px !important;
  background: linear-gradient(to bottom, #ffffff, #eef3fb) !important;
  color: #5b6d8e !important;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 5px rgba(100,120,180,.10) !important;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

body.b2 .b2-toolrow__chip:not(.is-on):is(:hover, :focus-visible) {
  transform: translateY(1px);
  border-color: #b4c3dc !important;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc) !important;
  color: var(--pp-accent) !important;
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18) !important;
}

body.b2 .b2-toolrow__chip.is-on,
body.b2 .b2-toolrow__chip.is-on:is(:hover, :focus-visible) {
  border-color: transparent !important;
  background: var(--pp-grad-accent) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(119,88,186,.28), inset 0 1px 0 rgba(255,255,255,.25) !important;
}

body.b2 .b2-toolrow__chip.is-on * { color: #fff !important; }

/* room inside the scrolling row so shadows are not cut off into a hard-edged band */

body.b2 .b2-toolrow { padding-top: 3px; padding-bottom: 8px; }

body.b2 .b2-toolrow__sep {
  background: linear-gradient(to bottom, rgba(180,195,220,0), #b4c3dc, rgba(180,195,220,0)) !important;
  border: 0 !important;
}

body.b2.dark .b2-toolrow__chip {
  border-color: #2a3a58 !important;
  background: linear-gradient(to bottom, #1a2742, #111a2e) !important;
  color: #b9c8e6 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 6px rgba(0,0,0,.35) !important;
}

body.b2.dark .b2-toolrow__chip:not(.is-on):is(:hover, :focus-visible) {
  border-color: #354a6f !important;
  background: linear-gradient(to bottom, #0d1524, #121c2f) !important;
  color: #8fb2ff !important;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.4) !important;
}

body.b2.dark .b2-toolrow__chip.is-on,
body.b2.dark .b2-toolrow__chip.is-on:is(:hover, :focus-visible) {
  background: var(--pp-grad-accent) !important;
  color: #fff !important;
  box-shadow: 0 5px 12px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.2) !important;
}

body.b2.dark .b2-toolrow__sep {
  background: linear-gradient(to bottom, rgba(42,58,88,0), #2a3a58, rgba(42,58,88,0)) !important;
}

/* scroll arrows */

body.b2 .b2-toolwrap__arrow {
  border: 1px solid #c4d2e8 !important;
  border-radius: 999px !important;
  background: linear-gradient(to bottom, #ffffff, #eef3fb) !important;
  color: #5b6d8e !important;
  box-shadow: 0 2px 8px rgba(100,120,180,.2) !important;
}

body.b2.dark .b2-toolwrap__arrow {
  border-color: #2a3a58 !important;
  background: linear-gradient(to bottom, #1a2742, #111a2e) !important;
  color: #b9c8e6 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.5) !important;
}

/* section bands (PINNED / ALL TOPICS) */

body.b2 .b2-tl__sec {
  border: 0 !important;
  border-bottom: 1px solid var(--pp-border) !important;
  background: linear-gradient(to bottom, #f6f9fe, #edf2fb) !important;
  color: #6b7a96 !important;
  font-weight: 900;
  letter-spacing: .14em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

body.b2 .b2-tl__sec i { color: var(--pp-accent) !important; }

body.b2.dark .b2-tl__sec {
  border-bottom-color: #22314d !important;
  background: linear-gradient(to bottom, rgba(26,39,66,.85), rgba(17,26,46,.65)) !important;
  color: #8fa3c7 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

body.b2.dark .b2-tl__sec i { color: #8fb2ff !important; }

/* empty state */

body.b2 .fs-empty { color: #7b8aa6; }

body.b2 .fs-empty :is(h2, h3, strong, b) { color: #354867 !important; }

body.b2 .fs-empty :is(i, svg) { color: #b4c3dc !important; }

body.b2.dark .fs-empty { color: #8fa3c7; }

body.b2.dark .fs-empty :is(h2, h3, strong, b) { color: #dbe6ff !important; }

body.b2.dark .fs-empty :is(i, svg) { color: #3a4f7a !important; }

/* ============================================
   15. TOPIC VIEW / REPLIES
   ============================================ */

body.b2 .topic-header {
  margin-bottom: 16px;
  padding: 22px 22px 18px;
  border: 1px solid #cbd8ec;
  border-radius: 18px;
  background: linear-gradient(135deg, #f8fbff, #eef4fb);
  box-shadow: 0 10px 24px rgba(100,120,180,.10);
}

body.b2.dark .topic-header {
  border-color: #26344c;
  background: linear-gradient(135deg, #111b2e, #08101d);
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
}

body.b2 .topic-header__title-row {
  align-items: center;
  gap: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.b2 .topic-header h1 { color: #354867; font-size: 22px; font-weight: 900; letter-spacing: -.02em; }

body.b2.dark .topic-header h1 { color: #eef4ff; }

body.b2 .topic-header__actions { gap: 8px; }

body.b2 .topic-header__actions .btn,
body.b2 .topic-header__actions button,
body.b2 .topic-header__actions a {
  border: 1px solid #c4d2e8;
  border-radius: 10px;
  background: rgba(255,255,255,.65);
  color: var(--pp-heading-2);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}

body.b2 .topic-header__actions .btn:hover,
body.b2 .topic-header__actions button:hover,
body.b2 .topic-header__actions a:hover {
  transform: translateY(-2px);
  border-color: rgba(119,88,186,.35);
  background: rgba(255,255,255,.9);
  color: var(--pp-accent);
}

body.b2.dark .topic-header__actions .btn,
body.b2.dark .topic-header__actions button,
body.b2.dark .topic-header__actions a {
  border-color: #273650;
  background: rgba(8,13,23,.35);
  color: #dbeafe;
  box-shadow: none;
}

body.b2.dark .topic-header__actions .btn:hover,
body.b2.dark .topic-header__actions button:hover,
body.b2.dark .topic-header__actions a:hover {
  border-color: rgba(143,178,255,.45);
  background: rgba(18,27,44,.72);
  color: #8fb2ff;
}

body.b2 .topic-author-row {
  margin-top: 18px;
  padding: 14px 18px;
  border-top: 1px solid rgba(200,212,228,.45);
  border-radius: 12px;
  background: rgba(255,255,255,.38);
  color: #657796;
}

body.b2 .topic-author-row a { font-weight: 800; }

body.b2 .topic-author-row time, body.b2 .topic-author-row span { color: #657796; }

body.b2.dark .topic-author-row {
  border-top-color: rgba(38,52,76,.65);
  background: rgba(8,13,23,.28);
  color: #aebbd3;
}

body.b2.dark .topic-author-row time, body.b2.dark .topic-author-row span { color: #aebbd3; }

body.b2 .topic-view .panel.topic, body.b2 .topic .panel {
  background: var(--pp-surface);
  border-radius: 16px;
  overflow: hidden;
}

body.b2 .topic-view .panel.topic,
body.b2 .topic-view .panel.topic > .panel__content,
body.b2 .topic-view .panel.topic > .panel__content--flush {
  padding: 0;
}

body.b2 .topic-view .panel__content, body.b2 .topic-view .panel__content--flush {
  background: transparent;
}

body.b2 .reply { margin: 0; }

body.b2 .reply .reply__main, body.b2 .reply .reply__content {
  background: var(--pp-surface);
  color: var(--pp-text);
  box-shadow: none;
}

body.b2 .reply .reply__details, body.b2 .reply__actions {
  background: var(--pp-surface-2);
  border-color: var(--pp-border-soft);
  color: var(--pp-muted);
}

body.b2 .reply .reply__user {
  background: var(--pp-surface-3);
  border-right: 1px solid var(--pp-border-soft);
  border-radius: 0;
}

body.b2 .reply .mini-profile, body.b2 .topic-view .mini-profile {
  background: transparent;
  border: 0;
  box-shadow: none;
}

body.b2 .topic .replies > :not([hidden]) ~ :not([hidden]) { border-color: var(--pp-border-soft); }

body.b2 .separator { background: linear-gradient(to bottom, #e2eaf7, #f2f6fc); }

body.b2.dark .separator { background: linear-gradient(to bottom, #1e2a3e, #192336); }

body.b2 .usertitle { color: var(--pp-muted); }

body.b2 .signature { border-top-color: #e2eaf7; color: var(--pp-faint); }

body.b2 .editby { color: var(--pp-faint); }

body.b2 .panel.topic .moderator-actions, body.b2 .moderator-actions {
  margin: 0;
  padding: 14px 22px 0;
  border-top: 1px solid rgba(200,212,228,.65);
  background: linear-gradient(180deg, rgba(248,251,255,.55), rgba(238,244,251,.85));
}

body.b2.dark .moderator-actions {
  border-top-color: #273650;
  background: linear-gradient(180deg, rgba(17,26,43,.82), rgba(8,13,23,.55));
}

body.b2 .panel.topic .moderator-actions__form select {
  height: 36px;
  min-width: 260px;
  padding: 0 14px;
  border: 1px solid var(--pp-border);
  border-radius: 10px;
  background: var(--pp-surface);
  color: var(--pp-heading-2);
  font-size: 13px;
  font-weight: 700;
}

body.b2 .panel.topic .moderator-actions__group {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 10px 10px;
}

body.b2 .panel.topic .moderator-actions__group .btn {
  height: 36px;
  padding: 0 14px;
  border-radius: 10px;
}

/* ============================================
   16. QUICK REPLY
   ============================================ */

body.b2 .quick-reply-wrap { margin-top: 22px; }

body.b2 .quick-reply-wrap .panel {
  border: 1px solid var(--pp-border);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(100,120,180,.08);
}

body.b2.dark .quick-reply-wrap .panel { box-shadow: 0 12px 30px rgba(0,0,0,.22); }

body.b2 .quick-reply-wrap .panel__title { padding: 16px 20px; }

body.b2 .quick-reply-wrap .panel__content,
body.b2 .quick-reply-wrap .panel__content--flush {
  padding: 22px;
  border: 0;
  background: transparent;
}

body.b2 .quick-reply-wrap .panel__footer { display: none; }

body.b2 .quick-reply-wrap .quick-reply__user {
  padding-right: 18px;
  border-right: 0;
  background: transparent;
}

body.b2 .quick-reply-wrap .quick-reply__actions {
  margin-top: 22px;
  padding-top: 22px;
  background: transparent;
}

/* ============================================
   17. QUICK REPLY / COMPOSER (b2-composer) — matches posts
   ============================================ */

body.b2 .b2-composer {
  overflow: hidden;
  border: 1px solid var(--pp-border);
  border-radius: 12px;
  background: linear-gradient(to bottom, #fcfdff, #f2f6fc);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 10px 26px rgba(100,120,180,.16), 0 2px 6px rgba(100,120,180,.08);
}

body.b2 .b2-composer::before { opacity: .9; }

body.b2.dark .b2-composer {
  border-color: #22314d;
  background: linear-gradient(to bottom, #15203a, #0e1626);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 28px rgba(0,0,0,.42), 0 2px 6px rgba(0,0,0,.30);
}

/* header bar */

body.b2 .b2-composer__head {
  padding-top: 16px;
  border-bottom: 1px solid var(--pp-border) !important;
  background: linear-gradient(to bottom, #f6f9fe, #edf2fb) !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.7);
}

body.b2.dark .b2-composer__head {
  border-bottom-color: #22314d !important;
  background: linear-gradient(to bottom, rgba(26,39,66,.85), rgba(17,26,46,.65)) !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.03);
}

body.b2 .b2-composer__avatar img, body.b2 img.b2-composer__avatar {
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff, 0 3px 8px rgba(100,120,180,.3);
}

body.b2.dark .b2-composer__avatar img, body.b2.dark img.b2-composer__avatar {
  box-shadow: 0 0 0 2px #1d2a44, 0 3px 8px rgba(0,0,0,.5);
}

body.b2 .b2-composer__title { color: #354867 !important; font-weight: 900; letter-spacing: -.01em; }

body.b2.dark .b2-composer__title { color: #eef4ff !important; }

body.b2 .b2-composer__hint { color: #657796; }

body.b2.dark .b2-composer__hint { color: #8fa3c7; }

body.b2 .b2-composer__hint :is(kbd, [class*="key"]) {
  border: 1px solid #c4d2e8;
  border-radius: 6px;
  background: linear-gradient(to bottom, #ffffff, #eef3fb);
  color: #5b6d8e;
  font-weight: 800;
}

body.b2.dark .b2-composer__hint :is(kbd, [class*="key"]) {
  border-color: #2a3a58;
  background: linear-gradient(to bottom, #1a2742, #111a2e);
  color: #b9c8e6;
}

/* editor box */

body.b2 .b2-composer .tiptap-wrap {
  overflow: hidden;
  border: 1px solid #c8d6ea !important;
  border-radius: 12px !important;
  background: #fbfcff !important;
  box-shadow: inset 0 2px 5px rgba(100,120,180,.10) !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}

body.b2 .b2-composer .tiptap-wrap:focus-within {
  border-color: #8aa2e0 !important;
  box-shadow: 0 0 0 3px rgba(95,130,217,.18), inset 0 2px 5px rgba(100,120,180,.08) !important;
}

/* swatches keep their inline colours, so they stay out of these toolbar rules */
body.b2 .b2-composer .tiptap-wrap :is([class*="toolbar"], [class*="menu"]):not([class*="item"]):not([class*="swatch"]) {
  border-bottom: 1px solid #d3dded !important;
  background: linear-gradient(to bottom, #f6f9fe, #edf2fb) !important;
}

body.b2 .b2-composer .tiptap-wrap :is([class*="toolbar"], [class*="menu"]) :is(button, [role="button"]) {
  border-radius: 8px;
  color: #5b6d8e;
}

body.b2 .b2-composer .tiptap-wrap :is([class*="toolbar"], [class*="menu"]) :is(button, [role="button"]):hover {
  color: var(--pp-accent);
}

body.b2.dark .b2-composer .tiptap-wrap {
  border-color: #22314d !important;
  background: #0d1524 !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.45) !important;
}

body.b2.dark .b2-composer .tiptap-wrap:focus-within {
  border-color: #4c6ec4 !important;
  box-shadow: 0 0 0 3px rgba(95,130,217,.25), inset 0 2px 6px rgba(0,0,0,.4) !important;
}

body.b2.dark .b2-composer .tiptap-wrap :is([class*="toolbar"], [class*="menu"]):not([class*="item"]):not([class*="swatch"]) {
  border-bottom-color: #22314d !important;
  background: linear-gradient(to bottom, #1a2742, #111a2e) !important;
}

body.b2.dark .b2-composer .tiptap-wrap :is([class*="toolbar"], [class*="menu"]) :is(button, [role="button"]) {
  color: #b9c8e6;
}

body.b2.dark .b2-composer .tiptap-wrap :is([class*="toolbar"], [class*="menu"]) :is(button, [role="button"]):hover {
  color: #8fb2ff;
}

/* footer: fading divider, Attach File pill, Post Reply gradient button */

body.b2 .b2-composer__foot {
  border-top: 1px solid transparent !important;
  border-image: linear-gradient(to right, var(--pp-border), rgba(200,212,228,0)) 1 !important;
}

body.b2.dark .b2-composer__foot {
  border-image: linear-gradient(to right, #22314d, rgba(34,49,77,0)) 1 !important;
}

body.b2 .b2-composer .attachment-upload :is(button, label, a, .btn) {
  border: 1px solid #c4d2e8 !important;
  border-radius: 999px !important;
  background: linear-gradient(to bottom, #ffffff, #eef3fb) !important;
  color: #5b6d8e !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 5px rgba(100,120,180,.10) !important;
}

body.b2 .b2-composer .attachment-upload :is(button, label, a, .btn):hover {
  transform: translateY(1px);
  border-color: #b4c3dc !important;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc) !important;
  color: var(--pp-accent) !important;
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18) !important;
}

body.b2.dark .b2-composer .attachment-upload :is(button, label, a, .btn) {
  border-color: #2a3a58 !important;
  background: linear-gradient(to bottom, #1a2742, #111a2e) !important;
  color: #b9c8e6 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 6px rgba(0,0,0,.35) !important;
}

body.b2.dark .b2-composer .attachment-upload :is(button, label, a, .btn):hover {
  border-color: #354a6f !important;
  background: linear-gradient(to bottom, #0d1524, #121c2f) !important;
  color: #8fb2ff !important;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.4) !important;
}

body.b2 .quick-reply__buttons :is(button, .btn)[type="submit"],
body.b2 .quick-reply__buttons .btn-primary {
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: var(--pp-grad-accent) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(119,88,186,.34), inset 0 1px 0 rgba(255,255,255,.28) !important;
}

body.b2 .quick-reply__buttons :is(button, .btn)[type="submit"]:is(:hover, :focus-visible),
body.b2 .quick-reply__buttons .btn-primary:is(:hover, :focus-visible) {
  transform: translateY(1px) !important;
  background: linear-gradient(135deg, #6a8be0, #9776e0) !important;
  color: #fff !important;
  box-shadow: inset 0 3px 6px rgba(60,40,130,.22), inset 0 1px 2px rgba(60,40,130,.14) !important;
}

body.b2.dark .quick-reply__buttons :is(button, .btn)[type="submit"]:is(:hover, :focus-visible),
body.b2.dark .quick-reply__buttons .btn-primary:is(:hover, :focus-visible) {
  box-shadow: inset 0 3px 7px rgba(0,0,0,.35), inset 0 1px 2px rgba(0,0,0,.25) !important;
}

/* composer toolbar: only the bar itself gets the gradient/border, not each button group */

body.b2 .b2-composer .tiptap-wrap :is([class*="toolbar"], [class*="menu"]) :is([class*="toolbar"], [class*="menu"], [class*="group"], [class*="item"], [class*="btn"], [class*="button"]):not([class*="dropdown"]):not([class*="popover"]):not([class*="panel"]):not(button):not([role="button"]) {
  border: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.b2 .b2-composer .tiptap-wrap :is([class*="toolbar"], [class*="menu"]) :is(button, [role="button"]):not([class*="swatch"]) {
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.b2 .b2-composer .tiptap-wrap :is([class*="toolbar"], [class*="menu"]) :is(button, [role="button"]):not([class*="swatch"]):is(:hover, :focus-visible, [aria-pressed="true"], .is-active, [class*="active"]) {
  border-color: #b4c3dc !important;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc) !important;
  color: var(--pp-accent);
  box-shadow: inset 0 2px 4px rgba(100,120,180,.22) !important;
}

body.b2.dark .b2-composer .tiptap-wrap :is([class*="toolbar"], [class*="menu"]) :is(button, [role="button"]):not([class*="swatch"]):is(:hover, :focus-visible, [aria-pressed="true"], .is-active, [class*="active"]) {
  border-color: #354a6f !important;
  background: linear-gradient(to bottom, #0d1524, #121c2f) !important;
  color: #8fb2ff;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.5) !important;
}

/* ============================================
   18. BUTTONS (pressed-in hover everywhere)
   ============================================ */

body.b2 .btn { text-transform: uppercase; letter-spacing: .08em; font-weight: 900; }

body.b2 .btn.btn-sm { letter-spacing: .04em; }

body.b2 .btn-primary, body.b2 .btn-secondary {
  margin-top: 5px;
  margin-bottom: 5px;
  border: 1px solid var(--pp-border);
  border-radius: 10px;
  background: var(--pp-btn-bg);
  color: var(--pp-btn-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 8px rgba(100,120,180,.06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease, background .15s ease;
}

body.b2.dark .btn-primary, body.b2.dark .btn-secondary {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 3px 10px rgba(0,0,0,.22);
}

body.b2 .btn-primary:is(:hover, :focus), body.b2 .btn-secondary:is(:hover, :focus) {
  transform: translateY(1px);
  border-color: #b4c3dc;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc);
  color: var(--pp-accent);
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18);
}

body.b2 .btn-primary:active, body.b2 .btn-secondary:active {
  transform: translateY(2px);
  box-shadow: inset 0 4px 9px rgba(100,120,180,.36), inset 0 1px 3px rgba(100,120,180,.22);
}

body.b2.dark .btn-primary:is(:hover, :focus),
body.b2.dark .btn-secondary:is(:hover, :focus) {
  border-color: #354a6f;
  background: linear-gradient(to bottom, #0d1524, #121c2f);
  color: #8fb2ff;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.40);
}

body.b2.dark .btn-primary:active, body.b2.dark .btn-secondary:active {
  box-shadow: inset 0 4px 10px rgba(0,0,0,.65), inset 0 1px 3px rgba(0,0,0,.45);
}

body.b2 .btn-primary:disabled { cursor: not-allowed; opacity: .5; }

body.b2 .btn-primary:disabled:hover, body.b2 .btn-secondary:disabled:hover {
  transform: none;
  box-shadow: none;
}

/* Small buttons */

body.b2 .btn-sm, body.b2 .post-actions .btn, body.b2 .post-controls .btn {
  height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 10px;
}

body.b2 button.btn.btn-secondary.btn-sm.inline-flex.items-center.space-x-1 {
  height: 28px;
  padding: 0 7px;
  gap: 3px;
  letter-spacing: .04em;
}

/* Call-to-action rows */

body.b2 .topic-cta, body.b2 .forum-actions { display: flex; flex-wrap: wrap; gap: 12px; }

body.b2 .topic-cta .btn, body.b2 .forum-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  padding: 0 22px;
  border-radius: 12px;
  font-size: 11px;
}

/* Forced pressed-in hover for any .btn (other rules were winning this) */

body.b2 :is(a, button)[class*="btn"]:is(:hover, :focus-visible),
body.b2 :is(a, button)[class*="new-topic"]:not([class*="widget-"]):hover,
body.b2 :is(a, button)[class*="newtopic"]:not([class*="widget-"]):hover,
body.b2 :is(a, button)[class*="new_topic"]:not([class*="widget-"]):hover,
body.b2 [class*="b2-fhead__new"]:hover,
body.b2 [class*="b2-fhead__cta"]:hover,
body.b2 [class*="b2-fhead__primary"]:hover,
body.b2 [class*="b2-forum-actions"] :is(a, button):hover {
  transform: translateY(1px) !important;
  border: 1px solid #b4c3dc !important;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc) !important;
  color: var(--pp-accent) !important;
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18) !important;
  outline: 0 !important;
  filter: none !important;
}

body.b2.dark :is(a, button)[class*="btn"]:is(:hover, :focus-visible),
body.b2.dark :is(a, button)[class*="new-topic"]:not([class*="widget-"]):hover,
body.b2.dark :is(a, button)[class*="newtopic"]:not([class*="widget-"]):hover,
body.b2.dark :is(a, button)[class*="new_topic"]:not([class*="widget-"]):hover,
body.b2.dark [class*="b2-fhead__new"]:hover,
body.b2.dark [class*="b2-fhead__cta"]:hover,
body.b2.dark [class*="b2-fhead__primary"]:hover,
body.b2.dark [class*="b2-forum-actions"] :is(a, button):hover {
  border: 1px solid #354a6f !important;
  background: linear-gradient(to bottom, #0d1524, #121c2f) !important;
  color: #8fb2ff !important;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.40) !important;
}

/* ============================================
   19. FORMS / INPUTS
   ============================================ */

body.b2 input[type=text],
body.b2 input[type=email],
body.b2 input[type=password],
body.b2 input[type=search],
body.b2 textarea,
body.b2 select,
body.b2 .shoutbox-input {
  background-color: var(--pp-input);
  border: 1px solid var(--pp-border-soft);
  border-radius: 10px;
  color: var(--pp-text);
}

body.b2 input::placeholder, body.b2 textarea::placeholder { color: #8b9ab4; }

body.b2.dark input::placeholder, body.b2.dark textarea::placeholder { color: #64748b; }

body.b2 input:focus, body.b2 textarea:focus, body.b2 select:focus {
  border-color: #8c6ad9;
  box-shadow: 0 0 0 3px rgba(140,106,217,.12);
  outline: 0;
}

body.b2 .formrow { box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }

body.b2.dark .formrow { box-shadow: none; }

body.b2 .formrow > :not([hidden]) ~ :not([hidden]) { border-color: var(--pp-border-soft); }

body.b2 .formrow > div:first-child { background-color: rgba(238,244,251,.55); }

body.b2 .formrow > div:last-child { background-color: rgba(255,255,255,.28); }

body.b2.dark .formrow > div:first-child { background-color: rgba(8,13,23,.22); }

body.b2.dark .formrow > div:last-child { background-color: rgba(8,13,23,.08); }

/* Create-topic page */

body.b2 .page-topics-create .panel > .panel__content,
body.b2 .page-topics-create .panel > .panel__content--flush {
  padding: 0;
  border: 0;
}

body.b2 .page-topics-create .item-list { margin: 0; padding: 0; }

body.b2 .page-topics-create .formrow {
  min-height: 72px;
  padding-left: 0;
  margin-left: 0;
  width: 100%;
  max-width: 100%;
}

body.b2 .page-topics-create .formrow > div:first-child {
  padding-left: 16px;
  border-right: 1px solid var(--pp-border-card);
}

body.b2 .page-topics-create .input-label,
body.b2 .page-topics-create .formrow > div:first-child label {
  color: #4f6285;
  font-size: 13px;
  font-weight: 700;
  background: transparent;
}

body.b2.dark .page-topics-create .input-label,
body.b2.dark .page-topics-create .formrow > div:first-child label {
  color: #b7c5dc;
}

body.b2 .page-topics-create .panel__sub-header {
  padding: 10px 18px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6c7d99;
  background: linear-gradient(to bottom, rgba(230,236,246,.85), rgba(222,229,240,.75));
  border-top: 1px solid #d6deea;
  border-bottom: 1px solid #d6deea;
}

body.b2.dark .page-topics-create .panel__sub-header {
  color: #9eb0ca;
  border-color: #273650;
  background: linear-gradient(to bottom, rgba(19,29,46,.92), rgba(14,22,36,.88));
}

body.b2 .page-topics-create .editor,
body.b2 .page-topics-create .editor-container,
body.b2 .page-topics-create .tiptap-editor {
  width: 100%;
  max-width: none;
}

body.b2 .page-topics-create .panel__actions { border-top: 1px solid var(--pp-border-card); }

/* Search page */

body.b2 .page-search .panel--search > .panel__content,
body.b2 .page-search .panel--search > .panel__content--flush {
  padding: 0;
  margin: 0;
  border: 0;
}

body.b2 .page-search .search-input {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
  padding: 16px;
  margin: 0;
}

body.b2 .page-search .search-input input, body.b2 .page-search .search-input select {
  width: 100%;
  height: 42px;
  border-radius: 10px;
}

body.b2 .page-search .panel--search > .panel__actions {
  margin: 0;
  padding: 14px 16px 16px;
  background: var(--pp-surface-2);
}

body.b2 .page-search .panel--search .btn {
  height: 34px;
  min-width: 100px;
  padding: 0 18px;
  border-radius: 8px;
}

/* ============================================
   20. BADGES, PAGINATION, REACTIONS, ETC.
   ============================================ */

body.b2 .badge { background-color: #ccdbf1; color: #4059ad; }

body.b2.dark .badge { background: var(--pp-surface-2); color: #8fb2ff; }

body.b2 .pagination-link {
  background-color: var(--pp-surface);
  border: 1px solid #ccdbf1;
  color: #5a6a82;
}

body.b2 .pagination-link:hover { background-color: var(--pp-surface-2); border-color: #a8c4e8; }

body.b2 .pagination-link--current {
  background-color: var(--pp-surface-2);
  color: #4059ad;
  font-weight: bold;
}

body.b2.dark .pagination-link {
  background: var(--pp-surface-2);
  border-color: var(--pp-border);
  color: #8fb2ff;
}

body.b2.dark .pagination-link:hover, body.b2.dark .pagination-link--current { background: #1e2a42; }

body.b2 .reactions__reaction { background-color: var(--pp-surface-3); border: 1px solid #ccdbf1; }

body.b2 .reactions__reaction:hover { background-color: #e2eaf7; }

body.b2 .reactions__reaction--reacted { background-color: #fef9ec; border-color: #f8d98f; }

body.b2 .reaction-picker__toggle { border-color: #ccdbf1; background-color: var(--pp-surface-3); }

body.b2.dark .reactions__reaction, body.b2.dark .reaction-picker__toggle {
  background: var(--pp-surface-2);
  border-color: var(--pp-border);
  color: #8fb2ff;
}

body.b2.dark .reactions__reaction:hover { background: #1e2a42; }

body.b2.dark .reactions__reaction--reacted { background: #2a1e08; border-color: #6a4a10; }

body.b2 .shoutbox { background-color: var(--pp-surface); }

body.b2 .shoutbox-input-container { background-color: var(--pp-surface-3); border-top-color: #ccdbf1; }

body.b2 .spoiler-header {
  background: linear-gradient(to bottom, #2f9a81, #51b69a);
  border-color: #2f9a81;
  color: #fff;
}

body.b2 .spoiler-content { background-color: #effaf6; border-color: #97d8c4; }

body.b2.dark .spoiler-header {
  background: linear-gradient(to bottom, #0d3028, #0f3a30);
  border-color: #1a8870;
}

body.b2.dark .spoiler-content { background-color: #12261f; border-color: #1a4a38; }

body.b2 .alert { border-color: #ccdbf1; background-color: var(--pp-surface-3); }

body.b2.dark .alert { border-color: var(--pp-border); background: var(--pp-surface-3); }

body.b2 .best-answer { background-color: #effaf6; border-color: #b5e5d3; color: #1f6a5a; }

body.b2.dark .best-answer { background-color: #12261f; border-color: #1a4a38; color: #38c4a0; }

body.b2 .progress-bar { background: linear-gradient(to right, #4c6ec4, #6087d1); border-color: #4c6ec4; }

body.b2 .poll .option__label { background-color: var(--pp-surface-2); }

body.b2.dark .progress-bar-container { background-color: #243050; }

body.b2 .data-grid__header { background: linear-gradient(to bottom, #e2eaf7, #eef2f9); color: #6878a0; }

body.b2.dark .data-grid__header { background: var(--pp-surface-2); color: #94a3b8; }

body.b2 .data-grid > :not([hidden]) ~ :not([hidden]),
body.b2 .data-grid__row > :not([hidden]) ~ :not([hidden]),
body.b2 .item-list > :not([hidden]) ~ :not([hidden]),
body.b2 .profile-grid > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--pp-border-soft);
}

body.b2 .profile-grid > div:first-child { background-color: var(--pp-surface-2); color: #6878a0; }

body.b2 .profile-grid > div:last-child { background-color: var(--pp-surface); }

body.b2.dark .profile-grid > div:first-child { background: var(--pp-surface-2); color: #94a3b8; }

body.b2.dark .profile-grid > div:last-child { background: var(--pp-surface-3); color: var(--pp-text); }

body.b2 .guest-layout { background-color: #e8edf5; }

body.b2 .guest-layout__container {
  background-color: var(--pp-surface);
  border: 1px solid #ccdbf1;
  border-radius: 8px;
}

body.b2.dark .guest-layout { background-color: #0f1520; }

body.b2.dark .guest-layout__container { background-color: #1e2a3e; border-color: var(--pp-border); }

/* ============================================
   21. DROPDOWNS + NOTIFICATIONS
   ============================================ */

body.b2 .dropdown__content,
body.b2 .notification,
body.b2 .notifications .dropdown__content {
  color: var(--pp-text);
}

body.b2 .dropdown__link:hover, body.b2 .notification:hover { background-color: var(--pp-surface-2); }

body.b2 .notifications__list > :not([hidden]) ~ :not([hidden]) { border-color: var(--pp-border-soft); }

body.b2 .notifications__actions { border-top-color: var(--pp-border-soft); }

body.b2.dark .dropdown__link:hover, body.b2.dark .notification:hover { background: var(--pp-surface-2); }

body.b2.dark .notifications__actions { border-color: var(--pp-border-soft); }

/* Notifications dropdown: tabs (All / Unread) use the theme gradient instead of green */

body.b2 .na-tabs {
  gap: 4px;
  padding: 3px;
  border: 1px solid #d3dded;
  border-radius: 999px;
  background: linear-gradient(to bottom, #eef3fc, #f7f9fe);
  box-shadow: inset 0 1px 3px rgba(100,120,180,.14);
}

body.b2 .na-tabs > button {
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #6b7a96 !important;
  font-weight: 800;
  box-shadow: none !important;
  transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}

body.b2 .na-tabs > button:not(.na-tabs__on):is(:hover, :focus-visible) {
  color: var(--pp-accent) !important;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc) !important;
  box-shadow: inset 0 2px 4px rgba(100,120,180,.22) !important;
}

body.b2 .na-tabs > button.na-tabs__on,
body.b2 .na-tabs > button.na-tabs__on:is(:hover, :focus-visible) {
  background: var(--pp-grad-accent) !important;
  color: #fff !important;
  box-shadow: 0 4px 10px rgba(119,88,186,.28), inset 0 1px 0 rgba(255,255,255,.25) !important;
}

body.b2.dark .na-tabs {
  border-color: #22314d;
  background: linear-gradient(to bottom, #0d1524, #121c2f);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.45);
}

body.b2.dark .na-tabs > button { color: #9db4ea !important; }

body.b2.dark .na-tabs > button:not(.na-tabs__on):is(:hover, :focus-visible) {
  color: #8fb2ff !important;
  background: linear-gradient(to bottom, #0a111d, #0f1828) !important;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.5) !important;
}

/* user menu dropdown: readable items, theme card, soft pressed hover */

body.b2 .dropdown__content-wrapper .dropdown__content {
  padding: 6px;
  border: 1px solid #c8d6ea !important;
  border-radius: 12px !important;
  background: linear-gradient(to bottom, #ffffff, #f2f6fc) !important;
  box-shadow: 0 14px 30px rgba(100,120,180,.28), 0 2px 6px rgba(100,120,180,.12) !important;
}

body.b2.dark .dropdown__content-wrapper .dropdown__content {
  border-color: #2a3a58 !important;
  background: linear-gradient(to bottom, #15203a, #0e1626) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.4) !important;
}

body.b2 .dropdown__content :is(.dropdown__link, a:not(.notification):not([class*="na-"]), button.dropdown__link) {
  border: 1px solid transparent;
  border-radius: 8px;
  color: #354867 !important;
  font-weight: 400 !important;
  opacity: 1 !important;
  transition: background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}

body.b2 .dropdown__content :is(.dropdown__link, a:not(.notification):not([class*="na-"])):is(:hover, :focus-visible) {
  border-color: #b4c3dc;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc) !important;
  color: var(--pp-accent) !important;
  box-shadow: inset 0 2px 5px rgba(100,120,180,.22);
}

body.b2.dark .dropdown__content :is(.dropdown__link, a:not(.notification):not([class*="na-"]), button.dropdown__link) {
  color: #dbe6ff !important;
}

body.b2.dark .dropdown__content :is(.dropdown__link, a:not(.notification):not([class*="na-"])):is(:hover, :focus-visible) {
  border-color: #354a6f;
  background: linear-gradient(to bottom, #0d1524, #121c2f) !important;
  color: #8fb2ff !important;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.5);
}

body.b2 .dropdown__content :is(.dropdown__link, a) :is(i, svg) {
  color: var(--pp-accent) !important;
  opacity: 1 !important;
}

body.b2.dark .dropdown__content :is(.dropdown__link, a) :is(i, svg) { color: #8fb2ff !important; }

body.b2 .dropdown__separator {
  height: 1px;
  margin: 6px 4px;
  border: 0;
  background: linear-gradient(to right, var(--pp-border), rgba(200,212,228,0)) !important;
}

body.b2.dark .dropdown__separator {
  background: linear-gradient(to right, #2a3a58, rgba(42,58,88,0)) !important;
}

/* Messages / Notifications dropdown header */

body.b2 .dd-head {
  border-bottom: 1px solid transparent !important;
  border-image: linear-gradient(to right, var(--pp-border), rgba(200,212,228,0)) 1 !important;
}

body.b2 .dd-head__title { color: #354867 !important; letter-spacing: -.01em; opacity: 1 !important; }

body.b2.dark .dd-head {
  border-image: linear-gradient(to right, #2a3a58, rgba(42,58,88,0)) 1 !important;
}

body.b2.dark .dd-head__title { color: #eef4ff !important; }

body.b2 .notifications__list :is(.empty, [class*="empty"], p, em, i):not(.notification) {
  color: #7b8aa6;
}

body.b2.dark .notifications__list :is(.empty, [class*="empty"], p, em, i):not(.notification) {
  color: #9db4ea;
}

/* Notifications tabs: active label stays white in dark mode too */

body.b2.dark .na-tabs > button.na-tabs__on,
body.b2.dark .na-tabs > button.na-tabs__on:is(:hover, :focus-visible) {
  background: var(--pp-grad-accent) !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(30,20,80,.45);
  box-shadow: 0 4px 10px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.25) !important;
}

/* user menu: regular weight everywhere (links, labels, credits) */

body.b2 .dropdown__content-wrapper .dropdown__content :is(a, button, span, b, strong, .dropdown__link) {
  font-weight: 400 !important;
}

/* ============================================
   22. CODE BLOCKS
   ============================================ */

body.b2 pre.code-block {
  margin: 14px 0;
  padding: 0;
  overflow-x: auto;
  border: 1px solid #c7d3e8;
  border-radius: 16px;
  background: linear-gradient(180deg, #f8fbff, #edf3fb);
  box-shadow: 0 10px 24px rgba(100,120,180,.08);
}

body.b2 pre.code-block::before {
  content: "CODE";
  display: block;
  padding: 10px 16px 11px;
  border-bottom: 1px solid rgba(203,216,236,.65);
  background: rgba(95,130,217,.06);
  color: #6a7c99;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .14em;
}

body.b2 pre.code-block code {
  display: block;
  padding: 18px 22px 20px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #4d607f;
  font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: break-word;
}

body.b2 p code, body.b2 li code, body.b2 td code, body.b2 .inline-code {
  padding: 3px 7px;
  border: 1px solid #ccd8ec;
  border-radius: 7px;
  background: rgba(255,255,255,.72);
  color: #5c6e8f;
  font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
}

body.b2.dark pre.code-block {
  border-color: #26344c;
  background: linear-gradient(180deg, #111b2e, #08101d);
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
}

body.b2.dark pre.code-block::before {
  border-bottom-color: rgba(38,52,76,.85);
  background: rgba(95,130,217,.08);
  color: #aebbd3;
}

body.b2.dark pre.code-block code { color: #d8e4fb; }

body.b2.dark p code, body.b2.dark li code, body.b2.dark td code, body.b2.dark .inline-code {
  border-color: #2b3954;
  background: rgba(10,18,30,.75);
  color: #cddaf2;
}

/* ============================================
   23. MEMBERS PAGE
   ============================================ */

body.b2 .page-members .panel--members > .panel__title { padding: 16px 22px; }

body.b2 .page-members .panel--members > .panel__content,
body.b2 .page-members .panel--members > .panel__content--flush {
  padding: 24px 28px 34px;
  border: 0;
  background: transparent;
}

body.b2 .page-members .memberlist-filters {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) repeat(3, minmax(150px, 190px));
  gap: 14px;
  align-items: end;
  padding: 0 0 24px;
  margin: 0 0 28px;
}

body.b2 .page-members .memberlist-filter { display: grid; gap: 7px; min-width: 0; }

body.b2 .page-members .memberlist-filter label,
body.b2 .page-members .memberlist-filter span {
  margin: 0;
  color: #445674;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
}

body.b2 .page-members .memberlist-filter input,
body.b2 .page-members .memberlist-filter select {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--pp-border);
  border-radius: 12px;
  background: rgba(255,255,255,.82);
  color: #354867;
  font-size: 13px;
  font-weight: 700;
}

body.b2 .page-members .memberlist-filter--search { position: relative; }

body.b2 .page-members .memberlist-filter--search svg,
body.b2 .page-members .memberlist-filter--search .icon,
body.b2 .page-members .memberlist-filter--search i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  color: #8b9ab4;
  pointer-events: none;
}

body.b2 .page-members .memberlist-filter--search input { padding-left: 42px; }

body.b2 .page-members .memberlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

body.b2 .page-members .member-card {
  position: relative;
  padding: 26px 20px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body.b2 .page-members .member-card:hover { transform: translateY(-3px); }

body.b2 .page-members .member-card__avatar img,
body.b2 .page-members .member-card__avatar .avatar {
  width: 96px;
  height: 96px;
  border-radius: 24px;
  object-fit: cover;
  box-shadow: 0 10px 24px rgba(100,120,180,.20);
}

body.b2 .page-members .member-card__name {
  margin-top: 14px;
  color: #354867;
  font-size: 18px;
  font-weight: 900;
}

body.b2 .page-members .member-card__group {
  margin-top: 4px;
  color: var(--pp-accent);
  font-size: 12px;
  font-weight: 900;
}

body.b2 .page-members .member-card__stats { margin-top: 14px; gap: 14px; }

body.b2 .page-members .member-card__stat { color: #354867; font-weight: 900; }

body.b2 .page-members .member-card__stat-label, body.b2 .page-members .member-card__meta {
  color: #657796;
  font-size: 10px;
  text-transform: uppercase;
}

body.b2 .page-members .member-card__meta { margin-top: 12px; font-size: 11px; text-transform: none; }

body.b2 .page-members .member-card__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  padding: 9px 18px;
  font-size: 11px;
  font-weight: 900;
}

body.b2 .page-members .member-card__action:hover { transform: translateY(-2px); }

body.b2.dark .page-members .memberlist-filters { border-bottom-color: #273650; }

body.b2.dark .page-members .memberlist-filter label,
body.b2.dark .page-members .memberlist-filter span {
  color: #aebbd3;
}

body.b2.dark .page-members .memberlist-filter input,
body.b2.dark .page-members .memberlist-filter select {
  border-color: #273650;
  background: #0d1320;
  color: #eef4ff;
}

body.b2.dark .page-members .member-card__name { color: #eef4ff; }

body.b2.dark .page-members .member-card__group { color: #8fb2ff; }

body.b2.dark .page-members .member-card__stat { color: #dbeafe; }

body.b2.dark .page-members .member-card__stat-label,
body.b2.dark .page-members .member-card__meta {
  color: #aebbd3;
}

@media (max-width: 900px) {
  body.b2 .page-members .memberlist-filters { grid-template-columns: 1fr 1fr; }

  body.b2 .page-members .memberlist-filter--search { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  body.b2 .page-members .panel--members > .panel__content,
  body.b2 .page-members .panel--members > .panel__content--flush {
    padding: 18px 16px 28px;
  }

  body.b2 .page-members .memberlist-filters, body.b2 .page-members .memberlist-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body.b2 .page-members .memberlist-filter--search { grid-column: auto; }
}

/* ============================================
   24. MEMBERS PAGE polish (memberlist-*, member-card)
   ============================================ */

body.b2 .panel--members {
  border: 1px solid var(--pp-border) !important;
  border-radius: 12px !important;
  background: linear-gradient(to bottom, #fcfdff, #f2f6fc) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 10px 26px rgba(100,120,180,.16), 0 2px 6px rgba(100,120,180,.08) !important;
}

body.b2.dark .panel--members {
  border-color: #22314d !important;
  background: linear-gradient(to bottom, #15203a, #0e1626) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 28px rgba(0,0,0,.42), 0 2px 6px rgba(0,0,0,.30) !important;
}

/* filter bar */

body.b2 .memberlist-filters {
  gap: 10px;
  border-bottom: 1px solid transparent !important;
  border-image: linear-gradient(to right, var(--pp-border), rgba(200,212,228,0)) 1 !important;
  background: linear-gradient(to bottom, #f6f9fe, #edf2fb) !important;
}

body.b2.dark .memberlist-filters {
  border-image: linear-gradient(to right, #22314d, rgba(34,49,77,0)) 1 !important;
  background: linear-gradient(to bottom, rgba(26,39,66,.7), rgba(17,26,46,.5)) !important;
}

body.b2 .memberlist-filters :is(input, select) {
  border: 1px solid #c8d6ea !important;
  border-radius: 10px !important;
  background: #fbfcff !important;
  color: var(--pp-heading) !important;
  box-shadow: inset 0 2px 4px rgba(100,120,180,.10) !important;
}

body.b2 .memberlist-filters :is(input, select):focus {
  border-color: #8aa2e0 !important;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(95,130,217,.18), inset 0 2px 4px rgba(100,120,180,.08) !important;
}

body.b2.dark .memberlist-filters :is(input, select) {
  border-color: #22314d !important;
  background: #0d1524 !important;
  color: #e6eeff !important;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.45) !important;
}

body.b2.dark .memberlist-filters :is(input, select):focus {
  border-color: #4c6ec4 !important;
  box-shadow: 0 0 0 3px rgba(95,130,217,.25), inset 0 2px 5px rgba(0,0,0,.4) !important;
}

body.b2 .memberlist-filters label, body.b2 .memberlist-filters :is(span, legend) {
  color: #6b7a96;
  font-weight: 800;
}

body.b2.dark .memberlist-filters label, body.b2.dark .memberlist-filters :is(span, legend) {
  color: #8fa3c7;
}

/* member cards */

body.b2 .memberlist-grid { gap: 14px; }

body.b2 .member-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--pp-border) !important;
  border-radius: 12px !important;
  background: linear-gradient(to bottom, #ffffff, #f2f6fc) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 8px 20px rgba(100,120,180,.14), 0 2px 5px rgba(100,120,180,.08) !important;
  transition: border-color .18s ease, box-shadow .18s ease;
}

body.b2 .member-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 14px;
  border-radius: 11px 11px 0 0;
  background: var(--pp-grad-accent) top / 100% 3px no-repeat;
  opacity: .9;
  pointer-events: none;
}

body.b2 .member-card:hover {
  border-color: #b4c3dc !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 12px 26px rgba(100,120,180,.2), 0 2px 5px rgba(100,120,180,.1) !important;
}

body.b2.dark .member-card {
  border-color: #22314d !important;
  background: linear-gradient(to bottom, #172238, #101a2c) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 22px rgba(0,0,0,.4), 0 2px 5px rgba(0,0,0,.3) !important;
}

body.b2.dark .member-card:hover { border-color: #354a6f !important; }

body.b2 .member-card { padding-top: 24px !important; }

body.b2 .member-card__avatar :is(img, [class*="avatar"]) {
  border-radius: 50%;
  box-shadow: 0 0 0 3px #fff, 0 6px 16px rgba(100,120,180,.32);
}

body.b2.dark .member-card__avatar :is(img, [class*="avatar"]) {
  box-shadow: 0 0 0 3px #1d2a44, 0 6px 16px rgba(0,0,0,.5);
}

body.b2 .member-card__stats { color: #6b7a96; }

body.b2.dark .member-card__stats { color: #8fa3c7; }

body.b2 .member-card__meta { color: #8493ad; }

body.b2.dark .member-card__meta { color: #6f84a8; }

/* View Profile */

body.b2 .member-card__action {
  border: 1px solid #c4d2e8 !important;
  border-radius: 10px !important;
  background: linear-gradient(to bottom, #ffffff, #eef3fb) !important;
  color: #5b6d8e !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 5px rgba(100,120,180,.10) !important;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

body.b2 .member-card__action:is(:hover, :focus-visible) {
  transform: translateY(1px);
  border-color: #b4c3dc !important;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc) !important;
  color: var(--pp-accent) !important;
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18) !important;
}

body.b2.dark .member-card__action {
  border-color: #2a3a58 !important;
  background: linear-gradient(to bottom, #1a2742, #111a2e) !important;
  color: #9db4ea !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 6px rgba(0,0,0,.35) !important;
}

body.b2.dark .member-card__action:is(:hover, :focus-visible) {
  border-color: #354a6f !important;
  background: linear-gradient(to bottom, #0d1524, #121c2f) !important;
  color: #8fb2ff !important;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.4) !important;
}

/* Members filter dropdowns (customizable <select>) */

body.b2 .memberlist-filter__select, body.b2 .memberlist-filter__select::picker(select) {
  appearance: base-select;
}

body.b2 .memberlist-filter__select::picker-icon { color: #7758ba; transition: transform .15s ease; }

body.b2 .memberlist-filter__select:open::picker-icon { transform: rotate(180deg); }

body.b2.dark .memberlist-filter__select::picker-icon { color: #8fb2ff; }

body.b2 .memberlist-filter__select::picker(select) {
  margin-top: 6px;
  padding: 6px;
  border: 1px solid #c8d6ea;
  border-radius: 12px;
  background: linear-gradient(to bottom, #ffffff, #f2f6fc);
  box-shadow: 0 14px 30px rgba(100,120,180,.28), 0 2px 6px rgba(100,120,180,.12);
}

body.b2.dark .memberlist-filter__select::picker(select) {
  border-color: #2a3a58;
  background: linear-gradient(to bottom, #15203a, #0e1626);
  box-shadow: 0 16px 34px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.4);
}

body.b2 .memberlist-filter__select option {
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #354867;
  font-weight: 700;
}

body.b2 .memberlist-filter__select option:hover,
body.b2 .memberlist-filter__select option:focus-visible {
  border-color: #b4c3dc;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc);
  color: var(--pp-accent);
}

body.b2 .memberlist-filter__select option:checked {
  border-color: transparent;
  background: var(--pp-grad-accent);
  color: #fff;
}

body.b2 .memberlist-filter__select option::checkmark { color: #fff; }

body.b2.dark .memberlist-filter__select option { color: #dbe6ff; }

body.b2.dark .memberlist-filter__select option:hover,
body.b2.dark .memberlist-filter__select option:focus-visible {
  border-color: #354a6f;
  background: linear-gradient(to bottom, #0d1524, #121c2f);
  color: #8fb2ff;
}

body.b2.dark .memberlist-filter__select option:checked {
  border-color: transparent;
  background: var(--pp-grad-accent);
  color: #fff;
}

/* Firefox / Safari fallback: native list can't be fully styled, but colours can match the theme */

@supports not (appearance: base-select) {
  body.b2 .memberlist-filter__select { color-scheme: light; }

  body.b2.dark .memberlist-filter__select { color-scheme: dark; }

  body.b2 .memberlist-filter__select option {
    background-color: #f6f9fe;
    color: #354867;
    font-weight: 700;
  }

  body.b2.dark .memberlist-filter__select option { background-color: #121c2f; color: #dbe6ff; }

  body.b2 .memberlist-filter__select option:checked { background-color: #7758ba; color: #fff; }

  body.b2.dark .memberlist-filter__select option:checked { background-color: #4c6ec4; color: #fff; }
}

/* ============================================
   25. USERS ONLINE + WHAT'S NEW
   ============================================ */

body.b2 .page-users-online main > .panel {
  border: 1px solid var(--pp-border);
  border-radius: 16px;
  background: var(--pp-surface);
  box-shadow: 0 10px 24px rgba(100,120,180,.08);
}

body.b2 .page-users-online main > .panel > .panel__content,
body.b2 .page-users-online main > .panel > .panel__content--flush {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

body.b2 .page-users-online .online-tabs { padding: 18px 22px 0; border: 0; background: transparent; }

body.b2 .page-users-online .online-list,
body.b2 .page-users-online .online-list > *,
body.b2 .page-users-online .online-user,
body.b2 .page-users-online .online-user-card {
  border-color: #d7e1ef;
}

body.b2.dark .page-users-online .online-list,
body.b2.dark .page-users-online .online-list > *,
body.b2.dark .page-users-online .online-user,
body.b2.dark .page-users-online .online-user-card {
  border-color: #273650;
}

body.b2 .page-whats-new .panel__content, body.b2 .page-whats-new .panel__content--flush {
  border-top: 1px solid var(--pp-border);
  padding: 0;
}

body.b2 .page-whats-new .wn-mark-read-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  color: #354867;
  font-size: 11px;
  font-weight: 800;
  opacity: 1;
}

body.b2 .page-whats-new .wn-mark-read-btn:hover {
  background: rgba(255,255,255,.45);
  color: var(--pp-accent);
}

body.b2 .page-whats-new .wn-topic-list > * { transition: background .18s ease; }

body.b2 .page-whats-new .wn-topic-list > *:hover { background: rgba(255,255,255,.38); }

body.b2.dark .page-whats-new .wn-topic-list > * {
  background: linear-gradient(180deg, rgba(18,29,48,.92), rgba(10,18,32,.96));
  border-top: 1px solid rgba(255,255,255,.03);
}

body.b2.dark .page-whats-new .wn-topic-list > *::before { display: none; }

body.b2.dark .page-whats-new .wn-topic-list > *:hover {
  background: linear-gradient(180deg, rgba(28,42,68,.96), rgba(16,26,42,.98));
}

body.b2.dark .page-whats-new .wn-topic-list a { color: #dbeafe; }

body.b2.dark .page-whats-new .wn-topic-list { color: #94a7c6; }

body.b2.dark .page-whats-new .wn-mark-read-btn {
  background: linear-gradient(180deg, rgba(30,42,68,.88), rgba(17,26,43,.95));
  border-color: rgba(143,178,255,.18);
  color: #dbeafe;
}

/* ============================================
   26. ACTIVITY / WHAT'S NEW (.wn) — theme colours instead of green, card depth
   ============================================ */

/* title icon */

body.b2 .wn-head :is(h1, h2, h3, [class*="title"]) :is(i, svg) { color: var(--pp-accent) !important; }

body.b2.dark .wn-head :is(h1, h2, h3, [class*="title"]) :is(i, svg) { color: #8fb2ff !important; }

/* tabs: New posts / New topics / Trending / ... */

body.b2 .wn-head :is(a, button)[class*="tab"],
body.b2 .wn-head :is(a, button)[class*="pill"],
body.b2 .wn-head :is(a, button)[class*="filter"] {
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #6b7a96 !important;
  font-weight: 800;
  box-shadow: none !important;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

body.b2 .wn-head :is(a, button)[class*="tab"]:not([class*="active"]):not(.is-on):not([aria-selected="true"]):is(:hover, :focus-visible),
body.b2 .wn-head :is(a, button)[class*="pill"]:not([class*="active"]):not(.is-on):is(:hover, :focus-visible),
body.b2 .wn-head :is(a, button)[class*="filter"]:not([class*="active"]):not(.is-on):is(:hover, :focus-visible) {
  transform: translateY(1px);
  border-color: #b4c3dc !important;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc) !important;
  color: var(--pp-accent) !important;
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18) !important;
}

body.b2 .wn-head :is(a, button):is([class*="active"], [class*="current"], .is-on, [aria-selected="true"], [aria-current]),
body.b2 .wn-head :is(a, button):is([class*="active"], [class*="current"], .is-on, [aria-selected="true"], [aria-current]):is(:hover, :focus-visible) {
  border-color: transparent !important;
  background: var(--pp-grad-accent) !important;
  color: #fff !important;
  box-shadow: 0 5px 12px rgba(119,88,186,.30), inset 0 1px 0 rgba(255,255,255,.25) !important;
}

body.b2.dark .wn-head :is(a, button)[class*="tab"],
body.b2.dark .wn-head :is(a, button)[class*="pill"],
body.b2.dark .wn-head :is(a, button)[class*="filter"] {
  color: #9db4ea !important;
}

body.b2.dark .wn-head :is(a, button)[class*="tab"]:not([class*="active"]):not(.is-on):not([aria-selected="true"]):is(:hover, :focus-visible) {
  border-color: #354a6f !important;
  background: linear-gradient(to bottom, #0d1524, #121c2f) !important;
  color: #8fb2ff !important;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.4) !important;
}

/* timeline: dots + line in theme colours */

body.b2 .wn-stream :is([class*="dot"], [class*="node"], [class*="bullet"]):not([class*="icon"]):not(.wn-event__node) {
  background: var(--pp-grad-accent) !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 3px rgba(119,88,186,.16) !important;
}

body.b2 .wn-stream :is([class*="line"], [class*="rail"], [class*="spine"]):not([class*="byline"]):not([class*="titlerow"]) {
  background: linear-gradient(to bottom, #b4c3dc, rgba(180,195,220,.15)) !important;
}

body.b2.dark .wn-stream :is([class*="line"], [class*="rail"], [class*="spine"]):not([class*="byline"]):not([class*="titlerow"]) {
  background: linear-gradient(to bottom, #2f4468, rgba(47,68,104,.15)) !important;
}

body.b2 .wn-stream [class*="icon"]:not(i):not(svg) {
  border: 1px solid #c4d2e8 !important;
  background: linear-gradient(to bottom, #ffffff, #eef3fb) !important;
  color: #5b6d8e !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 5px rgba(100,120,180,.10) !important;
}

body.b2.dark .wn-stream [class*="icon"]:not(i):not(svg) {
  border-color: #2a3a58 !important;
  background: linear-gradient(to bottom, #1a2742, #111a2e) !important;
  color: #9db4ea !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 6px rgba(0,0,0,.35) !important;
}

/* active tab: every child white so the label stays readable */

body.b2 .wn-head :is(a, button):is([class*="active"], [class*="current"], .is-on, [aria-selected="true"], [aria-current]) :is(span, i, svg, b, strong),
body.b2.dark .wn-head :is(a, button):is([class*="active"], [class*="current"], .is-on, [aria-selected="true"], [aria-current]) {
  color: #fff !important;
}

body.b2.dark .wn-head :is(a, button):is([class*="active"], [class*="current"], .is-on, [aria-selected="true"], [aria-current]) :is(span, i, svg, b, strong) {
  color: #fff !important;
}

/* Activity events (article.wn-event) */

body.b2 .wn-stream__day { color: #7b8aa6; font-weight: 800; letter-spacing: .12em; }

body.b2.dark .wn-stream__day { color: #8fa3c7; }

body.b2 article.wn-event {
  position: relative;
  transition: border-color .18s ease, box-shadow .18s ease;
}

/* unread = accent stripe */

body.b2 article.wn-event:not(.is-read)::before {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(to bottom, #6087d1, #7758ba);
  pointer-events: none;
}

body.b2 .wn-event__avatar img, body.b2 img.wn-event__avatar {
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff, 0 3px 8px rgba(100,120,180,.3);
}

body.b2.dark .wn-event__avatar img, body.b2.dark img.wn-event__avatar {
  box-shadow: 0 0 0 2px #1d2a44, 0 3px 8px rgba(0,0,0,.5);
}

/* byline: no highlight background, clean text */

body.b2 .wn-event__byline, body.b2 .wn-event__byline * {
  background: transparent !important;
  box-shadow: none !important;
}

body.b2 .wn-event__byline { color: #7b8aa6; }

body.b2 .wn-event__byline a:not([class*="user"]) { color: var(--pp-heading); font-weight: 800; }

body.b2 .wn-event__byline a:hover { color: var(--pp-accent); }

body.b2.dark .wn-event__byline { color: #8fa3c7; }

body.b2.dark .wn-event__byline a:not([class*="user"]) { color: #9db4ea; }

body.b2.dark .wn-event__byline a:hover { color: #8fb2ff; }

body.b2 .wn-event__time { color: #8493ad; font-size: 11px; }

body.b2.dark .wn-event__time { color: #6f84a8; }

/* title row */

body.b2 .wn-event__titlerow, body.b2 .wn-event__titlerow a {
  color: var(--pp-heading) !important;
  font-weight: 800;
  background: transparent !important;
}

body.b2 .wn-event__titlerow a:hover { color: var(--pp-accent) !important; }

body.b2.dark .wn-event__titlerow, body.b2.dark .wn-event__titlerow a { color: #e6eeff !important; }

body.b2.dark .wn-event__titlerow a:hover { color: #8fb2ff !important; }

body.b2 .wn-event__snippet { color: #5f6f8c; }

body.b2.dark .wn-event__snippet { color: #94a8cc; }

body.b2 .wn-event__foot { color: #8493ad; }

body.b2.dark .wn-event__foot { color: #7f94b8; }

/* Activity: the card is .wn-event__card — the article is only the timeline row */

body.b2 article.wn-event,
body.b2.dark article.wn-event,
body.b2 article.wn-event:hover,
body.b2.dark article.wn-event:hover {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.b2 article.wn-event:not(.is-read)::before { content: none !important; display: none !important; }

body.b2 .wn-event__card {
  position: relative;
  border: 1px solid #d3dded !important;
  border-radius: 12px !important;
  background: linear-gradient(to bottom, #ffffff, #f2f6fc) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 8px 20px rgba(100,120,180,.14), 0 2px 5px rgba(100,120,180,.08) !important;
  transition: border-color .18s ease, box-shadow .18s ease;
}

body.b2 .wn-event__card:hover { border-color: #b4c3dc !important; }

body.b2 .wn-event:not(.is-read) .wn-event__card::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(to bottom, #6087d1, #7758ba);
  pointer-events: none;
}

body.b2.dark .wn-event__card {
  border-color: #22314d !important;
  background: linear-gradient(to bottom, #172238, #101a2c) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 22px rgba(0,0,0,.4), 0 2px 5px rgba(0,0,0,.3) !important;
}

body.b2.dark .wn-event__card:hover { border-color: #354a6f !important; }

/* timeline node (round reply icon) */

body.b2 .wn-event__node {
  border: 1px solid #c4d2e8 !important;
  background: linear-gradient(to bottom, #ffffff, #eef3fb) !important;
  color: var(--pp-accent) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 6px rgba(100,120,180,.14) !important;
}

body.b2.dark .wn-event__node {
  border-color: #2a3a58 !important;
  background: linear-gradient(to bottom, #1a2742, #111a2e) !important;
  color: #8fb2ff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 6px rgba(0,0,0,.35) !important;
}

body.b2 .wn-event__node i { color: inherit !important; }

/* title + forum link + action text */

body.b2 a.wn-event__title { color: var(--pp-heading) !important; font-weight: 800 !important; }

body.b2 a.wn-event__title:hover { color: var(--pp-accent) !important; }

body.b2.dark a.wn-event__title { color: #e6eeff !important; }

body.b2.dark a.wn-event__title:hover { color: #8fb2ff !important; }

body.b2 a.wn-event__forum { color: var(--pp-heading); font-weight: 800; }

body.b2 a.wn-event__forum:hover { color: var(--pp-accent); }

body.b2.dark a.wn-event__forum { color: #9db4ea; }

body.b2.dark a.wn-event__forum:hover { color: #8fb2ff; }

body.b2 .wn-event__action { color: #8493ad; }

body.b2.dark .wn-event__action { color: #7f94b8; }

/* Activity timeline: spine + day dots in theme colours (were green in dark) */

body.b2 .wn-stream::before {
  background: linear-gradient(to bottom, #b4c3dc, rgba(180,195,220,.15)) !important;
}

body.b2.dark .wn-stream::before {
  background: linear-gradient(to bottom, #2f4468, rgba(47,68,104,.15)) !important;
}

body.b2 .wn-stream__day::before,
body.b2 .wn-stream__day > :is(span, i, b, em):empty,
body.b2 .wn-stream__day > [class*="dot"] {
  background: var(--pp-grad-accent) !important;
  background-color: #7758ba !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 3px rgba(119,88,186,.16) !important;
}

body.b2.dark .wn-stream__day::before,
body.b2.dark .wn-stream__day > :is(span, i, b, em):empty,
body.b2.dark .wn-stream__day > [class*="dot"] {
  background: linear-gradient(135deg, #5f82d9, #8c6ad9) !important;
  box-shadow: 0 0 0 3px rgba(143,178,255,.16) !important;
}

/* Activity timeline icon: fully opaque circle (the spine no longer shows through) */

html body.b2 .wn-event .wn-event__node,
html body.b2 .wn-event .wn-event__node.wn-event__node--reply {
  z-index: 2;
  opacity: 1 !important;
  background: linear-gradient(to bottom, #ffffff, #e4ecfa) !important;
  background-color: #eef3fb !important;
  border: 1px solid #b4c3dc !important;
  color: #5f4bb0 !important;
  box-shadow: 0 0 0 4px #f6f8fe, 0 3px 8px rgba(100,120,180,.25) !important;
}

html body.b2.dark .wn-event .wn-event__node,
html body.b2.dark .wn-event .wn-event__node.wn-event__node--reply {
  background: linear-gradient(to bottom, #2a3a60, #1a2742) !important;
  background-color: #1a2742 !important;
  border-color: #3a4f7a !important;
  color: #a9c1ff !important;
  box-shadow: 0 0 0 4px #0f1626, 0 3px 8px rgba(0,0,0,.5) !important;
}

html body.b2 .wn-event .wn-event__node i { color: inherit !important; opacity: 1 !important; }

/* ============================================
   27. AVATARS (circles)
   ============================================ */

body.b2 .b2-user-trigger__avatar,
body.b2 .b2-statp__avatar,
body.b2 .b2-ucard__avatar,
body.b2 .last-post__avatar,
body.b2 .chat-dock__avatar-img,
body.b2 .b2-prof__avatar,
body.b2 .avatar,
body.b2 .avatar img {
  border-radius: 50% !important;
}

/* ============================================
   28. CUSTOM MINI PROFILE (pp-mini-*)
   ============================================ */

.pp-mini-profile { text-align: center; padding: 16px; }

.pp-mini-avatar img {
  width: 96px;
  height: 96px;
  border-radius: 18px;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,.75);
  box-shadow: 0 6px 14px rgba(100,120,180,.16);
}

.pp-mini-name {
  display: block;
  margin-top: 16px;
  color: #3a4a68;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.4px;
  text-decoration: none;
}

.pp-mini-title { margin-top: 4px; color: #7758ba; font-size: 11px; font-weight: 800; }

.pp-mini-group { margin-top: 3px; color: #7888a8; font-size: 11px; }

.pp-mini-group-img { max-width: 120px; margin-top: 8px; }

.pp-mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }

.pp-mini-stats div {
  padding: 2px 1px;
  border-radius: 12px;
  background: rgba(255,255,255,.55);
  border: 1px solid #d6e0ec;
}

.pp-mini-stats strong { display: block; color: #455678; font-size: 14px; }

.pp-mini-stats span, .pp-mini-meta, .pp-mini-field span {
  color: #7888a8;
  font-size: 10px;
  margin-top: 5px;
}

.pp-mini-meta { display: grid; gap: 4px; margin-top: 12px; }

.pp-mini-online, .pp-mini-offline {
  max-width: 110px;
  margin: 12px auto 0;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
}

.pp-mini-online {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #2a9d8f, #38c4a0);
  box-shadow: 0 0 14px rgba(56,196,160,.25);
}

.pp-mini-online::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.18), transparent);
  transform: translateX(-100%);
  animation: ppShine 3s linear infinite;
}

@keyframes ppShine { to { transform: translateX(100%); } }

.pp-mini-offline { background: linear-gradient(135deg, #94a3b8, #64748b); }

.pp-mini-details, .pp-mini-toggle { display: none; }

.pp-mini-expand {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  transition: max-height .25s ease, opacity .2s ease, margin-top .2s ease;
}

.pp-mini-expand:empty { display: none !important; }

.pp-mini-profile:hover .pp-mini-expand:not(:empty) { max-height: 420px; opacity: 1; margin-top: 10px; }

.pp-mini-field {
  margin-top: 6px;
  padding: 6px 0 10px;
  border-top: 1px solid rgba(200,212,228,.45);
  text-align: left;
  transform: translateY(4px);
  transition: opacity .22s ease, transform .22s ease;
}

.pp-mini-profile:hover .pp-mini-field { transform: translateY(0); }

.pp-mini-field strong {
  display: block;
  color: #6b7a96;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
}

.pp-mini-field strong::before { margin-right: 6px; opacity: .85; font-size: 11px; }

.pp-mini-field:nth-child(1) strong::before { content: "🎨"; }

.pp-mini-field:nth-child(2) strong::before { content: "✦"; }

.pp-mini-field:nth-child(3) strong::before { content: "💻"; }

.pp-mini-field:nth-child(4) strong::before { content: "🔗"; }

.pp-mini-field span, .pp-mini-field a {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 10px;
  line-height: 1.3;
  text-decoration: none;
  word-break: break-word;
}

.pp-mini-field a:hover { color: #7758ba; }

.pp-mini-achievements {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}

.pp-achievement { width: 24px; height: 24px; border-radius: 8px; }

body.b2.dark .pp-mini-name,
body.b2.dark .pp-mini-stats strong,
body.b2.dark .pp-mini-field strong {
  color: #9fb3d1;
}

body.b2.dark .pp-mini-group,
body.b2.dark .pp-mini-meta,
body.b2.dark .pp-mini-field span,
body.b2.dark .pp-mini-field a,
body.b2.dark .pp-mini-stats span {
  color: #8494ad;
}

body.b2.dark .pp-mini-stats div { background: rgba(8,13,23,.35); border-color: #273650; }

body.b2.dark .pp-mini-avatar img { border-color: rgba(255,255,255,.08); }

body.b2.dark .pp-mini-field { border-top-color: rgba(39,54,80,.55); }

body.b2.dark .pp-mini-field a:hover { color: #8fb2ff; }

body.b2.dark .pp-mini-offline { background: linear-gradient(135deg, #334155, #475569); color: #cbd5e1; }

/* ============================================
   29. MAIN PROFILE PAGE (pp-profile-*)
   ============================================ */

.pp-profile-page,
*:has(> .pp-profile-page),
.panel:has(.pp-profile-page),
.panel__content:has(.pp-profile-page) {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.pp-profile-hero, .pp-profile-card {
  background: linear-gradient(to bottom, #f8fbff, #eef4fb);
  border: 1px solid #d6e0ec;
  border-radius: 22px;
  overflow: hidden;
}

.pp-profile-hero { position: relative; margin-bottom: 18px; }

.pp-profile-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at top right, rgba(255,255,255,.14), transparent 42%);
}

.pp-profile-banner {
  position: relative;
  overflow: hidden;
  height: 145px;
  background: radial-gradient(circle at top right, rgba(255,255,255,.30), transparent 36%),
    linear-gradient(135deg, #4c6ec4, #6087d1 55%, #9078d7);
}

.pp-profile-banner::after {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  top: -190px;
  right: -110px;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%);
}

.pp-profile-hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 28px 28px;
  margin-top: -58px;
}

.pp-profile-avatar {
  width: 118px;
  height: 118px;
  border-radius: 26px;
  object-fit: cover;
  border: 4px solid rgba(255,255,255,.85);
  box-shadow: 0 12px 28px rgba(30,41,59,.22);
}

.pp-profile-info { padding-top: 58px; }

.pp-profile-kicker {
  display: inline-block;
  margin-bottom: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #4c6ec4, #6087d1);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.pp-profile-info h1 {
  margin: 0;
  color: #3a4a68;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.4px;
}

.pp-profile-online-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-left: 6px;
  border-radius: 50%;
  background: #38c4a0;
  box-shadow: 0 0 12px rgba(56,196,160,.55);
}

.pp-profile-info p { margin: 8px 0 0; color: #7888a8; }

.pp-profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  color: #7888a8;
  font-size: 12px;
}

.pp-profile-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 18px;
  align-items: start;
  margin-bottom: 18px;
}

.pp-profile-left, .pp-profile-right {
  display: grid;
  gap: 18px;
  align-content: start;
  align-self: start;
}

.pp-profile-card {
  position: relative;
  height: auto !important;
  min-height: 0 !important;
  padding: 20px;
  transition: transform .18s ease, box-shadow .18s ease;
}

.pp-profile-card:hover, .pp-profile-hero:hover { transform: translateY(-2px); }

.pp-profile-card::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 0;
  width: 4px;
  height: calc(100% - 36px);
  border-radius: 999px;
  background: linear-gradient(to bottom, #6087d1, #7758ba);
  opacity: .75;
}

.pp-profile-card h3 { margin: 0 0 14px; color: #455678; font-size: 15px; font-weight: 800; }

.pp-profile-field { padding: 14px 0; border-top: 1px solid rgba(200,212,228,.48); }

.pp-profile-field:last-child { border-bottom: 0; padding-bottom: 0; }

.pp-profile-field strong {
  display: block;
  margin-bottom: 8px;
  color: #6b7a96;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
}

.pp-profile-field strong::before { margin-right: 7px; opacity: .85; }

.pp-profile-field:nth-child(2) strong::before { content: "🎨"; }

.pp-profile-field:nth-child(3) strong::before { content: "✦"; }

.pp-profile-field:nth-child(4) strong::before { content: "💻"; }

.pp-profile-field:nth-child(5) strong::before { content: "🔗"; }

.pp-profile-field:nth-child(6) strong::before { content: "📝"; }

.pp-profile-field span, .pp-profile-field a {
  display: block;
  margin-top: 5px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.65;
  text-decoration: none;
  word-break: break-word;
}

.pp-profile-field a {
  display: inline-flex;
  padding: 7px 12px;
  border-radius: 999px;
  background: linear-gradient(to bottom, #f8fafc, #eef2f9);
  border: 1px solid #c8d4e4;
  color: #7758ba;
  font-size: 10px;
  font-weight: 800;
}

.pp-profile-field a:hover { color: #4c6ec4; transform: translateY(-1px); }

.pp-profile-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

.pp-profile-stat-card {
  display: block;
  padding: 24px 14px;
  border: 1px solid #d7e1ec;
  border-radius: 20px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.pp-profile-stat-card strong {
  display: block;
  margin-bottom: 8px;
  color: #394d74;
  font-size: 24px;
  font-weight: 900;
}

.pp-profile-stat-card span {
  color: #7383a3;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.pp-profile-stat-card:hover {
  transform: translateY(-3px);
  border-color: #8b79df;
  box-shadow: 0 10px 24px rgba(107,127,215,.14);
  background: linear-gradient(135deg, rgba(107,127,215,.08), rgba(140,106,217,.08));
}

.pp-profile-achievements { display: flex; flex-wrap: wrap; gap: 10px; }

.pp-profile-achievement { width: 34px; height: 34px; border-radius: 10px; }

.pp-profile-mini-status {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(200,212,228,.48);
}

.pp-profile-mini-status span {
  display: inline-flex;
  width: fit-content;
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(to bottom, #f8fafc, #eef2f9);
  border: 1px solid #c8d4e4;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.pp-profile-mini-status .online {
  background: linear-gradient(135deg, #2a9d8f, #38c4a0);
  border: 0;
  color: #fff;
  box-shadow: 0 0 14px rgba(56,196,160,.25);
}

.pp-profile-about { color: #64748b; font-size: 13px; line-height: 1.8; }

.pp-profile-about p { margin-top: 0; }

.pp-profile-feed-header {
  margin: 8px 0 14px;
  padding: 20px 24px;
  border: 1px solid #d7e1ec;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.48));
  backdrop-filter: blur(12px);
}

.pp-profile-feed-header-inner { display: flex; align-items: center; gap: 18px; }

.pp-profile-feed-icon {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: linear-gradient(135deg, #6b7fd7, #8c6ad9);
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(107,127,215,.24);
}

.pp-profile-feed-text h3 { margin: 0 0 4px; color: #41557b; font-size: 20px; font-weight: 900; }

.pp-profile-feed-text p { margin: 0; color: #7383a3; font-size: 13px; line-height: 1.6; }

body.b2 .profile-tab { font-size: 11px; }

body.b2 .profile-tab-active { background: linear-gradient(135deg, #6b7fd7, #8c6ad9); color: #fff; }

/* Dark */

body.b2.dark .pp-profile-hero, body.b2.dark .pp-profile-card {
  background: linear-gradient(to bottom, #172238, #111a2b);
  border-color: #273650;
  box-shadow: 0 8px 24px rgba(0,0,0,.32);
}

body.b2.dark .pp-profile-card:hover, body.b2.dark .pp-profile-hero:hover {
  box-shadow: 0 12px 30px rgba(0,0,0,.36);
}

body.b2.dark .pp-profile-banner {
  background: radial-gradient(circle at top right, rgba(143,178,255,.16), transparent 38%),
    linear-gradient(135deg, #172238, #263653 55%, #7758ba);
}

body.b2.dark .pp-profile-avatar { border-color: rgba(255,255,255,.08); }

body.b2.dark .pp-profile-info h1, body.b2.dark .pp-profile-card h3 { color: #dbeafe; }

body.b2.dark .pp-profile-info p,
body.b2.dark .pp-profile-meta,
body.b2.dark .pp-profile-field span {
  color: #8494ad;
}

body.b2.dark .pp-profile-field { border-top-color: rgba(39,54,80,.65); }

body.b2.dark .pp-profile-field strong { color: #9fb3d1; }

body.b2.dark .pp-profile-field a {
  background: linear-gradient(to bottom, #1b2740, #141f34);
  border-color: #2d4060;
  color: #dbeafe;
}

body.b2.dark .pp-profile-field a:hover { border-color: rgba(143,178,255,.45); color: #8fb2ff; }

body.b2.dark .pp-profile-stat-card { border-color: #26344c; background: rgba(8,13,23,.28); }

body.b2.dark .pp-profile-stat-card strong { color: #edf3ff; }

body.b2.dark .pp-profile-stat-card span { color: #8ea2c7; }

body.b2.dark .pp-profile-stat-card:hover {
  background: linear-gradient(135deg, rgba(107,127,215,.12), rgba(140,106,217,.12));
}

body.b2.dark .pp-profile-about { color: #94a3b8; }

body.b2.dark .pp-profile-mini-status { border-top-color: rgba(39,54,80,.65); }

body.b2.dark .pp-profile-mini-status span {
  background: rgba(8,13,23,.35);
  border-color: #273650;
  color: #8494ad;
}

body.b2.dark .pp-profile-mini-status .online {
  background: linear-gradient(135deg, #2a9d8f, #38c4a0);
  color: #fff;
}

body.b2.dark .pp-profile-feed-header {
  border-color: #26344c;
  background: linear-gradient(135deg, rgba(11,18,32,.82), rgba(8,14,25,.92));
}

body.b2.dark .pp-profile-feed-text h3 { color: #e6eeff; }

body.b2.dark .pp-profile-feed-text p { color: #92a2c3; }

body.b2.dark .profile-tab-active { background: linear-gradient(135deg, #6b7fd7, #8c6ad9); color: #fff; }

@media (max-width: 900px) {
  .pp-profile-layout { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .pp-profile-hero-inner { flex-direction: column; text-align: center; }

  .pp-profile-info { padding-top: 0; }

  .pp-profile-meta { justify-content: center; }

  .pp-profile-stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
   30. PROFILE PAGE (b2-prof) — matches posts / topic header
   ============================================ */

/* cover */

body.b2 .b2-prof__cover {
  overflow: hidden;
  border: 1px solid var(--pp-border);
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(100,120,180,.16), 0 2px 6px rgba(100,120,180,.08);
}

body.b2.dark .b2-prof__cover { border-color: #22314d; box-shadow: 0 12px 28px rgba(0,0,0,.42); }

/* cards: sidebar rail, activity, statuses */

body.b2 .b2-prof :is(.b2-prof__rail, .b2-prof__activity, .b2-prof__statuses).card {
  position: relative;
  border: 1px solid var(--pp-border) !important;
  border-radius: 12px !important;
  background: linear-gradient(to bottom, #fcfdff, #f2f6fc) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 10px 26px rgba(100,120,180,.16), 0 2px 6px rgba(100,120,180,.08) !important;
}

body.b2 .b2-prof :is(.b2-prof__rail, .b2-prof__activity, .b2-prof__statuses).card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  height: 14px;
  border-radius: 11px 11px 0 0;
  background: var(--pp-grad-accent) top / 100% 3px no-repeat;
  opacity: .9;
  pointer-events: none;
}

body.b2.dark .b2-prof :is(.b2-prof__rail, .b2-prof__activity, .b2-prof__statuses).card {
  border-color: #22314d !important;
  background: linear-gradient(to bottom, #15203a, #0e1626) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 28px rgba(0,0,0,.42), 0 2px 6px rgba(0,0,0,.30) !important;
}

/* avatar, name, handle */

body.b2 .b2-prof__avwrap img, body.b2 .b2-prof__avwrap > :is(div, span):first-child {
  border-radius: 50%;
  box-shadow: 0 0 0 4px #fff, 0 8px 22px rgba(100,120,180,.34);
}

body.b2.dark .b2-prof__avwrap img { box-shadow: 0 0 0 4px #1d2a44, 0 8px 22px rgba(0,0,0,.55); }

body.b2 .b2-prof__name { color: #354867; font-weight: 900; letter-spacing: -.02em; }

body.b2.dark .b2-prof__name { color: #eef4ff; }

body.b2 .b2-prof__handle, body.b2 .b2-prof__meta { color: #657796; }

body.b2.dark .b2-prof__handle, body.b2.dark .b2-prof__meta { color: #8fa3c7; }

/* rail stats: soft tiles */

body.b2 .b2-prof__railstats { border: 0 !important; }

/* rail sections: fading divider */

body.b2 .b2-prof__sec {
  border-top: 1px solid transparent !important;
  border-image: linear-gradient(to right, var(--pp-border), rgba(200,212,228,0)) 1 !important;
}

body.b2.dark .b2-prof__sec {
  border-image: linear-gradient(to right, #22314d, rgba(34,49,77,0)) 1 !important;
}

/* action buttons in the rail (Edit profile etc.) */

body.b2 .b2-prof__acts :is(a, button) {
  border: 1px solid #c4d2e8 !important;
  border-radius: 10px !important;
  background: linear-gradient(to bottom, #ffffff, #eef3fb) !important;
  color: #5b6d8e !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 5px rgba(100,120,180,.10) !important;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

body.b2 .b2-prof__acts :is(a, button):is(:hover, :focus-visible) {
  transform: translateY(1px);
  border-color: #b4c3dc !important;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc) !important;
  color: var(--pp-accent) !important;
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18) !important;
}

body.b2.dark .b2-prof__acts :is(a, button) {
  border-color: #2a3a58 !important;
  background: linear-gradient(to bottom, #1a2742, #111a2e) !important;
  color: #b9c8e6 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 6px rgba(0,0,0,.35) !important;
}

body.b2.dark .b2-prof__acts :is(a, button):is(:hover, :focus-visible) {
  border-color: #354a6f !important;
  background: linear-gradient(to bottom, #0d1524, #121c2f) !important;
  color: #8fb2ff !important;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.4) !important;
}

/* tabs: Content / Achievements / About */

body.b2 .profile-tabs {
  padding: 6px;
  border: 1px solid #d3dded;
  background: linear-gradient(to bottom, #eef3fc, #f7f9fe);
  box-shadow: inset 0 1px 3px rgba(100,120,180,.14);
}

body.b2 .profile-tab {
  flex: 1;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #5b6d8e !important;
  font-weight: 800;
  box-shadow: none;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

body.b2 .profile-tab:not(.profile-tab--active):is(:hover, :focus-visible) {
  transform: translateY(1px);
  border-color: #b4c3dc !important;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc) !important;
  color: var(--pp-accent) !important;
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18);
}

body.b2 .profile-tab.profile-tab--active,
body.b2 .profile-tab.profile-tab--active:is(:hover, :focus-visible) {
  border-color: transparent !important;
  background: var(--pp-grad-accent) !important;
  color: #fff !important;
  box-shadow: 0 6px 14px rgba(119,88,186,.28), inset 0 1px 0 rgba(255,255,255,.25);
}

body.b2.dark .profile-tabs {
  border-color: #22314d;
  background: linear-gradient(to bottom, #0d1524, #121c2f);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.45);
}

body.b2.dark .profile-tab { color: #b9c8e6 !important; }

body.b2.dark .profile-tab:not(.profile-tab--active):is(:hover, :focus-visible) {
  border-color: #354a6f !important;
  background: linear-gradient(to bottom, #0d1524, #121c2f) !important;
  color: #8fb2ff !important;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.4);
}

/* activity feed items */

body.b2 .b2-prof__activity :is(article, li, [class*="item"], [class*="entry"]):not([class*="tab"]):not(svg) {
  border: 1px solid #d3dded !important;
  border-radius: 12px !important;
  background: linear-gradient(to bottom, #ffffff, #f4f7fd) !important;
  box-shadow: 0 4px 12px rgba(100,120,180,.10) !important;
}

body.b2.dark .b2-prof__activity :is(article, li, [class*="item"], [class*="entry"]):not([class*="tab"]):not(svg) {
  border-color: #22314d !important;
  background: linear-gradient(to bottom, #172238, #101a2c) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.35) !important;
}

/* profile: clean rail stat tiles (reset native dividers/bars) */

body.b2 .b2-prof__railstats {
  padding: 0;
  background: transparent !important;
  box-shadow: none !important;
}

body.b2 .b2-prof__railstats > * {
  position: relative;
  border: 1px solid #d3dded !important;
  border-image: none !important;
  border-radius: 10px !important;
  outline: 0 !important;
  margin: 0 !important;
  background: linear-gradient(to bottom, #ffffff, #eef3fb) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 5px rgba(100,120,180,.08) !important;
  transform: none !important;
}

body.b2 .b2-prof__railstats > *::before, body.b2 .b2-prof__railstats > *::after {
  display: none !important;
}

body.b2 a.b2-prof__railstats > *:hover, body.b2 .b2-prof__railstats > a:hover {
  border-color: #b4c3dc !important;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc) !important;
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18) !important;
}

body.b2.dark .b2-prof__railstats > * {
  border-color: #2a3a58 !important;
  background: linear-gradient(to bottom, #1a2742, #111a2e) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 6px rgba(0,0,0,.3) !important;
}

body.b2.dark .b2-prof__railstats > a:hover {
  border-color: #354a6f !important;
  background: linear-gradient(to bottom, #0d1524, #121c2f) !important;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.4) !important;
}

/* profile: activity titles + "Read more" */

body.b2 .b2-prof__activity :is(h3, h4, [class*="title"]) a {
  color: var(--pp-heading) !important;
  font-weight: 800;
}

body.b2 .b2-prof__activity :is(h3, h4, [class*="title"]) a:hover { color: var(--pp-accent) !important; }

body.b2 .b2-prof__activity a[class*="more"] { color: var(--pp-accent); font-weight: 800; }

body.b2 .b2-prof__activity :is(article, li, [class*="item"], [class*="entry"]):not([class*="tab"]):hover {
  border-color: #b8c6e4 !important;
}

body.b2.dark .b2-prof__activity :is(article, li, [class*="item"], [class*="entry"]):not([class*="tab"]):hover {
  border-color: #354a6f !important;
}

/* profile: force all three stat tiles identical, equal width */

body.b2 .b2-prof .b2-prof__rail .b2-prof__railstats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body.b2 .b2-prof .b2-prof__rail .b2-prof__railstats > :is(*, :first-child, :nth-child(2), :nth-child(3), :last-child) {
  min-width: 0;
  border: 1px solid #d3dded !important;
  border-radius: 10px !important;
  background: linear-gradient(to bottom, #ffffff, #eef3fb) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 5px rgba(100,120,180,.08) !important;
}

body.b2.dark .b2-prof .b2-prof__rail .b2-prof__railstats > :is(*, :first-child, :nth-child(2), :nth-child(3), :last-child) {
  border-color: #2a3a58 !important;
  background: linear-gradient(to bottom, #1a2742, #111a2e) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 6px rgba(0,0,0,.3) !important;
}

/* profile: the real stat tiles are .b2-prof__railstat (a / button) */

body.b2 .b2-prof .b2-prof__railstat {
  min-width: 0;
  border: 1px solid #d3dded !important;
  border-image: none !important;
  border-radius: 10px !important;
  background: linear-gradient(to bottom, #ffffff, #eef3fb) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 5px rgba(100,120,180,.08) !important;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

body.b2 .b2-prof .b2-prof__railstat:is(:hover, :focus-visible) {
  transform: translateY(1px);
  border-color: #b4c3dc !important;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc) !important;
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18) !important;
}

body.b2.dark .b2-prof .b2-prof__railstat {
  border-color: #2a3a58 !important;
  background: linear-gradient(to bottom, #1a2742, #111a2e) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 6px rgba(0,0,0,.3) !important;
}

body.b2.dark .b2-prof .b2-prof__railstat:is(:hover, :focus-visible) {
  border-color: #354a6f !important;
  background: linear-gradient(to bottom, #0d1524, #121c2f) !important;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.4) !important;
}

/* profile: the Posts tile is a link, so make it react exactly like the button tiles */

html body.b2 .b2-prof a.b2-prof__railstat,
html body.b2 .b2-prof a.b2-prof__railstat:visited {
  color: inherit !important;
  text-decoration: none !important;
}

html body.b2 .b2-prof a.b2-prof__railstat b { color: inherit !important; }

html body.b2 .b2-prof a.b2-prof__railstat:is(:hover, :focus, :focus-visible, :active) {
  transform: translateY(1px) !important;
  border-color: #b4c3dc !important;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc) !important;
  color: inherit !important;
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18) !important;
}

html body.b2 .b2-prof a.b2-prof__railstat:is(:hover, :focus, :focus-visible, :active) :is(b, span) {
  color: inherit !important;
}

html body.b2.dark .b2-prof a.b2-prof__railstat:is(:hover, :focus, :focus-visible, :active) {
  border-color: #354a6f !important;
  background: linear-gradient(to bottom, #0d1524, #121c2f) !important;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.4) !important;
}

/* profile: Posts tile hover wins over the row-level tile rules */

html body.b2 .b2-prof .b2-prof__rail .b2-prof__railstats > a.b2-prof__railstat:is(:hover, :focus-visible, :active) {
  transform: translateY(1px) !important;
  border-color: #b4c3dc !important;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc) !important;
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18) !important;
}

html body.b2.dark .b2-prof .b2-prof__rail .b2-prof__railstats > a.b2-prof__railstat:is(:hover, :focus-visible, :active) {
  border-color: #354a6f !important;
  background: linear-gradient(to bottom, #0d1524, #121c2f) !important;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.4) !important;
}

/* profile: avatar sits above the card's accent line */

body.b2 .b2-prof .b2-prof__avwrap { position: relative; z-index: 5; }

/* profile: tabs run edge to edge, flush with the card border */

body.b2 .b2-prof .profile-tabs {
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 0 !important;
  border-bottom: 1px solid #d3dded !important;
  border-radius: 11px 11px 0 0 !important;
}

body.b2 .b2-prof .profile-tab { border-radius: 0 !important; padding: 14px 14px !important; }

body.b2 .b2-prof .profile-tab:first-child { border-top-left-radius: 11px !important; }

body.b2 .b2-prof .profile-tab:last-child { border-top-right-radius: 11px !important; }

body.b2 .b2-prof .profile-tab.profile-tab--active {
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.18) !important;
}

body.b2.dark .b2-prof .profile-tabs { border-bottom-color: #22314d !important; }

/* profile: About tab rows */

body.b2 .profile-about { padding: 20px 24px; }

body.b2 .profile-about__heading {
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(to right, var(--pp-border), rgba(200,212,228,0)) 1;
  color: var(--pp-accent) !important;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

body.b2 .profile-about__list { display: flex; flex-direction: column; gap: 8px; margin: 0; }

body.b2 .profile-about__item {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 11px 16px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

body.b2 .profile-about__item:hover { border-color: #b4c3dc !important; }

body.b2 .profile-about__item dt {
  flex: 0 0 170px;
  margin: 0;
  color: #6b7a96 !important;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.b2 .profile-about__item dd {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--pp-heading) !important;
  font-weight: 700;
  word-break: break-word;
}

body.b2 .profile-about__item dd a { color: var(--pp-accent); }

body.b2.dark .profile-about__heading {
  border-image: linear-gradient(to right, #22314d, rgba(34,49,77,0)) 1;
  color: #9db4ea !important;
}

body.b2.dark .profile-about__item:hover { border-color: #354a6f !important; }

body.b2.dark .profile-about__item dt { color: #8fa3c7 !important; }

body.b2.dark .profile-about__item dd { color: #e6eeff !important; }

@media (max-width: 600px) {
  body.b2 .profile-about__item { flex-direction: column; align-items: flex-start; gap: 4px; }

  body.b2 .profile-about__item dt { flex: none; }
}

/* profile: Achievements filter pills */

body.b2 .achievement-filters { gap: 8px; flex-wrap: wrap; }

body.b2 .achievement-filter {
  padding: 8px 16px !important;
  border: 1px solid #c4d2e8 !important;
  border-radius: 999px !important;
  background: linear-gradient(to bottom, #ffffff, #eef3fb) !important;
  color: #5b6d8e !important;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 5px rgba(100,120,180,.10) !important;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

body.b2 .achievement-filter:not(.achievement-filter--active):is(:hover, :focus-visible) {
  transform: translateY(1px);
  border-color: #b4c3dc !important;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc) !important;
  color: var(--pp-accent) !important;
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18) !important;
}

body.b2 .achievement-filter.achievement-filter--active,
body.b2 .achievement-filter.achievement-filter--active:is(:hover, :focus-visible) {
  border-color: transparent !important;
  background: var(--pp-grad-accent) !important;
  color: #fff !important;
  box-shadow: 0 6px 14px rgba(119,88,186,.28), inset 0 1px 0 rgba(255,255,255,.25) !important;
}

body.b2.dark .achievement-filter {
  border-color: #2a3a58 !important;
  background: linear-gradient(to bottom, #1a2742, #111a2e) !important;
  color: #b9c8e6 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 6px rgba(0,0,0,.35) !important;
}

body.b2.dark .achievement-filter:not(.achievement-filter--active):is(:hover, :focus-visible) {
  border-color: #354a6f !important;
  background: linear-gradient(to bottom, #0d1524, #121c2f) !important;
  color: #8fb2ff !important;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.4) !important;
}

/* Reactions popup: invisible bridge so the picker doesn't close while the mouse travels to it */

body.b2 .reactions-trigger__flyout { overflow: visible; }

body.b2 .reactions-trigger__flyout::after {
  content: "";
  position: absolute;
  left: -12px;
  right: -12px;
  top: 100%;
  height: 32px;
  background: transparent;
}

/* ============================================
   31. USER TOOLS DROPDOWN (pp-user-tools)
   ============================================ */

.pp-user-tools {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
  padding-bottom: 10px;
  margin-bottom: -10px;
}

.pp-user-tools-trigger {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: .95;
  transition: opacity .18s ease;
}

.pp-user-tools-trigger:hover { opacity: 1; }

.pp-user-tools-trigger i { font-size: 16px; color: inherit; transition: color .18s ease; }

.pp-user-tools-trigger:hover i { color: #7758ba; }

.pp-user-tools-dropdown {
  display: none;
  position: absolute;
  top: 32px;
  right: 0;
  z-index: 99999;
  min-width: 190px;
  padding: 0;
  border: 1px solid #cbd4e6;
  border-radius: 5px;
  background: #f8fafc;
  box-shadow: 0 8px 20px rgba(80,100,140,.18);
}

.pp-user-tools.pp-tools-open .pp-user-tools-dropdown { display: block; }

.pp-user-tools-dropdown a {
  display: block;
  padding: 11px 16px;
  color: #243b5a;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}

.pp-user-tools-dropdown a:hover { background: #eef3fb; color: #7758ba; }

body.b2.dark .pp-user-tools-trigger i { color: #dbeafe; }

body.b2.dark .pp-user-tools-trigger:hover i { color: #8fb2ff; }

body.b2.dark .pp-user-tools-dropdown {
  background: #111827;
  border-color: #273650;
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
}

body.b2.dark .pp-user-tools-dropdown a { color: #dbeafe; }

body.b2.dark .pp-user-tools-dropdown a:hover { background: rgba(255,255,255,.06); color: #8fb2ff; }

@media (max-width: 700px) {
  .pp-user-tools { display: none; }
}

/* ============================================
   32. FOOTER / BOARD ACTIONS
   ============================================ */

body.b2 .copyright,
body.b2 .copyright a,
body.b2 .board-actions a,
body.b2 .board-actions__time,
body.b2 .board-actions__theme-selector {
  color: #7888a8;
}

body.b2 .copyright { padding: 12px 0; }

body.b2 .board-actions { border-top: 1px solid var(--pp-border-soft); }

body.b2 .board-actions__time, body.b2 .board-actions__theme-selector { font-size: 11px; }

/* it sits outside main, with no side padding of its own: below its max-width it would fill the wrap edge to edge */
@media (min-width: 640px) {
  html body.b2 .board-actions { width: calc(100% - 48px); }
}

body.b2.dark .copyright,
body.b2.dark .copyright a,
body.b2.dark .board-actions,
body.b2.dark .board-actions a,
body.b2.dark .board-actions__time,
body.b2.dark .board-actions__theme-selector {
  color: #64748b;
  border-color: #243047;
}

/* ============================================
   33. RESPONSIVE
   ============================================ */

@media (max-width: 1000px) {
  body.b2 .b2-forum { flex-wrap: wrap; }

  body.b2 .b2-forum__main { flex: 1 1 calc(100% - 76px); }

  body.b2 .b2-forum__qa { display: none; }

  body.b2 .b2-forum__stats, body.b2 .b2-forum__last {
    flex: 1 1 100%;
    justify-content: flex-start;
    border-left: 0;
    border-top: 1px solid var(--pp-border-card);
  }
}

@media (max-width: 900px) {
  body.b2 #wrap { width: auto; margin: 0 16px 20px; border-radius: 20px; }

  body.b2 #wrap main { padding: 14px 14px 24px; max-width: 100%; }

  body.b2 .breadcrumbs { max-width: 100%; width: 100%; margin-left: 0; margin-right: 0; }

  body.b2 .sub-menu { padding: 12px 14px; flex-wrap: wrap; }

  body.b2 .sub-menu .nav-links { flex-wrap: wrap; gap: 8px; }

  body.b2 .b2-subnav__user { margin: 0 0 8px; }

  body.b2 [class*="b2-fhead"]:is(div, header, section):not([class*="__"]) {
    flex-wrap: wrap;
    padding: 18px 16px;
  }

  body.b2 [class*="b2-fhead"] :is(h1, h2) { font-size: 19px; }
}

@media (max-width: 639.98px) {
  /* Monokai hid the legacy page header on small screens; keep that behavior. */

  body.b2 .page-header { display: none; }
}

@media (max-width: 600px) {
  body.b2 #wrap {
    width: calc(100% - 32px);
    margin: 0 auto 16px;
    border-radius: 16px;
    border-width: 1px;
    padding: 0;
  }

  body.b2 #wrap main { padding: 10px 8px 18px; }

  body.b2 .panel .panel__title { padding: 10px 12px; }

  body.b2 .breadcrumbs { border-radius: 8px; font-size: 11px; overflow-wrap: anywhere; }

  body.b2 .page-search .search-input { grid-template-columns: 1fr; }

  /* Logo */

  body.b2 .b2-topbar__logo { padding: 10px 16px 8px; }

  body.b2 .b2-topbar__logo img, body.b2 .b2-topbar img[src*="FSB2logo"] { height: 70px; }

  /* Nav */

  body.b2 .sub-menu .nav-links { gap: 6px; }

  body.b2 .sub-menu :is(.nav-link, .fs-menu__link) {
    padding: 7px 12px !important;
    font-size: 11px !important;
    border-radius: 10px;
  }

  body.b2 .b2-subnav__user { gap: 2px; padding: 3px 4px; }

  body.b2 .b2-subnav__user .notifications__icon-link,
  body.b2 .b2-subnav__user .notifications__dropdown-trigger {
    width: 30px;
    height: 30px;
  }

  body.b2 [class*="user-trigger"] span:not([class*="avatar"]) { display: none; }

  /* Forum rows */

  body.b2 .b2-forum { margin: 10px 8px; border-radius: 12px; }

  body.b2 .b2-forum__main { flex-basis: calc(100% - 56px); padding: 12px; }

  body.b2 .b2-forum__stats > * { min-width: 54px; padding: 6px 8px; }

  body.b2 .b2-forum__desc, body.b2 .last-post__meta { font-size: 10px; line-height: 1.4; }
}

@media (max-width: 420px) {
  body.b2 #wrap { width: calc(100% - 16px); margin-bottom: 14px; }

  body.b2 .b2-forum { margin: 8px 4px; }
}

/* ==========================================================
   34. PixelPoint — Palette widget + Palette gallery
   Replaces the old .pp-palette-* block. Light + dark.
   Hover = pressed in, corners 12px, same borders as the theme.
   ========================================================== */

/* ---------- Featured palette widget ---------- */

.pp-palette-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 10px 14px;
  border-bottom: 1px solid var(--pp-border-soft, #dde6f2);
}

.pp-palette-icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--pp-border-soft, #dde6f2);
  border-radius: 12px;
  background: linear-gradient(to bottom, #fff, #e9eff9);
  font-size: 20px;
}

.pp-palette-text { flex: 1; min-width: 0; }

.pp-palette-text strong {
  display: block;
  overflow: hidden;
  color: var(--pp-heading, #3a4a68);
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pp-palette-text span {
  display: block;
  margin-top: 3px;
  color: var(--pp-muted, #7888a8);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

.pp-palette-badge {
  padding: 6px 10px;
  border-radius: 12px;
  background: linear-gradient(135deg, #5f82d9, #8c6ad9);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(96,135,209,.25);
}

.pp-palette-swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 16px; }

.pp-swatch {
  position: relative;
  height: 104px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 12px;
  background: var(--color);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 3px 10px rgba(30,41,59,.10);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}

/* pressed in, like every other hover in the theme */

.pp-swatch:hover, .pp-swatch:focus-visible {
  transform: translateY(1px);
  box-shadow: inset 0 4px 10px rgba(15,23,42,.30), inset 0 1px 2px rgba(15,23,42,.20);
}

.pp-swatch-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15,23,42,.62);
  opacity: 0;
  transition: opacity .15s ease;
}

.pp-swatch:hover .pp-swatch-overlay,
.pp-swatch:focus-visible .pp-swatch-overlay,
.pp-swatch.copied .pp-swatch-overlay {
  opacity: 1;
}

.pp-swatch-overlay span {
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.pp-swatch.copied .pp-swatch-overlay { background: rgba(95,130,217,.92); }

.pp-palette-link-wrap { padding: 0 16px 14px; }

.pp-palette-link, .pp-btn {
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--pp-border, #c8d4e4);
  border-radius: 12px;
  background: var(--pp-btn-bg, linear-gradient(to bottom, #fff, #eef4fb));
  box-shadow: 0 2px 6px rgba(100,120,180,.12);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
  text-decoration: none;
  cursor: pointer;
}

.pp-palette-link { display: flex; width: 100%; height: 42px; padding: 0 18px; }

.pp-palette-link:hover,
.pp-palette-link:focus-visible,
.pp-btn:hover,
.pp-btn:focus-visible {
  transform: translateY(1px);
  border-color: #b4c3dc;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc);
  color: var(--pp-accent, #7758ba);
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18);
}

.pp-palette-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 16px 16px;
  padding: 12px 14px;
  border: 1px solid var(--pp-border-soft, #dde6f2);
  border-radius: 12px;
  background: linear-gradient(to bottom, #f8fbff, #eef4fb);
  color: var(--pp-muted, #7888a8);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

.pp-note-icon { color: #6087d1; font-size: 13px; line-height: 1; }

/* ---------- Gallery page ---------- */

.pp-gal { padding: 14px 0 20px; color: var(--pp-text, #3a4258); }

.pp-gal-head {
  position: relative;
  overflow: hidden;
  margin-bottom: 18px;
  padding: 26px 28px;
  border: 1px solid var(--pp-border, #c8d4e4);
  border-radius: 12px;
  background: linear-gradient(135deg, #f8fbff 0%, #eef4fb 60%, #e6e9f8 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 4px 14px rgba(100,120,180,.12);
}

.pp-gal-head h1 {
  margin: 0 0 6px;
  color: var(--pp-heading, #3a4a68);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.2px;
}

.pp-gal-head p { margin: 0; color: var(--pp-muted, #7888a8); font-size: 13px; line-height: 1.6; }

.pp-gal-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }

.pp-gal-filters { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 8px; }

.pp-chip {
  padding: 8px 14px;
  border: 1px solid var(--pp-border, #c8d4e4);
  border-radius: 12px;
  background: var(--pp-btn-bg, linear-gradient(to bottom, #fff, #eef4fb));
  color: var(--pp-btn-text, #4b5d7d);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background .12s ease, box-shadow .12s ease, border-color .12s ease, color .12s ease;
}

.pp-chip:hover, .pp-chip:focus-visible {
  transform: translateY(1px);
  border-color: #b4c3dc;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc);
  color: var(--pp-accent, #7758ba);
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18);
}

.pp-chip.is-active {
  border-color: transparent;
  background: linear-gradient(135deg, #5f82d9, #8c6ad9);
  color: #fff;
  box-shadow: 0 6px 16px rgba(119,88,186,.30), inset 0 1px 0 rgba(255,255,255,.28);
}

.pp-gal-search {
  box-sizing: border-box;
  width: 220px;
  max-width: 100%;
  padding: 9px 14px;
  border: 1px solid var(--pp-border, #c8d4e4);
  border-radius: 12px;
  background: var(--pp-input, #fff);
  color: var(--pp-text, #3a4258);
  font: inherit;
  font-size: 12px;
}

.pp-gal-search:focus { outline: 0; border-color: #8c6ad9; box-shadow: 0 0 0 3px rgba(140,106,217,.18); }

.pp-gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }

.pp-pal-card {
  overflow: hidden;
  border: 1px solid var(--pp-border-card, #d6e0ec);
  border-radius: 12px;
  background: var(--pp-card-bg, linear-gradient(to bottom, #f8fbff, #eef4fb));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 4px 14px rgba(100,120,180,.10);
  transition: border-color .12s ease, box-shadow .12s ease;
}

.pp-pal-card:hover { border-color: #b4c3dc; box-shadow: 0 8px 22px rgba(100,120,180,.18); }

.pp-pal-strip { display: flex; height: 120px; }

.pp-pal-strip .pp-swatch {
  flex: 1 1 0;
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: flex .18s ease;
}

.pp-pal-strip .pp-swatch:hover, .pp-pal-strip .pp-swatch:focus-visible {
  flex: 1.7 1 0;
  transform: none;
  box-shadow: none;
}

.pp-pal-body { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }

.pp-pal-info { flex: 1 1 auto; min-width: 0; }

.pp-pal-name { margin: 0; color: var(--pp-heading, #3a4a68); font-size: 14px; font-weight: 800; }

.pp-pal-tags {
  margin-top: 3px;
  color: var(--pp-faint, #9aaac0);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pp-pal-copy { padding: 7px 12px; font-size: 11px; }

.pp-gal-count {
  margin: -4px 0 12px;
  color: var(--pp-faint, #9aaac0);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pp-gal-morewrap { display: flex; justify-content: center; margin-top: 22px; }

.pp-gal-empty {
  padding: 40px 0;
  color: var(--pp-muted, #7888a8);
  font-style: italic;
  text-align: center;
}

/* ---------- Dark ---------- */

body.b2.dark .pp-palette-top { border-bottom-color: #1d2a44; }

body.b2.dark .pp-palette-icon {
  border-color: #22314d;
  background: linear-gradient(to bottom, #1e2a42, #172238);
}

body.b2.dark .pp-palette-text strong,
body.b2.dark .pp-pal-name,
body.b2.dark .pp-gal-head h1 {
  color: #dbeafe;
}

body.b2.dark .pp-palette-text span, body.b2.dark .pp-gal-head p { color: #8494ad; }

body.b2.dark .pp-swatch {
  border-color: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 4px 12px rgba(0,0,0,.35);
}

body.b2.dark .pp-swatch-overlay { background: rgba(7,11,19,.72); }

body.b2.dark .pp-swatch.copied .pp-swatch-overlay { background: rgba(119,88,186,.92); }

body.b2.dark .pp-palette-link, body.b2.dark .pp-btn, body.b2.dark .pp-chip {
  border-color: #22314d;
  background: linear-gradient(to bottom, #131d31, #0f1726);
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}

body.b2.dark .pp-palette-link:hover,
body.b2.dark .pp-btn:hover,
body.b2.dark .pp-chip:hover,
body.b2.dark .pp-palette-link:focus-visible,
body.b2.dark .pp-btn:focus-visible,
body.b2.dark .pp-chip:focus-visible {
  border-color: #354a6f;
  background: linear-gradient(to bottom, #0d1524, #121c2f);
  color: #8fb2ff;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.40);
}

body.b2.dark .pp-chip.is-active {
  border-color: transparent;
  background: linear-gradient(135deg, #5f82d9, #8c6ad9);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
}

body.b2.dark .pp-palette-note {
  border-color: #1d2a44;
  background: linear-gradient(to bottom, #131d31, #0f1726);
  color: #8494ad;
}

body.b2.dark .pp-note-icon { color: #8fb2ff; }

body.b2.dark .pp-gal-head {
  border-color: #22314d;
  background: linear-gradient(135deg, #0f1726, #0c1320 60%, #141a33);
  box-shadow: 0 6px 18px rgba(0,0,0,.40);
}

body.b2.dark .pp-pal-card {
  border-color: #22314d;
  background: linear-gradient(to bottom, #131d31, #0f1726);
  box-shadow: 0 4px 14px rgba(0,0,0,.30);
}

body.b2.dark .pp-pal-card:hover { border-color: #354a6f; box-shadow: 0 8px 22px rgba(0,0,0,.45); }

body.b2.dark .pp-gal-search { border-color: #22314d; background: #0d1524; color: #cbd5e1; }

@media (max-width: 640px) {
  .pp-gal-search { width: 100%; }

  .pp-gal-head { padding: 20px; }
}

/* ==========================================================
   35. PixelPoint — "Above Board" welcome hero
   Paste into the theme CSS (works with the existing HTML).
   Uses the theme tokens (--pp-*), light + dark.
   ========================================================== */

.pp-welcome-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  overflow: hidden;
  padding: 36px 40px;
  border: 1px solid var(--pp-border, #c8d4e4);
  border-radius: 12px;
  background: linear-gradient(135deg, #f8fbff 0%, #eef4fb 60%, #e6e9f8 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 4px 14px rgba(100,120,180,.12);
}

/* Nearly transparent palette + brush watermark */

.pp-welcome-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50% !important;
  right: 26% !important;
  left: auto !important;
  bottom: auto !important;
  width: 280px !important;
  height: 280px !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: translateY(-50%) rotate(-12deg) !important;
  opacity: .075;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%237758ba' d='M256 24C128 24 24 120 24 240c0 100 76 176 170 176 26 0 40-12 40-30 0-12-6-20-12-28-6-8-12-16-12-28 0-22 18-38 40-38h54c70 0 130-42 130-110C434 88 358 24 256 24zM120 252a32 32 0 1 1 0-64 32 32 0 0 1 0 64zm64-88a32 32 0 1 1 0-64 32 32 0 0 1 0 64zm128 0a32 32 0 1 1 0-64 32 32 0 0 1 0 64zm64 88a32 32 0 1 1 0-64 32 32 0 0 1 0 64z'/%3E%3Cpath fill='%234c6ec4' d='M470 300l-92 92c-8 8-8 20 0 28l22 22c8 8 20 8 28 0l92-92c8-8 8-20 0-28l-22-22c-8-8-20-8-28 0z' opacity='.0'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}

/* Soft brush stroke accent, bottom-right */

.pp-welcome-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -40px !important;
  bottom: -60px !important;
  left: auto !important;
  top: auto !important;
  width: 360px !important;
  height: 360px !important;
  border: 0 !important;
  border-radius: 0 !important;
  opacity: .06;
  transform: rotate(18deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%235f82d9' d='M452 28c-20-20-52-20-72 0L210 198l104 104L484 132c20-20 20-52 0-72zM190 226c-48 0-86 36-90 84-2 28-16 52-44 66-12 6-14 22-2 28 30 14 64 20 98 8 46-16 72-60 66-104z'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}

.pp-welcome-main { flex: 1 1 auto; min-width: 0; max-width: 640px; }

.pp-welcome-badge {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, #5f82d9, #8c6ad9);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .03em;
}

.pp-welcome-hero h1 {
  margin: 0 0 10px;
  color: var(--pp-heading, #3a4a68);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.3px;
}

.pp-welcome-hero p {
  margin: 0 0 22px;
  color: var(--pp-muted, #7888a8);
  font-size: 14px;
  line-height: 1.7;
}

/* ---- Buttons: same shape + border as the nav buttons ---- */

.pp-welcome-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.pp-welcome-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  border: 1px solid var(--pp-border, #c8d4e4);
  border-style: solid;
  border-radius: 12px;
  background: var(--pp-btn-bg, linear-gradient(to bottom, #fff, #eef4fb));
  box-shadow: 0 2px 6px rgba(100,120,180,.12);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
  text-decoration: none;
}

/* Normal hover = pressed in */

.pp-welcome-btn:hover, .pp-welcome-btn:focus-visible {
  transform: translateY(1px);
  border-color: #b4c3dc;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc);
  color: var(--pp-accent, #7758ba);
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18);
}

/* Join Pixel Point: filled gradient, its own hover (deeper press + darker gradient) */

.pp-welcome-btn.primary {
  border-color: transparent;
  background: linear-gradient(135deg, #5f82d9, #8c6ad9);
  box-shadow: 0 6px 16px rgba(119,88,186,.34), inset 0 1px 0 rgba(255,255,255,.28);
}

.pp-welcome-btn.primary:hover, .pp-welcome-btn.primary:focus-visible {
  transform: translateY(1px);
  border-color: transparent;
  background: linear-gradient(135deg, #6a8be0, #9776e0);
  color: #fff;
  box-shadow: inset 0 3px 6px rgba(60,40,130,.22), inset 0 1px 2px rgba(60,40,130,.14);
}

/* ---- Feature cards ---- */

.pp-welcome-features { display: flex; flex: 0 0 330px; flex-direction: column; gap: 12px; }

.pp-welcome-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--pp-border, #c8d4e4);
  border-radius: 12px;
  background: var(--pp-btn-bg, linear-gradient(to bottom, #fff, #eef4fb));
  box-shadow: 0 2px 6px rgba(100,120,180,.10);
}

.pp-feature-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--pp-border-soft, #dde6f2);
  border-radius: 10px;
  background: #eef2fa;
  font-size: 18px;
}

.pp-welcome-feature strong {
  color: var(--pp-btn-text, #4b5d7d);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

/* ---- Dark ---- */

body.b2.dark .pp-welcome-hero {
  border-color: #22314d;
  background: linear-gradient(135deg, #0f1726 0%, #0c1320 60%, #141a33 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 6px 18px rgba(0,0,0,.40);
}

body.b2.dark .pp-welcome-hero::after { opacity: .08; filter: brightness(1.6); }

body.b2.dark .pp-welcome-hero h1 { color: #dbeafe; }

body.b2.dark .pp-welcome-hero p { color: #8494ad; }

body.b2.dark .pp-welcome-btn, body.b2.dark .pp-welcome-feature {
  border-color: #22314d;
  background: linear-gradient(to bottom, #131d31, #0f1726);
  color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}

body.b2.dark .pp-welcome-feature strong { color: #cbd5e1; }

body.b2.dark .pp-feature-icon { border-color: #22314d; background: #0d1524; }

body.b2.dark .pp-welcome-btn:hover, body.b2.dark .pp-welcome-btn:focus-visible {
  border-color: #354a6f;
  background: linear-gradient(to bottom, #0d1524, #121c2f);
  color: #8fb2ff;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.40);
}

body.b2.dark .pp-welcome-btn.primary {
  border-color: transparent;
  background: linear-gradient(135deg, #5f82d9, #8c6ad9);
  box-shadow: 0 6px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18);
}

body.b2.dark .pp-welcome-btn.primary:hover,
body.b2.dark .pp-welcome-btn.primary:focus-visible {
  background: linear-gradient(135deg, #6a8be0, #9776e0);
  color: #fff;
  box-shadow: inset 0 3px 8px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.40);
}

/* ---- Responsive ---- */

@media (max-width: 900px) {
  .pp-welcome-hero { flex-direction: column; align-items: stretch; padding: 26px 22px; }

  .pp-welcome-features { flex-basis: auto; }

  .pp-welcome-hero::before { right: -40px !important; top: 30% !important; }
}

/* Join Pixel Point hover: keep the purple gradient (beats the theme's global .btn hover) */

body.b2 a.pp-welcome-btn.primary:is(:hover, :focus-visible) {
  transform: translateY(1px) !important;
  border: 1px solid transparent !important;
  background: linear-gradient(135deg, #6a8be0, #9776e0) !important;
  color: #fff !important;
  box-shadow: inset 0 3px 6px rgba(60,40,130,.22), inset 0 1px 2px rgba(60,40,130,.14) !important;
}

body.b2.dark a.pp-welcome-btn.primary:is(:hover, :focus-visible) {
  box-shadow: inset 0 3px 7px rgba(0,0,0,.35), inset 0 1px 2px rgba(0,0,0,.25) !important;
}

/* dark hero: palette watermark in the theme's blue instead of purple */

body.b2.dark .pp-welcome-hero::before {
  opacity: .075 !important;
  filter: none !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%238fb2ff' d='M256 24C128 24 24 120 24 240c0 100 76 176 170 176 26 0 40-12 40-30 0-12-6-20-12-28-6-8-12-16-12-28 0-22 18-38 40-38h54c70 0 130-42 130-110C434 88 358 24 256 24zM120 252a32 32 0 1 1 0-64 32 32 0 0 1 0 64zm64-88a32 32 0 1 1 0-64 32 32 0 0 1 0 64zm128 0a32 32 0 1 1 0-64 32 32 0 0 1 0 64zm64 88a32 32 0 1 1 0-64 32 32 0 0 1 0 64z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

/* ============================================
   36. SEARCH — header box, results dropdown, results page
   ============================================ */

/* header search box */

body.b2 .b2-search__input {
  height: 36px;
  padding: 0 16px;
  border: 1px solid #c4d2e8 !important;
  border-radius: 999px !important;
  background: linear-gradient(#fff, #eef3fb) !important;
  font-size: 12.5px;
  box-shadow: inset 0 1px 3px rgba(100,120,180,.14) !important;
  outline: 0 !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}

body.b2 .b2-search__input:focus {
  border-color: #8c6ad9 !important;
  box-shadow: 0 0 0 3px rgba(140,106,217,.18), inset 0 1px 3px rgba(100,120,180,.14) !important;
}

body.b2.dark .b2-search__input {
  border-color: #2a3a58 !important;
  background: linear-gradient(#0d1524, #121c2f) !important;
  color: #e2e8f4;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.45) !important;
}

body.b2.dark .b2-search__input:focus {
  border-color: #6f8bf0 !important;
  box-shadow: 0 0 0 3px rgba(111,139,240,.22), inset 0 2px 5px rgba(0,0,0,.45) !important;
}

/* icon button while the box is open: soft, not a strong purple block */

body.b2 .b2-search.is-open .b2-search__btn { box-shadow: none; }

/* live results dropdown */

body.b2 .b2-search__results {
  border: 1px solid var(--pp-border);
  border-radius: 12px;
  background: linear-gradient(#fcfdff, #f2f6fc);
  box-shadow: 0 14px 34px rgba(80,100,160,.22);
  overflow: hidden;
}

body.b2 .b2-search__results a { color: var(--pp-heading); font-weight: 400; }

body.b2 .b2-search__results a:hover, body.b2 .b2-search__results [aria-selected="true"] {
  background: #e9eff9;
  color: var(--pp-accent);
}

body.b2.dark .b2-search__results {
  border-color: #22314d;
  background: linear-gradient(#15203a, #0e1626);
  box-shadow: 0 14px 34px rgba(0,0,0,.55);
}

body.b2.dark .b2-search__results a { color: #cbd5e1; }

body.b2.dark .b2-search__results a:hover,
body.b2.dark .b2-search__results [aria-selected="true"] {
  background: #1a2742;
  color: #8fb2ff;
}

/* results page layout cards */

body.b2 .b2-srch__rail, body.b2 .b2-srch__bar, body.b2 .b2-srch__panel {
  border: 1px solid var(--pp-border);
  border-radius: 12px;
  background: linear-gradient(#fcfdff, #f2f6fc);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 6px 18px rgba(80,100,160,.10);
}

body.b2.dark .b2-srch__rail, body.b2.dark .b2-srch__bar, body.b2.dark .b2-srch__panel {
  border-color: #22314d;
  background: linear-gradient(#15203a, #0e1626);
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
}

/* panel wraps the result cards; let the cards carry the boxes */

body.b2 .b2-srch__panel { border: 0; background: transparent; box-shadow: none; }

/* search bar */

body.b2 .b2-srch__bar { gap: 10px; padding: 10px 12px; align-items: center; }

body.b2 .b2-srch__bar > i { color: #8c6ad9; }

body.b2 .b2-srch__bar input[type="search"] {
  height: 40px;
  border: 1px solid #c4d2e8;
  border-radius: 999px;
  background: linear-gradient(#fff, #eef3fb);
  box-shadow: inset 0 1px 3px rgba(100,120,180,.14);
}

body.b2 .b2-srch__bar input[type="search"]:focus {
  border-color: #8c6ad9;
  box-shadow: 0 0 0 3px rgba(140,106,217,.18);
  outline: 0;
}

body.b2.dark .b2-srch__bar input[type="search"] {
  border-color: #2a3a58;
  background: linear-gradient(#0d1524, #121c2f);
  color: #e2e8f4;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.45);
}

/* Search button: same primary look as every other main button */

body.b2 .b2-srch__go {
  height: 40px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--pp-grad-accent);
  color: #fff;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 11px;
  box-shadow: 0 4px 12px rgba(111,106,217,.35), inset 0 1px 0 rgba(255,255,255,.3);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}

/* left filter rail */

body.b2 .b2-srch__rail { padding: 14px 12px; }

body.b2 .b2-srch__rail :is(h2, h3, h4, label, legend) {
  color: #8a9bb8;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

body.b2 .b2-srch__rail select {
  height: 38px;
  border: 1px solid #c4d2e8;
  border-radius: 10px;
  background-color: #f3f6fc;
  background-image: linear-gradient(#fff, #eef3fb);
  color: #5b6d8e;
  box-shadow: inset 0 1px 0 #fff;
}

body.b2 .b2-srch__rail select:focus {
  border-color: #8c6ad9;
  box-shadow: 0 0 0 3px rgba(140,106,217,.18);
  outline: 0;
}

body.b2 .b2-srch__rail a {
  border-radius: 10px;
  color: var(--pp-heading);
  font-weight: 400;
  transition: background .15s ease;
}

body.b2 .b2-srch__rail a:hover { background: #eef3fb; }

body.b2 .b2-srch__rail :is(a.is-active, a.active, a[aria-current], .is-active > a, .active > a) {
  background: linear-gradient(#e9eff9, #f3f6fc);
  box-shadow: inset 0 2px 5px rgba(100,120,180,.2);
  color: var(--pp-accent);
}

body.b2.dark .b2-srch__rail select {
  border-color: #2a3a58;
  background-image: linear-gradient(#1a2742, #111a2e);
  background-color: #111a2e;
  color: #b9c8e6;
  box-shadow: none;
}

body.b2.dark .b2-srch__rail a { color: #cbd5e1; }

body.b2.dark .b2-srch__rail a:hover { background: #1a2742; }

body.b2.dark .b2-srch__rail :is(a.is-active, a.active, a[aria-current], .is-active > a, .active > a) {
  background: linear-gradient(#0d1524, #121c2f);
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55);
  color: #8fb2ff;
}

/* result cards, highlight, chips */

body.b2 .b2-srch__panel > :is(article, li, .b2-srch__item, .b2-srch__result),
body.b2 .b2-srch__panel :is(article, .b2-srch__item, .b2-srch__result) {
  border: 1px solid var(--pp-border);
  border-radius: 12px;
  background: linear-gradient(#fcfdff, #f2f6fc);
  box-shadow: 0 6px 18px rgba(80,100,160,.10);
}

body.b2.dark .b2-srch__panel :is(article, .b2-srch__item, .b2-srch__result) {
  border-color: #22314d;
  background: linear-gradient(#15203a, #0e1626);
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
}

body.b2 .b2-srch mark {
  padding: 0 4px;
  border-radius: 4px;
  background: rgba(140,106,217,.2);
  color: var(--pp-accent);
}

body.b2.dark .b2-srch mark { background: rgba(111,139,240,.25); color: #b9c8ff; }

body.b2 .b2-srch__panel :is([class*="chip"], [class*="tag"], [class*="pill"]) {
  border: 1px solid #c4d2e8;
  border-radius: 999px;
  background: linear-gradient(#fff, #eef3fb);
  color: #5b6d8e;
}

body.b2.dark .b2-srch__panel :is([class*="chip"], [class*="tag"], [class*="pill"]) {
  border-color: #2a3a58;
  background: linear-gradient(#1a2742, #111a2e);
  color: #b9c8e6;
}

/* ---- search results: real hit classes ---- */

body.b2 .b2-srch__hit {
  position: relative;
  margin-bottom: 12px;
  padding: 16px 20px 14px;
  border: 1px solid var(--pp-border);
  border-radius: 12px;
  background: linear-gradient(#fcfdff, #f2f6fc);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 6px 18px rgba(80,100,160,.10);
  transition: box-shadow .15s ease, transform .15s ease;
}

body.b2 .b2-srch__hit::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 14px;
  border-radius: 11px 11px 0 0;
  pointer-events: none;
  background: var(--pp-grad-accent) top / 100% 3px no-repeat;
}

body.b2 .b2-srch__hit:hover {
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 10px 24px rgba(80,100,160,.18);
}

body.b2 .b2-srch__hittitle { color: var(--pp-heading); font-size: 16px; font-weight: 600; }

body.b2 .b2-srch__hittitle:hover { color: var(--pp-accent); }

body.b2 .b2-srch__excerpt {
  margin: 6px 0 10px;
  color: #6b7a96;
  font-size: 12.5px;
  line-height: 1.6;
  word-break: break-word;
}

body.b2 .b2-srch__meta {
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  color: #8a9bb8;
  font-size: 11.5px;
}

body.b2 .b2-srch__meta a:first-of-type { font-weight: 700; opacity: 1; }

body.b2 .b2-srch__pages { margin-top: 14px; }

body.b2.dark .b2-srch__hit {
  border-color: #22314d;
  background: linear-gradient(#15203a, #0e1626);
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
}

body.b2.dark .b2-srch__hit:hover { box-shadow: 0 10px 24px rgba(0,0,0,.55); }

body.b2.dark .b2-srch__hittitle { color: #e2e8f4; }

body.b2.dark .b2-srch__hittitle:hover { color: #8fb2ff; }

body.b2.dark .b2-srch__excerpt { color: #8fa0bd; }

body.b2.dark .b2-srch__meta { color: #7f90ae; }

/* ---- search rail: real classes, remove green in dark ---- */

body.b2 .b2-srch__label {
  color: #8a9bb8;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

body.b2 .b2-srch__type {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  color: var(--pp-heading);
  font-weight: 400;
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}

body.b2 .b2-srch__type i { color: #8c6ad9 !important; }

body.b2 .b2-srch__count { margin-left: auto; color: #8a9bb8; font-size: 11px; }

body.b2 .b2-srch__type:hover { background: #eef3fb; }

body.b2 .b2-srch__type.is-on, body.b2 .b2-srch__type.is-on:hover {
  border-color: #b4c3dc;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc) !important;
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18) !important;
  color: var(--pp-accent) !important;
}

body.b2.dark .b2-srch__type { color: #cbd5e1; }

body.b2.dark .b2-srch__type i { color: #8fb2ff !important; }

body.b2.dark .b2-srch__type:hover { background: #1a2742; }

body.b2.dark .b2-srch__type.is-on, body.b2.dark .b2-srch__type.is-on:hover {
  border-color: #354a6f;
  background: linear-gradient(to bottom, #0d1524, #121c2f) !important;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.4) !important;
  color: #8fb2ff !important;
}

body.b2.dark .b2-srch__label, body.b2.dark .b2-srch__count { color: #7f90ae; }

/* keep the user's group colour but make it readable in dark */

body.b2.dark .b2-srch__meta a:first-of-type { filter: brightness(1.55) saturate(.9); }

/* ---- search: kill stock yellow hover + green dropdown tint ---- */

html body.b2 .b2-srch__go:hover,
html body.b2 .b2-srch__go:focus,
html body.b2 .b2-srch__go:focus-visible,
html body.b2 .b2-srch__go:active {
  background: var(--pp-grad-accent) !important;
  color: #fff !important;
  border: 0 !important;
  outline: 0 !important;
  transform: translateY(1px);
  box-shadow: inset 0 3px 7px rgba(30,30,110,.4), inset 0 1px 2px rgba(30,30,110,.3) !important;
}

body.b2 .b2-search__results :is(i, svg) { color: #8c6ad9 !important; }

body.b2.dark .b2-search__results :is(i, svg) { color: #8fb2ff !important; }

body.b2 .b2-search__results :is(a, [role="option"], li, [class*="item"], [class*="row"]):is(:hover, :focus, .is-active, .is-on, .active, [aria-selected="true"]) {
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc) !important;
  box-shadow: inset 0 3px 6px rgba(100,120,180,.22) !important;
  color: var(--pp-accent) !important;
}

body.b2.dark .b2-search__results :is(a, [role="option"], li, [class*="item"], [class*="row"]):is(:hover, :focus, .is-active, .is-on, .active, [aria-selected="true"]) {
  background: linear-gradient(to bottom, #0d1524, #121c2f) !important;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55) !important;
  color: #8fb2ff !important;
}

/* ---- search: remove empty container box in dark ---- */

body.b2.dark .b2-srch__panel, body.b2.dark .b2-srch__pages {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.b2 .b2-srch__pages:empty { display: none; }

/* ---- header search: no leftover gap when closed ---- */

body.b2 .b2-search:not(.is-open) .b2-search__input {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 0;
  pointer-events: none;
}

/* ============================================
   37. USER CP (overview cards + identity strip)
   ============================================ */

body.b2 .ucp-id, body.b2 .ucp-card {
  position: relative;
  border: 1px solid var(--pp-border);
  border-radius: 12px;
  background: linear-gradient(#fcfdff, #f2f6fc);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 6px 18px rgba(80,100,160,.10);
}

body.b2 .ucp-id::before, body.b2 .ucp-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 14px;
  border-radius: 11px 11px 0 0;
  pointer-events: none;
  background: var(--pp-grad-accent) top / 100% 3px no-repeat;
}

body.b2 .ucp-id { overflow: hidden; }

body.b2 .ucp-id :is(h1, h2, h3, .name, strong) {
  color: var(--pp-heading);
  font-family: var(--pp-font-head, inherit);
  font-weight: 600;
}

body.b2 .ucp-id img { border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 0 0 4px #b4c3dc; }

body.b2 .ucp-cap {
  color: #8a9bb8;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

body.b2 .ucp-card {
  overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

body.b2 .ucp-card__ico {
  border: 1px solid #c4d2e8;
  border-radius: 10px;
  background: linear-gradient(#fff, #eef3fb);
  color: #6f6ad9;
  box-shadow: 0 2px 6px rgba(100,120,180,.15);
}

body.b2 .ucp-card__t { color: var(--pp-heading); font-weight: 700; }

body.b2 .ucp-card__d { color: #6b7a96; }

body.b2 .ucp-card__go { color: #8a9bb8; transition: transform .12s ease, color .12s ease; }

body.b2 .ucp-card__bg { color: #6f6ad9; opacity: .07; }

body.b2 .ucp-card:hover {
  transform: translateY(1px);
  border-color: #b4c3dc;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc);
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18);
}

body.b2 .ucp-card:hover .ucp-card__go { color: var(--pp-accent); transform: translateX(2px); }

body.b2 .ucp-card:hover .ucp-card__t { color: var(--pp-accent); }

/* dark */

body.b2.dark .ucp-id, body.b2.dark .ucp-card {
  border-color: #22314d;
  background: linear-gradient(#15203a, #0e1626);
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
}

body.b2.dark .ucp-id img { box-shadow: 0 0 0 3px #0e1626, 0 0 0 4px #354a6f; }

body.b2.dark .ucp-id :is(h1, h2, h3, .name, strong) { color: #e2e8f4; }

body.b2.dark .ucp-cap { color: #7f90ae; }

body.b2.dark .ucp-card__ico {
  border-color: #2a3a58;
  background: linear-gradient(#1a2742, #111a2e);
  color: #8fb2ff;
  box-shadow: none;
}

body.b2.dark .ucp-card__t { color: #e2e8f4; }

body.b2.dark .ucp-card__d { color: #8fa0bd; }

body.b2.dark .ucp-card__go { color: #7f90ae; }

body.b2.dark .ucp-card__bg { color: #8fb2ff; opacity: .06; }

body.b2.dark .ucp-card:hover {
  border-color: #354a6f;
  background: linear-gradient(to bottom, #0d1524, #121c2f);
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.4);
}

body.b2.dark .ucp-card:hover .ucp-card__go, body.b2.dark .ucp-card:hover .ucp-card__t { color: #8fb2ff; }

/* ---- side menu (User CP and other menu layouts) ---- */

body.b2 .menu-layout .panel--secondary { padding-bottom: 8px; }

body.b2 .menu-layout .panel__sub-header {
  margin: 0;
  border: 0;
  background: transparent;
  color: #8a9bb8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

body.b2 .menu-layout .menu__items { margin: 0; list-style: none; display: flex; flex-direction: column; }

body.b2 .menu-layout .menu-item > a {
  display: block;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--pp-heading);
  font-weight: 400;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

body.b2 .menu-layout .menu-item > a:hover {
  transform: translateY(1px);
  border-color: #b4c3dc;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc);
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18);
  color: var(--pp-accent);
}

body.b2 .menu-layout .menu-item__active > a,
body.b2 .menu-layout .menu-item__active > a:hover {
  border-color: #b4c3dc;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc);
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18);
  color: var(--pp-accent);
  font-weight: 600;
}

body.b2.dark .menu-layout .panel__sub-header { color: #7f90ae; }

body.b2.dark .menu-layout .menu-item > a { color: #cbd5e1; }

body.b2.dark .menu-layout .menu-item > a:hover,
body.b2.dark .menu-layout .menu-item__active > a,
body.b2.dark .menu-layout .menu-item__active > a:hover {
  border-color: #354a6f;
  background: linear-gradient(to bottom, #0d1524, #121c2f);
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.4);
  color: #8fb2ff;
}

/* ---- side menu: tighten spacing, align with labels ---- */

body.b2 .menu-layout .menu { padding: 0 !important; margin: 0 !important; }

body.b2 .menu-layout .menu__items { padding: 0 8px 4px !important; gap: 2px !important; }

body.b2 .menu-layout .menu-item {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}

body.b2 .menu-layout .menu-item > a { padding: 7px 12px !important; line-height: 1.35; font-size: 13px; }

body.b2 .menu-layout .panel__sub-header { padding: 12px 16px 6px !important; }

/* ---- guest top bar: Login + Register ---- */

body.b2 .user-menu__guest { gap: 12px; align-items: center; }

body.b2 .user-menu__guest > a:not(.b2-cta) {
  border: 1px solid #c4d2e8;
  border-radius: 999px;
  background: linear-gradient(#fff, #eef3fb);
  color: #5b6d8e !important;
  font-weight: 700;
  letter-spacing: .04em;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

body.b2 .user-menu__guest > a:not(.b2-cta):hover {
  transform: translateY(1px);
  border-color: #b4c3dc;
  color: var(--pp-accent) !important;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc);
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18);
}

html body.b2 .b2-cta, html body.b2 .b2-cta:visited {
  padding: 7px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--pp-grad-accent);
  color: #fff !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(111,106,217,.35), inset 0 1px 0 rgba(255,255,255,.3);
  transition: transform .12s ease, box-shadow .12s ease;
}

html body.b2 .b2-cta:hover, html body.b2 .b2-cta:focus, html body.b2 .b2-cta:active {
  background: var(--pp-grad-accent) !important;
  color: #fff !important;
  transform: translateY(1px);
  box-shadow: inset 0 3px 7px rgba(30,30,110,.4), inset 0 1px 2px rgba(30,30,110,.3) !important;
  outline: 0;
}

body.b2.dark .user-menu__guest > a:not(.b2-cta) {
  border-color: #2a3a58;
  background: linear-gradient(#1a2742, #111a2e);
  color: #b9c8e6 !important;
}

body.b2.dark .user-menu__guest > a:not(.b2-cta):hover {
  border-color: #354a6f;
  color: #8fb2ff !important;
  background: linear-gradient(to bottom, #0d1524, #121c2f);
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.4);
}

/* ============================================
   38. LOGIN / REGISTER (guest-layout b2-auth)
   ============================================ */

body.b2 .b2-auth { background: transparent; }

body.b2 .b2-auth__card {
  position: relative;
  border: 1px solid var(--pp-border);
  border-radius: 16px;
  background: linear-gradient(#fcfdff, #f2f6fc);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 18px 44px rgba(80,100,160,.18);
}

body.b2 .b2-auth__head h1 { color: var(--pp-heading); font-weight: 700; letter-spacing: -.01em; }

body.b2 .b2-auth__body label {
  color: var(--pp-heading);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
}

body.b2 .b2-auth__body :is(input[type="text"], input[type="email"], input[type="password"], input:not([type])) {
  height: 42px;
  padding: 0 16px;
  border: 1px solid #c4d2e8;
  border-radius: 999px;
  background: linear-gradient(#fff, #eef3fb);
  box-shadow: inset 0 1px 3px rgba(100,120,180,.14);
}

body.b2 .b2-auth__body :is(input:focus) {
  border-color: #8c6ad9;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(140,106,217,.18), inset 0 1px 3px rgba(100,120,180,.14);
}

body.b2 .b2-auth__body input[type="checkbox"] { accent-color: #6f6ad9; }

body.b2 .b2-auth__body a { color: var(--pp-accent); }

/* primary submit */

body.b2 .b2-auth__body :is(button[type="submit"], .btn-primary) {
  height: 40px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--pp-grad-accent) !important;
  color: #fff !important;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(111,106,217,.35), inset 0 1px 0 rgba(255,255,255,.3);
  transition: transform .12s ease, box-shadow .12s ease;
}

body.b2 .b2-auth__body :is(button[type="submit"], .btn-primary):is(:hover, :focus-visible, :active) {
  background: var(--pp-grad-accent) !important;
  color: #fff !important;
  transform: translateY(1px);
  outline: 0;
  box-shadow: inset 0 3px 7px rgba(30,30,110,.4), inset 0 1px 2px rgba(30,30,110,.3) !important;
}

/* secondary (ForumSpark account etc.) */

body.b2 .b2-auth__body a[class*="btn"]:not(.btn-primary),
body.b2 .b2-auth__body button:not([type="submit"]) {
  border: 1px solid #c4d2e8;
  border-radius: 999px;
  background: linear-gradient(#fff, #eef3fb);
  color: #5b6d8e;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

body.b2 .b2-auth__body a[class*="btn"]:not(.btn-primary):hover,
body.b2 .b2-auth__body button:not([type="submit"]):hover {
  transform: translateY(1px);
  border-color: #b4c3dc;
  color: var(--pp-accent);
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc);
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18);
}

body.b2 .b2-auth__foot {
  border-top: 1px solid var(--pp-border);
  background: rgba(238,243,251,.6);
  color: #6b7a96;
  border-radius: 0 0 15px 15px;
}

/* dark */

body.b2.dark .b2-auth__card {
  border-color: #22314d;
  background: linear-gradient(#15203a, #0e1626);
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
}

body.b2.dark .b2-auth__head h1, body.b2.dark .b2-auth__body label { color: #e2e8f4; }

body.b2.dark .b2-auth__body :is(input[type="text"], input[type="email"], input[type="password"], input:not([type])) {
  border-color: #2a3a58;
  background: linear-gradient(#0d1524, #121c2f);
  color: #e2e8f4;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.45);
}

body.b2.dark .b2-auth__body input:focus {
  border-color: #6f8bf0;
  box-shadow: 0 0 0 3px rgba(111,139,240,.22), inset 0 2px 5px rgba(0,0,0,.45);
}

body.b2.dark .b2-auth__body a { color: #8fb2ff; }

body.b2.dark .b2-auth__body a[class*="btn"]:not(.btn-primary),
body.b2.dark .b2-auth__body button:not([type="submit"]) {
  border-color: #2a3a58;
  background: linear-gradient(#1a2742, #111a2e);
  color: #b9c8e6;
}

body.b2.dark .b2-auth__body a[class*="btn"]:not(.btn-primary):hover,
body.b2.dark .b2-auth__body button:not([type="submit"]):hover {
  border-color: #354a6f;
  color: #8fb2ff;
  background: linear-gradient(to bottom, #0d1524, #121c2f);
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.4);
}

body.b2.dark .b2-auth__foot { border-top-color: #22314d; background: rgba(13,21,36,.6); color: #8fa0bd; }

/* ---- guest top bar: no dark band, Register works in dark ---- */

html body.b2 .user-menu.b2-topbar, html body.b2.dark .user-menu.b2-topbar {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body.b2.dark .b2-cta, html body.b2.dark .b2-cta:visited {
  background: var(--pp-grad-accent) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 4px 12px rgba(111,106,217,.35), inset 0 1px 0 rgba(255,255,255,.25);
}

html body.b2.dark .b2-cta:hover,
html body.b2.dark .b2-cta:focus,
html body.b2.dark .b2-cta:active {
  background: var(--pp-grad-accent) !important;
  color: #fff !important;
  box-shadow: inset 0 3px 7px rgba(30,30,110,.45), inset 0 1px 2px rgba(30,30,110,.3) !important;
}

/* ---- auth card: clean accent bar, link colours ---- */

body.b2 .b2-auth__card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  pointer-events: none;
  z-index: 1;
  height: 3px;
  background: var(--pp-grad-accent);
  border-radius: 16px 16px 0 0;
}

body.b2 .b2-auth__body a:not([class*="btn"]):not(.btn-primary) { color: var(--pp-accent); }

body.b2 .b2-auth__body :is(.muted, small, [class*="alt"], [class*="login"], [class*="already"]) {
  color: #6b7a96;
}

body.b2.dark .b2-auth__body :is(.muted, small, [class*="alt"], [class*="login"], [class*="already"]) {
  color: #8fa0bd;
}

body.b2 .b2-auth__brand img { border-radius: 10px; }

/* ---- guest top bar: Login and Register same height ---- */

html body.b2 .user-menu__guest > a, html body.b2 .user-menu__guest > a.b2-cta {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 36px !important;
  padding: 0 18px !important;
  line-height: 1 !important;
  font-size: 11px !important;
}

/* ---- guest links: pull in to line up with the card's right edge (mirrors the logo's left inset) ---- */

/* ---- guest links: shift with transform instead of padding (padding squeezed them out of view on smaller screens) ---- */

/* ---- guest links: anchor to the card's right edge, never past the viewport ---- */

html body.b2 .user-menu.b2-topbar:has(.user-menu__guest) { position: relative; }

html body.b2 .user-menu.b2-topbar .user-menu__links {
  position: absolute !important;
  top: 28px;
  right: calc(max(2vw, (100vw - 1800px) / 2) + 44px) !important;
  left: auto !important;
  transform: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: calc(100vw - 24px);
  z-index: 5;
}

@media (max-width: 900px) {
  html body.b2 .user-menu.b2-topbar .user-menu__links { right: 16px !important; top: 16px; }
}

/* ---- forum icon tile: centre horizontally + vertically in the marker column (Edge/Chrome/Firefox) ---- */

html body.b2 .b2-forum__marker {
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  align-self: stretch !important;
  min-height: 100%;
}

html body.b2 .b2-forum__marker > :not([class*="dot"]):not([class*="badge"]):not([class*="unread"]) {
  position: static !important;
  flex: none !important;
  margin: auto !important;
  align-self: center !important;
  justify-self: center !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px;
  min-height: 46px;
  top: auto !important;
  left: auto !important;
  transform: none !important;
}

/* ---- forum icon: the real tile is .forum__marker-badge (it was being treated as the unread dot) ---- */

html body.b2 .b2-forum__marker > .forum__marker-badge {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: auto !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 46px !important;
  height: 46px !important;
  padding: 0;
  border: 1px solid #d2dcee;
  border-radius: 12px;
  background: linear-gradient(to bottom, #ffffff, #e9eff9) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 3px 8px rgba(100,120,180,.14);
  color: #6f6ad9 !important;
  transition: color .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

html body.b2 .b2-forum__marker > .forum__marker-badge i,
html body.b2 .b2-forum__marker > .forum__marker-badge svg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  font-size: 20px;
  line-height: 1;
  color: inherit !important;
}

html body.b2 .b2-forum__marker > .forum__marker-badge i::before { display: block; line-height: 1; }

/* unread: accent gradient tile, white glyph */

html body.b2 .b2-forum__marker > .forum__marker-badge--unread {
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(111,106,217,.35), inset 0 1px 0 rgba(255,255,255,.3);
}

/* hover: pressed-in */

html body.b2 .b2-forum:hover .b2-forum__marker > .forum__marker-badge--read {
  border-color: #b4c3dc;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc) !important;
  box-shadow: inset 0 2px 5px rgba(100,120,180,.22);
  color: #7758ba !important;
}

/* dark */

html body.b2.dark .b2-forum__marker > .forum__marker-badge--read {
  border-color: #22314d;
  background: linear-gradient(to bottom, #172238, #0f1726) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 3px 8px rgba(0,0,0,.35);
  color: #8fb2ff !important;
}

html body.b2.dark .b2-forum:hover .b2-forum__marker > .forum__marker-badge--read {
  border-color: #354a6f;
  background: linear-gradient(to bottom, #0d1524, #121c2f) !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.5);
}

/* ---- profile action buttons (other member's profile): equal size, one row ---- */

html body.b2 .b2-prof__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

html body.b2 .b2-prof__acts > form { display: contents; margin: 0; }

html body.b2 .b2-prof__acts > a.btn, html body.b2 .b2-prof__acts .b2-prof__followbtn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  height: 36px !important;
  min-height: 0 !important;
  width: auto !important;
  padding: 0 16px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .1em;
  line-height: 1 !important;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 999px !important;
}

html body.b2 .b2-prof__acts > a.btn i, html body.b2 .b2-prof__acts .b2-prof__followbtn i {
  font-size: 12px;
  margin: 0;
}

/* the "..." more button: small circle on the same row */

html body.b2 .b2-prof__acts button:not(.b2-prof__followbtn) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border-radius: 50% !important;
}

/* ---- profile "..." menu: clean list rows, not pill buttons ---- */

html body.b2 .b2-prof__menupop {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 190px;
  padding: 6px;
  border: 1px solid var(--pp-border);
  border-radius: 12px;
  background: linear-gradient(#fcfdff, #f2f6fc);
  box-shadow: 0 14px 34px rgba(80,100,160,.22);
}

html body.b2 .b2-prof__menupop form { display: block; margin: 0; }

html body.b2 .b2-prof__acts .b2-prof__menupop :is(a, button) {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  box-sizing: border-box;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 8px 12px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--pp-heading) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  line-height: 1.3 !important;
  white-space: normal;
}

html body.b2 .b2-prof__acts .b2-prof__menupop :is(a, button) i {
  width: 16px;
  text-align: center;
  font-size: 13px;
  color: #8c6ad9;
  flex: none;
}

html body.b2 .b2-prof__acts .b2-prof__menupop :is(a, button):is(:hover, :focus-visible) {
  transform: none;
  border-color: #b4c3dc !important;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc) !important;
  box-shadow: inset 0 3px 6px rgba(100,120,180,.22) !important;
  color: var(--pp-accent) !important;
}

html body.b2 .b2-prof__menusep { height: 1px; margin: 4px 6px; background: var(--pp-border); border: 0; }

html body.b2.dark .b2-prof__menupop {
  border-color: #22314d;
  background: linear-gradient(#15203a, #0e1626);
  box-shadow: 0 14px 34px rgba(0,0,0,.55);
}

html body.b2.dark .b2-prof__acts .b2-prof__menupop :is(a, button) {
  color: #cbd5e1 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

html body.b2.dark .b2-prof__acts .b2-prof__menupop :is(a, button) i { color: #8fb2ff; }

html body.b2.dark .b2-prof__acts .b2-prof__menupop :is(a, button):is(:hover, :focus-visible) {
  border-color: #354a6f !important;
  background: linear-gradient(to bottom, #0d1524, #121c2f) !important;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55) !important;
  color: #8fb2ff !important;
}

html body.b2.dark .b2-prof__menusep { background: #22314d; }

/* ============================================
   39. PRIVATE MESSAGES (cv-*) — compose card
   ============================================ */

body.b2 .cv-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--pp-border);
  border-radius: 14px;
  background: linear-gradient(#fcfdff, #f2f6fc);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 8px 22px rgba(80,100,160,.12);
}

body.b2 .cv-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  z-index: 1;
  background: var(--pp-grad-accent);
  pointer-events: none;
}

body.b2 .cv-card__head { border-bottom: 1px solid var(--pp-border); background: transparent; }

body.b2 .cv-card__head h1 { color: var(--pp-heading); font-weight: 700; }

body.b2 .cv-card__head .avatar { box-shadow: 0 0 0 3px #fff, 0 0 0 4px #b4c3dc; }

body.b2 .cv-flabel {
  color: var(--pp-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}

body.b2 .cv-inp {
  height: 42px;
  padding: 0 16px;
  border: 1px solid #c4d2e8;
  border-radius: 999px;
  background: linear-gradient(#fff, #eef3fb);
  color: var(--pp-heading);
  box-shadow: inset 0 1px 3px rgba(100,120,180,.14);
  transition: border-color .15s ease, box-shadow .15s ease;
}

body.b2 .cv-inp:focus {
  border-color: #8c6ad9;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(140,106,217,.18), inset 0 1px 3px rgba(100,120,180,.14);
}

/* editor wrapper */

/* footer + buttons */

body.b2 .cv-card__foot { border-top: 1px solid var(--pp-border); background: rgba(238,243,251,.7); }

body.b2 .cv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 20px;
  box-sizing: border-box;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, color .12s ease;
}

html body.b2 .cv-btn--primary {
  border: 0;
  background: var(--pp-grad-accent);
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(111,106,217,.35), inset 0 1px 0 rgba(255,255,255,.3);
}

html body.b2 .cv-btn--primary:is(:hover, :focus-visible, :active) {
  background: var(--pp-grad-accent);
  color: #fff !important;
  outline: 0;
  transform: translateY(1px);
  box-shadow: inset 0 3px 7px rgba(30,30,110,.4), inset 0 1px 2px rgba(30,30,110,.3);
}

html body.b2 .cv-btn--ghost {
  border: 1px solid #c4d2e8;
  background: linear-gradient(#fff, #eef3fb);
  color: #5b6d8e !important;
}

html body.b2 .cv-btn--ghost:is(:hover, :focus-visible) {
  transform: translateY(1px);
  border-color: #b4c3dc;
  color: var(--pp-accent) !important;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc);
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18);
}

/* dark */

body.b2.dark .cv-card {
  border-color: #22314d;
  background: linear-gradient(#15203a, #0e1626);
  box-shadow: 0 8px 22px rgba(0,0,0,.45);
}

body.b2.dark .cv-card__head { border-bottom-color: #22314d; }

body.b2.dark .cv-card__head h1, body.b2.dark .cv-flabel { color: #e2e8f4; }

body.b2.dark .cv-card__head .avatar { box-shadow: 0 0 0 3px #0e1626, 0 0 0 4px #354a6f; }

body.b2.dark .cv-inp {
  border-color: #2a3a58;
  background: linear-gradient(#0d1524, #121c2f);
  color: #e2e8f4;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.45);
}

body.b2.dark .cv-inp:focus {
  border-color: #6f8bf0;
  box-shadow: 0 0 0 3px rgba(111,139,240,.22), inset 0 2px 5px rgba(0,0,0,.45);
}

body.b2.dark .cv-card__foot { border-top-color: #22314d; background: rgba(13,21,36,.6); }

html body.b2.dark .cv-btn--ghost {
  border-color: #2a3a58;
  background: linear-gradient(#1a2742, #111a2e);
  color: #b9c8e6 !important;
}

html body.b2.dark .cv-btn--ghost:is(:hover, :focus-visible) {
  border-color: #354a6f;
  color: #8fb2ff !important;
  background: linear-gradient(to bottom, #0d1524, #121c2f);
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.4);
}

/* ---- messages: don't box the whole editor (it also holds the emoticon tray + attach button) ---- */

html body.b2 .cv-card .b2-editor,
html body.b2.dark .cv-card .b2-editor,
html body.b2 .cv-card .b2-editor:focus-within,
html body.b2.dark .cv-card .b2-editor:focus-within {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body.b2 .cv-card .b2-editor :is(.tiptap-wrap, [class*="editor__box"]):focus-within {
  border-color: #8c6ad9;
  box-shadow: 0 0 0 3px rgba(140,106,217,.18);
}

html body.b2.dark .cv-card .b2-editor :is(.tiptap-wrap, [class*="editor__box"]):focus-within {
  border-color: #6f8bf0;
  box-shadow: 0 0 0 3px rgba(111,139,240,.22);
}

/* ---- messages: Send button hover stays solid (stock hover was fading it) ---- */

html body.b2 .cv-btn--primary:is(:hover, :focus, :focus-visible, :active),
html body.b2.dark .cv-btn--primary:is(:hover, :focus, :focus-visible, :active) {
  opacity: 1 !important;
  filter: none !important;
  background: var(--pp-grad-accent) !important;
  background-image: var(--pp-grad-accent) !important;
  color: #fff !important;
  border: 0 !important;
  outline: 0 !important;
  transform: translateY(1px);
  box-shadow: inset 0 3px 7px rgba(30,30,110,.45), inset 0 1px 2px rgba(30,30,110,.3) !important;
}

html body.b2 .cv-btn--primary:is(:hover, :focus, :focus-visible, :active) * {
  color: #fff !important;
  opacity: 1 !important;
}

/* ============================================
   40. MESSAGES — inbox sidebar + open conversation (cv--thread)
   ============================================ */

body.b2 .cv-side, body.b2 .cv-thread {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--pp-border);
  border-radius: 14px;
  background: linear-gradient(#fcfdff, #f2f6fc);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 8px 22px rgba(80,100,160,.12);
}

body.b2 .cv-side::before, body.b2 .cv-thread::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  z-index: 2;
  pointer-events: none;
  background: var(--pp-grad-accent);
}

/* sidebar head */

body.b2 .cv-side__title { color: var(--pp-heading); font-weight: 700; }

body.b2 .cv-side__title i, body.b2 .cv-side__title svg { color: #8c6ad9; }

body.b2 .cv-newbox > :is(button, a) {
  border: 1px solid #c4d2e8;
  border-radius: 10px;
  background: linear-gradient(#fff, #eef3fb);
  color: #5b6d8e;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, color .12s ease;
}

body.b2 .cv-newbox > :is(button, a):hover {
  transform: translateY(1px);
  border-color: #b4c3dc;
  color: var(--pp-accent);
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc);
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18);
}

/* All / Unread / Read pills */

body.b2 .cv-fp {
  border: 1px solid #c4d2e8;
  border-radius: 999px;
  background: linear-gradient(#fff, #eef3fb);
  color: #5b6d8e;
  font-weight: 700;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, color .12s ease;
}

body.b2 .cv-fp:hover, body.b2 .cv-fp.is-on {
  transform: translateY(1px);
  border-color: #b4c3dc;
  color: var(--pp-accent);
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc);
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18);
}

/* search + icon button */

body.b2 .cv-search .cv-inp { height: 38px; }

body.b2 .cv-ib { color: #8c6ad9; border: 0; background: transparent; }

body.b2 .cv-ib:hover { color: var(--pp-accent); }

/* conversation rows */

body.b2 .cv-row {
  border-bottom: 1px solid var(--pp-border-soft, var(--pp-border));
  background: transparent;
  transition: background .15s ease;
}

body.b2 .cv-row:hover { background: #eef3fb; }

body.b2 .cv-row.is-active {
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc);
  box-shadow: inset 0 3px 6px rgba(100,120,180,.2);
  border-left: 3px solid #8c6ad9;
}

body.b2 .cv-row__snip { color: #6b7a96; }

body.b2 .cv-row__you { color: #8c6ad9; font-weight: 600; }

/* conversation header */

body.b2 .cv-thead { border-bottom: 1px solid var(--pp-border); background: transparent; }

body.b2 .cv-thead__n { color: var(--pp-heading); font-weight: 700; }

body.b2 .cv-thead__s { color: #8a9bb8; }

body.b2 .cv-thead__act button, body.b2 .cv-thead__back { color: #6b7a96; }

body.b2 .cv-thead__act button:hover, body.b2 .cv-thead__back:hover { color: var(--pp-accent); }

/* message stream: soft tinted well instead of flat grey */

body.b2 .cv-msgs {
  background: linear-gradient(#f3f6fc, #eaf0fa);
  box-shadow: inset 0 3px 8px rgba(100,120,180,.10);
}

body.b2 .cv-msg [class*="bubble"],
body.b2 .cv-msg > div:not([class*="meta"]):not([class*="time"]) {
  border: 1px solid #c4d2e8;
  border-radius: 14px 14px 4px 14px;
  background: linear-gradient(#fff, #eef3fb);
  color: var(--pp-heading);
  box-shadow: 0 2px 6px rgba(100,120,180,.12);
}

body.b2 .cv-msg--me [class*="bubble"],
body.b2 .cv-msg--me > div:not([class*="meta"]):not([class*="time"]) {
  border: 0;
  background: var(--pp-grad-accent);
  color: #fff;
  box-shadow: 0 4px 12px rgba(111,106,217,.30);
}

body.b2 .cv-msg [class*="time"], body.b2 .cv-msg [class*="meta"] { color: #8a9bb8; }

/* composer strip */

body.b2 .cv-composer { border-top: 1px solid var(--pp-border); background: rgba(238,243,251,.6); }

/* ---- dark ---- */

body.b2.dark .cv-side, body.b2.dark .cv-thread {
  border-color: #22314d;
  background: linear-gradient(#15203a, #0e1626);
  box-shadow: 0 8px 22px rgba(0,0,0,.45);
}

body.b2.dark .cv-side__title, body.b2.dark .cv-thead__n { color: #e2e8f4; }

body.b2.dark .cv-side__title i, body.b2.dark .cv-side__title svg { color: #8fb2ff; }

body.b2.dark .cv-newbox > :is(button, a), body.b2.dark .cv-fp {
  border-color: #2a3a58;
  background: linear-gradient(#1a2742, #111a2e);
  color: #b9c8e6;
}

body.b2.dark .cv-newbox > :is(button, a):hover,
body.b2.dark .cv-fp:hover,
body.b2.dark .cv-fp.is-on {
  border-color: #354a6f;
  color: #8fb2ff;
  background: linear-gradient(to bottom, #0d1524, #121c2f);
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.4);
}

body.b2.dark .cv-ib { color: #8fb2ff; }

body.b2.dark .cv-row { border-bottom-color: #22314d; }

body.b2.dark .cv-row:hover { background: #1a2742; }

body.b2.dark .cv-row.is-active {
  background: linear-gradient(to bottom, #0d1524, #121c2f);
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55);
  border-left-color: #6f8bf0;
}

body.b2.dark .cv-row__snip, body.b2.dark .cv-thead__s { color: #8fa0bd; }

body.b2.dark .cv-row__you { color: #8fb2ff; }

body.b2.dark .cv-thead { border-bottom-color: #22314d; }

body.b2.dark .cv-msgs {
  background: linear-gradient(#0d1524, #0a111e);
  box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
}

body.b2.dark .cv-msg [class*="bubble"],
body.b2.dark .cv-msg > div:not([class*="meta"]):not([class*="time"]) {
  border-color: #2a3a58;
  background: linear-gradient(#1a2742, #111a2e);
  color: #e2e8f4;
  box-shadow: none;
}

body.b2.dark .cv-msg--me [class*="bubble"],
body.b2.dark .cv-msg--me > div:not([class*="meta"]):not([class*="time"]) {
  border: 0;
  background: var(--pp-grad-accent);
  color: #fff;
}

body.b2.dark .cv-composer { border-top-color: #22314d; background: rgba(13,21,36,.6); }

/* ---- messages: style the real bubble (.cv-bub); un-box the wrappers my earlier guess caught ---- */

html body.b2 .cv-msg > .cv-msg__col,
html body.b2 .cv-msg .cv-msg__wrap,
html body.b2 .cv-msg .cv-msg__meta,
html body.b2.dark .cv-msg > .cv-msg__col,
html body.b2.dark .cv-msg .cv-msg__wrap,
html body.b2.dark .cv-msg .cv-msg__meta {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: inherit;
}

html body.b2 .cv-msg__meta { color: #8a9bb8 !important; font-size: 11px; }

html body.b2.dark .cv-msg__meta { color: #7f90ae !important; }

body.b2 .cv-bub {
  padding: 10px 14px;
  border: 1px solid #c4d2e8;
  border-radius: 16px 16px 16px 4px;
  background: linear-gradient(#fff, #eef3fb);
  color: var(--pp-heading);
  box-shadow: 0 2px 6px rgba(100,120,180,.12);
}

body.b2 .cv-msg--me .cv-bub {
  border: 0;
  border-radius: 16px 16px 4px 16px;
  background: var(--pp-grad-accent);
  color: #fff;
  box-shadow: 0 4px 12px rgba(111,106,217,.30), inset 0 1px 0 rgba(255,255,255,.25);
}

body.b2 .cv-msg--me .cv-bub a { color: #fff; text-decoration: underline; }

body.b2.dark .cv-bub {
  border-color: #2a3a58;
  background: linear-gradient(#1a2742, #111a2e);
  color: #e2e8f4;
  box-shadow: none;
}

body.b2.dark .cv-msg--me .cv-bub {
  border: 0;
  background: var(--pp-grad-accent);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
}

/* message options button + menu */

body.b2 .cv-msg__menubtn { color: #8a9bb8; background: transparent; border: 0; border-radius: 50%; }

body.b2 .cv-msg__menubtn:hover, body.b2 .cv-msg__menubtn.is-open {
  color: var(--pp-accent);
  background: #e9eff9;
  box-shadow: inset 0 2px 4px rgba(100,120,180,.2);
}

body.b2 .cv-msg__menu {
  border: 1px solid var(--pp-border);
  border-radius: 12px;
  background: linear-gradient(#fcfdff, #f2f6fc);
  box-shadow: 0 14px 34px rgba(80,100,160,.22);
  overflow: hidden;
}

body.b2 .cv-msg__menu :is(a, button) { color: var(--pp-heading); background: transparent; }

body.b2 .cv-msg__menu :is(a, button):hover {
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc);
  color: var(--pp-accent);
  box-shadow: inset 0 2px 5px rgba(100,120,180,.2);
}

body.b2.dark .cv-msg__menubtn:hover, body.b2.dark .cv-msg__menubtn.is-open {
  color: #8fb2ff;
  background: #121c2f;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.5);
}

body.b2.dark .cv-msg__menu {
  border-color: #22314d;
  background: linear-gradient(#15203a, #0e1626);
  box-shadow: 0 14px 34px rgba(0,0,0,.55);
}

body.b2.dark .cv-msg__menu :is(a, button) { color: #cbd5e1; }

body.b2.dark .cv-msg__menu :is(a, button):hover {
  background: linear-gradient(to bottom, #0d1524, #121c2f);
  color: #8fb2ff;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55);
}

/* ---- messages: row menu must not be clipped by the sidebar ---- */

html body.b2 .cv-side, html body.b2 .cv-list, html body.b2 .cv-row { overflow: visible !important; }

body.b2 .cv-side::before { border-radius: 14px 14px 0 0; }

html body.b2 .cv-row { position: relative; }

html body.b2 .cv-row:has(.cv-row__menu [x-show]:not([style*="display: none"])),
html body.b2 .cv-row:focus-within {
  z-index: 20;
}

/* the dropdown itself */

html body.b2 .cv-row__menu > div:not(:empty) {
  z-index: 50;
  min-width: 170px;
  padding: 6px;
  border: 1px solid var(--pp-border);
  border-radius: 12px;
  background: linear-gradient(#fcfdff, #f2f6fc);
  box-shadow: 0 14px 34px rgba(80,100,160,.22);
  white-space: nowrap;
}

html body.b2 .cv-row__menu > div :is(a, button) {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--pp-heading);
  font-size: 13px;
  font-weight: 400;
  text-align: left;
}

html body.b2 .cv-row__menu > div :is(a, button):hover {
  border-color: #b4c3dc;
  color: var(--pp-accent);
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc);
  box-shadow: inset 0 3px 6px rgba(100,120,180,.22);
}

html body.b2.dark .cv-row__menu > div:not(:empty) {
  border-color: #22314d;
  background: linear-gradient(#15203a, #0e1626);
  box-shadow: 0 14px 34px rgba(0,0,0,.55);
}

html body.b2.dark .cv-row__menu > div :is(a, button) { color: #cbd5e1; }

html body.b2.dark .cv-row__menu > div :is(a, button):hover {
  border-color: #354a6f;
  color: #8fb2ff;
  background: linear-gradient(to bottom, #0d1524, #121c2f);
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55);
}

/* ---- messages: align panels, empty state ---- */

html body.b2 .cv--thread { align-items: start; }

html body.b2 .cv--thread > .cv-side, html body.b2 .cv--thread > .cv-thread {
  margin-top: 0 !important;
  align-self: start;
}

body.b2 .cv-thread [class*="empty"] { color: #6b7a96; }

body.b2 .cv-thread [class*="empty"] :is(i, svg) { color: #8c6ad9; }

body.b2 .cv-thread [class*="empty"] > :is(div, span):first-child:has(:is(i, svg)) {
  border: 1px solid #c4d2e8;
  background: linear-gradient(#fff, #eef3fb);
  box-shadow: 0 4px 12px rgba(100,120,180,.16);
}

html body.b2 .cv-thread [class*="empty"] :is(a, button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 20px;
  box-sizing: border-box;
  border: 0;
  border-radius: 999px;
  background: var(--pp-grad-accent);
  color: #fff !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(111,106,217,.35), inset 0 1px 0 rgba(255,255,255,.3);
  transition: transform .12s ease, box-shadow .12s ease;
}

html body.b2 .cv-thread [class*="empty"] :is(a, button):is(:hover, :focus-visible, :active) {
  background: var(--pp-grad-accent);
  color: #fff !important;
  outline: 0;
  transform: translateY(1px);
  box-shadow: inset 0 3px 7px rgba(30,30,110,.4), inset 0 1px 2px rgba(30,30,110,.3);
}

body.b2.dark .cv-thread [class*="empty"] { color: #8fa0bd; }

body.b2.dark .cv-thread [class*="empty"] :is(i, svg) { color: #8fb2ff; }

body.b2.dark .cv-thread [class*="empty"] > :is(div, span):first-child:has(:is(i, svg)) {
  border-color: #2a3a58;
  background: linear-gradient(#1a2742, #111a2e);
  box-shadow: none;
}

/* ---- messages sidebar: accent bar drawn as a background layer so it follows the rounded border (no overflow clipping needed) ---- */

html body.b2 .cv-side::before { display: none !important; }

/* ---- messages empty state: real classes ---- */

html body.b2 .cv-empty__ico {
  border: 1px solid #c4d2e8;
  border-radius: 50%;
  background: linear-gradient(#fff, #eef3fb);
  color: #8c6ad9;
  box-shadow: 0 4px 12px rgba(100,120,180,.16);
}

html body.b2 .cv-empty > button.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 20px;
  box-sizing: border-box;
  border: 0 !important;
  border-radius: 999px;
  background: var(--pp-grad-accent) !important;
  color: #fff !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(111,106,217,.35), inset 0 1px 0 rgba(255,255,255,.3);
}

html body.b2 .cv-empty > button.btn-primary i { color: #fff !important; margin-right: 0 !important; }

html body.b2 .cv-empty > button.btn-primary:is(:hover, :focus, :focus-visible, :active),
html body.b2.dark .cv-empty > button.btn-primary:is(:hover, :focus, :focus-visible, :active) {
  opacity: 1 !important;
  filter: none !important;
  background: var(--pp-grad-accent) !important;
  background-image: var(--pp-grad-accent) !important;
  color: #fff !important;
  border: 0 !important;
  outline: 0 !important;
  transform: translateY(1px);
  box-shadow: inset 0 3px 7px rgba(30,30,110,.45), inset 0 1px 2px rgba(30,30,110,.3) !important;
}

html body.b2 .cv-empty > button.btn-primary:is(:hover, :focus, :active) i { color: #fff !important; }

html body.b2.dark .cv-empty__ico {
  border-color: #2a3a58;
  background: linear-gradient(#1a2742, #111a2e);
  color: #8fb2ff;
  box-shadow: none;
}

/* ---- messages sidebar: make the accent bar visible (a child background was covering it) ---- */

html body.b2 .cv-side > .cv-side__head, html body.b2 .cv-side > :first-child {
  background: transparent !important;
  border-top: 0 !important;
  box-shadow: none !important;
}

html body.b2 .cv-side { border-top-width: 0 !important; }

html body.b2 .cv-side__head { padding-top: 18px; }

/* ============================================
   41. STAFF PAGE (staff2)
   ============================================ */

body.b2 .staff2__sec { align-items: center; gap: 10px; margin: 8px 0 14px; }

body.b2 .staff2__sec-title { margin: 0; color: var(--pp-heading); font-size: 17px; font-weight: 700; }

body.b2 .staff2__sec-count {
  min-width: 26px;
  padding: 3px 9px;
  border: 1px solid #c4d2e8;
  border-radius: 999px;
  text-align: center;
  background: linear-gradient(#fff, #eef3fb);
  color: #5b6d8e;
  font-size: 11px;
  font-weight: 700;
}

body.b2 .staff2__sec-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--pp-border), transparent);
}

body.b2 .staff2__grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 26px;
}

body.b2 .staff2-card {
  position: relative;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 24px 18px 18px;
  border: 1px solid var(--pp-border);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 6px 18px rgba(80,100,160,.10);
  transition: transform .15s ease, box-shadow .15s ease;
}

body.b2 .staff2-card:hover {
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 10px 24px rgba(80,100,160,.18);
}

body.b2 .staff2-card__av { position: relative; }

body.b2 .staff2-card__av .avatar { box-shadow: 0 0 0 3px #fff, 0 0 0 4px #b4c3dc; }

body.b2 .staff2-card__dot { border: 2px solid #fcfdff; }

body.b2 .staff2-card__name { font-size: 16px; font-weight: 700; }

body.b2 .staff2-card__title { color: #6b7a96; font-size: 12.5px; }

body.b2 .staff2-card__seen { color: #8a9bb8; font-size: 11.5px; }

body.b2 .staff2-card__acts { gap: 8px; margin-top: 12px; }

body.b2 .staff2-card__acts .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 14px;
  box-sizing: border-box;
  border: 1px solid #c4d2e8;
  border-radius: 999px;
  background: linear-gradient(#fff, #eef3fb);
  color: #5b6d8e;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 5px rgba(100,120,180,.10);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, color .12s ease;
}

body.b2 .staff2-card__acts .btn:hover {
  transform: translateY(1px);
  border-color: #b4c3dc;
  color: var(--pp-accent);
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc);
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18);
}

/* Message = primary pill */

html body.b2 .staff2-card__acts .btn-primary {
  border: 0;
  background: var(--pp-grad-accent);
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(111,106,217,.32), inset 0 1px 0 rgba(255,255,255,.3);
}

html body.b2 .staff2-card__acts .btn-primary:is(:hover, :focus-visible, :active) {
  background: var(--pp-grad-accent);
  color: #fff !important;
  opacity: 1;
  filter: none;
  box-shadow: inset 0 3px 7px rgba(30,30,110,.4), inset 0 1px 2px rgba(30,30,110,.3);
}

/* dark */

body.b2.dark .staff2__sec-title { color: #e2e8f4; }

body.b2.dark .staff2__sec-count {
  border-color: #2a3a58;
  background: linear-gradient(#1a2742, #111a2e);
  color: #b9c8e6;
}

body.b2.dark .staff2__sec-rule { background: linear-gradient(to right, #22314d, transparent); }

body.b2.dark .staff2-card { border-color: #22314d; box-shadow: 0 6px 18px rgba(0,0,0,.4); }

body.b2.dark .staff2-card:hover { box-shadow: 0 10px 24px rgba(0,0,0,.55); }

body.b2.dark .staff2-card__av .avatar { box-shadow: 0 0 0 3px #0e1626, 0 0 0 4px #354a6f; }

body.b2.dark .staff2-card__dot { border-color: #0e1626; }

body.b2.dark .staff2-card__title { color: #8fa0bd; }

body.b2.dark .staff2-card__seen { color: #7f90ae; }

body.b2.dark .staff2-card__acts .btn:not(.btn-primary) {
  border-color: #2a3a58;
  background: linear-gradient(#1a2742, #111a2e);
  color: #b9c8e6;
  box-shadow: none;
}

body.b2.dark .staff2-card__acts .btn:not(.btn-primary):hover {
  border-color: #354a6f;
  color: #8fb2ff;
  background: linear-gradient(to bottom, #0d1524, #121c2f);
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.4);
}

/* ---- staff: thicker accent bar, Message button keeps gradient in every state (incl. dark hover) ---- */

html body.b2 .staff2-card__acts a.btn-primary,
html body.b2.dark .staff2-card__acts a.btn-primary {
  border: 0 !important;
  background: var(--pp-grad-accent) !important;
  background-image: var(--pp-grad-accent) !important;
  color: #fff !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: 0 3px 10px rgba(111,106,217,.32), inset 0 1px 0 rgba(255,255,255,.3) !important;
}

html body.b2 .staff2-card__acts a.btn-primary:is(:hover, :focus, :focus-visible, :active),
html body.b2.dark .staff2-card__acts a.btn-primary:is(:hover, :focus, :focus-visible, :active) {
  background: var(--pp-grad-accent) !important;
  background-image: var(--pp-grad-accent) !important;
  color: #fff !important;
  border: 0 !important;
  outline: 0 !important;
  transform: translateY(1px);
  box-shadow: inset 0 3px 7px rgba(30,30,110,.45), inset 0 1px 2px rgba(30,30,110,.3) !important;
}

html body.b2 .staff2-card__acts a.btn-primary i { color: #fff !important; }

/* ============================================
   42. NOTIFICATIONS DROPDOWN — rows + type badge
   ============================================ */

body.b2 .na-group {
  color: #8a9bb8;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

body.b2 .na-row {
  position: relative;
  margin: 6px 8px;
  padding: 12px 44px 12px 12px;
  border: 1px solid var(--pp-border);
  border-radius: 12px;
  background: linear-gradient(#fcfdff, #f2f6fc);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 3px 10px rgba(80,100,160,.08);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

body.b2 .na-row:hover {
  border-color: #b4c3dc;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc);
  box-shadow: inset 0 3px 6px rgba(100,120,180,.22);
}

body.b2 .na-row.notification--unread { border-left: 3px solid #8c6ad9; }

/* the round type badge (trophy, reply, etc.): a clean circle in the row's top-right corner */

html body.b2 .na-row__badge {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  bottom: auto !important;
  place-items: center;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: var(--pp-grad-accent) !important;
  color: #fff !important;
  box-shadow: 0 3px 8px rgba(111,106,217,.35), inset 0 1px 0 rgba(255,255,255,.3);
  transform: none !important;
}

html body.b2 .na-row__badge i, html body.b2 .na-row__badge svg {
  display: block;
  margin: 0;
  font-size: 11px;
  line-height: 1;
  color: #fff !important;
}

body.b2 .na-row p { margin: 0; }

body.b2 .na-row p strong { color: var(--pp-heading); }

body.b2 .na-row p span { color: #8a9bb8; }

body.b2 .na-row img { border-radius: 8px; }

body.b2.dark .na-group { color: #7f90ae; }

body.b2.dark .na-row {
  border-color: #22314d;
  background: linear-gradient(#15203a, #0e1626);
  box-shadow: 0 3px 10px rgba(0,0,0,.35);
}

body.b2.dark .na-row:hover {
  border-color: #354a6f;
  background: linear-gradient(to bottom, #0d1524, #121c2f);
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55);
}

body.b2.dark .na-row.notification--unread { border-left-color: #6f8bf0; }

body.b2.dark .na-row p, body.b2.dark .na-row p strong { color: #e2e8f4; }

body.b2.dark .na-row p span { color: #7f90ae; }

/* ---- notifications footer: Settings + Mark all read as soft pills ---- */

body.b2 .notifications__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--pp-border);
  background: rgba(238,243,251,.6);
}

html body.b2 .notifications__settings-link, html body.b2 .notifications__actions > button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 14px;
  box-sizing: border-box;
  border: 1px solid #c4d2e8;
  border-radius: 999px;
  background: linear-gradient(#fff, #eef3fb) !important;
  color: #5b6d8e !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 5px rgba(100,120,180,.10);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, color .12s ease;
}

html body.b2 .notifications__settings-link i { color: #8c6ad9 !important; font-size: 12px; }

html body.b2 .notifications__settings-link:is(:hover, :focus-visible),
html body.b2 .notifications__actions > button:is(:hover, :focus-visible) {
  transform: translateY(1px);
  outline: 0;
  border-color: #b4c3dc;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc) !important;
  color: var(--pp-accent) !important;
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18);
}

html body.b2 .notifications__settings-link:is(:hover, :focus-visible) i {
  color: var(--pp-accent) !important;
}

body.b2.dark .notifications__actions { border-top-color: #22314d; background: rgba(13,21,36,.6); }

html body.b2.dark .notifications__settings-link,
html body.b2.dark .notifications__actions > button {
  border-color: #2a3a58;
  background: linear-gradient(#1a2742, #111a2e) !important;
  color: #b9c8e6 !important;
  box-shadow: none;
}

html body.b2.dark .notifications__settings-link i { color: #8fb2ff !important; }

html body.b2.dark .notifications__settings-link:is(:hover, :focus-visible),
html body.b2.dark .notifications__actions > button:is(:hover, :focus-visible) {
  border-color: #354a6f;
  color: #8fb2ff !important;
  background: linear-gradient(to bottom, #0d1524, #121c2f) !important;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.4);
}

html body.b2.dark .notifications__settings-link:is(:hover, :focus-visible) i {
  color: #8fb2ff !important;
}

/* ---- notifications: matching footer pills, readable row text ---- */

html body.b2 .notifications__actions > a.notifications__settings-link {
  border: 1px solid #c4d2e8 !important;
  background: linear-gradient(#fff, #eef3fb) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 5px rgba(100,120,180,.10) !important;
  border-radius: 999px !important;
}

html body.b2.dark .notifications__actions > a.notifications__settings-link {
  border: 1px solid #2a3a58 !important;
  background: linear-gradient(#1a2742, #111a2e) !important;
  box-shadow: none !important;
}

html body.b2 .notifications__actions > a.notifications__settings-link:is(:hover, :focus-visible) {
  border-color: #b4c3dc !important;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc) !important;
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18) !important;
}

html body.b2.dark .notifications__actions > a.notifications__settings-link:is(:hover, :focus-visible) {
  border-color: #354a6f !important;
  background: linear-gradient(to bottom, #0d1524, #121c2f) !important;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.4) !important;
}

html body.b2 .na-row p { color: var(--pp-heading) !important; opacity: 1 !important; line-height: 1.45; }

html body.b2 .na-row p strong { font-weight: 700; }

html body.b2 .na-row p .text-gray-500 { color: #8a9bb8 !important; opacity: 1 !important; }

html body.b2.dark .na-row p { color: #e2e8f4 !important; }

html body.b2.dark .na-row p .text-gray-500 { color: #7f90ae !important; }

/* ---- notifications: centre the trophy glyph and the gear glyph ---- */

html body.b2 .na-row__badge {
  display: flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1 !important;
}

html body.b2 .na-row__badge > i, html body.b2 .na-row__badge > svg {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 11px;
  line-height: 1 !important;
  text-align: center;
  position: static !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
}

html body.b2 .na-row__badge > i::before {
  display: block;
  width: auto;
  margin: 0;
  line-height: 1;
  text-align: center;
}

html body.b2 .notifications__settings-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center;
  gap: 7px;
  line-height: 1 !important;
}

html body.b2 .notifications__settings-link > i {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12px;
  line-height: 1 !important;
  position: static !important;
  transform: none !important;
  top: auto !important;
}

html body.b2 .notifications__settings-link > i::before { display: block; line-height: 1; margin: 0; }

/* ---- messages dropdown rows (msg-row): text must stay visible on hover ---- */

body.b2 .msg-row {
  position: relative;
  margin: 6px 8px;
  padding: 10px 12px;
  border: 1px solid var(--pp-border);
  border-radius: 12px;
  background: linear-gradient(#fcfdff, #f2f6fc);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 3px 10px rgba(80,100,160,.08);
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}

body.b2 .msg-row:not(.notification--read) { border-left: 3px solid #8c6ad9; }

html body.b2 .msg-row .msg-row__name {
  color: var(--pp-heading) !important;
  font-weight: 700;
  opacity: 1 !important;
}

html body.b2 .msg-row .msg-row__time { color: #8a9bb8 !important; opacity: 1 !important; }

html body.b2 .msg-row .msg-row__preview { color: #6b7a96 !important; opacity: 1 !important; }

html body.b2 .msg-row:hover {
  border-color: #b4c3dc;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc) !important;
  box-shadow: inset 0 3px 6px rgba(100,120,180,.22) !important;
}

html body.b2 .msg-row:hover .msg-row__name { color: var(--pp-accent) !important; }

html body.b2 .msg-row:hover .msg-row__time { color: #7a8bab !important; }

html body.b2 .msg-row:hover .msg-row__preview { color: #5b6d8e !important; }

body.b2.dark .msg-row {
  border-color: #22314d;
  background: linear-gradient(#15203a, #0e1626);
  box-shadow: 0 3px 10px rgba(0,0,0,.35);
}

body.b2.dark .msg-row:not(.notification--read) { border-left-color: #6f8bf0; }

html body.b2.dark .msg-row .msg-row__name { color: #e2e8f4 !important; }

html body.b2.dark .msg-row .msg-row__time { color: #7f90ae !important; }

html body.b2.dark .msg-row .msg-row__preview { color: #8fa0bd !important; }

html body.b2.dark .msg-row:hover {
  border-color: #354a6f;
  background: linear-gradient(to bottom, #0d1524, #121c2f) !important;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55) !important;
}

html body.b2.dark .msg-row:hover .msg-row__name { color: #8fb2ff !important; }

html body.b2.dark .msg-row:hover .msg-row__time { color: #8fa0bd !important; }

html body.b2.dark .msg-row:hover .msg-row__preview { color: #b9c8e6 !important; }

/* ---- dropdown rows: the full-row click overlay (.notification__link) was painting a background over the text on hover ---- */

html body.b2 .notification__link,
html body.b2 .notification__link:hover,
html body.b2.dark .notification__link,
html body.b2.dark .notification__link:hover {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  z-index: 0 !important;
}

html body.b2 .msg-row > :not(.notification__link),
html body.b2 .notification > :not(.notification__link) {
  position: relative;
  z-index: 1;
}

html body.b2 .msg-row > .msg-row__avatar { z-index: 1; }

/* ---- messages dropdown: "All messages" link as a soft pill, same as "Open chat dock" ---- */

html body.b2 .notifications__view-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 30px;
  box-sizing: border-box;
  border: 1px solid #c4d2e8;
  background: linear-gradient(#fff, #eef3fb);
  color: #5b6d8e !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 5px rgba(100,120,180,.10);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, color .12s ease;
}

html body.b2.dark .notifications__view-all {
  border-color: #2a3a58;
  background: linear-gradient(#1a2742, #111a2e);
  color: #b9c8e6 !important;
  box-shadow: none;
}

/* ---- messages dropdown footer: keep both pills on one line ---- */

html body.b2 .dropdown__content div:has(> .notifications__view-all) {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

html body.b2 :is(.notifications__dock-link, .notifications__view-all) {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap !important;
  font-size: 10px !important;
  letter-spacing: .04em !important;
}

html body.b2 .notifications__dock-link {
  padding-left: 10px;
  padding-right: 12px;
  gap: 6px;
}

html body.b2 .notifications__view-all { padding: 0 12px; flex: 0 0 auto; }

/* ---- messages dropdown footer: no stray blue outline on the pills; same border as "Open chat dock" ---- */

html body.b2 .notifications__view-all,
html body.b2 .notifications__view-all:focus,
html body.b2 .notifications__view-all:focus-visible,
html body.b2 .notifications__view-all:active {
  outline: 0 !important;
  outline-offset: 0 !important;
}

html body.b2.dark .notifications__view-all:not(:hover):not(:focus-visible) {
  border: 1px solid #2a3a58 !important;
  background: linear-gradient(#1a2742, #111a2e) !important;
  color: #b9c8e6 !important;
  box-shadow: none !important;
}

/* ---- "All messages" hover: pressed-in like every other pill (stock hover was adding a bright blue ring) ---- */

html body.b2 .notifications__view-all:is(:hover, :focus-visible) {
  outline: 0 !important;
  border: 1px solid #b4c3dc !important;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc) !important;
  color: var(--pp-accent) !important;
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18) !important;
  transform: translateY(1px);
}

html body.b2.dark .notifications__view-all:is(:hover, :focus-visible) {
  outline: 0 !important;
  border: 1px solid #354a6f !important;
  background: linear-gradient(to bottom, #0d1524, #121c2f) !important;
  color: #8fb2ff !important;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.4) !important;
}

/* ---- messages dropdown footer: both pills fully round ---- */

html body.b2 .notifications__view-all, html body.b2 :is(.notifications__dock-link, .notifications__view-all) {
  border-radius: 999px !important;
}

/* ============================================
   43. USER HOVER CARD (b2-ucard)
   ============================================ */

body.b2 .b2-ucard {
  overflow: hidden;
  border: 1px solid var(--pp-border);
  border-radius: 16px;
  background: linear-gradient(#fcfdff, #f2f6fc);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 18px 44px rgba(80,100,160,.24);
}

/* default cover: theme gradient with a soft sheen (custom covers still win) */

html body.b2 .b2-ucard__cover--default {
  background: radial-gradient(120% 140% at 15% 0%, rgba(255,255,255,.28), transparent 55%),
    var(--pp-grad-accent) !important;
}

body.b2 .b2-ucard__avatar .avatar { box-shadow: 0 0 0 4px #fcfdff, 0 0 0 5px #b4c3dc; }

body.b2 .b2-ucard .username { color: var(--pp-heading); font-weight: 700; }

body.b2 .b2-ucard__group {
  padding: 3px 10px;
  border: 1px solid #c4d2e8;
  border-radius: 999px;
  background: linear-gradient(#fff, #eef3fb);
  color: #5b6d8e;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.b2 .b2-ucard__sub { color: #8a9bb8; }

body.b2 .b2-ucard__stat {
  border: 1px solid #c4d2e8;
  border-radius: 12px;
  background: linear-gradient(#fff, #eef3fb);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 6px rgba(100,120,180,.10);
}

body.b2 .b2-ucard__stat b { color: var(--pp-heading); }

body.b2 .b2-ucard__stat span { color: #8a9bb8; }

body.b2 .b2-ucard__act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  box-sizing: border-box;
  border: 1px solid #c4d2e8;
  border-radius: 999px;
  background: linear-gradient(#fff, #eef3fb);
  color: #5b6d8e;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 5px rgba(100,120,180,.10);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, color .12s ease;
}

body.b2 .b2-ucard__act i { color: #8c6ad9; }

body.b2 .b2-ucard__act:hover {
  transform: translateY(1px);
  border-color: #b4c3dc;
  color: var(--pp-accent);
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc);
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18);
}

html body.b2 .b2-ucard__act--primary, html body.b2 .b2-ucard__act--primary:visited {
  border: 0;
  background: var(--pp-grad-accent) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(111,106,217,.35), inset 0 1px 0 rgba(255,255,255,.3);
}

html body.b2 .b2-ucard__act--primary i { color: #fff; }

html body.b2 .b2-ucard__act--primary:is(:hover, :focus-visible, :active) {
  background: var(--pp-grad-accent) !important;
  color: #fff !important;
  opacity: 1;
  filter: none;
  outline: 0;
  box-shadow: inset 0 3px 7px rgba(30,30,110,.45), inset 0 1px 2px rgba(30,30,110,.3) !important;
}

/* dark */

body.b2.dark .b2-ucard {
  border-color: #22314d;
  background: linear-gradient(#15203a, #0e1626);
  box-shadow: 0 18px 44px rgba(0,0,0,.6);
}

body.b2.dark .b2-ucard__avatar .avatar { box-shadow: 0 0 0 4px #0e1626, 0 0 0 5px #354a6f; }

body.b2.dark .b2-ucard .username { color: #e2e8f4; }

body.b2.dark .b2-ucard__group {
  border-color: #2a3a58;
  background: linear-gradient(#1a2742, #111a2e);
  color: #b9c8e6;
}

body.b2.dark .b2-ucard__sub, body.b2.dark .b2-ucard__stat span { color: #7f90ae; }

body.b2.dark .b2-ucard__stat {
  border-color: #2a3a58;
  background: linear-gradient(#1a2742, #111a2e);
  box-shadow: none;
}

body.b2.dark .b2-ucard__stat b { color: #e2e8f4; }

body.b2.dark .b2-ucard__act:not(.b2-ucard__act--primary) {
  border-color: #2a3a58;
  background: linear-gradient(#1a2742, #111a2e);
  color: #b9c8e6;
  box-shadow: none;
}

body.b2.dark .b2-ucard__act i { color: #8fb2ff; }

body.b2.dark .b2-ucard__act:not(.b2-ucard__act--primary):hover {
  border-color: #354a6f;
  color: #8fb2ff;
  background: linear-gradient(to bottom, #0d1524, #121c2f);
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.4);
}

/* ==========================================================
   44. PIXEL POINT FOOTER (pp-ft) — v2, full redo
   Replaces ALL older footer CSS (.pp-footer*, .pp-affiliate).
   Order: logo > about us > quick links > resources > affiliates
   ========================================================== */

html body.b2 .pp-ft {
  position: relative;
  width: auto;
  max-width: none;
  margin: 28px 0 18px;
  padding: 34px 36px 0;
  border: 1px solid var(--pp-border);
  border-radius: 16px;
  background: linear-gradient(#fcfdff, #f2f6fc) border-box;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 8px 22px rgba(80,100,160,.10);
  color: #6b7a96;
  font-size: 13px;
  line-height: 1.7;
}

/* accent bar: follows the rounded top corners */

html body.b2 .pp-ft::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 16px;
  border-radius: 16px 16px 0 0;
  background: var(--pp-grad-accent);
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 4px, transparent 4px);
  mask: linear-gradient(#000 0 4px, transparent 4px);
}

body.b2 .pp-ft *, body.b2 .pp-ft *::before, body.b2 .pp-ft *::after { box-sizing: border-box; }

/* one row: logo | about | quick links | resources | affiliates */

body.b2 .pp-ft__grid {
  display: grid;
  grid-template-columns: minmax(170px, .9fr) minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
  gap: 36px;
  align-items: start;
  padding-bottom: 30px;
}

/* logo (light / dark swap) */

body.b2 .pp-ft__logo { display: inline-block; margin: 0; line-height: 0; }

body.b2 .pp-ft__logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 220px;
  max-height: 88px;
}

body.b2 .pp-ft__logo .pp-logo--dark { display: none; }

body.b2.dark .pp-ft__logo .pp-logo--light { display: none; }

body.b2.dark .pp-ft__logo .pp-logo--dark { display: block; }

/* headings with short gradient underline */

body.b2 .pp-ft h3 {
  position: relative;
  margin: 0 0 16px;
  padding: 0 0 10px;
  color: var(--pp-heading);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-shadow: none;
  background: none;
  border: 0;
}

body.b2 .pp-ft h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 3px;
  border-radius: 999px;
  background: var(--pp-grad-accent);
}

body.b2 .pp-ft__about p { margin: 0; max-width: 56ch; color: inherit; }

/* link lists */

body.b2 .pp-ft ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.b2 .pp-ft li { margin: 0 !important; padding: 0; }

body.b2 .pp-ft li a {
  display: inline-block;
  margin-left: -10px;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #53627c;
  font-size: 13px;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, color .12s ease;
}

body.b2 .pp-ft li a:hover {
  transform: translateY(1px);
  border-color: #b4c3dc;
  color: var(--pp-accent);
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc);
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18);
}

/* affiliates: logo sits directly on the card */

body.b2 .pp-ft__aff {
  display: inline-block;
  line-height: 0;
  border-radius: 0;
  transition: transform .12s ease, opacity .12s ease;
}

body.b2 .pp-ft__aff img {
  display: block;
  width: auto;
  height: auto;
  max-width: 104px;
  border: 0;
  border-radius: 0;
  mix-blend-mode: normal;
  opacity: 1;
  transform: none;
}

body.b2 .pp-ft__aff:hover { transform: translateY(1px); opacity: .85; }

/* bottom bar */

body.b2 .pp-ft__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 16px 0 20px;
  border-top: 1px solid #dde5f2;
  color: #8795b0;
  font-size: 12px;
}

/* dark */

html body.b2.dark .pp-ft {
  border-color: #22314d;
  color: #8fa0bd;
  background: linear-gradient(#15203a, #0e1626) border-box;
  box-shadow: 0 8px 22px rgba(0,0,0,.45);
}

body.b2.dark .pp-ft h3 { color: #e2e8f4; }

body.b2.dark .pp-ft li a { color: #b9c8e6; }

body.b2.dark .pp-ft li a:hover {
  border-color: #354a6f;
  color: #8fb2ff;
  background: linear-gradient(to bottom, #0d1524, #121c2f);
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.4);
}

body.b2.dark .pp-ft__aff img { mix-blend-mode: normal; }

body.b2.dark .pp-ft__bar { border-top-color: #22314d; color: #6f81a3; }

/* responsive */

@media (max-width: 1100px) {
  body.b2 .pp-ft__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  body.b2 .pp-ft__logocol, body.b2 .pp-ft__about { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  html body.b2 .pp-ft { margin: 20px 0 12px; padding: 26px 20px 0; }

  body.b2 .pp-ft__grid { grid-template-columns: 1fr 1fr; gap: 26px; }

  body.b2 .pp-ft__grid > :last-child { grid-column: 1 / -1; }
}

@media (max-width: 420px) {
  body.b2 .pp-ft__grid { grid-template-columns: 1fr; }
}

/* ==========================================================
   45. PIXEL POINT — BOARD STATISTICS WIDGET
   Replaces your custom .widget--board_statistics CSS: delete that block.
   ========================================================== */

html body.b2 .widget--board_statistics { padding: 22px 0; }

html body.b2 .widget--board_statistics .board-stats-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

/* tile = theme card */

html body.b2 .widget--board_statistics .board-stats-grid__item {
  position: relative;
  min-height: 130px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 16px;
  overflow: visible;
  text-align: center;
  border: 1px solid var(--pp-border) !important;
  border-radius: 14px;
  background: linear-gradient(#fcfdff, #f2f6fc) border-box !important;
  box-shadow: 0 6px 16px rgba(80,100,160,.08) !important;
  transform: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

html body.b2 .widget--board_statistics .board-stats-grid__item:hover {
  transform: none;
  border-color: #b4c3dc !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 10px 22px rgba(80,100,160,.14) !important;
}

/* accent bar: a real element so no stock rule can recolour it */

html body.b2 .widget--board_statistics .board-stats-grid__item::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 14px;
  width: auto;
  -webkit-mask: linear-gradient(#000 0 4px, transparent 4px);
  mask: linear-gradient(#000 0 4px, transparent 4px);
  border: 0 !important;
  border-radius: 14px 14px 0 0;
  opacity: 1 !important;
  transform: none !important;
  background: var(--pp-grad-accent) !important;
  pointer-events: none;
}

html body.b2 .widget--board_statistics .board-stats-grid__item::after {
  content: none !important;
  display: none !important;
}

/* icon: one soft tile, same for every stat */

html body.b2 .widget--board_statistics .board-stats-grid__icon,
html body.b2 .widget--board_statistics .board-stats-grid__item[class*="--"] .board-stats-grid__icon {
  width: 38px;
  height: 38px;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #c4d2e8;
  border-radius: 10px;
  background: linear-gradient(#fff, #eef3fb) !important;
  color: #5f82d9 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 6px rgba(100,120,180,.12);
}

html body.b2 .widget--board_statistics .board-stats-grid__icon svg,
html body.b2 .widget--board_statistics .board-stats-grid__icon i {
  color: inherit;
  stroke: currentColor;
}

/* value: fixed-height row so every label lines up; long names shrink + ellipsis */

html body.b2 .widget--board_statistics .board-stats-grid__value {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 34px;
  margin: 0 0 8px;
  color: var(--pp-heading) !important;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  text-shadow: none;
}

html body.b2 .widget--board_statistics .board-stats-grid__item--newest .board-stats-grid__value {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 34px;
  padding: 0;
  line-height: 34px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--pp-accent) !important;
}

/* label */

html body.b2 .widget--board_statistics .board-stats-grid__label {
  opacity: 1;
  color: #657796;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* dark */

html body.b2.dark .widget--board_statistics .board-stats-grid__item {
  border-color: #22314d !important;
  background: linear-gradient(#15203a, #0e1626) border-box !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.35) !important;
}

html body.b2.dark .widget--board_statistics .board-stats-grid__item:hover {
  border-color: #354a6f !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.45) !important;
}

html body.b2.dark .widget--board_statistics .board-stats-grid__icon,
html body.b2.dark .widget--board_statistics .board-stats-grid__item[class*="--"] .board-stats-grid__icon {
  border-color: #2a3a58;
  background: linear-gradient(#1a2742, #111a2e) !important;
  color: #8fb2ff !important;
  box-shadow: none;
}

html body.b2.dark .widget--board_statistics .board-stats-grid__value { color: #eef4ff !important; }

html body.b2.dark .widget--board_statistics .board-stats-grid__item--newest .board-stats-grid__value {
  color: #8fb2ff !important;
}

html body.b2.dark .widget--board_statistics .board-stats-grid__label { color: #aebbd3; }

@media (max-width: 1000px) {
  html body.b2 .widget--board_statistics .board-stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
}

@media (max-width: 380px) {
  html body.b2 .widget--board_statistics .board-stats-grid { grid-template-columns: 1fr; }
}

/* ==========================================================
   46. PIXEL POINT — CREDITS (b2-coins) BUTTON + DROPDOWN MENU
   Replaces any custom .b2-coins CSS you added.
   ========================================================== */

/* ---- dropdown menu = theme card ---- */

html body.b2 .b2-coins__menu {
  box-sizing: border-box;
  min-width: 250px;
  padding: 6px;
  overflow: visible;
  border: 1px solid var(--pp-border) !important;
  border-radius: 14px;
  background: linear-gradient(#fcfdff, #f2f6fc) border-box !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 14px 32px rgba(80,100,160,.22) !important;
  color: #53627c;
}

html body.b2 .b2-coins__menu::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 14px;
  border-radius: 14px 14px 0 0;
  background: var(--pp-grad-accent);
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 3px, transparent 3px);
  mask: linear-gradient(#000 0 3px, transparent 3px);
}

/* header: balance + owner */

html body.b2 .b2-coins__head { padding: 12px 12px 10px; border: 0; background: none; }

html body.b2 .b2-coins__head b {
  display: block;
  margin: 0 0 2px;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.01em;
  background: var(--pp-grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}

html body.b2 .b2-coins__head span { display: block; color: #7a8aa8; font-size: 12px; font-weight: 600; }

/* divider */

html body.b2 .b2-coins__sep { height: 1px; margin: 4px 8px; border: 0; background: #dde5f2; }

/* items: soft rows that press in on hover */

html body.b2 .b2-coins__item {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  margin: 2px 0;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  box-shadow: none;
  color: #3d4d6b;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, color .12s ease;
}

html body.b2 .b2-coins__item svg, html body.b2 .b2-coins__item i {
  flex: none;
  color: #5f82d9;
  fill: currentColor;
  opacity: 1;
}

html body.b2 .b2-coins__item:hover, html body.b2 .b2-coins__item:focus-visible {
  transform: translateY(1px);
  border-color: #b4c3dc;
  outline: 0;
  color: var(--pp-accent);
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc);
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18);
}

/* STAFF tag */

html body.b2 .b2-coins__item [class*="staff"],
html body.b2 .b2-coins__item [class*="tag"],
html body.b2 .b2-coins__item [class*="badge"],
html body.b2 .b2-coins__item small {
  margin-left: auto;
  padding: 2px 8px;
  border: 1px solid #c4d2e8;
  border-radius: 999px;
  background: linear-gradient(#fff, #eef3fb);
  color: #5b6d8e;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.5;
  white-space: nowrap;
}

/* ---- trigger button ("$ 0 Credits") ---- */

html body.b2 :is(.b2-coins__btn, .b2-coins__trigger, .b2-coins__toggle, .b2-coins__pill, .b2-coins > button) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid #c4d2e8 !important;
  border-radius: 999px;
  background: linear-gradient(#fff, #eef3fb) !important;
  color: #5b6d8e !important;
  font-size: 12px;
  font-weight: 800;
  text-shadow: none;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 6px rgba(100,120,180,.12) !important;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

html body.b2 :is(.b2-coins__btn, .b2-coins__trigger, .b2-coins__toggle, .b2-coins__pill, .b2-coins > button) :is(svg, i) {
  color: #5f82d9 !important;
  fill: currentColor;
}

html body.b2 :is(.b2-coins__btn, .b2-coins__trigger, .b2-coins__toggle, .b2-coins__pill, .b2-coins > button):hover {
  transform: translateY(1px);
  border-color: #b4c3dc !important;
  color: var(--pp-accent) !important;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc) !important;
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18) !important;
}

/* ---- dark ---- */

html body.b2.dark .b2-coins__menu {
  border-color: #22314d !important;
  color: #b9c8e6;
  background: linear-gradient(#15203a, #0e1626) border-box !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.55) !important;
}

body.b2.dark .b2-coins__head span { color: #8fa0bd; }

body.b2.dark .b2-coins__sep { background: #22314d; }

body.b2.dark .b2-coins__item { color: #dbe5f7; }

body.b2.dark .b2-coins__item svg, body.b2.dark .b2-coins__item i { color: #8fb2ff; }

body.b2.dark .b2-coins__item:hover, body.b2.dark .b2-coins__item:focus-visible {
  border-color: #354a6f;
  color: #8fb2ff;
  background: linear-gradient(to bottom, #0d1524, #121c2f);
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.4);
}

html body.b2.dark .b2-coins__item [class*="staff"],
html body.b2.dark .b2-coins__item [class*="tag"],
html body.b2.dark .b2-coins__item [class*="badge"],
html body.b2.dark .b2-coins__item small {
  border-color: #2a3a58;
  background: linear-gradient(#1a2742, #111a2e);
  color: #9fb2d6;
}

html body.b2.dark :is(.b2-coins__btn, .b2-coins__trigger, .b2-coins__toggle, .b2-coins__pill, .b2-coins > button) {
  border-color: #2a3a58 !important;
  background: linear-gradient(#1a2742, #111a2e) !important;
  color: #b9c8e6 !important;
  box-shadow: none !important;
}

html body.b2.dark :is(.b2-coins__btn, .b2-coins__trigger, .b2-coins__toggle, .b2-coins__pill, .b2-coins > button) :is(svg, i) {
  color: #8fb2ff !important;
}

html body.b2.dark :is(.b2-coins__btn, .b2-coins__trigger, .b2-coins__toggle, .b2-coins__pill, .b2-coins > button):hover {
  border-color: #354a6f !important;
  color: #8fb2ff !important;
  background: linear-gradient(to bottom, #0d1524, #121c2f) !important;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.4) !important;
}

/* ==========================================================
   47. PIXEL POINT — CREDITS PAGES (cs-*): balance card, side nav
   gift button, Top Collectors / Shop / Wallet / Inventory content
   ========================================================== */

/* ---- balance card ---- */

html body.b2 .cs-bal {
  position: relative;
  overflow: hidden;
  padding: 20px 20px 18px;
  border: 1px solid var(--pp-border) !important;
  border-radius: 14px;
  background: linear-gradient(#fcfdff, #f2f6fc) border-box !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 6px 16px rgba(80,100,160,.08) !important;
}

html body.b2 .cs-bal::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 14px;
  z-index: 2;
  border-radius: 14px 14px 0 0;
  background: var(--pp-grad-accent);
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 3px, transparent 3px);
  mask: linear-gradient(#000 0 3px, transparent 3px);
}

html body.b2 .cs-bal__bg { color: #5f82d9 !important; opacity: .09 !important; }

html body.b2 .cs-bal__l {
  color: #7a8aa8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

html body.b2 .cs-bal__a { color: var(--pp-heading) !important; font-weight: 900; text-shadow: none; }

html body.b2 .cs-bal__a :is(i, svg) { color: #8c6ad9 !important; fill: currentColor; }

html body.b2 .cs-bal__sub { color: #7a8aa8; font-size: 13px; font-weight: 600; }

/* cards never move on hover (stock lift removed) */

html body.b2 :is(.cs-bal, .cs-nav):is(:hover, :focus-within, :active),
html body.b2 .cs .cs-rail :is(.cs-bal, .cs-nav):is(:hover, :focus-within, :active) {
  transform: none !important;
  translate: none !important;
  top: auto !important;
  left: auto !important;
  margin: 0 !important;
  border-width: 1px !important;
  outline: 0 !important;
}

html body.b2 .cs .cs-nav:is(:hover, :focus-within, :active) { padding: 18px 12px 12px !important; }

html body.b2 .cs-rail { gap: 16px; align-items: stretch; }

html body.b2 :is(.cs-bal, .cs-nav) { transition: none; }

html body.b2 .cs-bal:hover {
  border-color: var(--pp-border) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 6px 16px rgba(80,100,160,.08) !important;
}

html body.b2.dark .cs-bal:hover {
  border-color: #22314d !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.35) !important;
}

/* ---- gold button -> theme gradient primary ---- */

html body.b2 .cs-btn--gold {
  border: 0 !important;
  border-radius: 999px;
  background: var(--pp-grad-accent) !important;
  color: #fff !important;
  font-weight: 800;
  text-shadow: none;
  box-shadow: 0 4px 12px rgba(111,106,217,.35), inset 0 1px 0 rgba(255,255,255,.3) !important;
  transition: transform .12s ease, box-shadow .12s ease;
}

html body.b2 .cs-btn--gold :is(i, svg) { color: #fff !important; fill: currentColor; }

html body.b2 .cs-btn--gold:hover, html body.b2 .cs-btn--gold:focus-visible {
  opacity: 1 !important;
  filter: none !important;
  transform: translateY(1px);
  background: var(--pp-grad-accent) !important;
  color: #fff !important;
  box-shadow: inset 0 3px 8px rgba(40,30,110,.45), inset 0 1px 2px rgba(40,30,110,.3) !important;
}

/* ---- side nav ---- */

html body.b2 .cs-nav {
  border: 1px solid var(--pp-border) !important;
  border-radius: 14px;
  background: linear-gradient(#fcfdff, #f2f6fc) border-box !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 6px 16px rgba(80,100,160,.08) !important;
}

html body.b2 .cs-nav h4 {
  margin: 0 0 8px 10px;
  color: #7a8aa8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

html body.b2 .cs-nl {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 0;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none !important;
  box-shadow: none;
  color: #53627c !important;
  font-size: 14px;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, color .12s ease;
}

html body.b2 .cs-nl :is(i, svg) { color: #5f82d9 !important; fill: currentColor; opacity: 1; }

html body.b2 .cs-nl:hover, html body.b2 .cs-nl.is-on {
  transform: translateY(1px);
  border-color: #b4c3dc;
  color: var(--pp-accent) !important;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc) !important;
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18);
}

/* ---- main column: heading + content cards ---- */

html body.b2 .cs > :not(.cs-rail) :is(h1, h2) {
  color: var(--pp-heading);
  font-weight: 800;
  text-shadow: none;
}

html body.b2 .cs > :not(.cs-rail) :is(h1, h2) :is(i, svg) {
  color: #8c6ad9 !important;
  fill: currentColor;
}

/* ---- dark ---- */

html body.b2.dark .cs-bal, html body.b2.dark .cs-nav {
  border-color: #22314d !important;
  background: linear-gradient(#15203a, #0e1626) border-box !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.35) !important;
}

body.b2.dark .cs-bal__bg { color: #8fb2ff !important; opacity: .08 !important; }

body.b2.dark .cs-bal__l, body.b2.dark .cs-bal__sub, body.b2.dark .cs-nav h4 { color: #8fa0bd; }

html body.b2.dark .cs-bal__a { color: #eef4ff !important; }

html body.b2.dark .cs-bal__a :is(i, svg) { color: #8fb2ff !important; }

html body.b2.dark .cs-nl { color: #b9c8e6 !important; }

html body.b2.dark .cs-nl :is(i, svg) { color: #8fb2ff !important; }

html body.b2.dark .cs-nl:hover, html body.b2.dark .cs-nl.is-on {
  border-color: #354a6f;
  color: #8fb2ff !important;
  background: linear-gradient(to bottom, #0d1524, #121c2f) !important;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.4);
}

html body.b2.dark .cs > :not(.cs-rail) :is(h1, h2) { color: #e2e8f4; }

html body.b2.dark .cs > :not(.cs-rail) :is(h1, h2) :is(i, svg) { color: #8fb2ff !important; }

/* ==========================================================
   48. PIXEL POINT — GIFT CREDITS MODAL (cs-modal)
   ========================================================== */

html body.b2 .cs-modal-bd {
  background: rgba(20,30,55,.45) !important;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

html body.b2.dark .cs-modal-bd { background: rgba(3,6,14,.7) !important; }

html body.b2 .cs-modal {
  position: relative;
  overflow: visible;
  border: 1px solid var(--pp-border) !important;
  border-radius: 16px;
  background: linear-gradient(#fcfdff, #f2f6fc) border-box !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 24px 60px rgba(40,55,100,.35) !important;
  color: #53627c;
}

html body.b2 .cs-modal::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 16px;
  z-index: 2;
  border-radius: 16px 16px 0 0;
  background: var(--pp-grad-accent);
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 4px, transparent 4px);
  mask: linear-gradient(#000 0 4px, transparent 4px);
}

/* header */

html body.b2 .cs-modal__h {
  border-bottom: 1px solid #dde5f2 !important;
  background: none;
  border-radius: 16px 16px 0 0;
}

html body.b2 .cs-modal__h h3 {
  color: var(--pp-heading) !important;
  font-weight: 800;
  text-shadow: none;
}

html body.b2 .cs-modal__h h3 :is(i, svg) { color: #8c6ad9 !important; fill: currentColor; }

html body.b2 .cs-modal__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  box-shadow: none;
  color: #7a8aa8 !important;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

html body.b2 .cs-modal__x:hover {
  transform: translateY(1px);
  border-color: #b4c3dc;
  color: var(--pp-accent) !important;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc);
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18);
}

/* labels */

html body.b2 .cs-modal label,
html body.b2 .cs-modal .cs-fld > :first-child:is(label, span) {
  color: var(--pp-heading);
  font-size: 14px;
  font-weight: 800;
}

html body.b2 .cs-modal label :is(small, span, em) { color: #7a8aa8; font-weight: 600; }

/* inputs */

html body.b2 .cs-modal :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]), textarea, select) {
  box-sizing: border-box;
  border: 1px solid #c4d2e8 !important;
  border-radius: 10px;
  background: linear-gradient(#fff, #f6f9fe) !important;
  color: #3d4d6b !important;
  box-shadow: inset 0 1px 2px rgba(100,120,180,.10) !important;
  outline: 0;
  transition: border-color .12s ease, box-shadow .12s ease;
}

html body.b2 .cs-modal :is(input, textarea)::placeholder { color: #8a99b6; opacity: 1; }

html body.b2 .cs-modal :is(input:not([type=hidden]), textarea, select):focus {
  border-color: #8c6ad9 !important;
  box-shadow: 0 0 0 3px rgba(140,106,217,.18) !important;
}

html body.b2 .cs-modal .cs-fld :is(i, svg) { color: #8c6ad9 !important; fill: currentColor; }

html body.b2 .cs-ac__list {
  border: 1px solid var(--pp-border);
  border-radius: 10px;
  background: #fcfdff;
  box-shadow: 0 10px 24px rgba(80,100,160,.2);
  overflow: hidden;
}

html body.b2 .cs-ac__list :is(li, button, a):hover {
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc);
  color: var(--pp-accent);
}

/* amount presets + balance hint */

html body.b2 .cs-modal__b button:not(.cs-btn):not([type=submit]) {
  padding: 5px 16px;
  border: 1px solid #c4d2e8;
  border-radius: 999px;
  background: linear-gradient(#fff, #eef3fb) !important;
  color: #5b6d8e !important;
  font-weight: 800;
  box-shadow: none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

html body.b2 .cs-modal__b button:not(.cs-btn):not([type=submit]):hover,
html body.b2 .cs-modal__b button:not(.cs-btn):not([type=submit]).is-on {
  transform: translateY(1px);
  border-color: #b4c3dc;
  color: var(--pp-accent) !important;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc) !important;
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18);
}

html body.b2 .cs-modal__b :is(b, strong) { color: var(--pp-accent) !important; }

/* amount preset chips (any naming) */

html body.b2 .cs-modal .cs-qa {
  padding: 5px 16px;
  border: 1px solid #c4d2e8 !important;
  border-radius: 999px;
  background: linear-gradient(#fff, #eef3fb) !important;
  color: #5b6d8e !important;
  font-weight: 800;
  box-shadow: none !important;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

html body.b2 .cs-modal .cs-qa:hover,
html body.b2 .cs-modal .cs-qa:is(.is-on, .on, .active, .selected, [aria-pressed="true"]) {
  transform: translateY(1px);
  border-color: #b4c3dc !important;
  color: var(--pp-accent) !important;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc) !important;
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18) !important;
}

html body.b2.dark .cs-modal .cs-qa {
  border-color: #2a3a58 !important;
  background: linear-gradient(#1a2742, #111a2e) !important;
  color: #b9c8e6 !important;
}

html body.b2.dark .cs-modal .cs-qa:hover,
html body.b2.dark .cs-modal .cs-qa:is(.is-on, .on, .active, .selected, [aria-pressed="true"]) {
  border-color: #354a6f !important;
  color: #8fb2ff !important;
  background: linear-gradient(to bottom, #0d1524, #121c2f) !important;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.4) !important;
}

html body.b2 .cs-modal .cs-qa {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.4;
  user-select: none;
}

html body.b2 .cs-modal .cs-hint { color: #7a8aa8; font-size: 12px; }

html body.b2 .cs-modal .cs-hint :is(b, strong, span) {
  color: var(--pp-accent) !important;
  font-weight: 800;
}

html body.b2.dark .cs-modal .cs-hint { color: #8fa0bd; }

html body.b2.dark .cs-modal .cs-hint :is(b, strong, span) { color: #8fb2ff !important; }

/* footer buttons */

html body.b2 .cs-modal .cs-btn:not(.cs-btn--gold):not([type=submit]) {
  border: 1px solid #c4d2e8 !important;
  border-radius: 999px;
  background: linear-gradient(#fff, #eef3fb) !important;
  color: #5b6d8e !important;
  box-shadow: none !important;
  font-weight: 800;
}

html body.b2 .cs-modal .cs-btn:not(.cs-btn--gold):not([type=submit]):hover {
  transform: translateY(1px);
  border-color: #b4c3dc !important;
  color: var(--pp-accent) !important;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc) !important;
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18) !important;
}

html body.b2 .cs-modal [type=submit] {
  border: 0 !important;
  border-radius: 999px;
  background: var(--pp-grad-accent) !important;
  color: #fff !important;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(111,106,217,.35), inset 0 1px 0 rgba(255,255,255,.3) !important;
}

html body.b2 .cs-modal [type=submit]:hover {
  opacity: 1 !important;
  filter: none !important;
  transform: translateY(1px);
  box-shadow: inset 0 3px 8px rgba(40,30,110,.45), inset 0 1px 2px rgba(40,30,110,.3) !important;
}

/* dark */

html body.b2.dark .cs-modal {
  border-color: #22314d !important;
  color: #b9c8e6;
  background: linear-gradient(#15203a, #0e1626) border-box !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.7) !important;
}

html body.b2.dark .cs-modal__h { border-bottom-color: #22314d !important; }

html body.b2.dark .cs-modal__h h3, html body.b2.dark .cs-modal label { color: #e2e8f4 !important; }

html body.b2.dark .cs-modal label :is(small, span, em) { color: #8fa0bd; }

html body.b2.dark .cs-modal__h h3 :is(i, svg),
html body.b2.dark .cs-modal .cs-fld :is(i, svg) {
  color: #8fb2ff !important;
}

html body.b2.dark .cs-modal__x { color: #8fa0bd !important; }

html body.b2.dark .cs-modal :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]), textarea, select) {
  border-color: #2a3a58 !important;
  background: linear-gradient(#0d1524, #121c2f) !important;
  color: #e2e8f4 !important;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.4) !important;
}

html body.b2.dark .cs-modal :is(input, textarea)::placeholder { color: #6f81a3; }

html body.b2.dark .cs-modal :is(input:not([type=hidden]), textarea, select):focus {
  border-color: #8fb2ff !important;
  box-shadow: 0 0 0 3px rgba(143,178,255,.2) !important;
}

html body.b2.dark .cs-ac__list {
  border-color: #22314d;
  background: #121c2f;
  box-shadow: 0 10px 24px rgba(0,0,0,.5);
}

html body.b2.dark .cs-modal__b button:not(.cs-btn):not([type=submit]),
html body.b2.dark .cs-modal .cs-btn:not(.cs-btn--gold):not([type=submit]) {
  border-color: #2a3a58 !important;
  background: linear-gradient(#1a2742, #111a2e) !important;
  color: #b9c8e6 !important;
  box-shadow: none !important;
}

html body.b2.dark .cs-modal__b button:not(.cs-btn):not([type=submit]):hover,
html body.b2.dark .cs-modal__b button:not(.cs-btn):not([type=submit]).is-on,
html body.b2.dark .cs-modal .cs-btn:not(.cs-btn--gold):not([type=submit]):hover,
html body.b2.dark .cs-modal__x:hover {
  border-color: #354a6f !important;
  color: #8fb2ff !important;
  background: linear-gradient(to bottom, #0d1524, #121c2f) !important;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.4) !important;
}

html body.b2.dark .cs-modal__b :is(b, strong) { color: #8fb2ff !important; }

/* ----------------------------------------------------------
   STAFF CARDS — accent bar as a real element (same fix as footer / stats):
   full-strength 4px gradient that follows the rounded corners
   ---------------------------------------------------------- */

html body.b2 .staff2-card { background: linear-gradient(#fcfdff, #f2f6fc) border-box !important; }

html body.b2.dark .staff2-card { background: linear-gradient(#15203a, #0e1626) border-box !important; }

html body.b2 .staff2-card::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 14px;
  width: auto;
  z-index: 2;
  border: 0 !important;
  border-radius: 14px 14px 0 0;
  opacity: 1 !important;
  transform: none !important;
  background: var(--pp-grad-accent) !important;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 4px, transparent 4px);
  mask: linear-gradient(#000 0 4px, transparent 4px);
}

/* ----------------------------------------------------------
   CREDITS SIDE NAV — nothing may change size on hover
   (only the 1px press-in transform is allowed)
   ---------------------------------------------------------- */

html body.b2 .cs-nav .cs-nl,
html body.b2 .cs-nav .cs-nl:is(:hover, :focus, :focus-visible, :active, .is-on) {
  box-sizing: border-box;
  margin: 2px 0 !important;
  padding: 9px 12px !important;
  border-width: 1px !important;
  border-style: solid;
  font-size: 14px !important;
  line-height: 1.4 !important;
  height: auto;
  min-height: 0;
  top: auto !important;
  bottom: auto !important;
}

html body.b2 .cs-nav .cs-nl { font-weight: 700; }

html body.b2 .cs-nav .cs-nl :is(i, svg) { width: 18px; flex: none; text-align: center; font-size: 14px; }

html body.b2 .cs-nav, html body.b2 .cs-nav:hover {
  height: auto !important;
  min-height: 0 !important;
  padding: 18px 12px 12px !important;
  border-width: 1px !important;
  margin: 0 !important;
}

/* ==========================================================
   49. CREDITS — WALLET / SHOP CONTENT (cs-h1, cs-stats, cs-stat, cs-panel, cs-empty)
   ========================================================== */

/* the shop's gold variable becomes the theme purple */

body.b2 { --cs-gold: #8c6ad9; }

body.b2.dark { --cs-gold: #8fb2ff; }

/* nav rows: no movement at all on hover (press look comes from border + inset shadow) */

html body.b2 .cs-nav .cs-nl,
html body.b2 .cs-nav .cs-nl:is(:hover, :focus, :focus-visible, :active, .is-on) {
  transform: none !important;
  translate: none !important;
}

html body.b2 .cs-h1 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  color: var(--pp-heading);
  font-weight: 800;
  text-shadow: none;
}

html body.b2 .cs-h1 :is(i, svg) { color: #8c6ad9 !important; }

html body.b2.dark .cs-h1 { color: #e2e8f4; }

html body.b2.dark .cs-h1 :is(i, svg) { color: #8fb2ff !important; }

html body.b2 .cs-stats { gap: 16px; margin-bottom: 18px; }

/* stat tiles + panel = theme cards */

html body.b2 :is(.cs-stat, .cs-panel) {
  position: relative;
  box-sizing: border-box;
  border: 1px solid var(--pp-border) !important;
  border-radius: 14px;
  background: linear-gradient(#fcfdff, #f2f6fc) border-box !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 6px 16px rgba(80,100,160,.08) !important;
  transform: none !important;
  transition: none;
}

html body.b2 :is(.cs-stat, .cs-panel)::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 14px;
  z-index: 2;
  border-radius: 14px 14px 0 0;
  background: var(--pp-grad-accent);
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 4px, transparent 4px);
  mask: linear-gradient(#000 0 4px, transparent 4px);
}

html body.b2 .cs-stat { padding: 20px 22px 18px; }

html body.b2 .cs-stat__l {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  color: #7a8aa8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

html body.b2 .cs-stat__l :is(i, svg) { color: #8c6ad9 !important; }

html body.b2 .cs-stat__v {
  color: var(--pp-heading);
  font-size: 30px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.02em;
}

html body.b2 .cs-panel { overflow: visible; }

html body.b2 .cs-panel__h {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px 14px;
  border: 0 !important;
  border-bottom: 1px solid #dde5f2 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--pp-heading);
  font-weight: 800;
  text-shadow: none;
}

html body.b2 .cs-panel__h :is(i, svg) { color: #8c6ad9 !important; }

html body.b2 .cs-empty {
  padding: 38px 20px;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: #7a8aa8;
  font-size: 13px;
  text-align: center;
}

html body.b2.dark :is(.cs-stat, .cs-panel) {
  border-color: #22314d !important;
  background: linear-gradient(#15203a, #0e1626) border-box !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.35) !important;
}

html body.b2.dark .cs-stat__l { color: #8fa0bd; }

html body.b2.dark .cs-stat__l :is(i, svg), html body.b2.dark .cs-panel__h :is(i, svg) {
  color: #8fb2ff !important;
}

html body.b2.dark .cs-stat__v { color: #eef4ff; }

html body.b2.dark .cs-panel__h { border-bottom-color: #22314d !important; color: #e2e8f4; }

html body.b2.dark .cs-empty { color: #8fa0bd; }

@media (max-width: 640px) {
  html body.b2 .cs-stats { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------
   CREDITS RAIL — hovering the whole card must change nothing
   ---------------------------------------------------------- */

html body.b2 .cs .cs-rail:hover, html body.b2 .cs:hover > .cs-rail {
  transform: none !important;
  gap: 16px !important;
}

html body.b2 .cs .cs-rail > :is(.cs-nav, .cs-bal),
html body.b2 .cs .cs-rail > :is(.cs-nav, .cs-bal):is(:hover, :focus-within, :active) {
  transform: none !important;
  translate: none !important;
  scale: none !important;
  filter: none !important;
  outline: 0 !important;
  margin: 0 !important;
  top: auto !important;
  bottom: auto !important;
  inset-block: auto !important;
  border: 1px solid var(--pp-border) !important;
  border-radius: 14px !important;
  background: linear-gradient(#fcfdff, #f2f6fc) border-box !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 6px 16px rgba(80,100,160,.08) !important;
  transition: none !important;
  animation: none !important;
}

html body.b2.dark .cs .cs-rail > :is(.cs-nav, .cs-bal),
html body.b2.dark .cs .cs-rail > :is(.cs-nav, .cs-bal):is(:hover, :focus-within, :active) {
  border-color: #22314d !important;
  background: linear-gradient(#15203a, #0e1626) border-box !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.35) !important;
}

html body.b2 .cs .cs-rail > .cs-nav::before, html body.b2 .cs .cs-rail > .cs-nav::after {
  content: none !important;
  display: none !important;
}

/* credits rail: explicit padding in every state (a hover rule used to add 2px to the menu card) */

html body.b2 .cs .cs-rail > .cs-nav,
html body.b2 .cs .cs-rail > .cs-nav:is(:hover, :focus-within, :active) {
  padding: 18px 12px 12px !important;
}

html body.b2 .cs .cs-rail > .cs-bal,
html body.b2 .cs .cs-rail > .cs-bal:is(:hover, :focus-within, :active) {
  padding: 20px 20px 18px !important;
}

/* Gift Credits button: the theme's global button hover adds a 1px border, which made the card grow. Keep it borderless in every state. */

html body.b2 .cs .cs-bal .cs-btn--gold,
html body.b2 .cs .cs-bal .cs-btn--gold:is(:hover, :focus, :focus-visible, :active) {
  border: 0 !important;
  border-width: 0 !important;
  outline: 0 !important;
}

/* ==========================================================
   50. ACCENT BARS — one technique everywhere: a real pseudo-element that
   follows the card's rounded top corners (full-strength 4px gradient).
   Same bar as footer / stat tiles / staff cards.
   ========================================================== */

html body.b2 :is(article.b2-post, .b2-thead, .b2-composer, .member-card, .b2-srch__hit, .ucp-id, .ucp-card, .cv-side, .cv-thread, .b2-prof :is(.b2-prof__rail, .b2-prof__activity, .b2-prof__statuses).card) {
  position: relative;
}

html body.b2 :is(article.b2-post, .b2-thead, .b2-composer, .member-card, .b2-srch__hit, .ucp-id, .ucp-card, .cv-side, .cv-thread, .b2-prof :is(.b2-prof__rail, .b2-prof__activity, .b2-prof__statuses).card)::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: -1px !important;
  left: -1px !important;
  right: -1px !important;
  bottom: auto !important;
  width: auto !important;
  height: 16px !important;
  z-index: 3;
  border: 0 !important;
  border-radius: 12px 12px 0 0 !important;
  opacity: 1 !important;
  transform: none !important;
  background: var(--pp-grad-accent) !important;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 4px, transparent 4px);
  mask: linear-gradient(#000 0 4px, transparent 4px);
}

/* messages sidebar: plain card background, the bar is the pseudo-element above */

html body.b2 :is(.cv-side, .cv-thread)::before { border-radius: 14px 14px 0 0 !important; }

html body.b2 .cv-side { background: linear-gradient(#fcfdff, #f2f6fc) border-box !important; }

html body.b2.dark .cv-side { background: linear-gradient(#15203a, #0e1626) border-box !important; }

/* ==========================================================
   51. THREAD VIEW — post body spacing + typography
   ========================================================== */

/* room between the post header bar and the text */

html body.b2 .b2-post__body { padding-top: 22px; }

/* subject line: heading style, more air above and below, fading rule underneath */

html body.b2 .b2-post__body :is(h1, h2, h3, [class*="__title"], [class*="__subject"], [class*="subject"]) {
  margin: 0 0 18px !important;
  padding: 0 0 12px !important;
  color: var(--pp-heading) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  letter-spacing: -.005em;
  text-shadow: none;
}

html body.b2.dark .b2-post__body :is(h1, h2, h3, [class*="__title"], [class*="__subject"], [class*="subject"]) {
  color: #e2e8f4 !important;
}

/* post text: theme colour, comfortable size and line height */

html body.b2 .b2-post__body { color: #3d4d6b; font-size: 14px; line-height: 1.75; }

html body.b2 .b2-post__body :is(p, li, td, dd) {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

html body.b2 .b2-post__body :is(p, ul, ol) { margin-top: 0; margin-bottom: 14px; }

html body.b2 .b2-post__body :is(p, li) :is(strong, b) { color: var(--pp-heading); }

html body.b2 .b2-post__body a:not(.btn):not([class*="quote"]) {
  color: var(--pp-accent);
  text-decoration: none;
  font-weight: 600;
}

html body.b2 .b2-post__body a:not(.btn):not([class*="quote"]):hover { text-decoration: underline; }

html body.b2 .b2-post__body img { border-radius: 0 !important; }

html body.b2.dark .b2-post__body :is(p, li, td, dd) { color: inherit; }

html body.b2.dark .b2-post__body :is(p, li) :is(strong, b) { color: #e2e8f4; }

html body.b2.dark .b2-post__body a:not(.btn):not([class*="quote"]) { color: #8fb2ff; }

/* ==========================================================
   52. CATEGORY HEADERS (b2-cat) — redesign
   Light card with the curved accent bar, bold title with a gradient
   marker, soft collapse button. Replaces the heavy blue band.
   ========================================================== */

html body.b2 :is(.b2-cat, .panel.category) {
  position: relative;
  overflow: visible;
  border: 1px solid var(--pp-border) !important;
  border-radius: 16px;
  background: linear-gradient(#fcfdff, #f2f6fc) border-box !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 8px 22px rgba(80,100,160,.10) !important;
}

html body.b2 :is(.b2-cat, .panel.category)::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 18px;
  z-index: 3;
  border-radius: 16px 16px 0 0;
  background: var(--pp-grad-accent);
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 4px, transparent 4px);
  mask: linear-gradient(#000 0 4px, transparent 4px);
}

html body.b2 .b2-cat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px 14px !important;
  border: 0 !important;
  border-bottom: 1px solid #dde5f2 !important;
  border-radius: 16px 16px 0 0;
  background: none !important;
  box-shadow: none !important;
}

html body.b2 .b2-cat__title, html body.b2 .b2-cat__title:hover {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--pp-heading) !important;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.005em;
  text-decoration: none;
  text-shadow: none;
}

html body.b2 .b2-cat__title::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--pp-grad-accent);
  box-shadow: 0 2px 6px rgba(111,106,217,.35);
}

html body.b2 .b2-cat__head :is(i, svg):not(.b2-cat__toggle *) { color: #8c6ad9; }

/* dark */

html body.b2.dark :is(.b2-cat, .panel.category) {
  border-color: #22314d !important;
  background: linear-gradient(#15203a, #0e1626) border-box !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.4) !important;
}

html body.b2.dark .b2-cat__head { border-bottom-color: #22314d !important; }

html body.b2.dark .b2-cat__title, html body.b2.dark .b2-cat__title:hover { color: #e2e8f4 !important; }

html body.b2.dark .b2-cat__head :is(i, svg):not(.b2-cat__toggle *) { color: #8fb2ff; }

/* ==========================================================
   53. FORUM ROWS — lighter rows inside the category card + readable text
   ========================================================== */

/* text: one step darker so descriptions, sub-forums and labels are easy to read */

html body.b2 .b2-forum__desc, html body.b2 .b2-forum__desc p { color: #62718f; font-size: 11.5px; }

html body.b2 .b2-forum__stats > * small,
html body.b2 .b2-forum__stats > * span:last-child:not(:first-child),
html body.b2 .b2-forum__stats [class*="label"] {
  color: #6f7f9d;
  font-size: 9px;
}

html body.b2 .b2-forum__last { color: #62718f; }

html body.b2 .b2-forum__last :is(span, small, em, time):not(a) { color: #6f7f9d; }

html body.b2 .b2-forum__last :is(em, i):not([class*="fa"]) { color: #7a8aa8; }

html body.b2.dark .b2-forum__desc, html body.b2.dark .b2-forum__desc p { color: #9fb0cc; }

html body.b2.dark .b2-forum__stats > * small,
html body.b2.dark .b2-forum__stats > * span:last-child:not(:first-child),
html body.b2.dark .b2-forum__stats [class*="label"] {
  color: #8fa3c4;
}

html body.b2.dark .b2-forum__last { color: #9fb0cc; }

html body.b2.dark .b2-forum__last :is(span, small, em, time):not(a) { color: #8fa3c4; }

/* ==========================================================
   54. SHOUTBOX (#shoutbox-container.shoutbox)
   Theme card + accent bar, light header, soft header buttons,
   pill composer.
   ========================================================== */

html body.b2 .panel.shoutbox {
  overflow: visible;
  border: 1px solid var(--pp-border) !important;
  background: linear-gradient(#fcfdff, #f2f6fc) border-box !important;
}

html body.b2 .panel.shoutbox::before {
  top: -1px;
  left: -1px;
  right: -1px;
  height: 18px;
  border-radius: 16px 16px 0 0;
  -webkit-mask: linear-gradient(#000 0 4px, transparent 4px);
  mask: linear-gradient(#000 0 4px, transparent 4px);
}

/* header: light bar with a divider instead of the blue band */

html body.b2 .shoutbox .panel__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px 14px !important;
  border: 0 !important;
  border-bottom: 1px solid #dde5f2 !important;
  box-shadow: none !important;
}

html body.b2 .shoutbox .panel__title h2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--pp-heading) !important;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.005em;
  text-shadow: none;
}

html body.b2 .shoutbox .panel__title h2::before { color: #8c6ad9 !important; }

/* header buttons (bell, pop-out): soft squares, pressed-in hover */

html body.b2 .shoutbox .panel__title_actions { display: flex; align-items: center; gap: 6px; }

html body.b2 .shoutbox .panel__title_actions :is(a, button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #c4d2e8;
  border-radius: 10px;
  background: linear-gradient(#fff, #eef3fb);
  color: #5b6d8e !important;
  box-shadow: none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, color .12s ease;
}

html body.b2 .shoutbox .panel__title_actions :is(a, button):hover {
  transform: translateY(1px);
  border-color: #b4c3dc;
  color: var(--pp-accent) !important;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc);
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18);
}

/* message area */

html body.b2 .shoutbox .panel__content { background: none !important; color: #3d4d6b; }

/* composer */

html body.b2 .shoutbox :is(input[type="text"], input:not([type]), textarea) {
  border: 1px solid #c4d2e8 !important;
  border-radius: 999px;
  background: linear-gradient(#fff, #f6f9fe) !important;
  color: #3d4d6b !important;
  box-shadow: inset 0 1px 2px rgba(100,120,180,.10) !important;
  outline: 0;
  transition: border-color .12s ease, box-shadow .12s ease;
}

html body.b2 .shoutbox :is(input, textarea)::placeholder { color: #8a99b6; opacity: 1; }

html body.b2 .shoutbox :is(input[type="text"], input:not([type]), textarea):focus {
  border-color: #8c6ad9 !important;
  box-shadow: 0 0 0 3px rgba(140,106,217,.18) !important;
}

html body.b2 .shoutbox button[type="submit"] {
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--pp-grad-accent) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(111,106,217,.35), inset 0 1px 0 rgba(255,255,255,.3) !important;
}

html body.b2 .shoutbox button[type="submit"]:disabled { opacity: .45; box-shadow: none !important; }

html body.b2 .shoutbox button[type="submit"]:not(:disabled):hover {
  opacity: 1 !important;
  filter: none !important;
  transform: translateY(1px);
  box-shadow: inset 0 3px 8px rgba(40,30,110,.45), inset 0 1px 2px rgba(40,30,110,.3) !important;
}

/* dark */

html body.b2.dark .panel.shoutbox {
  border-color: #22314d !important;
  background: linear-gradient(#15203a, #0e1626) border-box !important;
}

html body.b2.dark .shoutbox .panel__title { border-bottom-color: #22314d !important; }

html body.b2.dark .shoutbox .panel__title h2 { color: #e2e8f4 !important; }

html body.b2.dark .shoutbox .panel__title h2::before { color: #8fb2ff !important; }

html body.b2.dark .shoutbox .panel__title_actions :is(a, button) {
  border-color: #2a3a58;
  background: linear-gradient(#1a2742, #111a2e);
  color: #b9c8e6 !important;
}

html body.b2.dark .shoutbox .panel__title_actions :is(a, button):hover {
  border-color: #354a6f;
  color: #8fb2ff !important;
  background: linear-gradient(to bottom, #0d1524, #121c2f);
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.4);
}

html body.b2.dark .shoutbox .panel__content { color: #b9c8e6; }

html body.b2.dark .shoutbox :is(input[type="text"], input:not([type]), textarea) {
  border-color: #2a3a58 !important;
  background: linear-gradient(#0d1524, #121c2f) !important;
  color: #e2e8f4 !important;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.4) !important;
}

html body.b2.dark .shoutbox :is(input, textarea)::placeholder { color: #6f81a3; }

html body.b2.dark .shoutbox :is(input[type="text"], input:not([type]), textarea):focus {
  border-color: #8fb2ff !important;
  box-shadow: 0 0 0 3px rgba(143,178,255,.2) !important;
}

/* Shoutbox send button: matched by its paper-plane icon, so the other composer icons are untouched */

html body.b2 .shoutbox button.shoutbox__send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--pp-grad-accent) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(111,106,217,.35), inset 0 1px 0 rgba(255,255,255,.3) !important;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

html body.b2 .shoutbox button.shoutbox__send svg.icon {
  display: block;
  width: 18px;
  height: 18px;
  color: #fff !important;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  margin: 1px 1px 0 -1px;
}

html body.b2 .shoutbox button.shoutbox__send:disabled,
html body.b2 .shoutbox button.shoutbox__send[aria-disabled="true"] {
  opacity: .4;
  box-shadow: none !important;
  cursor: not-allowed;
}

html body.b2 .shoutbox button.shoutbox__send:not(:disabled):is(:hover, :focus-visible) {
  opacity: 1 !important;
  filter: none !important;
  transform: translateY(1px);
  box-shadow: inset 0 3px 8px rgba(40,30,110,.45), inset 0 1px 2px rgba(40,30,110,.3) !important;
}

/* Shoutbox header icons (sound toggle, history) */

html body.b2 .shoutbox .shoutbox__header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  border: 1px solid #c4d2e8 !important;
  border-radius: 10px !important;
  background: linear-gradient(#fff, #eef3fb) !important;
  color: #5b6d8e !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 5px rgba(100,120,180,.10) !important;
  text-decoration: none;
  cursor: pointer;
  opacity: 1;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, color .12s ease;
}

html body.b2 .shoutbox .shoutbox__header-btn svg { color: inherit; stroke: currentColor; flex: none; }

html body.b2 .shoutbox .shoutbox__header-btn:is(:hover, :focus-visible) {
  transform: translateY(1px);
  outline: 0;
  opacity: 1 !important;
  border-color: #b4c3dc !important;
  color: var(--pp-accent) !important;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc) !important;
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18) !important;
}

html body.b2 .shoutbox .shoutbox__header-btn:focus-visible {
  outline: 2px solid rgba(119,88,186,.45);
  outline-offset: 2px;
}

html body.b2.dark .shoutbox .shoutbox__header-btn {
  border-color: #2a3a58 !important;
  background: linear-gradient(#1a2742, #111a2e) !important;
  color: #b9c8e6 !important;
  box-shadow: none !important;
}

html body.b2.dark .shoutbox .shoutbox__header-btn:is(:hover, :focus-visible) {
  border-color: #354a6f !important;
  color: #8fb2ff !important;
  background: linear-gradient(to bottom, #0d1524, #121c2f) !important;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.4) !important;
}

/* ==========================================================
   55. SIDEBAR WIDGETS (.panel--secondary: Design Palette, Recent Activity
   Top Posters, ...) — same card + light header as categories / shoutbox
   ========================================================== */

html body.b2 :is(.board-layout__sidebar, .widget-area--sidebar) .panel--secondary {
  overflow: visible;
  border: 1px solid var(--pp-border) !important;
  background: linear-gradient(#fcfdff, #f2f6fc) border-box !important;
}

html body.b2 :is(.board-layout__sidebar, .widget-area--sidebar) .panel--secondary::before {
  top: -1px;
  left: -1px;
  right: -1px;
  height: 18px;
  border-radius: 16px 16px 0 0;
  -webkit-mask: linear-gradient(#000 0 4px, transparent 4px);
  mask: linear-gradient(#000 0 4px, transparent 4px);
}

html body.b2 :is(.board-layout__sidebar, .widget-area--sidebar) .panel--secondary > .panel__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 18px 18px 12px !important;
  border: 0 !important;
  border-bottom: 1px solid #dde5f2 !important;
  border-radius: 16px 16px 0 0;
  box-shadow: none !important;
}

html body.b2 :is(.board-layout__sidebar, .widget-area--sidebar) .panel--secondary > .panel__title h2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--pp-heading) !important;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.003em;
  text-shadow: none;
}

html body.b2 :is(.board-layout__sidebar, .widget-area--sidebar) .panel--secondary > .panel__title h2::before {
  color: #8c6ad9 !important;
}

html body.b2 :is(.board-layout__sidebar, .widget-area--sidebar) .panel--secondary > .panel__content {
  background: none !important;
  border-radius: 0 0 16px 16px;
}

/* Top Posters: even rows, readable names */

html body.b2 .widget--top_posters .widget-list { gap: 0; }

html body.b2 .widget--top_posters .widget-list__item {
  padding: 0 !important;
  border-bottom: 1px solid #e3eaf5 !important;
}

/* the inner block carries the only padding (it used to stack on top of the row's own) */
html body.b2 .widget--top_posters .widget-list__item .last-post {
  padding: 11px 18px !important;
  min-height: 0;
  align-items: center;
}

html body.b2 .widget--top_posters .widget-list__item:last-child { border-bottom: 0 !important; }

html body.b2 .widget--top_posters .widget-list__item a { font-size: 13px; font-weight: 700; }

html body.b2 .widget--top_posters .widget-list__item :is(small, span):not(.avatar):not([class*="avatar"]) {
  color: #6f7f9d;
  font-size: 11.5px;
  line-height: 1.4;
}

/* dark */

html body.b2.dark :is(.board-layout__sidebar, .widget-area--sidebar) .panel--secondary {
  border-color: #22314d !important;
  background: linear-gradient(#15203a, #0e1626) border-box !important;
}

html body.b2.dark :is(.board-layout__sidebar, .widget-area--sidebar) .panel--secondary > .panel__title {
  border-bottom-color: #22314d !important;
}

html body.b2.dark :is(.board-layout__sidebar, .widget-area--sidebar) .panel--secondary > .panel__title h2 {
  color: #e2e8f4 !important;
}

html body.b2.dark :is(.board-layout__sidebar, .widget-area--sidebar) .panel--secondary > .panel__title h2::before {
  color: #8fb2ff !important;
}

html body.b2.dark .widget--top_posters .widget-list__item { border-bottom-color: #22314d !important; }

html body.b2.dark .widget--top_posters .widget-list__item :is(small, span):not(.avatar):not([class*="avatar"]) {
  color: #8fa3c4;
}

/* ==========================================================
   56. FORUM ROWS — flat rows that belong to the category card
   (no nested cards: full-width rows separated by fine dividers)
   ========================================================== */

html body.b2 .b2-cat .b2-forum {
  margin: 0 !important;
  min-height: 84px;
  border: 0 !important;
  border-bottom: 1px solid #e6edf7 !important;
  border-radius: 0 !important;
  transform: none !important;
  transition: background .15s ease;
}

html body.b2 .b2-cat .b2-forum:last-child {
  border-bottom: 0 !important;
  border-radius: 0 0 15px 15px !important;
}

html body.b2 .b2-cat .b2-forum:hover { border-color: #e6edf7 !important; transform: none !important; }

/* icon column: no tinted panel, just the tile */

html body.b2 .b2-cat .b2-forum__marker { background: none !important; }

html body.b2 .b2-cat .b2-forum:hover .b2-forum__marker { background: none !important; }

/* last-post column: one thin divider, no tint */

/* dark */

html body.b2.dark .b2-cat .b2-forum:last-child { border-bottom: 0 !important; }

html body.b2.dark .b2-cat .b2-forum:hover { border-color: #22314d !important; }

html body.b2.dark .b2-cat .b2-forum__marker,
html body.b2.dark .b2-cat .b2-forum:hover .b2-forum__marker {
  background: none !important;
}

/* ---- rows: icon aligned under the category marker + a little depth back ---- */

html body.b2 .b2-cat .b2-forum {
  background: linear-gradient(to bottom, #fefeff, #f5f8fd) !important;
  border-bottom-color: #e1e8f4 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95) !important;
}

html body.b2 .b2-cat .b2-forum:hover {
  background: linear-gradient(to bottom, #edf2fb, #f5f8fd) !important;
  box-shadow: inset 0 3px 6px -2px rgba(100,120,180,.20), inset 0 1px 0 rgba(255,255,255,.6) !important;
}

html body.b2 .b2-cat .b2-forum__last {
  border-left: 1px solid #e6edf7 !important;
  background: linear-gradient(to bottom, rgba(120,140,190,.05), rgba(120,140,190,.02)) !important;
  box-shadow: inset 1px 0 0 rgba(255,255,255,.9) !important;
}

html body.b2 .b2-cat .b2-forum:hover .b2-forum__last {
  background: linear-gradient(to bottom, rgba(120,140,190,.07), rgba(120,140,190,.03)) !important;
}

html body.b2.dark .b2-cat .b2-forum {
  background: linear-gradient(to bottom, #172238, #111a2c) !important;
  border-bottom-color: #22314d !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}

html body.b2.dark .b2-cat .b2-forum:hover {
  background: linear-gradient(to bottom, #0f192b, #131d31) !important;
  box-shadow: inset 0 3px 7px -2px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.03) !important;
}

html body.b2.dark .b2-cat .b2-forum__last {
  border-left-color: #22314d !important;
  background: linear-gradient(to bottom, rgba(0,0,0,.14), rgba(0,0,0,.06)) !important;
  box-shadow: inset 1px 0 0 rgba(255,255,255,.04) !important;
}

html body.b2.dark .b2-cat .b2-forum:hover .b2-forum__last {
  background: linear-gradient(to bottom, rgba(0,0,0,.2), rgba(0,0,0,.1)) !important;
}

/* ---- divider between the icon column and the row content ---- */

html body.b2 .b2-cat .b2-forum__marker {
  border-right: 1px solid #e1e8f4 !important;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.9) !important;
}

html body.b2.dark .b2-cat .b2-forum__marker {
  border-right: 1px solid #22314d !important;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.04) !important;
}

/* icon tile sits flush at the marker inset (the tile had auto side margins that re-centred it) */

html body.b2 .b2-cat .b2-forum__marker > * { margin-left: 0 !important; margin-right: 0 !important; }

html body.b2 .b2-cat .b2-forum__marker {
  flex: 0 0 90px;
  padding: 0 0 0 22px !important;
  justify-content: start !important;
  justify-items: start !important;
}

/* ==========================================================
   57. ERROR PAGES (fs-berr: 404 etc.)
   ========================================================== */

html body.b2 .fs-berr {
  position: relative;
  box-sizing: border-box;
  overflow: visible;
  text-align: center;
  padding: 44px 32px 40px;
  border: 1px solid var(--pp-border) !important;
  border-radius: 16px;
  background: linear-gradient(#fcfdff, #f2f6fc) border-box !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 8px 22px rgba(80,100,160,.10) !important;
}

html body.b2 .fs-berr::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 18px;
  z-index: 3;
  border-radius: 16px 16px 0 0;
  background: var(--pp-grad-accent);
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 4px, transparent 4px);
  mask: linear-gradient(#000 0 4px, transparent 4px);
}

/* icon tile + code pill, stacked and centred */

html body.b2 .fs-berr__ic {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border: 1px solid #c4d2e8;
  border-radius: 18px;
  background: linear-gradient(#fff, #eef3fb);
  color: #8c6ad9;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 6px 16px rgba(100,120,180,.16);
}

html body.b2 .fs-berr__ic :is(i, svg) {
  color: #8c6ad9 !important;
  background: none !important;
  font-size: 26px;
}

html body.b2 .fs-berr__code {
  display: table;
  margin: 0 auto 14px;
  padding: 3px 12px;
  border: 1px solid #c4d2e8;
  border-radius: 999px;
  background: linear-gradient(#fff, #eef3fb);
  color: #5b6d8e;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

html body.b2 .fs-berr__h {
  margin: 0 0 10px;
  color: var(--pp-heading);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.01em;
  text-shadow: none;
}

html body.b2 .fs-berr__p {
  max-width: 460px;
  margin: 0 auto 26px;
  color: #62718f;
  font-size: 14px;
  line-height: 1.7;
}

/* buttons */

html body.b2 .fs-berr__acts { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }

html body.b2 .fs-berr-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, color .12s ease;
}

html body.b2 .fs-berr-btn :is(i, svg) { color: inherit !important; fill: currentColor; }

html body.b2 .fs-berr-btn--primary {
  border: 0 !important;
  background: var(--pp-grad-accent) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(111,106,217,.35), inset 0 1px 0 rgba(255,255,255,.3) !important;
}

html body.b2 .fs-berr-btn--primary:is(:hover, :focus-visible, :active) {
  opacity: 1 !important;
  filter: none !important;
  transform: translateY(1px);
  color: #fff !important;
  background: var(--pp-grad-accent) !important;
  box-shadow: inset 0 3px 8px rgba(40,30,110,.45), inset 0 1px 2px rgba(40,30,110,.3) !important;
}

html body.b2 .fs-berr-btn--ghost {
  border: 1px solid #c4d2e8 !important;
  background: linear-gradient(#fff, #eef3fb) !important;
  color: #5b6d8e !important;
  box-shadow: none !important;
}

html body.b2 .fs-berr-btn--ghost:is(:hover, :focus-visible, :active) {
  transform: translateY(1px);
  border-color: #b4c3dc !important;
  color: var(--pp-accent) !important;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc) !important;
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18) !important;
}

/* dark */

html body.b2.dark .fs-berr {
  border-color: #22314d !important;
  background: linear-gradient(#15203a, #0e1626) border-box !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.4) !important;
}

html body.b2.dark .fs-berr__ic, html body.b2.dark .fs-berr__code {
  border-color: #2a3a58;
  background: linear-gradient(#1a2742, #111a2e);
  box-shadow: none;
}

html body.b2.dark .fs-berr__ic :is(i, svg) { color: #8fb2ff !important; }

html body.b2.dark .fs-berr__code { color: #9fb2d6; }

html body.b2.dark .fs-berr__h { color: #e2e8f4; }

html body.b2.dark .fs-berr__p { color: #9fb0cc; }

html body.b2.dark .fs-berr-btn--ghost {
  border-color: #2a3a58 !important;
  background: linear-gradient(#1a2742, #111a2e) !important;
  color: #b9c8e6 !important;
}

html body.b2.dark .fs-berr-btn--ghost:is(:hover, :focus-visible, :active) {
  border-color: #354a6f !important;
  color: #8fb2ff !important;
  background: linear-gradient(to bottom, #0d1524, #121c2f) !important;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.4) !important;
}

/* ============================================
   58. SUBFORUMS — label + soft chips
   ============================================ */

html body.b2 .b2-forum .b2-sf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 0;
  border-top: 0;
  opacity: 1;
  font-size: 12px;
  font-weight: normal;
}

/* the little turn arrow is hidden */
html body.b2 .b2-forum .b2-sf .b2-sf__arrow { display: none; }

html body.b2 .b2-forum .b2-sf a.b2-sf__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border: 1px solid color-mix(in srgb, var(--pp-c1, #dde5f2) 22%, #dde5f2);
  border-radius: 999px;
  background: color-mix(in srgb, var(--pp-c1, #e9eff9) 7%, rgba(233,239,249,.45));
  box-shadow: none;
  color: #6f7f9d;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.45;
  white-space: nowrap;
  text-decoration: none;
  transform: none;
}

html body.b2 .b2-forum .b2-sf a.b2-sf__link i {
  color: var(--pp-c2, #9a8bc4);
  font-size: 10px;
  opacity: 1;
}

/* hover = pressed in (border never changes, so nothing moves) */
html body.b2 .b2-forum .b2-sf a.b2-sf__link:hover {
  border: 1px solid color-mix(in srgb, var(--pp-c1, #dde5f2) 30%, #dde5f2);
  background: linear-gradient(#e9eff9, #f3f6fc);
  box-shadow: 0 1px 3px rgba(80,100,160,.15) inset;
  color: var(--pp-heading);
  transform: none;
}

/* unread subforum: darker, with an accent dot */
html body.b2 .b2-forum .b2-sf a.b2-sf__link--unread {
  color: var(--pp-heading);
  font-weight: 600;
}

html body.b2 .b2-forum .b2-sf a.b2-sf__link--unread::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pp-c1);
}

/* Dark */

html body.b2.dark .b2-forum .b2-sf a.b2-sf__link {
  border-color: color-mix(in srgb, var(--pp-c1, #22314d) 25%, #22314d);
  background: color-mix(in srgb, var(--pp-c1, #1a2742) 10%, rgba(26,39,66,.45));
  box-shadow: none;
  color: #8fa3c4;
}

html body.b2.dark .b2-forum .b2-sf a.b2-sf__link i { color: color-mix(in srgb, var(--pp-c1, #7f9bd6) 85%, #ffffff); }

html body.b2.dark .b2-forum .b2-sf a.b2-sf__link:hover {
  border-color: color-mix(in srgb, var(--pp-c1, #22314d) 35%, #22314d);
  background: linear-gradient(#0d1524, #121c2f);
  box-shadow: 0 1px 3px rgba(0,0,0,.5) inset;
  color: #e2e8f4;
}

html body.b2.dark .b2-forum .b2-sf a.b2-sf__link--unread { color: #e2e8f4; }

/* ============================================
   59. CATEGORY ICONS — Font Awesome tile, one colour per category
   (categories not listed here keep the small gradient square)
   ============================================ */

/* each category sets two colours on its card; header tile, header wash and row tiles all use them */
html body.b2 .b2-cat[x-data*="forum-90155-"] { --pp-c1: #5f82d9; --pp-c2: #8c6ad9; }
html body.b2 .b2-cat[x-data*="forum-90159-"] { --pp-c1: #35a8c9; --pp-c2: #4c6ec4; }
html body.b2 .b2-cat[x-data*="forum-90168-"] { --pp-c1: #c06ad9; --pp-c2: #8c6ad9; }
html body.b2 .b2-cat[x-data*="forum-90164-"] { --pp-c1: #3fb8a0; --pp-c2: #4c8fd9; }
html body.b2 .b2-cat[x-data*="forum-90181-"] { --pp-c1: #7a6fd9; --pp-c2: #4a4f8a; }

/* a faint wash of the category colour fading out from the left of the header */
html body.b2 .b2-cat .b2-cat__head {
  background: linear-gradient(90deg, color-mix(in srgb, var(--pp-c1) 10%, transparent), transparent 55%) !important;
}

/* header tile (glow kept tight so the header never clips it) */
html body.b2 .b2-cat__title:is([href*="-pixel-point"], [href*="forumspark"], [href*="resource"], [href*="creative-hub"], [href*="showcase"], [href*="community"], [href*="area-59"])::before {
  content: var(--pp-ci);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(145deg, var(--pp-c1), var(--pp-c2));
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 2px 7px -1px color-mix(in srgb, var(--pp-c2) 45%, transparent);
  color: #fff;
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free", "FontAwesome";
  font-size-adjust: none;
  font-weight: 900;
  font-style: normal;
  font-size: 14px;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

html body.b2 .b2-cat__title[href*="-pixel-point"]    { --pp-ci: "\f0a1"; }  /* bullhorn */
html body.b2 .b2-cat__title[href*="forumspark"],
html body.b2 .b2-cat__title[href*="resource"]       { --pp-ci: "\f552"; }  /* toolbox */
html body.b2 .b2-cat__title[href*="creative-hub"]   { --pp-ci: "\f53f"; }  /* palette */
html body.b2 .b2-cat__title[href*="showcase"]       { --pp-ci: "\f005"; }  /* star */
html body.b2 .b2-cat__title[href*="community"]      { --pp-ci: "\f0c0"; }  /* users */
html body.b2 .b2-cat__title[href*="area-59"]        { --pp-ci: "\f6e2"; }  /* ghost */

html body.b2.dark .b2-cat .b2-cat__head {
  background: linear-gradient(90deg, color-mix(in srgb, var(--pp-c1) 16%, transparent), transparent 55%) !important;
}

html body.b2.dark .b2-cat__title:is([href*="-pixel-point"], [href*="forumspark"], [href*="resource"], [href*="creative-hub"], [href*="showcase"], [href*="community"], [href*="area-59"])::before {
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 2px 8px -1px color-mix(in srgb, var(--pp-c2) 60%, transparent);
}

/* forum row tiles: a faint tint + icon colour from the category */
html body.b2 .b2-cat .b2-forum__marker > :not([class*="dot"]):not([class*="badge"]):not([class*="unread"]) {
  border-color: color-mix(in srgb, var(--pp-c1) 28%, #d2dcee);
  background: linear-gradient(to bottom, #ffffff, color-mix(in srgb, var(--pp-c1) 14%, #e9eff9));
  color: color-mix(in srgb, var(--pp-c2) 75%, #8a9ac4);
}

html body.b2 .b2-cat .b2-forum:hover .b2-forum__marker > :not([class*="dot"]):not([class*="badge"]):not([class*="unread"]) {
  border-color: color-mix(in srgb, var(--pp-c1) 40%, #b4c3dc);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--pp-c1) 18%, #e9eff9), #f3f6fc);
  color: var(--pp-c2);
}

html body.b2.dark .b2-cat .b2-forum__marker > :not([class*="dot"]):not([class*="badge"]):not([class*="unread"]) {
  border-color: color-mix(in srgb, var(--pp-c1) 30%, #22314d);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--pp-c1) 10%, #172238), #0f1726);
  color: color-mix(in srgb, var(--pp-c1) 70%, #8fa3c4);
}

html body.b2.dark .b2-cat .b2-forum:hover .b2-forum__marker > :not([class*="dot"]):not([class*="badge"]):not([class*="unread"]) {
  border-color: color-mix(in srgb, var(--pp-c1) 45%, #354a6f);
  background: linear-gradient(to bottom, #0d1524, #121c2f);
  color: color-mix(in srgb, var(--pp-c1) 85%, #ffffff);
}

/* ============================================
   60. SIDEBAR PANEL ICONS — same tile, Font Awesome glyph matched to the content
   ============================================ */

html body.b2.b2.b2 :is(
  .panel:has(#ppFeatured) > .panel__title,
  .panel.panel--recent-activity > .panel__title,
  .widget--top_posters .panel > .panel__title,
  .panel.panel--users-online > .panel__title,
  .panel.shoutbox > .panel__title,
  .widget--board_statistics .panel > .panel__title
) h2::before {
  content: var(--pp-pi) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 30px !important;
  height: 30px !important;
  border: 0 !important;
  border-radius: 10px;
  background: linear-gradient(145deg, var(--pp-p1), var(--pp-p2)) !important;
  -webkit-mask: none !important;
  mask: none !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 2px 6px -1px color-mix(in srgb, var(--pp-p2) 45%, transparent);
  color: #fff !important;
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free", "FontAwesome" !important;
  font-size-adjust: none !important;
  font-weight: 900 !important;
  font-style: normal !important;
  font-size: 13px !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased;
}

html body.b2 .panel:has(#ppFeatured) { --pp-pi: "\f53f"; --pp-p1: #ec6aa4; --pp-p2: #b05ad9; }   /* palette */
html body.b2 .panel--recent-activity { --pp-pi: "\f1da"; --pp-p1: #5f82d9; --pp-p2: #8c6ad9; }      /* clock-rotate-left */
html body.b2 .widget--top_posters .panel { --pp-pi: "\f091"; --pp-p1: #e8a93c; --pp-p2: #d9783a; }  /* trophy */
html body.b2 .panel--users-online { --pp-pi: "\f0c0"; --pp-p1: #3fb8a0; --pp-p2: #4c8fd9; }        /* users */
html body.b2 .panel.shoutbox { --pp-pi: "\f086"; --pp-p1: #35a8c9; --pp-p2: #4c6ec4; }             /* comments */
html body.b2 .widget--board_statistics .panel { --pp-pi: "\f080"; --pp-p1: #7a6fd9; --pp-p2: #4a4f8a; } /* chart-bar */

html body.b2.dark.b2.b2 :is(
  .panel:has(#ppFeatured) > .panel__title,
  .panel.panel--recent-activity > .panel__title,
  .widget--top_posters .panel > .panel__title,
  .panel.panel--users-online > .panel__title,
  .panel.shoutbox > .panel__title,
  .widget--board_statistics .panel > .panel__title
) h2::before {
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 2px 7px -1px color-mix(in srgb, var(--pp-p2) 60%, transparent);
}

/* ============================================
   61. ACCENT BARS — take the colours of their category / panel
   ============================================ */

html body.b2 .b2-cat::before {
  background: linear-gradient(90deg, var(--pp-c1), var(--pp-c2)) !important;
}

html body.b2 :is(
  .panel:has(#ppFeatured),
  .panel--recent-activity,
  .widget--top_posters .panel,
  .panel--users-online,
  .panel.shoutbox,
  .widget--board_statistics .panel
)::before {
  background: linear-gradient(90deg, var(--pp-p1), var(--pp-p2)) !important;
}

/* ============================================
   62. WRAP EDGE — one thin, soft line running through the cool category colours
   (the wrap's own border is removed; the line sits on the outer edge)
   ============================================ */

html body.b2 #wrap { border-width: 0 !important; }

html body.b2 #wrap::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 20;
  border: 3px solid transparent;
  border-radius: 28px;
  background: linear-gradient(160deg, #5f82d9 0%, #35a8c9 24%, #3fb8a0 46%, #4c8fd9 66%, #7a6fd9 84%, #8c6ad9 100%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: .8;
  pointer-events: none;
}

/* no filter here: a filter on a page-tall element repaints the whole page on every scroll frame */
html body.b2.dark #wrap::before { opacity: .95; }

@media (max-width: 600px) {
  html body.b2 #wrap::before { border-width: 3px; border-radius: 16px; }
}
/* =====================================================================
   63. GRID VIEW REDO — matches list-view look (category colours, soft chips
   accent bar, pressed-in hover). Uses --pp-c1/--pp-c2 per category.
   ===================================================================== */
html body.b2 .b2-cat { --pp-c1:#5f82d9; --pp-c2:#8c6ad9; }  /* default; per-category colours follow, matched via x-data id */

html body.b2 .b2-gv__grid { gap: 16px; padding: 16px; }
html body.b2 .b2-gvc {
  position: relative; overflow: hidden; border-radius: 18px;
  border: 1px solid var(--pp-border, #dde5f2);
  background: linear-gradient(180deg, #fcfdff, #f2f6fc);
  box-shadow: 0 1px 2px rgba(40,60,110,.06);
  transition: background .15s, box-shadow .15s;
}
html body.b2 .b2-gvc::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, var(--pp-c1), var(--pp-c2));
}
html body.b2 .b2-gvc:hover {
  transform: none !important;
  background: linear-gradient(180deg, #f4f7fd, #e9eff9);
  box-shadow: inset 0 2px 5px rgba(40,60,110,.1);
}
/* readable text on every card (covers keep white text over the image) */
html body.b2 .b2-gvc:not(.b2-gvc--case):not(.b2-gvc--hascover) :is(h2, h3, h4, [class*="b2-gvc__title"], [class*="b2-gvc__name"]),
html body.b2 .b2-gvc:not(.b2-gvc--case):not(.b2-gvc--hascover) :is(h2, h3, h4) a { color: var(--pp-heading, #26324d) !important; text-shadow: none !important; }
html body.b2 .b2-gvc:not(.b2-gvc--case):not(.b2-gvc--hascover) :is(p, [class*="b2-gvc__desc"]) { color: #6f7f9d !important; text-shadow: none !important; }
html body.b2 .b2-gvc:is(.b2-gvc--case, .b2-gvc--hascover) :is(p, [class*="b2-gvc__desc"]) { color: rgba(255,255,255,.92) !important; }
/* icon tile */
html body.b2 .b2-gvc :is([class*="b2-gvc__icon"], [class*="b2-gvc__marker"], [class*="b2-gvc__avatar"]) {
  border-radius: 12px; background: linear-gradient(145deg, var(--pp-c1), var(--pp-c2)); color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 2px 7px -1px color-mix(in srgb, var(--pp-c2) 45%, transparent);
}
/* stat chips */
html body.b2 .b2-gvc [class*="b2-gvc__stat"] > * {
  border: 1px solid color-mix(in srgb, var(--pp-c1) 22%, #dde5f2); border-radius: 999px;
  background: color-mix(in srgb, var(--pp-c1) 7%, rgba(233,239,249,.45)); color: #6f7f9d;
  font-size: 11.5px; font-weight: 500; padding: 2px 9px;
}
/* subforum chips inside cards */
html body.b2 .b2-gvc :is(.b2-sf__link, [class*="b2-gvc__sub"] a) {
  border: 1px solid color-mix(in srgb, var(--pp-c1) 22%, #dde5f2); border-radius: 999px;
  background: color-mix(in srgb, var(--pp-c1) 7%, rgba(233,239,249,.45)); color: #6f7f9d;
  font-size: 11.5px; padding: 2px 9px; white-space: nowrap;
}
html body.b2 .b2-gvc:has(.b2-gvc__row--unread, .b2-gvc__name--unread, .b2-gvc__pname--unread, .b2-gvc__rowcount--unread, .forum__marker-badge--unread, .is-unread)::before { background: linear-gradient(180deg, var(--pp-c1), var(--pp-c2)) !important; }
html body.b2 .b2-gvc--hascover [class*="b2-gvc__cover"], html body.b2 .b2-gvc--hascover { background-size: cover; background-position: center; }

/* dark */
html body.b2.dark .b2-gvc { background: linear-gradient(180deg, #15203a, #0e1626); border-color: #26334f; box-shadow: none; }
html body.b2.dark .b2-gvc:hover { background: linear-gradient(180deg, #111b32, #0b1322); box-shadow: inset 0 2px 6px rgba(0,0,0,.4); }
html body.b2.dark .b2-gvc:not(.b2-gvc--case):not(.b2-gvc--hascover) :is(h2, h3, h4, [class*="b2-gvc__title"], [class*="b2-gvc__name"]),
html body.b2.dark .b2-gvc:not(.b2-gvc--case):not(.b2-gvc--hascover) :is(h2, h3, h4) a { color: #e6ecf8 !important; }
html body.b2.dark .b2-gvc:not(.b2-gvc--case):not(.b2-gvc--hascover) :is(p, [class*="b2-gvc__desc"]) { color: #8494ad !important; }
html body.b2.dark .b2-gvc [class*="b2-gvc__stat"] > *,
html body.b2.dark .b2-gvc :is(.b2-sf__link, [class*="b2-gvc__sub"] a) {
  border-color: color-mix(in srgb, var(--pp-c1) 30%, #26334f); background: color-mix(in srgb, var(--pp-c1) 12%, rgba(20,30,50,.6)); color: #9fb0cc;
}

/* Grid cover cards: clean art on top, everything readable below it, same size for every card.
   The title and "case" description live inside the cover in ForumSpark's markup, so they're placed below it. */
html body.b2 .b2-gv__grid { --pp-cov: 150px; }
html body.b2 .b2-gvc--case, html body.b2 .b2-gvc--case.b2-gvc--hascover { grid-column: auto; flex-direction: column; }
html body.b2 .b2-gvc--hascover .b2-gvc__cover,
html body.b2 .b2-gvc--case .b2-gvc__cover { position: static; flex: 0 0 var(--pp-cov); height: var(--pp-cov); min-height: 0; }
html body.b2 .b2-gvc--hascover .b2-gvc__cover::after { content: none; }
html body.b2 .b2-gvc--hascover .b2-gvc__coverrow { position: absolute; top: var(--pp-cov); left: 0; right: 0; align-items: center; padding: 12px 14px 0; }
html body.b2 .b2-gvc.b2-gvc--hascover a.b2-gvc__name { overflow: hidden; color: var(--pp-heading) !important; font-size: 15px; text-overflow: ellipsis; text-shadow: none; white-space: nowrap; }
html body.b2.dark .b2-gvc.b2-gvc--hascover a.b2-gvc__name { color: #e6ecf8 !important; text-shadow: none; }
html body.b2 .b2-gvc--hascover .b2-gvc__coverdesc,
html body.b2 .b2-gvc.b2-gvc--hascover .b2-gvc__desc {
  display: -webkit-box !important; overflow: hidden !important; color: #6f7f9d !important; font-size: 11.5px; line-height: 1.55; text-shadow: none !important; opacity: 1;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2 !important;
}
html body.b2 .b2-gvc--hascover .b2-gvc__coverdesc { position: absolute; top: calc(var(--pp-cov) + 44px); left: 0; right: 0; padding: 0 14px; }
html body.b2 .b2-gvc.b2-gvc--hascover .b2-gvc__desc { margin: 0 14px; padding: 0; }
html body.b2.dark .b2-gvc--hascover .b2-gvc__coverdesc,
html body.b2.dark .b2-gvc.b2-gvc--hascover .b2-gvc__desc { color: #8494ad !important; }
html body.b2 .b2-gvc--hascover .b2-gvc__main { padding-top: 44px; }
html body.b2 .b2-gvc--case.b2-gvc--hascover .b2-gvc__main { padding-top: 84px; }
html body.b2 .b2-gvc--hascover .b2-gvc__list { margin: auto 0 0; padding: 10px 6px 6px; }
html body.b2 .b2-gvc--hascover .b2-gvc__empty { padding: 4px 8px 8px; font-size: 11.5px; }
html body.b2 .b2-gvc:is(.b2-gvc--hascover, .b2-gvc--case) .b2-gvc__stats > * {
  border-color: color-mix(in srgb, var(--pp-c1) 22%, #dde5f2) !important;
  background: color-mix(in srgb, var(--pp-c1) 8%, #fff) !important;
  color: #56678a !important; font-weight: 600; box-shadow: none; text-shadow: none !important; opacity: 1 !important;
}
html body.b2.dark .b2-gvc:is(.b2-gvc--hascover, .b2-gvc--case) .b2-gvc__stats > * {
  border-color: color-mix(in srgb, var(--pp-c1) 30%, #26334f) !important;
  background: color-mix(in srgb, var(--pp-c1) 12%, rgba(20,30,50,.6)) !important;
  color: #9fb0cc !important;
}
/* odd number of forums: the first card fills its row (art left, text right) so the rest pair up evenly */
@media (min-width: 861px) {
  html body.b2 .b2-gv__grid > .b2-gvc--hascover:first-child:nth-last-child(odd) { grid-column: 1 / -1; flex-direction: row; }
  html body.b2 .b2-gv__grid > .b2-gvc--hascover:first-child:nth-last-child(odd) .b2-gvc__cover { flex: 0 0 calc(50% - 8px); height: auto; min-height: var(--pp-cov); }
  html body.b2 .b2-gv__grid > .b2-gvc--hascover:first-child:nth-last-child(odd) .b2-gvc__coverrow { top: 0; left: calc(50% - 8px); }
  html body.b2 .b2-gv__grid > .b2-gvc--hascover:first-child:nth-last-child(odd) .b2-gvc__coverdesc { top: 44px; left: calc(50% - 8px); }
}
/* dark mode: calmer cover art (a blend, because filter would break the text placed below the cover), unread marks in the category colour */
html body.b2.dark .b2-gvc--hascover .b2-gvc__cover { background-color: #d9deea; background-blend-mode: multiply; }
html body.b2.dark .b2-cat { --fs-forum-accent: color-mix(in srgb, var(--pp-c2) 70%, #fff); }
/* the spotlight sits flush under a category in grid view */
body.b2:has(.b2-gv__grid) .pp-spot { margin-top: 16px; }
@media (max-width: 640px) {
  html body.b2 .b2-gv__grid { --pp-cov: 120px; }
  html body.b2 .b2-gvc--case.b2-gvc--hascover .b2-gvc__main { padding-top: 44px; }
}

/* =====================================================================
   64. MOBILE LAYOUT (phones) — tighter gutters, row/card layouts that fit
   no horizontal overflow.
   ===================================================================== */
@media (max-width: 640px) {
  html body.b2, html body.b2 #wrap { overflow-x: hidden; }
  html body.b2 #wrap { margin-left: 6px !important; margin-right: 6px !important; width: auto !important; max-width: calc(100vw - 12px) !important; border-radius: 20px; }
  html body.b2 #wrap::before { border-radius: 20px; }
  html body.b2 #wrap, html body.b2 #wrap > * { min-width: 0; }

  /* header / nav */
  html body.b2 #wrap :is(header, .p-header, [class*="header"]) { max-width: 100%; }
  html body.b2 :is(nav, [class*="navbar"], [class*="b2-nav"]) { flex-wrap: wrap; gap: 6px; }
  html body.b2 :is(nav, [class*="navbar"], [class*="b2-nav"]) :is(a, button) { font-size: 12.5px; padding: 6px 10px; }
  html body.b2 :is(.breadcrumbs, [class*="breadcrumb"]) { padding: 8px 12px !important; overflow-x: auto; white-space: nowrap; }
  html body.b2 :is(.breadcrumbs, [class*="breadcrumb"]) svg { width: 12px !important; height: 12px !important; }

  /* categories */
  html body.b2 .b2-cat { margin-left: 8px !important; margin-right: 8px !important; min-width: 0; max-width: 100%; }
  html body.b2 .b2-cat__head { padding: 12px 12px !important; gap: 10px; min-width: 0; }

  /* forum rows: icon tile + text side by side, stats/last-post underneath */
  html body.b2 .b2-forum {
    display: grid !important; grid-template-columns: 52px minmax(0, 1fr); align-items: stretch;
    margin: 10px 8px !important;
  }
  html body.b2 .b2-forum__marker { grid-column: 1; grid-row: 1; width: auto !important; min-width: 0; }
  html body.b2 .b2-forum__main { grid-column: 2; grid-row: 1; min-width: 0; padding: 12px 12px 12px 8px !important; }
  html body.b2 .b2-forum__stats, html body.b2 .b2-forum__qa { display: none !important; }
  html body.b2 .b2-forum__last { grid-column: 1 / -1; grid-row: 2; width: auto !important; border-top: 1px solid var(--pp-border, #dde5f2); padding: 10px 14px !important; min-width: 0; }
  html body.b2 .b2-forum__name { font-size: 15px; overflow-wrap: anywhere; }
  html body.b2 .b2-forum__statline { flex-wrap: wrap; }
  html body.b2 .b2-forum .b2-sf { gap: 5px; }

  /* forum header (forum page) */
  html body.b2 .b2-fhead, html body.b2 .b2-fhead__row { flex-wrap: wrap; min-width: 0; max-width: 100%; gap: 10px; }
  html body.b2 .b2-fhead__stats, html body.b2 .b2-fhead__acts { flex-wrap: wrap; min-width: 0; max-width: 100%; gap: 8px; }
  html body.b2 .board-layout__main { min-width: 0; max-width: 100%; }
  html body.b2 .b2-fhead__act, html body.b2 .b2-fhead .btn { flex: 1 1 auto; }

  /* grid view: single column */
  html body.b2 .b2-gv__grid { grid-template-columns: minmax(0, 1fr) !important; gap: 12px; padding: 10px; }
  html body.b2 .b2-gvc--case { grid-column: auto !important; flex-direction: column !important; }

  /* hero */
  html body.b2 :is(h1, .hero h1) { font-size: clamp(24px, 7vw, 30px); line-height: 1.15; }

  /* topic list / tables / images never exceed screen */
  html body.b2 :is(table, pre, img, video, iframe) { max-width: 100%; }
  html body.b2 :is(table, pre) { display: block; overflow-x: auto; }
  html body.b2 .widget--board_statistics .board-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  html body.b2 .b2-forum__marker { display: flex; align-items: flex-start; justify-content: center; padding: 14px 0 0 !important; overflow: visible; }
  html body.b2 .b2-forum__marker > :not([class*="dot"]):not([class*="badge"]):not([class*="unread"]),
  html body.b2 .b2-forum__marker form { margin: 0 !important; position: static; }
  html body.b2 .b2-forum__marker > :not([class*="dot"]):not([class*="badge"]):not([class*="unread"]) { width: 38px; height: 38px; border-radius: 12px; }
  html body.b2 [class*="b2-toolrow"] { flex-wrap: wrap !important; max-width: 100%; min-width: 0; gap: 8px; overflow: visible; }
  html body.b2 [class*="b2-toolrow"] > * { min-width: 0; max-width: 100%; }
  html body.b2 .b2-toolrow__chip { white-space: nowrap; }
}

@media (max-width: 640px) {
  html body.b2.b2 .b2-forum > .b2-forum__marker { width: 52px !important; max-width: 52px; flex: none; }
  html body.b2.b2 .b2-forum > .b2-forum__marker > :not([class*="dot"]):not([class*="badge"]):not([class*="unread"]) {
    width: 38px !important; height: 38px !important; min-width: 0 !important; max-width: 38px !important;
    margin: 0 auto !important; left: auto !important; right: auto !important; transform: none !important; flex: none;
  }
}

@media (max-width: 640px) {
  html body.b2.b2 .b2-forum > .b2-forum__marker { display: flex !important; justify-content: center !important; align-items: flex-start !important; padding: 14px 0 0 0 !important; }
}

/* Category header tile: glow restored — the site's own CSS clips it via overflow on the title/header, so unclip every ancestor */
html body.b2 .b2-cat__title::before {
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 3px 10px -1px color-mix(in srgb, var(--pp-c2) 55%, transparent) !important;
}
html body.b2 .b2-cat > .b2-cat__head,
html body.b2 .b2-cat__head :is(.b2-cat__title, .b2-cat__titlewrap, [class*="b2-cat__head"], h2, h3, div, span),
html body.b2 .b2-cat__title {
  overflow: visible !important; clip-path: none !important; contain: none !important; text-overflow: clip;
}
html body.b2 .b2-cat__title { padding: 6px 4px 8px 0 !important; margin: -6px 0 -8px !important; }

/* more space between the category icon tile and its name */
html body.b2 .b2-cat__head { gap: 16px !important; }
html body.b2 .b2-cat__title::before { margin-right: 6px; }

/* Dropdown rows: the full-row link must stay clickable. The row's other children sit above it (z-index:1) so they
   would swallow the click — let clicks pass through them to the overlay link, but keep real links/buttons clickable. */
html body.b2 :is(.msg-row, .notification) > .notification__link { position: absolute !important; inset: 0; z-index: 0 !important; display: block; cursor: pointer; }
html body.b2 :is(.msg-row, .notification) > :not(.notification__link) { pointer-events: none; }
html body.b2 :is(.msg-row, .notification) > :not(.notification__link) :is(a, button, input, label, form) { pointer-events: auto; }

/* =====================================================================
   65. "WHILE YOU WERE AWAY" banner — matches the category cards
   ===================================================================== */
html body.b2 .b2-away {
  position: relative; overflow: hidden; align-items: center; gap: 14px;
  padding: 14px 16px 14px 16px !important;
  border: 1px solid var(--pp-border, #dde5f2) !important; border-left-width: 1px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #fcfdff, #f2f6fc) !important;
  box-shadow: 0 1px 2px rgba(40,60,110,.06) !important;
}
html body.b2 .b2-away::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; pointer-events: none;
  background: linear-gradient(90deg, #5f82d9, #8c6ad9);
}
html body.b2 .b2-away__icon {
  width: 38px !important; height: 38px !important; flex: none; border-radius: 12px !important;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #5f82d9, #8c6ad9) !important; color: #fff !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 3px 10px -1px color-mix(in srgb, #8c6ad9 55%, transparent);
}
html body.b2 .b2-away__icon i { color: #fff !important; font-size: 15px; }
html body.b2 .b2-away__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
html body.b2 .b2-away__title { color: #8c6ad9 !important; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
html body.b2 .b2-away__text { color: #6f7f9d !important; font-size: 14px; }
html body.b2 .b2-away__text strong { color: var(--pp-heading, #26324d) !important; font-weight: 700; }
html body.b2 .b2-away__dismiss { color: #8a9bb8 !important; border-radius: 8px; }
html body.b2 .b2-away__dismiss:hover { background: rgba(100,120,180,.12) !important; color: #5b6d8e !important; }

html body.b2.dark .b2-away {
  background: linear-gradient(180deg, #15203a, #0e1626) !important; border-color: #26334f !important; box-shadow: none !important;
}
html body.b2.dark .b2-away__title { color: #a99cf0 !important; }
html body.b2.dark .b2-away__text { color: #8494ad !important; }
html body.b2.dark .b2-away__text strong { color: #e6ecf8 !important; }
html body.b2.dark .b2-away__dismiss { color: #7f90ae !important; }
html body.b2.dark .b2-away__dismiss:hover { background: rgba(143,178,255,.12) !important; color: #c3d2ee !important; }

@media (max-width: 640px) {
  html body.b2 .b2-away { flex-wrap: wrap; margin-left: 8px; margin-right: 8px; }
  html body.b2 .b2-away__body { flex: 1 1 calc(100% - 100px); }
  html body.b2 .b2-away__cta { order: 3; }
}

/* =====================================================================
   66. UNREAD forum rows — stripe, tile and dot take the category's colours
   (vars --pp-c1/--pp-c2 are set on each .b2-cat; fall back to the default accent)
   ===================================================================== */
html body.b2 .b2-forum--unread::before,
html body.b2 .b2-forum.is-unread::before,
html body.b2 .b2-forum:has(.b2-forum__marker .forum__marker-badge--unread)::before {
  background: linear-gradient(to bottom, var(--pp-c1, #6087d1), var(--pp-c2, #7758ba)) !important;
}
html body.b2 .b2-forum__marker > .forum__marker-badge--unread,
html body.b2.dark .b2-forum__marker > .forum__marker-badge--unread {
  background: linear-gradient(145deg, var(--pp-c1, #6087d1), var(--pp-c2, #7758ba)) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 4px 12px -1px color-mix(in srgb, var(--pp-c2, #7758ba) 50%, transparent) !important;
  color: #fff !important;
}
html body.b2 .b2-forum__marker :is([class*="dot"], [class*="unread-dot"]):not([class*="badge"]),
html body.b2 .b2-forum__marker [class*="__dot"] {
  background: linear-gradient(145deg, var(--pp-c1, #6087d1), var(--pp-c2, #7758ba)) !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-c1, #6087d1) 22%, transparent) !important;
}

/* The unread badge sits inside marker > form > a, so target it at any depth */
html body.b2.b2 .b2-forum__marker .forum__marker-badge--unread,
html body.b2.dark .b2-forum__marker .forum__marker-badge--unread {
  background: linear-gradient(145deg, var(--pp-c1, #6087d1), var(--pp-c2, #7758ba)) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 4px 12px -1px color-mix(in srgb, var(--pp-c2, #7758ba) 50%, transparent) !important;
  border-color: transparent !important;
  color: #fff !important;
}
html body.b2 .b2-forum__marker .forum__marker-badge--unread :is(i, svg) { color: #fff !important; }

/* Unread dot: <span class="b2-forum__dot"> */
html body.b2.b2 .b2-forum .b2-forum__dot,
html body.b2.dark .b2-forum .b2-forum__dot {
  background: linear-gradient(145deg, var(--pp-c1, #6087d1), var(--pp-c2, #7758ba)) !important;
  background-color: var(--pp-c2, #7758ba) !important;
  border-color: transparent !important;
  color: var(--pp-c2, #7758ba) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-c1, #6087d1) 25%, transparent) !important;
}
html body.b2 .b2-forum .b2-forum__dot::before,
html body.b2 .b2-forum .b2-forum__dot::after { background: transparent !important; }

/* Unread dot moves next to the forum name (the corner dot is hidden) */
html body.b2.b2 .b2-forum .b2-forum__marker .b2-forum__dot { display: none !important; }
html body.b2 .b2-forum:has(.b2-forum__dot) .b2-forum__name > a::after {
  content: ""; display: inline-block; vertical-align: middle; position: relative; top: -1px;
  width: 8px; height: 8px; margin-left: 8px; border-radius: 50%;
  background: linear-gradient(145deg, var(--pp-c1, #6087d1), var(--pp-c2, #7758ba));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-c1, #6087d1) 25%, transparent);
}

/* =====================================================================
   67. Forum row HOVER — pressed-in, tinted with the category's colours
   ===================================================================== */
html body.b2.b2 .b2-forum:hover {
  border-color: color-mix(in srgb, var(--pp-c1, #8fa4cf) 45%, #dde5f2) !important;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--pp-c1, #8fa4cf) 12%, #eef2fa), color-mix(in srgb, var(--pp-c2, #8fa4cf) 5%, #f6f8fd)) !important;
  box-shadow: inset 0 3px 7px color-mix(in srgb, var(--pp-c2, #6478b4) 22%, transparent), inset 0 1px 2px color-mix(in srgb, var(--pp-c2, #6478b4) 14%, transparent) !important;
}
html body.b2.b2 .b2-forum:hover .b2-forum__marker { background: color-mix(in srgb, var(--pp-c1, #7758ba) 12%, transparent) !important; }
html body.b2.b2 .b2-forum:hover .b2-forum__last { background: color-mix(in srgb, var(--pp-c1, #6478b4) 7%, transparent) !important; }
html body.b2.b2 .b2-forum:hover .b2-forum__name a { color: var(--pp-c2, var(--pp-accent)) !important; }

html body.b2.dark.dark .b2-forum:hover {
  border-color: color-mix(in srgb, var(--pp-c1, #354a6f) 50%, #26334f) !important;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--pp-c1, #354a6f) 14%, #0b1322), color-mix(in srgb, var(--pp-c2, #354a6f) 8%, #101a2e)) !important;
  box-shadow: inset 0 3px 8px rgba(0,0,0,.5), inset 0 1px 2px rgba(0,0,0,.35) !important;
}
html body.b2.dark.dark .b2-forum:hover .b2-forum__marker { background: color-mix(in srgb, var(--pp-c1, #8fb2ff) 16%, transparent) !important; }
html body.b2.dark.dark .b2-forum:hover .b2-forum__last { background: color-mix(in srgb, var(--pp-c1, #8fb2ff) 8%, rgba(0,0,0,.15)) !important; }
html body.b2.dark.dark .b2-forum:hover .b2-forum__name a { color: color-mix(in srgb, var(--pp-c1, #8fb2ff) 70%, #fff) !important; }

/* softer hover tint */
html body.b2.b2.b2 .b2-forum:hover {
  border-color: color-mix(in srgb, var(--pp-c1, #8fa4cf) 28%, #dde5f2) !important;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--pp-c1, #8fa4cf) 5%, #f1f4fb), color-mix(in srgb, var(--pp-c2, #8fa4cf) 2%, #f7f9fd)) !important;
  box-shadow: inset 0 3px 7px color-mix(in srgb, var(--pp-c2, #6478b4) 12%, transparent), inset 0 1px 2px color-mix(in srgb, var(--pp-c2, #6478b4) 8%, transparent) !important;
}
html body.b2.b2.b2 .b2-forum:hover .b2-forum__marker { background: color-mix(in srgb, var(--pp-c1, #7758ba) 6%, transparent) !important; }
html body.b2.b2.b2 .b2-forum:hover .b2-forum__last { background: color-mix(in srgb, var(--pp-c1, #6478b4) 3%, transparent) !important; }
html body.b2.dark.dark.dark .b2-forum:hover {
  border-color: color-mix(in srgb, var(--pp-c1, #354a6f) 30%, #26334f) !important;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--pp-c1, #354a6f) 6%, #0b1322), color-mix(in srgb, var(--pp-c2, #354a6f) 3%, #101a2e)) !important;
}
html body.b2.dark.dark.dark .b2-forum:hover .b2-forum__marker { background: color-mix(in srgb, var(--pp-c1, #8fb2ff) 8%, transparent) !important; }
html body.b2.dark.dark.dark .b2-forum:hover .b2-forum__last { background: color-mix(in srgb, var(--pp-c1, #8fb2ff) 4%, rgba(0,0,0,.15)) !important; }

/* =====================================================================
   68. GIF PICKER — full-height thumbnails, scrollable grid
   ===================================================================== */
html body.b2 .gif-picker__panel:not([style*="display: none"]) {
  display: flex !important; flex-direction: column !important;
  height: auto !important; max-height: min(34rem, calc(100vh - 16px)) !important; overflow: hidden !important; /* ForumSpark sets position/width/max-height inline from JS; the grid inside scrolls */
}
html body.b2 .gif-picker__search, html body.b2 .gif-picker__footer { flex: none !important; }
html body.b2 .gif-picker__grid {
  flex: 1 1 auto !important; min-height: 0 !important;
  overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: max-content !important; align-content: start !important; align-items: start !important;
  gap: 8px !important; column-count: auto !important; padding: 10px !important;
}
html body.b2 .gif-picker__item {
  display: block !important; width: 100% !important; height: auto !important; min-height: 70px !important; max-height: none !important;
  margin: 0 !important; padding: 0 !important; border-radius: 10px !important; overflow: hidden !important; line-height: 0;
  box-shadow: none !important; background: rgba(100,120,180,.08) !important;
}
html body.b2 .gif-picker__item img { display: block !important; width: 100% !important; height: auto !important; min-height: 70px; object-fit: cover; }
html body.b2 .gif-picker__item:hover { opacity: 1 !important; transform: none; box-shadow: 0 0 0 2px var(--pp-accent, #7758ba) !important; }
html body.b2 .gif-picker__loading, html body.b2 .gif-picker__empty { grid-column: 1 / -1 !important; }

/* closed picker (Alpine x-show sets inline display:none) must stay hidden */
html body.b2 .gif-picker__panel[style*="display: none"] { display: none !important; }

/* PERFORMANCE: the gradient ring is page-tall — give it its own compositor layer so scrolling and hovering never repaint it */
html body.b2 #wrap::before { will-change: transform; transform: translateZ(0); contain: strict; }
/* hovers: only animate cheap properties (no layout/box-shadow transitions on every link) */
html body.b2 :is(.b2-forum, .b2-gvc, .panel, .b2-cat) { transition-property: background-color, border-color, opacity; }

/* ==========================================================
   69. FINAL PATCHES — posts, accent bars, post rail, rank pills, action bar, report popup, post links
   ========================================================== */

/* POSTS: ForumSpark's new rail layout (.reply--layout-rail) puts overflow:hidden on article.b2-post, which clips the
   accent bar inside the border. The rail/main columns round their own corners, so the card doesn't need clipping. */
html body.b2 article.b2-post { overflow: visible !important; }
/* the topic panel is only a wrapper, but the generic .panel::before still drew a square 4px bar over the first post */
html body.b2 .panel.topic::before { content: none !important; display: none !important; }

/* ACCENT BARS — credits popup, Credits page cards and stat tiles: same 4px bar + 16px corners as the main cards
   (the thinner 3px bar on 14px corners faded out around the curve at 100% zoom) */
html body.b2 :is(.b2-coins__menu, .cs-bal, .cs-stat, .cs-panel, .widget--board_statistics .board-stats-grid__item) { border-radius: 16px !important; }
html body.b2 :is(.b2-coins__menu, .cs-bal, .cs-stat, .cs-panel, .widget--board_statistics .board-stats-grid__item)::before {
  height: 18px !important;
  border-radius: 16px 16px 0 0 !important;
  -webkit-mask: linear-gradient(#000 0 4px, transparent 4px) !important;
  mask: linear-gradient(#000 0 4px, transparent 4px) !important;
}
html body.b2 .cs-panel__h { border-radius: 15px 15px 0 0 !important; }

/* POST RAIL — profile card: soft gradient banner, ringed avatar, group pill, stats box.
   Desktop only: ForumSpark collapses the rail to a compact row at 1024px and below. */
@media (min-width: 1025px) {
  html body.b2 article.b2-post > aside.b2-post__rail { position: relative; padding: 28px 14px 20px !important; }
  html body.b2 article.b2-post > aside.b2-post__rail::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 84px;
    border-radius: 11px 0 0 0;
    background: var(--pp-post-grad, linear-gradient(135deg, #5f82d9, #8c6ad9));
    opacity: .24;
    pointer-events: none;
    -webkit-mask: linear-gradient(#000, transparent);
    mask: linear-gradient(#000, transparent);
  }
  html body.b2 .b2-post__rail > .b2-post__avatar {
    position: relative;
    box-sizing: border-box;
    width: 92px !important;
    height: 92px !important;
    margin: 0 auto 12px !important;
    padding: 3px !important;
    background: linear-gradient(135deg, #5f82d9, #8c6ad9);
    box-shadow: 0 0 0 3px #fff, 0 8px 18px rgba(119,88,186,.30);
  }
  html body.b2 .b2-post__rail > .b2-post__avatar img { display: block; width: 100% !important; height: 100% !important; border-radius: 50%; }
  html body.b2 .b2-post__rail .b2-post__who { position: relative; }
  html body.b2 .b2-post__rail .b2-post__name { font-size: 15px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
  html body.b2 .b2-post__rail .b2-post__group {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
    padding: 4px 11px;
    border: 1px solid rgba(119,88,186,.24);
    background: rgba(119,88,186,.10);
    color: #6b4fb0;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .07em;
  }
  html body.b2 .b2-post__rail .b2-post__group--staff {
    border-color: transparent;
    background: linear-gradient(135deg, #5f82d9, #8c6ad9);
    color: #fff;
    box-shadow: 0 3px 9px rgba(119,88,186,.32), inset 0 1px 0 rgba(255,255,255,.25);
  }
  html body.b2 .b2-post__rail .b2-post__group--staff::before {
    content: "\f3ed";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
    font-size-adjust: none;
    font-size: 9px;
    font-weight: 900;
  }
  html body.b2 .b2-post__rail .b2-post__railmeta {
    margin: 14px 0 0;
    padding: 9px 10px;
    border: 1px solid var(--pp-border-soft);
    border-radius: 10px;
    background: rgba(255,255,255,.65);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
    color: var(--pp-muted);
    font-size: 11px;
    line-height: 1.65;
  }
  html body.b2 .b2-post__rail .b2-post__railmeta::first-line { color: var(--pp-heading); font-size: 12.5px; font-weight: 800; }
  html body.b2 .b2-post__rail .b2-coins--rail { margin-top: 10px; }

  html body.b2.dark article.b2-post > aside.b2-post__rail::before { opacity: .32; }
  html body.b2.dark .b2-post__rail > .b2-post__avatar { box-shadow: 0 0 0 3px #1d2a44, 0 8px 18px rgba(0,0,0,.5); }
  html body.b2.dark .b2-post__rail .b2-post__group { border-color: rgba(143,178,255,.24); background: rgba(143,178,255,.10); color: #b7c8ff; }
  html body.b2.dark .b2-post__rail .b2-post__group--staff { border-color: transparent; background: linear-gradient(135deg, #5f82d9, #8c6ad9); color: #fff; box-shadow: 0 3px 9px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.2); }
  html body.b2.dark .b2-post__rail .b2-post__railmeta { border-color: #22314d; background: rgba(10,16,30,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.03); color: #8494ad; }
  html body.b2.dark .b2-post__rail .b2-post__railmeta::first-line { color: #e2e8f4; }
}

/* POST ACTION BAR — quiet buttons until hover, Quote as the main action, Delete/Report warn on hover.
   Desktop only: on phones these sit behind ForumSpark's own "more" menu. */
@media (min-width: 769px) {
  html body.b2 footer.b2-post__actions .reply-action-group .btn:not([href*="replies/create?quote="]):not(.tip-control__pop *):not([class*="dropdown"] *):not(:hover):not(:focus-visible) {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #6b7c9c !important;
  }
  html body.b2.dark footer.b2-post__actions .reply-action-group .btn:not([href*="replies/create?quote="]):not(.tip-control__pop *):not([class*="dropdown"] *):not(:hover):not(:focus-visible) {
    color: #9aaccb !important;
  }
  html body.b2 footer.b2-post__actions .reply-action-group .btn[href*="replies/create?quote="]:not(:hover):not(:focus-visible) {
    border-color: rgba(119,88,186,.26) !important;
    background: rgba(119,88,186,.10) !important;
    color: var(--pp-accent) !important;
  }
  html body.b2.dark footer.b2-post__actions .reply-action-group .btn[href*="replies/create?quote="]:not(:hover):not(:focus-visible) {
    border-color: rgba(143,178,255,.26) !important;
    background: rgba(143,178,255,.12) !important;
    color: #b7c8ff !important;
  }
  html body.b2 footer.b2-post__actions :is(.post-action-edit-delete button, [onclick*="open-report-modal"]):is(:hover, :focus-visible) {
    border-color: #e3b4b8 !important;
    background: rgba(224,86,90,.10) !important;
    color: #c73c4a !important;
    box-shadow: inset 0 2px 5px rgba(170,50,60,.16) !important;
  }
  html body.b2.dark footer.b2-post__actions :is(.post-action-edit-delete button, [onclick*="open-report-modal"]):is(:hover, :focus-visible) {
    border-color: #6e3a45 !important;
    background: rgba(224,86,90,.14) !important;
    color: #ff9aa2 !important;
    box-shadow: inset 0 3px 7px rgba(0,0,0,.40) !important;
  }
}

/* POST TEXT — a step brighter in dark mode */
html body.b2.dark .b2-post__body { color: #d3ddf0; }

/* bold text keeps a colour picked in the editor (the editor wraps it in a span, and the bold colour above would beat it) */
html body.b2 .b2-post__body [style*="color"] :is(strong, b) { color: inherit !important; }

/* REPORT POPUP (.rm-*) — ForumSpark builds it from --rm-* colours, so most of the restyle is swapping those */
html body.b2 .rm-overlay {
  --rm-panel: #fcfdff; --rm-border: var(--pp-border); --rm-soft: #e9eff9; --rm-soft2: #f3f6fd;
  --rm-text: #3d4d6b; --rm-muted: #6b7c9c; --rm-green: #7758ba; --rm-rp: 16px; --rm-rc: 12px;
}
html body.b2.dark .rm-overlay {
  --rm-panel: #131d31; --rm-border: #22314d; --rm-soft: #1a2742; --rm-soft2: #0f1726;
  --rm-text: #d3ddf0; --rm-muted: #8fa0bd; --rm-green: #8fb2ff;
}
html body.b2 .rm-backdrop { background: rgba(20,24,50,.55); }
html body.b2 .rm-modal { background: linear-gradient(90deg, #5f82d9, #8c6ad9) top / 100% 4px no-repeat, var(--rm-panel); }
html body.b2 .rm-split { padding-top: 4px; }
html body.b2 .rm-context { background: linear-gradient(to bottom, #eef3fc, #f7f9fe); }
html body.b2.dark .rm-context { background: linear-gradient(to bottom, #1a2742, #111a2e); }
html body.b2 .rm-shield { border: 0; background: linear-gradient(135deg, #5f82d9, #8c6ad9); color: #fff; box-shadow: 0 4px 10px rgba(119,88,186,.30); }
html body.b2 .rm-reason { background: var(--pp-btn-bg); color: var(--pp-btn-text); box-shadow: 0 2px 6px rgba(100,120,180,.12); font-weight: 700; }
html body.b2 .rm-reason__ico { color: var(--rm-green); }
html body.b2 .rm-reason:not(.rm-reason--on):is(:hover, :focus-visible) {
  transform: translateY(1px);
  border-color: #b4c3dc;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc);
  color: var(--pp-accent);
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18);
  outline: 0;
}
html body.b2 .rm-overlay .rm-reason--on,
html body.b2 .rm-overlay .rm-reason--on .rm-reason__ico,
html body.b2 .rm-overlay .rm-reason--on .rm-reason__desc,
html body.b2 .rm-overlay .rm-reason--on .rm-reason__tick { color: #fff; }
html body.b2 .rm-overlay .rm-reason--on { border-color: transparent; background: linear-gradient(135deg, #5f82d9, #8c6ad9); box-shadow: 0 4px 10px rgba(119,88,186,.30); }
html body.b2 .rm-overlay button.rm-btn--primary,
html body.b2 .rm-overlay button.rm-btn--primary:not([disabled]):is(:hover, :focus-visible) { border-color: transparent !important; color: #fff !important; filter: none; }
html body.b2 .rm-overlay button.rm-btn--primary { background: linear-gradient(135deg, #5f82d9, #8c6ad9) !important; box-shadow: 0 6px 16px rgba(119,88,186,.34), inset 0 1px 0 rgba(255,255,255,.28) !important; }
html body.b2 .rm-overlay button.rm-btn--primary:not([disabled]):is(:hover, :focus-visible) { transform: translateY(1px); background: linear-gradient(135deg, #6a8be0, #9776e0) !important; box-shadow: inset 0 3px 6px rgba(60,40,130,.22), inset 0 1px 2px rgba(60,40,130,.14) !important; }
html body.b2 .rm-overlay button.rm-btn--ghost { background: var(--pp-btn-bg); color: var(--pp-btn-text); }
html body.b2.dark .rm-reason { background: linear-gradient(to bottom, #131d31, #0f1726); color: #cbd5e1; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
html body.b2.dark .rm-reason:not(.rm-reason--on):is(:hover, :focus-visible) { border-color: #354a6f; background: linear-gradient(to bottom, #0d1524, #121c2f); color: #8fb2ff; box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.40); }
html body.b2.dark .rm-overlay button.rm-btn--ghost { background: linear-gradient(to bottom, #131d31, #0f1726); color: #cbd5e1; }

/* CHAT DOCK (.chat-dock*) — ForumSpark builds it from --cdk-* colours, so most of the restyle is swapping those */
html body.b2 .chat-dock-container {
  --cdk-green: #7758ba; --cdk-panel: #fcfdff; --cdk-border: var(--pp-border); --cdk-soft: #e3eaf5;
  --cdk-text: #3d4d6b; --cdk-muted: #6b7c9c; --cdk-fill: #f1f5fc; --cdk-fill2: #e9eff9; --cdk-rp: 16px; --cdk-rc: 12px;
}
html body.b2.dark .chat-dock-container {
  --cdk-green: #8fb2ff; --cdk-panel: #131d31; --cdk-border: #22314d; --cdk-soft: #22314d;
  --cdk-text: #d3ddf0; --cdk-muted: #8fa0bd; --cdk-fill: #0f1726; --cdk-fill2: #1a2742;
}
/* launcher + avatar bubbles */
html body.b2 .chat-dock__launch { background: linear-gradient(135deg, #5f82d9, #8c6ad9); color: #fff; box-shadow: 0 6px 16px rgba(119,88,186,.38), inset 0 1px 0 rgba(255,255,255,.28); transition: transform .12s ease, box-shadow .12s ease; }
html body.b2 .chat-dock__launch:is(:hover, :focus-visible) { transform: translateY(1px); background: linear-gradient(135deg, #6a8be0, #9776e0); box-shadow: inset 0 3px 6px rgba(60,40,130,.22), inset 0 1px 2px rgba(60,40,130,.14); filter: none; outline: 0; }
html body.b2 .chat-dock__avbub { border-color: #fff; box-shadow: 0 4px 12px rgba(80,100,160,.28); }
html body.b2.dark .chat-dock__avbub { border-color: #1d2a44; box-shadow: 0 4px 12px rgba(0,0,0,.5); }
html body.b2 .chat-dock__avbub.is-unread { border-color: #8c6ad9; }
/* conversation list */
html body.b2 .chat-dock__panel { background: linear-gradient(90deg, #5f82d9, #8c6ad9) top / 100% 4px no-repeat, linear-gradient(#fcfdff, #f2f6fc); box-shadow: 0 14px 32px rgba(80,100,160,.26); }
html body.b2.dark .chat-dock__panel { background: linear-gradient(90deg, #5f82d9, #8c6ad9) top / 100% 4px no-repeat, linear-gradient(#15203a, #0e1626); box-shadow: 0 14px 32px rgba(0,0,0,.55); }
html body.b2 .chat-dock__panel-header { padding: 15px 16px 11px; }
html body.b2 .chat-dock__panel-title { color: var(--pp-heading); font-size: 15px; }
html body.b2.dark .chat-dock__panel-title { color: #e2e8f4; }
html body.b2 .chat-dock__list-item { box-sizing: border-box; gap: 12px; padding: 10px 14px !important; border-bottom: 1px solid var(--cdk-soft) !important; }
html body.b2 .chat-dock__list-item:last-child { border-bottom: 0 !important; }
html body.b2 .chat-dock__list-name { font-size: 13px; }
html body.b2 .chat-dock__list-time, html body.b2 .chat-dock__list-preview { font-size: 11px; }
html body.b2 .chat-dock__list-item:is(:hover, :focus-visible) { background: rgba(119,88,186,.08); outline: 0; }
html body.b2.dark .chat-dock__list-item:is(:hover, :focus-visible) { background: rgba(143,178,255,.08); }
html body.b2 .chat-dock__list-name { font-weight: 700; }
html body.b2 .chat-dock__avatar-img { box-shadow: 0 2px 6px rgba(80,100,160,.22); }
/* chat window */
html body.b2 .chat-dock-window { box-shadow: 0 -4px 20px rgba(80,100,160,.24); }
html body.b2.dark .chat-dock-window { box-shadow: 0 -4px 20px rgba(0,0,0,.5); }
html body.b2 .chat-dock-window__header { padding-top: 12px; background: linear-gradient(90deg, #5f82d9, #8c6ad9) top / 100% 4px no-repeat, linear-gradient(to bottom, #f6f9fe, #edf2fb); }
html body.b2.dark .chat-dock-window__header { background: linear-gradient(90deg, #5f82d9, #8c6ad9) top / 100% 4px no-repeat, linear-gradient(to bottom, #1a2742, #111a2e); }
html body.b2 .chat-dock__messages { background: #f3f6fd; }
html body.b2.dark .chat-dock__messages { background: #0e1626; }
html body.b2 .chat-dock__msg--mine .chat-dock__bubble { border-color: transparent; background: linear-gradient(135deg, #5f82d9, #8c6ad9); color: #fff; }
html body.b2 .chat-dock__msg--mine .chat-dock__bubble a { color: #fff; }
html body.b2 .chat-dock__msg--theirs .chat-dock__bubble { background: var(--cdk-panel); }
html body.b2 .chat-dock__msg--mine .chat-dock__read-receipt { color: #fff; }
html body.b2 .chat-dock-window .chat-dock__reply-btn,
html body.b2 .chat-dock-window .chat-dock__reply-btn:hover { background: linear-gradient(135deg, #5f82d9, #8c6ad9); color: #fff; }

/* COMPOSER OPTIONS (Close topic / Pin topic) — toggle pills instead of bare checkboxes; the real checkbox stays for keyboards */
html body.b2 .b2-cfield .option-list { display: flex; flex-wrap: wrap; gap: 8px; }
html body.b2 .b2-cfield .option-list .inline-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid var(--pp-border);
  border-radius: 12px;
  background: var(--pp-btn-bg);
  box-shadow: 0 2px 6px rgba(100,120,180,.12);
  color: var(--pp-btn-text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
  cursor: pointer;
  user-select: none;
}
html body.b2 .b2-cfield .option-list .inline-label input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
html body.b2 .b2-cfield .option-list .inline-label:has(input:is([name="close_topic"], [name="pin_topic"])) span::before {
  margin-right: 7px;
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
  font-size-adjust: none;
  font-weight: 900;
}
html body.b2 .b2-cfield .option-list .inline-label:has(input[name="close_topic"]) span::before { content: "\f023"; }
html body.b2 .b2-cfield .option-list .inline-label:has(input[name="pin_topic"]) span::before { content: "\f08d"; }
html body.b2 .b2-cfield .option-list .inline-label:hover {
  transform: translateY(1px);
  border-color: #b4c3dc;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc);
  color: var(--pp-accent);
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18);
}
html body.b2 .b2-cfield .option-list .inline-label:has(input:focus-visible) { outline: 2px solid rgba(119,88,186,.45); outline-offset: 2px; }
html body.b2 .b2-cfield .option-list .inline-label:has(input:checked) {
  border-color: transparent;
  background: linear-gradient(135deg, #5f82d9, #8c6ad9);
  color: #fff;
  box-shadow: 0 4px 12px rgba(119,88,186,.32), inset 0 1px 0 rgba(255,255,255,.28);
}
html body.b2.dark .b2-cfield .option-list .inline-label:not(:has(input:checked)) { border-color: #22314d; background: linear-gradient(to bottom, #131d31, #0f1726); box-shadow: 0 2px 8px rgba(0,0,0,.35); color: #cbd5e1; }
html body.b2.dark .b2-cfield .option-list .inline-label:not(:has(input:checked)):hover { border-color: #354a6f; background: linear-gradient(to bottom, #0d1524, #121c2f); box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.40); color: #8fb2ff; }

/* POST FORMATTING — headings, lists and dividers from the editor (these have no class, unlike the theme's subject line) */
html body.b2 article.b2-post .b2-post__body :is(h1, h2, h3, h4):not([class]) {
  padding: 0 !important;
  border-bottom: 0 !important;
  border-image: none !important;
  letter-spacing: 0;
}
html body.b2 article.b2-post .b2-post__body :is(h1, h2):not([class]) { margin: 24px 0 10px !important; font-size: 22px !important; line-height: 1.3 !important; }
html body.b2 article.b2-post .b2-post__body h3:not([class]) { margin: 22px 0 8px !important; font-size: 17px !important; }
html body.b2 article.b2-post .b2-post__body h4:not([class]) { margin: 18px 0 6px; color: var(--pp-heading); font-size: 14px; font-weight: 800; }
html body.b2 article.b2-post .b2-post__body :is(h1, h2, h3, h4):not([class]):first-child { margin-top: 0 !important; }
html body.b2 article.b2-post .b2-post__body ul:not([class]) { padding-left: 22px; list-style: disc outside; }
html body.b2 article.b2-post .b2-post__body ol:not([class]) { padding-left: 24px; list-style: decimal outside; }
html body.b2 article.b2-post .b2-post__body :is(ul, ol):not([class]) > li { margin: 0 0 5px; padding-left: 3px; }
html body.b2 article.b2-post .b2-post__body :is(ul, ol):not([class]) > li::marker { color: var(--pp-accent); font-weight: 800; }
html body.b2.dark article.b2-post .b2-post__body :is(ul, ol):not([class]) > li::marker { color: #8fb2ff; }
html body.b2 article.b2-post .b2-post__body li > p { margin: 0; }
html body.b2 article.b2-post .b2-post__body hr:not([class]) { height: 1px; margin: 22px 0; border: 0; background: linear-gradient(to right, var(--pp-border), rgba(200,212,228,0)); }
html body.b2.dark article.b2-post .b2-post__body hr:not([class]) { background: linear-gradient(to right, #2b3d5e, rgba(43,61,94,0)); }

/* MODERATION BAR (b2-modbar) — floating selection bar on forum pages, as a theme card. No transform or display here: it uses those to centre and show/hide. */
html body.b2 .b2-modbar {
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--pp-border);
  border-radius: 16px;
  background: linear-gradient(90deg, #5f82d9, #8c6ad9) top / 100% 4px no-repeat, linear-gradient(#fcfdff, #f2f6fc);
  box-shadow: 0 14px 32px rgba(80,100,160,.28);
  color: var(--pp-heading);
}
@media (min-width: 769px) { html body.b2 .b2-modbar { width: max-content; } } /* keeps it on one row: left:50% would otherwise cap it at half the screen */
/* selects stay a set width, or a long automod name widens them until Go runs under the close button */
@media (min-width: 769px) {
  html body.b2 .b2-modbar { flex-wrap: nowrap; }
  html body.b2 .b2-modbar__forms { flex: 1 1 auto; flex-wrap: nowrap; min-width: 0; }
  html body.b2 .b2-modbar .moderator-actions__group { flex: 1 1 auto; min-width: 0; }
  html body.b2 .b2-modbar .moderator-actions__group form { flex: 1 1 auto; min-width: 0; }
  html body.b2 .b2-modbar select { flex: 1 1 auto; width: 190px; min-width: 0; max-width: 220px; }
}
html body.b2 .b2-modbar__count { font-size: 12px; font-weight: 800; }
html body.b2 .b2-modbar__count > span { background: linear-gradient(135deg, #5f82d9, #8c6ad9); box-shadow: 0 2px 6px rgba(119,88,186,.32); }
html body.b2 .b2-modbar select {
  height: 34px;
  padding: 0 30px 0 12px;
  border: 1px solid var(--pp-border);
  border-radius: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%237888a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E") right 10px center / 11px no-repeat, linear-gradient(to bottom, #fff, #eef3fb);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 5px rgba(100,120,180,.10);
  color: var(--pp-btn-text);
  color-scheme: light;
  font-size: 12px;
  font-weight: 700;
  appearance: none;
  -webkit-appearance: none;
}
html body.b2 .b2-modbar select:is(:hover, :focus-visible) { border-color: #b4c3dc; outline: 0; box-shadow: 0 0 0 3px rgba(119,88,186,.16); }
html body.b2 .b2-modbar select option { background: #fff; color: #3d4d6b; }
html body.b2 .b2-modbar__go {
  height: 34px;
  padding: 0 15px;
  border-radius: 10px;
  background: linear-gradient(135deg, #5f82d9, #8c6ad9);
  box-shadow: 0 4px 10px rgba(119,88,186,.30), inset 0 1px 0 rgba(255,255,255,.28);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
html body.b2 .b2-modbar__go:not(:disabled):is(:hover, :focus-visible) { transform: translateY(1px); background: linear-gradient(135deg, #6a8be0, #9776e0); box-shadow: inset 0 3px 6px rgba(60,40,130,.22), inset 0 1px 2px rgba(60,40,130,.14); outline: 0; }
html body.b2 .b2-modbar__go:disabled { box-shadow: none; opacity: .45; }
html body.b2 .b2-modbar__close { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: #6b7c9c; }
html body.b2 .b2-modbar__close:is(:hover, :focus-visible) { background: rgba(119,88,186,.10); color: var(--pp-accent); outline: 0; }
html body.b2.dark .b2-modbar { border-color: #22314d; background: linear-gradient(90deg, #5f82d9, #8c6ad9) top / 100% 4px no-repeat, linear-gradient(#15203a, #0e1626); box-shadow: 0 14px 32px rgba(0,0,0,.55); color: #e2e8f4; }
html body.b2.dark .b2-modbar select { border-color: #22314d; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%238fa0bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E") right 10px center / 11px no-repeat, linear-gradient(to bottom, #131d31, #0f1726); box-shadow: 0 2px 6px rgba(0,0,0,.3); color: #cbd5e1; color-scheme: dark; }
html body.b2.dark .b2-modbar select:is(:hover, :focus-visible) { border-color: #354a6f; box-shadow: 0 0 0 3px rgba(143,178,255,.16); }
html body.b2.dark .b2-modbar select option { background: #131d31; color: #cbd5e1; }
html body.b2.dark .b2-modbar__close { color: #8fa0bd; }
html body.b2.dark .b2-modbar__close:is(:hover, :focus-visible) { background: rgba(143,178,255,.12); color: #8fb2ff; }

/* post and editor images follow the line's text alignment (the base styles make every image a block, which ignores it) */
html body.b2 :is(.b2-post__body, .ProseMirror, .tiptap) img.editor-image { display: inline-block; vertical-align: middle; }

/* SELECTION REPLY BUTTON — the quote styling above catches it through its class name, so it's set by id. Stays on the accent in both modes so it stands out from the post. */
html body.b2 #b2-squote {
  background: var(--pp-grad-accent) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(20,30,60,.28) !important;
}
html body.b2 #b2-squote i { color: inherit !important; }
html body.b2 #b2-squote:hover { box-shadow: inset 0 2px 5px rgba(0,0,0,.25) !important; }

/* TOPIC LABELS — shape and depth only. The background, text and border colours are set per label in the ACP. */
html body.b2 .label {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 9px;
  border-width: 1px;
  border-style: solid;
  border-radius: 6px;
  background-image: linear-gradient(to bottom, rgba(255,255,255,.22), rgba(255,255,255,0));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 3px rgba(40,50,90,.18);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .02em;
  text-decoration: none;
  vertical-align: middle;
  opacity: 1;
}
html body.b2 .label p { margin: 0; color: inherit; font: inherit; }
/* topic list titles are set to regular weight with !important, and that catches the label link too */
html body.b2 .label, html body.b2 .topic-row__title-line a.label { font-weight: 700 !important; }
html body.b2 a.label:hover { text-decoration: none; }
html body.b2.dark .label { box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 5px rgba(0,0,0,.4); }

/* TOPIC LIST LABEL FILTERS — drawn like the topic labels. ForumSpark only gives them a colour dot, so the dot is stretched to fill the button. */
html body.b2 .b2-tl__label {
  position: relative;
  isolation: isolate;
  min-height: 20px;
  padding: 2px 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  box-shadow: 0 1px 3px rgba(40,50,90,.18);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .02em;
}
html body.b2 .b2-tl__label::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(to bottom, rgba(255,255,255,.22), rgba(255,255,255,0));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.24), inset 0 2px 0 rgba(255,255,255,.3);
  pointer-events: none;
}
html body.b2 .b2-tl__label-sw {
  position: absolute;
  inset: -1px;
  z-index: -1;
  width: auto;
  height: auto;
  border-radius: inherit;
}
html body.b2 .b2-tl__label, html body.b2 .b2-tl__label:hover { opacity: 1 !important; } /* ForumSpark fades these to 85%, same as its labels */
html body.b2 .b2-tl__label:hover { border-color: transparent; color: #fff; }
html body.b2 .b2-tl__label.is-on { border-color: transparent; color: #fff; outline: 2px solid var(--pp-accent); outline-offset: 1px; }
html body.b2.dark .b2-tl__label { box-shadow: 0 2px 5px rgba(0,0,0,.4); }
html body.b2.dark .b2-tl__label.is-on { outline-color: #8fb2ff; }

/* POST LINKS — .zip links become a download button, theme preview links a quieter button (same press-in hover as the hero) */
html body.b2 .b2-post__body a:is([href$=".zip" i], [href*="/set-theme"]) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0;
  padding: 9px 16px;
  border: 1px solid var(--pp-border);
  border-radius: 12px;
  background: var(--pp-btn-bg);
  box-shadow: 0 2px 6px rgba(100,120,180,.12);
  color: var(--pp-btn-text) !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
  line-height: 1.2;
  text-decoration: none !important;
}
html body.b2 .b2-post__body a:is([href$=".zip" i], [href*="/set-theme"]) * { color: inherit !important; }
html body.b2 .b2-post__body a:is([href$=".zip" i], [href*="/set-theme"])::before {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
  font-size-adjust: none;
  font-weight: 900;
}
html body.b2 .b2-post__body a[href$=".zip" i]::before { content: "\f019"; }
html body.b2 .b2-post__body a[href*="/set-theme"]::before { content: "\f06e"; }
html body.b2 .b2-post__body a[href*="/set-theme"]:is(:hover, :focus-visible) {
  transform: translateY(1px);
  border-color: #b4c3dc;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc);
  color: var(--pp-accent) !important;
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18);
}
html body.b2 .b2-post__body a[href$=".zip" i] {
  border-color: transparent;
  background: linear-gradient(135deg, #5f82d9, #8c6ad9);
  box-shadow: 0 6px 16px rgba(119,88,186,.34), inset 0 1px 0 rgba(255,255,255,.28);
  color: #fff !important;
}
html body.b2 .b2-post__body a[href$=".zip" i]:is(:hover, :focus-visible) {
  transform: translateY(1px);
  background: linear-gradient(135deg, #6a8be0, #9776e0);
  box-shadow: inset 0 3px 6px rgba(60,40,130,.22), inset 0 1px 2px rgba(60,40,130,.14);
}
html body.b2.dark .b2-post__body a[href*="/set-theme"] {
  border-color: #22314d;
  background: linear-gradient(to bottom, #131d31, #0f1726);
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  color: #cbd5e1 !important;
}
html body.b2.dark .b2-post__body a[href*="/set-theme"]:is(:hover, :focus-visible) {
  border-color: #354a6f;
  background: linear-gradient(to bottom, #0d1524, #121c2f);
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.40);
  color: #8fb2ff !important;
}

/* RANK PILLS — colour + icon per group. .username--N is the ForumSpark group id:
   25 Administrators, 23 Community Team, 26 Code Team, 22 Members. A new group keeps the default pill until it gets a line here. */
html body.b2 :is(.b2-post__rail, .shoutbox__message__meta, .b2-ucard, .member-card, .staff2-card):has(.username--25),
html body.b2 .b2-prof:has(.b2-prof__handle .username--25) {
  --pp-rank-bg: linear-gradient(135deg, #e0565a, #a8305a); --pp-rank-fg: #fff; --pp-rank-bd: transparent; --pp-rank-ico: "\f521";
}
html body.b2 :is(.b2-post__rail, .shoutbox__message__meta, .b2-ucard, .member-card, .staff2-card):has(.username--23),
html body.b2 .b2-prof:has(.b2-prof__handle .username--23) {
  --pp-rank-bg: linear-gradient(135deg, #2fa36b, #1f8a7a); --pp-rank-fg: #fff; --pp-rank-bd: transparent; --pp-rank-ico: "\f086";
}
html body.b2 :is(.b2-post__rail, .shoutbox__message__meta, .b2-ucard, .member-card, .staff2-card):has(.username--26),
html body.b2 .b2-prof:has(.b2-prof__handle .username--26) {
  --pp-rank-bg: linear-gradient(135deg, #bf53d5, #7a5fd9); --pp-rank-fg: #fff; --pp-rank-bd: transparent; --pp-rank-ico: "\f121";
}
html body.b2 :is(.b2-post__rail, .shoutbox__message__meta, .b2-ucard, .member-card, .staff2-card):has(.username--22),
html body.b2 .b2-prof:has(.b2-prof__handle .username--22) {
  --pp-rank-bg: rgba(95,130,217,.12); --pp-rank-fg: #4a67b5; --pp-rank-bd: rgba(95,130,217,.28); --pp-rank-ico: "\f007";
}
html body.b2.dark :is(.b2-post__rail, .shoutbox__message__meta, .b2-ucard, .member-card, .staff2-card):has(.username--22),
html body.b2.dark .b2-prof:has(.b2-prof__handle .username--22) {
  --pp-rank-bg: rgba(143,178,255,.10); --pp-rank-fg: #b7c8ff; --pp-rank-bd: rgba(143,178,255,.24);
}

/* the pill itself, wherever the rank shows: post rail, shoutbox, hover card, members page, staff page, profile */
html body.b2 :is(.b2-post__rail, .shoutbox__message__meta, .b2-ucard, .member-card, .staff2-card):has(.username--25, .username--23, .username--26, .username--22) :is(.b2-post__group, .b2-ucard__group, .member-card__group, .staff2-card__title),
html body.b2 .b2-prof:has(.b2-prof__handle :is(.username--25, .username--23, .username--26, .username--22)) .b2-prof__staff {
  border: 1px solid var(--pp-rank-bd) !important;
  background: var(--pp-rank-bg) !important;
  color: var(--pp-rank-fg) !important;
  box-shadow: none !important;
  gap: 0;
}
html body.b2 :is(.b2-post__rail, .shoutbox__message__meta, .b2-ucard, .member-card, .staff2-card):has(.username--25, .username--23, .username--26, .username--22) :is(.b2-post__group, .b2-ucard__group, .member-card__group, .staff2-card__title)::before,
html body.b2 .b2-prof:has(.b2-prof__handle :is(.username--25, .username--23, .username--26, .username--22)) .b2-prof__staff::before {
  content: var(--pp-rank-ico);
  margin-right: .45em;
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
  font-size-adjust: none;
  font-size: .9em;
  font-weight: 900;
}

/* the staff page shows the rank as plain text, and the profile pill brings its own shield: match the rest */
html body.b2 :is(.staff2-card, .member-card):has(.username--25, .username--23, .username--26, .username--22) :is(.staff2-card__title, .member-card__group) {
  display: inline-block;
  margin-top: 4px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
html body.b2 .b2-prof:has(.b2-prof__handle :is(.username--25, .username--23, .username--26, .username--22)) .b2-prof__staff > i { display: none; }
/* some ranks arrive wrapped in a span with the group's inline colour, which hid the text on the gradient */
html body.b2 :is(.b2-post__group, .b2-ucard__group, .member-card__group, .staff2-card__title, .b2-prof__staff) :is(b, span) { color: inherit !important; font-weight: inherit; }


/* long last-post titles: let the column shrink so the title ellipsizes instead of running past the card */
html body.b2 .b2-forum__last .last-post { flex: 1 1 0; min-width: 0; }
html body.b2 .last-post__title-wrap { display: block; min-width: 0; }

/* phones: the user bar wraps to the left, so a right-anchored dropdown ran off the screen. Pin it to the screen edges instead */
@media (max-width: 767px) {
  html body.b2 .sub-menu .dropdown__content-wrapper {
    position: fixed !important;
    top: auto !important;
    left: 16px !important;
    right: 16px !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    margin-top: 6px !important;
    transform: none !important;
  }
}

/* messages: reaction bar and options button sit clear of the bubble and match the theme */
html body.b2 .cv-react-bar { bottom: calc(100% + 6px); padding: 4px; border: 1px solid var(--pp-border); background: linear-gradient(#fff, #eef3fb); box-shadow: 0 8px 20px rgba(80,100,160,.2); }
html body.b2 .cv-react-bar::after { height: 12px; }
html body.b2 .cv-msg--me .cv-react-bar { left: auto; right: 0; }
html body.b2 .cv-react-bar__btn:hover { background: #e9eff9; }
html body.b2 .cv-msg__menubtn { top: 50%; right: -30px; left: auto; margin-top: -12px; border: 1px solid #c4d2e8; background: linear-gradient(#fff, #eef3fb); }
html body.b2 .cv-msg--me .cv-msg__menubtn { right: auto; left: -30px; }
html body.b2 .cv-msg__menubtn::before { content: ""; position: absolute; top: 0; bottom: 0; left: -8px; right: -8px; }
html body.b2 .cv-msg__menu { top: calc(100% + 6px); padding: 4px; }
html body.b2 .cv-react { border: 1px solid #c4d2e8; background: linear-gradient(#fff, #eef3fb); color: var(--pp-heading); box-shadow: 0 1px 3px rgba(100,120,180,.14); }
html body.b2 .cv-react:hover:not(:disabled) { border-color: #b4c3dc; background: linear-gradient(to bottom, #e9eff9, #f3f6fc); }
html body.b2 .cv-react.is-on { border-color: #8c6ad9; background: linear-gradient(#f5f1ff, #e9e3fb); }
html body.b2 .cv-react.is-on .cv-react__n { color: #7758ba; }
html body.b2.dark .cv-react-bar { border-color: #22314d; background: linear-gradient(#15203a, #0e1626); box-shadow: 0 8px 20px rgba(0,0,0,.5); }
html body.b2.dark .cv-react-bar__btn:hover { background: #121c2f; }
html body.b2.dark .cv-msg__menubtn { border-color: #2a3a58; background: linear-gradient(#1a2742, #111a2e); color: #9fb0cc; }
html body.b2.dark .cv-react { border-color: #2a3a58; background: linear-gradient(#1a2742, #111a2e); color: #e2e8f4; box-shadow: none; }
html body.b2.dark .cv-react:hover:not(:disabled) { border-color: #354a6f; background: linear-gradient(to bottom, #0d1524, #121c2f); }
html body.b2.dark .cv-react.is-on { border-color: #8c6ad9; background: linear-gradient(#2a2452, #1d1a3c); }
html body.b2.dark .cv-react.is-on .cv-react__n { color: #b39dff; }

/* posts by staff: the rail banner and the accent bar take the group's colours. Members keep the default blue-purple */
html body.b2 article.b2-post:has(> .b2-post__rail .username--25) { --pp-post-grad: linear-gradient(135deg, #e0565a, #a8305a); }
html body.b2 article.b2-post:has(> .b2-post__rail .username--23) { --pp-post-grad: linear-gradient(135deg, #2fa36b, #1f8a7a); }
html body.b2 article.b2-post:has(> .b2-post__rail .username--26) { --pp-post-grad: linear-gradient(135deg, #bf53d5, #7a5fd9); }
html body.b2 article.b2-post:has(> .b2-post__rail :is(.username--25, .username--23, .username--26))::before { background: var(--pp-post-grad) !important; }

/* service status: the footer script wraps "Requests are currently open/closed" in .pp-service */
html body.b2 .pp-service { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; line-height: 1.4; vertical-align: middle; }
html body.b2 .pp-service::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
html body.b2 .pp-service--on { color: #2a8f64; }
html body.b2 .pp-service--off { color: #c0343f; }
html body.b2 .pp-service--on::before { box-shadow: 0 0 0 3px rgba(53,163,119,.18); }
html body.b2 .pp-service--off::before { box-shadow: 0 0 0 3px rgba(220,38,38,.14); }
html body.b2.dark .pp-service--on { color: #5fd0a3; }
html body.b2.dark .pp-service--off { color: #f08a90; }

/* grid: rows tint with the category colour on hover. Dark mode: unread marks in the category colour */
html body.b2 .b2-gvc__row:hover { background: color-mix(in srgb, var(--pp-c1) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pp-c1) 38%, transparent); }
html body.b2 .b2-gvc__row:hover .b2-gvc__rowtitle { color: var(--pp-c1) !important; }
html body.b2.dark .b2-gvc__row:hover { background: color-mix(in srgb, var(--pp-c1) 20%, transparent); }
html body.b2.dark .b2-gvc__row--unread .b2-gvc__rowtitle::before { background: var(--pp-c1); }
html body.b2.dark .b2-gvc__rowcount--unread { color: var(--pp-c1); }
/* grid: on hover the forum title takes the category colour, no underline */
html body.b2 .b2-gvc.b2-gvc a.b2-gvc__name:is(:hover, :focus-visible) { color: var(--pp-c1) !important; text-decoration: none !important; }


/* signatures: ForumSpark fades them to .75, which dulled images */
html body.b2 .signature { opacity: 1 !important; }


/* posts: tighter space above and below images */
html body.b2 .b2-post__body img.editor-image { margin-top: 4px !important; margin-bottom: 4px !important; }
html body.b2 .b2-post__body p:has(> img.editor-image) { margin-top: 8px !important; margin-bottom: 8px !important; }

/* shoutbox: online count pill matches the header buttons beside it */
html body.b2 .shoutbox .shoutbox__pill--header {
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid #c4d2e8 !important;
  border-radius: 10px !important;
  background: linear-gradient(#fff, #eef3fb) !important;
  color: #5b6d8e !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 5px rgba(100,120,180,.10) !important;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
html body.b2 .shoutbox .shoutbox__pill--header .shoutbox__status-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2fa36b !important;
  box-shadow: 0 0 0 3px rgba(47,163,107,.16) !important;
}
html body.b2.dark .shoutbox .shoutbox__pill--header {
  border-color: #2a3a58 !important;
  background: linear-gradient(#1a2742, #111a2e) !important;
  color: #b9c8e6 !important;
  box-shadow: none !important;
}
html body.b2.dark .shoutbox .shoutbox__pill--header .shoutbox__status-dot {
  background: #3fc98a !important;
  box-shadow: 0 0 0 3px rgba(63,201,138,.18) !important;
}

/* multi-quote dock: theme card, accent bar and buttons */
html body.b2 .mq-dock {
  gap: 12px;
  padding: 11px 12px 9px 16px !important;
  border: 1px solid #c4d2e8 !important;
  border-radius: 14px !important;
  background: var(--pp-grad-accent) top / 100% 3px no-repeat, linear-gradient(#fcfdff, #f2f6fc) !important;
  color: var(--pp-heading) !important;
  box-shadow: 0 8px 24px rgba(100,120,180,.24) !important;
}
html body.b2 .mq-dock__info {
  color: var(--pp-heading) !important;
  font-size: 13px;
  font-weight: 700;
}
html body.b2 .mq-dock__info i { color: #8c6ad9 !important; }
html body.b2 .mq-dock__chip {
  padding: 3px 9px;
  border: 1px solid rgba(95,130,217,.3) !important;
  border-radius: 999px !important;
  background: rgba(95,130,217,.12) !important;
  color: #4f6fc4 !important;
  font-size: 11.5px;
  font-weight: 600;
}
html body.b2 .mq-dock :is(.mq-dock__clear, .mq-dock__insert) {
  height: 34px;
  padding: 0 14px !important;
  border-radius: 10px !important;
  font-family: inherit !important;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, color .12s ease;
}
html body.b2 .mq-dock__clear {
  border: 1px solid #c4d2e8 !important;
  background: linear-gradient(#fff, #eef3fb) !important;
  color: #5b6d8e !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 5px rgba(100,120,180,.10) !important;
}
html body.b2 .mq-dock__clear:is(:hover, :focus-visible) {
  transform: translateY(1px);
  border-color: #b4c3dc !important;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc) !important;
  color: var(--pp-accent) !important;
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18) !important;
}
html body.b2 .mq-dock__insert {
  border: 1px solid transparent !important;
  background: var(--pp-grad-accent) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(119,88,186,.34), inset 0 1px 0 rgba(255,255,255,.28) !important;
}
html body.b2 .mq-dock__insert:is(:hover, :focus-visible) {
  transform: translateY(1px);
  box-shadow: inset 0 3px 7px rgba(40,30,90,.38) !important;
}
html body.b2.dark .mq-dock {
  border-color: #2a3a58 !important;
  background: var(--pp-grad-accent) top / 100% 3px no-repeat, linear-gradient(#15203a, #0e1626) !important;
  color: #e2e8f4 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.5) !important;
}
html body.b2.dark .mq-dock__info { color: #e2e8f4 !important; }
html body.b2.dark .mq-dock__info i { color: #8fb2ff !important; }
html body.b2.dark .mq-dock__chip {
  border-color: rgba(143,178,255,.28) !important;
  background: rgba(143,178,255,.12) !important;
  color: #b7c8ff !important;
}
html body.b2.dark .mq-dock__clear {
  border-color: #2a3a58 !important;
  background: linear-gradient(#1a2742, #111a2e) !important;
  color: #b9c8e6 !important;
  box-shadow: none !important;
}
html body.b2.dark .mq-dock__clear:is(:hover, :focus-visible) {
  border-color: #354a6f !important;
  background: linear-gradient(to bottom, #0d1524, #121c2f) !important;
  color: #8fb2ff !important;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.4) !important;
}

/* mobile: theme menu opens rightward so it stays on screen */
@media (max-width: 730px) {
  html body.b2 .fs-theme__menu { left: 0 !important; right: auto !important; max-width: calc(100vw - 44px); }
}

/* messages: a long reply quote stays inside the bubble instead of pushing it off screen */
html body.b2 .cv-msg { min-width: 0; }
html body.b2 .cv-msg :is(.cv-msg__col, .cv-msg__wrap) { min-width: 0; max-width: 100%; }
html body.b2 .cv-replyref { min-width: 0; max-width: 100%; box-sizing: border-box; }
html body.b2 .cv-replyref__text { flex: 0 1 auto; min-width: 0; }

/* dark: board's green primary swapped for theme colours (Forums/Latest tabs and anything else using it) */
html body.b2.dark { --fs-primary-color: #8fb2ff; --fs-panel-footer-accent: #8c6ad9; }

/* mobile tab bar: + button in the theme gradient */
html body.b2 .mobile-tab-bar__fab {
  border-color: var(--pp-surface) !important;
  background: var(--pp-grad-accent) !important;
  box-shadow: 0 6px 16px rgba(119,88,186,.42), inset 0 1px 0 rgba(255,255,255,.28) !important;
}

/* notice alerts (e.g. email not verified): theme card with an amber accent */
html body.b2 .alert--notice {
  padding: 18px 20px 16px !important;
  border: 1px solid #e8d3a8 !important;
  border-radius: 14px !important;
  background: linear-gradient(90deg, #e0a03a, #d9774f) top / 100% 4px no-repeat, linear-gradient(#fffdf8, #fbf5e9) !important;
  color: #6b5430 !important;
  box-shadow: 0 4px 14px rgba(150,120,60,.12) !important;
}
html body.b2 .alert--notice .alert__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 42px;
  height: 42px;
  margin-right: 14px;
  border: 1px solid rgba(224,160,58,.38);
  border-radius: 11px;
  background: rgba(224,160,58,.14);
  color: #c9851f !important;
}
html body.b2 .alert--notice .alert__icon svg { width: 22px; height: 22px; color: inherit; }
html body.b2 .alert--notice .alert__content { min-width: 0; margin-left: 0 !important; color: inherit !important; }
html body.b2 .alert--notice .alert__content p { margin: 0 0 10px; color: #6b5430 !important; font-size: 14px; font-weight: 600; line-height: 1.5; }
html body.b2 .alert--notice form[action*="verification-notification"] button {
  min-height: 34px;
  padding: 7px 14px;
  line-height: 1.35;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: var(--pp-grad-accent) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(119,88,186,.34), inset 0 1px 0 rgba(255,255,255,.28) !important;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
html body.b2 .alert--notice form[action*="verification-notification"] button:is(:hover, :focus-visible) {
  transform: translateY(1px);
  box-shadow: inset 0 3px 7px rgba(40,30,90,.38) !important;
}
html body.b2.dark .alert--notice {
  border-color: #4a3f2c !important;
  background: linear-gradient(90deg, #e0a03a, #d9774f) top / 100% 4px no-repeat, linear-gradient(#15203a, #0e1626) !important;
  color: #f0c987 !important;
  box-shadow: none !important;
}
html body.b2.dark .alert--notice .alert__icon { color: #f2b64f !important; }
html body.b2.dark .alert--notice .alert__content p { color: #f0c987 !important; }

/* top posters: leaderboard look - rank badges, count pills, first place highlight */
html body.b2 .widget--top_posters .widget-list { counter-reset: pp-rank; }
html body.b2 .widget--top_posters .widget-list__item { counter-increment: pp-rank; }
html body.b2 .widget--top_posters .last-post { display: flex; align-items: center; gap: 12px; }
html body.b2 .widget--top_posters .last-post__avatar { position: relative; flex: none; overflow: visible !important; }
html body.b2 .widget--top_posters .last-post__avatar::after {
  content: counter(pp-rank);
  position: absolute;
  right: -5px;
  bottom: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: linear-gradient(135deg, #8fa0bd, #6f7f9d);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}
html body.b2 .widget--top_posters .widget-list__item:nth-child(1) .last-post__avatar::after { background: linear-gradient(135deg, #f2c14e, #d98f24); }
html body.b2 .widget--top_posters .widget-list__item:nth-child(2) .last-post__avatar::after { background: linear-gradient(135deg, #c3cede, #8a99b0); }
html body.b2 .widget--top_posters .widget-list__item:nth-child(3) .last-post__avatar::after { background: linear-gradient(135deg, #dc9a6a, #ad6638); }
html body.b2 .widget--top_posters .last-post__detail { display: flex; flex: 1 1 auto; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
html body.b2 .widget--top_posters .user-tooltip { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body.b2 .widget--top_posters .last-post__meta {
  flex: none;
  margin: 0;
  padding: 3px 9px;
  border: 1px solid #d6e0ec;
  border-radius: 999px;
  background: #eef3fb;
  color: #52627f !important;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}
html body.b2 .widget--top_posters .widget-list__item:first-child { background: linear-gradient(90deg, rgba(232,169,60,.16), rgba(232,169,60,.02)) !important; }
html body.b2 .widget--top_posters .widget-list__item:first-child .last-post__meta { border-color: rgba(217,143,36,.4); background: rgba(232,169,60,.16); color: #8f5d12 !important; }
html body.b2.dark .widget--top_posters .last-post__avatar::after { border-color: #121b2c; }
html body.b2.dark .widget--top_posters .last-post__meta { border-color: #2a3a58; background: #172238; color: #b9c8e6 !important; }
html body.b2.dark .widget--top_posters .widget-list__item:first-child { background: linear-gradient(90deg, rgba(232,169,60,.13), rgba(232,169,60,.01)) !important; }
html body.b2.dark .widget--top_posters .widget-list__item:first-child .last-post__meta { border-color: rgba(232,169,60,.38); background: rgba(232,169,60,.13); color: #f2c97e !important; }

/* top posters: podium version. Goes after the leaderboard block in the theme */
html body.b2 .widget--top_posters .widget-list { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; column-gap: 6px; padding-top: 16px; }
html body.b2 .widget--top_posters .widget-list__item:nth-child(2) { order: 1; }
html body.b2 .widget--top_posters .widget-list__item:nth-child(1) { order: 2; }
html body.b2 .widget--top_posters .widget-list__item:nth-child(3) { order: 3; }
html body.b2 .widget--top_posters .widget-list__item:nth-child(n+4) { order: 4; grid-column: 1 / -1; }

/* the three podium spots */
html body.b2 .widget--top_posters .widget-list__item:nth-child(-n+3) { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; border-bottom: 0 !important; background: none !important; }
html body.b2.dark .widget--top_posters .widget-list__item:first-child { background: none !important; }
html body.b2 .widget--top_posters .widget-list__item:nth-child(-n+3) .last-post { flex-direction: column; gap: 8px; min-width: 0; padding: 0 2px 8px !important; }
html body.b2 .widget--top_posters .widget-list__item:nth-child(-n+3) .last-post__avatar { width: auto !important; height: auto !important; }
html body.b2 .widget--top_posters .widget-list__item:nth-child(-n+3) .last-post__avatar .avatar,
html body.b2 .widget--top_posters .widget-list__item:nth-child(-n+3) .last-post__avatar img { width: 48px !important; height: 48px !important; }
html body.b2 .widget--top_posters .widget-list__item:nth-child(1) .last-post__avatar .avatar,
html body.b2 .widget--top_posters .widget-list__item:nth-child(1) .last-post__avatar img { width: 60px !important; height: 60px !important; }
html body.b2 .widget--top_posters .widget-list__item:nth-child(1) .last-post__avatar .avatar { box-shadow: 0 0 0 3px #e8a93c; }
html body.b2 .widget--top_posters .widget-list__item:nth-child(-n+3) .last-post__avatar::after { right: -2px; bottom: -2px; width: 22px; height: 22px; font-size: 12px; }
html body.b2 .widget--top_posters .widget-list__item:nth-child(-n+3) .last-post__detail { flex-direction: column; gap: 5px; width: 100%; }
html body.b2 .widget--top_posters .widget-list__item:nth-child(-n+3) .user-tooltip { max-width: 100%; text-align: center; }

/* the steps */
html body.b2 .widget--top_posters .widget-list__item:nth-child(-n+3)::after { content: ""; display: block; flex: none; border-radius: 10px 10px 0 0; }
html body.b2 .widget--top_posters .widget-list__item:nth-child(1)::after { height: 26px; background: linear-gradient(rgba(232,169,60,.5), rgba(232,169,60,.06)); box-shadow: inset 0 3px 0 #e8a93c; }
html body.b2 .widget--top_posters .widget-list__item:nth-child(2)::after { height: 16px; background: linear-gradient(rgba(138,153,176,.42), rgba(138,153,176,.05)); box-shadow: inset 0 3px 0 #a7b4c8; }
html body.b2 .widget--top_posters .widget-list__item:nth-child(3)::after { height: 10px; background: linear-gradient(rgba(173,102,56,.42), rgba(173,102,56,.05)); box-shadow: inset 0 3px 0 #c98450; }

/* rows from 4 down: number on the left instead of the avatar badge */
html body.b2 .widget--top_posters .widget-list__item:nth-child(n+4) .last-post__avatar::after { content: none; }
html body.b2 .widget--top_posters .widget-list__item:nth-child(n+4) .last-post::before { content: counter(pp-rank); flex: none; width: 20px; color: var(--pp-muted); font-size: 12px; font-weight: 800; text-align: center; }
html body.b2 .widget--top_posters .widget-list__item:nth-child(4) { border-top: 1px solid #e3eaf5 !important; }
html body.b2.dark .widget--top_posters .widget-list__item:nth-child(4) { border-top-color: #22314d !important; }


/* top posters: silver and bronze rings to match gold */
html body.b2 .widget--top_posters .widget-list__item:nth-child(2) .last-post__avatar .avatar { box-shadow: 0 0 0 2px #a7b4c8; }
html body.b2 .widget--top_posters .widget-list__item:nth-child(3) .last-post__avatar .avatar { box-shadow: 0 0 0 2px #c98450; }

/* recent activity: stronger titles, forum chips (wrapped by the footer script) and row hover */
html body.b2 .widget--recent_activity .widget-recent-activity__item { transition: background .12s ease, box-shadow .12s ease; }
html body.b2 .widget--recent_activity .widget-recent-activity__title { color: var(--pp-heading) !important; font-weight: 600 !important; transition: color .12s ease; }
html body.b2 .widget--recent_activity .widget-recent-activity__meta { color: var(--pp-muted) !important; opacity: 1 !important; }
html body.b2 .widget--recent_activity .pp-ra-forum {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-top: 5px;
  padding: 2px 8px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--pp-ra, #5f82d9) 34%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--pp-ra, #5f82d9) 12%, transparent);
  color: color-mix(in srgb, var(--pp-ra, #5f82d9) 70%, #1f2a44);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html body.b2 .widget--recent_activity .widget-recent-activity__item:hover {
  background: color-mix(in srgb, var(--pp-ra, #5f82d9) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pp-ra, #5f82d9) 34%, transparent);
}
html body.b2 .widget--recent_activity .widget-recent-activity__item:hover .widget-recent-activity__title { color: var(--pp-ra, #5f82d9) !important; }
html body.b2.dark .widget--recent_activity .widget-recent-activity__title { color: #e2e8f4 !important; }
html body.b2.dark .widget--recent_activity .pp-ra-forum { color: color-mix(in srgb, var(--pp-ra, #5f82d9) 68%, #fff); }
html body.b2.dark .widget--recent_activity .widget-recent-activity__item:hover .widget-recent-activity__title { color: color-mix(in srgb, var(--pp-ra, #5f82d9) 68%, #fff) !important; }

/* users online: guest pill, live dot and tighter spacing */
html body.b2 .panel--users-online .panel__sub-header { padding-top: 8px !important; padding-bottom: 8px !important; }
html body.b2 .panel--users-online .stats-users { padding: 0 !important; border-bottom: 0 !important; }
html body.b2 .panel--users-online .widget-online-avatars { align-items: center; gap: 8px !important; padding: 12px 16px 14px !important; }
html body.b2 .panel--users-online .pp-online-guests {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 13px;
  border: 1px solid #c4d2e8;
  border-radius: 999px;
  background: linear-gradient(#fff, #eef3fb);
  color: #52627f;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
html body.b2 .panel--users-online .panel__title h2::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 9px;
  border-radius: 50%;
  background: #2fa36b;
  vertical-align: middle;
  animation: pp-live 2s ease-out infinite;
}
@keyframes pp-live {
  0% { box-shadow: 0 0 0 0 rgba(47,163,107,.5); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(47,163,107,0); }
}
@media (prefers-reduced-motion: reduce) {
  html body.b2 .panel--users-online .panel__title h2::after { animation: none; }
}
html body.b2.dark .panel--users-online .pp-online-guests { border-color: #2a3a58; background: linear-gradient(#1a2742, #111a2e); color: #b9c8e6; }
html body.b2.dark .panel--users-online .panel__title h2::after { background: #3fc98a; }


/* forum icon tiles: read state in the category colour too (unread stays the solid gradient) */
html body.b2 .b2-cat .b2-forum__marker .forum__marker-badge--read {
  border-color: color-mix(in srgb, var(--pp-c1) 28%, #d2dcee) !important;
  background: linear-gradient(to bottom, #fff, color-mix(in srgb, var(--pp-c1) 14%, #e9eff9)) !important;
  color: color-mix(in srgb, var(--pp-c1) 85%, #2a3552) !important;
}
html body.b2 .b2-cat .b2-forum:hover .b2-forum__marker .forum__marker-badge--read {
  border-color: color-mix(in srgb, var(--pp-c1) 28%, #d2dcee) !important;
  background: linear-gradient(to bottom, #fff, color-mix(in srgb, var(--pp-c1) 14%, #e9eff9)) !important;
  box-shadow: 0 2px 5px rgba(100,120,180,.12) !important;
  color: color-mix(in srgb, var(--pp-c1) 85%, #2a3552) !important;
}
html body.b2.dark .b2-cat .b2-forum__marker .forum__marker-badge--read {
  border-color: color-mix(in srgb, var(--pp-c1) 30%, #22314d) !important;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--pp-c1) 10%, #172238), #0f1726) !important;
  color: color-mix(in srgb, var(--pp-c1) 80%, #fff) !important;
}
html body.b2.dark .b2-cat .b2-forum:hover .b2-forum__marker .forum__marker-badge--read {
  border-color: color-mix(in srgb, var(--pp-c1) 30%, #22314d) !important;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--pp-c1) 10%, #172238), #0f1726) !important;
  box-shadow: 0 3px 8px rgba(0,0,0,.35) !important;
  color: color-mix(in srgb, var(--pp-c1) 80%, #fff) !important;
}


/* forum icon tiles: signed-in rows wrap the badge in form > a (click to mark read). The form is the tile, everything inside goes flat, so there's one box as for guests */
html body.b2.b2.b2 .b2-cat .b2-forum__marker > form > a,
html body.b2.b2.b2 .b2-cat .b2-forum__marker > form .forum__marker-badge,
html body.b2.b2.b2 .b2-cat .b2-forum:hover .b2-forum__marker > form > a,
html body.b2.b2.b2 .b2-cat .b2-forum:hover .b2-forum__marker > form .forum__marker-badge {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
html body.b2.b2.b2 .b2-cat .b2-forum__marker > form:has(.forum__marker-badge--unread) {
  border-color: transparent !important;
  background: linear-gradient(145deg, var(--pp-c1, #6087d1), var(--pp-c2, #7758ba)) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 4px 12px -1px color-mix(in srgb, var(--pp-c2, #7758ba) 50%, transparent) !important;
}

/* forum icon tiles: read tiles faded, one layer only */
html body.b2 .b2-cat .b2-forum__marker .forum__marker-badge--read { opacity: .55 !important; }
html body.b2.b2.b2 .b2-cat .b2-forum__marker > form .forum__marker-badge--read { opacity: 1 !important; }
html body.b2.b2.b2 .b2-cat .b2-forum__marker > form:has(.forum__marker-badge--read) { opacity: .55; }


/* forum icon tiles: no pressed-in look on hover (signed-in read tiles; guests are handled above) */
html body.b2.b2.b2 .b2-cat .b2-forum:hover .b2-forum__marker > form:has(.forum__marker-badge--read) {
  border-color: color-mix(in srgb, var(--pp-c1) 28%, #d2dcee) !important;
  background: linear-gradient(to bottom, #fff, color-mix(in srgb, var(--pp-c1) 14%, #e9eff9)) !important;
  box-shadow: 0 2px 5px rgba(100,120,180,.12) !important;
}
html body.b2.b2.b2.dark .b2-cat .b2-forum:hover .b2-forum__marker > form:has(.forum__marker-badge--read) {
  border-color: color-mix(in srgb, var(--pp-c1) 30%, #22314d) !important;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--pp-c1) 10%, #172238), #0f1726) !important;
  box-shadow: 0 3px 8px rgba(0,0,0,.35) !important;
}

/* quick reply, collapsed: same card and accent bar as the open composer */
html body.b2.b2 .quick-reply-collapsed {
  position: relative;
  padding: 12px 14px;
  border: 1px solid var(--pp-border);
  border-radius: 12px;
  background: linear-gradient(to bottom, #fcfdff, #f2f6fc);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 10px 26px rgba(100,120,180,.16), 0 2px 6px rgba(100,120,180,.08);
  transition: border-color .15s ease, box-shadow .15s ease;
}
html body.b2.b2 .quick-reply-collapsed::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 16px;
  border-radius: 12px 12px 0 0;
  background: var(--pp-grad-accent);
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 4px, transparent 4px);
  mask: linear-gradient(#000 0 4px, transparent 4px);
}
html body.b2.b2 .quick-reply-collapsed:is(:hover, :focus) {
  border-color: #8aa2e0;
  box-shadow: 0 0 0 3px rgba(95,130,217,.18), 0 10px 26px rgba(100,120,180,.16);
}
html body.b2.b2 .quick-reply-collapsed__avatar img {
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff, 0 3px 8px rgba(100,120,180,.3);
}
html body.b2.b2 .quick-reply-collapsed__input { color: #657796; font-size: 14px; }
html body.b2.b2 .quick-reply-collapsed__icon { color: #8c6ad9; }

html body.b2.b2.dark .quick-reply-collapsed {
  border-color: #22314d;
  background: linear-gradient(to bottom, #15203a, #0e1626);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 28px rgba(0,0,0,.42), 0 2px 6px rgba(0,0,0,.30);
}
html body.b2.b2.dark .quick-reply-collapsed:is(:hover, :focus) {
  border-color: #4c6ec4;
  box-shadow: 0 0 0 3px rgba(95,130,217,.25), 0 12px 28px rgba(0,0,0,.42);
}
html body.b2.b2.dark .quick-reply-collapsed__avatar img { box-shadow: 0 0 0 2px #1d2a44, 0 3px 8px rgba(0,0,0,.5); }
html body.b2.b2.dark .quick-reply-collapsed__input { color: #8fa3c7; }
html body.b2.b2.dark .quick-reply-collapsed__icon { color: #8fb2ff; }

/* quick reply, open: the card is the box, so the inner editor loses its own border */
html body.b2.b2.b2.b2 .b2-composer:not(.b2-composer--page) .tiptap-wrap:has(> .tiptap-toolbar:is(.tiptap-toolbar--dock, .tiptap-toolbar--paper)) {
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
html body.b2.b2 .b2-composer:not(.b2-composer--page):focus-within {
  border-color: #8aa2e0;
  box-shadow: 0 0 0 3px rgba(95,130,217,.18), 0 10px 26px rgba(100,120,180,.16);
}
html body.b2.b2.dark .b2-composer:not(.b2-composer--page):focus-within {
  border-color: #4c6ec4;
  box-shadow: 0 0 0 3px rgba(95,130,217,.25), 0 12px 28px rgba(0,0,0,.42);
}
html body.b2.b2.b2.b2 .b2-composer .tiptap-wrap > .tiptap-editor { background: transparent !important; }

/* toolbar and Attach / Post Reply: one bar, stock paints them two different colours */
html body.b2.b2.b2.b2 .b2-composer .tiptap-wrap > .tiptap-toolbar:is(.tiptap-toolbar--dock, .tiptap-toolbar--paper),
html body.b2.b2.b2.b2 .b2-composer .tiptap-wrap > .quick-reply__actions > :not(.attachment-upload),
html body.b2.b2.b2.b2 .b2-composer .tiptap-wrap > .quick-reply__actions > .attachment-upload > .attachment-upload__dropzone {
  border-top: 1px solid #d3dded !important;
  border-bottom: 0 !important;
  background: linear-gradient(to bottom, #f6f9fe, #edf2fb) !important;
}
html body.b2.b2.b2.b2.dark .b2-composer .tiptap-wrap > .tiptap-toolbar:is(.tiptap-toolbar--dock, .tiptap-toolbar--paper),
html body.b2.b2.b2.b2.dark .b2-composer .tiptap-wrap > .quick-reply__actions > :not(.attachment-upload),
html body.b2.b2.b2.b2.dark .b2-composer .tiptap-wrap > .quick-reply__actions > .attachment-upload > .attachment-upload__dropzone {
  border-top-color: #22314d !important;
  background: linear-gradient(to bottom, #1a2742, #111a2e) !important;
}

/* the toolbar's dropdown wrappers were picking up the bar's gradient and border */
html body.b2.b2.b2.b2 .b2-composer .tiptap-wrap .tiptap-toolbar__dropdown {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* same for the buttons: the underline and tint only belong on hover and active */
html body.b2.b2.b2.b2.b2 .b2-composer .tiptap-wrap .tiptap-toolbar__btn:not(:hover, :focus-visible, [aria-pressed="true"], [class*="active"]) {
  border-bottom-color: transparent !important;
  background: transparent !important;
}

/* + panel */
html body.b2 .tiptap-panel {
  border-color: var(--pp-border);
  border-radius: 12px;
  background: linear-gradient(to bottom, #fcfdff, #f2f6fc);
  box-shadow: 0 12px 32px rgba(100,120,180,.26);
}
html body.b2 .tiptap-panel::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 16px;
  border-radius: 12px 12px 0 0;
  background: var(--pp-grad-accent);
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 4px, transparent 4px);
  mask: linear-gradient(#000 0 4px, transparent 4px);
}
html body.b2 .tiptap-panel__section + .tiptap-panel__section { border-top-color: #d3dded; }
html body.b2 .tiptap-panel__hd { color: var(--pp-accent); font-weight: 800; }
html body.b2 .tiptap-panel .tiptap-seg { background: rgba(95,130,217,.10); }
html body.b2.b2.b2.b2 .tiptap-panel .tiptap-seg .tiptap-seg__btn--on {
  background: linear-gradient(to bottom, #fff, #eef4fb) !important;
  color: var(--pp-accent);
  box-shadow: 0 1px 3px rgba(100,120,180,.25) !important;
}

html body.b2.dark .tiptap-panel {
  border-color: #22314d;
  background: linear-gradient(to bottom, #15203a, #0e1626);
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
}
html body.b2.dark .tiptap-panel__section + .tiptap-panel__section { border-top-color: #22314d; }
html body.b2.dark .tiptap-panel__hd { color: #8fa3c7; }
html body.b2.dark .tiptap-panel .tiptap-seg { background: #0d1524; }
html body.b2.b2.b2.b2.dark .tiptap-panel .tiptap-seg .tiptap-seg__btn--on {
  background: linear-gradient(to bottom, #1a2742, #111a2e) !important;
  color: #8fb2ff;
  box-shadow: 0 1px 3px rgba(0,0,0,.45) !important;
}

/* Post Reply: same height and text size as Attach File */
html body.b2.b2.b2.b2 .b2-composer .tiptap-wrap > .quick-reply__actions .quick-reply__buttons :is(.btn-primary, button[type="submit"]) {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  height: 30px !important;
  min-height: 0 !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

/* topic bottom nav: same button and pressed-in hover as the rest of the theme */
html body.b2.b2 .topic-bottom-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--pp-border);
  border-radius: 12px;
  background: linear-gradient(to bottom, #fff, #eef4fb);
  box-shadow: 0 2px 6px rgba(100,120,180,.12);
  color: #4b5d7d;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
  line-height: 1.2;
  text-decoration: none;
}
html body.b2.b2 .topic-bottom-nav__link i { color: var(--pp-accent); font-size: 12px; }
html body.b2.b2 .topic-bottom-nav__link:is(:hover, :focus-visible) {
  transform: translateY(1px);
  border-color: #b4c3dc;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc);
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18);
  color: var(--pp-accent);
  outline: 0;
}
html body.b2.b2.dark .topic-bottom-nav__link {
  border-color: #22314d;
  background: linear-gradient(to bottom, #131d31, #0f1726);
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  color: #cbd5e1;
}
html body.b2.b2.dark .topic-bottom-nav__link i { color: #8fb2ff; }
html body.b2.b2.dark .topic-bottom-nav__link:is(:hover, :focus-visible) {
  border-color: #354a6f;
  background: linear-gradient(to bottom, #0d1524, #121c2f);
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.40);
  color: #8fb2ff;
}

/* ==========================================================
   LINK DIRECTORY (ld2) — cards, buttons and fields in the theme's style
   ========================================================== */

html body.b2.b2 .ld2 {
  --ld2-accent: var(--pp-accent);
  --ld2-gold: #e0a02c;
  --ld2-panel: linear-gradient(to bottom, #fcfdff, #f2f6fc);
  --ld2-border: var(--pp-border);
  --ld2-border-soft: #d3dded;
  --ld2-fill: #fbfcff;
  --ld2-fill-2: #e9eff9;
  --ld2-r-panel: 12px;
  --ld2-r-ctrl: 10px;
  color: #4b5d7d;
}
html body.b2.b2.dark .ld2 {
  --ld2-accent: #8fb2ff;
  --ld2-gold: #f0b84a;
  --ld2-panel: linear-gradient(to bottom, #15203a, #0e1626);
  --ld2-border: #22314d;
  --ld2-border-soft: #22314d;
  --ld2-fill: #0d1524;
  --ld2-fill-2: #1a2742;
  color: #cbd5e1;
}

/* cards */
html body.b2.b2 :is(.ld2-nav, .ld2-formcard, .ld2-panel, .ld2-feat, .ld2-card, .ld2-cathero, .ld2-dhero, .ld2-runner, .ld2-mrow, .ld-empty) {
  position: relative;
  border: 1px solid var(--pp-border);
  border-radius: 12px;
  background: linear-gradient(to bottom, #fcfdff, #f2f6fc);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 10px 26px rgba(100,120,180,.16), 0 2px 6px rgba(100,120,180,.08);
}
html body.b2.b2.dark :is(.ld2-nav, .ld2-formcard, .ld2-panel, .ld2-feat, .ld2-card, .ld2-cathero, .ld2-dhero, .ld2-runner, .ld2-mrow, .ld-empty) {
  border-color: #22314d;
  background: linear-gradient(to bottom, #15203a, #0e1626);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 28px rgba(0,0,0,.42), 0 2px 6px rgba(0,0,0,.30);
}
html body.b2.b2 :is(.ld2-nav, .ld2-formcard, .ld2-panel, .ld2-feat, .ld2-card, .ld2-cathero, .ld2-dhero, .ld-empty)::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  z-index: 3;
  height: 16px;
  border-radius: 12px 12px 0 0;
  background: var(--pp-grad-accent);
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 4px, transparent 4px);
  mask: linear-gradient(#000 0 4px, transparent 4px);
}
html body.b2.b2 :is(.ld2-card, .ld2-runner, .ld2-mrow):hover {
  border-color: #8aa2e0;
  transform: none;
}
html body.b2.b2.dark :is(.ld2-card, .ld2-runner, .ld2-mrow):hover { border-color: #4c6ec4; }
html body.b2.b2 .ld-empty { opacity: 1; color: #657796; }
html body.b2.b2.dark .ld-empty { color: #8fa3c7; }
html body.b2.b2 .ld-empty i { color: #8c6ad9; opacity: .75; }
html body.b2.b2.dark .ld-empty i { color: #8fb2ff; }

/* headings and card text: the theme's link colour would otherwise win on these anchors */
html body.b2.b2 :is(.ld2-sechead__title, .ld2-formcard__head h1, .ld2-mhead h1, .ld2-panel__head, .ld2-card__title, .ld2-runner__body b, .ld2-rel__b b, .ld2-mrow__t, .ld2-flabel) { color: #354867 !important; }
html body.b2.b2.dark :is(.ld2-sechead__title, .ld2-formcard__head h1, .ld2-mhead h1, .ld2-panel__head, .ld2-card__title, .ld2-runner__body b, .ld2-rel__b b, .ld2-mrow__t, .ld2-flabel) { color: #eef4ff !important; }
html body.b2.b2 :is(a.ld2-card, a.ld2-runner, a.ld2-rel) { color: #4b5d7d !important; text-decoration: none; }
html body.b2.b2.dark :is(a.ld2-card, a.ld2-runner, a.ld2-rel) { color: #cbd5e1 !important; }

/* sidebar */
html body.b2.b2 .ld2-nav { padding: 14px 12px 12px; }
html body.b2.b2 .ld2-nav__h {
  margin: 14px 8px 6px;
  color: var(--pp-accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  opacity: 1;
}
html body.b2.b2.dark .ld2-nav__h { color: #8fb2ff; }
html body.b2.b2 a.ld2-nl {
  border: 1px solid transparent;
  border-radius: 10px;
  color: #4b5d7d !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  opacity: 1;
}
html body.b2.b2.dark a.ld2-nl { color: #cbd5e1 !important; }
html body.b2.b2 .ld2-nl > i { color: #8c6ad9; }
html body.b2.b2.dark .ld2-nl > i { color: #8fb2ff; }
html body.b2.b2 a.ld2-nl:is(:hover, :focus-visible, .ld2-nl--on) {
  border-color: #b4c3dc;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc);
  box-shadow: inset 0 2px 4px rgba(100,120,180,.22);
  color: var(--pp-accent) !important;
  outline: 0;
}
html body.b2.b2.dark a.ld2-nl:is(:hover, :focus-visible, .ld2-nl--on) {
  border-color: #354a6f;
  background: linear-gradient(to bottom, #0d1524, #121c2f);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.5);
  color: #8fb2ff !important;
}
html body.b2.b2 .ld2-nl__ct {
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(95,130,217,.14);
  color: inherit;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  opacity: 1;
}

/* buttons */
html body.b2.b2 :is(a, button).ld2-btn--primary,
html body.b2.b2 a.ld2-visit {
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--pp-grad-accent);
  box-shadow: 0 6px 16px rgba(119,88,186,.34), inset 0 1px 0 rgba(255,255,255,.28);
  color: #fff !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
  text-decoration: none;
}
html body.b2.b2 :is(a, button).ld2-btn--primary:is(:hover, :focus-visible),
html body.b2.b2 a.ld2-visit:is(:hover, :focus-visible) {
  transform: translateY(1px);
  background: linear-gradient(135deg, #6a8be0, #9776e0);
  box-shadow: inset 0 3px 6px rgba(60,40,130,.22), inset 0 1px 2px rgba(60,40,130,.14);
  color: #fff !important;
  outline: 0;
}
html body.b2.b2.dark :is(a, button).ld2-btn--primary:is(:hover, :focus-visible),
html body.b2.b2.dark a.ld2-visit:is(:hover, :focus-visible) { box-shadow: inset 0 3px 7px rgba(0,0,0,.35), inset 0 1px 2px rgba(0,0,0,.25); }

html body.b2.b2 :is(.ld2-btn--ghost, .ld2-sidebtn, .ld2-iconbtn) {
  border: 1px solid var(--pp-border);
  background: linear-gradient(to bottom, #fff, #eef4fb);
  box-shadow: 0 2px 6px rgba(100,120,180,.12);
  color: #4b5d7d !important;
  text-decoration: none;
  opacity: 1;
}
html body.b2.b2 :is(.ld2-btn--ghost, .ld2-sidebtn, .ld2-iconbtn):is(:hover, :focus-visible) {
  transform: translateY(1px);
  border-color: #b4c3dc;
  background: linear-gradient(to bottom, #e9eff9, #f3f6fc);
  box-shadow: inset 0 3px 6px rgba(100,120,180,.28), inset 0 1px 2px rgba(100,120,180,.18);
  color: var(--pp-accent) !important;
  outline: 0;
}
html body.b2.b2.dark :is(.ld2-btn--ghost, .ld2-sidebtn, .ld2-iconbtn) {
  border-color: #22314d;
  background: linear-gradient(to bottom, #131d31, #0f1726);
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  color: #cbd5e1 !important;
}
html body.b2.b2.dark :is(.ld2-btn--ghost, .ld2-sidebtn, .ld2-iconbtn):is(:hover, :focus-visible) {
  border-color: #354a6f;
  background: linear-gradient(to bottom, #0d1524, #121c2f);
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.40);
  color: #8fb2ff !important;
}

/* submit form */
html body.b2.b2 :is(.ld2-formcard__head, .ld2-panel__head) {
  border-bottom: 1px solid var(--pp-border);
  background: linear-gradient(to bottom, #f6f9fe, #edf2fb);
}
html body.b2.b2.dark :is(.ld2-formcard__head, .ld2-panel__head) {
  border-bottom-color: #22314d;
  background: linear-gradient(to bottom, rgba(26,39,66,.85), rgba(17,26,46,.65));
}
html body.b2.b2 .ld2-formfoot { border-top-color: var(--pp-border); background: linear-gradient(to bottom, #f6f9fe, #edf2fb); }
html body.b2.b2.dark .ld2-formfoot { border-top-color: #22314d; background: linear-gradient(to bottom, #1a2742, #111a2e); }

html body.b2.b2 .ld2 :is(.ld2-inp, .ld2-select__btn, .ld2-copy input) {
  border: 1px solid #c8d6ea;
  border-radius: 10px;
  background: #fbfcff;
  box-shadow: inset 0 2px 5px rgba(100,120,180,.10);
  transition: border-color .15s ease, box-shadow .15s ease;
}
html body.b2.b2 .ld2 :is(.ld2-inp, .ld2-select__btn, .ld2-copy input):focus {
  border-color: #8aa2e0;
  box-shadow: 0 0 0 3px rgba(95,130,217,.18), inset 0 2px 5px rgba(100,120,180,.08);
  outline: 0;
}
html body.b2.b2.dark .ld2 :is(.ld2-inp, .ld2-select__btn, .ld2-copy input) {
  border-color: #22314d;
  background: #0d1524;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.45);
}
html body.b2.b2.dark .ld2 :is(.ld2-inp, .ld2-select__btn, .ld2-copy input):focus {
  border-color: #4c6ec4;
  box-shadow: 0 0 0 3px rgba(95,130,217,.25), inset 0 2px 6px rgba(0,0,0,.4);
}
html body.b2.b2 .ld2-select__menu {
  border-radius: 10px;
  background: linear-gradient(to bottom, #fcfdff, #f2f6fc);
  box-shadow: 0 12px 32px rgba(100,120,180,.26);
}
html body.b2.b2.dark .ld2-select__menu {
  background: linear-gradient(to bottom, #15203a, #0e1626);
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
}
html body.b2.b2 .ld2-drop { border-color: #b4c3dc; }
html body.b2.b2.dark .ld2-drop { border-color: #354a6f; }
html body.b2.b2 .ld2-drop:hover { border-color: var(--ld2-accent); }
html body.b2.b2 .ld2-tab.is-active { border-bottom-color: var(--ld2-accent); color: var(--ld2-accent); }

/* grid covers: tall enough to show the whole 2:1 art instead of cropping it to a strip */
html body.b2 .b2-gvc--hascover { container-type: inline-size; }
html body.b2 .b2-gvc--hascover :is(.b2-gvc__cover, .b2-gvc__coverrow, .b2-gvc__coverdesc) { --pp-cov: 50cqw; }
@media (min-width: 861px) {
  html body.b2 .b2-gv__grid > .b2-gvc--hascover:first-child:nth-last-child(odd) .b2-gvc__cover { --pp-cov: calc(25cqw - 4px); }
}

/* link directory: my card rule's position:relative pushed the sidebar 27px down (stock's sticky top offset) */
html body.b2.b2 .ld2-nav { position: sticky; }

/* Submit a Link hover: stays on the gradient and presses in, instead of turning dark */
html body.b2.b2.b2.b2 .ld2 a.ld2-btn--primary:is(:hover, :focus-visible),
html body.b2.b2.b2.b2 .ld2 button.ld2-btn--primary:is(:hover, :focus-visible) {
  border-color: transparent !important;
  background: linear-gradient(135deg, #6a8be0, #9776e0) !important;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.35), inset 0 1px 2px rgba(0,0,0,.25) !important;
  color: #fff !important;
}

/* post rail achievements: the medals a member showcases (ACP showcase limit, 3), from the post-rail:after-meta template snippet in widgets/post-rail-achievements. ForumSpark strips title/style, so the name is a hidden span shown on hover */
html body.b2 .pp-awards { position: relative; z-index: 5; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; }
html body.b2 .pp-award { position: relative; display: inline-flex; align-items: center; justify-content: center; line-height: 0; cursor: help; }
html body.b2 .pp-award img { width: 26px; height: 32px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(30,45,90,.28)); transition: transform .15s ease; }
html body.b2 .pp-award:hover img { transform: translateY(-2px); }
/* no icon set: a trophy in the tier colour */
html body.b2 .pp-award__fallback { width: 26px; height: 32px; color: #5f82d9; font-size: 18px; line-height: 32px; text-align: center; }
html body.b2 .pp-award__fallback::before { content: "\f091"; font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome"; font-size-adjust: none; font-weight: 900; }
html body.b2 .pp-award--bronze .pp-award__fallback { color: #b86a14; }
html body.b2 .pp-award--silver .pp-award__fallback { color: #64748b; }
html body.b2 .pp-award--gold .pp-award__fallback { color: #c08a12; }
html body.b2 .pp-award--platinum .pp-award__fallback { color: #7c3aed; }
html body.b2 .pp-award__name {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  z-index: 20;
  padding: 5px 9px;
  border-radius: 8px;
  background: linear-gradient(135deg, #5f82d9, #8c6ad9);
  box-shadow: 0 6px 14px rgba(40,60,120,.3);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 3px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
html body.b2 .pp-award:hover .pp-award__name { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
html body.b2.dark .pp-award img { filter: drop-shadow(0 2px 4px rgba(0,0,0,.55)); }
html body.b2.dark .pp-award__name { box-shadow: 0 6px 16px rgba(0,0,0,.55); }
html body.b2.dark .pp-award__fallback { color: #8fb2ff; }
html body.b2.dark .pp-award--bronze .pp-award__fallback { color: #e0a062; }
html body.b2.dark .pp-award--silver .pp-award__fallback { color: #b4c0d4; }
html body.b2.dark .pp-award--gold .pp-award__fallback { color: #f0c64f; }
html body.b2.dark .pp-award--platinum .pp-award__fallback { color: #b9a2ff; }
/* stacked rail (avatar and name in a row): medals sit at the right end, and the name opens leftwards so it can't run off the screen */
@media (max-width: 1024px) {
  html body.b2 .pp-awards { flex-wrap: nowrap; align-self: center; margin: 0 0 0 auto; padding-left: 10px; }
  html body.b2 .pp-award:last-child .pp-award__name { left: auto; right: 0; transform: translateY(3px); }
  html body.b2 .pp-award:last-child:hover .pp-award__name { transform: none; }
}

/* post rail achievements: hand-awarded medals (uploaded icons come from files.forumspark.net, stock ones from /achievements/) lead the row, sit larger, glow in their tier colour and name their tier on hover (kept short: the leftmost label must fit inside the rail) */
html body.b2 .pp-award:has(> img[src*="files.forumspark.net"]) { order: -1; }
html body.b2 .pp-award--platinum:has(> img[src*="files.forumspark.net"]) { order: -2; }
html body.b2 .pp-award > img[src*="files.forumspark.net"] { width: 31px; height: 38px; }
html body.b2 .pp-award--gold > img[src*="files.forumspark.net"] { filter: drop-shadow(0 0 3px rgba(240,170,40,.75)) drop-shadow(0 2px 3px rgba(30,45,90,.25)); }
html body.b2 .pp-award--platinum > img[src*="files.forumspark.net"] { filter: drop-shadow(0 0 3px rgba(140,106,217,.8)) drop-shadow(0 2px 3px rgba(30,45,90,.25)); }
html body.b2.dark .pp-award--gold > img[src*="files.forumspark.net"] { filter: drop-shadow(0 0 5px rgba(255,200,70,.6)) drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
html body.b2.dark .pp-award--platinum > img[src*="files.forumspark.net"] { filter: drop-shadow(0 0 5px rgba(185,162,255,.7)) drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
html body.b2 .pp-award--gold > img[src*="files.forumspark.net"] + .pp-award__name { background: linear-gradient(135deg, #f2b632, #c9780f); }
html body.b2 .pp-award--platinum > img[src*="files.forumspark.net"] + .pp-award__name { background: linear-gradient(135deg, #9a86ea, #6a4fd0); }
html body.b2 .pp-award > img[src*="files.forumspark.net"] + .pp-award__name::after { display: block; margin-top: 2px; font-size: 9px; font-weight: 800; letter-spacing: .08em; opacity: .85; text-transform: uppercase; }
html body.b2 .pp-award--gold > img[src*="files.forumspark.net"] + .pp-award__name::after { content: "Gold"; }
html body.b2 .pp-award--platinum > img[src*="files.forumspark.net"] + .pp-award__name::after { content: "Platinum"; }
html body.b2 .pp-awards { align-items: center; }

/* ---- Hover tooltips (#b2tip): the accent gradient, deepened a little so
   white text stays readable, with an arrow toward the hovered item.
   Seasonal layers recolour it through --pp-grad-accent, --pp-tip-arrow and
   --pp-tip-shade (how far the gradient is darkened under the text). ---- */
html body.b2 { --pp-tip-arrow: #6a6ccc; --pp-tip-shade: rgba(14, 16, 48, .2); }
html body.b2 #b2tip,
html body.b2.dark #b2tip {
  padding: .4rem .7rem;
  font-size: .76rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(var(--pp-tip-shade), var(--pp-tip-shade)), var(--pp-grad-accent);
  border: 0;
  border-radius: 8px;
  box-shadow: 0 10px 24px -8px rgba(40, 30, 110, .55);
}
html body.b2.dark #b2tip { box-shadow: 0 10px 24px -6px rgba(0, 0, 0, .7); }
html body.b2 #b2tip:empty { display: none; }
html body.b2 #b2tip::after {
  content: "";
  position: absolute;
  left: calc(50% - 5px);
  top: 100%;
  border: 5px solid transparent;
  border-top-color: var(--pp-tip-arrow);
}
html body.b2 #b2tip.below::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--pp-tip-arrow);
}

/* ==========================================================
   OPEN LAYOUT + HEADER BAND (desktop, 901px and up)
   The rounded #wrap box is gone: a full-width branded band with the logo and pixel art,
   then the nav as a full-width tab bar, then the content on a centred column.
   Phones keep the boxed layout.
   ========================================================== */

@media (min-width: 901px) {
  html body.b2 {
    --pp-col-pad: max(24px, calc((100% - 95rem) / 2 + 24px));
  }

  /* ---- the band: no fill of its own, so the header, nav, hero and content share one page background ---- */
  html body.b2 .user-menu.b2-topbar,
  html body.b2.dark .user-menu.b2-topbar {
    position: relative !important;
    z-index: 1 !important;
    isolation: isolate;
    border-bottom: 1px solid #d6e0f0 !important;
    background: radial-gradient(48% 150% at 82% 0%, rgba(140,106,217,.16), transparent 70%) !important;
  }
  html body.b2.dark .user-menu.b2-topbar {
    border-bottom-color: rgba(143,178,255,.10) !important;
    background: radial-gradient(48% 150% at 82% 0%, rgba(140,106,217,.24), transparent 70%) !important;
  }

  /* pixel squares and light streaks, ending just past the content column's right edge
     (on wide screens they'd otherwise sit out at the screen edge, away from everything) */
  html body.b2 .user-menu.b2-topbar::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: max(0px, calc(var(--pp-col-pad) - 90px));
    z-index: -1;
    width: min(58%, 820px);
    pointer-events: none;
    opacity: .75;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 200' preserveAspectRatio='xMaxYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%238c6ad9' stop-opacity='0'/%3E%3Cstop offset='.6' stop-color='%238fb2ff' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%238c6ad9' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M40 210 C 300 120 560 40 920 -10' fill='none' stroke='url(%23s)' stroke-width='1.5'/%3E%3Cpath d='M180 220 C 420 150 650 90 930 50' fill='none' stroke='url(%23s)' stroke-width='1'/%3E%3Cg fill='%235f82d9'%3E%3Crect x='520' y='40' width='10' height='10' rx='2' opacity='.35'/%3E%3Crect x='600' y='120' width='8' height='8' rx='2' opacity='.3'/%3E%3Crect x='680' y='24' width='14' height='14' rx='3' opacity='.45'/%3E%3Crect x='720' y='92' width='10' height='10' rx='2' opacity='.5'/%3E%3Crect x='790' y='54' width='18' height='18' rx='4' opacity='.55'/%3E%3Crect x='840' y='130' width='12' height='12' rx='3' opacity='.5'/%3E%3Crect x='860' y='20' width='9' height='9' rx='2' opacity='.6'/%3E%3C/g%3E%3Cg fill='%238c6ad9'%3E%3Crect x='560' y='86' width='7' height='7' rx='2' opacity='.35'/%3E%3Crect x='640' y='60' width='11' height='11' rx='2' opacity='.4'/%3E%3Crect x='750' y='140' width='9' height='9' rx='2' opacity='.45'/%3E%3Crect x='770' y='18' width='8' height='8' rx='2' opacity='.5'/%3E%3Crect x='820' y='96' width='22' height='22' rx='5' opacity='.6'/%3E%3Crect x='875' y='70' width='13' height='13' rx='3' opacity='.65'/%3E%3C/g%3E%3C/svg%3E") right center / auto 100% no-repeat;
  }
  html body.b2.dark .user-menu.b2-topbar::before { opacity: 1; }

  /* logo, lined up with the content column */
  html body.b2 .b2-topbar__logo {
    width: 100% !important;
    max-width: none !important;
    padding: 22px var(--pp-col-pad) 20px !important;
  }
  html body.b2 .b2-topbar__logo img,
  html body.b2 .b2-topbar img[src*="FSB2logo"] { height: 92px !important; }

  /* guest Login / Register: centred in the band, lined up with the content's right edge */
  html body.b2 .user-menu.b2-topbar .user-menu__links {
    top: calc(50% - 17px) !important;
    right: var(--pp-col-pad) !important;
  }

  /* ---- no box: the wrap is just the page ---- */
  html body.b2 #wrap {
    width: 100% !important;
    margin: 0 0 20px !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  html body.b2 #wrap::before { content: none !important; display: none !important; }
  html body.b2 .breadcrumbs {
    width: auto !important;
    max-width: none !important;
    margin: 18px var(--pp-col-pad) 0 !important;
  }
  html body.b2 :is(.breadcrumbs, #wrap main, .board-actions) { box-sizing: border-box; }

  /* ---- nav: a full-width tab bar under the band ---- */
  html body.b2 .sub-menu {
    min-height: 58px;
    padding: 0 var(--pp-col-pad) !important;
    border-bottom: 1px solid #d3dded !important;
    background: linear-gradient(to bottom, #fbfcff, #f1f5fc) !important;
    box-shadow: 0 6px 18px rgba(100,120,180,.08) !important;
  }
  html body.b2.dark .sub-menu {
    border-bottom-color: #22314d !important;
    background: linear-gradient(to bottom, #141f38, #101a2e) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.30) !important;
  }
  html body.b2 .sub-menu .nav-links { gap: 2px; align-self: stretch; }
  html body.b2 .sub-menu .fs-menu__item { align-self: stretch; }

  /* tabs: text with a gradient underline instead of separate buttons */
  html body.b2 .sub-menu .nav-links > .nav-link,
  html body.b2 .sub-menu .nav-links > .fs-menu__item > .fs-menu__link,
  html body.b2 .sub-menu .nav-links > .nav-link:is(:hover, :focus-visible, :active),
  html body.b2 .sub-menu .nav-links > .fs-menu__item > .fs-menu__link:is(:hover, :focus-visible, :active),
  html body.b2 .sub-menu .nav-links .nav-link-active:not(:hover):not(:active),
  html body.b2 .sub-menu .fs-menu__item--has-children:hover > .fs-menu__link,
  html body.b2 .sub-menu .fs-menu__item--has-children > .fs-menu__link[aria-expanded="true"] {
    display: inline-flex;
    align-items: center;
    height: 100%;
    min-height: 58px;
    padding: 0 15px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    color: #5a6b8a !important;
  }
  html body.b2.dark .sub-menu .nav-links > .nav-link,
  html body.b2.dark .sub-menu .nav-links > .fs-menu__item > .fs-menu__link,
  html body.b2.dark .sub-menu .nav-links > .nav-link:is(:hover, :focus-visible, :active),
  html body.b2.dark .sub-menu .nav-links > .fs-menu__item > .fs-menu__link:is(:hover, :focus-visible, :active),
  html body.b2.dark .sub-menu .nav-links .nav-link-active:not(:hover):not(:active),
  html body.b2.dark .sub-menu .fs-menu__item--has-children:hover > .fs-menu__link,
  html body.b2.dark .sub-menu .fs-menu__item--has-children > .fs-menu__link[aria-expanded="true"] { color: #a9b8d4 !important; }

  html body.b2 .sub-menu .nav-links > .nav-link:is(:hover, :focus-visible),
  html body.b2 .sub-menu .fs-menu__item--has-children:hover > .fs-menu__link { color: var(--pp-accent) !important; }
  html body.b2.dark .sub-menu .nav-links > .nav-link:is(:hover, :focus-visible),
  html body.b2.dark .sub-menu .fs-menu__item--has-children:hover > .fs-menu__link { color: #c9d8ff !important; }

  html body.b2 .sub-menu .nav-links .nav-link-active,
  html body.b2 .sub-menu .nav-links .nav-link-active:not(:hover):not(:active) { color: #2e3f5f !important; }
  html body.b2.dark .sub-menu .nav-links .nav-link-active,
  html body.b2.dark .sub-menu .nav-links .nav-link-active:not(:hover):not(:active) { color: #fff !important; }
  html body.b2 .sub-menu .nav-links .nav-link-active i { color: #8c6ad9; }
  html body.b2.dark .sub-menu .nav-links .nav-link-active i { color: #8fb2ff; }

  html body.b2 .sub-menu .nav-links > .nav-link::after,
  html body.b2 .sub-menu .nav-links > .fs-menu__item > .fs-menu__link::after {
    content: "";
    display: block !important;
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--pp-grad-accent);
    opacity: 0;
    transform: scaleX(.4);
    transition: opacity .18s ease, transform .18s ease;
  }
  html body.b2 .sub-menu .nav-links > .nav-link:is(:hover, :focus-visible)::after,
  html body.b2 .sub-menu .fs-menu__item--has-children:hover > .fs-menu__link::after { opacity: .45; transform: scaleX(.7); }
  html body.b2 .sub-menu .nav-links .nav-link-active::after { opacity: 1 !important; transform: none !important; }
  html body.b2.dark .sub-menu .nav-links .nav-link-active::after { box-shadow: 0 0 12px rgba(140,106,217,.75); }
  /* the old filled-button look left a dark drop shadow on the active tab in dark mode only */
  html body.b2.dark .sub-menu .nav-links .nav-link-active,
  html body.b2.dark .sub-menu .nav-links .nav-link-active:not(:hover):not(:active) { box-shadow: none !important; }

  html body.b2 .fs-menu__panel { top: 100%; }

  /* right side: search box and icons sit straight on the bar */
  html body.b2 .b2-subnav__user,
  html body.b2.dark .b2-subnav__user {
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html body.b2 .b2-search { position: relative; display: inline-flex; align-items: center; }
  html body.b2 .b2-search .b2-search__input,
  html body.b2 .b2-search:not(.is-open) .b2-search__input {
    width: 240px !important;
    height: 36px !important;
    padding: 0 14px 0 38px !important;
    border: 1px solid #c4d2e8 !important;
    opacity: 1;
    pointer-events: auto;
  }
  html body.b2.dark .b2-search .b2-search__input,
  html body.b2.dark .b2-search:not(.is-open) .b2-search__input { border-color: #2a3a58 !important; }
  html body.b2 .b2-search .b2-search__btn {
    position: absolute !important;
    left: 4px;
    top: 50%;
    margin-top: -14px;
    width: 28px !important;
    height: 28px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }
}

@media (min-width: 901px) and (max-width: 1150px) {
  html body.b2 .sub-menu .nav-links > .nav-link,
  html body.b2 .sub-menu .nav-links > .fs-menu__item > .fs-menu__link { padding: 0 10px !important; }
  html body.b2 .b2-search .b2-search__input,
  html body.b2 .b2-search:not(.is-open) .b2-search__input { width: 170px !important; }
}

/* light page background: one cool blue-white surface behind the header, nav, hero and content */
@media (min-width: 901px) {
  html body.b2:not(.dark) { --pp-page-bg: linear-gradient(to bottom, #f3f6fd 0%, #ecf1fa 45%, #e7edf8 100%); }
}

/* ==========================================================
   FULL-WIDTH FOOTER — the footer widget's script moves .pp-ft to the bottom of the page
   (straight inside body). There it runs edge to edge like the header, topped with the
   colourful band, and ForumSpark's copyright line sits on the right of its bottom bar.
   ========================================================== */

html body.b2 > .pp-ft {
  margin: 40px 0 0;
  padding: 46px var(--pp-col-pad, 20px) 0;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(90deg, #5f82d9 0%, #35a8c9 24%, #3fb8a0 46%, #4c8fd9 66%, #7a6fd9 84%, #8c6ad9 100%) top / 100% 3px no-repeat,
    linear-gradient(to bottom, #fbfcff, #eef3fb);
  box-shadow: 0 -8px 24px rgba(100,120,180,.08);
}
html body.b2.dark > .pp-ft {
  background:
    linear-gradient(90deg, #5f82d9 0%, #35a8c9 24%, #3fb8a0 46%, #4c8fd9 66%, #7a6fd9 84%, #8c6ad9 100%) top / 100% 3px no-repeat,
    linear-gradient(to bottom, #141f38, #0d1528);
  box-shadow: 0 -10px 28px rgba(0,0,0,.30);
}
/* the band replaces the card's short accent bar */
html body.b2 > .pp-ft::before { content: none; }

/* ForumSpark's copyright line, moved by the script onto the right of the footer's bottom bar */
html body.b2 .pp-ft__bar > footer.copyright {
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  text-align: right;
}
/* same size, line height and colour as "© 2026 Pixel Point" on the left */
html body.b2 .pp-ft__bar > footer.copyright,
html body.b2 .pp-ft__bar > footer.copyright a {
  color: inherit !important;
  font-size: inherit;
  line-height: inherit;
}
/* the wrap's bottom margin would leave a strip of page between the board and the footer */
html body.b2 #wrap:has(~ .pp-ft) { margin-bottom: 0 !important; }

@media (max-width: 640px) {
  html body.b2 > .pp-ft { margin-top: 24px; padding-top: 32px; }
  html body.b2 .pp-ft__bar > footer.copyright { margin: 0; text-align: left; }
}