/* === BLACK SIX MOBILE APP REDESIGN v2 === */
/* =========================================================
   BLACK SIX — MOBILE APP REDESIGN v2
   Scope: smartphone + tablet (<=1024px). Large desktop untouched.
   ========================================================= */
.mobile-menu-account {
  display: none;
}

@media (max-width: 1024px), (min-width: 1025px) and (max-width: 1366px) and (pointer: coarse) and (hover: none) {
  body.bs-translating .button,
  body.bs-translating button,
  body.bs-translating .nav-links a,
  body.bs-translating .price-badge,
  body.bs-translating .section-kicker,
  body.bs-translating .panel-tag,
  body.bs-translating .badge,
  html.translated-ltr body .button,
  html.translated-ltr body button,
  html.translated-ltr body .nav-links a,
  html.translated-ltr body .price-badge,
  html.translated-ltr body .section-kicker,
  html.translated-ltr body .panel-tag,
  html.translated-ltr body .badge,
  html.translated-rtl body .button,
  html.translated-rtl body button,
  html.translated-rtl body .nav-links a,
  html.translated-rtl body .price-badge,
  html.translated-rtl body .section-kicker,
  html.translated-rtl body .panel-tag,
  html.translated-rtl body .badge {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    letter-spacing: .015em !important;
    line-height: 1.18 !important;
  }

  body.bs-translating .price-row,
  body.bs-translating .form-actions,
  body.bs-translating .alliance-submit-actions,
  html.translated-ltr body .price-row,
  html.translated-ltr body .form-actions,
  html.translated-ltr body .alliance-submit-actions,
  html.translated-rtl body .price-row,
  html.translated-rtl body .form-actions,
  html.translated-rtl body .alliance-submit-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
  }

  body.bs-translating .price-row > *,
  body.bs-translating .form-actions > *,
  body.bs-translating .alliance-submit-actions > *,
  html.translated-ltr body .price-row > *,
  html.translated-ltr body .form-actions > *,
  html.translated-ltr body .alliance-submit-actions > *,
  html.translated-rtl body .price-row > *,
  html.translated-rtl body .form-actions > *,
  html.translated-rtl body .alliance-submit-actions > * {
    min-width: min(100%, 170px) !important;
    flex: 1 1 auto !important;
  }
}

