/* ============================================================
   影造AI · 移动端统一表单套件 + 首页排版（美图风格 2026-10-16）
   在 design-system.css + components.css 之后加载。
   ============================================================ */

html, body { max-width: 100%; }
img, video, canvas, svg { max-width: 100%; }
.mk-noscroll-x { overflow-x: hidden; }

/* ============================================================
   M3 表单结构
   ============================================================ */
.mk-form { display: flex; flex-direction: column; gap: var(--sp-4); width: 100%; }
.mk-form .field { gap: var(--sp-2); }
.mk-top-hint { font-size: var(--fs-sm); color: var(--text-3); line-height: 1.5; }
.mk-actions { display: flex; flex-direction: column; gap: var(--sp-2); }
.mk-cta { height: 48px; font-size: var(--fs-lg); font-weight: 600; }
.mk-hint { font-size: var(--fs-xs); color: var(--text-3); }
.mk-polish-wrap { display: flex; flex-direction: column; gap: var(--sp-2); }
.mk-polish { align-self: flex-start; }

/* ============================================================
   底部 5 Tab Bar（美图风格：选中态下划线 + 图标 + 文字变色）
   ============================================================ */
.mk-tabbar { display: none; }
body.has-tabbar { padding-bottom: 0; }
@media (max-width: 860px) {
  body.has-tabbar { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .mk-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; align-items: stretch; justify-content: space-around;
    background: #F9F7FE;
    border-top: 1px solid #eee;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 20px rgba(0,0,0,.06);
  }
}
.mk-tabbar a {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: 52px; color: #999; font-size: 11px; font-weight: 500;
  text-decoration: none;
  position: relative;
  transition: color .15s;
}
.mk-tabbar a .mk-tab-ico { line-height: 1; display: flex; align-items: center; justify-content: center; }
.mk-tabbar a .mk-tab-ico svg { width: 22px; height: 22px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* 选中态：粉紫色 + 顶部小圆点（代替美图的下划线，因为美图是白底配红线） */
.mk-tabbar a.is-on { color: #C2255C; }
.mk-tabbar a.is-on::before {
  content: "";
  position: absolute;
  top: 2px; left: 50%;
  transform: translateX(-50%);
  width: 20px; height: 3px;
  background: linear-gradient(135deg, #ff6b9d, #c084fc);
  border-radius: 3px;
}

/* 空状态 */
.mk-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-3); padding: var(--sp-10) var(--sp-4); text-align: center;
  color: #999;
}
.mk-empty .mk-empty-ico { font-size: var(--fs-3xl); opacity: 0.6; }

/* 刘海屏安全区 */
.mk-safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0); }
.mk-safe-top { padding-top: env(safe-area-inset-top, 0); }

/* ============================================================
   通用手机端触摸优化
   ============================================================ */
@media (max-width: 768px) {
  .container { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .input, .select { height: 48px; font-size: 16px; }
  .textarea { min-height: 96px; font-size: 16px; }
  .input-sm { height: 44px; }
  .btn { min-height: 44px; }
  .btn-sm { min-height: 44px; }
  .btn-lg, .mk-cta { height: 48px; }
  .btn-icon { width: 44px; min-width: 44px; }
  .mk-form .btn, .mk-actions .btn { width: 100%; }
  .upload-zone { min-height: 104px; }
  .check, .radio { min-height: 44px; padding: var(--sp-2) 0; }
  .check input, .radio input { width: 20px; height: 20px; }
  .card { padding: var(--sp-4); }
  .card-pad-lg { padding: var(--sp-5); }
}

/* 375px 兜底 */
@media (max-width: 375px) {
  .container { padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .h-1 { font-size: var(--fs-3xl); }
  .h-display { font-size: var(--fs-4xl); }
  .mk-form, .card, .field, .mk-actions { min-width: 0; }
  .mk-form, .card, .field-label, .mk-hint { overflow-wrap: anywhere; word-break: break-word; }
}


/* W5 触控修复 2026-10-20：页面自定义的小删除/关闭按钮扩到 ≥44px 热区，视觉尺寸保持不变 */
@media (max-width: 768px) {
  .btn-xs { min-height: 44px; padding: 0 14px; }
  .del, .xy-th-del, .xy-res-close, .mclose { position: relative; }
  .del::before, .xy-th-del::before, .xy-res-close::before, .mclose::before {
    content: ''; position: absolute; inset: -12px; z-index: 5;
  }
}