:root {
    --ink: #211c34;
    --muted: #736b88;
    --line: rgba(33, 28, 52, .12);
    --paper: #fffdf7;
    --banana: #ffe779;
    --bubblegum: #ff7bbd;
    --mint: #80f3c9;
    --sky: #7ed4ff;
    --orange: #ffad66;
    --shadow: 0 18px 45px rgba(33, 28, 52, .14);
    --radius: 28px;
}

* { box-sizing: border-box; }
body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--ink);
    background:
        radial-gradient(circle at 10% 10%, rgba(255, 231, 121, .55), transparent 28rem),
        radial-gradient(circle at 92% 18%, rgba(126, 212, 255, .45), transparent 24rem),
        radial-gradient(circle at 75% 85%, rgba(255, 123, 189, .25), transparent 26rem),
        #fff8ea;
    min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
a:hover { color: #e45297; }

.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    background: var(--ink);
    color: #fff;
    padding: .75rem 1rem;
    border-radius: .75rem;
    z-index: 9999;
}
.skip-link:focus { top: 1rem; }

.site-header {
    background: rgba(255, 248, 234, .86);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
}
.navbar { padding: 1rem 0; }
.navbar-brand {
    font-family: 'Baloo 2', cursive;
    font-size: 1.75rem;
    font-weight: 800;
    display: inline-flex;
    gap: .55rem;
    align-items: center;
}
.brand-badge {
    display: inline-grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--banana), var(--orange));
    box-shadow: 0 10px 25px rgba(255, 173, 102, .35);
}
.nav-link {
    font-weight: 800;
    color: var(--ink);
    border-radius: 999px;
    padding: .5rem .9rem !important;
}
.nav-link.active, .nav-link:hover { background: rgba(255, 123, 189, .16); }
.navbar-toggler { border: 0; box-shadow: none !important; }

