/* ===== fonts.css ===== */
/* ============================================================
   SELF-HOSTED FONTS
   ============================================================
   Replaces the render-blocking request to fonts.googleapis.com
   (~750ms, measured by Lighthouse). That request was a genuine
   third-party dependency in the critical path: the browser had to
   fetch a CSS file from Google, parse it, and only THEN discover
   and fetch the actual font files from a second domain
   (fonts.gstatic.com) - a serial chain before text could render.
   Serving the fonts from this same origin removes both the extra
   DNS/TLS handshakes and that discovery round-trip entirely.

   Both files are VARIABLE fonts. Confirmed directly from Google's
   own CSS output: Inter weights 400/500/600 all resolved to one
   identical file, as did Plus Jakarta Sans 600/700/800. That's why
   there are only two files here rather than six - a single variable
   file covers its whole weight range, and the browser interpolates
   any weight within it.

   Only the `latin` subset is included, deliberately. Google's CSS
   also offered cyrillic, greek, and vietnamese subsets, which would
   be dead download weight for this site's audience. Telugu content
   is unaffected: it uses its own separate Sree Krushnadevaraya font,
   loaded conditionally elsewhere, not these.

   font-display: swap matches Google's own setting - text renders
   immediately in a fallback font and swaps when the real font
   arrives, rather than staying invisible while it loads.
   ============================================================ */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    /* Range, not a single value - this is what makes one variable
       file serve 400, 500, and 600 (and anything between). */
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/plusjakartasans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== search.css ===== */
/* ============================================
   SEARCH DROPDOWN + RESULT ROWS (shared by dropdown & search.php)
   ============================================ */
.search-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.18), 0 4px 16px -4px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border, #E2E8E4);
    max-height: 70vh;
    overflow-y: auto;
    animation: searchDropdownIn 0.15s ease-out;
}
@keyframes searchDropdownIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.search-section-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted, #64748B);
    padding: 0.9rem 1.1rem 0.4rem;
}

.search-result-list { display: flex; flex-direction: column; }

