/* ══════════════════════════════════════════════════════════
   木生 AIGC · 移动端适配层（Mobile Adaptation）
   ──────────────────────────────────────────────────────────
   加载顺序：app.css → home.css → mobile.css
   设计原则：
   1) 桌面端零改动：本文件所有规则都包在断点或移动端专属类里；
   2) 手机是「App 形态」：顶部品牌栏 + 底部 Tab + 抽屉面板；
   3) 拇指可达：主行动落在下方 1/3 屏，点击目标 ≥ 44px；
   4) 刘海安全区：env(safe-area-inset-*) 全量补齐；
   5) 触屏无 hover：hover 态在 (hover: none) 下全部还原为静态。
   断点：1024 平板横 / 900 App 形态 / 760 手机 / 560 小屏
   ══════════════════════════════════════════════════════════ */

/* ── 0. 基础：移动端专属节点默认隐藏 ─────────────────── */
.hnav-m,
.sm-top,
.sm-tabs,
.wb-mbar,
.wb-scrim,
.hm-scrim { display: none; }

html { -webkit-text-size-adjust: 100%; }

button,
.hbtn,
.sb-item,
.sm-tab,
.hm-link,
.ip-tool,
.ref-row { touch-action: manipulation; }

#app { height: 100dvh; }

/* 触屏：点击高亮与 hover 粘滞一律取消 */
* { -webkit-tap-highlight-color: transparent; }

/* ── 1. 顶栏压缩（工作台/成片/后台） ─────────────────── */
@media (max-width: 900px) {
  #app.mode-wb .topbar,
  #app.mode-admin .topbar { display: none; }

  .topbar { height: 50px; flex-basis: 50px; gap: 8px; padding: 0 10px; }
  .topbar .divider,
  .stage-track { display: none; }
  .proj-name { max-width: 132px; font-size: 13px; }
  .save-state > span:not(.dot) { display: none; }
  .quota { font-size: 11px; padding: 3px 8px; white-space: nowrap; }
  .player-bar > span.mono { white-space: nowrap; flex: none; min-width: 0 !important; }
  .player-bar { font-size: 10.5px; }
  .topbar-right { gap: 6px; }
}