.header-ad .ad-wrap { margin-top: 0 !important; margin-bottom: .75rem !important; }
.btn-giggle {
    background: linear-gradient(135deg, var(--bubblegum), #ff9a63);
    border: 0;
    color: #fff;
    font-weight: 900;
    border-radius: 999px;
    padding: .78rem 1.15rem;
    box-shadow: 0 14px 28px rgba(255, 123, 189, .28);
}
.btn-giggle:hover { color: #fff; transform: translateY(-1px); }
.btn-outline-dark {
    border-radius: 999px;
    font-weight: 800;
    border-width: 2px;
}

.hero-section, .page-hero { padding: 5.5rem 0 3rem; position: relative; overflow: hidden; }
.page-hero.compact { padding: 4rem 0 2rem; }
.hero-section:before, .page-hero:before {
    content: '';
    position: absolute;
    inset: 1rem auto auto 5%;
    width: 8rem;
    height: 8rem;
    background: repeating-linear-gradient(45deg, transparent 0 12px, rgba(33, 28, 52, .06) 12px 18px);
    border-radius: 50%;
    z-index: -1;
}
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: #9c356a;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .78rem;
    margin-bottom: .75rem;
}
.eyebrow:before { content: '✦'; color: #f2a900; }
h1, h2, h3, .footer-brand {
    font-family: 'Baloo 2', cursive;
    font-weight: 800;
    line-height: .96;
}
h1 { font-size: clamp(2.6rem, 7vw, 5.8rem); letter-spacing: -.04em; }
h2 { font-size: clamp(2rem, 3.4vw, 3rem); }
h3 { font-size: 1.45rem; }
.lead, .page-hero p { color: var(--muted); font-size: 1.15rem; max-width: 44rem; }
.hero-search {
    display: flex;
    gap: .65rem;
    background: rgba(255, 255, 255, .76);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .45rem;
    max-width: 46rem;
    box-shadow: var(--shadow);
}
.hero-search .form-control {
    border: 0;
    background: transparent;
    border-radius: 999px;
    padding-left: 1.1rem;
    box-shadow: none;
}
.hero-bubbles, .tag-cloud, .category-cloud { display: flex; flex-wrap: wrap; gap: .65rem; }
.hero-bubbles { margin-top: 1.25rem; }
.hero-bubbles a, .tag-cloud a, .category-cloud a {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .54rem .82rem;
    font-weight: 800;
    box-shadow: 0 8px 22px rgba(33, 28, 52, .08);
}
.category-cloud a span {
    display: inline-grid;
    place-items: center;
    background: var(--banana);
    min-width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    margin-left: .35rem;
    font-size: .78rem;
}

.mascot-card, .fun-panel, .filter-panel, .joke-stage, .share-box, .joke-card {
    background: rgba(255, 255, 255, .86);
    border: 1px solid rgba(33, 28, 52, .11);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
}
.mascot-card { padding: 2rem; transform: rotate(1deg); }
.mascot-face { font-size: 4rem; line-height: 1; filter: drop-shadow(0 10px 12px rgba(33,28,52,.12)); }
.forecast-row {
    display: flex;
    justify-content: space-between;
    border-top: 1px dashed var(--line);
    padding: .8rem 0;
}
.forecast-row strong { color: #9c356a; }

.section-pad { padding: 3.5rem 0; }
.section-title-row {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.text-link { font-weight: 900; color: #9c356a; }

.joke-card {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease;
    position: relative;
    overflow: hidden;
}
.joke-card:after {
    content: 'ha!';
    position: absolute;
    right: -1rem;
    bottom: -.6rem;
    font-family: 'Baloo 2', cursive;
    font-size: 4.8rem;
    color: rgba(255, 123, 189, .08);
    transform: rotate(-15deg);
}
.joke-card:hover { transform: translateY(-4px) rotate(-.35deg); box-shadow: 0 24px 55px rgba(33, 28, 52, .18); }
.joke-card h3 a:hover { color: #9c356a; }
.category-pill {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #fff, rgba(128, 243, 201, .55));
    border: 1px solid var(--line);
    border-radius: 999px;
    color: #245e50;
    font-weight: 900;
    padding: .42rem .7rem;
    font-size: .82rem;
}
.featured-dot {
    background: rgba(255, 231, 121, .8);
    border-radius: 999px;
    padding: .35rem .55rem;
    font-size: .72rem;
    font-weight: 900;
}
.setup { color: var(--muted); }
.punchline { font-weight: 900; color: #9c356a; }
.card-footer-row {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    align-items: center;
    margin-top: auto;
    padding-top: 1rem;
    position: relative;
    z-index: 1;
}
.mini-stat {
    display: inline-flex;
    margin-right: .45rem;
    font-size: .85rem;
    font-weight: 800;
    color: var(--muted);
}
.read-link { color: #9c356a; font-weight: 900; white-space: nowrap; }

.trending-list { display: grid; gap: .85rem; }
.trending-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .9rem;
    align-items: center;
    padding: 1rem;
    background: rgba(255,255,255,.78);
    border: 1px solid var(--line);
    border-radius: 22px;
}
.trending-item:hover { transform: translateX(3px); background: #fff; }
.rank {
    display: inline-grid;
    place-items: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    background: var(--banana);
    font-weight: 900;
}
.trending-item small { display: block; color: var(--muted); margin-top: .2rem; }
.trend-score { font-weight: 900; color: #9c356a; }

.ad-wrap {
    background: rgba(255,255,255,.7);
    border: 2px dashed rgba(33,28,52,.18);
    border-radius: 20px;
    padding: .7rem;
    text-align: center;
    min-height: 90px;
}
.ad-label {
    display: block;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--muted);
    margin-bottom: .35rem;
    font-weight: 800;
}
.ad-inner {
    display: grid;
    place-items: center;
    min-height: 62px;
    color: var(--muted);
    border-radius: 14px;
    background: repeating-linear-gradient(135deg, rgba(255, 231, 121, .2) 0 12px, rgba(126, 212, 255, .2) 12px 24px);
}

.filter-panel { padding: 1rem; }
.form-control, .bootstrap-select>.dropdown-toggle {
    border-radius: 16px;
    border: 1px solid var(--line);
    min-height: 48px;
    background-color: #fff;
}
.bootstrap-select .dropdown-menu { border-radius: 18px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.bootstrap-select .dropdown-toggle:focus, .form-control:focus { box-shadow: 0 0 0 .25rem rgba(255, 123, 189, .16); border-color: rgba(255,123,189,.45); }
.form-label { font-weight: 900; }
.results-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin: 1.3rem 0;
    color: var(--muted);
}
.results-bar a { font-weight: 900; color: #9c356a; }
.page-link { border-radius: 999px !important; border: 1px solid var(--line); color: var(--ink); font-weight: 800; }
.page-item.active .page-link { background: #9c356a; border-color: #9c356a; }

.panel-offset { top: 14.4rem; }
.fun-panel { padding: 1.35rem; }
.empty-state {
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: rgba(255,255,255,.7);
    padding: 2rem;
    text-align: center;
    font-weight: 800;
    color: var(--muted);
}

.joke-hero h1 { max-width: 58rem; }
.share-box { padding: 1.3rem; text-align: center; }
.share-emoji { font-size: 3rem; display: block; }
.share-links { display: flex; justify-content: center; gap: .8rem; }
.share-links a { color: #9c356a; font-weight: 900; }
.copy-status { min-height: 1.5rem; color: #245e50; font-weight: 800; margin-bottom: 0; margin-top: .75rem; }
.meta-row { display: flex; flex-wrap: wrap; gap: .3rem .7rem; }
.joke-stage { padding: clamp(1.35rem, 4vw, 2.5rem); position: relative; }
.joke-stage:before {
    content: '“';
    position: absolute;
    right: 1.3rem;
    top: -.35rem;
    font-family: Georgia, serif;
    font-size: 8rem;
    line-height: 1;
    color: rgba(255, 123, 189, .14);
}
.setup-line { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; }
.punchline-line {
    display: inline-block;
    margin-top: 1rem;
    padding: 1rem 1.15rem;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255,231,121,.75), rgba(128,243,201,.5));
    font-family: 'Baloo 2', cursive;
    font-size: clamp(1.8rem, 3.6vw, 3rem);
    line-height: 1;
}
.joke-body { color: var(--muted); font-size: 1.05rem; margin-top: 1.2rem; }
.topic-line { margin-top: 1.5rem; color: var(--muted); }
.related-list { display: grid; gap: .85rem; }
.related-list a {
    display: block;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: .9rem;
    background: rgba(255,255,255,.7);
}
.related-list small { color: var(--muted); display: block; margin-top: .25rem; }

.site-footer {
    background: rgba(255, 255, 255, .75);
    border-top: 1px solid var(--line);
}
.footer-brand { font-size: 2rem; }
.footer-link { font-weight: 900; margin-left: 1rem; color: #9c356a; }

@media (max-width: 991px) {
    .header-ad { display: none; }
    .hero-section, .page-hero { padding-top: 3.5rem; }
    .hero-search { border-radius: 24px; flex-direction: column; padding: .75rem; }
    .hero-search .btn { width: 100%; }
    .section-title-row { align-items: start; flex-direction: column; }
    .trending-item { grid-template-columns: auto 1fr; }
    .trend-score { grid-column: 2; }
    .panel-offset { top: 1rem; }
}

@media (max-width: 575px) {
    h1 { font-size: 2.65rem; }
    .joke-card, .fun-panel, .filter-panel, .joke-stage, .share-box { border-radius: 22px; }
    .card-footer-row { flex-direction: column; align-items: flex-start; }
    .footer-link { margin-left: 0; margin-right: 1rem; }
}

/* Extra polish added for the installer-ready release */
body:before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-image:
        radial-gradient(circle, rgba(255,123,189,.28) 0 4px, transparent 4px),
        radial-gradient(circle, rgba(128,243,201,.25) 0 3px, transparent 3px),
        radial-gradient(circle, rgba(255,231,121,.28) 0 5px, transparent 5px);
    background-size: 140px 140px, 190px 190px, 230px 230px;
    background-position: 10px 20px, 80px 50px, 160px 90px;
    opacity: .72;
}
.brand-badge {
    overflow: visible;
    background: transparent;
    width: 3rem;
    height: 3rem;
    box-shadow: none;
}
.brand-badge img {
    width: 3rem;
    height: 3rem;
    display: block;
    filter: drop-shadow(0 10px 12px rgba(33,28,52,.16));
}
.brand-word {
    background: linear-gradient(135deg, #211c34, #9c356a 60%, #ff7bbd);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.site-header {
    box-shadow: 0 10px 35px rgba(33, 28, 52, .06);
}
.hero-section:after,
.page-hero:after {
    content: '😂';
    position: absolute;
    right: 7%;
    top: 18%;
    font-size: clamp(3rem, 9vw, 8rem);
    opacity: .08;
    transform: rotate(12deg);
    z-index: -1;
}
.mascot-card {
    background:
        linear-gradient(145deg, rgba(255,255,255,.93), rgba(255,255,255,.68)),
        radial-gradient(circle at 15% 15%, rgba(255,231,121,.8), transparent 12rem),
        radial-gradient(circle at 85% 20%, rgba(126,212,255,.55), transparent 12rem);
}
.mascot-card:before {
    content: '';
    display: block;
    position: absolute;
    inset: -2px;
    border-radius: var(--radius);
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255,231,121,.35), rgba(255,123,189,.18), rgba(128,243,201,.25));
    z-index: -1;
}
.btn-giggle {
    position: relative;
    overflow: hidden;
}
.btn-giggle:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.32), transparent);
    transform: translateX(-120%);
    transition: transform .55s ease;
}
.btn-giggle:hover:after { transform: translateX(120%); }
.joke-card:nth-child(4n+1) { background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,240,106,.18)); }
.joke-card:nth-child(4n+2) { background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(126,212,255,.18)); }
.joke-card:nth-child(4n+3) { background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,123,189,.13)); }
.joke-card:nth-child(4n+4) { background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(128,243,201,.18)); }
.ad-wrap {
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, rgba(255,231,121,.9), rgba(255,123,189,.55), rgba(126,212,255,.7)) border-box;
    border: 2px dashed transparent;
}
.footer-brand:before {
    content: '🤣 ';
}
.mascot-card { position: relative; }

