/* ============================================================
   Vignyapan — Mobile-first stylesheet
   Sky-blue gradient bg, navy CTAs, white cards
   ============================================================ */

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations'),
         url('../fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype-variations'),
         url('../fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

:root {
    --bg-top: #9FD3EC;
    --bg-bottom: #EAF5FB;
    --primary: #1A2F5C;
    --primary-hover: #142544;
    --primary-light: #E0EAFB;
    --sky: #3FA9E0;
    --sky-band: #87CEEB;
    --text: #1B2E54;
    --text-muted: #5C6577;
    --card: #ffffff;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10);
    --heart: #E63946;
    --gold: #F59E0B;
    --danger: #C8332B;
    --success: #16a34a;
    --radius: 16px;
    --radius-sm: 10px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
a, button { -webkit-tap-highlight-color: transparent; }
/* Form controls don't inherit the page font by default (they fall back to Arial);
   make them use the app's Montserrat everywhere. */
button, input, select, textarea, optgroup { font-family: inherit; }
body {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    /* Global app background — same OTP-screen gradient, fixed to viewport so it
       stays put while content scrolls (Flutter Scaffold backgroundColor equivalent). */
    background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 60%) fixed;
    min-height: 100vh;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.page {
    min-height: 100vh;
    padding: 0;
}

/* ----- App Bar (top header) ----- */
.appbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 16px 16px;
    background: linear-gradient(180deg, var(--sky-band) 0%, transparent 100%);
    backdrop-filter: blur(6px);
}

.appbar__menu, .appbar__back {
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text);
    flex-shrink: 0;
}
.appbar__back svg { color: var(--text); }
.appbar__menu:active, .appbar__back:active { background: rgba(255,255,255,0.4); }

.appbar__avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
    flex-shrink: 0;
}

.appbar__title { flex: 1; min-width: 0; overflow: hidden; }
.appbar__title > * { min-width: 0; }
.appbar__heading {
    font-size: 19px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Any text node inside the appbar title (e.g. .greet-bar__hi) — clip long
   single-word titles like article slugs with an ellipsis. */
.appbar__title .greet-bar__hi,
.appbar__title .greet-bar__sub {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.appbar__sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

.appbar__logo {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.appbar__logo img { width: 100%; height: 100%; object-fit: cover; }

/* Profile avatar — circle with blue ring */
.appbar__profile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    flex-shrink: 0;
}
.appbar__profile-ring {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 2.5px solid #3FA9E0;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex-shrink: 0;
    background: #fff;
}
.appbar__profile-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, #BFE3F6, #3FA9E0);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.appbar__profile-initial {
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 1;
}
.appbar__profile-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* ----- Main content area ----- */
.page__content { padding: 12px 16px 100px; }
body.no-bottom-nav .page__content { padding-bottom: 16px; }

/* ----- Section heading ----- */
.section-title { font-size: 20px; font-weight: 700; color: var(--text); margin: 18px 0 12px; }

/* ----- Cards ----- */
.card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px;
}
.card--flat { box-shadow: none; }

/* ----- Buttons ----- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    padding: 0 28px;
    border: none;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, transform .15s ease;
    width: 100%;
}
.btn:hover, .btn:focus { background: var(--primary-hover); }
.btn:active { transform: scale(0.98); }
.btn[disabled], .btn.is-disabled {
    background: #8593a8;
    cursor: not-allowed;
    pointer-events: none;
}
.btn--light {
    background: var(--primary-light);
    color: var(--primary);
}
.btn--light:hover { background: #c8d6f5; }
.btn--danger { background: var(--danger); }
.btn--danger:hover { background: #a52923; }
.btn--call svg { width: 18px; height: 18px; }

/* ----- Form inputs ----- */
.field {
    display: block;
    background: #fff;
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 14px;
    box-shadow: var(--shadow);
    border: 1px solid transparent;
    transition: border-color .15s ease;
}
.field:focus-within { border-color: var(--sky); }
.field label { display: block; color: var(--text-muted); font-size: 13px; margin-bottom: 2px; }
.field input, .field textarea, .field select {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 16px;
    color: var(--text);
    outline: none;
    padding: 0;
    font-family: inherit;
}
.field--phone { display: flex; align-items: center; gap: 14px; padding: 8px 14px; }
.field--phone .flag { font-size: 22px; }
.field--phone .code { font-weight: 600; color: var(--text); font-size: 15px; }
.field--phone .divider { width: 1px; height: 28px; background: #e2e8f0; }
.field--phone input { flex: 1; padding: 12px 0; }

.error-msg { color: #dc2626; font-size: 13px; margin: -8px 0 12px 4px; }

/* ----- Auth pages ----- */
.auth-wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px 24px 40px;
    background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 60%);
}
.auth-logo {
    width: 100%;
    max-width: 280px;
    margin-bottom: 40px;
    text-align: center;
}
.auth-logo .tag {
    font-size: 11px;
    color: rgba(27, 46, 84, 0.7);
    margin-bottom: 4px;
    font-weight: 500;
    letter-spacing: 0.3px;
}
.auth-logo .logo-text {
    font-size: 46px;
    font-weight: 900;
    color: #fff;
    -webkit-text-stroke: 2px #1B2E54;
    letter-spacing: 4px;
    text-shadow: 3px 4px 0 rgba(27, 46, 84, 0.25);
    font-style: italic;
}
.auth-greet {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    text-align: center;
    margin-bottom: 22px;
    max-width: 340px;
    line-height: 1.4;
}
.auth-card { width: 100%; max-width: 380px; }

/* ----- Dashboard ----- */
.greet-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 16px 16px;
}
.greet-bar__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
    flex-shrink: 0;
}
.greet-bar__avatar svg { width: 26px; height: 26px; color: var(--text); }
.greet-bar__text { flex: 1; min-width: 0; }
.greet-bar__hi { font-size: 19px; font-weight: 700; color: var(--text); }
.greet-bar__sub { font-size: 14px; color: var(--text-muted); margin-top: 2px; }
.greet-bar__logo {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    overflow: hidden;
    flex-shrink: 0;
}
.greet-bar__logo img { width: 100%; height: 100%; object-fit: cover; }

