@import "tailwindcss";


/* 移动端视口高度优化 */
html, body {
  height: 100%;
  overflow-x: hidden;
}

/* 现代浏览器使用 100dvh，避免地址栏收起/展开导致的布局跳动 */
@supports (height: 100dvh) {
  .h-screen {
    height: 100dvh;
  }
  .min-h-screen {
    min-height: 100dvh;
  }
}

/* 解决移动端100vh问题 */
@supports (-webkit-touch-callout: none) {
  .h-screen {
    height: -webkit-fill-available;
  }
  
  .min-h-screen {
    min-height: -webkit-fill-available;
  }
}

/* 移动端滚动优化 */
@media (max-width: 768px) {
  * {
    -webkit-overflow-scrolling: touch;
  }
  
  body {
    overscroll-behavior-y: none;
  }
}


/* 安全区域变量与工具类（适配刘海/底部手势条） */
:root {
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
}

.safe-top {
  padding-top: var(--safe-area-top);
}

.safe-bottom {
  padding-bottom: var(--safe-area-bottom);
}


/* 验证码弹层动画 */
.captcha-modal-enter {
  animation: captchaModalIn 0.3s ease-out forwards;
}

@keyframes captchaModalIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* 验证码弹层背景渐入 */
.captcha-backdrop-enter {
  animation: backdropFadeIn 0.3s ease-out forwards;
}

@keyframes backdropFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@config "../../tailwind.config.js"