/* ══════════════════════════════════════════════════════
   2. 首页（.home）
   ══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .hwrap { width: calc(100% - 32px); }

  /* 导航：链接与用户区收进抽屉 */
  .hnav-in { height: 58px; gap: 10px; }
  .hnav-links,
  .hnav-right { display: none; }
  .hnav-m { display: flex; align-items: center; gap: 8px; margin-left: auto; }
  .hnav-burger {
    width: 40px; height: 38px; border-radius: 10px;
    display: grid; place-items: center;
    color: var(--ink);
    border: 1px solid rgba(28, 28, 26, .16);
    background: rgba(28, 28, 26, .05);
  }
  .hnav-burger:active { background: rgba(28, 28, 26, .12); }
  .hbtn-xs { height: 36px; padding: 0 15px; font-size: 13px; }

  /* Hero */
  .hero { padding: 40px 0 10px; }
  .hero-grid { gap: 26px; }
  .hero-eyebrow { font-size: 11.5px; padding: 5px 11px; margin-bottom: 16px; line-height: 1.5; }
  .hero h1 { font-size: 31px; line-height: 1.22; margin-bottom: 14px; }
  .hero-sub { font-size: 14.5px; line-height: 1.75; margin-bottom: 20px; max-width: none; }
  .hero-stats { gap: 16px 26px; flex-wrap: wrap; }
  .hstat .v { font-size: 21px; }
  .hstat .k { font-size: 11.5px; }
  .hero-acts { margin-top: 22px; gap: 10px; }
  .hero-acts .hbtn { flex: 1; padding: 12px 10px; font-size: 14px; }

  /* 漂浮卡群 → 横滑卡带 */
  .hero-vis {
    height: auto; max-width: none;
    display: flex; gap: 10px;
    overflow-x: auto; overflow-y: hidden;
    padding: 2px 2px 10px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hero-vis::-webkit-scrollbar { display: none; }
  .hcard {
    position: static;
    flex: 0 0 72%; width: auto !important; max-width: 268px;
    animation: none !important;
    scroll-snap-align: start;
  }
  .hcard-chip { display: none; }
  .hero::before { height: 420px; }

  /* 创作对话框 */
  .composer-sec { padding: 16px 0 4px; }
  .composer { padding: 14px 14px 16px; border-radius: 18px; }
  .composer-tabs {
    gap: 6px; margin-bottom: 12px;
    overflow-x: auto; padding-bottom: 2px;
    scrollbar-width: none;
  }
  .composer-tabs::-webkit-scrollbar { display: none; }
  .ctab { flex: 0 0 auto; padding: 8px 13px; font-size: 12.5px; gap: 7px; }
  .composer-input { min-height: 98px; font-size: 16px; padding: 13px 14px; }
  .composer-tiprow { flex-direction: column; align-items: flex-start; gap: 3px; }
  .composer-opts { flex-direction: column; align-items: flex-start; gap: 12px; margin: 14px 0 2px; }
  .copt { width: 100%; flex-direction: column; align-items: flex-start; gap: 6px; }
  .hchips { flex-wrap: wrap; }
  .hchip-opt { font-size: 12.5px; padding: 6px 13px; }
  .composer-foot { flex-wrap: wrap; gap: 10px; margin-top: 14px; }
  .composer-foot .hbtn { width: 100%; justify-content: center; }
  .recent-row {
    flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px;
    scrollbar-width: none;
  }
  .recent-row::-webkit-scrollbar { display: none; }
  .recent-tag, .recent-pill { flex: 0 0 auto; }

  /* 区块 */
  .hsec { padding: 44px 0 0; }
  .hsec-head { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 18px; }
  .hsec-title { font-size: 22px; }
  .hsec-sub { font-size: 13px; }
  .skills, .models, .feats, .shows, .voices { grid-template-columns: 1fr; gap: 12px; }
  .skill-d, .mdesc { min-height: 0; }
  .skill-cover { aspect-ratio: 16 / 8; }
  .mcard { padding: 18px 16px; }
  .show-cover { aspect-ratio: 16 / 9; }
  .show-play { opacity: 1; background: rgba(28, 28, 26, .18); }
  .show-play span { width: 42px; height: 42px; }

  /* 底部 CTA / 页脚 */
  .hcta { margin-top: 44px; padding: 30px 18px; border-radius: 20px; }
  .hcta-t { font-size: 21px; }
  .hcta-d { font-size: 12.5px; }
  .hcta-btns { flex-direction: column; gap: 10px; }
  .hcta-btns .hbtn { width: 100%; }
  .hfoot { margin-top: 38px; padding: 22px 0 calc(26px + env(safe-area-inset-bottom)); }
  .hfoot-in { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hfoot-links { margin-left: 0; flex-wrap: wrap; gap: 10px 16px; }
  .hfoot-line { margin-top: 6px; line-height: 1.7; }
}

/* 移动端导航抽屉 */
@media (max-width: 900px) {
  .hm-scrim {
    display: flex;
    position: fixed; inset: 0; z-index: 320;
    background: rgba(28, 28, 26, .45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .22s ease;
  }
  .hm-scrim.on { opacity: 1; }
  .hm-panel {
    margin-left: auto;
    width: 87%; max-width: 356px; height: 100%;
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, #101713, #FAFAF7);
    border-left: 1px solid rgba(28, 28, 26, .1);
    box-shadow: -24px 0 60px rgba(0, 0, 0, .5);
    padding: calc(14px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom));
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.2, .7, .3, 1);
    overflow-y: auto;
  }
  .hm-scrim.on .hm-panel { transform: none; }
  .hm-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
  .hm-brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; color: var(--ink); }
  .hm-close {
    width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center;
    color: var(--ink-3); background: rgba(28, 28, 26, .05);
  }
  .hm-links { display: flex; flex-direction: column; }
  .hm-link {
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 4px; font-size: 15.5px; color: var(--ink);
    border-bottom: 1px solid rgba(28, 28, 26, .07);
    text-align: left;
  }
  .hm-link svg { color: #4a554e; }
  .hm-sep { height: 1px; background: rgba(28, 28, 26, .1); margin: 12px 0; }
  .hm-user-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
  .hm-user-nm { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 650; color: var(--ink); }
  .hm-user-id { font-size: 11.5px; color: var(--ink-3); }
  .hm-acts { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
  .hbtn-block { width: 100%; justify-content: center; }
  .hm-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(28, 28, 26, .08); }
}

