@media(max-width:400px){
    .header-inner{gap:4px;padding:0 8px;}
    #logo-text img{width:70px;}
    #hdr-join{padding:6px 8px;font-size:9px;}
    #hdr-login{padding:6px 8px;font-size:9px;}
    .lang-toggle{width:48px;margin:0;}
    .lang-knob{width:22px;height:22px;font-size:8px;}
    .cat-grid{grid-template-columns:repeat(2,1fr);gap:8px;}
    .cat-card{padding:14px 10px;}
    .icon-square{width:40px;height:40px;margin-bottom:10px;}
    .icon-square i{font-size:16px;}
    .cat-name{font-size:12px;}
    .prof-grid{grid-template-columns:1fr;}
    .prof-img-wrap{height:180px;}
    .subcat-grid{grid-template-columns:repeat(2,1fr);gap:8px;}
    .subcat-card{padding:14px 10px;}
    .profile-stats{gap:8px;}
    .stat-item .stat-val{font-size:12px;}
    .tabs-nav{overflow-x:auto;-webkit-overflow-scrolling:touch;}
    .tab-btn{padding:10px 10px;font-size:11px;flex-shrink:0;}
    .plan-card{padding:18px 14px 22px;}
    .plan-price .amount{font-size:28px;}
    .plan-features li{font-size:11px;gap:7px;}
    #hero{padding:28px 12px 26px;}
    #hero h1{font-size:22px;}
    .story-ring{width:56px;height:56px;}
    .story-name{font-size:10px;max-width:52px;}
    .stories-scroll{gap:10px;}
    .pro-form-section{padding: 24px 14px 28px;}
    .pf-exp-btns{gap: 8px;}
    .pf-exp-btn{padding: 9px 16px; font-size: 13px;}
    .cat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .cat-card {
        padding: 12px 8px;
    }
    .cat-name {
        font-size: 11px;
    }
}