@media (max-width: 1024px), (min-width: 1025px) and (max-width: 1366px) and (pointer: coarse) and (hover: none) {
  :root {
    --mobile-gutter: 12px;
    --mobile-card: 18px;
    --mobile-radius: 22px;
  }

  html {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    scroll-padding-top: 96px !important;
    -webkit-text-size-adjust: 100% !important;
  }

  body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    background-attachment: scroll !important;
    background-position: center top !important;
  }

  body.modal-open,
  body.premium-locked {
    overflow: hidden !important;
  }

  *, *::before, *::after {
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  img, video, canvas, svg, iframe {
    max-width: 100% !important;
  }

  p, h1, h2, h3, h4, h5, h6, a, span, strong, small, label, button, input, textarea, select {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  .container,
  .site-header .container.header-shell,
  .page-hero .container.hero-layout,
  .page-hero .container.split-layout,
  .section > .container,
  .footer-wrap,
  .footer-inner {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* HEADER: mobile come app, compatto e leggibile */
  .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 9000 !important;
    padding: max(8px, env(safe-area-inset-top)) 0 8px !important;
    background: linear-gradient(180deg, rgba(3,5,8,.96), rgba(3,5,8,.72)) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
    border-bottom: 1px solid rgba(244,212,140,.10) !important;
  }

  .header-shell {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .header-user-rail {
    order: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .nav-user-chip {
    width: 100% !important;
    justify-content: center !important;
    padding: 8px 10px !important;
    border-radius: 999px !important;
    font-size: .64rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    background: rgba(255,255,255,.055) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
  }

  .online-counter {
    display: none !important;
  }

  #btn-logout {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    display: inline-grid !important;
    place-items: center !important;
  }

  #btn-logout .logout-label {
    display: none !important;
  }

  .nav-wrap {
    order: 1 !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px !important;
    gap: 10px !important;
    border-radius: 22px !important;
    background: rgba(10,12,18,.86) !important;
    border: 1px solid rgba(244,212,140,.14) !important;
    box-shadow: 0 16px 44px rgba(0,0,0,.32) !important;
  }

  .brand {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  .brand-mark {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 16px !important;
  }

  .brand-copy strong {
    font-size: clamp(.98rem, 4.5vw, 1.16rem) !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .brand-copy span,
  .brand-copy span#nav-subtitle {
    display: block !important;
    margin-top: 2px !important;
    font-size: .58rem !important;
    letter-spacing: .16em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .nav-toggle {
    display: inline-grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 44px !important;
    padding: 0 !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, rgba(244,212,140,.20), rgba(255,139,82,.18)) !important;
    border: 1px solid rgba(244,212,140,.22) !important;
    color: var(--gold-bright) !important;
  }

  .nav-links {
    grid-column: 1 / -1 !important;
    display: none !important;
    width: 100% !important;
    max-height: calc(100dvh - 156px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    margin: 2px 0 0 0 !important;
    padding: 10px !important;
    gap: 8px !important;
    border-radius: 18px !important;
    background: rgba(4,6,10,.92) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
  }

  .nav-wrap.is-open .nav-links {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .nav-wrap.is-open {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9500 !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    align-content: start !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 14px calc(132px + env(safe-area-inset-bottom, 0px)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      radial-gradient(circle at 75% 0%, rgba(244,212,140,.12), transparent 30%),
      linear-gradient(180deg, rgba(5,7,11,.98), rgba(3,5,8,.98)) !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .nav-wrap.is-open .brand,
  .nav-wrap.is-open .nav-toggle {
    position: relative !important;
    z-index: 2 !important;
  }

  .nav-wrap.is-open .nav-links {
    grid-column: 1 / -1 !important;
    align-self: stretch !important;
    max-height: none !important;
    height: 100% !important;
    margin-top: 14px !important;
    padding: 10px !important;
    overflow-y: auto !important;
    border-radius: 24px !important;
    background: rgba(8,10,15,.88) !important;
    border: 1px solid rgba(244,212,140,.16) !important;
  }

  #user-account-modal {
    z-index: 10040 !important;
    padding: 0 !important;
    place-items: stretch !important;
    overflow: hidden !important;
    width: 100dvw !important;
    max-width: 100dvw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }

  #user-account-modal .modal-backdrop {
    background: rgba(0,0,0,.86) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  #user-account-modal .bs-account-modal-card {
    position: fixed !important;
    inset: 0 !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    width: 100dvw !important;
    max-width: 100dvw !important;
    min-width: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: calc(18px + env(safe-area-inset-top, 0px)) 10px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
  }

  #user-account-modal .modal-close {
    top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    right: 12px !important;
  }

  #user-account-modal .bs-account-modal-head {
    display: grid !important;
    gap: 10px !important;
    justify-items: center !important;
    text-align: center !important;
    padding: 0 42px 0 42px !important;
    margin-bottom: 10px !important;
  }

  #user-account-modal .bs-account-modal-head > div:first-child {
    display: grid !important;
    justify-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #user-account-modal .bs-account-modal-head .section-kicker {
    margin-inline: auto !important;
    font-size: .64rem !important;
    letter-spacing: .12em !important;
  }

  #user-account-modal .bs-account-modal-head h2 {
    width: 100% !important;
    text-align: center !important;
    font-size: clamp(2.25rem, 12vw, 3.15rem) !important;
    line-height: .98 !important;
    margin: 2px 0 0 !important;
  }

  #user-account-modal .bs-account-modal-head .modal-helper {
    text-align: center !important;
    margin: 0 auto !important;
    font-size: .86rem !important;
    line-height: 1.45 !important;
    max-width: 100% !important;
  }

  #user-account-modal .bs-account-head-actions.bs-account-split-pill {
    width: 100% !important;
    max-width: 430px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    border-radius: 16px !important;
    margin: 0 auto !important;
  }

  #user-account-modal .bs-account-split-pill .bs-account-split-btn {
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 9px 8px !important;
    font-size: .66rem !important;
  }

  #user-account-modal .bs-account-modal-stats {
    display: none !important;
  }

  #user-account-modal .bs-account-modal-scroll {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 0 !important;
    padding-bottom: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #user-account-modal .bs-account-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #user-account-modal .bs-account-panel,
  #user-account-modal .bs-account-visual-panel,
  #user-account-modal .bs-account-section,
  #user-account-modal .bs-account-service-overview {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #user-account-modal .bs-account-accordion-head {
    justify-items: center !important;
    text-align: center !important;
  }

  #user-account-modal .bs-account-accordion-head span {
    width: 100% !important;
    display: inline-flex !important;
    justify-content: center !important;
    text-align: center !important;
  }

  #user-account-modal .bs-account-accordion.is-open {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10060 !important;
    width: 100dvw !important;
    max-width: 100dvw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    transform: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-color: rgba(244,212,140,.30) !important;
    background:
      radial-gradient(circle at 0 0, rgba(244,212,140,.16), transparent 34%),
      linear-gradient(180deg, rgba(18,21,30,.98), rgba(5,7,11,.99)) !important;
    box-shadow: 0 0 0 999px rgba(0,0,0,.64), 0 24px 80px rgba(0,0,0,.72), 0 0 42px rgba(244,212,140,.16) !important;
    overflow: hidden !important;
  }

  #user-account-modal .bs-account-accordion.is-open .bs-account-accordion-head {
    min-height: calc(70px + env(safe-area-inset-top, 0px)) !important;
    padding-top: calc(14px + env(safe-area-inset-top, 0px)) !important;
    border-radius: 0 !important;
    grid-template-columns: 1fr auto auto !important;
  }

  #user-account-modal .bs-account-accordion.is-open .bs-account-accordion-body {
    display: block !important;
    max-height: calc(100dvh - 82px - env(safe-area-inset-top, 0px)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 14px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #user-account-modal .bs-account-service-overview {
    padding: 14px !important;
    border-radius: 18px !important;
    text-align: center !important;
  }

  #user-account-modal .bs-account-service-overview .bs-account-summary-subtitle {
    display: none !important;
  }

  #user-account-modal .bs-account-service-overview-head {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 10px !important;
  }

  #user-account-modal .bs-account-service-overview-head strong {
    min-width: 0 !important;
    font-size: .98rem !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }

  #user-account-modal .bs-account-service-pill {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  #user-account-modal .bs-account-kv-row,
  #user-account-modal .bs-account-mini,
  #user-account-modal .bs-account-timeline-item,
  #user-account-modal .bs-account-package-item {
    text-align: center !important;
  }

  #user-account-modal .bs-account-kv-row span:last-child {
    text-align: center !important;
  }

  #user-account-modal .bs-account-notify-setting {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
  }

  #user-account-modal .bs-account-notify-setting .bs-chat-sound-toggle,
  #user-account-modal .bs-account-notify-setting .bs-loader-video-toggle {
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    height: 38px !important;
    padding: 0 9px !important;
    flex: 0 0 82px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    align-self: center !important;
    letter-spacing: .04em !important;
    font-size: .70rem !important;
  }

  #user-account-modal .bs-account-notify-setting .bs-loader-video-toggle .bs-loader-video-state,
  #user-account-modal .bs-account-notify-setting .bs-chat-sound-toggle .bs-account-notify-state {
    display: inline-block !important;
    min-width: 24px !important;
    text-align: center !important;
  }

  .nav-links a,
  .nav-links .telegram-trigger,
  .nav-links button {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 46px !important;
    padding: 13px 14px !important;
    border-radius: 15px !important;
    font-size: .78rem !important;
    letter-spacing: .10em !important;
    background: rgba(255,255,255,.045) !important;
    border: 1px solid rgba(255,255,255,.075) !important;
  }

  .nav-links a::after { display: none !important; }
  .nav-links a[aria-current="page"] {
    color: var(--gold-bright) !important;
    background: rgba(244,212,140,.10) !important;
    border-color: rgba(244,212,140,.22) !important;
  }

  .mobile-menu-account {
    display: grid !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(244,212,140,.14) !important;
  }

  .mobile-menu-profile {
    width: 100% !important;
    min-height: 58px !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 10px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(244,212,140,.18) !important;
    background: linear-gradient(180deg, rgba(244,212,140,.10), rgba(255,255,255,.035)) !important;
    color: #f7f2e8 !important;
    text-align: left !important;
  }

  .mobile-menu-avatar {
    display: inline-grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 15px !important;
    background: rgba(244,212,140,.14) !important;
    color: var(--gold-bright) !important;
    border: 1px solid rgba(244,212,140,.22) !important;
  }

  .mobile-menu-profile-text {
    display: grid !important;
    min-width: 0 !important;
    gap: 2px !important;
  }

  .mobile-menu-profile-text small {
    color: rgba(247,242,232,.55) !important;
    font-size: .58rem !important;
    font-weight: 800 !important;
    letter-spacing: .10em !important;
    text-transform: uppercase !important;
  }

  .mobile-menu-profile-text strong {
    min-width: 0 !important;
    color: #fff7d8 !important;
    font-size: .82rem !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    letter-spacing: .06em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-transform: uppercase !important;
  }

  .mobile-menu-admin-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 4px 7px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #f8d486, #c67a3d) !important;
    color: #17100a !important;
    font-size: .52rem !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
  }

  .mobile-menu-admin-pill[hidden] {
    display: none !important;
  }

  .mobile-menu-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .mobile-menu-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 46px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    background: rgba(255,255,255,.045) !important;
    color: rgba(247,242,232,.86) !important;
    font-size: .68rem !important;
    font-weight: 900 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
  }

  .mobile-menu-action.is-logout {
    border-color: rgba(255,92,92,.32) !important;
    background: rgba(255,92,92,.08) !important;
    color: #ff8d8d !important;
  }

  .bs-lang-fab {
    position: static !important;
    width: 100% !important;
    margin-top: 4px !important;
  }

  .bs-lang-trigger {
    width: 100% !important;
    min-height: 48px !important;
    border-radius: 15px !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 0 12px !important;
  }

  .bs-lang-trigger .bs-lang-meta,
  .bs-lang-trigger .bs-lang-current {
    display: inline-flex !important;
  }

  .bs-lang-trigger .bs-lang-kicker {
    display: none !important;
  }

  .bs-lang-trigger .bs-lang-current {
    font-size: .78rem !important;
    font-weight: 900 !important;
    letter-spacing: .10em !important;
    text-transform: uppercase !important;
  }

  .bs-lang-trigger .bs-lang-chevron {
    display: inline-flex !important;
    margin-left: auto !important;
  }

  .bs-lang-menu {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-height: 72dvh !important;
    overflow-y: auto !important;
    border-radius: 24px !important;
  }

  .nav-wrap.is-open .bs-lang-fab.is-open .bs-lang-menu {
    position: fixed !important;
    left: 14px !important;
    right: 14px !important;
    top: calc(84px + env(safe-area-inset-top, 0px)) !important;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 24px !important;
    transform: none !important;
    z-index: 9600 !important;
  }

  .nav-wrap.is-open .bs-lang-fab.is-open .bs-lang-options {
    gap: 9px !important;
  }

  .nav-wrap.is-open .bs-lang-fab.is-open .bs-lang-option {
    min-height: 56px !important;
    padding: 10px 12px !important;
  }

  /* HERO: ridisegnata per mobile */
  .page-hero {
    min-height: auto !important;
    padding: 28px 0 34px !important;
  }

  .hero-layout,
  .split-layout,
  .spotlight-card,
  .profile-layout,
  .support-layout,
  .cta-grid,
  .package-duo {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .hero-copy,
  .spotlight-copy,
  .section-head {
    text-align: left !important;
    max-width: 100% !important;
  }

  .hero-kicker,
  .section-kicker,
  .panel-tag {
    width: fit-content !important;
    max-width: 100% !important;
    font-size: .68rem !important;
    letter-spacing: .14em !important;
  }

  .hero-title,
  .section-title,
  .spotlight-card h2,
  .hero-copy h1 {
    font-size: clamp(2.05rem, 10.8vw, 3rem) !important;
    line-height: 1.04 !important;
    letter-spacing: .01em !important;
    margin: 12px 0 !important;
    text-wrap: balance !important;
  }

  .hero-lead,
  .section-lead,
  .profile-copy-text p,
  .spotlight-copy p,
  .card p,
  .modal-helper {
    font-size: .95rem !important;
    line-height: 1.68 !important;
  }

  .hero-visual,
  .spotlight-media {
    width: 100% !important;
  }

  .media-panel,
  .panel,
  .card,
  .spotlight-card,
  .brief-form,
  .modal-card,
  .auth-gate-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: var(--mobile-card) !important;
    border-radius: var(--mobile-radius) !important;
  }

  .media-panel img,
  .hero-war-image,
  .spotlight-media img,
  .profile-photo,
  .resource-visual img {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 330px !important;
    object-fit: cover !important;
    border-radius: 18px !important;
  }

  .hero-stat-grid,
  .hub-grid,
  .info-grid,
  .package-grid,
  .step-grid,
  .summary-grid,
  .option-grid,
  .form-grid,
  .resource-grid,
  .resource-options-grid,
  .resource-card-grid,
  .benefit-grid,
  .grid-2,
  .grid-3,
  .plans-grid,
  .admin-grid,
  .dashboard-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .hero-stat,
  .package-card,
  .resource-card,
  .benefit-card,
  .info-card,
  .step-card,
  .summary-card,
  .option-card,
  .plan-card {
    width: 100% !important;
    padding: 16px !important;
    border-radius: 16px !important;
  }

  .section {
    padding: 42px 0 !important;
  }

  .section-head {
    margin-bottom: 20px !important;
  }

  .scrolling-banner {
    margin: 4px 0 22px !important;
    padding: 9px 0 !important;
    overflow: hidden !important;
  }

  .scrolling-container {
    width: 100% !important;
    overflow: hidden !important;
  }

  .scrolling-track {
    animation-duration: var(--bs-marquee-duration, 48s) !important;
  }

  .scrolling-text {
    animation-duration: var(--bs-marquee-duration, 48s) !important;
    white-space: nowrap !important;
  }

  .scrolling-track span,
  .scrolling-text span {
    font-size: .74rem !important;
    padding: 0 24px !important;
  }

  .site-system-banner-track {
    animation-duration: var(--bs-system-banner-duration, 48s) !important;
  }

  .site-system-banner-track span {
    font-size: .82rem !important;
    padding: 0 28px !important;
    min-height: 46px !important;
  }

  /* Bottoni: grandi, facili da cliccare */
  .button,
  .button-primary,
  .button-ghost,
  .button-compact,
  .package-button,
  .submit-button,
  .telegram-trigger,
  .auth-button,
  button[type="submit"] {
    width: 100% !important;
    min-height: 48px !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 16px !important;
    padding: 13px 16px !important;
  }

  .button-row,
  .hero-actions,
  .card-actions,
  .form-actions,
  .package-actions,
  .modal-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  /* Prezzi e righe pacchetto: niente tagli */
  .price-row,
  .package-price,
  .resource-price-row,
  .summary-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    align-items: start !important;
  }

  .price-row strong,
  .package-price strong,
  .resource-price-row strong {
    font-size: clamp(1.45rem, 7vw, 2.1rem) !important;
    line-height: 1 !important;
  }

  /* Form: input a larghezza piena */
  input,
  textarea,
  select,
  .input,
  .field-control {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    font-size: 16px !important; /* evita zoom automatico iOS */
  }

  textarea { min-height: 120px !important; }

  /* Modali: vere bottom sheet mobile */
  .modal,
  .modal-backdrop,
  .auth-gate,
  .site-lock-screen {
    padding: 10px !important;
  }

  .modal-card,
  .auth-gate-card,
  .site-lock-card {
    width: min(100%, 430px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    overflow-y: auto !important;
    border-radius: 24px !important;
  }

  .auth-gate-card {
    padding: 22px 16px !important;
  }

  .bs-broadcast-shell {
    padding: 12px !important;
    place-items: center !important;
  }

  .bs-broadcast-card {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    gap: 16px !important;
    padding: 30px 18px 22px !important;
    border-radius: 22px !important;
  }

  .bs-broadcast-close {
    top: 12px !important;
    right: 12px !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }

  .bs-broadcast-kicker {
    max-width: calc(100% - 46px) !important;
    font-size: .66rem !important;
    letter-spacing: .10em !important;
    padding: 7px 11px !important;
  }

  .bs-broadcast-title {
    font-size: clamp(2.55rem, 15vw, 4.2rem) !important;
    line-height: .92 !important;
  }

  .bs-broadcast-message {
    padding: 17px !important;
    border-radius: 18px !important;
    font-size: 1rem !important;
    line-height: 1.55 !important;
  }

  .bs-broadcast-meta {
    font-size: .66rem !important;
    line-height: 1.35 !important;
  }

  .auth-tabs {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .auth-tab {
    min-height: 44px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 14px !important;
  }

  /* Tabelle o liste grandi: scroll contenuto, non pagina */
  table,
  .table,
  .admin-table,
  .history-table,
  .timeline-table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Floating elements: non coprono lo schermo */
  .chat-launcher,
  .floating-chat,
  .support-floating {
    right: 12px !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    transform: scale(.92) !important;
    transform-origin: right bottom !important;
  }

  #live-toasts {
    left: 10px !important;
    right: 10px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    max-width: none !important;
  }

  #live-toasts > * {
    width: 100% !important;
    max-width: 100% !important;
  }

  .preloader-core,
  .preloader-name-wrap {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
  }

  .preloader-name {
    font-size: clamp(1.8rem, 12vw, 3.1rem) !important;
  }
}