/* Blog expansion */
.blog-hero:after { content: '📝'; }
.blog-filter { background:
    linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,255,255,.75)),
    radial-gradient(circle at 10% 10%, rgba(255,231,121,.45), transparent 12rem),
    radial-gradient(circle at 95% 0%, rgba(255,123,189,.2), transparent 12rem);
}
.blog-card {
    background:
        linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.76)),
        radial-gradient(circle at 12% 0%, rgba(255,231,121,.38), transparent 10rem),
        radial-gradient(circle at 100% 30%, rgba(126,212,255,.22), transparent 10rem);
    border: 1px solid rgba(33, 28, 52, .11);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: .7rem;
    min-height: 100%;
    overflow: hidden;
    padding: 1.35rem;
    position: relative;
    transition: transform .2s ease, box-shadow .2s ease;
}
.blog-card:after {
    content: 'blog';
    position: absolute;
    right: -1rem;
    bottom: -.65rem;
    color: rgba(126, 212, 255, .16);
    font-family: 'Baloo 2', cursive;
    font-size: 4.2rem;
    font-weight: 900;
    transform: rotate(-14deg);
}
.blog-card:hover { transform: translateY(-4px) rotate(.25deg); box-shadow: 0 24px 55px rgba(33, 28, 52, .18); }
.blog-card h3, .blog-card p, .blog-card .read-link, .blog-card .blog-chip-row, .blog-card-top { position: relative; z-index: 1; }
.blog-card h3 { font-size: 1.65rem; }
.blog-card p { color: var(--muted); }
.blog-card-top {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: .75rem;
}
.blog-date {
    background: rgba(255, 231, 121, .75);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    font-size: .8rem;
    font-weight: 900;
    padding: .38rem .66rem;
}
.blog-chip-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.blog-chip {
    background: rgba(128, 243, 201, .35);
    border: 1px solid rgba(33, 28, 52, .1);
    border-radius: 999px;
    color: #245e50;
    display: inline-flex;
    font-size: .78rem;
    font-weight: 900;
    padding: .35rem .58rem;
}
.blog-article {
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(33, 28, 52, .11);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: clamp(1.35rem, 4vw, 2.7rem);
    position: relative;
    overflow: hidden;
}
.blog-article:before {
    content: '🤣';
    position: absolute;
    right: 1.1rem;
    top: .75rem;
    font-size: 5rem;
    opacity: .08;
    transform: rotate(12deg);
}
.blog-excerpt {
    color: #6d2876;
    font-size: clamp(1.18rem, 2vw, 1.45rem);
    font-weight: 800;
    line-height: 1.45;
    margin-bottom: 1.6rem;
}
.blog-content {
    color: var(--ink);
    font-size: 1.06rem;
    line-height: 1.8;
}
.blog-content h2, .blog-content h3 {
    margin-top: 1.8rem;
    margin-bottom: .75rem;
}
.blog-content h2 { font-size: clamp(1.75rem, 3vw, 2.35rem); }
.blog-content blockquote {
    background: linear-gradient(135deg, rgba(255,231,121,.45), rgba(255,123,189,.13));
    border-left: 6px solid var(--bubblegum);
    border-radius: 18px;
    color: #6d2876;
    font-weight: 800;
    margin: 1.4rem 0;
    padding: 1rem 1.2rem;
}
.blog-related a:hover { background: #fff; transform: translateX(3px); }

/* Public polish: brighter, cleaner, more playful without exposing private tools */
.site-header {
    background:
        linear-gradient(90deg, rgba(255,248,234,.94), rgba(255,255,255,.88)),
        radial-gradient(circle at 12% 0%, rgba(255,231,121,.5), transparent 16rem),
        radial-gradient(circle at 90% 0%, rgba(255,123,189,.28), transparent 14rem);
}
.nav-link.active,
.nav-link:hover {
    background: linear-gradient(135deg, rgba(255,231,121,.55), rgba(255,123,189,.2));
    color: #6d2876;
}
.hero-section {
    background:
        linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,0)),
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.72), transparent 30rem);
}
.hero-section h1,
.page-hero h1 {
    text-shadow: 0 8px 28px rgba(33, 28, 52, .08);
}
.joke-card,
.blog-card,
.fun-panel,
.filter-panel,
.joke-stage,
.share-box,
.blog-article,
.mascot-card {
    border-color: rgba(33, 28, 52, .13);
}
.joke-card:hover,
.blog-card:hover,
.trending-item:hover,
.related-list a:hover {
    border-color: rgba(156, 53, 106, .28);
}
.site-footer {
    background:
        linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,248,234,.92)),
        radial-gradient(circle at 0% 0%, rgba(255,231,121,.45), transparent 18rem),
        radial-gradient(circle at 100% 100%, rgba(128,243,201,.35), transparent 16rem);
}

.ad-custom-code {
    display: block;
    margin-inline: auto;
    max-width: 100%;
    overflow: hidden;
}
.ad-custom-code ins,
.ad-custom-code iframe {
    max-width: 100%;
}