/* ================================================================
   UMMAH.BUZZ - "The Front Page of the Muslim Internet"
   Design System v1.0.0
   Extracted from ummah.city palette. Dark + light themes (NOT dark-only —
   [data-theme="light"] warm-cream palette ships since v1.3.3, Apr 19 2026).
   Mobile-first.
   ================================================================ */

/* ===== UMMAHONE PROMO BANNER =====
   May 14 (Mehek): slim the banner to a single compact bar on all viewports.
   Disproportionate height (items 2+3) comes from unconstrained padding + flex-wrap.
   Desktop: max-height 44px, vertically centered. No wrap allowed. */
#umg-supporter-banner {
    max-height: 52px;
    display: flex !important;
    align-items: center !important;
    overflow: hidden;
}
#umg-supporter-banner > div {
    flex-wrap: nowrap !important;
    align-items: center !important;
}
/* Jun 18: two copies of the banner text — full on desktop, terse single-line on
   mobile. The text span itself ellipsis-clips so it can NEVER wrap to a 2nd/3rd
   line and push the hero down on a phone. Default = desktop copy visible. */
.umg-banner-full { display: inline; }
.umg-banner-short { display: none; }
@media (max-width: 600px) {
    .umg-banner-full { display: none; }
    .umg-banner-short { display: inline; }
}
/* A-grade iter-4 (Jun 18): skip-to-main link (WCAG 2.4.1 A). Visually hidden
   until keyboard-focused, then a solid gold pill jumps to #main. Works in both
   themes (high-contrast gold-on-ink). */
.skip-link {
    position: fixed;
    left: 50%;
    top: 8px;
    transform: translate(-50%, -160%);
    z-index: 1000;
    padding: 10px 18px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    background: #DFA032;
    color: #060B18;
    font-weight: 700;
    font-size: 0.875rem;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    transition: transform 0.18s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
    transform: translate(-50%, 0);
    outline: 2px solid #060B18;
    outline-offset: 2px;
}
/* A-grade iter-4 (Jun 18): banner dismiss "×" tap target. Was 24×22 (22×20 in
   QA's measure) → fails WCAG 2.5.5 (44px min). inline-flex centers the glyph
   inside a 44×44 hit box; negative margin keeps it from inflating banner height
   beyond the row it already occupies. */
.umg-banner-dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin: -4px -8px -4px 0;
    border-radius: 8px;
}
.umg-banner-dismiss:focus-visible {
    outline: 2px solid rgba(255,255,255,0.7);
    outline-offset: -2px;
}

/* ===== TOKENS ===== */
:root {
    --buzz-void: #060B18;
    --buzz-deep: #0A1128;
    --buzz-surface: #0F1A33;
    --buzz-border: #1A2744;
    --buzz-border-alpha: rgba(26, 39, 68, 0.8);
    --buzz-gold: #DFA032;
    --buzz-gold-light: #F0C96E;
    --buzz-gold-dim: #8B6914;
    --buzz-gold-glow: rgba(223, 160, 50, 0.15);
    --buzz-teal: #14B8A6;
    --buzz-teal-dark: #0D9488;
    --buzz-text: #C8D0E0;
    --buzz-text-muted: #8892A4;  /* May 14: raised from #6B7280 — WCAG AA on dark bg */
    --buzz-text-dim: #5E6B7E;    /* May 14: raised from #4B5563 — improves low-contrast gray on black */
    --buzz-heading: #FFFFFF;
    --buzz-card-bg: linear-gradient(145deg, rgba(15, 26, 51, 0.7), rgba(6, 11, 24, 0.85));
    --buzz-card-border: rgba(26, 39, 68, 0.8);
    --buzz-header-bg: rgba(6, 11, 24, 0.85);
    --buzz-header-border: rgba(26, 39, 68, 0.5);
    --buzz-input-bg: rgba(6, 11, 24, 0.6);
    --buzz-hover-wash: rgba(223, 160, 50, 0.06);
    --buzz-gold-tint-strong: rgba(223, 160, 50, 0.12);
    --buzz-danger: #EF4444;
    --buzz-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --buzz-radius: 14px;
    --buzz-radius-sm: 8px;
    --buzz-radius-pill: 9999px;
}

/* ===== LIGHT MODE =====
   Brand-aligned "warm cream" palette shared with ummah.email + UmmahPlaces.
   Cream background (#FAF7F2), ink text (#2C2417), brass (#C8912E) preserved,
   teal darkened (#0D9488) for AA contrast against cream.
   Apr 19 — Alisha requested a light/day mode because grey text on dark was
   hard to read even at full brightness. */
[data-theme="light"] {
    --buzz-void: #FAF7F2;           /* page background */
    --buzz-deep: #F5F0E8;           /* slightly darker variant */
    --buzz-surface: #FFFFFF;        /* card body */
    --buzz-border: #E8E1D4;         /* warm-200 border */
    --buzz-border-alpha: rgba(232, 225, 212, 0.9);
    --buzz-gold: #C8912E;           /* brass dark enough for AA on cream */
    --buzz-gold-light: #DFA032;
    --buzz-gold-dim: #A6751F;
    --buzz-gold-glow: rgba(200, 145, 46, 0.15);
    --buzz-teal: #0D9488;           /* darkened for AA contrast on cream */
    --buzz-teal-dark: #0B7A6F;
    --buzz-text: #2C2417;           /* ink */
    --buzz-text-muted: #5C5040;     /* ink-light */
    --buzz-text-dim: #8A7E6D;       /* ink-muted */
    --buzz-heading: #1F1A10;
    --buzz-card-bg: #FFFFFF;        /* solid card, no gradient in light mode */
    --buzz-card-border: rgba(232, 225, 212, 0.95);
    --buzz-header-bg: rgba(250, 247, 242, 0.92);
    --buzz-header-border: rgba(232, 225, 212, 0.8);
    --buzz-input-bg: rgba(255, 255, 255, 0.9);
    --buzz-hover-wash: rgba(200, 145, 46, 0.07);
    --buzz-gold-tint-strong: rgba(200, 145, 46, 0.14);
    --buzz-danger: #C0392B;
    color-scheme: light;
}
/* Hide dark-mode-only ambient effects — they clash with cream. */
[data-theme="light"] .starfield,
[data-theme="light"] .grain,
[data-theme="light"] .cursor-glow { display: none !important; }

/* Smooth the flip so it doesn't feel harsh — but keep it fast. */
html { transition: background-color 0.2s var(--buzz-ease); }
body { transition: background-color 0.2s var(--buzz-ease), color 0.2s var(--buzz-ease); }

/* ===== RESET ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
/* iter-2 (Jun 18): overflow-x:hidden must be on HTML too, not just body — the
   edge-bleed filter strips (.topic-tabs/.format-filter use negative margins) let
   ~16px escape at the viewport/html level (body's clip doesn't catch it when html
   is overflow-x:visible). Clamp both so there is zero mobile horizontal scroll. */
html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; }
[x-cloak] { display: none !important; }

body {
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
    background: var(--buzz-void);
    color: var(--buzz-text);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
    min-height: 100vh;
    /* Mobile nav clearance. A-grade polish (Jun 18): add the iOS safe-area inset
       on top of the ~64px nav height so the fixed bottom nav never overlaps the
       last content (the CD saw it cover lower content on the post page). */
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    border: none;
    outline: none;
    background: none;
}
button { cursor: pointer; }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--buzz-void); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--buzz-border), var(--buzz-gold));
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #2A3A5E, var(--buzz-gold-light));
}

/* ===== STARFIELD ===== */
.starfield {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
}
.star-dot {
    position: absolute;
    border-radius: 50%;
    background: #fff;
    animation: starPulse var(--dur) ease-in-out infinite;
    animation-delay: var(--del);
}
@keyframes starPulse {
    0%, 100% { opacity: var(--min-o); transform: scale(1); }
    50% { opacity: var(--max-o); transform: scale(1.4); }
}

/* ===== GRAIN OVERLAY ===== */
.grain {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* ===== CURSOR GLOW ===== */
.cursor-glow {
    position: fixed;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(223, 160, 50, 0.04) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
    will-change: left, top;
}

/* ===== SCROLL REVEAL ===== */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s var(--buzz-ease), transform 0.8s var(--buzz-ease);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }

/* ===== HEADER / MASTHEAD ===== */
.buzz-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--buzz-header-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--buzz-header-border);
    padding: 0 1rem;
}
.buzz-header-inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    gap: 1rem;
}
.buzz-logo {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
    text-decoration: none;
}
/* Bee mark (v163, Jun 18 2026). currentColor drives both strokes + fills so the
   one glyph theme-matches: gold on dark, readable brass on cream. A MARK, not a
   mascot - geometric hexagonal-bee, no face. */
.buzz-bee-mark {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--buzz-gold);
    transition: transform 0.25s ease;
}
.buzz-logo:hover .buzz-bee-mark {
    transform: translateY(-1px);
}
[data-theme="light"] .buzz-bee-mark {
    color: #C8912E; /* readable brass on cream */
}
.buzz-logo-lockup {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1;
}
.buzz-logo-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--buzz-heading);
    letter-spacing: -0.02em;
    line-height: 1.05;
}
.buzz-logo-text span {
    color: var(--buzz-gold);
}
/* Tagline "What's good rises" - quiet masthead-grade companion line under the
   wordmark. The bee's companion line; not a strapline that duplicates the hero. */
.buzz-logo-tagline {
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--buzz-text-muted);
    margin-top: 2px;
    white-space: nowrap;
}
[data-theme="light"] .buzz-logo-tagline {
    color: #73654A; /* WCAG AA: 5.33:1 on cream */
}
/* On the narrowest phones the tagline would crowd the search/auth row - hide it
   below the wordmark there; the bee + wordmark stay. */
@media (max-width: 380px) {
    .buzz-logo-tagline { display: none; }
}
.buzz-tagline {
    /* A-grade polish (Jun 18): the post-page nav tagline was ~11px light gray and
       read as throwaway chrome. Bumped to 0.875rem (~14px) + the brighter --buzz-text
       so "The Front Page of the Muslim Internet" reads as a confident strapline. */
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--buzz-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex-shrink: 1;
    max-width: 280px;
}
.buzz-district-badge {
    font-size: 0.625rem;
    color: var(--buzz-teal);
    background: rgba(20, 184, 166, 0.08);
    border: 1px solid rgba(20, 184, 166, 0.2);
    padding: 2px 8px;
    border-radius: var(--buzz-radius-pill);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.2s ease;
}
.buzz-district-badge:hover {
    background: rgba(20, 184, 166, 0.15);
}
.buzz-header-auth {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}
.buzz-avatar-name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--buzz-gold);
}
.buzz-btn-signin {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    background: rgba(223, 160, 50, 0.12);
    border: 1px solid rgba(223, 160, 50, 0.25);
    border-radius: var(--buzz-radius-pill);
    color: var(--buzz-gold);
    font-size: 0.8125rem;
    font-weight: 600;
    transition: all 0.3s ease;
    white-space: nowrap;
}
.buzz-btn-signin:hover {
    background: rgba(223, 160, 50, 0.2);
    border-color: rgba(223, 160, 50, 0.4);
    transform: translateY(-1px);
}
.buzz-btn-signin:active {
    transform: translateY(0);
}
.buzz-btn-logout {
    font-size: 0.75rem;
    color: var(--buzz-text-muted);
    transition: color 0.3s ease;
    /* May 14 (Mehek #7): hide logout text on medium screens — icon-only at ≤900px
       to prevent 4-item auth row from crowding the header. */
}
.buzz-btn-logout:hover { color: var(--buzz-danger); }
@media (max-width: 900px) {
    /* On medium-small desktop, hide logout text label so auth row doesn't overflow. */
    .buzz-btn-logout {
        font-size: 0;
        width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(239, 68, 68, 0.06);
        border: 1px solid rgba(239, 68, 68, 0.15);
        border-radius: 50%;
        padding: 0;
    }
    /* Show an X icon instead of text on compressed desktop */
    .buzz-btn-logout::before {
        content: '×';
        font-size: 16px;
        line-height: 1;
        color: var(--buzz-text-muted);
    }
    .buzz-btn-logout:hover::before { color: var(--buzz-danger); }
    .buzz-btn-logout:hover {
        background: rgba(239, 68, 68, 0.12);
        border-color: rgba(239, 68, 68, 0.3);
    }
    /* Also hide the Saved text label at this breakpoint */
    .buzz-saved-link span { display: none; }
    .buzz-saved-link { padding: 8px; }
}

