/* =============================================
   USKing · mobile / a11y refinements
   只补充 style.css 不便就地改动的「移动端兜底」与可访问性，
   保持向后兼容；优先级用类选择器对齐，不引入 !important 风暴。
   ============================================= */

/* ===== 1. iPhone 安全区适配（导航 / 抽屉 / 全屏覆盖层） ===== */
.navbar{
  padding-left:max(20px, env(safe-area-inset-left));
  padding-right:max(20px, env(safe-area-inset-right));
}
@media(max-width:640px){
  .navbar{
    padding-left:max(10px, env(safe-area-inset-left));
    padding-right:max(10px, env(safe-area-inset-right));
  }
}

/* watch / SPA 主区底部如有 fixed 元素，给安全区留位 */
.watch-page{padding-bottom:calc(32px + env(safe-area-inset-bottom))}

/* ===== 2. 防 iOS Safari 输入聚焦自动放大（要求字体 ≥16px） ===== */
@media (max-width:640px){
  .form-input,
  .nav-search-input,
  .dm-search-bar input,
  .dm-chat-input input,
  .watch-chat-input-row input,
  textarea,
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  input[type="url"]{
    font-size:16px;
  }
}

/* ===== 3. 触控目标最小尺寸（仅在有 hover 不可用的设备上提升） ===== */
@media (hover:none) and (pointer:coarse){
  .btn,
  .btn-sm,
  .btn-accent-sm,
  .lang-toggle,
  .nav-spa-drawer-btn,
  .dm-trigger,
  .sb-item,
  .tab,
  .my-tab-btn{
    min-height:40px;
  }
  .btn-block{min-height:44px}
}

/* ===== 4. 键盘可达：focus-visible 黄色描边（不影响鼠标点击态） ===== */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-accent-sm:focus-visible{
  outline-offset:3px;
}

/* ===== 5. prefers-reduced-motion ===== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ===== 6. 表单控件外观一致化（Safari 默认渲染过于圆） ===== */
input.form-input,
.form-input{
  -webkit-appearance:none;
  appearance:none;
}

/* ===== 7. 极窄屏（<360px）：登录/注册卡片不溢出 ===== */
@media (max-width:360px){
  .container{padding:0 14px}
  .card{padding:16px}
}

/* ===== 8. 长按选中色 ===== */
::selection{background:rgba(255,215,0,.35);color:#fff}

/* ===== 9. 表单内字段 + 按钮在 360px 下不被挤压 ===== */
@media (max-width:480px){
  .form-row{flex-wrap:wrap}
  .form-row > .form-group{min-width:0}
}