/* Landing composition. */
.logo{display:flex;align-items:center;line-height:1}.logo img{display:block;flex:0 0 auto}.logo span{display:block;line-height:1}.logo small{display:none!important}
header{justify-content:flex-start!important;gap:8px}header .logo{order:1;margin-right:auto}header nav{order:2;display:flex;align-items:center;margin:0!important}header .discord-link{order:3;margin:0!important}header #account{order:4;display:flex;align-items:center;margin-left:0!important}
.hero{text-align:center!important}.hero>*{margin-left:auto!important;margin-right:auto!important}.hero h1{max-width:none!important;text-align:center!important}.hero>span{text-align:center!important}.hero a{align-self:center!important}
.discord-link{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border:1px solid #4a4a4a;border-radius:15px;background:#292929;color:#f4f4f4;transition:.15s}.discord-link:hover{background:#5865f2;border-color:#7883f7}.discord-link svg{width:19px;height:19px;fill:currentColor}footer{display:none!important}
#products .quantity{display:none!important}
#adminLink{position:relative}#adminDonationBadge{display:grid;place-items:center;position:absolute;right:-8px;top:-8px;min-width:17px;height:17px;padding:0 4px;border-radius:10px;background:#e85f5f;color:#fff;font:800 9px/1 Manrope;box-shadow:0 0 0 2px #171717}
.topup-box{margin:14px 0;padding:14px;border:1px solid #3b3b3b;border-radius:12px;background:#171717}.topup-box>b,.topup-box span{display:block}.topup-box span{margin:4px 0 11px;color:#999;font-size:11px}.topup-box div{display:flex;gap:7px}.topup-box button{flex:1;padding:9px 5px;border:1px solid #4b4b4b;border-radius:8px;background:#292929;color:#f4f4f4;font:800 11px Manrope;cursor:pointer}.topup-box button:hover{background:#f1f1f1;color:#151515}

/* Phone-first controls: Steam login and every administrator section stay reachable. */
@media (max-width:700px){
  header{display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"logo status" "discord account" "nav nav";height:auto!important;min-height:0!important;padding:9px 11px!important;gap:8px!important}
  header .logo{grid-area:logo;min-width:0;margin:0!important}
  header .discord-link{grid-area:discord;width:44px!important;height:40px!important;flex-basis:44px!important;border-radius:14px!important}
  header #account{grid-area:account;display:grid!important;grid-template-columns:minmax(0,1fr) 44px;align-items:center;gap:7px!important;min-width:0;width:min(100%,260px);margin:0!important}
  header #account:has(.profile-btn){grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr)}
  #serverStatus{grid-area:status;display:flex!important;justify-content:center;min-width:170px;padding:9px 14px!important;font-size:11px!important;white-space:nowrap}
  #serverStatus span{max-width:none!important;overflow:visible!important;text-overflow:clip!important}
  header nav{grid-area:nav;display:flex!important;width:100%;min-width:0;margin:0!important;padding:0!important;justify-content:flex-start!important;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  header nav::-webkit-scrollbar{display:none}
  header nav a{flex:0 0 auto;padding:8px 10px!important;font-size:10px!important}
  .login,.profile-btn{display:inline-grid!important;place-items:center;min-width:0;width:100%;height:40px;padding:0 8px!important;white-space:nowrap}
  .login{font:800 10px Manrope!important}
  .login:after{content:none}
  .profile-btn{font-size:0!important;text-align:center!important;justify-content:center!important;align-content:center!important;line-height:1!important}
  .profile-btn:after{content:'Кабінет';display:block;width:100%;text-align:center;font:800 10px/1 Manrope}
  .cart-btn{width:44px!important;height:40px!important;min-height:40px!important;margin:0!important}
  .modal{padding:8px!important;align-items:flex-start}
  .modal.open{display:flex!important}
  .modal section{width:100%!important;max-width:none!important;max-height:calc(100dvh - 16px);margin:0!important;padding:20px 14px!important;overflow:auto;border-radius:14px!important}
  .modal h2{padding-right:25px;font-size:23px!important;line-height:1.05}
  .modal form{grid-template-columns:1fr!important;gap:9px!important}
  .modal input,.modal select,.modal textarea{width:100%;min-width:0;font-size:16px!important}
  .modal form button{width:100%;min-height:43px;margin-top:2px!important}
  .admin-tabs{display:flex!important;gap:7px!important;margin:13px -2px 18px!important;padding:0 2px 10px!important;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
  .admin-tabs::-webkit-scrollbar{display:none}
  .admin-tabs button{flex:0 0 auto;padding:9px 11px!important}
  .admin-order{padding:11px!important;font-size:12px!important}
  .admin-order code,.admin-order small,.admin-order em{overflow-wrap:anywhere;word-break:break-word}
  .admin-product{align-items:flex-start!important;gap:9px;flex-wrap:wrap}
  .admin-product button{width:100%;min-height:38px}
  .promo-form{display:grid!important;gap:8px!important}
  .promo-form>b{display:block!important}
  .promo-form div{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  .promo-form button{width:100%!important;min-height:40px}
  .steam-id{display:grid;gap:5px}.steam-id b{float:none!important;overflow-wrap:anywhere}
  #toast{width:min(360px,calc(100% - 24px));text-align:center}
}

@media (max-width:380px){
  header #account{width:230px}
  #serverStatus{min-width:136px;padding-left:8px!important;padding-right:8px!important}
  header .logo span{display:none}
  header nav a{padding:8px 8px!important;font-size:9px!important}
  .login,.profile-btn{min-width:39px;padding:0 7px!important}
}