/* Mobile + quality polish (loaded last). */
html,body{overflow-x:clip;max-width:100%}
.container.section,.container{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.card,.server-card,.form-card,.plan,section,article{min-width:0}
.server-card .top,.card-foot{flex-wrap:wrap;min-width:0}
.server-card .top>*{min-width:0}
.server-card h3,.alist-listing h2,h1,h2{overflow-wrap:anywhere}
img,video,iframe{max-width:100%;height:auto}
table{max-width:100%}
pre,code{overflow-wrap:anywhere}
.alx-vignette{width:100%;right:auto}

@media (max-width:640px){
  body{font-size:15px}
  .section{padding-top:40px;padding-bottom:48px}
  h1{font-size:clamp(1.65rem,7.4vw,2.2rem);line-height:1.12}
  .btn{min-height:44px}
  .card-foot{gap:10px}
  .card-foot .btn{flex:1 1 auto}
  /* Filters stack nicely */
  form select,form input[type=text],form input[type=search],form input[type=email],form input[type=password]{width:100%;max-width:100%;font-size:16px}
  /* Cookie banner fits the screen */
  #alc{left:10px!important;right:10px!important;bottom:10px!important;padding:14px 16px!important;max-height:72vh;overflow:auto}
  #alc .alc-b{flex:1 1 100%}
  /* Chat bubble does not cover content */
  .alx-bot{right:max(10px,env(safe-area-inset-right,0px))!important;bottom:max(10px,env(safe-area-inset-bottom,0px))!important}
  /* Owner dashboard (my listings) */
  .alist-listing-head{flex-wrap:wrap;gap:10px}
  .alx-stats{margin:0;width:100%;order:3}
  .alx-quick-btns{width:100%}
  .alx-q{flex:1 1 100%}
  .alx-kpis{grid-template-columns:1fr 1fr}
  .alx-kpi b{font-size:1.35rem}
  .alist-plan-mini{grid-template-columns:1fr!important}
  .alx-ownbox>div:last-child{width:100%}.alx-ownbox .btn{flex:1 1 auto}
  /* Owner cockpit */
  .own .two{grid-template-columns:1fr!important}
  .own .kpis{grid-template-columns:1fr 1fr!important}
  .own-nav{top:56px;flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 -4px}
  .own-nav::-webkit-scrollbar{display:none}
  .own-nav a{white-space:nowrap;flex:none}
  .own .card{padding:16px!important}
  .own table{display:block;overflow-x:auto;white-space:nowrap}
  .own .row>*{flex:1 1 100%}
  .own input,.own select{font-size:16px}
}
@media (max-width:640px){
  .alp-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  [style*="text-align:center"] > h1::after,[style*="text-align: center"] > h1::after,.center > h1::after{margin-left:auto;margin-right:auto;left:0;right:0}
}

/* Favourite star: top-right corner, never over buttons */
.server-card .alx-fav{top:14px;right:14px;bottom:auto;left:auto;transform:none;width:36px;height:36px;z-index:2}
.server-card .alx-fav.alx-pop{animation:alx-starpop2 .45s ease}
@keyframes alx-starpop2{40%{transform:scale(1.3) rotate(-12deg)}100%{transform:none}}
.server-card h3{padding-right:46px}
@media (max-width:640px){ #alx-ownbar{bottom:calc(76px + env(safe-area-inset-bottom,0px))!important} }