/* May 18 (BUG-133): sign-out confirm popover.
   The red circle on ≤900px viewports was a one-tap logout with no guard;
   mobile users were tapping it accidentally and losing their session. This
   popover anchors below the logout button and asks for a second tap before
   firing /api/auth/logout.php. Quiet voice — no auntie "are you sure". */
.buzz-logout-wrap {
    position: relative;
    display: inline-flex;
}
.buzz-logout-confirm {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 50;
    background: var(--buzz-bg-elevated, #1a1a1a);
    border: 1px solid var(--buzz-border, rgba(255, 255, 255, 0.08));
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
    min-width: 168px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.buzz-logout-confirm-title {
    font-size: 0.85rem;
    color: var(--buzz-text, #e6e6e6);
    font-weight: 500;
}
.buzz-logout-confirm-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}
.buzz-logout-confirm-btn {
    font-size: 0.78rem;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    font-family: inherit;
}
.buzz-logout-confirm-btn.cancel {
    background: transparent;
    color: var(--buzz-text-muted, #999);
    border-color: var(--buzz-border, rgba(255, 255, 255, 0.12));
}
.buzz-logout-confirm-btn.cancel:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--buzz-text, #e6e6e6);
}
.buzz-logout-confirm-btn.confirm {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.35);
}
.buzz-logout-confirm-btn.confirm:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.55);
}
[data-theme="light"] .buzz-logout-confirm {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .buzz-logout-confirm-title { color: #1a1a1a; }
[data-theme="light"] .buzz-logout-confirm-btn.cancel {
    color: #666;
    border-color: rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .buzz-logout-confirm-btn.cancel:hover {
    background: rgba(0, 0, 0, 0.04);
    color: #1a1a1a;
}

/* Desktop Submit button — subtle teal secondary action, distinct from the brass
   auth block. Hidden on mobile (mobile-nav already owns Submit). */
.buzz-btn-submit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: rgba(20, 184, 166, 0.12);
    border: 1px solid rgba(20, 184, 166, 0.25);
    border-radius: var(--buzz-radius-pill);
    color: var(--buzz-teal);
    font-size: 0.8125rem;
    font-weight: 600;
    transition: all 0.25s var(--buzz-ease);
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.buzz-btn-submit:hover {
    background: rgba(20, 184, 166, 0.2);
    border-color: rgba(20, 184, 166, 0.4);
    transform: translateY(-1px);
}
.buzz-btn-submit:active { transform: translateY(0); }
.buzz-btn-submit.active {
    background: rgba(20, 184, 166, 0.24);
    border-color: rgba(20, 184, 166, 0.5);
}
@media (max-width: 768px) {
    .buzz-btn-submit { display: none; }
}

/* Desktop header search */
.header-search-wrap {
    flex: 1;
    max-width: 320px;
    display: none;
}
@media (min-width: 768px) {
    .header-search-wrap { display: block; }
}
.header-search-wrap .buzz-search {
    height: 36px;
    font-size: 0.8125rem;
}

/* ===== HERO SECTION =====
   May 13 2026 (Abdullah UB3): tightened mobile + desktop top padding —
   excessive whitespace between nav→728 ad→hero on desktop.
   May 14 2026 (Mehek): logged-out hero gets extra top clearance via class toggle
   on .hero-section; logged-in state removes the .hero-loggedout extra padding.
   Base padding kept minimal so the promo bar + header stack doesn't eat the fold. */
.hero-section {
    text-align: center;
    /* BUG-065 (May 18): trimmed top padding 1rem→0.25rem to reduce navbar→hero gap */
    padding: 0.25rem 1rem 1.5rem;
    position: relative;
    z-index: 2;
}
.hero-title {
    font-size: clamp(1.5rem, 5vw, 2.5rem);
    font-weight: 800;
    color: var(--buzz-heading);
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: 0.625rem;
}
.hero-title .gold {
    /* Jun 18: differentiate the headline gold from the solid gold CTA pill so the
       two don't compete. The headline leans into the LIGHTER end of the gold ramp
       (gold-light -> a soft cream-gold) and drops the glow, reading as elegant
       emphasis TEXT; the CTA stays the loud, solid, glowing gold PILL — the single
       dominant gold call-to-action. Same brand hue, clear visual hierarchy. */
    background: linear-gradient(105deg, var(--buzz-gold-light), #FBE3AE);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    filter: drop-shadow(0 0 10px rgba(240, 201, 110, 0.12));
}
[data-theme="light"] .hero-title .gold {
    /* On cream, the lighter gold ramp would wash out — keep a readable brass that
       still sits a notch softer than the CTA. */
    background: linear-gradient(105deg, var(--buzz-gold), #B8841F);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: none;
}
.hero-sub {
    /* A-grade polish (Jun 18): the CD saw this render as thin light-gray. Bumped
       from --buzz-text-muted (#8892A4) to the brighter --buzz-text (#C8D0E0, ~9:1
       on the void) + weight 500 so it reads as a confident statement under the
       headline and clears WCAG AA comfortably. */
    font-size: clamp(0.9375rem, 2.5vw, 1.125rem);
    color: var(--buzz-text);
    font-weight: 500;
    max-width: 520px;
    margin: 0 auto 1.5rem;
    line-height: 1.5;
}
.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    min-height: 44px;
    background: linear-gradient(135deg, var(--buzz-gold), var(--buzz-gold-dim));
    color: #060B18;
    font-weight: 700;
    font-size: 0.9375rem;
    border-radius: var(--buzz-radius-pill);
    transition: all 0.3s var(--buzz-ease);
    box-shadow: 0 4px 20px rgba(223, 160, 50, 0.25);
}
.hero-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(223, 160, 50, 0.35);
}
.hero-cta:active {
    transform: translateY(0);
    box-shadow: 0 2px 12px rgba(223, 160, 50, 0.2);
}
.hero-cta svg {
    width: 16px;
    height: 16px;
}
/* BUG-131 (May 18): Skeleton placeholder reserves vertical space while
   checkAuth() resolves, so the hero doesn't jank when the real CTA paints.
   Matches the .hero-cta / .hero-promo-link min-height (44px) + pill radius. */
.hero-cta-skeleton {
    display: inline-block;
    width: 200px;
    height: 44px;
    border-radius: var(--buzz-radius-pill);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
}
[data-theme="light"] .hero-cta-skeleton {
    background: rgba(20, 17, 10, 0.03);
    border-color: rgba(20, 17, 10, 0.06);
}

/* SUGG-163 hero lift (Jun 15): compact stat strip in the hero zone.
   Real counts only — no fabricated numbers (amanah).
   Inline flex row, centered, appears below the CTA before the gold rule. */
.hero-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 1.25rem auto 0;
    max-width: 360px;
}
.hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 1.25rem;
}
.hero-stat-num {
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--buzz-gold);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.hero-stat-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--buzz-text-muted);
    margin-top: 0.25rem;
    white-space: nowrap;
}
.hero-stat-sep {
    width: 1px;
    height: 2rem;
    background: var(--buzz-border);
    flex-shrink: 0;
}
[data-theme="light"] .hero-stat-num {
    color: var(--buzz-gold-dim);
}
[data-theme="light"] .hero-stat-sep {
    background: rgba(20, 17, 10, 0.12);
}

.hero-promo {
    text-align: center;
}
.hero-promo-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    min-height: 44px;
    background: linear-gradient(135deg, var(--buzz-teal), #0f9484);
    color: #fff;
    font-weight: 700;
    font-size: 0.9375rem;
    border-radius: var(--buzz-radius-pill);
    text-decoration: none;
    transition: all 0.3s var(--buzz-ease);
    box-shadow: 0 4px 20px rgba(20, 184, 166, 0.25);
}
.hero-promo-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(20, 184, 166, 0.35);
}
.hero-tag {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(223, 160, 50, 0.06);
    border: 1px solid rgba(223, 160, 50, 0.15);
    border-radius: var(--buzz-radius-pill);
    color: var(--buzz-gold-dim);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* ===== EXPLAINER STRIP (Issue-3, Jun 9) =====
   First-time visitor context bar — shown only to anonymous users.
   Single-line strip between the filter pills and the feed. Plain-voiced,
   no jargon. Collapses gracefully on mobile (wraps). */
.ub-explainer-strip {
    max-width: 960px;
    margin: 0.5rem auto 0.75rem;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--buzz-text-muted);
    line-height: 1.5;
}
.ub-explainer-link {
    color: var(--buzz-gold);
    font-weight: 600;
}
.ub-explainer-link:hover {
    text-decoration: underline;
}

/* Reader/member CTA strip (A-grade polish iter-2, Jun 18): the prime above-feed
   slot now leads with a READER-facing member CTA (join the conversation / Ummah
   One) instead of the advertiser-facing MAN house banner. The EPOM advertiser
   zone stays below it as paid inventory (attribution chip always-visible); the
   advertiser pitch also lives in the footer "Advertise with us" link. */