/* ══════════════════════════════════════════════════════
   3. 创作中心（.studio）→ App 形态
   ══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .studio {
    flex-direction: column;
    padding-bottom: calc(58px + env(safe-area-inset-bottom));
  }
  .sb { display: none; }

  /* 顶部品牌栏 */
  .sm-top {
    display: flex; align-items: center; gap: 10px; flex: none;
    height: 54px; padding: 0 12px;
    background: rgba(250, 250, 247, .92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(28, 28, 26, .08);
    position: relative; z-index: 30;
  }
  .sm-brand {
    display: flex; align-items: center; gap: 8px;
    font-weight: 700; font-size: 14.5px; color: var(--ink); letter-spacing: .2px;
  }
  .sm-brand .hlogo-mark { width: 26px; height: 26px; border-radius: 8px; }
  .sm-top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
  .sm-spend { font-size: 11px; color: #6B6A66; font-variant-numeric: tabular-nums; }
  .sm-ava {
    width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(135deg, #B98F4E, #4A7C59);
    color: #FFFDF8; font-weight: 700; font-size: 13px;
  }

  /* 底部 Tab */
  .sm-tabs {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 85;
    height: calc(58px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(250, 250, 247, .96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(28, 28, 26, .1);
  }
  .sm-tab {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    font-size: 10.5px; color: var(--ink-3);
    transition: color .15s;
    position: relative;
  }
  .sm-tab.on { color: var(--brand); }
  .sm-tab.on::before {
    content: ''; position: absolute; top: 2px; left: 50%; transform: translateX(-50%);
    width: 18px; height: 2px; border-radius: 2px; background: var(--brand);
    box-shadow: 0 0 10px rgba(166, 124, 61, .6);
  }
  .sm-tab:active { color: #f5e3bd; }

  /* 主区 */
  .studio-main { flex: 1; min-height: 0; }
  .studio-scroll { padding: 20px 14px 26px; gap: 22px; max-width: none; }
  .studio-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .studio-hi { font-size: 21px; line-height: 1.35; }
  .studio-sub { font-size: 12.5px; line-height: 1.65; margin-top: 4px; }
  .studio-head-right { margin-left: 0; justify-content: flex-start; gap: 6px; }
  .studio-head .hbtn { align-self: flex-start; }
  .studio-head .hbadge { font-size: 11px; padding: 4px 10px; }
  .studio-head .hbadge-spend { display: none; }

  /* 项目网格：两列，卡片信息收窄 */
  .proj-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .proj-body { padding: 8px 10px 10px; }
  .proj-nm { font-size: 12.5px; }
  .proj-meta { font-size: 10.5px; gap: 4px; margin-top: 5px; }
  .proj-time { width: 100%; margin-left: 0; color: #5d6862; }
  .proj-del { opacity: 1; background: rgba(28, 28, 26, .66); }
  .proj-empty { padding: 32px 14px; }
  .pe-t { font-size: 14px; }

  /* 剧本库 / 资产库 */
  .scr-grid, .ast-grid { grid-template-columns: 1fr; gap: 10px; }
  .scr-card { gap: 7px; }
  .scr-title { font-size: 14px; }
  .scr-ops .btn { flex: 1; }
  .ast-cover { height: 148px; }
  .studio-view .hchips {
    flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px;
    scrollbar-width: none; margin-bottom: 12px !important;
  }
  .studio-view .hchips::-webkit-scrollbar { display: none; }
  .studio-view .hchip-opt { flex: 0 0 auto; }

  /* 创作对话框（复用首页样式，微调内边距） */
  .studio-composer .composer { padding: 14px; }
}

/* 平板：仍用侧栏，只收窄 */
@media (min-width: 901px) and (max-width: 1180px) {
  .studio-scroll { padding: 28px 26px 48px; }
  .proj-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

/* ══════════════════════════════════════════════════════
   4. 分镜工作台（.wb）→ 抽屉式两翼
   ══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .screen > .wb { flex: 1; min-height: 0; }
  .wb { grid-template-columns: minmax(0, 1fr); }

  /* 工具条 */
  .wb-mbar {
    display: flex; align-items: center; gap: 4px; flex: none;
    height: 52px; padding: 0 6px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    position: relative; z-index: 35;
  }
  .wb-mb-btn {
    min-width: 46px; height: 42px; padding: 0 6px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    border-radius: 9px; color: var(--ink-2); font-size: 9.5px;
  }
  .wb-mb-btn:active { background: var(--surface-3); color: var(--ink); }
  .wb-mb-title { flex: 1; min-width: 0; padding: 0 4px; }
  .wb-mb-nm {
    display: block; font-size: 13px; font-weight: 600; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .wb-mb-sub { display: block; font-size: 10.5px; color: var(--ink-3); margin-top: 1px; }

  /* 左右栏 → 抽屉 */
  .rail, .kp {
    position: fixed; top: 0; bottom: 0; z-index: 130;
    height: 100%; max-height: 100dvh;
    transition: transform .26s cubic-bezier(.2, .7, .3, 1);
    box-shadow: 0 0 60px rgba(0, 0, 0, .5);
  }
  .rail {
    left: 0; width: 84%; max-width: 320px;
    border-right: 1px solid var(--line);
    transform: translateX(-102%);
  }
  .kp {
    right: 0; width: 92%; max-width: 400px;
    border-left: 1px solid var(--line);
    transform: translateX(102%);
  }
  .wb.rail-open .rail,
  .wb.kp-open .kp { transform: none; }

  .wb-scrim {
    display: none; position: fixed; inset: 0; z-index: 125;
    background: rgba(28, 28, 26, .5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }
  .wb-scrim.on { display: block; animation: fadeIn .18s ease-out; }

  /* 中栏：卡片竖排 */
  .center-head { flex-wrap: wrap; gap: 8px; padding: 10px 12px 8px; }
  .ch-title { font-size: 12.5px; }
  .ch-sub { font-size: 11px; }
  .ch-actions { gap: 4px; }
  .ch-actions .btn-sm { padding: 0 8px; font-size: 11.5px; height: 28px; }
  .card-feed { padding: 12px 12px 16px; }
  .card-feed-inner { gap: 9px; }
  .shot-head { padding: 9px 11px 7px; gap: 6px; flex-wrap: wrap; }
  .shot-head .sp { flex: 1 1 8px; }
  .shot-head .tag { height: 24px; padding: 0 8px; font-size: 11px; }
  .shot-body { flex-direction: column; gap: 9px; padding: 0 11px 10px; }
  .thumb-box { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .thumb-box .play-hint { opacity: 1; background: rgba(0, 0, 0, .18); }
  .shot-line { font-size: 12.5px; }
  .shot-desc { font-size: 12px; -webkit-line-clamp: 3; }
  .shot-foot { padding: 0 11px 10px; gap: 5px; flex-wrap: wrap; }
  .shot-foot .btn { font-size: 11.5px; padding: 0 9px; }
  .shot-stale { margin: 0 11px 9px; }
  .mini-edit { margin: 0 11px 10px; }

  /* 底部操作条：CTA 独占一行 */
  .center-foot {
    flex-wrap: wrap; gap: 8px;
    padding: 9px 12px calc(10px + env(safe-area-inset-bottom));
  }
  .cf-info { width: 100%; font-size: 11px; gap: 6px; flex-wrap: wrap; }
  .cf-right { margin-left: 0; width: 100%; }
  .cf-right > .btn:not([data-cta]) { display: none; }
  .cf-right [data-cta] { flex: 1; height: 44px; font-size: 14px; }

  /* 抽屉内部滚动与安全区 */
  .rail, .kp { padding-bottom: env(safe-area-inset-bottom); }
  .kp-foot { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }

  /* 确认闸弹层内的分镜条与选区 */
  .gate-sum { grid-template-columns: repeat(2, 1fr); }
  .gate-sum .gs:nth-child(2n) { border-right: 0; }
  .gate-sum .gs:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .impact-list { grid-template-columns: 1fr; max-height: none; }
  .diagram-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════
   5. 成片屏（.finish）
   ══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .finish { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .player-stage { padding: 8px 8px 4px; }
  .player-bar { padding: 0 12px 10px; gap: 8px; font-size: 10.5px; }
  .timeline { padding: 8px 12px 10px; }
  .tl-label { width: 28px; font-size: 9px; }
  .finish-right {
    border-left: 0; border-top: 1px solid var(--line);
    max-height: 44vh;
  }
  .fr-head { padding: 10px 12px; }
  .fr-status { font-size: 11px; }
  .clip-row { padding: 8px 12px; }
  .clip-acts { opacity: 1; }
  .clip-act { width: 28px; height: 28px; }
  .fr-foot { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .fr-foot .btn { width: 100%; height: 42px; }
}

/* ══════════════════════════════════════════════════════
   6. 后台管理（.admin-screen）
   ══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .admin-screen { padding: 16px 14px calc(24px + env(safe-area-inset-bottom)); }
  .admin-head { gap: 8px; margin-bottom: 12px; }
  .admin-title { font-size: 18px; }
  .admin-note { font-size: 11.5px; }
  .admin-tabs {
    overflow-x: auto; flex-wrap: nowrap; gap: 2px;
    scrollbar-width: none;
  }
  .admin-tabs::-webkit-scrollbar { display: none; }
  .admin-tabs .tab { flex: 0 0 auto; padding: 8px 12px; font-size: 12.5px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-v { font-size: 19px; }
  .stat-card { padding: 12px 13px; }
  .user-row { align-items: flex-start; gap: 8px; padding: 12px 0; }
  .user-main { min-width: 0; flex-basis: 100%; }
  .user-ops { width: 100%; }
  .user-ops .btn { flex: 1; }
  .cfg-grid { grid-template-columns: 1fr; }
  .log-row { font-size: 11px; }
  .panel { border-radius: var(--r); }
}

/* ══════════════════════════════════════════════════════
   7. 弹层 / 气泡 / Toast / 表单（手机）
   ══════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  /* 弹层：底部抽屉 */
  .scrim { padding: 0; align-items: flex-end; }
  .modal {
    max-width: none; max-height: 92dvh;
    border-radius: 18px 18px 0 0;
    border-bottom: 0;
    animation: sheetIn .26s cubic-bezier(.2, .7, .3, 1);
  }
  @keyframes sheetIn { from { transform: translateY(18px); opacity: .6; } }
  .m-head { padding: 14px 16px 10px; }
  .m-title { font-size: 15px; }
  .m-sub { font-size: 12px; }
  .m-close { width: 32px; height: 32px; }
  .m-body { padding: 0 16px 14px; }
  .m-foot {
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
    flex-wrap: wrap; gap: 8px;
  }
  .m-foot .grow { display: none; }
  .m-foot .btn { flex: 1; height: 40px; }

  /* 气泡与菜单不超出屏幕 */
  .popover { width: auto; min-width: 220px; max-width: calc(100vw - 24px); }
  .menu { min-width: 196px; }
  .menu-item { padding: 10px 11px; font-size: 13px; }

  /* Toast：顶部弹出，避开底部 Tab */
  .toasts {
    left: 12px; right: 12px; top: calc(10px + env(safe-area-inset-top)); bottom: auto;
    align-items: stretch;
  }
  .toast { max-width: none; font-size: 12.5px; }

  /* 表单：16px 防 iOS 自动放大 */
  .input, .textarea, .composer-input,
  .mini-edit textarea, .scr-editor { font-size: 16px; }
  .btn { height: 36px; }
  .btn-sm { height: 30px; font-size: 12px; }
  .btn-lg { height: 44px; }
  .btn-icon { width: 34px; height: 34px; }

  .inline-2, .radio-row { grid-template-columns: 1fr; flex-direction: column; }
  .tabs3 { grid-template-columns: 1fr; }
  .tab3 { border-right: 0; border-bottom: 1px solid var(--line); }
  .samples { grid-template-columns: repeat(2, 1fr); }
  .form-foot { flex-wrap: wrap; padding: 14px 16px; }
  .form-foot .btn { width: 100%; }

  /* v3.0 局部重绘面板 */
  .ip-stage { border-radius: 8px; }
  .ip-tool { height: 32px; padding: 0 11px; }
  .ipv-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .dx-list { max-height: none; }
  .rev-kv { grid-template-columns: 1fr; }
  .rev-k { grid-row: auto; padding-top: 0; }
}

/* ══════════════════════════════════════════════════════
   8. 小屏精修（≤560）与横屏
   ══════════════════════════════════════════════════════ */
@media (max-width: 560px) {
  .hero h1 { font-size: 27px; }
  .hero-stats { gap: 12px 20px; }
  .hstat .v { font-size: 19px; }
  .hcard { flex-basis: 80%; }
  .studio-hi { font-size: 19px; }
  .proj-grid { gap: 9px; }
  .proj-meta > .dot2 { display: none; }
  .admin-tabs .tab { padding: 8px 10px; font-size: 12px; }
  .gate-views { overflow-x: auto; flex-wrap: nowrap; }
  .gate-views .gv { flex: 0 0 auto; padding: 6px 10px 8px; }
  .hwrap { width: calc(100% - 24px); }
}

@media (max-height: 480px) and (orientation: landscape) {
  .hero { padding-top: 22px; }
  .hero-vis { display: none; }
  .sm-tabs { height: calc(50px + env(safe-area-inset-bottom)); }
  .studio { padding-bottom: calc(50px + env(safe-area-inset-bottom)); }
  .wb-mbar { height: 46px; }
  .player-stage { padding: 4px; }
}

/* ══════════════════════════════════════════════════════
   9. 触屏（无 hover）：取消位移与阴影粘滞
   ══════════════════════════════════════════════════════ */
@media (hover: none) {
  .skill:hover, .mcard:hover, .feat:hover, .show:hover,
  .proj-card:hover, .scr-card:hover, .ast-card:hover {
    transform: none;
    box-shadow: none;
  }
  .skill:hover { border-color: rgba(28, 28, 26, .09); }
  .proj-card:hover { border-color: rgba(28, 28, 26, .09); }
  .scr-card:hover, .ast-card:hover { border-color: rgba(28, 28, 26, .1); }
  .skill:hover .skill-cover img, .show:hover .show-cover img { transform: none; }
  .skill:hover .skill-cta { color: var(--ink-3); }
  .proj-card:hover .proj-del,
  .scr-card:hover .scr-top .proj-del,
  .ast-card:hover .proj-del { opacity: 1; }
  .asset-card:hover { background: transparent; border-color: transparent; }
  .asset-card:hover .asset-edit { opacity: 1; }
  .clip-row:hover { background: transparent; }
  .clip-row:hover .clip-acts { opacity: 1; }
}