/* GGurgenidze — Mobile drawer + header/composer polish */
.mobile-menu-toggle,
.mobile-account-drawer{display:none}

@media(max-width:900px){
    .site-header{
        background:linear-gradient(180deg,#fdfefe 0%,#f8fbff 100%)!important;
        border-bottom:1px solid #d8e3f0!important;
        box-shadow:0 6px 18px rgba(21,47,84,.05)!important;
    }
    .nav-wrap{
        display:grid!important;
        grid-template-columns:40px minmax(0,1fr) 40px!important;
        align-items:center!important;
        gap:8px!important;
        min-height:62px!important;
        padding-top:max(8px, env(safe-area-inset-top,0px))!important;
        padding-bottom:8px!important;
    }
    .mobile-menu-toggle{
        display:grid;
        place-items:center;
        width:40px;
        height:40px;
        padding:0;
        border:0;
        border-radius:12px;
        background:transparent;
        color:#1b6fd9;
        cursor:pointer;
        -webkit-tap-highlight-color:transparent;
        box-shadow:none;
    }
    .mobile-menu-toggle:hover,
    .mobile-menu-toggle:focus-visible{
        background:#edf5ff;
        outline:none;
    }
    .mobile-menu-toggle:active{transform:scale(.96)}
    .mobile-menu-toggle svg{
        width:25px;
        height:25px;
        fill:none;
        stroke:currentColor;
        stroke-width:2.15;
        stroke-linecap:round;
    }
    .mobile-menu-toggle .sr-only{
        position:absolute!important;
        width:1px!important;
        height:1px!important;
        padding:0!important;
        margin:-1px!important;
        overflow:hidden!important;
        clip:rect(0,0,0,0)!important;
        white-space:nowrap!important;
        border:0!important;
    }

    .nav-wrap>.brand{
        justify-self:start;
        min-width:0;
        overflow:hidden;
        display:flex!important;
        align-items:center!important;
    }
    .nav-wrap>.brand .premium-brand-logo{
        display:block;
        width:auto!important;
        max-width:min(48vw,172px)!important;
        max-height:40px!important;
        object-fit:contain;
        object-position:left center;
        filter:drop-shadow(0 2px 6px rgba(19,77,150,.08));
    }
    .header-actions{
        justify-self:end;
        width:40px;
        min-width:40px;
        display:grid!important;
        place-items:center;
    }
    .header-actions .notification-button{
        display:grid!important;
        width:40px!important;
        height:40px!important;
        border-radius:12px!important;
        background:#f4f8fd!important;
        color:#3b5270!important;
        box-shadow:inset 0 0 0 1px rgba(154,177,205,.25)!important;
    }
    .header-actions .notification-button:hover,
    .header-actions .notification-button:focus-visible{
        background:#eaf3ff!important;
        color:#166fe5!important;
    }
    .header-actions .logout-button,
    .header-actions form.inline-form{display:none!important}

    .composer-card,
    .composer-card-premium,
    .feed-pro-composer{
        border-radius:20px!important;
        padding:14px 14px 12px!important;
        box-shadow:0 10px 26px rgba(26,48,81,.06)!important;
    }
    .composer-row,
    .composer-row-premium{
        gap:10px!important;
        align-items:flex-start!important;
    }
    .composer-row .mini-avatar,
    .composer-row-premium .mini-avatar,
    .composer-row img.mini-avatar,
    .composer-row-premium img.mini-avatar{
        width:42px!important;
        height:42px!important;
        flex:0 0 42px!important;
    }
    .composer-row textarea,
    .composer-row-premium textarea,
    .composer-card textarea,
    .feed-pro-composer textarea{
        min-height:56px!important;
        height:56px!important;
        padding:14px 15px!important;
        border-radius:16px!important;
        resize:none!important;
        line-height:1.4!important;
        font-size:.98rem!important;
    }
    .composer-row textarea::placeholder,
    .composer-row-premium textarea::placeholder{
        color:#7d8ca1!important;
    }
    .composer-actions,
    .composer-actions-premium{
        margin-top:10px!important;
        padding-top:10px!important;
        gap:10px!important;
        align-items:center!important;
    }
    .upload-button{
        font-size:.98rem!important;
        font-weight:800!important;
    }
    .selected-file,
    .composer-char-counter,
    .feed-pro-counter{
        font-size:.8rem!important;
    }
    .composer-actions .button,
    .composer-actions-premium .button{
        min-height:48px!important;
        padding:0 18px!important;
        border-radius:14px!important;
        font-size:.98rem!important;
    }

    .mobile-account-drawer{
        position:fixed;
        inset:0;
        z-index:9000;
        display:block;
        pointer-events:none;
    }
    .mobile-account-drawer[hidden]{display:none!important}
    .mobile-drawer-backdrop{
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
        padding:0;
        border:0;
        background:rgba(8,18,32,.12);
        opacity:0;
        transition:opacity .22s ease;
        backdrop-filter:blur(0);
    }
    .mobile-drawer-panel{
        position:absolute;
        top:0;
        bottom:0;
        left:0;
        width:min(86vw,360px);
        padding:calc(12px + env(safe-area-inset-top,0px)) 12px calc(14px + env(safe-area-inset-bottom,0px));
        display:flex;
        flex-direction:column;
        background:#fff;
        border-right:1px solid #dfe7f1;
        box-shadow:18px 0 60px rgba(20,42,73,.20);
        transform:translateX(-105%);
        transition:transform .24s cubic-bezier(.22,.8,.35,1);
        overflow:hidden;
    }
    .mobile-account-drawer.is-open{pointer-events:auto}
    .mobile-account-drawer.is-open .mobile-drawer-backdrop{
        opacity:1;
        background:rgba(8,18,32,.43);
        backdrop-filter:blur(4px);
    }
    .mobile-account-drawer.is-open .mobile-drawer-panel{transform:translateX(0)}

    .mobile-drawer-header{
        display:grid;
        grid-template-columns:minmax(0,1fr) 40px;
        align-items:center;
        gap:8px;
        padding:4px 2px 14px;
        border-bottom:1px solid #e7edf5;
    }
    .mobile-drawer-identity{
        min-width:0;
        display:grid;
        grid-template-columns:52px minmax(0,1fr);
        align-items:center;
        gap:11px;
        color:#172b4d;
        text-decoration:none;
    }
    .mobile-drawer-identity>img,
    .mobile-drawer-identity>.avatar-placeholder{
        width:52px;
        height:52px;
        border-radius:16px;
        object-fit:cover;
        display:grid;
        place-items:center;
        font-size:1.2rem;
        box-shadow:0 7px 18px rgba(21,56,96,.12);
    }
    .mobile-drawer-identity>span:last-child{
        min-width:0;
        display:grid;
        gap:4px;
    }
    .mobile-drawer-identity strong{
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        font-size:.96rem;
    }
    .mobile-drawer-identity small{
        color:#6c7d94;
        font-size:.72rem;
        font-weight:700;
    }
    .mobile-drawer-close{
        width:40px;
        height:40px;
        padding:0;
        border:0;
        border-radius:12px;
        display:grid;
        place-items:center;
        background:#eef3f9;
        color:#51647d;
        font-size:1.7rem;
        line-height:1;
        cursor:pointer;
    }

    .mobile-drawer-nav{
        flex:1;
        min-height:0;
        display:grid;
        align-content:start;
        gap:5px;
        padding:12px 0;
        overflow-y:auto;
        overscroll-behavior:contain;
        scrollbar-width:none;
    }
    .mobile-drawer-nav::-webkit-scrollbar{display:none}
    .mobile-drawer-link{
        position:relative;
        display:grid;
        grid-template-columns:42px minmax(0,1fr) auto;
        align-items:center;
        gap:10px;
        min-height:50px;
        padding:5px 11px 5px 7px;
        border-radius:14px;
        color:#344a67;
        text-decoration:none;
        font-size:.92rem;
        font-weight:800;
    }
    .mobile-drawer-link:active{transform:scale(.985)}
    .mobile-drawer-link.is-active{
        background:#eaf3ff;
        color:#176bcf;
    }
    .mobile-drawer-icon{
        width:40px;
        height:40px;
        border-radius:13px;
        display:grid;
        place-items:center;
        background:#f0f5fb;
        color:#4e6684;
    }
    .mobile-drawer-link.is-active .mobile-drawer-icon{
        background:#1676ed;
        color:#fff;
        box-shadow:0 8px 18px rgba(22,118,237,.22);
    }
    .mobile-drawer-icon svg,
    .mobile-drawer-logout svg{
        width:21px;
        height:21px;
        fill:none;
        stroke:currentColor;
        stroke-width:1.9;
        stroke-linecap:round;
        stroke-linejoin:round;
    }
    .mobile-drawer-badge{
        min-width:22px;
        height:22px;
        padding:0 6px;
        border-radius:999px;
        display:grid;
        place-items:center;
        background:#e53945;
        color:#fff;
        font-size:.66rem;
        line-height:1;
    }
    .mobile-drawer-badge[hidden]{display:none!important}
    .mobile-drawer-divider{
        height:1px;
        margin:7px 8px;
        background:#e4ebf4;
    }
    .mobile-drawer-logout{
        display:block!important;
        margin:0;
        padding-top:10px;
        border-top:1px solid #e7edf5;
    }
    .mobile-drawer-logout button{
        width:100%;
        min-height:48px;
        padding:8px 12px;
        border:0;
        border-radius:14px;
        display:flex;
        align-items:center;
        justify-content:center;
        gap:9px;
        background:#f2f5f9;
        color:#43566f;
        font-weight:800;
        cursor:pointer;
    }
    .mobile-drawer-logout button>span{display:grid;place-items:center}
    body.mobile-drawer-open{overflow:hidden!important;touch-action:none}
}

@media(max-width:390px){
    .nav-wrap{grid-template-columns:38px minmax(0,1fr) 38px!important;gap:4px!important}
    .mobile-menu-toggle,
    .header-actions .notification-button{width:38px!important;height:38px!important}
    .nav-wrap>.brand .premium-brand-logo{max-width:min(46vw,150px)!important;max-height:36px!important}
    .mobile-drawer-panel{width:min(90vw,340px)}
    .composer-row textarea,
    .composer-row-premium textarea,
    .composer-card textarea,
    .feed-pro-composer textarea{
        min-height:52px!important;
        height:52px!important;
        padding:12px 14px!important;
    }
}

@media(min-width:901px){
    .mobile-account-drawer{display:none!important}
}

@media(max-width:900px){
    .nav-wrap:has(> .guest-nav){
        grid-template-columns:minmax(0,1fr) auto!important;
        gap:10px!important;
    }
    .nav-wrap:has(> .guest-nav) > .brand{
        grid-column:1!important;
        justify-self:start!important;
        min-width:0!important;
        max-width:100%!important;
    }
    .nav-wrap:has(> .guest-nav) > .brand .premium-brand-logo{
        max-width:min(37vw,140px)!important;
        max-height:34px!important;
    }
    .nav-wrap > .guest-nav{
        grid-column:2!important;
        justify-self:end!important;
        min-width:0!important;
        display:flex!important;
        align-items:center!important;
        gap:8px!important;
        flex-wrap:nowrap!important;
    }
    .nav-wrap > .guest-nav a{
        min-height:36px!important;
        padding:7px 11px!important;
        border-radius:12px!important;
        font-size:.86rem!important;
        line-height:1!important;
        white-space:nowrap!important;
        flex:0 0 auto!important;
        box-shadow:0 1px 0 rgba(255,255,255,.84) inset!important;
    }
}

@media(max-width:430px){
    .nav-wrap:has(> .guest-nav){
        gap:8px!important;
    }
    .nav-wrap:has(> .guest-nav) > .brand .premium-brand-logo{
        max-width:min(34vw,126px)!important;
        max-height:32px!important;
    }
    .nav-wrap > .guest-nav{
        gap:6px!important;
    }
    .nav-wrap > .guest-nav a{
        min-height:34px!important;
        padding:6px 10px!important;
        border-radius:11px!important;
        font-size:.82rem!important;
    }
}

@media(max-width:360px){
    .nav-wrap:has(> .guest-nav) > .brand .premium-brand-logo{
        max-width:min(31vw,112px)!important;
        max-height:30px!important;
    }
    .nav-wrap > .guest-nav a{
        padding:6px 8px!important;
        font-size:.79rem!important;
    }
}