.ub-reader-cta {
    max-width: 960px;
    margin: 0.75rem auto 0.5rem;
    padding: 0.7rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    border: 1px solid var(--buzz-gold-tint, rgba(223,160,50,0.25));
    border-radius: var(--buzz-radius-sm, 10px);
    background: linear-gradient(135deg, rgba(223,160,50,0.10), rgba(223,160,50,0.03));
}
.ub-reader-cta-icon { flex-shrink: 0; color: var(--buzz-gold); display: flex; }
.ub-reader-cta-text {
    font-size: 0.875rem;
    color: var(--buzz-text);
    line-height: 1.4;
    flex: 1 1 200px;
    min-width: 0;
}
.ub-reader-cta-text strong { color: var(--buzz-gold); font-weight: 700; }
.ub-reader-cta-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.9rem;
    min-height: 40px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--buzz-gold), var(--buzz-gold-light));
    color: #060B18;
    font-weight: 700;
    font-size: 0.8125rem;
    text-decoration: none;
    white-space: nowrap;
    transition: filter 0.18s ease, transform 0.18s ease;
}
.ub-reader-cta-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
[data-theme="light"] .ub-reader-cta {
    border-color: rgba(196,162,101,0.45);
    background: linear-gradient(135deg, rgba(223,160,50,0.12), rgba(223,160,50,0.04));
}
[data-theme="light"] .ub-reader-cta-btn { color: #060B18; }
@media (max-width: 560px) {
    .ub-reader-cta { flex-direction: row; }
    .ub-reader-cta-btn { width: auto; }
}

/* ===== LAYOUT ===== */
.buzz-layout {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    gap: 1.5rem;
    position: relative;
    z-index: 2;
}
.buzz-feed {
    flex: 1;
    min-width: 0;
    max-width: 680px;
}
.buzz-sidebar {
    width: 280px;
    flex-shrink: 0;
    display: none;
}
@media (min-width: 960px) {
    .buzz-sidebar { display: block; }
}

/* ===== HERO CARD (top story) — Apr 20 Saad feedback ===== */
.buzz-hero {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 0;
    background: var(--buzz-card-bg);
    border: 1px solid var(--buzz-card-border);
    border-radius: var(--buzz-radius);
    margin-bottom: 1.25rem;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.35s var(--buzz-ease);
    position: relative;
    min-height: 280px;
}
.buzz-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(223, 160, 50, 0.5), transparent);
    z-index: 2;
}
.buzz-hero:hover {
    border-color: rgba(223, 160, 50, 0.35);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 40px rgba(223, 160, 50, 0.08);
    transform: translateY(-2px);
}
.buzz-hero-image {
    position: relative;
    min-height: 280px;
    background: rgba(0, 0, 0, 0.3);
    overflow: hidden;
}
.buzz-hero-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--buzz-ease);
}
.buzz-hero:hover .buzz-hero-image img { transform: scale(1.02); }
.buzz-hero-content {
    padding: 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.75rem;
}
.buzz-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #E8C252;
    padding: 0.25rem 0.6rem;
    background: rgba(223, 160, 50, 0.1);
    border: 1px solid rgba(223, 160, 50, 0.25);
    border-radius: 999px;
    align-self: flex-start;
}
.buzz-hero-title {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    letter-spacing: -0.01em;
}
.buzz-hero-desc {
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.buzz-hero-meta {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
    flex-wrap: wrap;
    margin-top: 0.25rem;
}
@media (max-width: 768px) {
    .buzz-hero {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .buzz-hero-image { min-height: 200px; }
    .buzz-hero-title { font-size: 1.2rem; }
    .buzz-hero-content { padding: 1.25rem; }
}
/* Light-mode override */
[data-theme="light"] .buzz-hero-title { color: #2C2417; }
[data-theme="light"] .buzz-hero-desc { color: rgba(44, 36, 23, 0.65); }
[data-theme="light"] .buzz-hero-meta { color: rgba(44, 36, 23, 0.55); }
[data-theme="light"] .buzz-hero-badge { color: #C8912E; background: rgba(200, 145, 46, 0.1); border-color: rgba(200, 145, 46, 0.25); }

/* ===== FEED CARDS (buzz-card) ===== */
.buzz-card {
    display: flex;
    align-items: stretch;
    background: var(--buzz-card-bg);
    border: 1px solid var(--buzz-card-border);
    border-radius: var(--buzz-radius);
    margin-bottom: 0.75rem;
    overflow: hidden;
    transition: all 0.35s var(--buzz-ease);
    position: relative;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.buzz-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(223, 160, 50, 0.2), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.buzz-card:hover::before { opacity: 1; }
.buzz-card:hover {
    border-color: rgba(223, 160, 50, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 0 24px rgba(223, 160, 50, 0.04);
    transform: translateY(-1px);
}
.buzz-card:active {
    transform: translateY(0);
}

/* Vote column */
/* ===== UPVOTE AFFORDANCE (A-grade polish, Jun 18) =====
   The CD flagged the old vote control as "a tiny arrow that reads as a bullet".
   This is the product's KEY interaction, so it now reads unambiguously as an
   upvote BUTTON: a bordered pill, a bold ≥24px filled triangle, gold-on-hover,
   and the count directly below. 44px tap target on mobile. */
/* Feed-card vote column (A-grade polish iter-2, Jun 18): the whole column is now
   ONE bordered "upvote box" — arrow + score stacked inside a single gold-bordered
   pill — so the vote affordance reads as obviously tappable and matches the
   post-page treatment (.vote-btn-detail). Was a near-invisible thin-bordered
   triangle that the CD flagged as inconsistent with the post page. */
.vote-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.5rem;
    min-width: 60px;
    flex-shrink: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    border-right: 1px solid rgba(26, 39, 68, 0.4);
}
.vote-col:focus-visible {
    outline: 2px solid var(--buzz-gold);
    outline-offset: -2px;
    border-radius: 8px;
}
/* The bordered box itself wraps arrow + score. */
.vote-col .vote-arrow {
    display: block;
    width: 44px;
    height: 40px;
    padding: 8px 8px 4px;
    box-sizing: border-box;
    color: var(--buzz-text-muted);
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(223, 160, 50, 0.4);
    border-radius: 10px 10px 0 0;
    border-bottom: none;
    transition: all 0.2s var(--buzz-ease);
}
.vote-col .vote-score {
    display: block;
    width: 44px;
    padding: 2px 0 5px;
    text-align: center;
    box-sizing: border-box;
    font-size: 0.8125rem;
    font-weight: 800;
    color: var(--buzz-text);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    min-height: 0.9em;
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(223, 160, 50, 0.4);
    border-top: none;
    border-radius: 0 0 10px 10px;
    transition: all 0.2s var(--buzz-ease);
}
/* Zero-vote score renders EMPTY (amanah: never invent a number, and never a
   placeholder glyph that reads AS a score). The JS sets score=0 → '' (see
   index.html: post.score > 0 ? post.score : ''); we must NOT inject a '·'
   middle-dot via ::before — every audit (Suhaib/Mehek, Jun 11-20) read that dot
   as "every story shows 0 / a dot instead of a number". The box shape is held by
   the min-height below, so the empty box still looks intentional with no glyph. */
.vote-col .vote-score:empty {
    min-height: 0.9em;
}
.vote-col:hover .vote-arrow,
.vote-col:hover .vote-score {
    color: var(--buzz-gold);
    border-color: rgba(223, 160, 50, 0.75);
    background: rgba(223, 160, 50, 0.1);
}
.vote-col:active .vote-arrow,
.vote-col:active .vote-score {
    background: rgba(223, 160, 50, 0.16);
}
.vote-col.voted .vote-arrow {
    color: #060B18;
    background: linear-gradient(135deg, var(--buzz-gold), var(--buzz-gold-light));
    border-color: var(--buzz-gold);
    filter: drop-shadow(0 0 6px rgba(223, 160, 50, 0.5));
}
.vote-col.voted .vote-score {
    color: var(--buzz-gold);
    border-color: var(--buzz-gold);
    background: rgba(223, 160, 50, 0.14);
}
[data-theme="light"] .vote-col .vote-arrow,
[data-theme="light"] .vote-col .vote-score {
    background: rgba(13, 17, 23, 0.03);
    border-color: rgba(196, 162, 101, 0.6);
    color: var(--buzz-text-muted);
}
[data-theme="light"] .vote-col:hover .vote-arrow,
[data-theme="light"] .vote-col:hover .vote-score {
    color: var(--buzz-gold);
    background: rgba(223, 160, 50, 0.1);
    border-color: var(--buzz-gold);
}
[data-theme="light"] .vote-col.voted .vote-arrow {
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--buzz-gold), var(--buzz-gold-light));
    border-color: var(--buzz-gold);
}
[data-theme="light"] .vote-col.voted .vote-score {
    color: var(--buzz-gold);
    border-color: var(--buzz-gold);
}

/* Vote bounce animation */
@keyframes voteBounce {
    0% { transform: scale(1); }
    30% { transform: scale(1.3); }
    50% { transform: scale(0.9); }
    70% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
.vote-col.vote-animate .vote-arrow {
    animation: voteBounce 0.4s var(--buzz-ease);
}

/* Card content area */
.card-content {
    flex: 1;
    min-width: 0;
    padding: 0.75rem 0.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}
.card-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--buzz-heading);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}
.card-title:hover { color: var(--buzz-gold); }

.card-description {
    font-size: 0.8125rem;
    color: var(--buzz-text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.6875rem;
    color: var(--buzz-text-muted);
}
/* BUG-047 (May 18): tighten meta-item visual hierarchy.
   - Domain reads as a pill chip (subtle background)
   - Author + meta-sep get explicit color tokens
   - source-type badge (TEXT/LINK/VIDEO/TWITTER) reads as a label, not a word */
.card-meta .domain-badge {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    padding: 1.5px 6px;
    border-radius: 4px;
    color: var(--buzz-text-muted);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.card-meta .source-badge,
.card-meta .text-badge,
.card-meta .rising-badge {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.625rem;
    padding: 2px 7px;
    border-radius: 999px;
    font-weight: 600;
}
.card-meta .source-badge { background: rgba(20, 184, 166, 0.1); color: var(--buzz-teal); }
.card-meta .text-badge   { background: rgba(168, 162, 158, 0.12); color: var(--buzz-text-muted); }
.card-meta .rising-badge { background: linear-gradient(90deg, rgba(223,160,50,0.18), rgba(223,160,50,0.08)); color: var(--buzz-gold); }
.card-meta .meta-author { color: var(--buzz-text); font-weight: 500; }
.card-meta .meta-author-ummahme { color: var(--buzz-gold); }
.card-meta .meta-views { font-variant-numeric: tabular-nums; }
[data-theme="light"] .card-meta .domain-badge {
    background: rgba(13, 17, 23, 0.04);
    border-color: rgba(13, 17, 23, 0.08);
}
.card-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 2px;
}
.card-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6875rem;
    color: var(--buzz-text-dim);
    transition: color 0.2s ease;
    cursor: pointer;
}
.card-action-btn:hover { color: var(--buzz-text); }
.card-action-btn svg { width: 14px; height: 14px; }

/* Card thumbnail */
.card-thumb {
    width: 80px;
    min-height: 80px;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    margin: 0.5rem 0.5rem 0.5rem 0;
    border-radius: var(--buzz-radius-sm);
}
.card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--buzz-radius-sm);
}

/* ===== BADGES ===== */
.domain-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: rgba(15, 26, 51, 0.6);
    border: 1px solid rgba(26, 39, 68, 0.5);
    border-radius: var(--buzz-radius-pill);
    font-size: 0.625rem;
    color: var(--buzz-text-muted);
    white-space: nowrap;
}
.domain-badge img {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}
.text-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: rgba(20, 184, 166, 0.12);
    border: 1px solid rgba(20, 184, 166, 0.25);
    border-radius: var(--buzz-radius-pill);
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--buzz-teal);
    letter-spacing: 0.03em;
}
.source-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: var(--buzz-radius-pill);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.source-badge.youtube { background: rgba(255, 0, 0, 0.12); color: #FF4444; border: 1px solid rgba(255, 0, 0, 0.2); }
.source-badge.twitter { background: rgba(29, 161, 242, 0.12); color: #1DA1F2; border: 1px solid rgba(29, 161, 242, 0.2); }
.source-badge.instagram { background: rgba(225, 48, 108, 0.12); color: #E1306C; border: 1px solid rgba(225, 48, 108, 0.2); }
.source-badge.tiktok { background: rgba(255, 0, 80, 0.12); color: #FF0050; border: 1px solid rgba(255, 0, 80, 0.2); }
.source-badge.reddit { background: rgba(255, 69, 0, 0.12); color: #FF4500; border: 1px solid rgba(255, 69, 0, 0.2); }
.source-badge.facebook { background: rgba(24, 119, 242, 0.12); color: #1877F2; border: 1px solid rgba(24, 119, 242, 0.2); }
.source-badge.article { background: rgba(200, 208, 224, 0.08); color: var(--buzz-text-muted); border: 1px solid rgba(200, 208, 224, 0.12); }

/* Buzzing badge (was "Rising") - Apr 22 (Saad Apr 20 ask); bee glyph + "Buzzing"
   label v163 (Jun 18 2026). Keeps the gold/amber ember treatment - it already
   lives in bee territory tonally. The inline bee inherits the badge color via
   currentColor. Subtle pulse. */
.rising-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px 2px 7px;
    background: linear-gradient(135deg, rgba(223,160,50,0.20), rgba(234,88,12,0.10));
    border: 1px solid rgba(223,160,50,0.38);
    border-radius: var(--buzz-radius-pill);
    font-size: 0.625rem;
    font-weight: 700;
    color: #fbbf24;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1;
    animation: rising-glow 2.4s ease-in-out infinite;
}
/* Inline bee glyph in the Buzzing badge - inherits badge color. */
.rising-bee {
    flex-shrink: 0;
    display: block;
}
@keyframes rising-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(223,160,50,0.0); }
    50%      { box-shadow: 0 0 12px 0 rgba(223,160,50,0.30); }
}
[data-theme="light"] .rising-badge {
    background: linear-gradient(135deg, rgba(200,145,46,0.18), rgba(234,88,12,0.10));
    border-color: rgba(200,145,46,0.42);
    color: #B45309;
}
/* Respect reduced-motion: drop the pulse, keep the badge. */
@media (prefers-reduced-motion: reduce) {
    .rising-badge { animation: none; }
}

/* Compact view count next to time — Apr 22 */
.meta-views {
    color: var(--buzz-text-muted);
    font-variant-numeric: tabular-nums;
}

.meta-sep { color: var(--buzz-text-dim); }
.meta-author {
    color: var(--buzz-gold);
    font-weight: 500;
    transition: opacity 0.2s ease;
}
.meta-author:hover { opacity: 0.8; }

.status-citizen { color: var(--buzz-gold); }
.status-resident { color: var(--buzz-teal); }

/* ===== SIDEBAR ===== */
.sidebar-card {
    background: var(--buzz-card-bg);
    border: 1px solid var(--buzz-card-border);
    border-radius: var(--buzz-radius);
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.sidebar-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--buzz-heading);
    margin-bottom: 0.75rem;
    letter-spacing: 0.02em;
}
.sidebar-text {
    font-size: 0.8125rem;
    color: var(--buzz-text-muted);
    line-height: 1.5;
    margin-bottom: 1rem;
}

/* "How UmmahBuzz works" 3-step (A-grade polish, Jun 18). */
.sidebar-howto {
    list-style: none;
    margin: 0 0 0.875rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.sidebar-howto li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--buzz-text-muted);
}
.sidebar-howto-num {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 800;
    color: var(--buzz-gold);
    background: rgba(223, 160, 50, 0.14);
    border: 1px solid rgba(223, 160, 50, 0.3);
    margin-top: 0.05rem;
}
[data-theme="light"] .sidebar-howto-num {
    color: #6f5a36;
    background: rgba(223, 160, 50, 0.16);
    border-color: rgba(196, 162, 101, 0.5);
}

/* SUGG-163 (May 22): honest social-proof trust strip. Theme-agnostic tokens. */
.sidebar-trust .trust-stats {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.trust-stat {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.625rem 0.25rem;
    background: var(--buzz-gold-tint, rgba(223, 160, 50, 0.07));
    border: 1px solid var(--buzz-card-border);
    border-radius: 10px;
}
.trust-stat-num {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--buzz-gold);
    font-variant-numeric: tabular-nums;
}
.trust-stat-label {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--buzz-text-muted);
    margin-top: 0.25rem;
    line-height: 1.2;
}
.trust-note {
    font-size: 0.75rem;
    color: var(--buzz-text-muted);
    line-height: 1.5;
    margin: 0;
}
.sidebar-cta {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px 16px;
    background: rgba(223, 160, 50, 0.12);
    border: 1px solid rgba(223, 160, 50, 0.25);
    border-radius: var(--buzz-radius-sm);
    color: var(--buzz-gold);
    font-size: 0.8125rem;
    font-weight: 600;
    transition: all 0.3s ease;
}
.sidebar-cta:hover {
    background: rgba(223, 160, 50, 0.2);
    border-color: rgba(223, 160, 50, 0.4);
    transform: translateY(-1px);
}
/* A-grade iter-4 (Jun 18): light-theme contrast fix. The default
   color: var(--buzz-gold) = #C8912E reads at only 2.40:1 on the gold-tinted
   cream button background (WCAG AA fail). Darken the gold to a brass that
   clears 4.5:1 both on the tint AND plain cream. (The teal "Claim yours"
   email CTA sets its own inline #fff-on-teal and is unaffected.) */
