@media(max-width:430px){
  .app{padding-left:14px;padding-right:14px}
  .topbar{width:calc(100% + 28px);margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}
  .topbar-inner{gap:6px}
  .header-ctrl{height:38px;font-size:11.5px;padding:0 10px}
  .header-ctrl i{font-size:13px}
  .lang-switch{height:38px;padding:3px}
  .lang-switch button{font-size:10.5px;padding:0 8px}

  /* Home */
  .hero{padding:12px 0 0}
  .hero-mic-wrap{width:64px;height:64px}
  .hero-mic{width:50px;height:50px;font-size:20px}
  .hero-mic-ring{inset:-6px}
  .hero-mic-ring-2{inset:-14px}
  .hero-title{margin-top:14px;font-size:clamp(20px,6vw,26px)}
  .hero-sub{font-size:clamp(11.5px,3vw,13px)}
  .home-actions{margin-top:22px;gap:11px}
  .home-card-primary{min-height:100px;padding:18px;border-radius:16px}
  .hcp-icon{width:44px;height:44px;flex-basis:44px;font-size:18px;border-radius:12px}
  .hcp-title{font-size:clamp(14px,3.8vw,16px)}
  .hcp-desc{font-size:clamp(10.5px,2.6vw,12px)}
  .home-secondary-grid{gap:10px}
  .home-card-secondary{min-height:140px;padding:18px 12px 14px;border-radius:16px}
  .hcs-icon{width:44px;height:44px;font-size:18px;margin-bottom:12px;border-radius:12px}
  .hcs-title{font-size:clamp(12.5px,3.4vw,14px)}
  .hcs-desc{font-size:clamp(10px,2.5vw,11px)}

  /* Session */
  .direction-card{padding:16px 16px 14px;border-radius:0 0 16px 16px}
  .direction-value{font-size:18px}
  .swap-btn{padding:7px 14px;font-size:11px}
  .session-workspace{border-radius:18px}
  .action-btn{height:48px;font-size:clamp(10px,2.5vw,12px);padding:0 6px}
  .action-btn i{font-size:14px}
  .end-btn{height:44px;font-size:11.5px}
  .bubble,.translation{font-size:12px}
}
@media(max-width:390px){
  .hero-title{font-size:clamp(19px,5.5vw,23px)}
  .home-card-secondary{min-height:135px;padding:16px 10px 12px}
  .hcs-icon{width:42px;height:42px;font-size:17px;margin-bottom:10px}
  .hcs-title{font-size:12.5px}
  .hcs-desc{font-size:10px}
}
@media(max-width:375px){
  .hero-title{font-size:clamp(18px,5.2vw,22px)}
  .hero-sub{font-size:11.5px}
  .hcp-icon{width:42px;height:42px;font-size:17px}
  .hcp-title{font-size:14px}
  .hcp-desc{font-size:10.5px}
  .home-card-secondary{min-height:130px;padding:14px 10px 12px}
  .hcs-icon{width:40px;height:40px;font-size:16px}
  .hcs-title{font-size:12px}
}
@media(max-width:360px){
  .hero-title{font-size:18px}
  .hero-sub{font-size:11px}
  .home-card-primary{min-height:92px;padding:16px}
  .hcp-icon{width:40px;height:40px;font-size:16px;border-radius:11px}
  .hcp-title{font-size:13.5px}
  .hcp-desc{font-size:10px}
  .home-card-secondary{min-height:125px;padding:13px 8px 10px;border-radius:14px}
  .hcs-icon{width:38px;height:38px;font-size:15px;border-radius:10px;margin-bottom:8px}
  .hcs-title{font-size:11.5px}
  .hcs-desc{font-size:9.5px}
  .action-btn{height:46px;font-size:clamp(9px,2.4vw,11px);gap:6px}
  .action-btn i{font-size:13px}
}
@media(max-width:350px){
  .header-ctrl{padding:0 7px;font-size:10.5px;height:36px}
  .header-ctrl i{font-size:12px}
  .lang-switch{padding:2px;gap:2px;height:36px}
  .lang-switch button{font-size:10px;padding:0 6px}
  .hero-title{font-size:17px}
  .home-card-primary{min-height:88px;padding:14px}
  .home-card-secondary{min-height:120px;padding:12px 8px 10px}
  .room-card{padding:14px}
  .room-card-name{font-size:13px}
  .modal-card{padding:22px 18px 18px}
  .modal-title{font-size:15px}
  .settings-panel{padding:18px 16px}
}