/* =============================================================================
   Worlds Wave theme  -  ww-theme.css
   Consolidated 2026-08-09. Replaces the previous patch blocks
   (WW-THEME, WW-BG-GRADIENT, WW-UI-POLISH, -POLISH-2, -GLASS, -GLASS-2,
   -LIVE, -FIX, -LIVE-TINT, -SCHEDULE, -INFOROWS, -MODALFIX).
   Same visual result, one non-conflicting rule set.

   HOUSE RULES - read before editing
   1. Never put backdrop-filter / filter / transform / contain on .panel or on
      any post card. They create a containing block for position:fixed, which
      traps the Edit-Post and Delete-Post modals behind .modal-backdrop and
      makes them unclickable.
   2. Never give "#posts > div" an animation fill-mode. A filling transform
      animation still counts as a transform after it ends - same trap as (1).
   3. Legacy dark.css uses long descendant chains. CSS compares class count
      BEFORE element count, so ".a .b .c .d" beats "html body .x.y.z".
      If an override seems to do nothing, count classes first.
   4. Selector prefixes below ("html" vs "html body") are deliberate - they are
      the minimum that actually wins against style.css / dark.css. Don't
      "tidy" them away.
   ============================================================================= */

/* ---------- 1. tokens ------------------------------------------------------ */
:root{
  --ww-red:#e10600;
  --ww-red-dark:#a80400;
  --ww-red-soft:rgba(225,6,0,.14);
  --ww-bg:#111;
  --ww-panel:#1b1b1b;
  --ww-panel2:#232323;
  --ww-line:#2e2e2e;
  --ww-text:#e8e8e8;
  --ww-muted:#9a9a9a;

  /* card system */
  --ww-card-bg:rgba(20,20,20,.60);
  --ww-card-line:rgba(255,255,255,.10);
  --ww-card-line-hot:rgba(255,255,255,.55);
  --ww-card-radius:12px;
  --ww-card-shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 26px rgba(0,0,0,.30);
  --ww-card-shadow-hot:0 1px 2px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06);
  --ww-glass:blur(8px) saturate(120%);
  --ww-inset:rgba(255,255,255,.05);   /* raised strips inside a card */
  --ww-well:rgba(0,0,0,.30);          /* sunken surfaces: inputs, media */
}

/* ---------- 2. keyframes --------------------------------------------------- */
@keyframes wwFadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes wwPulse{0%,100%{box-shadow:0 0 0 0 rgba(225,6,0,.55)}50%{box-shadow:0 0 0 7px rgba(225,6,0,0)}}
@keyframes wwBgDrift{
  0%  {background-position:0% 50%, 100% 20%, 50% 100%, 0% 50%}
  33% {background-position:60% 30%, 20% 80%, 90% 10%, 50% 50%}
  66% {background-position:100% 70%, 60% 0%, 10% 60%, 100% 50%}
  100%{background-position:0% 50%, 100% 20%, 50% 100%, 0% 50%}
}