[data-theme="light"] .sidebar-cta:not([style*="color"]) {
    color: #855F00;
}

/* BUG-131 (May 18): Discreet inline Submit link inside the sidebar UmmahPass
   card — replaces the top-nav Submit pill so news stays visually primary.
   Teal secondary action, smaller than .sidebar-cta. */
.sidebar-submit-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(20, 184, 166, 0.10);
    border: 1px solid rgba(20, 184, 166, 0.22);
    border-radius: var(--buzz-radius-pill);
    color: var(--buzz-teal);
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s var(--buzz-ease);
}
.sidebar-submit-link:hover {
    background: rgba(20, 184, 166, 0.18);
    border-color: rgba(20, 184, 166, 0.38);
}

/* UmmahPass sidebar CTA - gold accent */
.sidebar-ummahpass {
    border-color: rgba(223, 160, 50, 0.2);
    position: relative;
    overflow: hidden;
}
.sidebar-ummahpass::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--buzz-gold), transparent);
}

/* ===== SUBMIT FORM ===== */
.submit-section {
    max-width: 680px;
    margin: 0 auto;
    padding: 2rem 1rem;
    position: relative;
    z-index: 2;
}
.submit-form {
    background: var(--buzz-card-bg);
    border: 1px solid var(--buzz-card-border);
    border-radius: var(--buzz-radius);
    padding: 1.5rem;
}
.submit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}
.submit-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--buzz-heading);
}

/* Type toggle */
.type-toggle {
    display: inline-flex;
    background: rgba(15, 26, 51, 0.6);
    border: 1px solid var(--buzz-border-alpha);
    border-radius: var(--buzz-radius-pill);
    padding: 3px;
    gap: 2px;
}
.type-toggle-btn {
    padding: 6px 16px;
    border-radius: var(--buzz-radius-pill);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--buzz-text-muted);
    transition: all 0.25s ease;
}
.type-toggle-btn.active {
    background: rgba(223, 160, 50, 0.15);
    color: var(--buzz-gold);
}
.type-toggle-btn:hover:not(.active) { color: var(--buzz-text); }

/* Form elements */
.form-group { margin-bottom: 1rem; }
.form-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--buzz-text-muted);
    margin-bottom: 0.375rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.form-input, .form-textarea {
    width: 100%;
    padding: 10px 14px;
    background: rgba(6, 11, 24, 0.6);
    border: 1px solid var(--buzz-border-alpha);
    border-radius: var(--buzz-radius-sm);
    color: var(--buzz-text);
    font-size: 0.9375rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-input:focus, .form-textarea:focus {
    border-color: rgba(223, 160, 50, 0.4);
    box-shadow: 0 0 0 3px rgba(223, 160, 50, 0.08);
}
.form-input::placeholder, .form-textarea::placeholder {
    color: var(--buzz-text-dim);
}
.form-textarea {
    min-height: 140px;
    resize: vertical;
    line-height: 1.5;
}

/* Category picker (Jun 17 — submit-form topic <select>). Shares the
   .form-input shell but adds a custom caret and removes the native
   appearance so it reads consistently across dark + light themes. */
.form-select {
    width: 100%;
    padding: 10px 38px 10px 14px;
    background-color: rgba(6, 11, 24, 0.6);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23DFA032' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    border: 1px solid var(--buzz-border-alpha);
    border-radius: var(--buzz-radius-sm);
    color: var(--buzz-text);
    font-size: 0.9375rem;
    line-height: 1.4;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-select:focus {
    outline: none;
    border-color: rgba(223, 160, 50, 0.4);
    box-shadow: 0 0 0 3px rgba(223, 160, 50, 0.08);
}
/* Native option list inherits the OS surface — force a readable dark surface
   so options aren't white-on-white on some platforms. */
.form-select option {
    background: #0D1117;
    color: #E6E9EF;
}

/* URL preview card */
.url-preview {
    background: rgba(6, 11, 24, 0.5);
    border: 1px solid var(--buzz-border-alpha);
    border-radius: var(--buzz-radius-sm);
    padding: 0.875rem;
    display: flex;
    gap: 0.875rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}
.url-preview-thumb {
    width: 72px;
    height: 72px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--buzz-deep);
}
.url-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.url-preview-info { flex: 1; min-width: 0; }
.url-preview-domain {
    font-size: 0.6875rem;
    color: var(--buzz-gold);
    margin-bottom: 4px;
}
.url-preview-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--buzz-heading);
    line-height: 1.3;
    margin-bottom: 4px;
}
.url-preview-desc {
    font-size: 0.75rem;
    color: var(--buzz-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Submit button */
.submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--buzz-gold), var(--buzz-gold-dim));
    color: #060B18;
    font-weight: 700;
    font-size: 0.9375rem;
    border-radius: var(--buzz-radius-sm);
    transition: all 0.3s var(--buzz-ease);
    box-shadow: 0 4px 16px rgba(223, 160, 50, 0.2);
}
.submit-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(223, 160, 50, 0.3);
}
.submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Error / success messages */
.form-error {
    padding: 10px 14px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: var(--buzz-radius-sm);
    color: #F87171;
    font-size: 0.8125rem;
    margin-bottom: 1rem;
}
.form-success {
    padding: 10px 14px;
    background: rgba(20, 184, 166, 0.1);
    border: 1px solid rgba(20, 184, 166, 0.25);
    border-radius: var(--buzz-radius-sm);
    color: var(--buzz-teal);
    font-size: 0.8125rem;
    margin-bottom: 1rem;
}
.form-hint {
    font-size: 0.75rem;
    color: var(--buzz-text-dim);
    margin-top: 4px;
}

/* Fetching meta spinner */
.meta-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    color: var(--buzz-text-muted);
    font-size: 0.8125rem;
}
.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(223, 160, 50, 0.2);
    border-top-color: var(--buzz-gold);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== SEARCH ===== */
.buzz-search {
    width: 100%;
    padding: 10px 14px 10px 40px;
    background: rgba(6, 11, 24, 0.6);
    border: 1px solid var(--buzz-border-alpha);
    border-radius: var(--buzz-radius-pill);
    color: var(--buzz-text);
    font-size: 0.9375rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.buzz-search:focus {
    border-color: rgba(223, 160, 50, 0.4);
    box-shadow: 0 0 0 3px rgba(223, 160, 50, 0.08);
}
.buzz-search::placeholder { color: var(--buzz-text-dim); }
.search-wrap {
    position: relative;
}
.search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--buzz-text-dim);
    pointer-events: none;
}
.buzz-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: rgba(223, 160, 50, 0.08);
    color: var(--buzz-text-muted);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.buzz-search-clear:hover {
    color: var(--buzz-gold);
    background: rgba(223, 160, 50, 0.18);
}
.buzz-search-clear svg {
    width: 14px;
    height: 14px;
}
/* Bump to 44x44 on touch so iOS minimum tap target (Creative Director flag Apr 19) */
@media (max-width: 768px) {
    .buzz-search-clear { width: 44px; height: 44px; right: 4px; }
}
.buzz-search {
    padding-right: 42px !important;
}
.search-section {
    max-width: 680px;
    margin: 0 auto;
    padding: 2rem 1rem;
    position: relative;
    z-index: 2;
}
.search-section .search-wrap {
    margin-bottom: 1.5rem;
}
/* BUG-132 (May 18): on desktop (>=768px), the .header-search-wrap input is
   already visible in the header. The in-page .search-section search bar is
   redundant on the homepage's search view — hide it to avoid the duplicate.
   On the standalone /search/ page there is no header-search-wrap, so we
   keep the in-page bar via a body-class opt-out. */
@media (min-width: 768px) {
    body:not(.search-page) .search-section > .search-wrap { display: none; }
}

/* ===== PROFILE ===== */
.profile-section {
    max-width: 680px;
    margin: 0 auto;
    padding: 2rem 1rem;
    position: relative;
    z-index: 2;
}
.profile-card {
    background: var(--buzz-card-bg);
    border: 1px solid var(--buzz-card-border);
    border-radius: var(--buzz-radius);
    padding: 2rem;
    text-align: center;
}
.profile-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--buzz-heading);
    margin-bottom: 0.25rem;
}
.profile-screenname {
    font-size: 1rem;
    color: var(--buzz-gold);
    margin-bottom: 0.25rem;
}
.profile-status {
    font-size: 0.8125rem;
    color: var(--buzz-text-muted);
    margin-bottom: 1rem;
}
.profile-stat-row {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(26, 39, 68, 0.5);
}
.profile-stat {
    text-align: center;
}
.profile-stat-val {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--buzz-heading);
}
.profile-stat-label {
    font-size: 0.6875rem;
    color: var(--buzz-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ===== MOBILE BOTTOM NAV ===== */
.mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    display: flex;
    background: rgba(6, 11, 24, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(26, 39, 68, 0.6);
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.mobile-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 10px 4px;
    min-height: 52px;
    color: var(--buzz-text-dim);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: color 0.2s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    text-decoration: none;
    position: relative;
}
.mobile-nav-item svg {
    width: 22px;
    height: 22px;
    transition: all 0.2s ease;
}
.mobile-nav-item.active {
    color: var(--buzz-gold);
}
.mobile-nav-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 25%;
    right: 25%;
    height: 2px;
    background: var(--buzz-gold);
    border-radius: 0 0 2px 2px;
}
.mobile-nav-item:hover:not(.active) { color: var(--buzz-text-muted); }

/* Desktop: hide mobile nav */
@media (min-width: 768px) {
    .mobile-nav { display: none; }
    body { padding-bottom: 0; }
}

/* ===== LOADING / EMPTY STATES ===== */
.feed-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 2.5rem;
    color: var(--buzz-text-muted);
    font-size: 0.875rem;
}
.feed-loading .spinner {
    width: 22px;
    height: 22px;
}
/* IntersectionObserver sentinel for infinite scroll (Apr 29).
   DEPRECATED May 4, 2026 — replaced by .feed-loadmore-btn (HYBRID scroll).
   Class kept for any stale CSS references; the element is no longer in DOM. */