/* ----- News screen ----- */
.news-section { margin: 4px 0 18px; }
.news-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 4px 12px;
}
.news-section__title {
    font-size: clamp(16px, 4.4vw, 19px);
    font-weight: 700;
    color: #1A2F5C;
    margin: 0 4px 12px;
}
.news-section__head .news-section__title { margin-bottom: 0; }
.news-section__link {
    font-size: clamp(13px, 3.6vw, 14px);
    color: #5C6577;
    text-decoration: none;
    font-weight: 500;
}
.news-section__link:hover { color: #3FA9E0; }

/* Trading Events — horizontal scroll */
.trading-scroll {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 4px 12px;
    margin: 0 -16px 0;
    padding-left: 16px;
    padding-right: 16px;
    scrollbar-width: none;
}
.trading-scroll::-webkit-scrollbar { display: none; }
.trading-card {
    flex: 0 0 75%;
    max-width: 280px;
    background: #F4F7FB;
    border-radius: 16px;
    overflow: hidden;
    scroll-snap-align: start;
    box-shadow: 0 4px 12px rgba(15, 31, 71, 0.05);
}
.trading-card__media {
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, #1B0F3A, #45128A);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.trading-card__media img { width: 100%; height: 100%; object-fit: cover; }
.trading-card__placeholder {
    color: #FF4FA3;
    font-weight: 800;
    font-size: 26px;
    letter-spacing: 1px;
}
.trading-card__body { padding: 12px 14px 14px; }
.trading-card__title {
    font-size: clamp(14px, 3.8vw, 15px);
    font-weight: 700;
    color: #1A2F5C;
    margin-bottom: 4px;
}
.trading-card__meta {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 500;
}

/* ----- Banner carousel ----- */
.banner-carousel {
    position: relative;
    overflow: hidden;
    padding: clamp(40px, 10vw, 80px) 0 clamp(50px, 12vw, 90px);
    margin: 0 0 4px;
    background: linear-gradient(180deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.0) 100%);
}
.banner-swiper .swiper-slide {
    background: #fff;
    border-radius: var(--radius);
    border: none;
    box-shadow: none;
    padding: 10px;
    aspect-ratio: 16 / 11;
    height: auto;
    max-height: clamp(220px, 58vw, 320px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 700;
    color: var(--primary);
    overflow: hidden;
    box-sizing: border-box;
    transform: scale(0.86);
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.45s ease, filter 0.45s ease;
    z-index: 1;
}
.banner-swiper .swiper-slide-active {
    transform: scale(1);
    filter: none;
    box-shadow: none;
    z-index: 3;
}
/* Extra space inside banner-swiper so nothing touches the card edges */
.banner-swiper {
    overflow: visible;
    padding: 30px 0 40px;
}
.banner-swiper .swiper-slide img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Pagination — placed BELOW the swiper, strict 3 dots (active + immediate prev + immediate next).
   Uses CSS sibling selectors (no dynamicBullets) — Swiper's transform was clipping bullets at higher indices. */
.banner-pagination {
    position: relative !important;
    text-align: center;
    width: 100% !important;
    padding: 14px 0 6px;
    height: auto !important;
    line-height: 1;
    overflow: visible !important;
    transform: none !important;
}
/* Hide every bullet by default */
.banner-pagination .swiper-pagination-bullet {
    display: none !important;
    width: 8px;
    height: 8px;
    background: #1A2F5C;
    opacity: 0.30;
    margin: 0 5px;
    border-radius: 50%;
    vertical-align: middle;
    transition: width .25s ease, background .25s ease, border-radius .25s ease, opacity .25s ease;
}
/* Show active bullet + its immediate previous sibling (via :has) + immediate next (via +) */
.banner-pagination .swiper-pagination-bullet-active,
.banner-pagination .swiper-pagination-bullet:has(+ .swiper-pagination-bullet-active),
.banner-pagination .swiper-pagination-bullet-active + .swiper-pagination-bullet {
    display: inline-block !important;
}
.banner-pagination .swiper-pagination-bullet-active {
    background: #3FA9E0 !important;
    opacity: 1 !important;
    width: 22px !important;
    border-radius: 4px !important;
}


/* ----- Intro / onboarding screen (mobile + tablet only, full-screen) ----- */
.intro-screen { display: none; }
.intro-desktop-fallback { display: none; }
.login-desktop-fallback { display: none; }
@media (max-width: 991px) {
    html, body { height: 100%; }
    .intro-screen {
        height: 100vh;
        height: 100dvh;
        background: #fff;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
}
@media (min-width: 992px) {
    .intro-desktop-fallback {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 60px 20px;
        text-align: center;
        gap: 18px;
    }
    .intro-desktop-fallback h1 { font-size: 32px; color: #1A2F5C; margin: 0; }
    .intro-desktop-fallback p { color: #5C6577; max-width: 480px; margin: 0; line-height: 1.6; }
    .intro-desktop-fallback__btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: #1A2F5C;
        color: #fff;
        padding: 14px 28px;
        border-radius: 999px;
        text-decoration: none;
        font-weight: 600;
        transition: background .15s ease;
    }
    .intro-desktop-fallback__btn:hover { background: #142544; }
    .login-desktop-fallback { display: block; max-width: 460px; margin: 40px auto; padding: 0 20px; }
}
.intro-screen__top {
    position: relative;
    background-image: url('../images/intro-bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: top center;
    padding: clamp(14px, 3vh, 24px) clamp(16px, 5vw, 32px) clamp(28px, 6vh, 50px);
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 58%;
    min-height: 0;
}
.intro-screen__bottom {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: clamp(14px, 2.5vh, 24px) clamp(20px, 5vw, 32px) clamp(14px, 2.5vh, 22px);
    background: #fff;
}
.intro-logo { width: 100%; display: flex; justify-content: center; margin-bottom: clamp(8px, 2vh, 16px); flex: 0 0 auto; }
.intro-logo img { height: clamp(34px, 6vh, 52px); width: auto; }

.intro-art {
    position: relative;
    width: 100%;
    max-width: 360px;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.intro-art__img {
    position: absolute;
    inset: 0;
    margin: auto;
    max-width: 82%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0;
    transform: translateX(40px) scale(0.96);
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}
.intro-art__img.is-active {
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: auto;
}

.intro-text {
    position: relative;
    width: 100%;
    max-width: 400px;
    min-height: clamp(80px, 14vh, 120px);
    text-align: center;
}
.intro-step {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease 0.05s, transform 0.4s ease 0.05s;
    pointer-events: none;
}
.intro-step.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.intro-title {
    font-size: clamp(22px, 5.5vw, 30px);
    font-weight: 700;
    color: #1A2F5C;
    margin: 0 0 12px;
}
.intro-desc {
    font-size: clamp(13px, 3.6vw, 16px);
    color: #5C6577;
    line-height: 1.55;
    margin: 0 12px;
}

.intro-dots {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.intro-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(27, 46, 84, 0.28);
    transition: width .25s ease, background .25s ease, border-radius .25s ease;
}
.intro-dot.is-active {
    background: #3FA9E0;
    width: 22px;
    border-radius: 4px;
}

.intro-btn {
    width: 100%;
    max-width: 360px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: clamp(12px, 1.8vh, 16px) 24px;
    background: #1A2F5C;
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: clamp(14px, 3.8vw, 16px);
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
    margin: 0 0 clamp(6px, 1.2vh, 12px);
}
.intro-btn:hover { background: #142544; }
.intro-btn:active { transform: scale(0.98); }
.intro-btn svg { transition: transform .2s ease; }
.intro-btn:hover svg { transform: translateX(3px); }

.intro-skip {
    color: #94a3b8;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-decoration: none;
    padding: 6px 12px;
}
.intro-skip:hover { color: #1A2F5C; }

@media (min-width: 768px) {
    .intro-screen { max-width: 480px; margin: 0 auto; box-shadow: 0 0 60px rgba(15, 31, 71, 0.10); }
}

/* Login (uses intro-* full-screen style with form) */
.intro-screen__top--login {
    background-image: url('../images/login-bg.png');
}

.login-form {
    width: 100%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 8px;
}
.login-field { display: block; }
.login-field__label {
    font-size: 12px;
    font-weight: 600;
    color: #1A2F5C;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
    display: block;
}
.login-field__row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #F4F8FC;
    border: 1.5px solid #DBE5EF;
    border-radius: 14px;
    padding: 10px 14px;
    transition: border-color .15s ease, background .15s ease;
}
.login-field__row:focus-within {
    border-color: #3FA9E0;
    background: #fff;
}
.login-field__prefix {
    color: #1A2F5C;
    font-weight: 600;
    font-size: 15px;
    flex-shrink: 0;
}
.login-field__row input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 15px;
    font-family: inherit;
    color: #1A2F5C;
    padding: 4px 0;
    min-width: 0;
}
.login-btn:disabled { background: #94a3b8; cursor: not-allowed; }
.login-btn:disabled:hover { background: #94a3b8; }
.login-btn:disabled svg { display: none; }

/* ----- Coming Soon placeholder ----- */
.coming-soon {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 40px 24px;
    text-align: center;
    margin-top: 18px;
}
.coming-soon__icon {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: rgba(63, 169, 224, 0.12);
    color: #3FA9E0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
}
.coming-soon__title {
    font-size: clamp(20px, 5.2vw, 26px);
    font-weight: 700;
    color: var(--primary);
    margin: 0 0 10px;
}
.coming-soon__msg {
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0 0 6px;
    font-size: clamp(13px, 3.6vw, 15px);
}
.coming-soon__tag {
    color: #94a3b8;
    font-size: 12px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin: 0 0 24px;
}
.coming-soon__btn { display: inline-flex; min-width: 180px; justify-content: center; }

/* ----- Floating bottom navigation (mobile/tablet) ----- */
.bottom-nav {
    position: fixed;
    left: clamp(8px, 3vw, 16px);
    right: clamp(8px, 3vw, 16px);
    bottom: max(clamp(10px, 3vw, 18px), env(safe-area-inset-bottom, 14px));
    background: #3FA9E0;
    border-radius: 999px;
    padding: clamp(5px, 1.5vw, 7px) clamp(6px, 2vw, 10px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(4px, 1.5vw, 10px);
    box-shadow: 0 10px 28px rgba(15, 31, 71, 0.25), 0 4px 10px rgba(0, 0, 0, 0.10);
    z-index: 50;
}
.bnav-item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: clamp(38px, 11vw, 46px);
    height: clamp(38px, 11vw, 46px);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    text-decoration: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    transition: background .2s ease, color .2s ease, width .25s ease, flex .25s ease;
}
.bnav-item svg {
    width: clamp(18px, 5.2vw, 22px);
    height: clamp(18px, 5.2vw, 22px);
}
.bnav-item:hover { background: rgba(255, 255, 255, 0.15); }
.bnav-item .bnav-label {
    display: none;
    font-size: clamp(13px, 3.6vw, 15px);
    font-weight: 600;
}
.bnav-item.is-active {
    background: #fff;
    color: #1A2F5C;
    flex: 0 0 auto;
    width: auto;
    max-width: clamp(100px, 32vw, 140px);
    padding: 0 clamp(12px, 4vw, 20px) 0 clamp(10px, 3.5vw, 16px);
    gap: clamp(5px, 2vw, 9px);
    border-radius: 999px;
    view-transition-name: bnav-active-pill;
}

/* Cross-page view transitions — active pill morphs between nav screens */
@view-transition { navigation: auto; }
::view-transition-old(bnav-active-pill),
::view-transition-new(bnav-active-pill) {
    animation-duration: 0.25s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.bnav-item.is-active .bnav-label { display: inline; }
.bnav-item.is-active:hover { background: #fff; }

/* Tiny phone (≤359): keep text label but compact sizes */
@media (max-width: 359px) {
    .bottom-nav {
        left: 8px;
        right: 8px;
        padding: 4px 6px;
        gap: 2px;
    }
    .bnav-item {
        width: 36px;
        height: 36px;
    }
    .bnav-item svg { width: 17px; height: 17px; }
    .bnav-item.is-active {
        max-width: 92px;
        padding: 0 10px 0 8px;
        gap: 4px;
    }
    .bnav-item.is-active .bnav-label { font-size: 12px; }
}

/* ----- Categories grid ----- */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.cat-tile {
    aspect-ratio: 1.15 / 1;
    background: linear-gradient(135deg, var(--g1, #FFE4E4) 0%, var(--g2, #FFD0E0) 100%);
    border-radius: 16px;
    padding: 12px 12px 8px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 12px rgba(15, 31, 71, 0.06);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-decoration: none;
    color: #1A2F5C;
    position: relative;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
    opacity: 0;
    animation: catTileIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.cat-tile:nth-child(1) { animation-delay: 0.05s; }
.cat-tile:nth-child(2) { animation-delay: 0.12s; }
.cat-tile:nth-child(3) { animation-delay: 0.19s; }
.cat-tile:nth-child(4) { animation-delay: 0.26s; }
.cat-tile:nth-child(5) { animation-delay: 0.33s; }
.cat-tile:nth-child(6) { animation-delay: 0.40s; }
.cat-tile:nth-child(7) { animation-delay: 0.47s; }
.cat-tile:nth-child(8) { animation-delay: 0.54s; }
.cat-tile:nth-child(9) { animation-delay: 0.61s; }
.cat-tile:hover { box-shadow: 0 8px 22px rgba(15, 31, 71, 0.14); }
.cat-tile:hover .cat-tile__img { transform: scale(1.06) translateY(-2px); }
.cat-tile:active { transform: scale(0.97); }
.cat-tile__img { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }

@keyframes catTileIn {
    0%   { opacity: 0; transform: translateY(20px) scale(0.92); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.cat-tile__label {
    font-size: clamp(13px, 3.6vw, 15px);
    font-weight: 700;
    color: #1A2F5C;
    line-height: 1.25;
    position: relative;
    z-index: 1;
    max-width: 70%;
}
.cat-tile__img {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 74%;
    height: 82%;
    object-fit: contain;
    object-position: bottom right;
    pointer-events: none;
}
/* Kalol Aaj Kaal landscape — keep wide box */
.cat-tile--kalol-aaj-kaal .cat-tile__img {
    width: 95%;
    height: 75%;
    right: -2px;
    bottom: -1px;
}
/* Daily Handy Service — 3-line label needs more room; shrink illustration. */
.cat-tile--daily-handy-service .cat-tile__img {
    width: 58%;
    height: 60%;
    right: 4px;
    bottom: 4px;
}
.cat-tile--daily-handy-service .cat-tile__label {
    max-width: 60%;
}
/* Kalol Live — slightly smaller than Aaj Kaal */
.cat-tile--kalol-live .cat-tile__img {
    width: 88%;
    height: 70%;
    right: 2px;
    bottom: 2px;
}
/* Poll — slightly bigger + nudge down */
.cat-tile--poll .cat-tile__img {
    width: 80%;
    height: 88%;
    bottom: -18px;
}
/* Sunday Issues — nudge down */
.cat-tile--sunday-issues .cat-tile__img {
    bottom: -14px;
}
/* Flash Sale — slight up */
.cat-tile--flash-sale .cat-tile__img {
    bottom: -7px;
}
/* Job — slightly bigger + nudge down */
.cat-tile--job .cat-tile__img {
    width: 80%;
    height: 88%;
    bottom: -6px;
}
/* Daily Handy Service — slightly smaller */
.cat-tile--daily-handy-service .cat-tile__img {
    width: 70%;
    height: 78%;
}
/* Festival — slightly smaller + tiny nudge down */
.cat-tile--festival .cat-tile__img {
    width: 70%;
    height: 78%;
    bottom: -0.5px;
}

/* Tiny phones (<=359px) — shrink illustrations so 3-line labels (especially
   Daily Handy Service) stay readable. Placed AFTER the per-category rules so
   the daily-handy override actually wins (same specificity, later in source). */
@media (max-width: 359px) {
    .cat-tile__img { width: 62%; height: 70%; }
    .cat-tile__label { max-width: 64%; font-size: 12.5px; }
    .cat-tile--daily-handy-service .cat-tile__img { width: 48%; height: 52%; }
    .cat-tile--daily-handy-service .cat-tile__label { max-width: 66%; }
}

/* ===== Premium-gated desktop grid (Sunday Issues, Job) — blur + lock ===== */
.cat-grid-lockwrap { position: relative; }
.cat-grid-lockwrap.is-locked > :not(.cat-grid-lock) { filter: blur(16px) saturate(.9); pointer-events: none; -webkit-user-select: none; user-select: none; }
.cat-grid-lock {
    position: absolute; inset: 0; z-index: 5; cursor: pointer; border: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    background: rgba(16, 32, 64, .30); color: #fff; text-align: center; padding: 24px;
    border-radius: 16px;
}
.cat-grid-lock__ring { width: 76px; height: 76px; border-radius: 50%; background: rgba(255, 255, 255, .16); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 10px 28px rgba(0, 0, 0, .28); }
.cat-grid-lock__badge { font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; background: #F5A623; color: #16294D; padding: 5px 14px; border-radius: 999px; }
.cat-grid-lock__title { font-size: 24px; font-weight: 800; }
.cat-grid-lock__sub { font-size: 14px; opacity: .9; }
/* Job freemium CTA — shown below the 2 free posters (desktop grid). */
.job-more {
    display: flex; align-items: center; gap: 16px; width: 100%; margin: 22px 0 4px;
    padding: 20px 24px; border: 0; cursor: pointer; text-align: left;
    border-radius: 16px; color: #fff;
    background: linear-gradient(135deg, #16294D, #0e1b34);
    box-shadow: 0 12px 30px rgba(16, 32, 64, .22);
}
.job-more__ring { flex: 0 0 auto; width: 60px; height: 60px; border-radius: 50%; background: rgba(255, 255, 255, .16); display: inline-flex; align-items: center; justify-content: center; }
.job-more__text { display: flex; flex-direction: column; gap: 4px; }
.job-more__badge { align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; background: #F5A623; color: #16294D; padding: 3px 11px; border-radius: 999px; }
.job-more__title { font-size: 20px; font-weight: 800; }
.job-more__sub { font-size: 13.5px; opacity: .9; }
/* "Premium" tag next to a gated category title (works on dashboard + mobile). */
.premium-tag { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 800; letter-spacing: .5px; background: #F5A623; color: #16294D; padding: 2px 9px; border-radius: 999px; vertical-align: middle; }

/* ----- Drawer ----- */
.drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
body.drawer-open .drawer-backdrop { opacity: 1; pointer-events: auto; }

.drawer {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 78%;
    max-width: 340px;
    background: #fff;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform .28s ease;
    display: flex;
    flex-direction: column;
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
    overflow: hidden;
}
body.drawer-open .drawer { transform: translateX(0); }

.drawer__header { height: 56px; }
.drawer__nav { flex: 1; overflow-y: auto; padding: 20px 18px; display: flex; flex-direction: column; gap: 12px; }
.drawer__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 14px;
    background: #F3F8FC;
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
    font-size: 15px;
}
.drawer__item svg { width: 22px; height: 22px; color: var(--text-muted); flex-shrink: 0; }
.drawer__item.is-active { background: var(--sky); color: #fff; }
.drawer__item.is-active svg { color: #fff; }
.drawer__item--danger { color: var(--danger); }
.drawer__item--danger svg { color: var(--danger); }
.drawer__footer { padding: 14px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* ----- Logout modal ----- */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.modal-backdrop.show { display: flex; }
.modal {
    background: #fff;
    border-radius: 20px;
    padding: 26px 22px;
    width: 100%;
    max-width: 340px;
    text-align: center;
    box-shadow: 0 16px 48px rgba(0,0,0,0.2);
}
.modal__icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}
.modal__heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 8px;
}
.modal__heading h3 { margin: 0; font-size: 18px; }
.modal__text { color: var(--text-muted); font-size: 14px; margin-bottom: 22px; }
.modal__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ----- Utility ----- */
.text-danger { color: var(--danger) !important; }
.mt-12 { margin-top: 12px; }
.mt-24 { margin-top: 24px; }
.mb-12 { margin-bottom: 12px; }
.mb-24 { margin-bottom: 24px; }

/* ============================================================
   Desktop-only elements — hidden on mobile by default
   ============================================================ */
.topnav { display: none; }
.desktop-footer { display: none; }
.cat-tabs-wrap { display: none; }
.carousel-arrow { display: none; }

/* ============================================================
   DESKTOP LAYOUT (>=992px) — replicates production vignyapan.com
   Mobile/tablet untouched
   ============================================================ */
@media (min-width: 992px) {
    body {
        background: #fff;
    }

    /* Reset page wrapper for desktop */
    .page {
        max-width: none;
        margin: 0;
        background: #fff;
        min-height: calc(100vh - 100px);
        border-radius: 0;
        overflow: visible;
        box-shadow: none;
    }
    .page__content {
        max-width: 1400px;
        margin: 0 auto;
        padding: 32px 60px 40px;
    }

    /* Hide mobile-only pieces */
    .appbar { display: none; }
    .drawer-backdrop, .drawer { display: none !important; }
    .greet-bar { display: none; }
    .mobile-only { display: none; }
    .cat-grid { display: none; }
    .pwa-fab { display: none !important; }

    /* ---------- Top navigation bar ---------- */
    .topnav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding: 18px 60px;
        background: #54BBE7;
        min-height: 100px;
        flex-wrap: wrap;
    }
    .topnav__logo {
        display: flex;
        align-items: center;
        text-decoration: none;
        flex-shrink: 0;
    }
    .topnav__logo-img {
        height: 64px;
        width: auto;
        display: block;
    }

    .topnav__links {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
    }
    .topnav__link, .topnav__login {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 11px 20px;
        border-radius: 999px;
        color: #fff;
        font-weight: 500;
        font-size: 15px;
        text-decoration: none;
        background: transparent;
        border: none;
        cursor: pointer;
        transition: background .15s ease, color .15s ease;
        font-family: inherit;
    }
    .topnav__link:hover, .topnav__login:hover {
        background: rgba(255, 255, 255, 0.25);
    }
    .topnav__link.is-active, .topnav__login.is-active {
        background: #fff;
        color: #1A2F5C;
        font-weight: 600;
    }
    .topnav__login svg { color: currentColor; }

    /* PWA install — a filled white pill so it reads as a distinct CTA in the topnav. */
    .topnav__install {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 10px 18px;
        border-radius: 999px;
        border: none;
        cursor: pointer;
        background: #fff;
        color: #1A2F5C;
        font-weight: 700;
        font-size: 14px;
        font-family: inherit;
        box-shadow: 0 4px 14px rgba(15, 31, 71, 0.18);
        transition: transform .12s ease, box-shadow .15s ease;
    }
    .topnav__install[hidden] { display: none; }
    .topnav__install:hover { box-shadow: 0 6px 18px rgba(15, 31, 71, 0.26); }
    .topnav__install:active { transform: scale(.96); }

    .topnav__user {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .topnav__avatar {
        width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
        display: inline-flex; align-items: center; justify-content: center;
        overflow: hidden; background: rgba(255, 255, 255, 0.92); color: #1A2F5C;
        font-weight: 800; font-size: 16px; box-shadow: 0 2px 6px rgba(15, 31, 71, 0.18);
    }
    .topnav__avatar > span { width: 100%; height: 100%; display: block; }
    .topnav__avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
    /* Pill = [photo/initial] + name, in one rounded container. Long names ellipsis. */
    .topnav__user-name {
        display: inline-flex;
        align-items: center;
        gap: 11px;
        padding: 4px 20px 4px 8px;
        border-radius: 999px;
        background: transparent;
        color: #fff;
        font-weight: 600;
        font-size: 14px;
        text-decoration: none;
        max-width: 220px;
    }
    .topnav__user-name:hover { background: rgba(255, 255, 255, 0.35); }
    .topnav__uname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* ---------- Auth pages on desktop ---------- */
    .auth-wrap {
        max-width: 520px;
        margin: 60px auto;
        padding: 50px 44px;
        background: #fff;
        border-radius: 24px;
        box-shadow: 0 16px 50px rgba(0, 0, 0, 0.08);
        min-height: auto;
    }
    .auth-logo { margin-bottom: 30px; max-width: 100%; }
    .auth-logo .logo-text { font-size: 54px; }

    /* ---------- Banner carousel — desktop ---------- */
    .banner-carousel {
        position: relative;
        margin: 0 0 18px;
        padding: 0 30px;
    }
    .banner-swiper { padding-bottom: 36px; }
    .banner-swiper .swiper-slide {
        height: 400px;
        padding: 30px 20px;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }
    .banner-swiper .swiper-slide img { max-height: 340px; max-width: 100%; width: auto; height: auto; }
    .banner-swiper .swiper-slide > div {
        font-size: 22px;
        color: #1A2F5C;
        font-weight: 700;
    }

    .carousel-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 6;
        width: 54px;
        height: 54px;
        border-radius: 50%;
        background: #fff;
        border: 1.5px solid rgba(63, 169, 224, 0.55);
        color: #3FA9E0;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all .2s ease;
        box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    }
    .carousel-arrow:hover {
        background: #3FA9E0;
        color: #fff;
        border-color: #3FA9E0;
    }
    .carousel-arrow--prev { left: -8px; }
    .carousel-arrow--next { right: -8px; }


    /* ---------- Vignyapan Category tabs ---------- */
    .cat-tabs-wrap {
        display: block;
        margin-top: 50px;
    }
    .cat-tabs-wrap .section-title {
        font-size: 28px;
        font-weight: 700;
        color: #0F172A;
        margin: 0 0 22px;
    }
    .cat-tabs {
        display: flex;
        gap: 44px;
        border-bottom: 1px solid #E5E7EB;
        overflow-x: auto;
        scrollbar-width: none;
        white-space: nowrap;
        margin-bottom: 0;
    }
    .cat-tabs::-webkit-scrollbar { display: none; }
    .cat-tab {
        padding: 12px 0 16px;
        color: #5C6577;
        text-decoration: none;
        font-weight: 500;
        font-size: 15px;
        border-bottom: 2px solid transparent;
        transition: all .15s ease;
    }
    .cat-tab:hover { color: #1A2F5C; }
    .cat-tab.is-active {
        color: #1A2F5C;
        border-bottom-color: #1A2F5C;
        font-weight: 600;
    }
    .cat-tabs__placeholder {
        padding: 90px 20px;
        text-align: center;
        color: #5C6577;
        font-size: 16px;
    }

    /* ---------- Desktop footer ---------- */
    .desktop-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: 1400px;
        margin: 60px auto 0;
        padding: 26px 60px;
        border-top: 1px solid #E5E7EB;
        color: #5C6577;
        font-size: 14px;
    }
    .desktop-footer__copy strong { color: #1A2F5C; }
    .desktop-footer__sep { opacity: 0.4; margin: 0 6px; }
    .desktop-footer__links { display: flex; gap: 32px; }
    .desktop-footer__links a {
        color: #5C6577;
        text-decoration: none;
        transition: color .15s ease;
    }
    .desktop-footer__links a:hover { color: #1A2F5C; }
}

/* Tiny desktop (≤1100px) — compact nav */
@media (min-width: 992px) and (max-width: 1100px) {
    .topnav { padding: 16px 24px; }
    .page__content { padding: 24px 24px 30px; }
    .desktop-footer { padding: 22px 24px; }
    .topnav__logo-img { height: 44px; }
    .carousel-arrow--prev { left: -4px; }
    .carousel-arrow--next { right: -4px; }
}

/* ===== Daily Handy Service screen ===== */
.dhs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(10px, 3vw, 16px);
    padding: clamp(4px, 1.5vw, 8px) 0 0;
}
.dhs-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    aspect-ratio: 1 / 1.05;
    background: linear-gradient(140deg, var(--g1, #FFE0E1) 0%, var(--g2, #FFC9CE) 100%);
    border-radius: clamp(14px, 4vw, 18px);
    padding: clamp(14px, 4vw, 18px);
    color: #1A2F5C;
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(15, 31, 71, 0.06);
    transition: transform .15s ease, box-shadow .15s ease;
    opacity: 0;
    animation: dhsTileIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: calc(var(--i, 0) * 0.04s);
}
@keyframes dhsTileIn {
    0%   { opacity: 0; transform: translateY(22px) scale(0.92); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.dhs-tile:hover .dhs-tile__icon { transform: translateY(-3px) scale(1.08); }
.dhs-tile__icon { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.dhs-tile:hover, .dhs-tile:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(15, 31, 71, 0.10);
}
.dhs-tile:active { transform: scale(0.98); }
.dhs-tile__title {
    font-size: clamp(13px, 3.6vw, 15px);
    font-weight: 600;
    line-height: 1.25;
    color: #1A2F5C;
    max-width: 88%;
}
.dhs-tile__icon {
    align-self: flex-start;
    margin-top: auto;
    font-size: clamp(38px, 11vw, 52px);
    line-height: 1;
    /* Force colored emoji rendering across platforms */
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif;
    filter: drop-shadow(0 2px 4px rgba(15, 31, 71, 0.15));
}
/* Fallback DB preview image (when no local emoji) — sized to sit like the emoji icon. */
.dhs-tile__img {
    width: clamp(44px, 13vw, 58px);
    height: clamp(44px, 13vw, 58px);
    object-fit: contain;
    display: block;
}
.dhs-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #5C6577;
    padding: 60px 16px;
}
@media (min-width: 768px) {
    .dhs-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
@media (min-width: 992px) {
    .dhs-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1100px; margin: 0 auto; }
    .dhs-tile { aspect-ratio: 1 / 1; padding: 22px; }
    .dhs-tile__title { font-size: 16px; }
    .dhs-tile__icon { font-size: 58px; }
}
@media (min-width: 1200px) {
    .dhs-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ===== Service Provider list + Add form ===== */
.sp-add-btn, .sp-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(15, 31, 71, 0.08);
    text-decoration: none;
    flex-shrink: 0;
}
.sp-logo { background: transparent; box-shadow: none; }
.sp-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; }
.sp-add-btn:active { transform: scale(0.94); }

.sp-list {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 4vw, 18px);
    padding: clamp(4px, 1.5vw, 8px) 0 12px;
}
.sp-card {
    background: #fff;
    border-radius: clamp(14px, 4vw, 18px);
    padding: clamp(16px, 4.5vw, 20px);
    box-shadow: 0 2px 10px rgba(15, 31, 71, 0.08);
    opacity: 0;
    transform: translateY(18px);
    animation: spCardIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--i, 0) * 0.08s);
}
@keyframes spCardIn {
    to { opacity: 1; transform: translateY(0); }
}
.sp-card:hover { box-shadow: 0 8px 20px rgba(15, 31, 71, 0.12); transform: translateY(-2px); transition: box-shadow .2s ease, transform .2s ease; }
.sp-heart--on { animation: heartPulse 0.6s ease both; animation-delay: calc(var(--i, 0) * 0.08s + 0.45s); }
@keyframes heartPulse {
    0%   { transform: scale(0.5); }
    60%  { transform: scale(1.25); }
    100% { transform: scale(1); }
}
.sp-card__photo {
    display: block;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 12px;
    border: 3px solid #EAF5FB;
    box-shadow: 0 4px 12px rgba(15, 31, 71, 0.12);
    cursor: zoom-in;
}
.sp-card__name {
    margin: 0 0 6px;
    font-size: clamp(15px, 4vw, 17px);
    font-weight: 700;
    color: #1A2F5C;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    text-align: center;
}
.sp-card__address,
.sp-card__rating,
.sp-card__trusted {
    text-align: center;
}
.sp-card__rating {
    justify-content: center;
}
.sp-card__address {
    margin: 0 0 10px;
    font-size: clamp(12px, 3.4vw, 14px);
    color: #5C6577;
    line-height: 1.4;
    text-transform: lowercase;
}
.sp-card__rating {
    display: flex;
    gap: 4px;
    margin-bottom: 4px;
}
.sp-heart { color: #D6DBE3; transition: color .15s ease; }
.sp-heart--on { color: #E94B5A; }
.sp-card__trusted {
    margin: 0 0 14px;
    font-size: clamp(12px, 3.3vw, 13px);
    color: #5C6577;
}
.sp-call-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background: #1A2F5C;
    color: #fff;
    text-decoration: none;
    border-radius: 999px;
    height: clamp(46px, 12vw, 52px);
    font-weight: 600;
    font-size: clamp(14px, 3.8vw, 15px);
    box-shadow: 0 4px 12px rgba(15, 31, 71, 0.18);
    transition: background .15s ease, transform .15s ease;
}
.sp-call-btn:hover { background: #142544; }
.sp-call-btn:active { transform: scale(0.98); }
.sp-empty {
    text-align: center;
    padding: 50px 16px;
    color: #5C6577;
    line-height: 1.5;
}
.sp-empty a { color: #3FA9E0; text-decoration: underline; }

/* ----- Add New Service Provider form ----- */
.sp-form {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 3.5vw, 16px);
    padding: clamp(4px, 1vw, 8px) 0 12px;
}
.sp-uploader {
    align-self: center;
    width: clamp(110px, 32vw, 140px);
    height: clamp(110px, 32vw, 140px);
    border: 2px dashed #B0B7C5;
    border-radius: clamp(10px, 3vw, 14px);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
    margin-bottom: 6px;
}
.sp-uploader:hover { border-color: #7C8493; background: #FAFBFC; }
.sp-uploader--has-image {
    background-size: cover;
    background-position: center;
    border-style: solid;
    border-color: #3FA9E0;
}
.sp-uploader--has-image .sp-uploader__icon { display: none; }
.sp-field { position: relative; }
.sp-input {
    width: 100%;
    background: #fff;
    border: 0;
    border-radius: 999px;
    height: clamp(48px, 13vw, 54px);
    padding: 0 clamp(18px, 5vw, 22px);
    font-size: clamp(14px, 3.8vw, 15px);
    color: #1A2F5C;
    box-shadow: 0 2px 8px rgba(15, 31, 71, 0.06);
    outline: none;
}
.sp-input::placeholder { color: #8E96A4; }
.sp-input:focus { box-shadow: 0 0 0 2px #3FA9E0, 0 2px 8px rgba(15, 31, 71, 0.06); }
.sp-textarea {
    border-radius: clamp(16px, 4vw, 20px);
    height: auto;
    min-height: 110px;
    padding: clamp(14px, 4vw, 16px) clamp(18px, 5vw, 22px);
    resize: vertical;
    font-family: inherit;
    line-height: 1.4;
}
.sp-field--mobile { display: flex; align-items: center; }
.sp-mobile-flag {
    position: absolute;
    left: clamp(14px, 4vw, 18px);
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: clamp(18px, 5vw, 22px);
    pointer-events: none;
    z-index: 1;
}
.sp-mobile-code {
    font-size: clamp(14px, 3.8vw, 15px);
    color: #1A2F5C;
    font-weight: 600;
}
.sp-input--mobile { padding-left: clamp(78px, 22vw, 96px); }
.sp-fee-note {
    margin: 6px 4px 4px;
    color: #E5635E;
    font-size: clamp(12px, 3.4vw, 13px);
    line-height: 1.45;
    font-weight: 500;
}
.sp-submit-btn {
    width: 100%;
    background: #1A2F5C;
    color: #fff;
    border: 0;
    border-radius: 999px;
    height: clamp(50px, 13vw, 56px);
    font-size: clamp(15px, 4vw, 16px);
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(15, 31, 71, 0.22);
    transition: background .15s ease, transform .15s ease;
}
.sp-submit-btn:hover { background: #142544; }
.sp-submit-btn:active { transform: scale(0.98); }

.sp-page-title { display: none; }
@media (min-width: 992px) {
    .sp-form { max-width: 560px; margin: 0 auto; }

    /* Desktop: provider cards in a contained multi-column grid (not a stretched
       single-column list), with a page heading and bottom-aligned Call buttons. */
    .sp-page-title {
        display: block; max-width: 1120px; margin: 4px auto 22px;
        font-size: 24px; font-weight: 800; color: #1A2F5C;
    }
    .sp-list {
        max-width: 1120px; margin: 0 auto; padding-top: 0;
        display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px;
    }
    .sp-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
    .sp-card .sp-call-btn { margin-top: auto; width: 100%; }
}
@media (min-width: 1200px) {
    .sp-list { grid-template-columns: repeat(3, 1fr); }
}

/* ===== Single-poster carousel screens (Sunday Issues, Job, Property Bazar,
   Kalol Live). The poster is vertically centred in the space between the app bar
   and the controls row, so it looks balanced on any screen height. We use
   min-height (not a fixed 100dvh + overflow:hidden), so the controls row is
   never clipped behind a phone's browser / navigation chrome and the page can
   still scroll if a portrait poster is very tall. ===== */
@media (max-width: 991px) {
    body.page-issue-fill .page {
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
    }
    body.page-issue-fill .appbar { flex: 0 0 auto; position: static; }
    body.page-issue-fill .page__content {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding-top: 8px;
    }
    body.page-issue-fill .issue-toolbar { flex: 0 0 auto; }
    body.page-issue-fill .issue-actions { flex: 0 0 auto; }
    body.page-issue-fill .issue-carousel.banner-carousel {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 0;
        padding: 0;
    }
    body.page-issue-fill .issue-carousel .banner-swiper {
        /* Hug the poster's own height (with Swiper autoHeight) — the carousel above
           then centres it vertically. flex:0 1 auto so it never stretches tall. */
        flex: 0 1 auto;
        /* min-width:0 + explicit width stop the flex item expanding to the slides'
           intrinsic width (which makes Swiper blow the slide width up to 2^25px). */
        min-width: 0;
        width: 100%;
        min-height: 0;
        padding: 0;
        overflow: hidden;
    }
    body.page-issue-fill .issue-swiper .swiper-slide {
        height: auto;
        aspect-ratio: auto;
        /* No white card — the poster floats centred on the page background. */
        background: transparent;
        box-shadow: none;
        border-radius: 0;
    }
    body.page-issue-fill .issue-swiper .swiper-slide img {
        width: 100%;
        height: auto;
        /* Cap so a tall portrait poster still fits on screen; landscape posters
           keep their natural (shorter) height and sit centred. Trimmed 74→68dvh so
           the poster sits a touch shorter and the controls breathe on small phones
           (mobile/tablet only — desktop ≥992px uses a separate layout). */
        max-height: 68dvh;
        object-fit: contain;
        display: block;
        margin: 0 auto;
    }

    /* Edge-to-edge swipe — same behaviour as the home banner: bleed the poster
       carousel TRACK past .page__content's 16px side padding so a swipe travels
       all the way to the screen edge. Applies to every poster reader (Sunday
       Issues, Job, Property Bazar, Kalol Live, Festival). The card still shows a
       left/right gap via the Swiper neighbour-peek (slidesPerView > 1). Desktop
       (≥992px) keeps the padded layout.
       NOTE: `body` prefix is needed — the base `.issue-carousel.banner-carousel`
       rule later in the file sets `margin: 0` at equal specificity, which would
       otherwise win on source order and cancel this bleed. */
    body .issue-carousel.banner-carousel {
        margin-left: -16px;
        margin-right: -16px;
    }
}

.issue-toolbar {
    display: flex;
    align-items: center;
    gap: clamp(8px, 2.5vw, 14px);
    padding: clamp(12px, 3.5vw, 18px) clamp(14px, 4vw, 22px) clamp(10px, 2vw, 14px);
}
.issue-date-picker {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(15, 31, 71, 0.08);
    height: clamp(46px, 12vw, 54px);
}
.issue-date-picker__icon {
    position: absolute;
    left: clamp(12px, 3.5vw, 16px);
    top: 50%;
    transform: translateY(-50%);
    color: #1A2F5C;
    display: inline-flex;
    pointer-events: none;
}
.issue-date-picker__chevron {
    position: absolute;
    right: clamp(12px, 3.5vw, 16px);
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    color: #1A2F5C;
    display: inline-flex;
    pointer-events: none;
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Flip chevron when the dropdown is open (.is-open class added by JS). */
.issue-date-picker.is-open .issue-date-picker__chevron {
    transform: translateY(-50%) rotate(180deg);
    color: #3FA9E0;
}
/* Ultra-tiny phones (300–359px): tighten padding + shrink icons so the full
   DD-MM-YYYY date string still fits without truncation. */
@media (max-width: 359px) {
    .issue-date-picker { height: 44px; }
    .issue-date-picker__icon { left: 9px; }
    .issue-date-picker__icon svg { width: 16px; height: 16px; }
    .issue-date-picker__chevron { right: 9px; }
    .issue-date-picker__chevron svg { width: 14px; height: 14px; }
    .issue-date-picker__select {
        padding: 0 26px 0 28px;
        font-size: 12.5px;
    }
}
.issue-date-picker__select {
    /* Fill the entire container (including the icon + chevron areas) so
       clicks anywhere on the pill open the native dropdown. The icon and
       chevron sit on top with pointer-events:none so they don't intercept. */
    position: absolute;
    inset: 0;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    width: 100%;
    height: 100%;
    padding: 0 clamp(34px, 11vw, 50px);
    font-size: clamp(13px, 3.8vw, 16px);
    color: #1A2F5C;
    font-weight: 500;
    cursor: pointer;
    outline: none;
}
.issue-pdf-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1A2F5C;
    color: #fff;
    text-decoration: none;
    border-radius: 999px;
    padding: 0 clamp(18px, 5vw, 24px);
    height: clamp(46px, 12vw, 54px);
    font-size: clamp(14px, 3.8vw, 16px);
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(15, 31, 71, 0.18);
    transition: background .15s ease, transform .15s ease;
}
.issue-pdf-btn:hover { background: #142544; }
.issue-pdf-btn:active { transform: scale(0.97); }
.issue-pdf-btn.is-disabled { background: #B0B7C5; pointer-events: none; box-shadow: none; }

.issue-carousel.banner-carousel {
    padding: clamp(8px, 2.5vw, 14px) 0 clamp(4px, 1.5vw, 10px);
    margin: 0;
    background: transparent;
}
.issue-carousel .banner-swiper {
    padding: clamp(6px, 2vw, 14px) 0 clamp(4px, 1.5vw, 10px);
    perspective: none;
}
.issue-swiper .swiper-slide {
    background: #fff;
    border-radius: clamp(10px, 3vw, 14px);
    box-shadow: none;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    height: auto;
    max-height: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.issue-swiper .swiper-slide-active {
    filter: none;
    box-shadow: none;
}
.issue-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
    display: block;
}

/* Poster carousels (Job, Property Bazar, Kalol Live) — match the Sunday
   Issues PDF-reader look: a tall 3/4 portrait card that fills the available
   viewport height. The card is a frosted-glass container (semi-transparent
   white + backdrop blur) so the body gradient peeks through and the poster
   inside feels like it's sitting on glass. Image is centred with
   object-fit: contain — never cropped, just letterboxed inside the glass card. */
/* Swiper auto-adds .swiper-backface-hidden on some pages (Sunday Issues
   triggers it, Job doesn't, even with identical config) — Swiper's own CSS
   then applies `transform: translateZ(0)` on every slide, which silently
   overrides the .banner-swiper .swiper-slide scale(0.86) depth-effect because
   Swiper CSS loads after app.css. Result: side slides feel "flat" on Sunday
   Issues while they pull back on Job. Force the depth scale on every poster
   carousel with !important so both pages animate identically. */
.poster-swiper .swiper-slide,
.poster-swiper.swiper-backface-hidden .swiper-slide {
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    transform-style: preserve-3d;
    transform: scale(0.86) !important;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.poster-swiper .swiper-slide-active,
.poster-swiper.swiper-backface-hidden .swiper-slide-active {
    transform: scale(1) !important;
}

body.page-issue-fill .poster-swiper.issue-swiper .swiper-slide,
.poster-swiper.issue-swiper .swiper-slide {
    aspect-ratio: 3 / 4;
    height: auto;
    max-height: 74dvh;
    background: rgba(255, 255, 255, 0.28);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: clamp(14px, 4vw, 22px);
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
body.page-issue-fill .poster-swiper.issue-swiper .swiper-slide img,
.poster-swiper.issue-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    max-height: 74dvh;
    object-fit: contain;
    margin: 0 auto;
    background: transparent;
}

.issue-empty {
    color: #5C6577;
    font-weight: 500;
    text-align: center;
    padding: 40px 16px;
}

.issue-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(10px, 4vw, 22px);
    padding: clamp(10px, 3vw, 14px) clamp(20px, 7vw, 40px) clamp(16px, 5vw, 24px);
    margin-top: clamp(6px, 1.5vw, 10px);
}
/* Dots sit between the heart and share buttons in the same row */
.issue-actions .banner-pagination {
    flex: 1 1 auto;
    width: auto !important;
    padding: 0 !important;
    margin: 0;
}
.issue-action-btn { flex: 0 0 auto; }
.issue-action-btn.is-active svg { fill: #E63946; stroke: #E63946; }
.issue-action-btn {
    background: transparent;
    border: 0;
    color: #1A2F5C;
    padding: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .15s ease, transform .15s ease;
}
.issue-action-btn:hover { color: #3FA9E0; }
.issue-action-btn:active { transform: scale(0.92); }

@media (min-width: 992px) {
    .issue-toolbar { padding: 20px 24px 12px; max-width: 720px; margin: 0 auto; }
    .issue-carousel { max-width: 720px; margin: 10px auto 0; }
    .issue-actions { max-width: 720px; margin: 10px auto 0; padding: 14px 40px 24px; }
    .issue-date-picker { height: 52px; }
    .issue-pdf-btn { height: 52px; font-size: 15px; padding: 0 26px; }
}

/* ===================================================================
   Desktop Category Grid (AJAX tabs) — ALL rules >=992px only.
   Mobile/tablet UI unaffected.
   =================================================================== */
@media (min-width: 992px) {
    .cat-tabs-wrap { max-width: 1200px; margin: 56px auto 48px; padding: 0 24px; }
    .cat-tabs-wrap .section-title { font-size: 26px; font-weight: 800; color: #1A2F5C; margin: 0 0 18px; }

    /* ---- BACKUP: simple pill tabs (kept as a fallback design) ----
    .cat-tabs { display: flex; flex-wrap: wrap; gap: 10px; border-bottom: none; margin-bottom: 28px; }
    .cat-tab {
        position: relative; background: #EFF5FB; border: none; cursor: pointer;
        font-size: 14.5px; font-weight: 600; color: #5A6B78;
        padding: 10px 20px; border-radius: 999px;
        transition: color .2s ease, background .2s ease, box-shadow .2s ease, transform .12s ease;
    }
    .cat-tab::after { display: none; }
    .cat-tab:hover { color: #1A2F5C; background: #DCECF8; }
    .cat-tab.is-active { color: #fff; background: linear-gradient(135deg, #43AEE3, #2A7FC4); box-shadow: 0 6px 16px rgba(63, 169, 224, .38); }
    .cat-tab:active { transform: scale(.96); }
    ---- end backup ---- */

    /* ===== Gliding segmented tab bar — a brand-gradient highlight physically
       slides + morphs to the active category with a springy ease; each tab
       carries its own icon that pops to full colour when selected. ===== */
    .cat-tabs {
        position: relative; display: flex; flex-wrap: wrap; gap: 4px;
        background: #EAF3FB; border: 1px solid #E1ECF6; border-radius: 16px;
        padding: 6px; margin-bottom: 28px; border-bottom: none;
    }
    .cat-tabs__glider {
        position: absolute; top: 0; left: 0; width: 0; height: 0;
        border-radius: 11px; z-index: 0; pointer-events: none;
        background: linear-gradient(135deg, #43AEE3, #1F6FB8);
        box-shadow: 0 8px 20px rgba(31, 111, 184, .42);
        transition: transform .45s cubic-bezier(.34, 1.32, .5, 1),
                    width .45s cubic-bezier(.34, 1.32, .5, 1),
                    height .3s ease;
    }
    .cat-tab {
        position: relative; z-index: 1;
        flex: 1 1 auto;                 /* fill the track edge-to-edge, no trailing gap */
        display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
        background: none; border: none; cursor: pointer;
        font-size: 14.5px; font-weight: 600; color: #5A6B78;
        padding: 10px 18px; border-radius: 11px;
        transition: color .3s ease;
    }
    .cat-tab::after { display: none; }
    .cat-tab__ic {
        font-size: 16px; line-height: 1; filter: grayscale(.3); opacity: .8;
        transition: transform .3s ease, filter .3s ease, opacity .3s ease;
    }
    .cat-tab:hover { color: #1A2F5C; }
    .cat-tab.is-active { color: #fff; }
    .cat-tab.is-active .cat-tab__ic { transform: scale(1.18); filter: none; opacity: 1; }

    .cat-grid-toolbar { margin-bottom: 22px; }
    .cat-grid-date {
        appearance: none; -webkit-appearance: none;
        padding: 10px 38px 10px 16px; border: 1px solid #D6E4EF; border-radius: 10px;
        background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235A6B78' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E") no-repeat right 14px center;
        font-size: 14px; color: #1A2F5C; font-weight: 600; cursor: pointer; min-width: 220px;
    }

    .cat-poster-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

    .cat-grid__card {
        border-radius: 14px; overflow: hidden; background: #F2F6FA; box-shadow: 0 4px 14px rgba(26,47,92,.06);
        cursor: zoom-in; opacity: 0; transform: translateY(18px);
        transition: transform .35s ease, box-shadow .35s ease;
    }
    .cat-grid__img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
    .cat-grid__card:hover { transform: translateY(-6px) scale(1.015); box-shadow: 0 14px 32px rgba(26,47,92,.16); }

    /* Entrance: staggered fade-up after AJAX inject (.is-loaded set by JS). */
    .cat-tabs__panel.is-loaded .cat-grid__card {
        animation: catCardIn .5s cubic-bezier(.22,.61,.36,1) forwards;
        animation-delay: calc(var(--i, 0) * 60ms);
    }
    @keyframes catCardIn { to { opacity: 1; transform: translateY(0); } }

    .cat-grid-msg { padding: 40px 0; color: #8A99A6; font-size: 15px; }
    .cat-grid-retry { background: none; border: none; color: #3FA9E0; font-weight: 700; cursor: pointer; text-decoration: underline; }

    /* Loading skeleton */
    .cat-grid-skeleton { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
    .cat-grid-skeleton span {
        display: block; border-radius: 14px; aspect-ratio: 3 / 4;
        background: linear-gradient(100deg, #EEF3F7 30%, #F7FAFC 50%, #EEF3F7 70%);
        background-size: 200% 100%; animation: catSkel 1.2s ease-in-out infinite;
    }
    @keyframes catSkel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
}

@media (min-width: 1200px) {
    .cat-poster-grid,
    .cat-grid-skeleton { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .cat-grid__card { opacity: 1; transform: none; }
    .cat-tabs__panel.is-loaded .cat-grid__card { animation: none; }
    .cat-grid__card:hover { transform: none; }
}

/* Link-card grids (Kalol Aaj Kaal articles, Service Provider services) + pagination — >=992px only. */
@media (min-width: 992px) {
    .cat-link-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

    .cat-link-card {
        display: flex; flex-direction: column; text-decoration: none;
        border-radius: 14px; overflow: hidden; background: #fff;
        border: 1px solid #ECF1F6; box-shadow: 0 4px 14px rgba(26,47,92,.06);
        opacity: 0; transform: translateY(18px);
        transition: transform .35s ease, box-shadow .35s ease, border-color .25s ease;
    }
    .cat-link-card:hover { transform: translateY(-6px); box-shadow: 0 14px 32px rgba(26,47,92,.16); border-color: #CFE6F6; }

    .cat-link-card__media {
        display: grid; place-items: center; aspect-ratio: 4 / 3;
        background: #F2F6FA; overflow: hidden;
    }
    /* Icon-sized (matches the old 54px emoji) and centered in the media box,
       not stretched to fill the whole card. */
    .cat-link-card__img { width: 64px; height: 64px; object-fit: contain; }
    .cat-link-card__icon { font-size: 54px; line-height: 1; }
    .cat-link-card__media.is-fallback::after { content: "📄"; font-size: 54px; }

    .cat-link-card__label {
        padding: 14px 14px 16px; text-align: center;
        font-size: 15px; font-weight: 600; color: #1A2F5C; line-height: 1.35;
    }

    .cat-tabs__panel.is-loaded .cat-link-card {
        animation: catCardIn .5s cubic-bezier(.22,.61,.36,1) forwards;
        animation-delay: calc(var(--i, 0) * 50ms);
    }

    /* Pagination */
    .cat-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 30px 0 6px; }
    .cat-pager__btn, .cat-pager__num {
        min-width: 40px; height: 40px; padding: 0 12px;
        border: 1px solid #D6E4EF; border-radius: 10px; background: #fff;
        font-size: 14px; font-weight: 600; color: #1A2F5C; cursor: pointer;
        transition: background .15s ease, color .15s ease, border-color .15s ease;
    }
    .cat-pager__btn:hover:not(:disabled), .cat-pager__num:hover { background: #EAF6FD; border-color: #3FA9E0; }
    .cat-pager__num.is-active { background: #3FA9E0; border-color: #3FA9E0; color: #fff; cursor: default; }
    .cat-pager__btn:disabled { opacity: .45; cursor: not-allowed; }
    .cat-pager__dots { color: #8A99A6; padding: 0 2px; }
}

@media (min-width: 1200px) {
    .cat-link-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .cat-link-card { opacity: 1; transform: none; }
    .cat-tabs__panel.is-loaded .cat-link-card { animation: none; }
    .cat-link-card:hover { transform: none; }
}

/* ===================================================================
   "Sunday Edition" — editorial/newspaper design, Sunday Issues only (>=992px).
   Trial design; other categories keep the plain poster grid.
   =================================================================== */
@media (min-width: 992px) {
    .sunday-edition {
        --ink: #16223D;
        --paper: #FBF8F1;
        --accent: #3FA9E0;
        background:
            radial-gradient(circle at 12% -10%, rgba(63,169,224,.06), transparent 42%),
            var(--paper);
        border: 1px solid #ECE6D8;
        border-radius: 16px;
        padding: 34px 38px 42px;
        box-shadow: 0 10px 36px rgba(22,34,61,.06);
    }

    .sunday-edition__masthead {
        display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
        padding-bottom: 18px; margin-bottom: 32px;
        border-bottom: 4px double var(--ink);
    }
    .sunday-edition__brand { display: flex; flex-direction: column; gap: 5px; }
    .sunday-edition__kicker {
        font-size: 12px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: var(--accent);
    }
    .sunday-edition__date {
        margin: 0; font-family: Georgia, 'Times New Roman', serif;
        font-size: 38px; font-weight: 700; line-height: 1.04; color: var(--ink); letter-spacing: -.5px;
    }
    .sunday-edition__meta { font-family: Georgia, serif; font-style: italic; font-size: 13px; color: #908A77; }

    .sunday-edition__tools { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
    .sunday-edition__select {
        appearance: none; -webkit-appearance: none;
        padding: 11px 38px 11px 16px; border: 1px solid #D8D0BE; border-radius: 8px; height: 44px;
        background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235A6B78' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E") no-repeat right 12px center;
        font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; min-width: 190px;
    }
    .sunday-edition__pdf {
        display: inline-flex; align-items: center; height: 44px; padding: 0 22px;
        background: var(--ink); color: #fff; border-radius: 8px; text-decoration: none;
        font-size: 14px; font-weight: 700; letter-spacing: .3px;
        transition: background .15s ease, transform .1s ease;
    }
    .sunday-edition__pdf:hover { background: #0E1830; }
    .sunday-edition__pdf:active { transform: scale(.97); }

    .sunday-hero { position: relative; margin: 0 auto 40px; width: min(440px, 58%); opacity: 0; transform: translateY(20px); }
    .sunday-hero__img {
        width: 100%; display: block; border-radius: 6px; cursor: zoom-in;
        border: 1px solid rgba(22,34,61,.08); box-shadow: 0 20px 50px rgba(22,34,61,.22);
    }
    .sunday-hero__tag {
        position: absolute; top: 16px; left: -8px; z-index: 2;
        background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
        letter-spacing: 2px; text-transform: uppercase; padding: 7px 15px; border-radius: 3px;
        box-shadow: 0 6px 16px rgba(63,169,224,.4);
    }

    .sunday-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
    .sunday-page {
        position: relative; margin: 0; border-radius: 8px; overflow: hidden;
        background: #fff; border: 1px solid #ECE6D8; box-shadow: 0 4px 14px rgba(22,34,61,.07);
        opacity: 0; transform: translateY(18px);
        transition: transform .35s ease, box-shadow .35s ease;
    }
    .sunday-page:hover { transform: translateY(-6px); box-shadow: 0 16px 34px rgba(22,34,61,.16); }
    .sunday-page__img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; cursor: zoom-in; }
    .sunday-page__no {
        position: absolute; top: 10px; left: 10px; z-index: 2;
        width: 38px; height: 38px; display: grid; place-items: center;
        font-family: Georgia, serif; font-size: 15px; font-weight: 700; color: #fff;
        background: var(--ink); border-radius: 50%;
        border: 2px solid rgba(255,255,255,.85); box-shadow: 0 4px 10px rgba(22,34,61,.35);
    }

    .cat-tabs__panel.is-loaded .sunday-hero,
    .cat-tabs__panel.is-loaded .sunday-page {
        animation: catCardIn .55s cubic-bezier(.22,.61,.36,1) forwards;
        animation-delay: calc(var(--i, 0) * 55ms);
    }
}

@media (min-width: 1200px) {
    .sunday-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .sunday-hero, .sunday-page { opacity: 1; transform: none; }
    .cat-tabs__panel.is-loaded .sunday-hero,
    .cat-tabs__panel.is-loaded .sunday-page { animation: none; }
    .sunday-page:hover { transform: none; }
}

/* ===================================================================
   "Festive Gallery" — premium dark showcase, Festival only (>=992px).
   Trial design #2 (compare vs Sunday Edition / plain grid).
   =================================================================== */
@media (min-width: 992px) {
    .festive-gallery {
        --gold: #E8B65A;
        position: relative; overflow: hidden;
        border-radius: 18px; padding: 36px 38px 44px;
        background:
            radial-gradient(circle at 85% -5%, rgba(232,182,90,.16), transparent 38%),
            radial-gradient(circle at 6% 112%, rgba(63,169,224,.12), transparent 42%),
            linear-gradient(155deg, #16203B 0%, #0B1222 100%);
        border: 1px solid rgba(232,182,90,.20);
        box-shadow: 0 20px 50px rgba(8,13,28,.40);
    }
    .festive-gallery::before {
        content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
        background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .85;
    }

    .festive-gallery__head {
        display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 30px;
    }
    .festive-gallery__kicker {
        display: block; font-size: 12px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase;
        color: var(--gold); margin-bottom: 6px;
    }
    .festive-gallery__title { margin: 0; font-size: 30px; font-weight: 800; color: #FBF6EA; letter-spacing: -.3px; }
    .festive-gallery__select {
        appearance: none; -webkit-appearance: none;
        padding: 11px 38px 11px 16px; height: 44px; min-width: 190px; flex-shrink: 0;
        border: 1px solid rgba(232,182,90,.40); border-radius: 8px;
        background: rgba(255,255,255,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23E8B65A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E") no-repeat right 12px center;
        color: #FBF6EA; font-size: 14px; font-weight: 600; cursor: pointer;
    }
    .festive-gallery__select option { color: #16203B; }

    .festive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
    .festive-card {
        margin: 0; border-radius: 12px; overflow: hidden; position: relative; background: #0B1222;
        box-shadow: 0 0 0 1px rgba(232,182,90,.22), 0 14px 30px rgba(0,0,0,.45);
        opacity: 0; transform: translateY(20px) scale(.96);
        transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease;
    }
    .festive-card__img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; cursor: zoom-in; }
    .festive-card:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 0 0 1px rgba(232,182,90,.60), 0 0 28px rgba(232,182,90,.28), 0 22px 44px rgba(0,0,0,.55);
    }

    .cat-grid-msg--dark { color: #C9D2E2; }

    .cat-tabs__panel.is-loaded .festive-card {
        animation: festiveCardIn .55s cubic-bezier(.22,.61,.36,1) forwards;
        animation-delay: calc(var(--i, 0) * 55ms);
    }
    @keyframes festiveCardIn { to { opacity: 1; transform: translateY(0) scale(1); } }
}

@media (min-width: 1200px) {
    .festive-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .festive-card { opacity: 1; transform: none; }
    .cat-tabs__panel.is-loaded .festive-card { animation: none; }
    .festive-card:hover { transform: none; }
}

/* Shared entrance for trial designs #3–#5 (uses the `translate` property so the
   :hover `transform` composes cleanly instead of being overridden). */
@keyframes riseIn { to { opacity: 1; translate: 0 0; } }

/* ---- TRIAL #3: "Pinboard" — Job only (>=992px) ---- */
@media (min-width: 992px) {
    .pinboard {
        border-radius: 16px; padding: 42px 38px 50px;
        background-color: #E7DFCE;
        background-image: radial-gradient(rgba(150,120,80,.13) 1.5px, transparent 1.5px);
        background-size: 16px 16px;
        border: 1px solid #D6CBB3;
        box-shadow: inset 0 2px 14px rgba(90,70,40,.10);
    }
    .pin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 42px 30px; }
    .pin-card {
        margin: 0; background: #fff; padding: 12px 12px 16px;
        box-shadow: 0 10px 22px rgba(60,45,20,.22);
        position: relative; opacity: 0; translate: 0 18px; rotate: var(--rot, 0deg);
        transition: transform .3s ease, rotate .3s ease, box-shadow .3s ease;
    }
    .pin-card:nth-child(3n+1) { --rot: -2.4deg; }
    .pin-card:nth-child(3n+2) { --rot: 1.6deg; }
    .pin-card:nth-child(3n)   { --rot: -1deg; }
    .pin-card__img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; cursor: zoom-in; }
    .pin-card__pin {
        position: absolute; top: -9px; left: 50%; translate: -50% 0;
        width: 18px; height: 18px; border-radius: 50%;
        background: radial-gradient(circle at 35% 30%, #ff9a9a, #d63b3b);
        box-shadow: 0 3px 6px rgba(0,0,0,.35), inset 0 -2px 3px rgba(0,0,0,.2); z-index: 2;
    }
    .pin-card:hover { transform: translateY(-6px) scale(1.02); rotate: 0deg; box-shadow: 0 20px 40px rgba(60,45,20,.34); z-index: 3; }
    .cat-tabs__panel.is-loaded .pin-card { animation: riseIn .5s cubic-bezier(.22,.61,.36,1) forwards; animation-delay: calc(var(--i,0) * 50ms); }
}

/* ---- TRIAL #4: "Glass" — Property Bazar only (>=992px) ---- */
@media (min-width: 992px) {
    .glass-wrap {
        border-radius: 18px; padding: 38px; position: relative; overflow: hidden;
        background:
            radial-gradient(circle at 15% 18%, rgba(91,141,239,.42), transparent 40%),
            radial-gradient(circle at 85% 12%, rgba(70,197,176,.40), transparent 40%),
            radial-gradient(circle at 55% 105%, rgba(160,108,213,.40), transparent 46%),
            linear-gradient(135deg, #EAF2FF, #F3EAFF);
        border: 1px solid rgba(255,255,255,.6);
    }
    .glass-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .glass-card {
        margin: 0; border-radius: 16px; padding: 9px; overflow: hidden;
        background: rgba(255,255,255,.25);
        backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%);
        border: 1px solid rgba(255,255,255,.55);
        box-shadow: 0 8px 28px rgba(60,80,140,.18);
        opacity: 0; translate: 0 20px; transition: transform .35s ease, box-shadow .35s ease;
    }
    .glass-card__img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 9px; cursor: zoom-in; }
    .glass-card:hover { transform: translateY(-7px); box-shadow: 0 20px 44px rgba(60,80,140,.30); }
    .cat-tabs__panel.is-loaded .glass-card { animation: riseIn .5s cubic-bezier(.22,.61,.36,1) forwards; animation-delay: calc(var(--i,0) * 50ms); }
}

/* ---- TRIAL #5: "Gallery Wall" — Kalol Live only (>=992px) ---- */
@media (min-width: 992px) {
    .gallerywall {
        border-radius: 16px; padding: 46px 40px; position: relative;
        background:
            radial-gradient(ellipse 60% 40% at 50% -8%, rgba(255,250,235,.95), transparent 60%),
            linear-gradient(#F3F0E9, #E7E1D6);
        border: 1px solid #E0D9CC;
    }
    .wall-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 34px; }
    .wall-frame {
        margin: 0; background: #fff; padding: 10px; border-radius: 2px; border: 1px solid #E4DDCE;
        box-shadow: 0 14px 30px rgba(80,70,50,.16);
        opacity: 0; translate: 0 18px; transition: transform .35s ease, box-shadow .35s ease;
    }
    .wall-frame__img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border: 1px solid #ECE6D8; cursor: zoom-in; }
    .wall-frame:hover { transform: translateY(-8px); box-shadow: 0 26px 50px rgba(80,70,50,.26); }
    .cat-tabs__panel.is-loaded .wall-frame { animation: riseIn .5s cubic-bezier(.22,.61,.36,1) forwards; animation-delay: calc(var(--i,0) * 55ms); }
}

@media (min-width: 1200px) {
    .pin-grid, .glass-grid, .wall-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .pin-card, .glass-card, .wall-frame { opacity: 1; translate: 0 0; }
    .cat-tabs__panel.is-loaded .pin-card,
    .cat-tabs__panel.is-loaded .glass-card,
    .cat-tabs__panel.is-loaded .wall-frame { animation: none; }
    .pin-card:hover, .glass-card:hover, .wall-frame:hover { transform: none; }
}