/* ---------- 3. page background (desktop; mobile overridden in section 16) --- */
html body,
html body.dark-mode{
  color:var(--ww-text);
  background:
    radial-gradient(60% 55% at 20% 20%, rgba(225,6,0,.22) 0%, rgba(225,6,0,0) 70%),
    radial-gradient(55% 50% at 80% 15%, rgba(168,4,0,.18) 0%, rgba(168,4,0,0) 70%),
    radial-gradient(65% 60% at 50% 90%, rgba(120,120,120,.10) 0%, rgba(120,120,120,0) 70%),
    linear-gradient(135deg,#0a0a0a 0%,#181818 35%,#241010 55%,#141414 78%,#0a0a0a 100%) !important;
  background-size:180% 180%, 170% 170%, 190% 190%, 220% 220% !important;
  background-attachment:fixed !important;
  background-repeat:no-repeat !important;
  animation:wwBgDrift 30s ease-in-out infinite;
}

/* ---------- 4. typography -------------------------------------------------- */
html h1, html h2, html h3, html h4{ color:#fff; }
html .text-muted, html small.text-muted{ color:var(--ww-muted) !important; }

/* ---------- 5. card surfaces ----------------------------------------------- */
html .panel,
html .panel-white,
html .panel.panel-white.panel-shadow,
html .list-group,
html .wow_content,
html .user-bottom-nav,
html .alert:not(.alert-success):not(.alert-danger):not(.alert-warning):not(.alert-info){
  background:var(--ww-card-bg) !important;
  border:1px solid var(--ww-card-line) !important;
  border-radius:var(--ww-card-radius) !important;
  box-shadow:var(--ww-card-shadow) !important;
  transition:border-color .22s ease, box-shadow .22s ease;
}

/* glass, but only where no position:fixed modal can live - see house rule 1 */
html .list-group,
html .wow_content,
html .user-bottom-nav,
html .alert:not(.alert-success):not(.alert-danger):not(.alert-warning):not(.alert-info){
  -webkit-backdrop-filter:var(--ww-glass);
  backdrop-filter:var(--ww-glass);
}

/* explicit guard: post cards must stay filter-free */
html body .panel,
html body .panel-white,
html body .panel.panel-white.panel-shadow,
html body .panel.post.panel-shadow.sun_pub_box{
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

/* hover accent is white, not red */
html .panel:hover,
html .panel.panel-white.panel-shadow:hover,
html .list-group:hover,
html .wow_content:hover,
html .user-bottom-nav:hover{
  border-color:var(--ww-card-line-hot) !important;
  box-shadow:var(--ww-card-shadow-hot) !important;
}

/* card sub-parts sit on the card, so they stay transparent */
html .panel-heading,
html .panel-footer,
html .panel .panel-footer,
html .post-footer,
html .post-footer.post-comments{
  background:transparent !important;
  border-color:var(--ww-card-line) !important;
}
/* dark.css uses ".post .post-footer .comments-list .comment .comment-heading"
   (5 classes, !important), so the generic form never wins - house rule 3 */
html .comment-heading,
html body .post .post-footer .comments-list .comment .comment-heading{
  background:var(--ww-inset) !important;
  border:1px solid var(--ww-card-line) !important;
  border-radius:10px !important;
}

/* ---------- 6. overlays (denser so page text never reads through) ---------- */
html .dropdown-menu,
html .modal-content{
  background:rgba(18,18,18,.94) !important;
  border:1px solid var(--ww-card-line) !important;
  border-radius:var(--ww-card-radius) !important;
  box-shadow:var(--ww-card-shadow) !important;
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  backdrop-filter:blur(14px) saturate(130%);
}

/* ---------- 7. list rows + inset strips ------------------------------------
   "html body" and no .list-group ancestor: the profile Info panel reuses
   .list-group-item on a UL that has no .list-group class.                    */
html body .list-group-item{
  background:transparent !important;
  border-color:var(--ww-card-line) !important;
}
html body li.list-group-item.sidebar-title-back,
html body .featured-users,
html body .online-toggle{
  background:var(--ww-inset) !important;
  border-color:var(--ww-card-line) !important;
}

/* ---------- 8. buttons ----------------------------------------------------- */
html .btn{ border-radius:22px; transition:all .2s ease; }
html .btn-main,
html .btn-primary{
  background:linear-gradient(135deg,var(--ww-red),var(--ww-red-dark)) !important;
  border:none !important;
  color:#fff !important;
  transition:filter .2s ease, box-shadow .2s ease;
}
html .btn-main:hover,
html .btn-primary:hover{
  filter:brightness(1.12);
  box-shadow:0 4px 16px rgba(225,6,0,.42);
}
html .btn.main,
html .send_gift_btn{
  background:linear-gradient(135deg, rgba(225,6,0,.16), rgba(168,4,0,.10)) !important;
  border:1px solid rgba(225,6,0,.35) !important;
  color:var(--ww-text) !important;
  border-radius:var(--ww-card-radius) !important;
  transition:border-color .2s ease, box-shadow .2s ease;
}
html .btn.main:hover,
html .send_gift_btn:hover{
  border-color:rgba(225,6,0,.60) !important;
  box-shadow:0 4px 18px rgba(225,6,0,.22) !important;
}

/* ---------- 9. left sidebar nav -------------------------------------------- */
html .sidebar a,
html .left-sidebar a{
  position:relative;
  transition:background .2s ease, color .2s ease, padding-left .2s ease;
}
html .sidebar a:hover,
html .left-sidebar a:hover{
  background:linear-gradient(90deg,var(--ww-red-soft),transparent) !important;
  color:#fff !important;
  padding-left:18px;
}
html .sidebar a:hover:before,
html .left-sidebar a:hover:before{
  content:""; position:absolute; left:0; top:6px; bottom:6px; width:3px;
  background:var(--ww-red); border-radius:0 3px 3px 0;
}

/* ---------- 10. form fields ------------------------------------------------ */
html .form-control,
html input[type="text"],
html input[type="search"],
html input[type="email"],
html input[type="password"],
html textarea,
html select{
  background:var(--ww-well) !important;
  border:1px solid var(--ww-card-line) !important;
  border-radius:10px !important;
  color:var(--ww-text) !important;
  transition:border-color .18s ease, box-shadow .18s ease;
}
html input.form-control:focus,
html textarea.form-control:focus,
html select.form-control:focus,
html .form-control:focus,
html input[type="text"]:focus,
html input[type="search"]:focus,
html input[type="email"]:focus,
html input[type="password"]:focus,
html textarea:focus,
html select:focus{
  border-color:var(--ww-red) !important;
  box-shadow:0 0 0 3px rgba(225,6,0,.16) !important;
  outline:none !important;
}
html select option{ background:var(--ww-panel) !important; color:var(--ww-text) !important; }
html .search-input{ border-radius:20px !important; }

/* ---------- 11. top bar + chat rail ---------------------------------------- */
html .navbar.navbar-default{
  background:rgba(22,22,22,.88) !important;
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--ww-card-line) !important;
  box-shadow:0 2px 14px rgba(0,0,0,.45) !important;
}
html .chat-container{
  border-left:1px solid var(--ww-card-line) !important;
  background:var(--ww-card-bg) !important;
}

/* ---------- 12. scrollbars ------------------------------------------------- */
html ::-webkit-scrollbar{width:10px;height:10px}
html ::-webkit-scrollbar-track{background:transparent}
html ::-webkit-scrollbar-thumb{background:#2f2f2f;border-radius:8px;border:2px solid transparent;background-clip:content-box}
html ::-webkit-scrollbar-thumb:hover{background:#8a0400;background-clip:content-box}

/* ---------- 13. feed + home widgets ---------------------------------------- */
/* No fill-mode. See house rule 2. */
html #posts > div{ animation:wwFadeUp .35s ease; }

html body textarea.postText,
html body .sun_pub_box textarea.form-control{
  background:rgba(0,0,0,.25) !important;
  border:1px solid var(--ww-card-line) !important;
  border-radius:10px !important;
}
html body .post-file{ background:rgba(0,0,0,.25) !important; }

/* dark.css uses ".post .post-description .post-actions .stat-item" (4 classes),
   so the override has to walk the same chain - see house rule 3 */
html body .post .post-description .post-actions .wo-reaction.stat-item,
html body .post .post-description .post-actions .stat-item{
  background:var(--ww-inset) !important;
  border:1px solid var(--ww-card-line) !important;
}

html body .ww-home-live-box{
  background:var(--ww-card-bg) !important;
  border:1px solid var(--ww-card-line) !important;
  border-radius:var(--ww-card-radius) !important;
  -webkit-backdrop-filter:var(--ww-glass);
  backdrop-filter:var(--ww-glass);
  transition:border-color .18s ease !important;
}
html body .ww-home-live-box:hover{ border-color:var(--ww-card-line-hot) !important; }
html body .ww-home-live-title-box{
  background:var(--ww-inset) !important;
  border-bottom:1px solid var(--ww-card-line) !important;
}

html body ul.wo_pro_users a.user{
  background:rgba(255,255,255,.06) !important;
  border:1px solid var(--ww-card-line) !important;
  border-radius:10px !important;
  transition:border-color .18s ease !important;
}
html body ul.wo_pro_users a.user:hover{ border-color:var(--ww-card-line-hot) !important; }

/* ---------- 14. /livenow --------------------------------------------------- */
html .live-badge, html .ww-live, html .badge-live{ animation:wwPulse 1.8s infinite; }

html body .live-now-hero-details,
html body .live-now-hero-chat,
html body .live-card{
  background:var(--ww-card-bg) !important;
  border:1px solid var(--ww-card-line) !important;
  border-radius:var(--ww-card-radius) !important;
  -webkit-backdrop-filter:var(--ww-glass);
  backdrop-filter:var(--ww-glass);
  box-shadow:0 2px 10px rgba(0,0,0,.25) !important;
  transition:border-color .18s ease, box-shadow .18s ease !important;
}
html body .live-now-hero-details:hover,
html body .live-card:hover{ border-color:var(--ww-card-line-hot) !important; }

html body .live-now-hero-chat-header{
  background:var(--ww-inset) !important;
  border-bottom:1px solid var(--ww-card-line) !important;
}
html body .live-now-hero-chat-messages{ background:transparent !important; }

/* caption strip under the thumbnail.
   Default = past / VOD = neutral. Upcoming = gold. Actually live = red.
   Live vs past is told apart by .live-badge vs .vod-badge; the .live-info
   element itself is identical in both. */
html body .live-info{
  background:var(--ww-inset) !important;
  border-top:1px solid var(--ww-card-line) !important;
}
html body .live-info span{ color:var(--ww-muted) !important; }

html body .live-info.upcoming-info{
  background:rgba(184,134,11,.30) !important;
  border-top:1px solid rgba(212,175,55,.40) !important;
}
html body .live-info.upcoming-info span{ color:rgba(255,230,160,.85) !important; }
html body .live-card:has(.upcoming-info){ border-color:rgba(212,175,55,.30) !important; }

html body .live-card:has(.live-badge) .live-info{
  background:rgba(160,12,6,.30) !important;
  border-top:1px solid rgba(225,6,0,.40) !important;
}
html body .live-card:has(.live-badge) .live-info span{ color:rgba(255,190,185,.85) !important; }

/* ---------- 15. /schedule-stream ------------------------------------------- */
html body .vy_lv_a4cp{
  background:var(--ww-card-bg) !important;
  border:1px solid var(--ww-card-line) !important;
  border-radius:var(--ww-card-radius) !important;
  -webkit-backdrop-filter:var(--ww-glass);
  backdrop-filter:var(--ww-glass);
  box-shadow:0 2px 10px rgba(0,0,0,.25) !important;
}
/* nested panel stays clear - stacking two translucent layers doubles opacity */
html body .vy_lv_a7t{ background:transparent !important; }

/* NOTE: the Category <select> also carries an inline style="background:#2a2a2a
   !important". Inline !important is the top of the cascade and cannot be
   beaten from a stylesheet - that one needs a template edit. */
html body select.vy_lv_a16t,
html body input.vy_lv_a16t,
html body textarea.vy_lv_a17t{
  background:var(--ww-well) !important;
  border:1px solid var(--ww-card-line) !important;
  border-radius:10px !important;
  color:var(--ww-text) !important;
}
html body select.vy_lv_a16t option{ background:var(--ww-panel) !important; color:var(--ww-text) !important; }
html body input.vy_lv_a16t::-webkit-calendar-picker-indicator{ filter:invert(1) opacity(.6); }

/* ---------- 15b. profile pages ---------------------------------------------
   dark.css scopes profile chrome under .wo_user_profile (2 classes), which
   outranks the generic "html .x" rules further up - house rule 3. Without
   these the whole profile column stays opaque and the member's own cover
   background never shows through.                                          */
html body .wo_user_profile .card.hovercard,
html body .wo_user_profile .user-bottom-nav,
html body .wo_user_profile .post,
html body .wo_user_profile .panel.post,
html body .wo_user_profile .post.publisher-box{
  background:var(--ww-card-bg) !important;
  border:1px solid var(--ww-card-line) !important;
  border-radius:var(--ww-card-radius) !important;
}
html body .wo_user_profile .card.hovercard:hover,
html body .wo_user_profile .user-bottom-nav:hover,
html body .wo_user_profile .post:hover,
html body .wo_user_profile .panel.post:hover{
  border-color:var(--ww-card-line-hot) !important;
  box-shadow:var(--ww-card-shadow-hot) !important;
}
html body .wo_user_profile .btn.btn-default,
html body .wo_user_profile .ww-post-cat{
  background:var(--ww-inset) !important;
  border:1px solid var(--ww-card-line) !important;
}
html body .wo_user_profile .post .post-description .post-actions .stat-item,
html body .wo_user_profile .post .post-description .post-actions .wo-reaction.stat-item{
  background:var(--ww-inset) !important;
  border:1px solid var(--ww-card-line) !important;
}
/* stock fallback behind the cover photo is white - only touch the colour so
   the member's cover image is left alone */
html body .wo_user_profile .user-cover{ background-color:#151515 !important; }

/* let the navbar glass and the chat rail show through their own nav lists */
html body .navbar .navbar-nav,
html body .nav.nav-tabs.wo_chat_tabs{ background:transparent !important; }

/* ---------- 16. stock-theme fixes ------------------------------------------ */
/* style.css pins this bar to the viewport on scroll */
html ul#filterby-post{ position:static !important; top:auto !important; }

/* publisher "More" tray: stock CSS sizes each tile to the exact text width
   with overflow:hidden, so labels clip on both edges. Five per row instead. */
.sun_pub_more{
  flex-wrap:wrap !important; justify-content:center !important;
  row-gap:12px !important; column-gap:0 !important;
}
.sun_pub_more_items{
  flex:0 0 20% !important; width:20% !important; max-width:20% !important;
  min-width:96px !important;
  margin-left:0 !important; margin-right:0 !important;
}
.sun_pub_more_items .poster-left-buttons{ width:100% !important; }
.sun_pub_more_items .btn.btn-file{
  overflow:visible !important; width:100% !important;
  white-space:nowrap !important; text-align:center !important;
}

/* ---------- 17. mobile -----------------------------------------------------
   Phones get a plain static gradient. The desktop version animates
   background-position across four oversized layers with
   background-attachment:fixed; on mobile that repaints the whole viewport
   every frame, the compositor gives up and drops the layer - which is why the
   background appeared for a moment and then vanished. So: one linear
   gradient, no animation, no fixed attachment. First and last colour stops
   are identical, so the repeat seam is invisible on long pages.            */
@media (max-width:900px){
  html body,
  html body.dark-mode{
    background:linear-gradient(160deg,
      #0a0a0a 0%,
      #161616 28%,
      #241010 58%,
      #151515 82%,
      #0a0a0a 100%) !important;
    background-size:100% 100vh !important;
    background-repeat:repeat-y !important;
    background-attachment:scroll !important;
    animation:none !important;
  }

  /* backdrop blur is the other half of the dropped-layer problem and is
     expensive on phones - flatten it and lean on denser surfaces instead */
  html .list-group,
  html .wow_content,
  html .user-bottom-nav,
  html .navbar.navbar-default,
  html .dropdown-menu,
  html .modal-content,
  html body .live-now-hero-details,
  html body .live-now-hero-chat,
  html body .live-card,
  html body .ww-home-live-box,
  html body .vy_lv_a4cp{
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }
  html .navbar.navbar-default{ background:rgba(20,20,20,.96) !important; }
  html .dropdown-menu,
  html .modal-content{ background:rgba(16,16,16,.97) !important; }
}

/* ---------- 18. reduced motion --------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html body, html body.dark-mode{ animation:none !important; }
  html #posts > div{ animation:none !important; }
  html .live-badge, html .ww-live, html .badge-live{ animation:none !important; }
}

/* ---------- 19. /dashboard -------------------------------------------------
   The dashboard ships its own inline <style> block, which sits AFTER this
   file in source order and marks several rules !important. So each override
   here needs !important AND higher specificity: its selectors are
   .wo_new_sett_pagee .x (0,2,0), ours add html body -> (0,2,2).
   Cards that sit on the page background get the full card surface; anything
   nested inside a card gets the raised-strip value instead, so the two
   never stack into a darker patch.
   Left alone on purpose: the Twitch / YouTube / Rumble brand buttons, the
   red action buttons, and VOD thumbnail wells (media surfaces stay dark). */

html body .wo_new_sett_pagee .wow-item-info,
html body .wo_new_sett_pagee .knqs-box,
html body .wo_new_sett_pagee #ww_ms_page{
  background:var(--ww-card-bg) !important;
  border:1px solid var(--ww-card-line) !important;
  border-radius:var(--ww-card-radius) !important;
}

html body .wo_new_sett_pagee .knvod-card,
html body .wo_new_sett_pagee .knvid-card,
html body .wo_new_sett_pagee .knws-row,
html body .wo_new_sett_pagee #ww_ms_connect,
html body .wo_new_sett_pagee .ww_rs_item{
  background:var(--ww-inset) !important;
  border:1px solid var(--ww-card-line) !important;
}

html body .wo_new_sett_pagee .knqs-box:hover,
html body .wo_new_sett_pagee .knvod-card:hover,
html body .wo_new_sett_pagee .knvid-card:hover,
html body .wo_new_sett_pagee .knws-row:hover,
html body .wo_new_sett_pagee .ww_rs_item:hover{
  border-color:var(--ww-card-line-hot) !important;
}

html body .wo_new_sett_pagee .knws-start,
html body .wo_new_sett_pagee .knws-end,
html body .wo_new_sett_pagee #knwsCat,
html body .wo_new_sett_pagee #knVidSort,
html body .wo_new_sett_pagee #ww_rs_platform,
html body .wo_new_sett_pagee #kn_dash_serverurl,
html body .wo_new_sett_pagee #kn_dash_streamkey{
  background:var(--ww-well) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  color:var(--ww-text) !important;
}

html body .wo_new_sett_pagee #kn_dash_revealbtn,
html body .wo_new_sett_pagee .knvod-thumbbtn{
  background:rgba(255,255,255,.08) !important;
  border:1px solid var(--ww-card-line) !important;
}

/* ---------- 20. Admin verified checkmark -----------------------------------
   ww-admin-check.js tags the badge of any account whose username appears in
   window.WW_ADMIN_USERS. The badge renders three different ways across the
   templates - a bare svg, a span wrapping an svg, and a span wrapping an <i>
   glyph - so all three need covering. Ordinary verified users keep the stock
   blue; only admin = '1' accounts go red. */
span.verified-color.ww-admin-check,
svg.verified-color.ww-admin-check,
.ww-admin-check{
  color:var(--ww-red) !important;
}
svg.verified-color.ww-admin-check,
.ww-admin-check svg,
.ww-admin-check svg path{
  fill:var(--ww-red) !important;
}
.ww-admin-check i{
  color:var(--ww-red) !important;
}

/* Copy buttons on ?page=static-stream-key are styled inline in PHP and carry
   no id or class, so they are matched on their onclick handler. Without this
   they sit solid grey beside the now-translucent Reveal button. */
html body .wo_new_sett_pagee .wow-item-info button[onclick^="knDashCopy"]{
  background:rgba(255,255,255,.08) !important;
  border:1px solid var(--ww-card-line) !important;
  color:var(--ww-text) !important;
}
html body .wo_new_sett_pagee .wow-item-info button[onclick^="knDashCopy"]:hover{
  border-color:var(--ww-card-line-hot) !important;
}

/* ---------- 21. Blue stays the default for non-admin verified users --------
   ww-role-badges.js injects an inline <style> holding ".ww-role-name span"
   at color:#e02b2b !important, which also catches the verified badge nested
   inside those names. A role holder who is not an admin would therefore show
   a red checkmark they have not earned, so restore the stock blue here.
   Specificity is (0,3,1) against their (0,1,1); :not(.ww-admin-check):not(.ww-page-check) keeps
   real admins red. Currently a no-op because every role holder is also an
   admin - it exists so that can stop being true safely.
   .ww-page-name is deliberately NOT listed here; see section 22. */
.ww-role-name span.verified-color:not(.ww-admin-check):not(.ww-page-check){
  color:#55acee !important;
}
.ww-role-name span.verified-color:not(.ww-admin-check):not(.ww-page-check) i{
  color:#55acee !important;
}
.ww-role-name span.verified-color:not(.ww-admin-check):not(.ww-page-check) svg{
  fill:#55acee !important;
}

/* ---------- 22. Official WorldsWave pages ----------------------------------
   ww-role-badges.js marks the four first-party page names - WorldsWave,
   WorldsWave Livestreaming, WorldsWave Ads and API - with .ww-page-name and
   renders them red and bold. ww-admin-check.js derives that set from the DOM
   and tags the matching verified badges with .ww-page-check.
   This is class-based rather than structural on purpose: the badge is not
   always inside or adjacent to the name - on post avatars it sits in a
   separate link entirely, so no descendant or sibling selector can reach it.
   Third-party pages are never tagged, so this cannot leak onto them. */
span.verified-color.ww-page-check,
svg.verified-color.ww-page-check,
.ww-page-check{
  color:var(--ww-red) !important;
}
svg.verified-color.ww-page-check,
.ww-page-check svg,
.ww-page-check svg path{
  fill:var(--ww-red) !important;
}
.ww-page-check i{
  color:var(--ww-red) !important;
}

/* ============================================================
   23. Page / group profile header

   dark.css pins .page-info-cont to rgb(33,33,33) with !important
   AND backs it with an opaque box-shadow in the same colour, so
   both have to go or the block stays solid. Matched at (0,2,0)
   with !important - ww-theme.css loads after dark.css, so equal
   specificity wins and the selector stays the minimum that does
   the job (house rule 4).

   Deliberately no backdrop-filter: this header holds the Boost /
   Edit / Rating buttons, which open position:fixed modals, and a
   filter here would create a containing block and trap them
   behind the backdrop (house rule 1).
   ============================================================ */
.page-info-cont.row,
.wo_page_profile .page-info-cont {
  background-color: var(--ww-card-bg) !important;
  box-shadow: none !important;
  border-top: 1px solid var(--ww-card-line) !important;
  border-radius: 0 0 var(--ww-card-radius) var(--ww-card-radius) !important;
}

/* The cover image sits on a hardcoded white .cardheader, which
   flashes white before the image decodes and shows at the edges
   on short covers. */
.profile-container .card.hovercard .cardheader.user-cover {
  background-color: transparent !important;
}
.profile-container .card.hovercard {
  border-radius: var(--ww-card-radius) var(--ww-card-radius) 0 0 !important;
}

/* ============================================================
   24. HEADER SEARCH - POST RESULTS
   ------------------------------------------------------------
   Post rows reuse the stock .user-lastseen slot, which is a
   block sitting after a left-floated 50px avatar. Line one
   flows beside the float, but every later line drops under it
   and slides back to the row's left edge. The margin-left
   pushes the whole block clear of the float so all lines stay
   aligned with the publisher name above them.

   HOUSE RULE: the clamp is scoped to .ww-search-post-text, not
   to .user-lastseen. People/page rows put a short "22 w" style
   timestamp in that same slot and must not be indented.
   ============================================================ */
.search-dropdown-result li a .user-lastseen.ww-search-post-text {
    margin-left: 50px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
    max-height: 2.7em;
    word-break: break-word;
}

/* ============================================================
   25. ADVANCED SEARCH - POSTS TAB
   ------------------------------------------------------------
   The card surface itself is already handled by .wow_content,
   so this section only lays out the inside of a post result.

   HOUSE RULE: #posts-cont is switched to flex because the stock
   Bootstrap columns are floated, and floated columns of unequal
   height snag on each other and leave ragged holes in the grid.
   Post text varies wildly in length, so that happens constantly
   here in a way it never does for the fixed-height user, page
   and group cards. Do not "restore" the float.
   ============================================================ */
#posts-cont {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}
#posts-cont > [data-search-type="post"] {
    display: flex;
    float: none;
}
#posts-cont .ww-srch-post {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 14px;
    margin-bottom: 16px;
}
#posts-cont .ww-srch-post-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    text-decoration: none;
}
#posts-cont .ww-srch-post-ava {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    display: block;
}
#posts-cont .ww-srch-post-ava img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
#posts-cont .ww-srch-post-author {
    font-weight: 600;
    color: var(--ww-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#posts-cont .ww-srch-post-time {
    color: var(--ww-muted);
    font-size: 12px;
    margin-left: auto;
    flex: 0 0 auto;
}
/* flex:1 keeps the body filling the card so every card in a row
   ends at the same height regardless of snippet length. */