.feed-sentinel {
    height: 1px;
    width: 100%;
    margin: 0;
    pointer-events: none;
}
/* "Load more" button (May 4, 2026 - HYBRID scroll).
   Full-width on mobile, centered/auto on desktop. Gold-bordered ghost button
   with subtle fill on hover; matches existing .feed-end-link gold accent. */
.feed-loadmore-wrap {
    display: flex;
    justify-content: center;
    padding: 1.5rem 0 0.75rem;
    margin: 0.25rem 0 1rem;
}
.feed-loadmore-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    background: rgba(223, 160, 50, 0.08);
    color: var(--buzz-gold);
    border: 1px solid rgba(223, 160, 50, 0.4);
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
    min-width: 200px;
    -webkit-tap-highlight-color: transparent;
}
.feed-loadmore-btn:hover {
    background: rgba(223, 160, 50, 0.18);
    border-color: rgba(223, 160, 50, 0.7);
}
.feed-loadmore-btn:active { transform: translateY(1px); }
.feed-loadmore-btn:disabled,
.feed-loadmore-btn[aria-busy="true"] {
    opacity: 0.6;
    cursor: wait;
}
.feed-loadmore-icon {
    flex-shrink: 0;
    opacity: 0.75;
}
@media (max-width: 640px) {
    .feed-loadmore-btn {
        width: 100%;
        max-width: 360px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .feed-loadmore-btn { transition: none; }
    .feed-loadmore-btn:active { transform: none; }
}
/* "All caught up" terminator (Apr 29). Replaces the sentinel once the
   server confirms has_more=false. Subtle gold accent + back-to-top link. */
.feed-end {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    margin: 0.5rem 0 1.5rem;
    color: var(--buzz-text-muted);
    font-size: 0.9375rem;
    text-align: center;
    flex-wrap: wrap;
}
.feed-end-icon {
    font-size: 1rem;
    line-height: 1;
}
.feed-end-text { color: var(--buzz-text); }
.feed-end-link {
    color: var(--buzz-gold);
    text-decoration: none;
    font-weight: 500;
    margin-left: 0.25rem;
    -webkit-tap-highlight-color: transparent;
}
.feed-end-link:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
    .feed-end { transition: none !important; animation: none !important; }
}
.feed-empty {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 3.5rem 1.5rem;
    color: var(--buzz-text-muted);
    background: var(--buzz-card-bg);
    border: 1px solid var(--buzz-card-border);
    border-radius: var(--buzz-radius);
}
/* Faint honeycomb texture behind the empty state (v163). <=7% opacity so it reads
   as atmosphere, never competes with content. Gold on dark, brass on cream. */
.feed-empty-honeycomb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    color: var(--buzz-gold);
    opacity: 0.07;
}
[data-theme="light"] .feed-empty-honeycomb {
    color: #C8912E;
    opacity: 0.06;
}
/* Geometric bee mark (faceless) for the quiet feed. */
.feed-empty-bee {
    position: relative;
    z-index: 1;
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 auto 1.25rem;
    color: var(--buzz-gold);
}
[data-theme="light"] .feed-empty-bee {
    color: #C8912E;
}
.feed-empty-arabesque {
    display: block;
    width: 96px;
    height: 96px;
    margin: 0 auto 1.5rem;
    opacity: 0.75;
}
.feed-empty-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 1.25rem;
    color: var(--buzz-text-dim);
    opacity: 0.6;
}
.feed-empty-text {
    position: relative;
    z-index: 1;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--buzz-text);
    margin-bottom: 0.5rem;
}
.feed-empty-sub {
    position: relative;
    z-index: 1;
    font-size: 0.8125rem;
    color: var(--buzz-text-dim);
    line-height: 1.5;
    max-width: 320px;
    margin: 0 auto;
}
.feed-empty-cta {
    position: relative;
    z-index: 1;
    display: inline-block;
    margin-top: 1.25rem;
    padding: 0.5rem 1.25rem;
    background: rgba(223, 160, 50, 0.12);
    border: 1px solid rgba(223, 160, 50, 0.3);
    border-radius: 9999px;
    color: var(--buzz-gold);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.feed-empty-cta:hover {
    background: rgba(223, 160, 50, 0.2);
    border-color: rgba(223, 160, 50, 0.5);
}

/* ===== FEED TRANSPORT-ERROR BANNER (Jun 12, Mehek BUG) =====
   Non-destructive notice shown when a refetch hits the rate limit (429) or a
   transient server error. Sits above the feed; existing posts stay visible. */
.feed-error-banner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1rem;
    padding: 0.7rem 0.9rem;
    background: rgba(223, 160, 50, 0.08);
    border: 1px solid rgba(223, 160, 50, 0.28);
    border-radius: 12px;
    color: var(--buzz-gold);
    font-size: 0.8125rem;
    line-height: 1.4;
}
.feed-error-banner svg { flex: 0 0 auto; opacity: 0.9; }
.feed-error-text { flex: 1 1 auto; color: #E6D2A6; }
.feed-error-retry {
    flex: 0 0 auto;
    padding: 0.35rem 0.8rem;
    background: rgba(223, 160, 50, 0.14);
    border: 1px solid rgba(223, 160, 50, 0.35);
    border-radius: 9999px;
    color: var(--buzz-gold);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.feed-error-retry:hover {
    background: rgba(223, 160, 50, 0.24);
    border-color: rgba(223, 160, 50, 0.55);
}

/* ===== GOLD DIVIDER ===== */
.gold-line {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(223, 160, 50, 0.15), transparent);
    margin: 0 auto;
}

/* ===== FOOTER — legacy link strip (kept for /profile, /search) ===== */
.buzz-footer {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 2rem 1rem;
    border-top: 1px solid rgba(26, 39, 68, 0.3);
    margin-top: 2rem;
}
.buzz-footer-text {
    font-size: 0.6875rem;
    color: var(--buzz-text-dim);
}
.buzz-footer a {
    color: var(--buzz-gold-dim);
    transition: color 0.3s ease;
}
.buzz-footer a:hover { color: var(--buzz-gold); }

/* ===== ECOSYSTEM FOOTER — flywheel-focused (Apr 21, 2026) ===== */
.ub-eco-footer {
    position: relative;
    z-index: 2;
    margin-top: 3rem;
    padding: 3rem 1.5rem 1.5rem;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.25));
    border-top: 1px solid rgba(223,160,50,0.12);
}
.ub-eco-wrap {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1.1fr;
    gap: 2.25rem 2.5rem;
    align-items: start;
}
.ub-eco-col { min-width: 0; }
.ub-eco-brand {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: rgba(255,255,255,0.92);
    letter-spacing: -0.01em;
    margin-bottom: 0.35rem;
}
.ub-eco-tagline {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.58);
    font-style: italic;
    margin-bottom: 0.6rem;
    line-height: 1.4;
}
.ub-eco-blurb {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.48);
    line-height: 1.5;
    margin-bottom: 0.75rem;
}
.ub-eco-trust {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.38);
    line-height: 1.75;
}
.ub-eco-trust li::before {
    content: '✓';
    color: rgba(223,160,50,0.55);
    margin-right: 0.4rem;
}
.ub-eco-heading {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    margin: 0 0 0.9rem 0;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(223,160,50,0.15);
}
.ub-eco-heading-gold { color: #E8C252; border-bottom-color: rgba(223,160,50,0.35); }
.ub-eco-link {
    display: block;
    padding: 0.4rem 0;
    text-decoration: none;
    color: rgba(255,255,255,0.8);
    transition: color 0.2s ease, transform 0.2s ease;
}
.ub-eco-link:hover { color: #E8C252; transform: translateX(2px); }
.ub-eco-link-title {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.1rem;
}
.ub-eco-link-desc {
    display: block;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.45);
    line-height: 1.4;
}
.ub-eco-link:hover .ub-eco-link-desc { color: rgba(255,255,255,0.6); }

/* Primary CTA card */
.ub-eco-cta {
    background: linear-gradient(135deg, rgba(223,160,50,0.08), rgba(223,160,50,0.03));
    border: 1px solid rgba(223,160,50,0.2);
    border-radius: 14px;
    padding: 1.25rem 1.1rem;
}
.ub-eco-cta-headline {
    font-size: 0.95rem;
    font-weight: 700;
    color: rgba(255,255,255,0.95);
    line-height: 1.3;
    margin: 0 0 0.35rem 0;
}
.ub-eco-cta-sub {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.55);
    line-height: 1.5;
    margin-bottom: 0.9rem;
}
.ub-eco-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    background: linear-gradient(135deg, #DFA032, #C8912E);
    color: #1a1208;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(223,160,50,0.25);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ub-eco-cta-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(223,160,50,0.4);
    color: #1a1208;
}
.ub-eco-cta-secondary {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    transition: color 0.2s ease;
}
.ub-eco-cta-secondary:hover { color: #E8C252; }

/* Bottom bar */
.ub-eco-bottom {
    max-width: 1200px;
    margin: 2.5rem auto 0;
    padding-top: 1.5rem;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.ub-eco-bismillah {
    font-family: 'Amiri', 'Scheherazade New', serif;
    font-size: 1.1rem;
    color: rgba(223,160,50,0.5);
    letter-spacing: 0.02em;
    margin-bottom: 0.9rem;
    direction: rtl;
}
.ub-eco-meta {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.35);
    line-height: 1.7;
    margin: 0;
}
.ub-eco-meta a { color: rgba(223,160,50,0.55); text-decoration: none; }
.ub-eco-meta a:hover { color: #E8C252; }

/* Mobile stack */
@media (max-width: 960px) {
    .ub-eco-wrap { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
    .ub-eco-cta { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .ub-eco-footer { padding: 2rem 1rem 1rem; }
    .ub-eco-wrap { grid-template-columns: 1fr; gap: 1.5rem; }
    .ub-eco-cta { grid-column: auto; }
}

/* Light-mode override */
[data-theme="light"] .ub-eco-footer {
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.025));
    border-top-color: rgba(200,145,46,0.18);
}
[data-theme="light"] .ub-eco-brand { color: #2C2417; }
[data-theme="light"] .ub-eco-tagline { color: rgba(44,36,23,0.7); }
[data-theme="light"] .ub-eco-blurb { color: rgba(44,36,23,0.55); }
[data-theme="light"] .ub-eco-trust { color: rgba(44,36,23,0.5); }
[data-theme="light"] .ub-eco-heading { color: rgba(44,36,23,0.75); border-bottom-color: rgba(200,145,46,0.25); }
[data-theme="light"] .ub-eco-heading-gold { color: #C8912E; border-bottom-color: rgba(200,145,46,0.4); }
[data-theme="light"] .ub-eco-link { color: rgba(44,36,23,0.8); }
[data-theme="light"] .ub-eco-link:hover { color: #C8912E; }
[data-theme="light"] .ub-eco-link-desc { color: rgba(44,36,23,0.5); }
/* May 4 audit (Mehek): on hover the dark-mode rule at line 1457 turned desc
   text near-white, making it disappear on the light cream background. */
[data-theme="light"] .ub-eco-link:hover .ub-eco-link-desc { color: rgba(44,36,23,0.7); }
[data-theme="light"] .ub-eco-cta { background: linear-gradient(135deg, rgba(200,145,46,0.08), rgba(200,145,46,0.02)); border-color: rgba(200,145,46,0.25); }
[data-theme="light"] .ub-eco-cta-headline { color: #2C2417; }
[data-theme="light"] .ub-eco-cta-sub { color: rgba(44,36,23,0.55); }
[data-theme="light"] .ub-eco-cta-secondary { color: rgba(44,36,23,0.55); }
[data-theme="light"] .ub-eco-cta-secondary:hover { color: #C8912E; }
[data-theme="light"] .ub-eco-bottom { border-top-color: rgba(44,36,23,0.1); }
[data-theme="light"] .ub-eco-bismillah { color: rgba(200,145,46,0.6); }
[data-theme="light"] .ub-eco-meta { color: rgba(44,36,23,0.45); }
[data-theme="light"] .ub-eco-meta a { color: rgba(200,145,46,0.65); }

/* May 14 (Mehek #10): ecosystem context blurb in footer CTA column. */
.ub-eco-about-blurb {
    margin-top: 1rem;
    font-size: 0.75rem;
    color: var(--buzz-text-dim);
    line-height: 1.5;
    border-top: 1px solid rgba(26, 39, 68, 0.4);
    padding-top: 0.75rem;
}
.ub-eco-about-link {
    color: var(--buzz-teal);
    text-decoration: none;
    transition: opacity 0.2s ease;
}
.ub-eco-about-link:hover { opacity: 0.8; }
[data-theme="light"] .ub-eco-about-blurb { color: #8a7146; border-top-color: rgba(196,162,101,0.25); }
[data-theme="light"] .ub-eco-about-link { color: var(--buzz-teal); }

/* ===== BACK LINK ===== */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    color: var(--buzz-text-muted);
    margin-bottom: 1.25rem;
    transition: color 0.2s ease;
}
.back-link:hover { color: var(--buzz-gold); }
.back-link svg { width: 16px; height: 16px; }

/* ===== TOAST / NOTIFICATION ===== */
.buzz-toast {
    position: fixed;
    bottom: 84px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(15, 26, 51, 0.95);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(223, 160, 50, 0.25);
    border-radius: var(--buzz-radius-pill);
    padding: 10px 20px;
    color: var(--buzz-gold);
    font-size: 0.8125rem;
    font-weight: 500;
    z-index: 300;
    opacity: 0;
    transition: all 0.35s var(--buzz-ease);
    pointer-events: none;
    white-space: nowrap;
}
.buzz-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ===== RESPONSIVE ===== */
@media (min-width: 768px) {
    /* May 14 (Mehek #1): reduce desktop hero top padding — promo+ad+header
       already consume ~150px before the hero. 1.25rem top is enough breathing room. */
    .hero-section {
        padding: 1.25rem 1rem 2rem;
    }
    .card-content {
        padding: 0.875rem 1rem;
    }
    .card-thumb {
        width: 100px;
        min-height: 100px;
        margin: 0.625rem 0.625rem 0.625rem 0;
    }
    .vote-col {
        padding: 0.625rem 0.6rem;
        min-width: 60px;
    }
}

@media (max-width: 480px) {
    .buzz-header-inner { height: 48px; }
    .buzz-tagline { display: none; }
    .buzz-district-badge { display: none; }
    .card-thumb {
        width: 64px;
        min-height: 64px;
    }
    .vote-col {
        min-width: 56px;
        padding: 0.5rem 0.375rem;
    }
    .card-content { padding: 0.625rem 0.5rem; }
    .card-title { font-size: 0.875rem; }
    .hero-section {
        padding: 2rem 1rem 1.5rem;
    }
    .hero-cta {
        padding: 12px 24px;
        font-size: 0.875rem;
        width: 100%;
        justify-content: center;
        max-width: 280px;
    }
}

/* ===== Mobile audit (Abdullah May 9) =====
   Items 2/3/5/6: condense top banner to single line; hide tagline + district
   badge across the whole mobile range (was 480-only, leaked into 481-768);
   give the hero proper full-width breathing room; bleed the filter pill nav
   to viewport edges so the rightmost pill is reachable instead of clipped. */
@media (max-width: 768px) {
    /* Item 3: kill the long tagline + district badge across all mobile sizes
       (was only hidden ≤480, leaked into the 481-767 cramped tablet range). */
    .buzz-tagline { display: none; }
    .buzz-district-badge { display: none; }

    /* Item 2/3/4: slim banner to ~44px, prevent text truncation on mobile.
       May 14 (Mehek): wrap the text span instead of ellipsis-truncating it —
       the old ellipsis approach cut off at "Y..." which looks broken. Use a
       shorter message (text set in HTML) that fits in 2 lines max at 12px. */
    /* A-grade iter-4 (Jun 18): the mobile banner rendered at ~16px text height
       (cramped, near-unreadable). Give it an ergonomic, readable row: larger
       font + vertical padding, and lift the desktop 52px max-height cap so the
       single-line message + 44px dismiss target are not clipped. */
    #umg-supporter-banner {
        font-size: 13px !important;
        padding: 9px 12px !important;
        line-height: 1.35 !important;
        max-height: 60px;
    }
    #umg-supporter-banner > div {
        gap: 8px !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }
    /* Hide moon emoji and code block — too wide on mobile */
    #umg-supporter-banner > div > span:first-of-type {
        display: none !important;
    }
    #umg-supporter-banner code {
        display: none !important;
    }
    /* Let the text shrink gracefully — no ellipsis, allow wrapping to 2 lines.
       Jun 23 (Suhaib/Mehek audit — "Upgrade to Ummah One overlaps / button cut
       off on mobile"): the .umg-banner-text span carries INLINE
       white-space:nowrap;overflow:hidden;text-overflow:ellipsis, which a plain
       stylesheet rule cannot beat → the text stayed nowrap, ran 393px wide on a
       390px screen, and shoved the "Become a member" CTA off the right edge.
       Force-override the inline declarations so the copy wraps and the CTA stays
       on-screen. */
    #umg-supporter-banner > div > span:nth-of-type(2) {
        flex: 1 1 auto;
        min-width: 0;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        line-height: 1.3;
    }
    #umg-supporter-banner a[href] {
        flex-shrink: 0;
        font-size: 12px !important;
        padding: 7px 11px !important;
        white-space: nowrap;
    }
    /* Dismiss button keeps the 44×44 tap target on mobile too (WCAG 2.5.5);
       negative margins keep it from inflating the banner row. */
    #umg-supporter-banner button.umg-banner-dismiss {
        flex-shrink: 0;
        min-width: 44px;
        min-height: 44px;
        margin: -6px -6px -6px 0 !important;
        padding: 0 !important;
    }

    /* Item 6: filter pills must reach to the screen edges so users can scroll
       to the last pill without it being clipped under the parent's max-width.
       Negative margin punches through the 1rem layout padding; padding inside
       restores a touchable inset but lets the row scroll edge-to-edge. */
    .source-pills {
        margin-left: -1rem;
        margin-right: -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
        max-width: none;
        justify-content: flex-start;
    }
    /* Subtle gradient edges hint that there's more content to scroll. */
    .source-pills::after {
        content: '';
        position: sticky;
        right: 0;
        flex: 0 0 12px;
        align-self: stretch;
        pointer-events: none;
    }
}