@media (max-width: 420px) {
  .container,
  .site-header .container.header-shell,
  .page-hero .container.hero-layout,
  .page-hero .container.split-layout,
  .section > .container,
  .footer-wrap,
  .footer-inner {
    width: calc(100vw - 18px) !important;
    max-width: calc(100vw - 18px) !important;
  }

  .nav-wrap,
  .media-panel,
  .panel,
  .card,
  .spotlight-card,
  .brief-form,
  .modal-card,
  .auth-gate-card {
    padding: 14px !important;
    border-radius: 16px !important;
  }

  .hero-title,
  .section-title,
  .spotlight-card h2,
  .hero-copy h1 {
    font-size: clamp(1.82rem, 10.2vw, 2.55rem) !important;
  }

  .brand-mark {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }

  .brand-copy strong {
    font-size: .96rem !important;
  }
}

/* === INFO PILL FIX === */
/* FINAL SAFE FIX: ripristino forzato info (i) e numerazione nelle pillole card */
#packages-list .card .price-badge,
#premium-subscriptions .card .price-badge,
#abbonamenti .card .price-badge,
#bot-pc .card .price-badge {
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  width:fit-content !important;
  max-width:100% !important;
  overflow:visible !important;
  white-space:nowrap !important;
}
#packages-list .card .price-badge .bs-badge-label,
#premium-subscriptions .card .price-badge .bs-badge-label,
#abbonamenti .card .price-badge .bs-badge-label,
#bot-pc .card .price-badge .bs-badge-label {
  display:inline-flex !important;
  align-items:center !important;
}
#packages-list .card .price-badge .receipt-trigger.bs-info-in-badge,
#premium-subscriptions .card .price-badge .receipt-trigger.bs-info-in-badge,
#abbonamenti .card .price-badge .receipt-trigger.bs-info-in-badge,
#bot-pc .card .price-badge .receipt-trigger.bs-info-in-badge {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  position:relative !important;
  inset:auto !important;
  width:25px !important;
  min-width:25px !important;
  height:25px !important;
  min-height:25px !important;
  margin:0 -5px 0 2px !important;
  padding:0 !important;
  border-radius:999px !important;
  border:1px solid rgba(244,212,140,.30) !important;
  background:linear-gradient(180deg, rgba(255,238,190,.12), rgba(6,10,16,.72)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 6px 14px rgba(0,0,0,.22) !important;
  color:transparent !important;
  text-indent:-9999px !important;
  overflow:hidden !important;
  flex:0 0 auto !important;
  transform:none !important;
}
#packages-list .card .price-badge .receipt-trigger.bs-info-in-badge::before,
#premium-subscriptions .card .price-badge .receipt-trigger.bs-info-in-badge::before,
#abbonamenti .card .price-badge .receipt-trigger.bs-info-in-badge::before,
#bot-pc .card .price-badge .receipt-trigger.bs-info-in-badge::before {
  content:'i' !important;
  position:absolute !important;
  inset:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-indent:0 !important;
  color:var(--gold-bright) !important;
  font-size:.86rem !important;
  line-height:1 !important;
  font-weight:900 !important;
  font-family:Georgia,'Times New Roman',serif !important;
  font-style:italic !important;
}
#packages-list .card .price-row .receipt-trigger:not(.bs-info-in-badge),
#premium-subscriptions .card .price-row .receipt-trigger:not(.bs-info-in-badge),
#abbonamenti .card .price-row .receipt-trigger:not(.bs-info-in-badge),
#bot-pc .card .price-row .receipt-trigger:not(.bs-info-in-badge) {
  display:none !important;
}
#packages-list .card[data-card-number] .price-badge::before,
#premium-subscriptions .card[data-card-number] .price-badge::before,
#abbonamenti .card[data-card-number] .price-badge::before,
#bot-pc .card[data-card-number] .price-badge::before {
  content: attr(data-card-number) " \00B7" !important;
}

