/* VIP SPACE 1.0 — responsive mobile polish */
@media (max-width: 820px) {
  /* Never let responsive layout rules reopen a view hidden by the app. */
  .hidden { display: none !important; }

  html { background: #f5f6fc !important; }
  body {
    background:
      radial-gradient(circle at 8% 4%, rgba(122, 83, 238, .10), transparent 28%),
      radial-gradient(circle at 100% 18%, rgba(36, 196, 222, .10), transparent 30%),
      #f7f8fc !important;
    background-attachment: scroll !important;
    color: #171a2a !important;
  }
  body::before { display: none !important; }

  .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 80 !important;
    min-height: calc(64px + env(safe-area-inset-top)) !important;
    margin: 0 !important;
    padding: max(9px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 9px max(12px, env(safe-area-inset-left)) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(65, 73, 110, .10) !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 8px 30px rgba(39, 42, 70, .08) !important;
    backdrop-filter: blur(18px) saturate(1.15) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.15) !important;
  }
  .brand { min-width: 0 !important; gap: 9px !important; }
  .portal-client .official-brand-logo,
  .official-brand-logo {
    display: block !important;
    flex: 0 0 auto !important;
    width: 84px !important;
    height: 32px !important;
    padding: 5px 7px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: linear-gradient(145deg, #090b17, #232853) !important;
    object-fit: contain !important;
    box-shadow: 0 7px 18px rgba(35, 31, 82, .18) !important;
  }
  .brand > div { min-width: 0 !important; display: flex !important; align-items: center !important; }
  .brand strong {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    color: #20243e !important;
    font-size: 0 !important;
    letter-spacing: .02em !important;
    white-space: nowrap !important;
  }
  .brand strong::before { content: "VIP SPACE"; font-size: 14px; font-weight: 950; }
  .brand strong::after {
    content: "1.0";
    padding: 3px 6px;
    border: 1px solid rgba(108, 76, 224, .16);
    border-radius: 999px;
    background: #f0edff;
    color: #6946d4;
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
  }
  .brand small,
  #brandSubtitle { display: none !important; }
  .top-actions { min-width: 0 !important; gap: 6px !important; }
  .language-picker { min-width: 0 !important; }
  .language-picker select,
  .top-actions select {
    width: 86px !important;
    max-width: 86px !important;
    min-height: 38px !important;
    padding: 6px 24px 6px 9px !important;
    border: 1px solid rgba(87, 80, 132, .16) !important;
    border-radius: 11px !important;
    background-color: #f7f6fc !important;
    color: #282c48 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    box-shadow: none !important;
  }
  .online-status { display: none !important; }
  #logoutBtn {
    min-height: 38px !important;
    padding: 7px 10px !important;
    border-color: rgba(87, 80, 132, .15) !important;
    background: #f7f6fc !important;
    color: #343854 !important;
    font-size: 11px !important;
  }

  body > .container,
  .container {
    width: 100% !important;
    margin: 0 auto !important;
    padding: 12px max(12px, env(safe-area-inset-right)) calc(30px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
  }
  .auth-grid:not(.hidden) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    min-height: 0 !important;
    padding: 0 !important;
  }
  .auth-grid::before,
  .auth-grid::after { display: none !important; }
  .auth-grid .hero {
    position: relative !important;
    isolation: isolate !important;
    display: flex !important;
    min-height: 152px !important;
    margin: 0 !important;
    padding: 23px 22px !important;
    justify-content: center !important;
    overflow: hidden !important;
    border: 1px solid rgba(111, 91, 210, .18) !important;
    border-radius: 24px !important;
    background:
      radial-gradient(circle at 90% 15%, rgba(74, 224, 243, .32), transparent 27%),
      radial-gradient(circle at 12% 110%, rgba(161, 94, 241, .48), transparent 40%),
      linear-gradient(135deg, #171a3d, #29205b 56%, #153750) !important;
    box-shadow: 0 18px 42px rgba(51, 43, 111, .18) !important;
  }
  .auth-grid .hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    right: -28px;
    top: -34px;
    width: 150px;
    height: 150px;
    border: 1px solid rgba(139, 236, 255, .22);
    border-radius: 50%;
    box-shadow: 0 0 0 24px rgba(139, 236, 255, .055), 0 0 0 49px rgba(168, 121, 255, .045);
  }
  .auth-grid .hero .eyebrow {
    color: #8deeff !important;
    font-size: 10px !important;
    letter-spacing: .15em !important;
    text-shadow: none !important;
  }
  .auth-grid .hero h1 {
    max-width: 290px !important;
    margin: 7px 0 7px !important;
    color: #fff !important;
    font-size: clamp(29px, 8.4vw, 36px) !important;
    line-height: .98 !important;
    letter-spacing: -.045em !important;
    text-wrap: balance !important;
  }
  .auth-grid .hero p {
    max-width: 285px !important;
    margin: 0 !important;
    color: rgba(238, 242, 255, .78) !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
  .auth-panel {
    width: 100% !important;
    margin: 0 !important;
    padding: 21px 18px 18px !important;
    overflow: hidden !important;
    border: 1px solid rgba(86, 79, 132, .13) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, .97) !important;
    box-shadow: 0 18px 46px rgba(46, 49, 84, .10) !important;
  }
  .auth-panel::before { height: 3px !important; }
  .auth-panel::after { display: none !important; }
  .auth-panel h2 {
    margin: 4px 0 17px !important;
    color: #222641 !important;
    font-size: 25px !important;
    line-height: 1.08 !important;
    letter-spacing: -.03em !important;
  }
  .auth-panel .eyebrow { color: #7048db !important; text-shadow: none !important; }
  .auth-panel .stack { gap: 13px !important; }
  .auth-panel label { color: #272b43 !important; font-size: 13px !important; font-weight: 750 !important; }
  .auth-panel input {
    min-height: 52px !important;
    border: 1px solid #d7dae5 !important;
    border-radius: 14px !important;
    background: #fbfbfd !important;
    color: #1d2034 !important;
    box-shadow: inset 0 1px 2px rgba(25, 28, 49, .03) !important;
  }
  .auth-panel input:focus {
    border-color: #7654de !important;
    box-shadow: 0 0 0 4px rgba(118, 84, 222, .11) !important;
  }
  .auth-panel button { min-height: 49px !important; border-radius: 14px !important; }
  .auth-panel .primary {
    background: linear-gradient(135deg, #6742da, #874fe3 57%, #27b9d4) !important;
    box-shadow: 0 10px 24px rgba(101, 67, 213, .22) !important;
  }
  .auth-panel .secondary {
    border: 1px solid #dde0ea !important;
    background: #f4f5f9 !important;
    color: #252942 !important;
  }
  .auth-panel .link-btn { min-height: 34px !important; color: #6742cd !important; }
  .access-security-note {
    margin-top: 1px !important;
    padding: 11px 12px !important;
    border: 0 !important;
    border-radius: 13px !important;
    background: #eff8f5 !important;
  }
  .access-security-note strong { color: #17604c !important; font-size: 12px !important; }
  .access-security-note p { color: #587168 !important; font-size: 11px !important; line-height: 1.4 !important; }

  .panel, .center-card, .card { border-radius: 20px !important; }
  .profile-head { margin-bottom: 14px !important; }
  .profile-head h1 { font-size: clamp(27px, 8vw, 34px) !important; letter-spacing: -.035em !important; }
  .home-actions, .more-grid { gap: 10px !important; }
  .home-action, .more-link { min-height: 108px !important; padding: 16px !important; }
  .home-action strong, .more-link strong { font-size: 17px !important; }
  .metric { font-size: 32px !important; }
  .reward-grid, .loyalty-grid, .promotion-grid { gap: 11px !important; }
  .reward-card, .loyalty-item, .promotion-card { padding: 17px !important; }
  .modal-card { overscroll-behavior: contain !important; }
}

@media (max-width: 430px) {
  .brand strong::before { font-size: 13px; }
  .portal-client .official-brand-logo,
  .official-brand-logo { width: 78px !important; }
  .language-picker select,
  .top-actions select { width: 80px !important; max-width: 80px !important; }
  .auth-grid .hero { min-height: 145px !important; padding: 21px 19px !important; }
  .auth-grid .hero h1 { max-width: 270px !important; }
  .auth-panel { padding: 20px 15px 16px !important; }
  .home-actions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .home-action.primary-action { grid-column: 1 / -1 !important; }
  .home-action { min-height: 104px !important; }
  .home-action span { font-size: 12px !important; }
}

@media (max-width: 350px) {
  .brand strong::before { content: "VIP"; }
  .portal-client .official-brand-logo,
  .official-brand-logo { width: 70px !important; }
  .language-picker select,
  .top-actions select { width: 74px !important; max-width: 74px !important; font-size: 11px !important; }
  .auth-grid .hero h1 { font-size: 28px !important; }
}

@media (min-width: 821px) and (max-width: 1080px) {
  .topbar { padding-inline: 22px !important; }
  .auth-grid { grid-template-columns: minmax(0, 1fr) minmax(350px, 430px) !important; gap: 28px !important; }
  .auth-grid .hero h1 { font-size: clamp(44px, 6vw, 58px) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-grid .hero, .auth-panel, .topbar { scroll-behavior: auto !important; }
}