/* Item 5: hero polish on the narrowest phones (Galaxy S8 / iPhone SE).
   May 14 (Mehek #1): further reduce top padding on mobile — banner+header already
   compress the fold, extra whitespace pushes the feed below the fold. */
@media (max-width: 480px) {
    .hero-section {
        padding: 0.875rem 1rem 1.25rem;
        margin: 0 -0.5rem;
    }
    .hero-title {
        font-size: clamp(1.55rem, 7.5vw, 2rem);
        padding: 0 0.25rem;
    }
    .hero-sub {
        font-size: 0.9375rem;
        padding: 0 0.5rem;
        margin-bottom: 1.25rem;
    }
    /* Item 4 reinforcement: ensure the auth-block buttons in the right cluster
       never wrap or get hidden on the narrowest viewports. Both Sign In + the
       theme toggle are present in .buzz-header-auth — keep them tight. */
    .buzz-header-auth { gap: 0.5rem; }
    .buzz-btn-signin {
        padding: 6px 12px;
        font-size: 0.75rem;
    }
    .buzz-btn-signin svg { width: 14px; height: 14px; }
}

/* Card-clickable affordance (Abdullah audit Item 7). The whole .buzz-card now
   acts as a link — keep the existing internal interactive elements (vote
   column, action buttons, byline link, save heart) usable via @click.stop
   on each, but make the card itself feel tappable. */
.buzz-card-clickable { cursor: pointer; }
.buzz-card-clickable:focus-visible {
    outline: 2px solid var(--buzz-gold);
    outline-offset: 2px;
}

/* ===== SIDEBAR LINKS ===== */
.sidebar-link {
    font-size: 0.8125rem;
    color: var(--buzz-teal);
    transition: opacity 0.2s ease, color 0.2s ease;
    text-decoration: none;
}
.sidebar-link:hover {
    opacity: 0.8;
    color: var(--buzz-teal-dark);
}

/* ===== SKELETON LOADING ===== */
.skeleton-card {
    display: flex;
    align-items: stretch;
    background: var(--buzz-card-bg);
    border: 1px solid var(--buzz-card-border);
    border-radius: var(--buzz-radius);
    margin-bottom: 0.75rem;
    overflow: hidden;
    padding: 1rem;
    gap: 0.75rem;
}
.skeleton-line {
    background: linear-gradient(90deg, rgba(26, 39, 68, 0.4) 0%, rgba(26, 39, 68, 0.7) 50%, rgba(26, 39, 68, 0.4) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.8s ease-in-out infinite;
    border-radius: 4px;
}
.skeleton-vote {
    width: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.skeleton-vote-arrow {
    width: 18px;
    height: 18px;
    border-radius: 3px;
}
.skeleton-vote-num {
    width: 20px;
    height: 12px;
}
.skeleton-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.skeleton-title {
    height: 16px;
    width: 80%;
}
.skeleton-desc {
    height: 12px;
    width: 60%;
}
.skeleton-meta {
    height: 10px;
    width: 40%;
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .starfield, .grain, .cursor-glow { display: none !important; }
    .reveal { opacity: 1; transform: none; }
}

/* =================================================================
   LIGHT MODE OVERRIDES
   Stubborn hardcoded dark rgba() values elsewhere in this stylesheet
   are replaced here via `[data-theme="light"] .selector` rules so the
   dark defaults stay intact (zero regression risk). Paired with the
   token overrides at the top of the file.
   Apr 19 — Alisha requested light mode.
   ================================================================= */
[data-theme="light"] {
    /* Readable body text on cream */
    color: var(--buzz-text);
}
[data-theme="light"] body { background: var(--buzz-void); }

/* Scrollbar — cream track, brass thumb */
[data-theme="light"] ::-webkit-scrollbar-track { background: var(--buzz-deep); }
[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--buzz-border), var(--buzz-gold));
}

/* Feed & card surfaces */
[data-theme="light"] .buzz-card,
[data-theme="light"] .feed-empty,
[data-theme="light"] .hero-section,
[data-theme="light"] .sidebar-card,
[data-theme="light"] .post-detail-card,
[data-theme="light"] .comment-card,
[data-theme="light"] .comment-login-prompt,
[data-theme="light"] .submit-form,
[data-theme="light"] .profile-card {
    background: var(--buzz-card-bg) !important;
    border-color: var(--buzz-card-border) !important;
}

/* Inputs, textareas */
[data-theme="light"] .buzz-search,
[data-theme="light"] .form-input,
[data-theme="light"] .form-textarea,
[data-theme="light"] .comment-textarea {
    background: var(--buzz-input-bg) !important;
    border-color: var(--buzz-card-border) !important;
    color: var(--buzz-text);
}
[data-theme="light"] .buzz-search::placeholder,
[data-theme="light"] .form-input::placeholder,
[data-theme="light"] .form-textarea::placeholder,
[data-theme="light"] .comment-textarea::placeholder { color: var(--buzz-text-dim); }

/* Category <select> — light theme (Jun 17) */
[data-theme="light"] .form-select {
    background-color: var(--buzz-input-bg) !important;
    border-color: var(--buzz-card-border) !important;
    color: var(--buzz-text);
}
[data-theme="light"] .form-select option {
    background: #FFFFFF;
    color: #1A1A1A;
}

/* Vote column + buttons */
[data-theme="light"] .vote-col,
[data-theme="light"] .vote-btn-detail,
[data-theme="light"] .card-action-btn,
[data-theme="light"] .comment-action-btn,
[data-theme="light"] .buzz-btn-logout {
    color: var(--buzz-text-muted);
}
[data-theme="light"] .vote-btn-detail {
    background: var(--buzz-input-bg);
    border-color: var(--buzz-card-border);
}
[data-theme="light"] .vote-btn-detail.voted,
[data-theme="light"] .vote-col.voted {
    color: var(--buzz-gold);
    /* Voted highlight now lives on the inner upvote box (.vote-arrow/.vote-score),
       not the whole column — keep the column transparent so the box reads clean. */
}

/* Brass-on-brass CTAs need dark text against brass in light mode too.
   BUG-318 (Jun 17): was #FFFFFF on the gold gradient = 2.78:1 (WCAG FAIL).
   Dark ink #060B18 on the brass gradient = 4.85-7.06:1 (passes AA at both
   ends of the C8912E→A6751F gradient), matching the dark-theme .submit-btn
   rule which already uses #060B18. */