@media (max-width: 1024px), (min-width: 1025px) and (max-width: 1366px) and (pointer: coarse) and (hover: none) {
  html.bs-mobile-nav-open,
  body.bs-mobile-nav-open {
    width: 100vw !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  .hero-title,
  .section-title,
  .spotlight-card h2,
  .hero-copy h1,
  .page-hero .hero-title,
  .spotlight-card.spotlight-profile h2 {
    letter-spacing: .01em !important;
    line-height: 1.04 !important;
    word-spacing: .02em !important;
    font-stretch: normal !important;
  }

  .spotlight-card.spotlight-profile h2 {
    font-size: clamp(2.05rem, 10.8vw, 3rem) !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .site-header .header-shell {
    position: relative !important;
  }

  .site-header .header-user-rail {
    display: none !important;
    order: 2 !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 0 !important;
    padding: 10px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(244,212,140,.14) !important;
    background: rgba(4,6,10,.92) !important;
    box-shadow: 0 16px 34px rgba(0,0,0,.28) !important;
  }

  .site-header .header-shell.is-menu-open .header-user-rail,
  .site-header .header-shell:has(.nav-wrap.is-open) .header-user-rail {
    display: grid !important;
    position: fixed !important;
    left: 14px !important;
    right: 14px !important;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    z-index: 9502 !important;
  }

  .site-header .header-user-rail .nav-user-chip {
    min-width: 0 !important;
    width: 100% !important;
    justify-content: center !important;
  }

  .site-header .header-user-rail .bs-support-nav-btn,
  .site-header .header-user-rail #btn-logout {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
  }

  .site-header .header-user-rail .online-counter {
    display: none !important;
  }

  .bs-lang-option-left {
    gap: 12px !important;
  }

  .bs-lang-flag {
    position: relative !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 24px !important;
    border-radius: 7px !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    overflow: hidden !important;
    color: transparent !important;
    text-shadow: none !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.15) !important;
  }

  .bs-lang-flag::after {
    content: attr(data-code) !important;
    position: relative !important;
    z-index: 2 !important;
    color: #fff !important;
    font-size: .50rem !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    text-shadow: 0 1px 3px rgba(0,0,0,.85) !important;
  }

  .bs-lang-option[data-lang="it"] .bs-lang-flag { background: linear-gradient(90deg,#159b55 0 33%,#fff 33% 66%,#d52b1e 66%) !important; }
  .bs-lang-option[data-lang="en"] .bs-lang-flag { background: linear-gradient(135deg,#012169 0 45%,#fff 45% 53%,#c8102e 53% 60%,#012169 60%) !important; }
  .bs-lang-option[data-lang="fr"] .bs-lang-flag { background: linear-gradient(90deg,#0055a4 0 33%,#fff 33% 66%,#ef4135 66%) !important; }
  .bs-lang-option[data-lang="de"] .bs-lang-flag { background: linear-gradient(180deg,#000 0 33%,#dd0000 33% 66%,#ffce00 66%) !important; }
  .bs-lang-option[data-lang="es"] .bs-lang-flag { background: linear-gradient(180deg,#aa151b 0 25%,#f1bf00 25% 75%,#aa151b 75%) !important; }
  .bs-lang-option[data-lang="pt"] .bs-lang-flag { background: linear-gradient(90deg,#006600 0 42%,#ff0000 42%) !important; }
  .bs-lang-option[data-lang="ro"] .bs-lang-flag { background: linear-gradient(90deg,#002b7f 0 33%,#fcd116 33% 66%,#ce1126 66%) !important; }
  .bs-lang-option[data-lang="pl"] .bs-lang-flag { background: linear-gradient(180deg,#fff 0 50%,#dc143c 50%) !important; }
  .bs-lang-option[data-lang="nl"] .bs-lang-flag { background: linear-gradient(180deg,#ae1c28 0 33%,#fff 33% 66%,#21468b 66%) !important; }
  .bs-lang-option[data-lang="sv"] .bs-lang-flag { background: linear-gradient(90deg,#006aa7 0 30%,#fecc00 30% 42%,#006aa7 42%) !important; }
  .bs-lang-option[data-lang="uk"] .bs-lang-flag { background: linear-gradient(180deg,#0057b7 0 50%,#ffd700 50%) !important; }
  .bs-lang-option[data-lang="ru"] .bs-lang-flag { background: linear-gradient(180deg,#fff 0 33%,#0039a6 33% 66%,#d52b1e 66%) !important; }
  .bs-lang-option[data-lang="sq"] .bs-lang-flag { background: #e41e20 !important; }
  .bs-lang-option[data-lang="cs"] .bs-lang-flag { background: linear-gradient(180deg,#fff 0 50%,#d7141a 50%) !important; }
  .bs-lang-option[data-lang="hu"] .bs-lang-flag { background: linear-gradient(180deg,#ce2939 0 33%,#fff 33% 66%,#477050 66%) !important; }
  .bs-lang-option[data-lang="da"] .bs-lang-flag { background: linear-gradient(90deg,#c60c30 0 34%,#fff 34% 45%,#c60c30 45%) !important; }
  .bs-lang-option[data-lang="fi"] .bs-lang-flag { background: linear-gradient(90deg,#fff 0 32%,#003580 32% 46%,#fff 46%) !important; }
  .bs-lang-option[data-lang="el"] .bs-lang-flag { background: repeating-linear-gradient(180deg,#0d5eaf 0 3px,#fff 3px 6px) !important; }

  .site-footer .footer-links {
    display: none !important;
  }

  .site-footer {
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .chat-launcher,
  .floating-chat,
  .support-floating {
    right: calc(14px + env(safe-area-inset-right, 0px)) !important;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    transform: none !important;
    transform-origin: right bottom !important;
    z-index: 8999 !important;
  }
}

/* =========================================================
   NOME UTENTE FUORI DALL'HEADER su mobile/tablet (incluso iPad):
   il chip "CIAO, ..." si sovrapponeva al brand su iPad. Qui lo
   nascondiamo dall'header — il nome resta visibile SOLO su PC e
   nel menu hamburger (blocco #mobile-menu-account). Non sposta
   nulla: rimuove solo il chip e allinea a destra i pulsanti.
   ========================================================= */
@media (max-width: 1024px), (min-width: 1025px) and (max-width: 1366px) and (pointer: coarse) and (hover: none) {
  .site-header .header-user-rail .nav-user-chip,
  .site-header .header-user-rail .online-counter { display: none !important; }
  .site-header .header-user-rail {
    grid-template-columns: auto !important;
    justify-content: flex-end !important;
  }
}

/* =========================================================
   HEADER iPad/mobile: a MENU APERTO i pulsanti supporto/logout
   in alto si accavallavano con l'hamburger. Li nascondiamo
   quando il menu e' aperto (il menu ha gia' SUPPORTO e LOG OUT
   nel blocco account in fondo). A menu chiuso restano per accesso rapido.
   ========================================================= */
@media (max-width: 1024px), (min-width: 1025px) and (max-width: 1366px) and (pointer: coarse) and (hover: none) {
  body.bs-mobile-nav-open .site-header .header-user-rail { display: none !important; }
  body.bs-mobile-nav-open .site-header .nav-toggle { z-index: 3 !important; }
}