/* Optical refinements after reviewing the real desktop and mobile screens. */
main:focus-visible{outline:none}
.mobile-sidebar-close{display:none}
.hero h2{max-width:15ch}
.hero-art{object-fit:contain;object-position:right center}
.hero-content{max-width:550px}
.card-badges{max-width:calc(100% - 66px)}
.card-badges .pill:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;max-width:230px}
.server-info>p,.panel p{font-size:13px}
.server-meta,.server-status,.server-bottom .button{font-size:11px}
.nav-item{font-size:14px}
.field label{font-size:13px}
.field small,.dialog-foot{font-size:11px}
.form-error{scroll-margin-top:90px}
.hero,.server-art-wrap{background-color:#192027}
.team-status{display:flex;gap:8px;align-items:center;color:var(--amber);font-size:11px;border:1px solid #675436;background:#2c261c;border-radius:7px;padding:8px 10px;min-height:40px;white-space:nowrap}
.team-status svg{width:16px;height:16px}.team-status strong{margin-left:5px;color:#ddc292}
@media(max-width:1100px){.team-status span{display:none}.team-status{min-width:42px;justify-content:center}.topbar-actions:has(.team-status:not([hidden])) .top-guide{display:none}}
@media(max-width:760px){
  .mobile-sidebar-close{display:inline-flex;position:absolute;right:8px;top:8px}
  .sidebar .brand{margin-top:24px}
  .sidebar.open{overflow-y:auto;max-height:100dvh}
  .skip-link{left:16px}
  .hero-content{max-width:430px}
  .hero-art{object-fit:cover;object-position:65% center}
  .nav-item{font-size:14px}
  .button,.button.small,.button-row .button,.hero .button,.server-bottom .button,.segment,.text-button,.icon-button,.favorite-button{min-height:44px}
  .icon-button,.favorite-button{min-width:44px}
  .server-info>p,.panel p,.empty-state p,.page-intro p{font-size:12px}
  .server-meta,.server-status,.queue-helper,.pending-note{font-size:11px}
  .rule-list li{font-size:12px}
  .input,textarea{font-size:14px}
  .hero p{font-size:12px}
  .server-bottom .button{font-size:12px}
  .card-badges .pill{font-size:10px}
  .favorite-button{right:7px;top:7px}
  .topbar .button{min-height:44px}
  .topbar .avatar{height:40px;width:40px}
  .step p,.guide-block p{font-size:11px}
  .guide-block .button.small{font-size:11px}
  .field small,.dialog-foot{font-size:11px}
  .profile-stat>span,.profile-stat small{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.hero .button:active,.server-card:hover .server-art{transform:none}}