[data-theme="light"] .comment-submit-btn,
[data-theme="light"] .submit-btn,
[data-theme="light"] .hero-cta {
    color: #060B18;
}

/* Mobile bottom nav */
[data-theme="light"] .mobile-nav {
    background: rgba(250, 247, 242, 0.95) !important;
    border-top-color: var(--buzz-card-border) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
[data-theme="light"] .mobile-nav-item { color: var(--buzz-text-muted); }
[data-theme="light"] .mobile-nav-item.active { color: var(--buzz-gold); }

/* Search clear button */
[data-theme="light"] .buzz-search-clear {
    background: var(--buzz-gold-tint-strong);
    color: var(--buzz-text-muted);
}
[data-theme="light"] .buzz-search-clear:hover {
    background: var(--buzz-gold-glow);
    color: var(--buzz-gold);
}

/* Desktop Submit pill — teal on cream needs darker AA contrast */
[data-theme="light"] .buzz-btn-submit {
    background: rgba(13, 148, 136, 0.12);
    border-color: rgba(13, 148, 136, 0.38);
    color: var(--buzz-teal-dark);
}
[data-theme="light"] .buzz-btn-submit:hover {
    background: rgba(13, 148, 136, 0.2);
    border-color: rgba(13, 148, 136, 0.55);
}

/* Submit-form type toggle (Link / Text picker) — dark navy pill on cream reads broken */
[data-theme="light"] .type-toggle {
    background: var(--buzz-deep) !important;
    border-color: var(--buzz-card-border) !important;
}
[data-theme="light"] .type-toggle-btn { color: var(--buzz-text-muted); }
[data-theme="light"] .type-toggle-btn.active {
    background: var(--buzz-surface) !important;
    color: var(--buzz-gold);
}

/* "Copied!" toast — near-opaque navy reads wrong on cream */
[data-theme="light"] .buzz-toast {
    background: var(--buzz-surface) !important;
    border-color: rgba(200, 145, 46, 0.35) !important;
    color: var(--buzz-gold);
    box-shadow: 0 6px 18px rgba(44, 36, 23, 0.12);
}

/* Vote column needs its own override — the shared cards rule uses card-bg */
[data-theme="light"] .vote-col {
    background: transparent;
    border-right: 1px solid var(--buzz-border);
}

/* Feed divider on light mode — darker warm border */
[data-theme="light"] .buzz-card { border-color: var(--buzz-border) !important; }

/* Source badges + metadata pills */
[data-theme="light"] .domain-badge,
[data-theme="light"] .source-badge,
[data-theme="light"] .text-badge,
[data-theme="light"] .district-badge,
[data-theme="light"] .buzz-district-badge {
    background: var(--buzz-gold-tint-strong) !important;
    color: var(--buzz-text-muted) !important;
    border-color: var(--buzz-card-border) !important;
}

/* Skeleton shimmer: warm version */
[data-theme="light"] .skeleton {
    background: linear-gradient(90deg, rgba(232, 225, 212, 0.35) 0%, rgba(232, 225, 212, 0.7) 50%, rgba(232, 225, 212, 0.35) 100%) !important;
}

/* Gold divider line — tighter contrast on cream */
[data-theme="light"] .gold-line {
    background: linear-gradient(90deg, transparent, rgba(200, 145, 46, 0.5), transparent);
}

/* Theme toggle button itself */
.buzz-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: var(--buzz-gold-tint-strong);
    border: 1px solid var(--buzz-card-border);
    border-radius: 50%;
    color: var(--buzz-text-muted);
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.buzz-theme-toggle:hover {
    color: var(--buzz-gold);
    background: var(--buzz-gold-glow);
    transform: translateY(-1px);
}
.buzz-theme-toggle svg { width: 16px; height: 16px; }
@media (max-width: 480px) {
    .buzz-theme-toggle { width: 30px; height: 30px; }
    .buzz-theme-toggle svg { width: 14px; height: 14px; }
}

/* ===== MAN AD SLOTS ===== */
.ub-ad {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow: hidden;
    background: transparent;
}
.ub-ad-728 { display: none; }
@media (min-width: 768px) {
    /* BUG-065 (May 18): trimmed margin 0.75rem→0.25rem to tighten navbar→hero stack.
       Jun 23: column flow (like .ub-ad-300/.ub-ad-320) so the right-aligned
       "Ads by Muslim Ad Network" attribution chip flows BELOW the <ins> instead
       of sitting beside it and getting clipped by overflow:hidden — the chip is
       always-visible per the CLAUDE.md amanah rule. */
    .ub-ad-728 { display: flex; flex-direction: column; align-items: stretch; min-height: 90px; margin: 0.25rem 0; }
}
/* May 5 2026 (Ilma A48): tightened from 1rem to 0.75rem so the post-body→ad→
   comments stack reads as one continuous flow instead of three separated cards.
   Pairs with .comments-section margin tightening in /post/index.php. */
/* Jun 12 2026 (intern-reported): stack the slot vertically so on an EPOM no-fill
   the "Ads by Muslim Ad Network" chip flows BELOW the <ins> instead of centering
   on top of the absolutely-positioned "Upgrade to Ummah One" fallback. Column flow
   (not an absolute chip) keeps the chip clear of a live ad creative too. */
.ub-ad-300 { min-height: 250px; margin: 0.75rem auto; max-width: 300px; position: relative; flex-direction: column; justify-content: flex-start; }
/* House-ad fallback (A-grade polish, Jun 18): a SOLID, finished house creative —
   not a dashed muted "broken/empty" placeholder. Paints whenever EPOM no-fills so
   the 300x250 zone is never an empty beige box (CD post-page item 1). */
.ub-ad-fallback {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem 1.25rem;
    text-align: center;
    text-decoration: none;
    border-radius: 12px;
    background: linear-gradient(140deg, rgba(223,160,50,0.14), rgba(20,184,166,0.06));
    border: 1px solid rgba(223,160,50,0.4);
    color: #6f5a36;
    transition: transform 200ms var(--buzz-ease), box-shadow 200ms ease, border-color 200ms ease;
}
.ub-ad-fallback:hover {
    border-color: rgba(223,160,50,0.7);
    box-shadow: 0 6px 20px rgba(223,160,50,0.18);
    transform: translateY(-1px);
}
.ub-ad-fallback-eyebrow { font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--buzz-teal); }
.ub-ad-fallback-title { font-size: 1.25rem; font-weight: 800; color: #5a4824; line-height: 1.15; }
.ub-ad-fallback-meta { font-size: 0.8125rem; line-height: 1.4; color: #7a6030; max-width: 16rem; }
.ub-ad-fallback-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.35rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--buzz-gold), var(--buzz-gold-dim));
    color: #060B18;
    font-size: 0.8125rem;
    font-weight: 800;
}
[data-theme="dark"] .ub-ad-fallback {
    background: linear-gradient(140deg, rgba(223,160,50,0.12), rgba(20,184,166,0.05));
    border-color: rgba(223,160,50,0.32);
    color: #d4b87a;
}
[data-theme="dark"] .ub-ad-fallback-title { color: #f0d49a; }
[data-theme="dark"] .ub-ad-fallback-meta { color: #c2a878; }
[data-theme="dark"] .ub-ad-fallback-cta { color: #060B18; }
/* Jun 23 (Suhaib/Mehek audit — "ad attribution chip clipped on mobile / ad zone
   looks empty"): the 320x50 slot was a horizontal flex, so the <ins> (320px) +
   the "Ads by Muslim Ad Network" chip ran wider than a 390px phone and the chip
   was clipped at the right edge by .ub-ad's overflow:hidden. Stack vertically
   (chip BELOW the ad) so the attribution disclosure is always fully visible
   (CLAUDE.md amanah rule) regardless of fill state. */
.ub-ad-320 { display: flex; flex-direction: column; align-items: stretch; min-height: 50px; margin: 0.75rem 0; }
@media (min-width: 768px) {
    .ub-ad-320 { display: none; }
}
[data-theme="light"] .ub-ad { background: transparent; }

/* MAN attribution chip (May 24 — ad-ops audit BUG-180-adjacent).
   Always-visible per CLAUDE.md (never x-show="filled"). A-grade iter-4 (Jun 18):
   it was rendering at ~1.9:1 (opacity 0.55, 10px, dim tan/blue) — technically
   present but near-invisible in both themes. Keep it subordinate to content but
   LEGIBLE: bump to 11px, opacity 0.9, and theme-specific muted colors that clear
   WCAG AA (≥4.5:1) so the "Ads by Muslim Ad Network" disclosure is actually
   readable, not just nominally compliant. */
.man-attr-chip {
    display: block;
    font-size: 0.6875rem;
    color: #8892A4;
    opacity: 0.9;
    text-align: right;
    padding: 0.125rem 0;
    letter-spacing: 0.03em;
}
[data-theme="light"] .man-attr-chip {
    color: #6B5D45;
}
.man-attr-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(136,146,164,0.45);
    text-underline-offset: 2px;
}
[data-theme="light"] .man-attr-link {
    text-decoration-color: rgba(107,93,69,0.45);
}
.man-attr-link:hover { opacity: 1; text-decoration-color: currentColor; }

/* ============================================================
   APR 29 ADDITIONS - Save / Filter / Anon prompt / Byline
   ============================================================ */

/* Source-type filter pills (horizontal scroll on mobile, centered on desktop). */
.source-pills {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0 12px;
    margin: 0 auto 1.25rem;
    max-width: 680px;
    justify-content: center;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.source-pills::-webkit-scrollbar { display: none; }
/* Feed sort toggle (Suhaib Jun 12 UX) — right-aligned, label + pills, sits
   just above the hero. max-width:none + flex-start override the centered
   .source-pills defaults; smaller bottom margin keeps it tight to the feed. */
.feed-sort {
    max-width: 100%;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    margin: 0 0 0.85rem;
    padding-bottom: 4px;
}
.feed-sort-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--buzz-ink-soft);
    margin-right: 2px;
    flex: 0 0 auto;
}
.feed-sort .source-pill { padding: 5px 12px; font-size: 0.8125rem; }
.source-pill {
    flex: 0 0 auto;
    padding: 8px 16px;
    min-height: 36px;
    border: 1px solid rgba(223, 160, 50, 0.25);
    border-radius: 999px;
    background: transparent;
    color: var(--buzz-text-muted);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    white-space: nowrap;
}
.source-pill:hover {
    color: var(--buzz-gold);
    border-color: rgba(223, 160, 50, 0.55);
}
.source-pill.active {
    background: linear-gradient(135deg, rgba(223,160,50,0.18), rgba(223,160,50,0.06));
    color: var(--buzz-gold);
    border-color: var(--buzz-gold);
    box-shadow: 0 0 0 1px rgba(223,160,50,0.25);
}
[data-theme="light"] .source-pill {
    color: #6f5a36;
    border-color: rgba(196,162,101,0.45);
}
[data-theme="light"] .source-pill.active {
    color: #6f5a36;
    background: linear-gradient(135deg, rgba(223,160,50,0.18), rgba(223,160,50,0.04));
}

/* Category pills (May 4 - Suhaib S23). Visually distinct from source-pills:
   slightly smaller, thinner border, blue-grey accent on active to signal
   "different axis" without competing with the gold source-pill row.
   May 14 2026 (Mehek): on mobile collapse both pill rows into one scrollable row
   to reduce double-row cognitive load. .source-pills and .category-pills merge
   into a single horizontal strip on ≤768px via the .filter-pill-row wrapper. */
.category-pills {
    margin: 0.25rem auto 1.25rem;
}
/* May 22, 2026 (Suhaib follow-up — multi-select topic filtering): the topic
   pill row USED to be display:none on mobile, which meant topic filtering was
   simply unavailable below 768px (the "collapse into source row" the May 14
   note describes was never actually wired). Now that topics are multi-select
   and a primary discovery surface, the row stays visible on mobile as its own
   horizontally-scrollable strip (mirroring .source-pills): edge-to-edge so the
   last pill is reachable, tighter top margin to keep the two filter rows
   compact. */
@media (max-width: 768px) {
    .category-pills {
        margin: 0 -1rem 1rem;
        padding-left: 1rem;
        padding-right: 1rem;
        max-width: none;
        justify-content: flex-start;
    }
}
.category-pill {
    padding: 6px 13px !important;
    min-height: 30px !important;
    font-size: 0.75rem !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: rgba(255,255,255,0.55) !important;
}
.category-pill:hover {
    color: rgba(255,255,255,0.9) !important;
    border-color: rgba(201,168,76,0.4) !important;
}
.category-pill.active {
    background: rgba(201,168,76,0.12) !important;
    color: var(--buzz-gold) !important;
    border-color: rgba(201,168,76,0.6) !important;
    box-shadow: 0 0 0 1px rgba(201,168,76,0.18) !important;
}
[data-theme="light"] .category-pill {
    /* BUG-318: #8a7146 on cream = 4.34:1 (just under AA). Darkened to
       #7A6030 = 5.55:1 so inactive topic pills pass WCAG AA. */
    color: #7A6030 !important;
    border-color: rgba(196,162,101,0.3) !important;
}
[data-theme="light"] .category-pill.active {
    color: #6f5a36 !important;
    background: rgba(223,160,50,0.12) !important;
    border-color: rgba(196,162,101,0.7) !important;
}

/* ============================================================
   A-GRADE FILTER IA (Jun 18) — Topic tabs (primary) + Format
   refinement (secondary). Replaces the two stacked .source-pill
   rows the CD flagged as a "double-row UI bug". The two axes
   are now visually + semantically distinct.
   ============================================================ */
/* PRIMARY: Topic tabs — prominent, the main discovery surface for a news feed. */
.topic-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0 4px;
    margin: 0 auto 0.85rem;
    max-width: 680px;
    justify-content: center;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.topic-tabs::-webkit-scrollbar { display: none; }
.topic-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    /* A-grade iter-4 (Jun 18): min-height 40px → 44px (WCAG 2.5.5). */
    padding: 11px 18px;
    min-height: 44px;
    border: 1px solid rgba(223, 160, 50, 0.28);
    border-radius: 999px;
    background: transparent;
    color: var(--buzz-text);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.topic-tab:hover {
    color: var(--buzz-gold);
    border-color: rgba(223, 160, 50, 0.6);
}
.topic-tab:focus-visible {
    outline: 2px solid var(--buzz-gold);
    outline-offset: 2px;
}
.topic-tab.active {
    background: linear-gradient(135deg, rgba(223,160,50,0.22), rgba(223,160,50,0.08));
    color: var(--buzz-gold);
    border-color: var(--buzz-gold);
    box-shadow: 0 0 0 1px rgba(223,160,50,0.3);
}
[data-theme="light"] .topic-tab {
    color: var(--buzz-text);
    border-color: rgba(196,162,101,0.5);
}
[data-theme="light"] .topic-tab.active {
    color: #6f5a36;
    background: linear-gradient(135deg, rgba(223,160,50,0.2), rgba(223,160,50,0.05));
    border-color: var(--buzz-gold);
}

/* SECONDARY: Format refinement — labeled + visibly lighter than the topic tabs
   so it reads as "narrow down", not a second peer tab row. */
.format-filter {
    display: flex;
    align-items: center;
    gap: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0 12px;
    margin: 0 auto 1.1rem;
    max-width: 680px;
    justify-content: center;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.format-filter::-webkit-scrollbar { display: none; }
.format-filter-label {
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--buzz-text-muted);
    margin-right: 2px;
}
.format-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    /* A-grade iter-4 (Jun 18): min-height 30px → 44px (WCAG 2.5.5 target size).
       inline-flex centers the 12px label inside the taller tap target so the
       chip reads compact while the touch box clears 44px. */
    padding: 6px 14px;
    min-height: 44px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    background: transparent;
    color: var(--buzz-text-muted);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.format-pill:hover {
    color: var(--buzz-text);
    border-color: rgba(223,160,50,0.4);
}
.format-pill:focus-visible {
    outline: 2px solid var(--buzz-gold);
    outline-offset: 2px;
}
/* Teal resolution (A-grade polish iter-2, Jun 18): teal is now a SINGLE
   semantic token reserved for "external / source actions" only (Visit Source,
   Original Creator, source-type badges, ecosystem links). A FILTER SELECTION is
   not an external action — it's the same "active/selected" state as the topic
   tabs + source pills, which are GOLD. So the active Format pill now matches its
   sibling filters in gold instead of reading as a stray teal accent. */
.format-pill.active {
    background: rgba(223,160,50,0.12);
    color: var(--buzz-gold);
    border-color: rgba(223,160,50,0.6);
    box-shadow: 0 0 0 1px rgba(223,160,50,0.18);
}
[data-theme="light"] .format-pill {
    color: #7A6030;
    border-color: rgba(196,162,101,0.3);
}
[data-theme="light"] .format-pill.active {
    background: rgba(223,160,50,0.12);
    color: #6f5a36;
    border-color: rgba(196,162,101,0.7);
}
/* Mobile: each filter row becomes its own edge-to-edge scrollable strip; tap
   targets stay ≥30px (format) / 40px (topic). */
@media (max-width: 768px) {
    .topic-tabs {
        margin: 0 -1rem 0.75rem;
        padding-left: 1rem;
        padding-right: 1rem;
        max-width: none;
        justify-content: flex-start;
    }
    .format-filter {
        margin: 0 -1rem 1rem;
        padding-left: 1rem;
        padding-right: 1rem;
        max-width: none;
        justify-content: flex-start;
    }
}

/* Save button (heart icon). */
.card-action-btn.save-btn { gap: 6px; }
.card-action-btn.save-btn svg {
    width: 16px;
    height: 16px;
    transition: transform 0.18s var(--buzz-ease), color 0.18s ease;
}
.card-action-btn.save-btn:hover svg { color: var(--buzz-gold); }
.card-action-btn.save-btn.saved {
    color: var(--buzz-gold);
}
.card-action-btn.save-btn.saved svg {
    color: var(--buzz-gold);
    transform: scale(1.08);
    filter: drop-shadow(0 0 6px rgba(223,160,50,0.45));
}

/* Header "Saved" link (logged-in only). */
.buzz-saved-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    min-height: 36px;
    border: 1px solid rgba(223, 160, 50, 0.25);
    border-radius: 8px;
    background: transparent;
    color: var(--buzz-text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.buzz-saved-link:hover {
    color: var(--buzz-gold);
    border-color: rgba(223, 160, 50, 0.55);
    background: rgba(223, 160, 50, 0.06);
}
.buzz-saved-link svg { color: var(--buzz-gold); }
@media (max-width: 640px) {
    .buzz-saved-link span { display: none; }
    .buzz-saved-link { padding: 8px; }
}

/* Anonymous sign-in prompt tooltip. */
.anon-prompt {
    position: absolute;
    z-index: 1100;
    transform: translate(-50%, -100%);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(20, 26, 45, 0.98), rgba(11, 16, 32, 0.98));
    border: 1px solid rgba(223, 160, 50, 0.45);
    border-radius: 10px;
    color: #f5e9c8;
    font-size: 0.8125rem;
    font-weight: 600;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(223,160,50,0.12);
    max-width: 320px;
    pointer-events: auto;
}
.anon-prompt-cta {
    background: linear-gradient(135deg, var(--buzz-gold), #c8902a);
    border: none;
    color: #1a1306;
    padding: 6px 12px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s ease;
}
.anon-prompt-cta:hover { filter: brightness(1.1); }
.anon-prompt-close {
    background: none;
    border: none;
    color: rgba(245, 233, 200, 0.55);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.anon-prompt-close:hover { color: var(--buzz-gold); }
[data-theme="light"] .anon-prompt {
    background: linear-gradient(135deg, #2a1f0e, #1a1306);
    color: #f5e9c8;
}

/* Byline link styling for ummah.me-bound real users. */
.meta-author.meta-author-ummahme {
    color: var(--buzz-teal);
    border-bottom: 1px dotted rgba(20, 184, 166, 0.4);
}
.meta-author.meta-author-ummahme:hover {
    color: var(--buzz-gold);
    border-bottom-color: var(--buzz-gold);
}

/* Mobile vote-column tap target hardening (Apr 29) -
   bump 480px-and-down min-width 44 -> 48 to clear Apple/Google 48dp guideline. */
@media (max-width: 480px) {
    .vote-col { min-width: 56px; padding: 0.625rem 0.5rem; }
    .source-pills {
        margin-left: -0.5rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        max-width: none;
        justify-content: flex-start;
    }
}

/* BUG-044 (May 18): pill-count chip rendered inside category-pill in the
   trending sidebar card. Tiny rounded badge that doesn't compete with the label. */
.category-pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4em;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: 700;
    background: rgba(201, 168, 76, 0.18);
    color: var(--buzz-gold);
}
[data-theme="light"] .category-pill-count {
    background: rgba(223, 160, 50, 0.18);
    color: #6f5a36;
}

/* Top Categories proportion bars (A-grade polish, Jun 18). Real counts only. */
.cat-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cat-bar-row {
    display: block;
    text-decoration: none;
    cursor: pointer;
}
.cat-bar-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 5px;
}
.cat-bar-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--buzz-text);
    transition: color 0.18s ease;
}
.cat-bar-row:hover .cat-bar-label { color: var(--buzz-gold); }
.cat-bar-count {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--buzz-text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.cat-bar-track {
    height: 6px;
    width: 100%;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}
.cat-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--buzz-gold-dim), var(--buzz-gold));
    transition: width 0.5s var(--buzz-ease);
}
.cat-bar-row:hover .cat-bar-fill {
    background: linear-gradient(90deg, var(--buzz-gold), var(--buzz-gold-light));
}
[data-theme="light"] .cat-bar-track { background: rgba(13, 17, 23, 0.07); }