#posts-cont .ww-srch-post-body {
    flex: 1 1 auto;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--ww-muted);
    line-height: 1.5;
    text-decoration: none;
}
#posts-cont .ww-srch-post:hover {
    border-color: rgba(255, 255, 255, .35);
}

/* ---- WW REPOST FEATURE ---- */
.ww-repost-btn { cursor: pointer; }
.ww-repost-btn svg { vertical-align: middle; }
.ww-repost-btn.reposted { color: #00ba7c; }
.ww-repost-btn .repost-count { margin-left: 5px; font-size: 12px; line-height: 1; }

/* ---- WW REPOST ATTRIBUTION ---- */
.ww-repost-attrib { display:flex; align-items:center; gap:6px; padding:9px 14px 0; font-size:13px; color:#71767b; }
.ww-repost-attrib a { color:#71767b; font-weight:600; }
.ww-repost-attrib a:hover { text-decoration:underline; }
.ww-repost-attrib svg { width:15px; height:15px; flex:0 0 auto; }
.knqs-tr{display:grid;grid-template-columns:1fr 1fr;gap:3px 4px;margin-top:8px;width:100%;}
.knqs-chip{display:flex;align-items:center;justify-content:center;gap:1px;font-size:10px;font-weight:700;line-height:1.6;padding:1px 2px;border-radius:5px;background:rgba(128,128,128,.13);white-space:nowrap;}
.knqs-chip i{font-style:normal;opacity:.45;font-size:9px;margin-right:2px;}
.knqs-c-up,.knqs-c-new{color:#3ddc7f;}
.knqs-c-down{color:#ff5a5a;}
.knqs-c-flat{color:#9a9a9a;}
.knqs-c-none{color:#6f6f6f;}

.ww-repost-attrib .ww-repost-others {
    opacity: .85;
    border-bottom: 1px dotted currentColor;
    cursor: help;
}
html body .wo_new_sett_pagee .knqs-box:has(.knqs-tr){display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto auto;align-items:center;justify-items:center;column-gap:12px;}
html body .wo_new_sett_pagee .knqs-box:has(.knqs-tr) .knqs-ic{grid-column:1;grid-row:1;margin-bottom:6px;}
html body .wo_new_sett_pagee .knqs-box:has(.knqs-tr) .knqs-num{grid-column:1;grid-row:2;}
html body .wo_new_sett_pagee .knqs-box:has(.knqs-tr) .knqs-lab{grid-column:1;grid-row:3;}
html body .wo_new_sett_pagee .knqs-box:has(.knqs-tr) .knqs-tr{grid-column:2;grid-row:1 / 4;display:flex;flex-direction:column;gap:3px;margin-top:0;width:auto;justify-self:end;}
html body .wo_new_sett_pagee .knqs-box:has(.knqs-tr) .knqs-chip{justify-content:flex-start;min-width:68px;padding:1px 5px;}
html body .wo_new_sett_pagee .knqs-box:has(.knqs-tr) .knqs-chip i{display:inline-block;min-width:9px;}

/* ---- WW REPOST: reposters hover tooltip ---- */
.ww-repost-others { cursor: pointer; text-decoration: underline dotted; }
.ww-repost-tip {
  position: absolute;
  z-index: 99999;
  background: #1b1b1b;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 6px 0;
  min-width: 140px;
  max-width: 260px;
  box-shadow: 0 6px 20px rgba(0,0,0,.45);
  font-size: 13px;
  line-height: 1.4;
}
.ww-repost-tip a {
  display: block;
  padding: 4px 12px;
  color: #e6e6e6;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ww-repost-tip a:hover { background: #2a2a2a; color: #fff; }