/* ---------- सिर्फ मोबाइल पर दिखे ---------- */
@media (max-width: 767.98px) {
    :root{
        --header-h: 60px;
        --cta-h: 48px;
        --ad-h: 13vh;
        --ticker-h: 28px;
        --quick-h: 40px;
        --bottom-stack-h: calc(var(--ad-h) + var(--ticker-h) + var(--quick-h) + env(safe-area-inset-bottom));
}

    /* Header */
    .m-header {
        position: fixed; top: 0; left: 0; right: 0;
        height: calc(var(--header-h) + env(safe-area-inset-top));
        padding-top: env(safe-area-inset-top);
        background: #ff7919; border-bottom: 1px solid #eee; z-index: 60;
        display: grid; grid-template-columns: 50% 50%; align-items: center; gap: 2px;
        padding-inline: 2px;
    }
    
    /* CTA buttons */
    .cta-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        color: #fff;
        text-decoration: none;
        font-weight: 700;
        height: 100%;
        width: 100%;
    }

    /* Colors */
    .join-btn { background: #000076; }
    .search-btn { background: #ff4102; }
    .login-btn { background: #0e5500; }
    .logout-btn { background: #ff4102; border: none; cursor: pointer; }

    /* Common row style */
    .cta-row {
        position: fixed;
        top: calc(var(--header-h) + env(safe-area-inset-top));
        left: 0; right: 0;
        height: var(--cta-h);
        z-index: 55;
        background: #fff;
        border-bottom: 1px solid #eee;
        gap: 2px;
        padding: 2px;
    }

    /* Logged-in row */
    .cta-row-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    /* Guest row */
    .cta-row-3 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }


    /* Middle scroll area */
    .mobile-post-scroll {
        position: fixed; left: 0; right: 0;
        top: calc(var(--header-h) + var(--cta-h) + env(safe-area-inset-top));
        height: calc(100vh - var(--header-h) - var(--cta-h) - var(--bottom-stack-h) - env(safe-area-inset-top));
        overflow-y: auto;
        padding: 12px; background: #fff; z-index: 40;
    }

    /* Bottom stack */
    .bottom-stack { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: #fff; border-top: 1px solid #eee; }

    /* Ads Row */
    .ad-row {
        height: var(--ad-h); display: grid; grid-template-columns: 55% 45%; gap: 10px; padding: 10px 12px;
    }
    .ad-box { background: #fff; border: 1px solid #eee; border-radius: 10px; overflow: hidden; }

    /* News ticker */
    .ticker {
        height: var(--ticker-h); border-top: 1px solid #eee; border-bottom: 1px solid #eee;
        background: #ff4d01; overflow: hidden; display: flex; align-items: center;
    }
    .ticker-track { white-space: nowrap; animation: ticker-move 18s linear infinite; }
    .ticker a { display: inline-block; margin-right: 24px; text-decoration: none; color: #111; font-weight: 700; }
    @keyframes ticker-move { from { transform: translateX(0); } to { transform: translateX(-50%); } }

    /* Quick buttons row */
    .quick-row {
        height: calc(var(--quick-h) + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px;
        background: #ff882c; padding: 2px;
    }
    .quick-row a {
        display: flex; align-items: center; justify-content: center;
        text-decoration: none; color: #fff; font-size: 12px; font-weight: 700;
        border: 1px solid #eee; border-radius: 12px; background: #000c67; text-align: center;
    }

    .icon-btn {
            border: 0;
            background: #ff4f04;
            padding: 8px 10px;
            border-radius: 12px;
            font-size: 18px;
            color: #fff;
    }
}