@media (max-width: 768px) {
  body { background: linear-gradient(180deg, #effffb, #f8fbff); }
  .auth-shell, .create-shell, .login-shell { min-height: 100svh; padding: 16px; display: block; }
  .auth-card, .create-card, .form-card, .login-card { width: 100%; border-radius: 28px; padding: 20px; margin: 14px auto; box-shadow: 0 22px 55px rgba(13,51,82,.14); }
  .site-logo, .auth-logo, .create-logo { max-width: 210px; height: auto; }
  h1 { font-size: clamp(30px, 9vw, 42px); line-height: 1; }
  form { display: grid; gap: 14px; }
  .form-grid, .create-grid, .auth-grid { grid-template-columns: 1fr !important; gap: 14px; }
  label { font-size: 14px; font-weight: 900; }
  input, select, textarea { min-height: 52px; border-radius: 16px; font-size: 16px; width: 100%; }
  .password-wrap { position: relative; }
  .password-toggle { min-height: 42px; padding: 8px 12px; border-radius: 12px; }
  button, .button, .primary-btn { width: 100%; min-height: 54px; border-radius: 17px; font-size: 16px; font-weight: 900; }
  .plan-cards, .plan-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* v1.54 mobile compact eye password toggle */
@media (max-width: 768px) {
  .password-field { position: relative; gap: 0; }
  .password-field input { padding-right: 48px; }
  .password-toggle.is-eye-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
  }
  .password-toggle.is-eye-toggle::before { content: '👁'; font-size: 16px; }
  .password-toggle.is-eye-toggle.is-showing::before { content: '🙈'; }
}

/* v1.76 mobile create-event compliance/footer styling */
@media (max-width: 768px) {
  .organiser-responsibility-consent {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    gap: 11px !important;
    align-items: flex-start !important;
    width: 100% !important;
    padding: 13px !important;
    border-radius: 18px !important;
    background: #f8fffe !important;
    border: 1px solid rgba(15,159,152,.18) !important;
    text-align: left !important;
  }

  .organiser-responsibility-consent input {
    width: 18px !important;
    height: 18px !important;
    margin: 3px 0 0 !important;
  }

  .organiser-responsibility-consent span {
    min-width: 0 !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    color: #647486 !important;
    font-weight: 750 !important;
    overflow-wrap: break-word !important;
  }

  .organiser-responsibility-consent a {
    color: #06746f !important;
    font-weight: 950 !important;
  }

  .create-legal-footer,
  .legal-footer {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 18px 12px calc(18px + env(safe-area-inset-bottom)) !important;
    margin-top: 0 !important;
    text-align: center !important;
    color: #647486 !important;
  }

  .create-legal-footer p,
  .legal-footer p {
    max-width: 300px !important;
    margin: 0 auto 12px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  .create-legal-footer nav,
  .legal-footer nav {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: min(100%, 330px) !important;
    margin: 0 auto !important;
  }

  .create-legal-footer nav a,
  .legal-footer nav a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    padding: 9px 12px !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    border: 1px solid rgba(15,159,152,.16) !important;
    color: #06746f !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 950 !important;
  }
}

/* v1.77 mobile legal footer width correction */
@media (max-width: 768px) {
  html, body { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; }
  body *, body *::before, body *::after { box-sizing: border-box !important; }

  .create-legal-footer,
  .legal-footer {
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    margin: 0 auto 12px !important;
    padding: 18px 12px calc(18px + env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
  }

  .create-legal-footer nav,
  .legal-footer nav {
    width: 100% !important;
    max-width: 300px !important;
  }

  .create-legal-footer nav a,
  .legal-footer nav a {
    width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-align: center !important;
  }
}