.search-result-row {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.75rem 1.1rem;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}
.search-result-row:hover,
.search-result-row:focus-visible {
    background: var(--bg-surface, #F1F5F2);
}

.search-avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--gradient-primary, linear-gradient(135deg, #00A878 0%, #34D399 100%));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800;
    font-size: 1.05rem;
    flex-shrink: 0;
    box-shadow: 0 4px 10px -2px rgba(0, 168, 120, 0.4);
}

.search-row-info { display: flex; flex-direction: column; min-width: 0; gap: 0.15rem; }
.search-row-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-dark, #0F172A);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.search-row-title mark {
    background: var(--primary-light, #D1FAE5);
    color: var(--primary-dark, #065F46);
    padding: 0 3px;
    border-radius: 4px;
    font-weight: 800;
}
.search-row-category {
    font-size: 0.78rem;
    color: var(--text-muted, #64748B);
}

.search-suggestions { border-bottom: 1px solid var(--border, #E2E8E4); padding-bottom: 0.5rem; }
.search-suggestion-item {
    display: block;
    padding: 0.55rem 1.1rem;
    color: var(--text-muted, #64748B);
    text-decoration: none;
    font-size: 0.88rem;
}
.search-suggestion-item:hover { color: var(--primary, #00A878); }

.search-view-all {
    display: block;
    text-align: center;
    padding: 0.9rem;
    font-weight: 800;
    font-size: 0.88rem;
    color: var(--primary, #00A878);
    text-decoration: none;
    border-top: 1px solid var(--border, #E2E8E4);
}
.search-view-all:hover { background: var(--primary-light, #D1FAE5); }

.search-loading, .search-error, .search-empty {
    padding: 1.5rem 1.1rem;
    text-align: center;
    color: var(--text-muted, #64748B);
    font-size: 0.9rem;
}


/* --- Restores the search box pill border, lost when search.css was
       fully replaced earlier --- */
.search-box {
    display: flex;
    align-items: center;
    width: 100%;
    background: #fff;
    border: 2px solid var(--primary, #00A878);
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 0 4px 16px -4px rgba(0, 168, 120, 0.15);
    gap: 0.5rem;
    padding: 0.3rem 0.3rem 0.3rem 1.1rem;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.search-box:focus-within {
    box-shadow: 0 10px 28px -6px rgba(0, 168, 120, 0.3);
    border-color: var(--primary-dark, #065F46);
}

/* Centers and bounds the whole search bar - was previously only set via
   an inline style on index.php's markup, which also meant no responsive
   adjustment at all on small screens. */
.search-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 2rem auto;
}

.search-input-pill {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
}
.search-input-pill input,
#search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1rem;
    padding: 0.75rem 0.25rem;
    background: transparent;
    width: 100%;
    min-width: 0;
    color: var(--text-dark, #0F172A);
}
.search-input-pill input::placeholder,
#search-input::placeholder {
    color: #94A3B8;
}

/* Previously only existed as inline styles directly on the button in
   index.php - meaning this had zero real CSS backing anywhere at all.
   No hover scale here deliberately: .search-box above has
   overflow:hidden, and a scaled button could clip against its rounded
   corner. */
.btn-search {
    background: var(--gradient-primary, linear-gradient(135deg, #00A878 0%, #3ECF8E 100%));
    border: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}
.btn-search svg { display: block; }

@media (max-width: 480px) {
    .search-container { margin: 1.5rem auto; }
    .btn-search { width: 42px; height: 42px; }
    .search-input-pill input,
    #search-input { padding: 0.65rem 0.25rem; font-size: 0.95rem; }
}

/* ===== style.css ===== */
/* === PROMPT BIRD - COMPLETE STYLESHEET === */

:root {
    --primary: #00A878;
    --primary-hover: #008F66;
    --primary-light: #D1FAE5;
    --primary-dark: #065F46;
    --gradient-primary: linear-gradient(135deg, #00A878 0%, #34D399 100%);
    
    --action-copy: #F59E0B;
    --action-copy-hover: #D97706;
    
    --bg-main: #F8FAF9;
    --bg-card: #FFFFFF;
    --bg-surface: #F1F5F2;
    
    --text-dark: #0F172A;
    --text-muted: #64748B;
    --border: #E2E8E4;
    
    --shadow-sm: 0 2px 8px -2px rgba(0, 168, 120, 0.05);
    --shadow-md: 0 10px 40px -10px rgba(0, 168, 120, 0.08);
    --shadow-lg: 0 20px 50px -15px rgba(0, 168, 120, 0.12);

    --font-heading: 'Plus Jakarta Sans', sans-serif;
    --font-body: 'Inter', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    background-color: var(--bg-main);
    color: var(--text-dark);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.02em; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img { max-width: 100%; height: auto; display: block; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

.header-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }

.logo { display: flex; align-items: center; gap: 0.75rem; }
.logo-icon-m {
    background: var(--gradient-primary);
     display: flex; align-items: center; justify-content: center;
     font-weight: 800; font-size: 1.2rem;
     margin-left: 0px;
}
.logo-icon-m { font-family: var(--font-heading); font-weight: 800; font-size: 1.25rem; }

.logo-icon-m {
  font-family: sans-serif;
  font-weight: bold;
  background: linear-gradient(
    135deg, 
    rgba(152, 255, 152, 0.9) 0%,
    rgba(0, 163, 108, 0.4) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0px 1px 0px rgba(0, 50, 30, 0.6));
}

.logo-icon-m {
  background: linear-gradient(
    110deg, 
    rgba(152, 255, 152, 0.9) 10%,
    rgba(0, 163, 108, 0.6) 40%,
    rgba(255, 255, 255, 1) 50%,
    rgba(0, 163, 108, 0.6) 60%,
    rgba(152, 255, 152, 0.9) 90%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0px 1px 0px rgba(0, 50, 30, 0.6));
  animation: shimmer 4s linear infinite;
}

@keyframes shimmer {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}

.logo-icon-m { display: flex }

.main-nav { display: flex; gap: 2rem; }
.main-nav a { color: var(--text-muted); font-weight: 500; transition: color 0.2s; }
.main-nav a:hover { color: var(--primary); }

.header-actions { display: flex; gap: 0.5rem; }
.icon-btn {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--bg-surface); color: var(--primary-dark);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; transition: transform 0.2s;
}
.icon-btn:hover { transform: translateY(-2px); }

.hero { text-align: center; padding: 4rem 0 2rem; }
.hero-title { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 0.5rem; }
.hero-subtitle {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    background: var(--gradient-primary);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    margin-bottom: 1rem;
}
.hero-desc { color: var(--text-muted); font-size: 1.1rem; margin-bottom: 2rem; }

.popular-tags { font-size: 0.9rem; color: var(--text-muted); display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; }
.popular-tags a { color: var(--primary); font-weight: 600; }

.tabs { display: flex; justify-content: center; gap: 2rem; border-bottom: 1px solid var(--border); margin-bottom: 2rem; }
.tab {
    background: none; padding: 1rem 0; color: var(--text-muted);
    font-weight: 600; font-size: 1rem; position: relative;
}
.tab.active { color: var(--text-dark); }
.tab.active::after {
    content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 3px;
    background: var(--primary); border-radius: 3px 3px 0 0;
}

.prompt-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; margin-bottom: 4rem; }

.browse-style { text-align: center; margin-bottom: 4rem; }
.browse-style h2 { font-size: 1.75rem; margin-bottom: 0.5rem; }
.browse-style p { color: var(--text-muted); margin-bottom: 2rem; }

.style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.style-card {
    background: var(--bg-card); padding: 1.25rem; border-radius: 16px;
    text-align: left; display: flex; align-items: center; gap: 1rem;
    box-shadow: var(--shadow-sm); border: 1px solid var(--border);
    transition: transform 0.2s;
}
.style-card:hover { transform: translateY(-2px); }
.style-icon {
    width: 48px; height: 48px; background: var(--primary-light); color: var(--primary);
    border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.style-card h4 { font-size: 1rem; margin-bottom: 0.1rem; }
.style-card span { font-size: 0.8rem; color: var(--text-muted); }

/* ============================================
   VIEW ALL BUTTONS - three genuinely distinct styles, not variations
   of the same button, each using a different real animation technique.
   ============================================ */

/* 1. Libraries - continuously spinning gradient border ("tech ring") */
.btn-spin-border {
    position: relative;
    display: inline-block;
    padding: 3px;
    border-radius: 50px;
    text-decoration: none;
    isolation: isolate;
}
.btn-spin-border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50px;
    background: conic-gradient(from 0deg, #00A878, #34D399, #A7F3D0, #34D399, #00A878, #065F46, #00A878);
    animation: btnSpinRing 3.5s linear infinite;
    z-index: -1;
}
@keyframes btnSpinRing {
    to { transform: rotate(360deg); }
}
.btn-spin-border-inner {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: #0F172A;
    color: #fff;
    padding: 0.8rem 1.75rem;
    border-radius: 48px;
    font-weight: 700;
    font-size: 1rem;
    transition: background 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-spin-border-inner svg {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-spin-border:hover .btn-spin-border-inner {
    background: #1E293B;
    transform: scale(1.04);
}
.btn-spin-border:hover .btn-spin-border-inner svg {
    transform: translateX(5px) rotate(-45deg);
}

/* 2. Templates - stacked text that slides up on hover to reveal a
   second line underneath, a well-known premium agency-site technique */
.btn-slide-reveal {
    display: inline-block;
    background: linear-gradient(135deg, #F59E0B 0%, #EF4444 100%);
    color: #fff;
    padding: 0.9rem 2rem;
    border-radius: 14px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    box-shadow: 0 10px 26px -8px rgba(239, 68, 68, 0.45);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.btn-slide-reveal:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 16px 36px -8px rgba(239, 68, 68, 0.55);
    color: #fff;
}
.btn-slide-reveal-track {
    display: block;
    height: 1.3em;
    overflow: hidden;
}
.btn-slide-reveal-row {
    display: block;
    line-height: 1.3em;
    white-space: nowrap;
    transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.btn-slide-reveal:hover .btn-slide-reveal-row {
    transform: translateY(-1.3em);
}

/* 3. AI Tools - shifting purple/pink gradient with a pulsing neon glow,
   a tech/AI-appropriate feel */
.btn-neon-glow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: linear-gradient(135deg, #6366F1 0%, #A855F7 50%, #EC4899 100%);
    background-size: 200% 200%;
    color: #fff;
    padding: 0.9rem 2rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    animation: btnGlowShift 4s ease infinite;
    box-shadow: 0 0 18px rgba(168, 85, 247, 0.5), 0 8px 24px -8px rgba(99, 102, 241, 0.4);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
}
@keyframes btnGlowShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
.btn-neon-glow svg {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-neon-glow:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 0 34px rgba(168, 85, 247, 0.8), 0 0 60px rgba(99, 102, 241, 0.4), 0 10px 28px -8px rgba(236, 72, 153, 0.5);
    color: #fff;
}
.btn-neon-glow:hover svg {
    transform: translateX(5px);
}

@media (max-width: 600px) {
    .btn-spin-border-inner,
    .btn-slide-reveal,
    .btn-neon-glow {
        padding: 0.75rem 1.4rem;
        font-size: 0.92rem;
    }
}

.site-footer { background: var(--bg-card); border-top: 1px solid var(--border); padding: 4rem 0 2rem; margin-top: 1rem; }
.footer-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2rem; margin-bottom: 2rem; }
.footer-brand p { color: var(--text-muted); margin-top: 1rem; max-width: 300px; }
.footer-links { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-links h4 { margin-bottom: 0.5rem; }
.footer-links a { color: var(--text-muted); transition: color 0.2s; }
.footer-links a:hover { color: var(--primary); }
.footer-bottom { text-align: center; color: var(--text-muted); font-size: 0.9rem; border-top: 1px solid var(--border); padding-top: 2rem; }

.scroll-top {
    position: fixed; bottom: 2rem; right: 2rem; width: 44px; height: 44px;
    background: var(--primary); color: white; border-radius: 50%;
    display: none; align-items: center; justify-content: center;
}
.scroll-top.visible { display: flex; }

@media (max-width: 768px) {
    .main-nav { display: none; }
    .prompt-actions { grid-template-columns: 1fr; }
    .prompt-title { font-size: 1.75rem; }
    .prompt-action-buttons { grid-template-columns: 1fr; }
    .share-icons { justify-content: center; }
}

.premium-gallery-card {
    background: #FFFFFF;
    border-radius: 24px;
    padding: 12px;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.08);
    margin-bottom: 2rem;
    border: 1px solid var(--border);
}

.gallery-adaptive-frame {
    background-color: #f0f0f0;
    border-radius: 20px;
    padding: 10px;
    transition: background-color 0.5s ease;
}

.gallery-image-container {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #FFFFFF;
    width: 100%;
}

.gallery-main-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #333;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: all 0.2s;
}
.nav-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.05); }
.nav-arrow.prev { left: 12px; }
.nav-arrow.next { right: 12px; }

.gallery-action-buttons {
    position: absolute;
    bottom: 12px;
    left: 12px;
    display: flex;
    gap: 8px;
}
.action-btn {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #333;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: all 0.2s;
}
.action-btn:hover { background: #fff; transform: translateY(-2px); }

.gallery-thumbnails {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}
.gallery-thumbnails::-webkit-scrollbar { display: none; }

.gallery-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 12px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
    background: #fff;
}
.gallery-thumb.active { 
    border-color: var(--primary);
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .premium-gallery-card { padding: 8px; border-radius: 20px; }
    .gallery-adaptive-frame { padding: 6px; border-radius: 16px; }
    .gallery-image-container { border-radius: 12px; }
    .nav-arrow { width: 32px; height: 32px; }
    .nav-arrow.prev { left: 8px; }
    .nav-arrow.next { right: 8px; }
    .action-btn { width: 36px; height: 36px; border-radius: 8px; }
    .gallery-thumb { width: 50px; height: 50px; border-radius: 10px; }
}

.prompt-header-section { text-align: left; margin-bottom: 2rem; }
.pill-badge {
    display: inline-block;
    background: var(--text-dark);
    color: white;
    padding: 0.4rem 1.2rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}
.prompt-main-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
    line-height: 1.2;
}
.prompt-meta { color: var(--text-muted); font-size: 1rem; }
.meta-author { color: var(--primary); font-weight: 600; }

.premium-prompt-box {
    background: #FFFFFF;
    border-radius: 24px;
    padding: 1.5rem;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--border);
    margin-bottom: 2rem;
}

.ppb-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.25rem;
}
.ppb-header-left {
    display: flex;
    gap: 1rem;
    align-items: center;
}
.ppb-icon {
    width: 48px;
    height: 48px;
    background: var(--gradient-primary);
    color: white;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ppb-title-wrap { display: flex; flex-direction: column; }
.ppb-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 0.1rem;
    letter-spacing: 0.02em;
}
.ppb-subtitle {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 500;
}
.ppb-btn-save {
    background: var(--bg-surface);
    color: var(--text-dark);
    border: 1px solid var(--border);
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
}
.ppb-btn-save:hover { background: var(--border); }
.ppb-btn-save.saved {
    background: #F0FDF4;
    color: var(--primary-dark);
    border-color: #BBF7D0;
}

.ppb-text-container {
    position: relative;
    border: 1.5px solid var(--border);
    border-radius: 16px;
    height: 280px;
    overflow: hidden;
    background: #FAFAFA;
    margin-bottom: 1.5rem;
}
.ppb-text-content {
    height: 100%;
    overflow-y: auto;
    padding: 1.25rem;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-dark);
    scrollbar-width: none; 
    -ms-overflow-style: none;
}
.ppb-text-content::-webkit-scrollbar { display: none; }

.ppb-text-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: linear-gradient(to bottom, rgba(250, 250, 250, 0) 0%, rgba(250, 250, 250, 1) 100%);
    pointer-events: none;
}

.ppb-footer-actions {
    display: flex;
    gap: 1rem;
}
.ppb-btn {
    flex: 1;
    padding: 1rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
}

.ppb-btn-copy {
    background: var(--gradient-primary);
    box-shadow: 0 8px 20px -6px rgba(0, 168, 120, 0.4);
}
.ppb-btn-copy:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -6px rgba(0, 168, 120, 0.5);
}
.ppb-btn-copy.copied {
    background: #065F46;
}

.ppb-btn-like {
    background: #F43F5E;
    box-shadow: 0 8px 20px -6px rgba(244, 63, 94, 0.4);
}
.ppb-btn-like:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -6px rgba(244, 63, 94, 0.5);
}
.ppb-btn-like.liked {
    background: #FFE4E6;
    color: #F43F5E;
    box-shadow: none;
    border: 1px solid #FECDD3;
}

@media (max-width: 768px) {
    .premium-prompt-box { padding: 1.25rem; border-radius: 20px; }
    .ppb-header { flex-direction: column; gap: 1rem; }
    .ppb-btn-save { width: 100%; justify-content: center; }
    .ppb-text-container { height: 240px; }
    .ppb-footer-actions { flex-direction: row; }
    .ppb-btn { padding: 0.875rem; font-size: 1rem; }
}

.heart-bubble {
    position: absolute;
    font-size: 1.2rem;
    pointer-events: none;
    animation: floatUp 1s ease-out forwards;
    bottom: 100%;
    left: 50%;
}
@keyframes floatUp {
    0% { transform: translate(-50%, 0) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -60px) scale(1.5); opacity: 0; }
}

.share-card {
    background: white;
    border-radius: 20px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}
.card-title { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; font-size: 1.2rem; }
.share-icons-scroll { 
    display: flex; 
    gap: 1rem; 
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.5rem;
}
.share-icons-scroll::-webkit-scrollbar { display: none; }
.share-circle-btn {
    width: 48px; height: 48px;
    min-width: 48px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: white;
    transition: transform 0.2s;
    flex-shrink: 0;
}
.share-circle-btn:hover { transform: translateY(-3px); }
.share-circle-btn.fb { background: #1877F2; }
.share-circle-btn.tw { background: #1DA1F2; }
.share-circle-btn.th { background: #000000; }
.share-circle-btn.pi { background: #E60023; }
.share-circle-btn.wa { background: #25D366; }
.share-circle-btn.cp { background: #64748B; }

.rating-card {
    background: #F8FAF9;
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid var(--border);
}
.rating-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.rating-icon-box {
    width: 48px; height: 48px;
    background: white;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: #F59E0B;
    box-shadow: var(--shadow-sm);
}
.rating-stats { text-align: center; margin-bottom: 2rem; }
.rating-score { font-size: 3.5rem; font-weight: 800; color: var(--text-dark); line-height: 1; }
.rating-stars-display { display: flex; justify-content: center; gap: 0.25rem; margin: 0.5rem 0; color: #F59E0B; }
.rating-count-text { font-size: 0.85rem; color: var(--text-muted); font-weight: 600; letter-spacing: 0.05em; }

.rating-bars { margin-bottom: 2rem; }
.rating-bar-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem; }
.bar-label { font-weight: 600; width: 12px; color: var(--text-muted); }
.bar-bg { flex: 1; height: 8px; background: #E2E8E4; border-radius: 4px; overflow: hidden; }
.bar-fill { height: 100%; background: linear-gradient(90deg, #00A878, #34D399); border-radius: 4px; }
.bar-count { font-weight: 600; width: 20px; text-align: right; color: var(--text-muted); }

.rating-empty { text-align: center; padding: 2rem; color: var(--text-muted); font-style: italic; }

.user-rating-action { text-align: center; border-top: 1px solid var(--border); padding-top: 2rem; }
.user-rating-action h4 { font-size: 0.9rem; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 1rem; }
.interactive-stars { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 1.5rem; }
.star-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; transition: color 0.2s; }
.star-btn:hover { color: #F59E0B; }
.feedback-btn {
    width: 100%; padding: 1rem;
    background: white; border: 1.5px solid var(--border);
    border-radius: 12px; font-weight: 700; color: var(--text-dark);
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    cursor: pointer; transition: all 0.2s;
}
.feedback-btn:hover { border-color: var(--primary); color: var(--primary); }

.feedback-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.feedback-modal-content {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    max-width: 500px;
    width: 100%;
    position: relative;
}
.feedback-close {
    position: absolute;
    top: 1rem; right: 1rem;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-muted);
}
.feedback-modal-content h3 { margin-bottom: 1rem; }
.feedback-modal-content textarea {
    width: 100%;
    min-height: 120px;
    padding: 1rem;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    font-family: inherit;
    font-size: 1rem;
    margin-bottom: 1rem;
    resize: vertical;
}
.feedback-submit-btn {
    width: 100%;
    padding: 1rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
}

.meta-card {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}
.meta-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.meta-icon-box {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; color: white;
}
.icon-lightning { background: #F97316; }
.icon-tag { background: #0EA5E9; }
.meta-header h3 { font-size: 1.1rem; }

.model-pill {
    display: inline-block;
    background: var(--bg-surface);
    padding: 0.6rem 1.2rem;
    border-radius: 50px;
    font-weight: 600;
    color: var(--text-dark);
    border: 1px solid var(--border);
}

.tags-grid { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.tag-pill {
    background: #F0FDF4;
    color: #065F46;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid #BBF7D0;
    transition: all 0.2s;
}
.tag-pill:hover { background: var(--primary); color: white; border-color: var(--primary); }

.diverse-section { margin: 4rem 0; }
.section-title-pill {
    display: inline-block;
    background: var(--text-dark);
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 2rem;
}
.diverse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
}
.diverse-grid:not(.show-all) .diverse-card:nth-child(n+7) { display: none; }

.diverse-card {
    background: white;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
    transition: transform 0.2s;
}
.diverse-card:hover { transform: translateY(-4px); }

.diverse-img-wrap { position: relative; height: 280px; }
.diverse-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.diverse-cat-pill {
    position: absolute; top: 1rem; left: 1rem;
    background: white; color: var(--text-dark);
    padding: 0.5rem 1rem; border-radius: 50px;
    font-size: 0.8rem; font-weight: 700;
    box-shadow: var(--shadow-sm);
}
.diverse-like-pill {
    position: absolute; top: 1rem; right: 1rem;
    background: white; color: var(--text-dark);
    padding: 0.5rem 0.8rem; border-radius: 50px;
    font-size: 0.85rem; font-weight: 700;
    display: flex; align-items: center; gap: 0.3rem;
    box-shadow: var(--shadow-sm); border: none; cursor: pointer;
}
.diverse-like-pill.liked { background: rgba(244, 63, 94, 0.15); color: #F43F5E; }

.diverse-content { padding: 1.5rem; }
.diverse-content h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.diverse-content h3 a { color: var(--text-dark); }
.diverse-content p { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 1.5rem; }

.diverse-actions { display: flex; align-items: center; gap: 0.75rem; }
.diverse-copy-btn {
    background: #2563EB; color: white;
    padding: 0.7rem 1.2rem; border-radius: 50px;
    font-weight: 600; font-size: 0.9rem;
    display: flex; align-items: center; gap: 0.4rem; border: none; cursor: pointer;
}
.diverse-share-btn {
    background: var(--bg-surface); width: 40px; height: 40px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer;
}
.diverse-author { margin-left: auto; font-size: 0.85rem; color: var(--text-muted); font-weight: 500; }

.explore-more-btn {
    display: block; margin: 2rem auto 0;
    background: var(--primary); color: white;
    padding: 1rem 2.5rem; border-radius: 50px;
    font-weight: 700; font-size: 1rem; border: none; cursor: pointer;
}

.browse-style-section { text-align: center; margin-bottom: 4rem; }
.browse-style-section h2 { font-size: 2rem; margin-bottom: 0.5rem; }
.browse-style-section p { color: var(--text-muted); margin-bottom: 2rem; }

.style-grid-new {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.style-card-new {
    background: white;
    padding: 2rem 1rem;
    border-radius: 20px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    transition: transform 0.2s;
}
.style-card-new:hover { transform: translateY(-4px); }
.style-icon-new {
    width: 64px; height: 64px;
    background: var(--primary); color: white;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; font-weight: 800;
    margin: 0 auto 1rem;
}
.style-card-new h4 { font-size: 1.1rem; margin-bottom: 0.25rem; }
.style-card-new span { font-size: 0.9rem; color: var(--text-muted); }

.view-all-btn {
    display: inline-block;
    background: var(--primary); color: white;
    padding: 1rem 2.5rem; border-radius: 50px;
    font-weight: 700; font-size: 1rem;
}

.lightbox {
    display: none; position: fixed; z-index: 9999;
    left: 0; top: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.95);
    align-items: center; justify-content: center;
    padding: 1rem;
}
.lightbox-content { 
    max-width: 100%; 
    max-height: 100%; 
    border-radius: 12px;
    object-fit: contain;
}
.lightbox-close {
    position: absolute; top: 20px; right: 30px;
    color: white; font-size: 40px; font-weight: bold; cursor: pointer;
    z-index: 10000;
}

@media (max-width: 768px) {
    .container { padding: 0 1rem; }
    .prompt-detail-container { padding: 1rem; }
    
    .header-inner { padding: 0 1rem; flex-wrap: wrap; height: auto; min-height: 64px; }
    .main-nav { display: none; }
    .logo img { max-height: 32px; }
    
    .hero { padding: 2rem 1rem 1.5rem; }
    .hero-title { font-size: 1.75rem; }
    .hero-subtitle { font-size: 1.25rem; }
    
    .prompt-feed { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .card-image { height: 160px; }
    .card-content { padding: 0.75rem; }
    .card-content h3 { font-size: 0.95rem; }
    
    .gallery-card { padding: 8px; border-radius: 16px; }
    .gallery-arrow { width: 36px; height: 36px; }
    .gallery-arrow.prev { left: 0.5rem; }
    .gallery-arrow.next { right: 0.5rem; }
    .gallery-thumb { width: 56px; height: 56px; }
    
    .prompt-main-title { font-size: 1.5rem; }
    .pill-badge { font-size: 0.7rem; padding: 0.35rem 1rem; }
    
    .glass-prompt-box { padding: 1.25rem; border-radius: 16px; }
    .glass-header { flex-direction: column; gap: 1rem; }
    .glass-btn-save { width: 100%; justify-content: center; }
    .glass-text-area { padding: 1rem; font-size: 0.9rem; max-height: 250px; }
    .glass-actions { flex-direction: column; gap: 0.75rem; }
    .glass-btn { padding: 0.875rem; font-size: 0.95rem; }
    
    .share-card { padding: 1.25rem; }
    .share-icons-scroll { gap: 0.75rem; }
    .share-circle-btn { width: 42px; height: 42px; min-width: 42px; }
    
    .rating-card { padding: 1.25rem; }
    .rating-score { font-size: 2.5rem; }
    .rating-stars-display svg { width: 20px; height: 20px; }
    .interactive-stars svg { width: 28px; height: 28px; }
    
    .meta-card { padding: 1.25rem; }
    .tag-pill { padding: 0.4rem 0.875rem; font-size: 0.85rem; }
    
    .diverse-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .diverse-img-wrap { height: 220px; }
    .diverse-content { padding: 1.25rem; }
    .diverse-content h3 { font-size: 1.1rem; }
    
    .style-grid-new { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .style-card-new { padding: 1.5rem 0.75rem; }
    .style-icon-new { width: 52px; height: 52px; font-size: 1.25rem; }
    .style-card-new h4 { font-size: 0.95rem; }
    
    .tabs { gap: 1rem; overflow-x: auto; justify-content: flex-start; padding: 0 1rem; }
    .tab { font-size: 0.9rem; white-space: nowrap; }
    
    .feedback-btn { width: 100%; }
    .feedback-modal-content { padding: 1.5rem; margin: 1rem; }
    
    html { overflow-x: hidden; max-width: 100%; }
    * { max-width: 100%; }
}

.load-more-btn {
    background: var(--primary);
    color: white;
    padding: 1rem 3rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px -5px rgba(0, 168, 120, 0.3);
}
.load-more-btn:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 15px 25px -5px rgba(0, 168, 120, 0.4);
}
.load-more-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .prompt-feed {
        grid-template-columns: 1fr !important;
    }
}

.card {
    position: relative;
    width: 100%;
    max-width: 420px;
    margin: 0 auto 2rem auto;
    border-radius: 28px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 30px rgba(20,30,60,0.10);
}

.mobile-menu-btn {
    background: var(--bg-surface); border: none; width: 40px; height: 40px;
    border-radius: 10px; display: flex; align-items: center; justify-content: center;
    color: var(--text-dark); cursor: pointer; transition: transform 0.2s;
}
.mobile-menu-btn:hover { transform: scale(1.05); }

@media (max-width: 768px) {
    .main-nav { display: none; }
}

.mobile-menu-overlay {
    position: fixed; inset: 0; background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px); z-index: 998;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.mobile-menu-overlay.active { opacity: 1; pointer-events: auto; }

.mobile-menu-drawer {
    position: fixed; top: 0; right: -320px; width: 300px; height: 100vh;
    background: var(--bg-card); z-index: 999;
    box-shadow: -10px 0 30px rgba(0,0,0,0.1);
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; flex-direction: column; padding: 1.5rem;
}
.mobile-menu-drawer.active { right: 0; }

.drawer-header {
    display: flex; align-items: center; gap: 0.75rem; margin-bottom: 2rem;
    padding-bottom: 1rem; border-bottom: 1px solid var(--border);
}
.close-menu-btn {
    margin-left: auto; background: var(--bg-surface); border: none;
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}

.drawer-nav { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; overflow-y: auto; }
.drawer-link {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem; border-radius: 12px; color: var(--text-dark);
    font-weight: 600; text-decoration: none; transition: background 0.2s;
}
.drawer-link:hover { background: var(--bg-surface); color: var(--primary); }
.drawer-link svg { color: var(--text-muted); }

.drawer-footer { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--border); }

.search-box {
    display: flex;
    align-items: center;
    width: 100%;
    background: #fff;
    border: 2px solid var(--primary, #00A878);
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 0 4px 16px -4px rgba(0, 168, 120, 0.15);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border, #E2E8E4);
}

.premium-gallery-card,
.prompt-header-section,
.premium-prompt-box,
.share-card,
.rating-card,
.meta-card {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.prompt-sidebar {
    display: none;
}

@media (min-width: 900px) {
    .prompt-layout-grid {
        display: grid;
        grid-template-columns: 1fr 300px;
        gap: 2rem;
        align-items: start;
        max-width: 1100px;
        margin: 0 auto;
    }
    .prompt-main-column {
        min-width: 0;
    }
    .prompt-sidebar {
        display: block;
        position: sticky;
        top: 100px;
        background: var(--bg-card, #fff);
        border: 1px solid var(--border, #E2E8E4);
        border-radius: 20px;
        padding: 1rem;
        box-shadow: var(--shadow-sm, 0 2px 8px -2px rgba(0,168,120,0.05));
    }
}

.sidebar-widget {
    padding: 1.25rem 0.25rem;
    border-top: 1px solid var(--border, #E2E8E4);
}
.prompt-sidebar > .sidebar-widget:first-of-type {
    border-top: none;
}
.sidebar-widget-title {
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--text-dark, #0F172A);
    margin-bottom: 0.85rem;
}
.sidebar-mini-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.4rem 0;
    text-decoration: none;
}
.sidebar-mini-row img,
.sidebar-mini-thumb-empty {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg-surface, #F1F5F2);
}
.sidebar-mini-row span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark, #0F172A);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sidebar-pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
}
.sidebar-pill {
    background: var(--primary-light, #D1FAE5);
    color: var(--primary-dark, #065F46);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    text-decoration: none;
}
.sidebar-widget-link {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary, #00A878);
    text-decoration: none;
}
.sidebar-templates-cta p {
    font-size: 0.85rem;
    color: var(--text-muted, #64748B);
    line-height: 1.5;
    margin-bottom: 0.85rem;
}

.auth-page-wrap {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.25rem;
    background:
        radial-gradient(circle at 15% 10%, rgba(0, 168, 120, 0.10) 0%, transparent 45%),
        radial-gradient(circle at 85% 90%, rgba(62, 207, 142, 0.10) 0%, transparent 45%);
}

.auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--bg-card, #fff);
    border-radius: 28px;
    padding: 2.75rem 2.25rem;
    box-shadow: 0 20px 60px -15px rgba(0, 168, 120, 0.18), 0 4px 12px rgba(20, 30, 60, 0.06);
    border: 1px solid var(--border, #E2E8E4);
    position: relative;
    overflow: hidden;
}

.auth-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 6px;
    background: var(--gradient-primary, linear-gradient(135deg, #00A878 0%, #34D399 100%));
}

.auth-icon-wrap {
    width: 72px;
    height: 72px;
    margin: 0.5rem auto 1.5rem;
    border-radius: 20px;
    background: var(--gradient-primary, linear-gradient(135deg, #00A878 0%, #34D399 100%));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px -6px rgba(0, 168, 120, 0.45);
    color: #fff;
}

.auth-title {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-weight: 800;
    font-size: 1.75rem;
    text-align: center;
    color: var(--text-dark, #0F172A);
    margin-bottom: 0.4rem;
    letter-spacing: -0.02em;
}

.auth-subtitle {
    text-align: center;
    color: var(--text-muted, #64748B);
    font-size: 0.95rem;
    margin-bottom: 2rem;
}

.auth-alert {
    padding: 0.9rem 1.1rem;
    border-radius: 14px;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.auth-alert.error { background: #FEE2E2; color: #DC2626; }
.auth-alert.success { background: var(--primary-light, #D1FAE5); color: var(--primary-dark, #065F46); }

.auth-form-group {
    margin-bottom: 1.25rem;
    position: relative;
}
.auth-form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark, #0F172A);
    margin-bottom: 0.5rem;
}
.auth-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.auth-input-wrap svg {
    position: absolute;
    left: 16px;
    color: var(--text-muted, #64748B);
    pointer-events: none;
    width: 18px;
    height: 18px;
}
.auth-input-wrap input {
    width: 100%;
    padding: 0.95rem 1rem 0.95rem 3rem;
    border: 1.5px solid var(--border, #E2E8E4);
    border-radius: 14px;
    font-size: 0.95rem;
    font-family: inherit;
    background: var(--bg-surface, #F1F5F2);
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.auth-input-wrap input:focus {
    outline: none;
    border-color: var(--primary, #00A878);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(0, 168, 120, 0.12);
}

.auth-submit-btn {
    width: 100%;
    padding: 1rem;
    margin-top: 0.5rem;
    border: none;
    border-radius: 50px;
    background: var(--gradient-primary, linear-gradient(135deg, #00A878 0%, #34D399 100%));
    color: #fff;
    font-weight: 700;
    font-size: 1.02rem;
    cursor: pointer;
    box-shadow: 0 10px 24px -8px rgba(0, 168, 120, 0.5);
    transition: transform 0.2s, box-shadow 0.2s;
}
.auth-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -8px rgba(0, 168, 120, 0.6);
}
.auth-submit-btn:active { transform: translateY(0); }

.auth-links {
    text-align: center;
    margin-top: 1.75rem;
    font-size: 0.9rem;
    color: var(--text-muted, #64748B);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.auth-links a {
    color: var(--primary, #00A878);
    font-weight: 600;
    text-decoration: none;
}
.auth-links a:hover { text-decoration: underline; }

.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.25rem 0 0.5rem;
    color: var(--text-muted, #64748B);
    font-size: 0.8rem;
}
.auth-divider::before, .auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border, #E2E8E4);
}

@media (max-width: 480px) {
    .auth-card { padding: 2rem 1.5rem; border-radius: 22px; }
    .auth-title { font-size: 1.5rem; }
}

.stat-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
}
.stat-card-link:hover { transform: translateY(-3px); }
.stat-card-link::after {
    content: "View →";
    position: absolute;
    bottom: 1rem; right: 1.25rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary, #00A878);
    opacity: 0;
    transition: opacity 0.2s;
}
.stat-card-link:hover::after { opacity: 1; }

.action-btn-group {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
}
.btn-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.6rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.btn-pill-primary {
    background: var(--gradient-primary, linear-gradient(135deg, #00A878 0%, #34D399 100%));
    color: #fff;
    box-shadow: 0 8px 20px -6px rgba(0, 168, 120, 0.4);
}
.btn-pill-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -6px rgba(0, 168, 120, 0.5); }
.btn-pill-outline {
    background: var(--bg-card, #fff);
    color: var(--text-dark, #0F172A);
    border-color: var(--border, #E2E8E4);
}
.btn-pill-outline:hover { border-color: var(--primary, #00A878); color: var(--primary, #00A878); transform: translateY(-2px); }
.btn-pill-danger {
    background: #fff;
    color: #DC2626;
    border-color: #FECACA;
}
.btn-pill-danger:hover { background: #FEE2E2; transform: translateY(-2px); }

.collections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}
.collection-card {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #E2E8E4);
    border-radius: 20px;
    padding: 1.5rem;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: var(--shadow-sm, 0 2px 8px -2px rgba(0,168,120,0.05));
}
.collection-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md, 0 10px 40px -10px rgba(0,168,120,0.08)); }
.collection-card-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--primary-light, #D1FAE5);
    color: var(--primary-dark, #065F46);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1rem;
}
.collection-card h3 { font-size: 1.1rem; margin-bottom: 0.25rem; color: var(--text-dark, #0F172A); }
.collection-card span { font-size: 0.85rem; color: var(--text-muted, #64748B); }

.new-collection-form {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}
.new-collection-form input[type="text"] {
    flex: 1;
    min-width: 200px;
    padding: 0.85rem 1.1rem;
    border: 1.5px solid var(--border, #E2E8E4);
    border-radius: 14px;
    font-size: 0.95rem;
}
.new-collection-form input[type="text"]:focus {
    outline: none;
    border-color: var(--primary, #00A878);
    box-shadow: 0 0 0 4px rgba(0, 168, 120, 0.12);
}

.prompt-mini-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem;
    border: 1px solid var(--border, #E2E8E4);
    border-radius: 14px;
    margin-bottom: 0.75rem;
    background: var(--bg-card, #fff);
}
.prompt-mini-row img {
    width: 52px; height: 52px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}
.prompt-mini-row .pmr-info { flex: 1; min-width: 0; }
.prompt-mini-row .pmr-info a {
    font-weight: 700;
    color: var(--text-dark, #0F172A);
    text-decoration: none;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.prompt-mini-row .pmr-info span { font-size: 0.8rem; color: var(--text-muted, #64748B); }

.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--bg-card, #fff);
    border: 2px dashed var(--border, #E2E8E4);
    border-radius: 20px;
    color: var(--text-muted, #64748B);
}

/* ============================================
   HOMEPAGE - Templates & Guides
   Same minimal thumbnail + title style already proven in the sidebar's
   "Latest Prompts" widget (.sidebar-mini-row) - small square image,
   title text, nothing else. Scaled up slightly for the homepage and
   arranged as a grid of rows rather than a single vertical list.
   ============================================ */
.th-mini-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.5rem 1.5rem;
}
.th-mini-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem 0.5rem;
    border-radius: 12px;
    text-decoration: none;
    transition: background 0.15s;
}
.th-mini-row:hover {
    background: var(--bg-surface, #F1F5F2);
}
.th-mini-row img {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg-surface, #F1F5F2);
}
.th-mini-row span {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-dark, #0F172A);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.th-mini-row:hover span {
    color: var(--primary, #00A878);
}
@media (max-width: 600px) {
    .th-mini-grid {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }
    .th-mini-row img {
        width: 48px;
        height: 48px;
    }
    .th-mini-row span {
        font-size: 0.85rem;
    }
}

/* ============================================
   Editor.js content rendering - public-facing styles for content
   saved through the new Editor.js editor (admin/tags.php's SEO
   Article field, and soon admin/articles.php too). Rendered via
   pb_editorjs_to_html() in includes/editorjs-render.php.
   ============================================ */
.editorjs-delimiter {
    border: none;
    border-top: 2px dotted var(--border, #E2E8E4);
    margin: 1.5rem auto;
    width: 60px;
}
.editorjs-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    display: block;
    overflow-x: auto;
}
.editorjs-table td {
    border: 1px solid var(--border, #E2E8E4);
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
}
.editorjs-checklist {
    list-style: none;
    padding-left: 0;
}
.editorjs-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
}
.editorjs-checklist-box {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border, #E2E8E4);
    border-radius: 5px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    margin-top: 0.1rem;
}
.editorjs-checklist li.is-checked .editorjs-checklist-box {
    background: var(--primary, #00A878);
    border-color: var(--primary, #00A878);
    color: #fff;
}
.editorjs-checklist li.is-checked {
    color: var(--text-muted, #64748B);
    text-decoration: line-through;
}
.editorjs-code-wrap {
    position: relative;
}
.editorjs-code-copy-btn {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    background: rgba(255, 255, 255, 0.12);
    color: #E2E8E4;
    border: none;
    border-radius: 6px;
    padding: 0.3rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}
.editorjs-code-copy-btn:hover {
    background: rgba(255, 255, 255, 0.22);
}
.editorjs-code {
    background: #0F172A;
    color: #E2E8E4;
    padding: 1rem 1.25rem;
    border-radius: 10px;
    overflow-x: auto;
    font-size: 0.85rem;
    line-height: 1.6;
}
.editorjs-warning {
    background: #FEF3C7;
    border-left: 4px solid #D97706;
    color: #92400E;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin: 1rem 0;
}
.editorjs-warning strong {
    display: block;
    margin-bottom: 0.3rem;
}
.editorjs-image-figure {
    margin: 1.5rem 0;
}
.editorjs-image-figure img {
    width: 100%;
    border-radius: 12px;
}
.editorjs-image-figure.is-stretched {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.editorjs-image-figure.is-stretched img {
    border-radius: 0;
}
.editorjs-image-figure figcaption {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted, #64748B);
    margin-top: 0.5rem;
}

/* Defensive paragraph spacing specifically for Editor.js-rendered
   content (SEO articles on tag pages, Instagram Bio category pages,
   and blog articles) - ensures visible spacing between separate
   paragraph blocks regardless of what .template-article's own base
   styling does, since paragraphs from Editor.js should never visually
   run together. */
.template-article p,
.library-seo-article p {
    margin-bottom: 1.1rem;
    line-height: 1.7;
}
.template-article p:last-child,
.library-seo-article p:last-child {
    margin-bottom: 0;
}

/* Reading width. Previously this content had no max-width at all, so on
   a wide screen it spanned the full 1200px container - lines got long
   enough that the eye loses its place tracking back to the start of the
   next one. Capping the text column (not the section) is the standard
   fix; roughly 70-75 characters per line is the usual comfortable
   range, which is what 68ch lands near for this font size.
   Deliberately scoped to the article body only - tables and images
   inside it are exempted below, since those genuinely benefit from the
   extra width. */
.library-seo-article,
.template-article {
    max-width: 68ch;
    margin-left: auto;
    margin-right: auto;
}
.library-seo-article table,
.template-article table,
.library-seo-article figure,
.template-article figure,
.library-seo-article img,
.template-article img {
    max-width: 100%;
}

/* Headings inside article content. These had no margin rules of their
   own, so they fell back to browser defaults - which this stylesheet's
   own global "*, *::before, *::after { margin: 0 }" reset near the top
   already removed. The result was headings sitting flush against the
   paragraph above them, reading as one block rather than as a new
   section. More space above than below is deliberate: it groups each
   heading with the text it introduces instead of leaving it floating
   equidistant between two paragraphs. */
.library-seo-article h2,
.template-article h2 {
    margin-top: 2.5rem;
    margin-bottom: 0.9rem;
    line-height: 1.3;
}
.library-seo-article h3,
.template-article h3 {
    margin-top: 1.9rem;
    margin-bottom: 0.6rem;
    line-height: 1.35;
}
/* No gap above the very first heading - it already sits below the
   article's own top border and padding. */
.library-seo-article > h2:first-child,
.template-article > h2:first-child,
.library-seo-article > h3:first-child,
.template-article > h3:first-child {
    margin-top: 0;
}

/* Lists inside article content. Same root cause as the headings: the
   global reset strips padding, and without padding-left a list has no
   room to render its own bullets or numbers, so they were being
   clipped out of view entirely. list-style-type is set explicitly
   rather than relying on the default, since a "list-style: none" rule
   exists elsewhere in this stylesheet for navigation lists. */
.library-seo-article ul,
.template-article ul,
.library-seo-article ol,
.template-article ol {
    padding-left: 1.5rem;
    margin-top: 0.9rem;
    margin-bottom: 1.4rem;
}
.library-seo-article ul,
.template-article ul {
    list-style-type: disc;
}
.library-seo-article ol,
.template-article ol {
    list-style-type: decimal;
}
.library-seo-article li,
.template-article li {
    margin-bottom: 0.55rem;
    line-height: 1.7;
    /* Overrides the list-style:none rule that applies to lists
       elsewhere in this stylesheet, which would otherwise inherit down
       and hide these markers too. */
    list-style: inherit;
}
.library-seo-article li:last-child,
.template-article li:last-child {
    margin-bottom: 0;
}

/* Mobile readability. The 68ch cap above does nothing on a phone - a
   typical phone viewport is around 390px, already far narrower than
   68ch, so that rule only ever affected desktop. What actually makes
   lines feel too long on a small screen is text running close to both
   edges with no breathing room, combined with a font size small enough
   to fit an uncomfortable number of characters per line. This addresses
   both directly. */
@media (max-width: 600px) {
    .library-seo-article,
    .template-article {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .library-seo-article p,
    .template-article p,
    .library-seo-article li,
    .template-article li {
        font-size: 1.02rem;
        line-height: 1.75;
    }
    /* Headings scaled down too - desktop-sized headings on a phone wrap
       awkwardly across three or four lines and visually dominate the
       text they're meant to introduce. Spacing tightened slightly from
       the desktop values, since vertical space is scarcer here. */
    .library-seo-article h2,
    .template-article h2 {
        font-size: 1.3rem;
        line-height: 1.35;
        margin-top: 2rem;
        margin-bottom: 0.75rem;
    }
    .library-seo-article h3,
    .template-article h3 {
        font-size: 1.1rem;
        line-height: 1.4;
        margin-top: 1.5rem;
        margin-bottom: 0.5rem;
    }
    .library-seo-article ul,
    .template-article ul,
    .library-seo-article ol,
    .template-article ol {
        padding-left: 1.35rem;
    }
}

/* Ad grid slot - renders as one item within a prompt-card grid
   (homepage, category pages, related-prompts section), not a
   separate full-width block. Relies on CSS Grid's default behavior:
   auto-fill sizes the width the same as any other grid item, and rows
   with no explicit height stretch every item in that row to match the
   tallest one automatically. */
.ad-grid-slot {
    border-radius: 16px;
    overflow: hidden;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #E2E8E4);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
}
.ad-grid-slot:empty {
    display: none;
}

/* ===== prompt-card.css ===== */
/* ============================================
   UNIFIED PROMPT CARD (used site-wide via render_prompt_card())
   ============================================ */
.pcard {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-card, #fff);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 6px 24px -8px rgba(0, 168, 120, 0.15);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pcard:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px -12px rgba(0, 168, 120, 0.25);
}

/* The actual clickable "open this prompt" link - previously had zero
   CSS rules at all, meaning it defaulted to display:inline (the
   standard browser default for <a> tags) while wrapping a
   position:relative block-level div. That mismatch between the link's
   own inline box and its block-level content is very likely why clicks
   weren't landing correctly. Made explicitly block-level and positioned
   so the link's actual clickable area reliably matches what's visually
   shown, instead of leaving that to inconsistent browser default
   behavior for block content inside an inline element. */
.pcard__media-link {
    display: block;
    position: relative;
    z-index: 0;
    cursor: pointer;
    text-decoration: none;
}

.pcard__media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--bg-surface, #F1F5F2);
}
.pcard__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pcard__badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    background: #fff;
    color: var(--text-dark, #0F172A);
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.pcard__like {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: #fff;
    border: none;
    border-radius: 20px;
    padding: 0.5rem 0.7rem 0.55rem;
    color: var(--text-dark, #0F172A);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: transform 0.15s ease, color 0.15s ease;
}
.pcard__like:hover { transform: scale(1.08); }
.pcard__like.liked { color: #EF4444; }
.pcard__like svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}
/* This is what actually makes the heart fill red on like - a stylesheet
   rule always overrides an SVG's inline fill attribute (which is what
   the JS in handleLike() sets), no matter what JS does or when. Without
   this explicit override, the base "fill: none" rule above wins every
   time and the heart never visually fills. */
.pcard__like.liked svg {
    fill: currentColor;
}
.pcard__like .like-count {
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
}

.pcard__fade {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 58%;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.55) 40%,
        var(--bg-card, #fff) 92%);
    pointer-events: none;
    z-index: 1;
}

.pcard__caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: 1rem 1.15rem 0.85rem;
}
.pcard__title {
    font-weight: 800;
    font-size: 1.02rem;
    color: var(--text-dark, #0F172A);
    margin: 0 0 0.3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pcard__desc {
    font-size: 0.84rem;
    line-height: 1.4;
    color: var(--text-muted, #64748B);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pcard__footer {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0 1.1rem 1.1rem;
    background: var(--bg-card, #fff);
}

.pcard__copy {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--gradient-primary, linear-gradient(135deg, #00A878 0%, #34D399 100%));
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    border: none;
    border-radius: 999px;
    padding: 0.55rem 1.15rem;
    cursor: pointer;
    box-shadow: 0 6px 16px -4px rgba(0, 168, 120, 0.4);
    transition: transform 0.15s ease;
}
.pcard__copy:hover { transform: translateY(-1px); }
.pcard__copy.copied { background: #059669; }

.pcard__share {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface, #F1F5F2);
    border: none;
    color: var(--text-dark, #0F172A);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}
.pcard__share:hover {
    background: var(--primary-light, #D1FAE5);
    color: var(--primary-dark, #065F46);
}

.pcard__author {
    margin-left: auto;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-muted, #64748B);
    white-space: nowrap;
}

@media (max-width: 480px) {
    .pcard { border-radius: 22px; }
    .pcard__title { font-size: 0.95rem; }
}
/* ===== tabs.css ===== */
/* ============================================
   HEADER: fixed, slides + fades away on scroll down,
   reappears on scroll up. Sits ABOVE the tabs bar (z-index),
   so while visible it simply covers the tabs bar in the same
   vertical space - no coordination logic needed between them.
   ============================================ */
.site-header {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    width: 100%;
    z-index: 100;
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.35s ease;
    will-change: transform, opacity;
}
.site-header.header-hidden {
    transform: translateY(-100%);
    opacity: 0;
}

/* Static padding reserves the header's space in the page layout - no JS
   measurement, no spacer element. A plain fixed number, same technique
   used by every production site that does this (including the reference
   you shared - it uses a flat 100px, no dynamic calculation at all). */
#main-content {
    padding-top: 88px;
}

/* ============================================
   GLASS SORT TABS (Latest / Trending / Popular)
   ============================================ */
/* position:fixed, not sticky - sticky was confirmed to silently fail on
   this site (almost certainly an ancestor element somewhere with
   overflow set to non-visible, which breaks sticky with zero warning).
   Fixed doesn't share that fragility, so this is the reliable choice
   even though it means a couple of small JS lines below to shift it up
   when the header hides (sticky would've done that automatically). */
.tabs {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    padding: 0.4rem;
    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.1);
    width: fit-content;
    max-width: calc(100% - 2rem);
    margin: 0 auto 1.5rem;

    /* Normal document flow by default - sits right where it's placed in
       the HTML (below the Popular Tags row), not floating on load. */
    position: relative;
    z-index: 40;
    transition: box-shadow 0.3s ease;
}
/* Only applied once JS confirms the page has scrolled past the tabs'
   natural position - this is what makes it pin to the top. Toggled
   together with the header's .header-hidden class, as one combined
   event (see app.js) - matches the requested behavior exactly: scrolling
   further into the page pins the tabs AND hides the header together;
   scrolling back un-pins and un-hides them together. */
.tabs.is-pinned {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.18);
}
.tabs:hover {
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.14);
}

/* Reserves the tabs bar's space in the page layout only while pinned
   (position:fixed removes it from flow at that point) - grows/shrinks
   via JS exactly when .is-pinned toggles, matching the tabs bar's real
   height rather than a guessed static number, since this one genuinely
   needs to be precise to avoid a content jump. */
.sort-tabs-spacer {
    height: 0;
}

.tab {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1.15rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-muted, #64748B);
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    transition: color 0.2s ease, transform 0.2s ease;
}
.tab svg { flex-shrink: 0; position: relative; z-index: 1; }
.tab span, .tab { z-index: 1; }

.tab:hover:not(.active) {
    background: rgba(0, 0, 0, 0.04);
    color: var(--text-dark, #0F172A);
    transform: scale(1.03);
}
.tab:active:not(.active) { transform: scale(0.97); }

/* Rainbow gradients - a different pairing at every step from the
   reference site's palette, not a copy of it. */
.tab.active {
    color: #fff;
    transform: scale(1.02);
}
.tab[data-sort="latest"].active {
    background: linear-gradient(135deg, #0EA5E9 0%, #6366F1 100%);
    box-shadow: 0 8px 20px -6px rgba(99, 102, 241, 0.5);
}
.tab[data-sort="trending"].active {
    background: linear-gradient(135deg, #FB923C 0%, #EC4899 100%);
    box-shadow: 0 8px 20px -6px rgba(236, 72, 153, 0.5);
}
.tab[data-sort="popular"].active {
    background: linear-gradient(135deg, #A855F7 0%, #D946EF 100%);
    box-shadow: 0 8px 20px -6px rgba(217, 70, 239, 0.5);
}

/* Subtle shimmer sweep across the active tab's gradient - not a static
   fill, a slow-drifting highlight that ties into the rainbow theme. */
.tab.active::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg,
        transparent 20%,
        rgba(255, 255, 255, 0.35) 45%,
        transparent 70%);
    background-size: 200% 100%;
    animation: tabShimmer 3.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes tabShimmer {
    0% { background-position: 150% 0; }
    100% { background-position: -50% 0; }
}

@media (max-width: 480px) {
    .tabs.is-pinned {
        left: 1rem;
        right: 1rem;
        transform: none;
        width: auto;
        max-width: none;
    }
    .tab {
        flex: 1;
        justify-content: center;
        padding: 0.6rem 0.5rem;
        font-size: 0.82rem;
    }
}

/* ============================================
   CARD ANIMATIONS
   ============================================ */

/* Staggered entrance - cards fade/slide in one after another instead of
   popping in all at once, whether on initial load, tab switch, or Load
   More. */
.pcard {
    animation: pcardIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes pcardIn {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}
.prompt-feed .pcard:nth-child(1) { animation-delay: 0ms; }
.prompt-feed .pcard:nth-child(2) { animation-delay: 60ms; }
.prompt-feed .pcard:nth-child(3) { animation-delay: 120ms; }
.prompt-feed .pcard:nth-child(4) { animation-delay: 180ms; }
.prompt-feed .pcard:nth-child(5) { animation-delay: 240ms; }
.prompt-feed .pcard:nth-child(6) { animation-delay: 300ms; }
.prompt-feed .pcard:nth-child(n+7) { animation-delay: 340ms; }

/* Color-matched glow: on hover, each card's shadow tints toward an
   average color sampled from its own image (set inline per-card by JS -
   see app.js). Falls back to the brand color if JS hasn't run yet or a
   color couldn't be sampled. */
.pcard {
    --pcard-glow: rgba(0, 168, 120, 0.35);
    transition: transform 0.3s ease, box-shadow 0.4s ease;
}
.pcard:hover {
    box-shadow: 0 20px 45px -12px var(--pcard-glow);
}

.logo-image {
    height: 40px;
    width: auto;
    display: block;
}

/* ============================================
   LIKE BUTTON: SELF-CONTAINED RAINBOW BURST
   ============================================ */
/* Deliberately built to NEVER leave the button's own small bounding box -
   no getBoundingClientRect(), no position:fixed overlay, no escaping the
   card's overflow:hidden. Three previous attempts at an escaping-particle
   effect all broke in different ways (clipping, oversized/mispositioned
   overlay) because they depended on viewport math and clipping-ancestor
   interactions. This has none of those failure points by design: a
   rainbow ring pulses from directly behind the button and fades within
   ~20px of it, well inside the button's own safe area (it sits 14px from
   the card edge), so there's nothing left that CAN go wrong the same way. */
.pcard__like::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 999px;
    background: conic-gradient(from 0deg,
        #FF3B30, #FF9500, #FFCC00, #34C759, #00A878, #007AFF, #AF52DE, #FF3B30);
    opacity: 0;
    transform: scale(0.5);
    z-index: -1;
    pointer-events: none;
}
.pcard__like.liked::before {
    animation: pbRainbowBurst 0.6s ease-out;
}
@keyframes pbRainbowBurst {
    0% { opacity: 0.85; transform: scale(0.5); }
    100% { opacity: 0; transform: scale(1.7); }
}

.pcard__like.liked svg {
    animation: pbHeartPop 0.4s cubic-bezier(.17, .89, .32, 1.49);
}
@keyframes pbHeartPop {
    0% { transform: scale(1); }
    30% { transform: scale(0.7); }
    60% { transform: scale(1.3); }
    100% { transform: scale(1); }
}


/* ============================================
   CLEAN PILL BREADCRUMB (prompt detail page)
   ============================================ */
.breadcrumb-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #E2E8E4);
    border-radius: 999px;
    padding: 0.5rem 1rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.08);
    max-width: 100%;
    overflow: hidden;
}
.breadcrumb-home {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #64748B);
    flex-shrink: 0;
    transition: color 0.2s ease;
}
.breadcrumb-home:hover { color: var(--primary, #00A878); }

.breadcrumb-chevron {
    color: var(--border, #E2E8E4);
    flex-shrink: 0;
}

.breadcrumb-link {
    color: var(--text-muted, #64748B);
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    transition: color 0.2s ease;
}
.breadcrumb-link:hover { color: var(--primary, #00A878); }

.breadcrumb-current {
    display: inline-flex;
    align-items: center;
    background: var(--gradient-primary, linear-gradient(135deg, #00A878 0%, #34D399 100%));
    color: #fff;
    font-weight: 700;
    font-size: 0.78rem;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

@media (max-width: 480px) {
    .breadcrumb-pill { padding: 0.45rem 0.8rem; gap: 0.4rem; }
    .breadcrumb-link { font-size: 0.8rem; }
    .breadcrumb-current { font-size: 0.72rem; padding: 0.28rem 0.7rem; max-width: 120px; }
}
/* ===== neo-brutal.css ===== */
/* ============================================================
   PROMPT BIRD — NEO-BRUTALIST DESIGN SYSTEM (v1)
   ============================================================
   Bold color, thick borders, hard "offset" shadows with no blur,
   confident chunky shapes - not stark black/white raw brutalism.
   Jade/mint stays the primary brand color; a warm coral accent is
   added for secondary emphasis and contrast pops.

   Most of the site already references shared CSS variables
   (--primary, --shadow-*, --border, etc. with fallback values), so
   redefining them here cascades the new look across components this
   file doesn't touch directly. Hardcoded-value components (soft
   pill shapes, blurred shadows) are explicitly overridden below.
   ================================================================ */

:root {
    /* Core palette - jade/mint stays primary, punched up slightly */
    --primary: #00A878;
    --primary-hover: #00875F;
    --primary-light: #D1FAE5;
    --primary-dark: #065F46;
    --gradient-primary: linear-gradient(135deg, #00A878 0%, #2DD4A0 100%);
    --link-decoration: none;

    --accent: #FF5A36;
    --accent-dark: #D6431F;

    --ink: #0F172A;

    --shadow-sm: 3px 3px 0 var(--ink);
    --shadow-md: 5px 5px 0 var(--ink);
    --shadow-lg: 7px 7px 0 var(--ink);
    --shadow-accent: 5px 5px 0 var(--accent-dark);

    --border: #0F172A;
    --border-width: 2.5px;

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, .hero-title, .card__title, .pcard__title {
    letter-spacing: -0.03em;
    font-weight: 800;
}
.hero-title {
    font-weight: 900;
}

/* ============================================
   HEADER
   ============================================ */
.site-header {
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: var(--border-width) solid var(--ink) !important;
    box-shadow: 0 4px 0 rgba(15, 23, 42, 0.06);
}
.logo-icon-m {
    animation: none !important;
    background: none !important;
    -webkit-text-fill-color: var(--ink) !important;
    color: var(--ink) !important;
    filter: none !important;
    font-weight: 900 !important;
    
    
}
.icon-btn {
    border: var(--border-width) solid var(--ink);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.icon-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--ink);
}
.icon-btn:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 var(--ink);
}

/* ============================================
   SEARCH BOX
   ============================================ */
.search-container {
    overflow: visible !important;
    position: relative; width: 100%; max-width: 315px; margin: 2rem auto;
    
    }
.search-input-pill {
    box-sizing: border-box !important;
    
    border-radius: var(--radius-sm) !important;
    
    background: #fff !important;
    
}
.btn-search {
    background: var(--primary) !important;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 10px;
    
    
    
    
}

/* ============================================
   TABS
   ============================================ */
.tabs {
    margin-top: 5px;
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: var(--border-width) solid var(--ink) !important;
    border-radius: var(--radius-sm) !important;
}
.tabs.is-pinned {
    box-shadow: var(--shadow-lg) !important;
}
.tab {
    border-radius: var(--radius-sm);
}
.tab.active {
    background: var(--gradient-primary) !important;
    box-shadow: none !important;
}
.tab.active::after {
    display: none;
}

/* ============================================
   PROMPT CARDS
   ============================================ */
.pcard {
    border-radius: var(--radius-lg) !important;
transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    border: var(--border-width) solid var(--ink);
    
}
.pcard:hover {
    
    box-shadow: 2px 2px 8px #111 !important;
}
.pcard__badge {
    border: 2px solid var(--ink);
    border-radius: var(--radius-sm);
    box-shadow: 2px 2px 0 var(--ink);
}
.pcard__like {
    border: 2px solid var(--ink);
    border-radius: var(--radius-sm);
    box-shadow: 2px 2px 0 var(--ink);
}
.pcard__copy {
    background: #16B528;
    border-radius: var(--radius-sm) !important;
    box-shadow: 3px 3px 5px #DCE3E0 !important;
    transition: transform 0.12s ease, box-shadow 0.12s ease !important;
    color: #fff;
    font-weight: bold;
}
.pcard__copy:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 5px 5px 5px #DCE3E0 !important;
    background:#7878FF;
}
.pcard__copy.copied {
    background: #7878FF;
}
.pcard__share {
    border: 2.5px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
}

/* ============================================
   BUTTONS (generic .btn classes used site-wide)
   ============================================ */
.btn, .btn-primary, .btn-outline, .btn-view-all, .load-more-btn {
    border-radius: var(--radius-sm) !important;
    border: var(--border-width) solid var(--ink) !important;
    
    font-weight: 700 !important;
    transition: transform 0.12s ease, box-shadow 0.12s ease !important;
}
.btn:hover, .btn-primary:hover, .btn-outline:hover, .btn-view-all:hover, .load-more-btn:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    border: 1px solid #DCF2DC;
}
.btn:active, .btn-primary:active, .load-more-btn:active {
    transform: translate(2px, 2px) !important;
    box-shadow: 1px 1px 0 var(--ink) !important;
}
.btn-primary, .btn-view-all, .load-more-btn {
    background: #16B528;
    color: #fff !important;
}
.btn-outline {
    background: #fff !important;
    color: var(--ink) !important;
}

/* ============================================
   BREADCRUMB PILL
   ============================================ */
.breadcrumb-pill {
    
    border-radius: var(--radius-sm) !important;
}
.breadcrumb-current {
    background: var(--accent) !important;
    border-radius: var(--radius-sm) !important;
}

/* ============================================
   STYLE / CATEGORY CARDS
   ============================================ */
.style-card {
    border: var(--border-width) solid var(--ink) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: transform 0.12s ease, box-shadow 0.12s ease !important;
}
.style-card:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: var(--shadow-md) !important;
}
.style-icon {
    border-radius: var(--radius-sm) !important;
    border: 2px solid var(--ink);
}

/* ============================================
   FAQ / KEY TAKEAWAYS BOX (homepage content)
   ============================================ */
.key-takeaways-box {
    border: var(--border-width) solid var(--ink) !important;
    box-shadow: var(--shadow-md) !important;
}
.follow-us-card {
    border: var(--border-width) solid var(--ink) !important;
    box-shadow: var(--shadow-lg) !important;
}

.mail-it{
    border: var(--border-width) solid var(--ink) !important;
    box-shadow: var(--shadow-lg) !important;
    text-decoration: var(--link-decoration)!important;

}

.contact-form-box {
    border: var(--border-width) solid var(--ink) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* ============================================
   SCROLL-TO-TOP
   ============================================ */
.scroll-top {
    border: var(--border-width) solid orange !important;
   box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
   background: #A6B3F7 ;
}

/* Real, working progress ring - added now that a real matching SVG
   element exists in footer.php. Self-positioned via inset:0 and
   percentage sizing, so it automatically fills whatever size/shape
   .scroll-top actually is from its own base rules elsewhere, without
   needing to know or hardcode those dimensions here. r=19 on the
   circles in the SVG markup keeps the exact circumference math
   (2 * PI * 19 ~= 119.4) the original scroll listener in app.js was
   already correctly written for. */
.scroll-top-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    pointer-events: none;
}
.scroll-top-ring-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.35);
    stroke-width: 3;
}
.scroll-top-ring-progress {
    fill: none;
    stroke: #fff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 119.4;
    stroke-dashoffset: 119.4;
    transition: stroke-dashoffset 0.1s linear;
}

/* ============================================
   DARK MODE ADJUSTMENTS
   ============================================ */
html[data-theme="dark"] {
    --ink: #F1F5F9;
}
html[data-theme="dark"] .site-header {
    background: var(--bg-card, #141B2D) !important;
    border-bottom-color: var(--ink) !important;
}
html[data-theme="dark"] .logo-icon-m {
    color: var(--ink) !important;
}
html[data-theme="dark"] .tabs,


html[data-theme="dark"] .breadcrumb-pill{

    background: var(--bg-card, #141B2D) !important;
    
}

html[data-theme="dark"] .pcard__badge,
html[data-theme="dark"] .pcard__like{
    background: #000;
    border: 1px solid #E1E1EB;
    box-shadow: none;
}

html[data-theme="dark"].search-input-pill{
    
    color: #000;
}




/* ========== BRUTALIST FOOTER ========== */
.brutal-container {
    font-family: 'Courier New', Courier, monospace;
    
}

.brutal-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* TOP STRIP */
.brutal-top {
    
    padding: 2.2rem 0;
}

.brutal-top .brutal-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.xbrutal-stamp {
    background: #111;
    color: #00A878;
    border: 5px solid #000;
    padding: 0.7rem 1.1rem;
    font-weight: 900;
    font-size: 0.9rem;
    line-height: 1.15;
    text-align: center;
    box-shadow: 5px 5px 0 #000;
    text-transform: uppercase;
}

.brutal-stamp { background: #111; color: #fff; border: 4px solid #B8E6FE; padding: 0.6rem 1rem; font-weight: 900; font-size: 0.85rem; line-height: 1.2; text-align: center; transform: rotate(-3deg); box-shadow: 6px 6px 0 #000; }


.stamp-2 { transform: rotate(6deg); background: #fff; color: #000; 
border: 4px solid #000;
    padding: 0.6rem 1rem;
    font-weight: 900;
    font-size: 0.85rem;
    line-height: 1.2;
    text-align: center;
    box-shadow: 4px 4px 0 #000;
    text-transform: uppercase;

}

.brutal-cta {
    font-family: 'Courier New', Courier, monospace;
    background: #FFD600;
    color: #000;
    font-weight: 900;
    font-size: 14px !important;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    padding: 1rem 2.8rem;
    border: 5px solid #000;
    box-shadow: 5px 5px 0 #000;
    text-decoration: none;
    transition: all 0.15s ease;
    display: inline-block;
}

.brutal-cta:hover {
    transform: translate(-4px, -4px);
    box-shadow: 12px 12px 0 #000;
    background: #fff;
}

.brutal-badge {
    background: #FF2D55;
    color: #fff;
    border: 4px solid #000;
    padding: 0.7rem 1.1rem;
    font-weight: 900;
    font-size: 1.1rem;
    transform: rotate(4deg);
    box-shadow: 5px 5px 0 #000;
}

.brutal-badge-2 {
    font-family: 'Courier New', Courier, monospace;
    background: #31C950;
    color: #fff;
    border: 4px solid #000;
    padding: 0.7rem 1.1rem;
    font-weight: 900;
    font-size: 1.1rem;
    transform: rotate(4deg);
    box-shadow: 5px 5px 0 #000;
}

/* MARQUEE */
.xbrutal-marquee {
    background: #31C950;
    overflow: hidden;
    white-space: nowrap;
    padding: 0.9rem 0;
}

.xbrutal-marquee-track {
    display: inline-block;
    animation: marquee 5s linear infinite;
    font-weight: 900;
    font-size: 1.05rem;
    letter-spacing: 1px;
    color: white;
}

.xbrutal-marquee-track span {
    display: inline-block;
    padding-right: 3rem;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}



/* ========== RESPONSIVE ========== */
@media (max-width: 900px) {
    .brutal-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    
    .brutal-links {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .brutal-logo {
        font-size: 2.4rem;
    }
}

@media (max-width: 640px) {
    .brutal-top .brutal-container {
        justify-content: center;
        text-align: center;
    }
    
    
    .brutal-cta {
        font-size: 1.15rem;
        padding: 0.9rem 2rem;
        order: -1;
        width: 100%;
        text-align: center;
    }
    
    .brutal-stamp,
    .brutal-badge {
        font-size: 0.8rem;
    }
    
    .brutal-bottom .brutal-container {
        flex-direction: column;
        gap: 0.3rem;
        text-align: center;
    }
    
    
}

.main-content {
    margin-top: -99px;
}

/* ===== theme-dark.css ===== */
/* ============================================
   DARK MODE
   Overrides the CSS custom properties style.css already uses everywhere
   (var(--bg-main), var(--text-dark), etc.) so switching theme re-colors
   the whole site without needing to touch every individual rule.
   ============================================ */
html[data-theme="dark"] {
    --bg-main: #0B1120;
    --bg-card: #141B2D;
    --bg-surface: #1B2438;

    --text-dark: #E8EDF4;
    --text-muted: #94A3B8;

    --border: #263248;

    --primary-light: #0B3B2E;
    --primary-dark: #6EE7B0;

    --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 20px 50px -15px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] body {
    background-color: var(--bg-main);
    color: var(--text-dark);
}

/* A handful of elements set colors with inline styles or hardcoded hex
   instead of CSS variables (e.g. #1c2430, #fff, #6b7280 in .card__* and
   the ppb-* prompt box), so they don't automatically follow the variable
   overrides above. Patched here rather than in style.css so the light
   theme's exact original colors stay untouched. */
html[data-theme="dark"] .card,
html[data-theme="dark"] .premium-gallery-card,
html[data-theme="dark"] .premium-prompt-box,
html[data-theme="dark"] .share-card,
html[data-theme="dark"] .meta-card,
html[data-theme="dark"] .diverse-card,
html[data-theme="dark"] .style-card,
html[data-theme="dark"] .style-card-new,
html[data-theme="dark"] .prompt-card,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .collection-card,
html[data-theme="dark"] .prompt-mini-row {
    background: var(--bg-card);
    border-color: var(--border);
}

html[data-theme="dark"] .card__title a,
html[data-theme="dark"] .card__title,
html[data-theme="dark"] .card-content h3 a,
html[data-theme="dark"] .prompt-main-title,
html[data-theme="dark"] .ppb-title,
html[data-theme="dark"] .pmr-info a {
    color: var(--text-dark);
}

html[data-theme="dark"] .card__desc,
html[data-theme="dark"] .card-content p,
html[data-theme="dark"] .ppb-subtitle,
html[data-theme="dark"] .prompt-meta {
    color: var(--text-muted);
}

html[data-theme="dark"] .ppb-text-container,
html[data-theme="dark"] .rating-card {
    background: var(--bg-surface);
    border-color: var(--border);
}

html[data-theme="dark"] .ppb-text-fade {
    background: linear-gradient(to bottom, rgba(20, 27, 45, 0) 0%, rgba(20, 27, 45, 1) 100%);
}

html[data-theme="dark"] .site-header {
    background: rgba(11, 17, 32, 0.7);
    border-bottom-color: var(--border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

html[data-theme="dark"] .site-footer,
html[data-theme="dark"] .mobile-menu-drawer {
    background: var(--bg-card);
    border-color: var(--border);
}

html[data-theme="dark"] .icon-btn {
    background: var(--bg-surface);
    color: var(--text-dark);
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background: var(--bg-surface);
    border-color: var(--border);
    color: var(--text-dark);
}

/* Toggle icon visibility is handled by JS (app.js), this just ensures
   both icons inherit the current theme's icon color correctly. */
html[data-theme="dark"] .theme-toggle {
    color: #FBBF24;
}

html[data-theme="dark"] .pcard,
html[data-theme="dark"] .pcard__footer {
    background: var(--bg-card);
}
html[data-theme="dark"] .pcard__fade {
    background: linear-gradient(to bottom,
        rgba(20, 27, 45, 0) 0%,
        rgba(20, 27, 45, 0.55) 40%,
        var(--bg-card) 92%);
}
html[data-theme="dark"] .pcard__share {
    background: var(--bg-surface);
    color: var(--text-dark);
}

html[data-theme="dark"] .tabs {
    background: var(--bg-card);
}
html[data-theme="dark"] .tab:hover:not(.active) {
    background: var(--bg-surface);
}
/* ===== xbrutal-header.css ===== */
/* ========== EXTREME BRUTALIST HEADER ========== */
/* EVERYTHING BELOW THIS LINE IS EXACTLY AS PROVIDED - UNCHANGED */
.xbrutal-header {
    font-family: 'Courier New', Courier, monospace;
    background: #fff;
    border-bottom: 1px solid #000;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.xbrutal-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
}

/* Logo */
.xbrutal-logo-link {
    text-decoration: none;
    flex-shrink: 0;
}

.xbrutal-logo-box {
    background: #fff;
    
    
    padding: 0.45rem 0.9rem;
    display: flex;
    flex-direction: column;
    line-height: 1;
    transition: all 0.12s ease;
}

.xbrutal-logo-box span {
    font-weight: 900;
    font-size: 1.15rem;
    color: #111;
    letter-spacing: -1px;
}

.xbrutal-logo-link:hover .xbrutal-logo-box {
    transform: translate(-3px, -3px);
    
}

/* Desktop Nav */
.xbrutal-nav {
    display: flex;
    gap: 0.3rem;
    align-items: center;
}

.xbrutal-nav a {
    color: #111;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    padding: 0.5rem 0.85rem;
    border: 3px solid transparent;
    transition: all 0.1s ease;
}

.xbrutal-nav a:hover {
    background: #64D96F;
    color: #111;
    border-color: #000;
    box-shadow: 4px 4px 0 #000;
}

/* ========== MOBILE SEARCH (FIXED) ========== */
.xbrutal-mobile-search {
    display: flex;
    width: 100%;
    margin-bottom: 1.2rem;
}

.xbrutal-mobile-search input {
    flex: 1;
    min-width: 0;               /* critical for flex overflow */
    width: 100%;
    background: #f4efe6;
    border: 4px solid #000;
    border-right: none;
    padding: 0.95rem 1rem;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    font-size: 0.95rem;
    color: #111;
    outline: none;
    box-sizing: border-box;
}

.xbrutal-mobile-search input::placeholder {
    color: #666;
    font-weight: 700;
}

.xbrutal-mobile-search button {
    background: #fff;
    color: #111;
    border: 4px solid #000;
    padding: 22px 22px 22px 22px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 900;
    font-size: 0.95rem;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.12s ease;
}

.xbrutal-mobile-search button:hover {
    background: #FFD600;
}

/* Stack on very small screens */
@media (max-width: 420px) {
    .xbrutal-mobile-search {
        flex-direction: column;
    }

    .xbrutal-mobile-search input {
        border: 4px solid #000;
        border-bottom: none;
        width: 100%;
    }

    .xbrutal-mobile-search button {
        width: 100%;
        padding: 1rem;
        text-align: center;
        font-size: 1rem;
    }
}

/* Right Actions */
.xbrutal-header-actions {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-shrink: 0;
}

.stamp-header {
    background: #FFD600;
    color: #000;
    border: 4px solid #000;
    padding: 0.4rem 0.7rem;
    font-weight: 900;
    font-size: 0.8rem;
    transform: rotate(-6deg);
    box-shadow: 4px 4px 0 #000;
}

.xbrutal-header-cta {
    background: #FFD600;
    color: #000;
    font-weight: 900;
    font-size: 0.9rem;
    padding: 0.65rem 1.2rem;
    border: 4px solid #000;
    box-shadow: 5px 5px 0 #000;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.12s ease;
    white-space: nowrap;
}

.xbrutal-header-cta:hover {
    background: #00A878;
    transform: translate(-3px, -3px);
    box-shadow: 8px 8px 0 #000;
}

/* Mobile Menu Button */
.xbrutal-menu-btn {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: transparent;
    padding: 9px 10px;
    cursor: pointer;
    
}

.xbrutal-menu-btn span {
    display: block;
    width: 22px;
    height: 3px;
    background: #111;
    transition: all 0.2s ease;
}

.xbrutal-menu-btn.open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.xbrutal-menu-btn.open span:nth-child(2) {
    opacity: 0;
}
.xbrutal-menu-btn.open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Mobile Menu */
.xbrutal-mobile-menu {
    display: none;
    background: #111;
    border-top: 5px solid #000;
    padding: 1.5rem;
    flex-direction: column;
    gap: 0.6rem;
}

.xbrutal-mobile-menu.active {
    display: flex;
}

.xbrutal-mobile-menu a {
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    padding: 0.85rem 1.1rem;
    border: 3px solid #333;
    background: #0a0a0a;
}

.xbrutal-mobile-menu a:hover {
    background: #64D96F;
    color: #111;
    border-color: #000;
}

/* Mobile Search */
.xbrutal-mobile-search {
    display: flex;
    margin-bottom: 1rem;
}

.xbrutal-mobile-search input {
    flex: 1;
    background: #f4efe6;
    border: 4px solid #000;
    border-right: none;
    padding: 0.9rem 1rem;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    font-size: 0.95rem;
    outline: none;
}

.xbrutal-mobile-search button {
    background: #64D96F;
    color: #111;
    border: 4px solid #000;
    padding: 8 1.3rem;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 900;
    font-size: 0.95rem;
    cursor: pointer;
}

.xbrutal-mobile-cta {
    margin-top: 1rem;
}

.xbrutal-mobile-cta .xbrutal-header-cta {
    display: block;
    text-align: center;
    padding: 1rem;
}

/* ============================================================
   DESKTOP SEARCH BAR - restyled to match .search-box from search.css
   exactly (the same pill-shaped search bar used on search.php), per
   request, rather than the header's own brutalist visual language.
   This is the one intentional visual departure from the brutalist
   theme in this file - everything else in the header stays brutalist.
   ============================================================ */
.xbrutal-search {
    display: flex;
    align-items: center;
    flex: 1;
    max-width: 340px;
    margin: 0 0.25rem;
    background: #fff;
    border: 2px solid var(--primary, #00A878);
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 0 4px 16px -4px rgba(0, 168, 120, 0.15);
    gap: 0.4rem;
    padding: 0.25rem 0.25rem 0.25rem 1rem;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.xbrutal-search:focus-within {
    box-shadow: 0 10px 28px -6px rgba(0, 168, 120, 0.3);
    border-color: var(--primary-dark, #065F46);
}

.xbrutal-search-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    padding: 0.55rem 0.15rem;
    font-family: inherit;
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--text-dark, #0F172A);
    outline: none;
    box-sizing: border-box;
}

.xbrutal-search-input::placeholder {
    color: #94A3B8;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}

.xbrutal-search-btn {
    background: var(--gradient-primary, linear-gradient(135deg, #00A878 0%, #3ECF8E 100%));
    color: #fff;
    border: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.12s ease;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 900px) {
    .xbrutal-search {
        display: none; /* hide desktop search on mobile */
    }
    
    .stamp-header {
        display: none;
    }
}

@media (max-width: 600px) {
    .xbrutal-header-inner {
        height: 70px;
        padding: 0 1rem;
        gap: 0.8rem;
    }
    
    .xbrutal-logo-box {
        padding: 0.35rem 0.7rem;
    }
    
    .xbrutal-logo-box span {
        font-size: 1rem;
    }
    
    .xbrutal-header-cta {
        padding: 0.55rem 0.9rem;
        font-size: 0.8rem;
    }
}

@media (max-width: 400px) {
    .xbrutal-header-cta {
        display: none; /* optional: hide CTA on very small screens */
    }
}
/* EVERYTHING ABOVE THIS LINE IS EXACTLY AS PROVIDED - UNCHANGED, except
   .xbrutal-nav a's color: changed from #fff to #111 - the header's own
   background is white (#fff), so white nav-link text was invisible
   against it. That's the entire "nav links not showing" bug - they were
   rendering, just as white-on-white.

   ALSO CHANGED: the inline .xbrutal-nav link row is now hidden on ALL
   screen sizes (moved out of the 900px media query into a permanent,
   unconditional rule below), and .xbrutal-menu-btn is now visible on
   ALL screen sizes too (same change, opposite direction) - this is the
   actual fix for the desktop nav breaking the header layout with too
   many items. The hamburger now opens the exact same slide-in drawer
   on desktop that already existed and worked well for mobile, rather
   than building a brand new desktop-specific menu component. */
.xbrutal-nav {
    display: none;
}
.xbrutal-menu-btn {
    display: flex;
}

/* ========================================================================
   NEW ADDITIONS BELOW - styling for the ported-in theme toggle and
   login/logout icon buttons from the previous header. Nothing above this
   line was modified, reordered, or removed to add these.
   ======================================================================== */
.xbrutal-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    color: #111;
    cursor: pointer;
    transition: all 0.12s ease;
    flex-shrink: 0;
    text-decoration: none;
    border: 1px solid #000;
    border-radius: 50%;
}

.xbrutal-icon-btn:hover {
    background: transparent;
    
    color: #FFD600;
}

.xbrutal-icon-btn .icon-sun {
    display: none;
}

/* Convention: <html data-theme="dark"> - see the flag in the audit
   response about verifying this matches theme-dark.css's actual
   expected mechanism. */
html[data-theme="dark"] .xbrutal-icon-btn .icon-moon {
    display: none;
}
html[data-theme="dark"] .xbrutal-icon-btn .icon-sun {
    display: block;
}

@media (max-width: 600px) {
    .xbrutal-icon-btn {
        width: 36px;
        height: 36px;
    }
}

/* Mobile menu scrolls internally instead of the whole page scrolling -
   height capped to the remaining viewport below the 80px header (70px
   on the smaller mobile header height), with its own scrollbar. */
.xbrutal-mobile-menu.active {
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 600px) {
    .xbrutal-mobile-menu.active {
        max-height: calc(100vh - 70px);
    }
}

/* Applied to <body> via JS while the mobile menu is open, to prevent
   the page underneath from scrolling at the same time. */
body.xbrutal-menu-open {
    overflow: hidden;
}

/* ============================================================
   DRAWER MENU - fully restyled in the brutalist design language.
   No classes from the old site's drawer styling are reused here -
   built fresh to match the header's own look (thick black borders,
   offset box-shadows, Courier New, high-contrast blocks).
   ============================================================ */
.xbrutal-drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1998;
}

.xbrutal-drawer-overlay.active {
    display: block;
}

.xbrutal-drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: 320px;
    max-width: 85vw;
    height: 100%;
    background: #0a0a0a;
    border-left: 6px solid #000;
    box-shadow: -8px 0 0 rgba(0,0,0,0.3);
    z-index: 1999;
    display: flex;
    flex-direction: column;
    font-family: 'Courier New', Courier, monospace;
    transition: right 0.25s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.xbrutal-drawer.active {
    right: 0;
}

.xbrutal-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.25rem;
    border-bottom: 5px solid #000;
    background: #40D04E;
    flex-shrink: 0;
}

.xbrutal-drawer-title {
    font-weight: 900;
    font-size: 1.15rem;
    letter-spacing: -0.5px;
    color: #111;
}

.xbrutal-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: #f4efe6;
    color: #111;
    border: 3px solid #000;
    box-shadow: 3px 3px 0 #000;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.12s ease;
}

.xbrutal-drawer-close:hover {
    background: #FFD600;
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 #000;
}

.xbrutal-drawer-search {
    margin: 1.25rem 1.25rem 0;
    width: auto;
}

/* Desktop already has its own dedicated search icon/bar in the header
   actions now - showing a second search field inside the drawer too
   is redundant there. Mobile still needs it, since the header's own
   search bar is hidden below 900px with no other search access. */
@media (min-width: 901px) {
    .xbrutal-drawer-search {
        display: none;
    }
}

.xbrutal-drawer-nav {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.25rem;
    flex: 1;
}

.xbrutal-drawer-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    padding: 0.85rem 1rem;
    border: 3px solid #333;
    background: #111;
    transition: all 0.1s ease;
}

.xbrutal-drawer-link:hover {
    background: #FFD600;
    color: #111;
    border-color: #000;
}

.xbrutal-drawer-footer {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
    border-top: 5px solid #000;
    flex-shrink: 0;
}

.xbrutal-drawer-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 0.9rem;
    padding: 0.85rem 1rem;
    border: 4px solid #000;
    box-shadow: 4px 4px 0 #000;
    transition: all 0.12s ease;
}

.xbrutal-drawer-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 #000;
}

.xbrutal-drawer-btn-primary {
    background: #FFD600;
    color: #000;
}

.xbrutal-drawer-btn-primary:hover {
    background:#40D04E;
}

.xbrutal-drawer-btn-outline {
    background: #f4efe6;
    color: #111;
}

.xbrutal-drawer-btn-outline:hover {
    background: #fff;
}

.xbrutal-drawer-btn-danger {
    background: #DC2626;
    color: #fff;
}

.xbrutal-drawer-btn-danger:hover {
    background: #991B1B;
    color: #fff;
}

@media (max-width: 420px) {
    .xbrutal-drawer {
        width: 100%;
        max-width: 100vw;
        border-left: none;
    }
}

.xbrutal-search-btn:hover {
    filter: brightness(0.95);
}

@media (max-width: 1100px) {
    .xbrutal-search {
        max-width: 260px;
    }
}

/* ============================================================
   SEARCH TOGGLE - collapses the search bar to a single circular icon
   by default; xbrutal-header.js adds/removes .is-open on click. Grows
   in place via width + opacity, not a translateX slide like the mobile
   drawer uses - a different, more compact interaction for a header
   element rather than a full off-canvas panel.

   Pure addition - your existing rule hiding .xbrutal-search below 900px
   is untouched and still does its job on the form itself; this adds a
   second, new rule hiding the wrapper (icon button included) at the
   same breakpoint, since mobile already has its own separate search
   field in the drawer and doesn't need this icon lingering too.
   ============================================================ */
.xbrutal-search-wrap {
    display: flex;
    align-items: center;
    position: relative;
}

.xbrutal-search-wrap .xbrutal-search {
    display: flex;
    align-items: center;
    width: 0;
    max-width: none;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    margin: 0;
    transition: width 0.25s ease, opacity 0.2s ease, margin-left 0.25s ease;
}

.xbrutal-search-wrap.is-open .xbrutal-search {
    width: 240px;
    opacity: 1;
    pointer-events: auto;
    margin-left: 0.5rem;
}

.xbrutal-search-wrap.is-open .xbrutal-search-toggle {
    display: none;
}

@media (max-width: 900px) {
    .xbrutal-search-wrap {
        display: none;
    }
}

/* ============================================
   SMART STICKY HEADER - hides on scroll down, reappears on scroll up,
   matching the common pattern used on Medium, many news sites, etc.
   Applies to all devices/screen sizes. xbrutal-header.js adds/removes
   the .xbrutal-header-hidden class based on scroll direction.
   ============================================ */
.xbrutal-header {
    transition: transform 0.25s ease;
}
.xbrutal-header.xbrutal-header-hidden {
    /* Switching to fixed specifically while hidden - this is the real
       fix, confirmed by direct on-device debug output showing the
       class WAS being applied correctly on mobile, but the transform
       simply didn't render visually. Some mobile browsers don't
       reliably support transform on a position:sticky element, even
       though the class logic itself works fine. fixed+transform is
       far more consistently supported. The normal visible state above
       stays exactly as sticky, completely untouched. */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(-100%);
}

/* ============================================================
   DESKTOP HAMBURGER LABEL - a small "MENU" text next to the hamburger
   icon, visible on desktop only (mobile keeps the bare icon, which is
   already a familiar, self-explanatory pattern there). Small, clean
   touch matching what many larger sites do for a desktop-only
   hamburger trigger.
   ============================================================ */
/* ============================================================
   DESKTOP HAMBURGER LABEL - a small "MENU" text next to the hamburger
   icon, visible on desktop only. Kept as a SEPARATE element next to
   the button (not inside it) - the button's own internal layout
   (flex-direction: column, stacking its 3 line-spans into a hamburger
   icon) is untouched, avoiding the risk of breaking that existing,
   working open/close animation by nesting new content inside it.
   ============================================================ */
.xbrutal-menu-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.xbrutal-menu-btn-label {
    display: none;
    font-weight: 900;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    color: #111;
}
@media (min-width: 901px) {
    .xbrutal-menu-btn-label {
        display: inline-block;
    }
}

/* ===== xbrutal-footer-v2.css ===== */
/* ========================================================================
   BRUTALIST FOOTER v2 - full rebuild, matching the header/hero's design
   language and dark palette instead of the old two-tone cream/dark
   split. Uses clamp() for fluid type/spacing and CSS Grid with
   auto-fit/minmax() for the link columns, so layout reflows naturally
   at any width rather than needing manually-maintained breakpoints.
   ======================================================================== */

.xbrutal-footer {
    font-family: 'Courier New', Courier, monospace;
    background: #DCE3DC;
    color: #fff;
    border-top: 3px solid #8E90FA;
}

.xbrutal-footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 1.5rem);
}

.xbrutal-footer-body {
    padding: clamp(2.5rem, 6vw, 4rem) 0;
}

.xbrutal-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr);
    gap: clamp(2rem, 5vw, 3.5rem);
}

@media (max-width: 820px) {
    .xbrutal-footer-grid {
        grid-template-columns: 1fr;
    }
}

/* Brand */
.xbrutal-footer-logo {
    font-size: clamp(1.9rem, 5vw, 2.6rem);
    font-weight: 900;
    letter-spacing: -1px;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    color:#16B528;
}

.xbrutal-footer-tagline {
    font-size: clamp(0.85rem, 1.8vw, 0.95rem);
    line-height: 1.6;
    font-weight: bold;
    color: #000;
    max-width: 340px;
    margin-bottom: 1.75rem;
}

.xbrutal-footer-follow {
    font-size: clamp(0.8rem, 1.6vw, 0.9rem);
    font-weight: 900;
    letter-spacing: 0.5px;
    margin-bottom: 0.9rem;
    color: #16B528;
}

.xbrutal-footer-social-row {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.xbrutal-footer-social {
    box-sizing: border-box;
    background: #181818;
    color: #fff;
    border: 3px solid #333;
    width: clamp(38px, 8vw, 48px);
    height: clamp(38px, 8vw, 48px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.12s ease;
    flex-shrink: 0;
}

.xbrutal-footer-social:hover {
    background: #40D04E;
    border-color: #000;
    color: #111;
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 #000;
}

/* Links */
.xbrutal-footer-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: clamp(1.5rem, 4vw, 2.5rem);
    align-content: start;
}

.xbrutal-footer-col h4 {
    font-size: clamp(0.75rem, 1.5vw, 0.85rem);
    font-weight: 900;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    color: #16B528;
}

.xbrutal-footer-col a {
    display: block;
    color: #000;
    font-weight: 700;
    font-size: clamp(0.85rem, 1.8vw, 0.95rem);
    text-decoration: none;
    padding: 0.4rem 0;
    transition: color 0.1s ease, padding-left 0.1s ease;
}

.xbrutal-footer-col a:hover {
    color: #00A878;
    padding-left: 6px;
}

/* Date stamp */
.xbrutal-footer-datestamp {
    grid-column: 1 / -1;
    justify-self: start;
    box-sizing: border-box;
    max-width: 100%;
    transform: rotate(-4deg);
    background: #111;
    color: #FFD600;
    border: 4px solid #fff;
    padding: 0.5rem 0.8rem;
    font-weight: 900;
    font-size: clamp(0.55rem, 1.3vw, 0.65rem);
    line-height: 1.2;
    text-align: center;
    box-shadow: 5px 5px 0 #000;
    text-transform: uppercase;
    margin: clamp(1.5rem, 4vw, 2.5rem) 0 0;
}

/* Newsletter */
.xbrutal-footer-newsletter {
    grid-column: 1 / -1;
    background:#7AF5AF;
    border: 5px solid #000;
    box-shadow: 8px 8px 0 rgba(0, 168, 120, 0.35);
    padding: clamp(1.5rem, 4vw, 2.2rem);
    margin-top: clamp(1.5rem, 4vw, 2rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1.5rem, 4vw, 2.5rem);
    flex-wrap: wrap;
}

.xbrutal-footer-news-left {
    flex: 1;
    min-width: 240px;
}

.xbrutal-footer-news-stamp {
    display: inline-block;
    transform: rotate(-3deg);
    background: #FFD600;
    color: #000;
    border: 3px solid #000;
    box-shadow: 4px 4px 0 #000;
    padding: 0.5rem 0.9rem;
    font-weight: 900;
    font-size: clamp(0.8rem, 1.6vw, 0.9rem);
    line-height: 1.2;
    text-align: center;
    margin-bottom: 0.9rem;
}

.xbrutal-footer-news-left h3 {
    font-size: clamp(1.25rem, 3.2vw, 1.65rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.5px;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    color: #000;
}

.xbrutal-footer-news-left p {
    color: #000;
    font-weight: bold;
    font-size: clamp(0.85rem, 1.8vw, 0.95rem);
}

.xbrutal-footer-news-msg {
    font-size: clamp(0.75rem, 1.6vw, 0.85rem);
    font-weight: 900;
    margin-top: 0.6rem;
}

.xbrutal-footer-news-msg-ok {
    color: #00A878;
}

.xbrutal-footer-news-msg-err {
    color: #FFD600;
}

.xbrutal-footer-news-form {
    display: flex;
    flex: 1.2;
    min-width: 260px;
    max-width: 480px;
    position: relative;
}

@media (max-width: 620px) {
    .xbrutal-footer-news-form {
        flex-direction: column;
        width: 100%;
        max-width: 100%;
    }
}

.xbrutal-footer-news-input {
    box-sizing: border-box;
    flex: 1;
    min-width: 0;
    width: 100%;
    background: #fff;
    border: 4px solid #000;
    border-right: none;
    padding: clamp(0.85rem, 2vw, 1.05rem) clamp(0.9rem, 2vw, 1.2rem);
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    font-size: clamp(0.85rem, 1.8vw, 0.95rem);
    color: #111;
    outline: none;
    margin-bottom: 5px;
    border-radius: 5px;
}

.xbrutal-footer-news-input::placeholder {
    color: #777;
    font-weight: 700;
}

@media (max-width: 620px) {
    .xbrutal-footer-news-input {
        border-right: 4px solid #000;
        
    }
}

.xbrutal-footer-news-submit {
    box-sizing: border-box;
    background: #40D04E;
    color: #fff;
    border: 4px solid #000;
    padding: clamp(0.85rem, 2vw, 1.05rem) clamp(0.9rem, 2vw, 1.2rem);
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    font-size: clamp(0.85rem, 1.8vw, 0.95rem);
    cursor: pointer;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.12s ease;
    border-radius: 5px;
}

.xbrutal-footer-news-submit:hover {
    background: #FFD600;
    
    box-shadow: 2px 2px 0 #000;
    border-top: 4px solid #7878FF;
}

@media (max-width: 620px) {
    .xbrutal-footer-news-submit {
        width: 100%;
    }
}

/* Bottom bar */
.xbrutal-footer-bottom {
    background: #000;
    color: #fff;
    padding: clamp(1rem, 2.5vw, 1.4rem) 0;
    font-weight: 700;
    font-size: clamp(0.75rem, 1.6vw, 0.85rem);
    letter-spacing: 0.5px;
}

.xbrutal-footer-bottom-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.xbrutal-footer-slash {
    color: #fff;
    font-weight: bold;
}

/* ===== xbrutal-hero.css ===== */
/* ========================================================================
   BRUTALIST HERO - new build, matching the header/footer's design
   language (dark bg, thick black borders, offset shadows, Courier New,
   green/yellow accent palette). Typography uses clamp() for fluid
   scaling across every screen width, rather than fixed breakpoints -
   this avoids the whole class of "missed a breakpoint" bugs since the
   size changes continuously instead of jumping at specific widths.
   ======================================================================== */

.xbrutal-hero {
    font-family: 'Courier New', Courier, monospace;
    background:#DAF7E5 ;
    border-bottom: 1px solid #000;
    overflow: hidden;
}

.xbrutal-hero-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem clamp(2rem, 5vw, 3rem);
    text-align: center;
}

.xbrutal-hero-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.xbrutal-hero-stamp {
    background: #FFD600;
    color: #000;
    border: 4px solid #000;
    box-shadow: 5px 5px 0 #000;
    padding: 0.5rem 0.9rem;
    font-weight: 900;
    font-size: clamp(0.7rem, 1.5vw, 0.85rem);
    line-height: 1.15;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(-4deg);
}

.xbrutal-hero-stamp-alt {
    background: #00A878;
    color: #fff;
    transform: rotate(3deg);
}

.xbrutal-hero-title {
    color: #000;
    font-size: clamp(1.8rem, 5.5vw, 3.4rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -1px;
    text-transform: uppercase;
    margin: 0 0 clamp(0.75rem, 2vw, 1.1rem);
    font-family: 'Raleway', sans-serif;
    text-shadow: -0.001em -0.001em 1px rgba(255,255,255,.15);
    
    z-index: -2;
text-shadow: 1px 2px 1px rgba(0,0,0,.4);
}

.xbrutal-hero-subtitle {
    display: inline-block;
    color: #111;
    background: #fff;
    border: 3px solid #000;
    box-shadow: 4px 4px 0 #000;
    font-size: clamp(0.95rem, 2.2vw, 1.3rem);
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 0.4rem 1rem;
    margin: 0 0 clamp(1.25rem, 3vw, 1.75rem);
    
}

.xbrutal-hero-tagline {
    color: #000;
    font-size: clamp(0.85rem, 2vw, 1.1rem);
    font-weight: 700;
    letter-spacing: 1px;
}


/* Marquee - continuous auto-scroll, two identical <span> tracks placed
   side by side and shifted left by exactly one track's width, looping
   seamlessly. */
.xbrutal-marquee {
    background: #FFD600;
    border-top: 1px solid #000;
    overflow: hidden;
    padding: 0.7rem 0;
}

.xbrutal-marquee-track {
    display: flex;
    width: max-content;
    animation: xbrutal-marquee-scroll 22s linear infinite;
    /* Starts paused - a small script measures the real pixel width of
       one span and sets --marquee-shift before starting playback, so
       there's never a visible flash of the animation running against
       the wrong (fallback) distance before that measurement completes. */
    animation-play-state: paused;
    will-change: transform;
    transform: translateZ(0);
}

.xbrutal-marquee-track span {
    color: #000;
    font-weight: 900;
    /* FIXED font size, not vw-based clamp() - this is the actual fix.
       The -50% animation target is recalculated by the browser against
       this element's CURRENT pixel width on every frame. A vw-based
       size continuously changes as the real viewport width changes -
       which mobile browsers do constantly as their address bar
       collapses/expands during scroll - so the target width could
       shift mid-animation, landing the -50% jump on the wrong pixel
       and showing up as exactly the "merging text and jumping"
       symptom reported. A fixed size (stepped via media queries
       instead of a continuous vw formula) only changes at explicit
       breakpoints, never mid-animation, which is what this element
       specifically needs given it's the only animated one in this
       whole hero section - every other clamp()/vw use here is on
       static text, where a recalculation has no animation to disrupt. */
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
    padding-right: 2rem;
    /* flex:0 0 auto is a stronger, more complete lock than flex-shrink
       alone (also fixes flex-grow and flex-basis), and box-sizing
       guarantees each span's padding is counted the same way in both
       copies - together these ensure the two halves measure to exactly
       the same pixel width, which is what the seamless loop actually
       depends on. A mismatch here - even by a pixel or two - is what
       shows up as both a stutter AND cut-off/overlapping text at the
       loop point, since the -50% jump no longer lands exactly on the
       real seam. */
    flex: 0 0 auto;
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .xbrutal-marquee-track span {
        font-size: 0.8rem;
    }
}

@keyframes xbrutal-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(var(--marquee-shift, -50%)); }
}

/* Respect users who've asked their OS/browser to reduce motion. */
@media (prefers-reduced-motion: reduce) {
    .xbrutal-marquee-track {
        animation: none;
    }
}

/* ===== xbrutal-nav-dropdown.css ===== */
/* ============================================
   NAV DROPDOWN - desktop + mobile drawer submenus
   Kept as its own file since xbrutal-header.css wasn't available to
   safely edit directly.
   ============================================ */

/* --- Desktop dropdown --- */
.xbrutal-nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}
/* .xbrutal-nav-dropdown-label needs no styling of its own - it's a
   real <a> inside .xbrutal-nav, so the existing ".xbrutal-nav a" rule
   in xbrutal-header.css already styles it identically to every other
   top-level link. */
.xbrutal-nav-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    margin-left: 0.1rem;
}
.xbrutal-nav-dropdown-trigger svg {
    transition: transform 0.15s ease;
}
.xbrutal-nav-dropdown.is-open .xbrutal-nav-dropdown-trigger svg {
    transform: rotate(180deg);
}

.xbrutal-nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 200px;
    background: #fff;
    border: 2px solid #111;
    box-shadow: 4px 4px 0 #111;
    border-radius: 4px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 60;
}
.xbrutal-nav-dropdown.is-open .xbrutal-nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.xbrutal-nav-dropdown-menu a {
    display: block;
    padding: 0.55rem 0.75rem;
    border-radius: 3px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #111;
    text-decoration: none;
    white-space: nowrap;
}
.xbrutal-nav-dropdown-menu a:hover {
    background: #F1F5F2;
    color: #00A878;
}

/* --- Mobile drawer submenu --- */
.xbrutal-drawer-group {
    display: flex;
    flex-direction: column;
}
.xbrutal-drawer-group-header {
    display: flex;
    align-items: stretch;
    border: 3px solid #333;
    background: #111;
    transition: all 0.1s ease;
}
.xbrutal-drawer-group-label {
    flex: 1;
    display: flex;
    align-items: center;
    color: #fff;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    padding: 0.85rem 1rem;
}
.xbrutal-drawer-group-label:hover {
    background: #FFD600;
    color: #111;
}
.xbrutal-drawer-group-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    flex-shrink: 0;
    background: none;
    border: none;
    border-left: 3px solid #333;
    color: #fff;
    cursor: pointer;
}
.xbrutal-drawer-group-toggle:hover {
    background: #FFD600;
    color: #111;
    border-left-color: #000;
}
.xbrutal-drawer-group-toggle svg {
    transition: transform 0.15s ease;
    flex-shrink: 0;
}
.xbrutal-drawer-group.is-open .xbrutal-drawer-group-toggle svg {
    transform: rotate(180deg);
}
.xbrutal-drawer-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
    display: flex;
    flex-direction: column;
    background: #0a0a0a;
}
.xbrutal-drawer-group.is-open .xbrutal-drawer-submenu {
    max-height: 400px;
}
.xbrutal-drawer-sublink {
    padding: 0.7rem 1rem 0.7rem 1.75rem;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    border: 3px solid #333;
    border-top: none;
    border-left: 6px solid #40D04E;
    background: #1a1a1a;
    display: block;
}
.xbrutal-drawer-sublink::before {
    content: '\2192  ';
    color: #40D04E;
}
.xbrutal-drawer-sublink:hover {
    background: #FFD600;
    color: #111;
    border-left-color: #111;
}
.xbrutal-drawer-sublink:hover::before {
    color: #111;
}

@media (max-width: 900px) {
    .xbrutal-nav-dropdown-menu {
        display: none;
    }
}

/* Only the drawer's middle nav section scrolls internally now - the
   header (title/close button) and footer (login/logout) stay fixed in
   place via the drawer's own existing flex layout (flex-shrink: 0 on
   both, already present in the real xbrutal-header.css). Previously
   the whole drawer scrolled as one block, which could push the footer
   buttons out of reach whenever a submenu was expanded. */
.xbrutal-drawer {
    overflow-y: hidden;
}
.xbrutal-drawer-nav {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}