/* Jun 18: graceful empty/sparse state for Top Categories — a muted icon + note
   instead of a near-blank white box when the week's data is sparse or a load was
   throttled. Low-key so it never competes with real content. */
.cat-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0 2px;
    color: var(--buzz-text-muted);
}
.cat-empty-icon { flex-shrink: 0; opacity: 0.7; }
.cat-empty-text { font-size: 0.8125rem; line-height: 1.35; }

/* BUG-048 (May 18): "Verified Source" inline badge on card-meta strip.
   Small green chip with check icon. Only renders for whitelisted domains. */
.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px 1px 4px;
    border-radius: 999px;
    background: rgba(16, 122, 84, 0.14);
    color: #0d8a5e;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.02em;
}
.verified-badge svg {
    width: 10px;
    height: 10px;
    stroke: currentColor;
    fill: none;
    stroke-width: 3;
}
[data-theme="light"] .verified-badge {
    background: rgba(16, 122, 84, 0.10);
    color: #0a7048;
}

/* BUG-043 (May 18): /about explainer page styles — minimal, follows
   the UmmahBuzz light-mode editorial vocabulary. */
body.ub-about-page {
    background: var(--buzz-bg, #FDFBF5);
    color: var(--buzz-ink, #1B1B1B);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.65;
}
.ub-about-wrap {
    max-width: 720px;
    margin: 0 auto;
    padding: 48px 24px 64px;
}
.ub-about-header { text-align: center; margin-bottom: 40px; }
.ub-about-back {
    display: inline-block;
    color: var(--buzz-gold, #C9A84C);
    text-decoration: none;
    font-size: 13px;
    margin-bottom: 24px;
    letter-spacing: 0.02em;
}
.ub-about-back:hover { text-decoration: underline; }
.ub-about-h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 44px;
    line-height: 1.15;
    margin: 0 0 12px;
}
.ub-about-sub { color: #6b6b6b; margin: 0; font-size: 16px; }
.ub-about-section {
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.ub-about-section h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 24px;
    margin: 0 0 10px;
    color: var(--buzz-gold, #C9A84C);
}
.ub-about-section ul { padding-left: 18px; }
.ub-about-section li { margin-bottom: 6px; }
.ub-about-section code {
    background: rgba(0, 0, 0, 0.05);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.92em;
}
.ub-about-footer {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    text-align: center;
}
.ub-about-cta {
    display: inline-block;
    background: var(--buzz-gold, #C9A84C);
    color: #1B1B1B;
    padding: 10px 22px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.02em;
}
.ub-about-cta:hover { background: #B89638; }
.ub-about-link {
    display: block;
    margin-top: 16px;
    color: #6b6b6b;
    font-size: 13px;
    text-decoration: none;
}
.ub-about-link:hover { text-decoration: underline; }