.fs-auth-form {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-background, #fff) 70%, transparent);
}

.fs-auth-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-muted, #64748b);
}

.fs-auth-input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 10px;
  padding: 0 12px;
  font-size: 14px;
  color: var(--color-foreground, #0f172a);
  background: var(--color-surface, #fff);
}

.fs-auth-button {
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 10px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 800;
  color: var(--color-primary-foreground, #fff);
  background: var(--color-primary, #6366f1);
}

.fs-auth-button.secondary {
  margin-top: 8px;
  color: var(--color-primary, #6366f1);
  border: 1px solid color-mix(in srgb, var(--color-primary, #6366f1) 30%, transparent);
  background: color-mix(in srgb, var(--color-primary, #6366f1) 10%, transparent);
}

.fs-auth-message {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--color-muted, #64748b);
}

[data-fs-direct-auth-modal] {
  box-sizing: border-box;
  overscroll-behavior: contain;
  touch-action: manipulation;
}

[data-fs-direct-auth-modal] *,
[data-fs-direct-auth-modal] *::before,
[data-fs-direct-auth-modal] *::after {
  box-sizing: border-box;
}

[data-fs-direct-auth-modal] section {
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

[data-fs-direct-auth-modal] .fs-auth-input,
[data-fs-direct-auth-modal] .fs-auth-button {
  min-width: 0;
}

[data-fs-direct-auth-modal] [data-fs-auth-close] {
  flex: 0 0 auto;
}

@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
  }

  #root .min-h-screen {
    min-width: 0;
  }

  #root header .h-16 {
    height: 58px;
    padding-left: 14px;
    padding-right: 14px;
  }

  #root main,
  #root [class*="p-6"],
  #root [class*="p-8"] {
    max-width: 100%;
  }

  #root .grid {
    min-width: 0;
  }

  #root table {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }

  #root input,
  #root select,
  #root textarea,
  #root button {
    font-size: 16px;
  }

  #root .rounded-2xl {
    border-radius: 14px;
  }

  #root .fixed.inset-0.z-50 {
    align-items: flex-start;
    overflow-y: auto;
    padding: max(12px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom)) !important;
    min-height: 100dvh;
    max-height: 100dvh;
    -webkit-overflow-scrolling: touch;
  }

  #root .fixed.inset-0.z-50 > .relative {
    width: 100%;
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 28px);
    min-height: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px !important;
    margin: auto 0;
  }

  [data-fs-direct-auth-modal] {
    display: block !important;
    padding: max(12px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: none !important;
  }

  [data-fs-direct-auth-modal] section {
    width: 100% !important;
    max-width: calc(100vw - 24px) !important;
    max-height: none !important;
    margin: 0 auto !important;
    border-radius: 14px !important;
    overflow: visible !important;
  }

  [data-fs-direct-auth-modal] .fs-auth-modal-body {
    padding: 16px !important;
  }

  [data-fs-direct-auth-modal] .fs-auth-modal-head {
    margin-bottom: 12px !important;
  }

  [data-fs-direct-auth-modal] h2 {
    font-size: 20px !important;
    line-height: 1.16 !important;
  }

  [data-fs-direct-auth-modal] p {
    font-size: 12px !important;
    line-height: 1.45 !important;
    margin-bottom: 12px !important;
  }

  .fs-auth-form {
    gap: 8px;
    padding: 10px;
  }

  .fs-auth-label {
    font-size: 10px;
  }

  .fs-auth-input,
  .fs-auth-button {
    min-height: 40px;
    font-size: 16px;
  }

  .fs-auth-submit {
    position: sticky;
    bottom: 0;
    box-shadow: 0 -8px 18px rgba(15, 23, 42, .08), 0 10px 20px rgba(99, 102, 241, .18);
  }
}

@media (max-width: 380px) {
  [data-fs-direct-auth-modal] section {
    max-width: calc(100vw - 16px) !important;
  }

  [data-fs-direct-auth-modal] .fs-auth-modal-body {
    padding: 14px !important;
  }

  .fs-auth-input,
  .fs-auth-button {
    min-height: 38px;
  }
}