#mainPage { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: max(var(--page-padding), env(safe-area-inset-top)) max(var(--page-padding), env(safe-area-inset-right)) max(var(--page-padding), env(safe-area-inset-bottom)) max(var(--page-padding), env(safe-area-inset-left)); background: linear-gradient(rgba(8,10,12,.12),rgba(8,10,12,.45)),url('../images/backMainMobile.jpg') center/cover no-repeat; }
.main-box { width: min(100%,440px); display: grid; gap: 12px; padding: clamp(22px,6vw,36px); border: 1px solid var(--panel-border); border-radius: 24px; background: var(--panel-bg); box-shadow: 0 24px 70px rgba(0,0,0,.36); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.main-box button { width: 100%; }
.main-box .logout-button { margin-top: 12px; border: 1px solid rgba(255,255,255,.36); background: rgba(20,22,25,.68); color: #fff; }
.main-box .logout-button:hover { background: rgba(80,30,30,.86); }
@media (min-width: 768px) { #mainPage { background-image: linear-gradient(rgba(8,10,12,.1),rgba(8,10,12,.4)),url('../images/backMain.jpg'); } }
@media (max-height: 480px) and (orientation: landscape) { #mainPage { place-items: start center; } .main-box { grid-template-columns: repeat(2,minmax(0,1fr)); } }