/* 移动端设计规范：以 app.css 为基线，仅覆盖布局和触控行为。 */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-tap-highlight-color:transparent}
button,a,input,select,textarea,label.check{touch-action:manipulation}
button{-webkit-user-select:none;user-select:none}
.hero-subline{color:rgba(26,26,26,.72)}

@media(max-width:719px){
  :root{
    /* 4/8px 间距阶梯，48px 触控下限；控件视觉尺寸不依赖伪元素命中区。 */
    --mobile-space-1:4px;--mobile-space-2:8px;--mobile-space-3:12px;
    --mobile-space-4:16px;--mobile-space-6:24px;--mobile-space-8:32px;
    --mobile-control:48px;--mobile-target:48px;--mobile-radius:16px;
    --mobile-surface:#fff;--mobile-muted:#f0eef3;--mobile-border:rgba(26,26,26,.13);
    --mobile-text:var(--ink);--mobile-secondary:var(--ink-2);--mobile-caption:var(--ink-3);
    --pad-x:16px;--topbar-height:150px; /* 静态兜底；实际高度由 app.js ResizeObserver 写入（两行≈104 / 三行≈148） */
  }
  html{scroll-padding-top:calc(160px + env(safe-area-inset-top))}
  /* 两层 Header + 一体化搜索栏（信息架构：OE 搜索=主任务，VIN 识别/车型目录=次级入口）。
     行1 品牌 + 文字登录；行2 全局搜索入口（搜索面板自带真实搜索栏，故隐藏避免重复）；
     行3 VIN 查询 / 车型目录 文字链接，space-between 两端展开。
     顶栏实际高度经 JS 写入 --topbar-height（随行数变化），toast 依此避让。 */
  .intro-splash{display:none}
  .drawer-backdrop,.modal-backdrop{backdrop-filter:none;-webkit-backdrop-filter:none}
  .topbar{min-height:0;flex-wrap:wrap;row-gap:10px;padding:calc(10px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));overflow:visible;background:rgba(247,248,250,.97)}
  .modes,.top-spacer{display:none}
  /* 行1：品牌 + 文字登录（去边框药丸，消除 pill-in-pill 的模板感） */
  .topbar .brand{order:0;flex:1 1 auto;display:inline-flex!important;align-items:center;gap:8px;min-width:0;min-height:var(--mobile-target);text-decoration:none}
  .topbar .brand img{width:clamp(120px,40vw,168px);height:auto;max-height:44px;object-fit:contain;object-position:left center;display:block;flex:none}
  .topbar .user-pill{order:1;min-width:0;max-width:60%;min-height:var(--mobile-target);padding:0 0 0 8px;border:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;font-size:13px;color:var(--ink);gap:6px;justify-content:flex-end}
  #user-pill-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
  .user-pill .badge-plan{border:0;padding:0;opacity:.55}
  .user-pill .quota-tag{border-left:0;padding-left:0}
  /* 行2：全局搜索入口（白底 12px 圆角，主任务视觉权重最高） */
  .topbar .header-search{order:2;flex:1 1 100%;display:inline-flex!important;align-items:center;gap:10px;min-height:var(--mobile-control);padding:0 14px;background:var(--mobile-surface);border:1px solid var(--mobile-border);border-radius:12px;color:var(--mobile-secondary);font-family:inherit;text-align:left;cursor:pointer}
  .header-search .hs-ic{display:grid;place-items:center;flex:none}
  .header-search .hs-ph{font-size:14px;color:var(--mobile-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .header-search:active{background:#f6f6f8}
  /* 搜索面板已有一体化搜索栏：隐藏顶栏入口避免同屏双搜索框（:has 不支持时仅表现为重复入口，不破坏可用性） */
  body:has(#panel-search.active) .topbar .header-search{display:none!important}
  /* 行3：次级入口文字链接，space-between 两端展开 */
  .topbar .quick-nav{order:3;flex:1 1 100%;display:flex!important;justify-content:space-between;gap:12px}
  .quick-link{display:inline-flex;align-items:center;gap:7px;min-height:var(--mobile-target);padding:0 2px;border:0;background:none;color:var(--mobile-secondary);font-size:14px;font-weight:500;font-family:inherit;cursor:pointer;transition:color 200ms}
  .quick-link .ic{width:16px;height:16px}
  .quick-link.active{color:var(--ink);font-weight:650}
  /* 搜索面板首屏：隐藏品牌巨字层，让真实搜索栏紧随 Header（移动端工具化首屏） */
  #search-hero .hero-giant,#search-hero .hero-headline,#search-hero .hero-subline{display:none}
  #search-hero .hero-scene{display:none}
  #search-hero .search-functional-layer{padding-top:8px;padding-bottom:8px}
  .search-functional-layer{padding:24px var(--pad-x) 20px}
  .hero-giant{font-size:clamp(2.6rem,12vw,3.8rem);margin-bottom:14px}
  .hero-headline{font-size:20px;line-height:1.3}
  .hero-subline{font-size:14px;line-height:1.55;margin-top:8px}
  .catalog-hero{padding-top:24px}.catalog-hero .hero-giant{font-size:clamp(2.5rem,11vw,3.5rem)}
  .hero-search-wrap{margin-top:12px}
  .hero-search-bar{gap:8px;border-radius:var(--mobile-radius);padding:8px;box-shadow:0 8px 24px rgba(20,18,28,.07)}
  .hero-search-bar .search-kinds{width:100%;max-width:100%;justify-content:center}
  .hero-search-bar .search-kinds button{flex:1 1 0;justify-content:center;min-width:0;min-height:48px;height:48px;padding:0 8px}
  .field-hero{font-size:16px;min-height:var(--mobile-control);text-align:left;padding:0 8px}
  .field-hero::placeholder{font-size:14px;color:var(--ink-3)}
  .hero-search-icon{margin-left:8px}
  .btn-hero,.hero-section.has-results .btn-hero{width:100%;min-height:var(--mobile-control);height:var(--mobile-control);justify-content:center;border-radius:12px}
  .hero-section.has-results .hero-search-bar{padding:8px;min-height:0}
  .search-disclosure{width:100%;margin-top:12px}.disclosure-trigger{min-height:var(--mobile-target);padding:8px 16px}
  .disclosure-body{padding:16px;border-radius:var(--mobile-radius)}
  .disclosure-checks{gap:8px;padding-bottom:0;align-items:stretch}
  label.check{min-height:var(--mobile-target);padding:0 8px;gap:10px}
  label.check input{width:18px;height:18px;flex:none}
  .hero-hint{font-size:12px;line-height:1.5}
  .state-box{padding:24px 16px}.state-box.dashed{margin:12px auto}
  .state-box.error>.ic{width:44px;height:44px;padding:11px;margin-bottom:12px}
  .example-row{margin-top:16px}.example-chip{min-height:var(--mobile-target);padding:8px 12px}
  .card{border-radius:var(--mobile-radius)}.card-head{padding:16px;gap:8px}.card-body{padding:16px}
  .card-title{font-size:17px}.sup-filter{min-width:0;width:100%;margin-left:0;flex-wrap:wrap}
  .sup-filter .combo{min-width:0;flex:1 1 130px}.sup-filter .combo[style]{min-width:0!important}
  .cat-controls,.veh-bar,.cat-body{width:calc(100% - 2 * var(--pad-x))}
  .cat-controls{gap:12px;margin-top:16px;padding:16px;border-radius:var(--mobile-radius)}
  .cat-controls .combo-field{flex:0 0 auto;min-width:0;width:100%}
  .cat-controls .btn{width:100%;min-height:var(--mobile-control)}
  .seg{display:flex;width:100%;min-width:0;padding:4px;gap:2px}.seg button{flex:1 1 0;min-width:0;min-height:48px;padding:0 4px;font-size:12px;justify-content:center;gap:4px}
  .veh-bar{gap:8px;padding:12px 16px}.veh-bar-name{flex:1 1 55%;overflow-wrap:anywhere}
  .combo-input,.field,.filter-bar select{font-size:16px;min-height:var(--mobile-control)}
  .combo-clear{right:2px;width:48px;height:48px}
  .combo-item{min-height:var(--mobile-target);overflow-wrap:anywhere}
  .combo-list,.live-list{max-height:min(320px,46vh);max-height:min(320px,46dvh)}
  .live-item{min-height:var(--mobile-target);padding:10px 12px;min-width:0}
  .live-num,.live-name{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .filter-bar{gap:12px;padding:16px}.filter-bar .fitem{min-width:0;flex:1 1 100%}
  .tree-row{min-height:var(--mobile-target)}.tree-name{min-width:0;overflow-wrap:anywhere}
  .tree-tw{width:48px;height:48px;display:grid;place-items:center;margin:-5px 0 -5px -8px}
  .result-stage .search-kinds,#vin-result .search-kinds{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);scroll-padding-inline:28px;padding-right:28px}
  .search-kinds button,.btn,.pg-btn{min-height:var(--mobile-target)}
  .tbl tr.row-link{grid-template-columns:64px minmax(0,1fr);gap:4px 12px;padding:16px;transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s cubic-bezier(.16,1,.3,1)}
  .tbl tr.row-link:active{transform:scale(.985);box-shadow:0 2px 10px rgba(26,26,26,.08)}
  .tbl tr.row-link .td-img{grid-row:1 / span 3;align-self:start;padding:0}
  .tbl tr.row-link .td-name,.tbl tr.row-link .td-cri{grid-column:2;min-width:0}
  .tbl tr.row-link .td-op{grid-column:1 / -1;margin-top:8px}
  .tbl tr.row-link td:not(.td-img):not(.td-op){min-width:0;overflow-wrap:anywhere}
  .tbl tr.row-link .td-cri{color:var(--mobile-caption)}
  .tbl tr:not(.row-link){overflow-wrap:anywhere}
  .art-nr{font-size:14px}.chip{max-width:100%}
  .drawer{height:100vh;height:100dvh;padding-bottom:0}
  .drawer-head{padding-top:calc(16px + env(safe-area-inset-top));padding-left:16px;padding-right:16px}
  .drawer-top{gap:12px;min-width:0}.drawer-img{width:72px;height:72px}.drawer-nr{gap:4px}.drawer-nr .nr{font-size:18px;min-width:0;flex:1 1 100%;overflow-wrap:anywhere}
  .drawer-name,.drawer-brand{overflow-wrap:anywhere}
  .drawer-tabs{margin-top:12px}
  /* 页签触控宽度 ≥48px：文字窄的页签（概览/附件）靠实体左右内边距补足，不依赖伪元素 */
  .dtab{padding:10px 10px;min-height:var(--mobile-target);min-width:48px}
  /* 抽屉正文内的行内链接（外链/跳转件号）：实体热区扩到 ≥44px，负外边距抵消布局占位 */
  .kv .linklike,.kv .v a{display:inline-flex;align-items:center;padding:12px 8px;margin:-12px -8px}
  /* 适用车型行：元信息（乘用车 · N 个适配版本）独立成行，避免与车名挤压换行 */
  .app-model .cnt{display:block;margin-left:0;margin-top:2px}
  .drawer-body{padding:20px 16px calc(32px + env(safe-area-inset-bottom))}
  .kv-grid,.vin-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
  .kv,.vin-kv{min-width:0;overflow-wrap:anywhere}
  .modal-backdrop{padding:0;align-items:flex-end}
  .modal{width:100%!important;max-width:100%;border-radius:20px 20px 0 0;border-bottom:0;max-height:calc(100vh - env(safe-area-inset-top) - 16px);max-height:calc(100dvh - env(safe-area-inset-top) - 16px);animation:sheetUp .26s cubic-bezier(.16,1,.3,1);overscroll-behavior:contain}
  .modal::before{content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);width:38px;height:4px;border-radius:2px;background:rgba(26,26,26,.22);pointer-events:none}
  .modal-head{padding:18px 16px 14px}.modal-title{font-size:17px}.modal-body{padding:16px}
  .modal-body:last-child{padding-bottom:calc(18px + env(safe-area-inset-bottom))}
  .modal-foot{padding:12px 16px calc(12px + env(safe-area-inset-bottom));flex-wrap:wrap}
  .modal-foot .btn{flex:1 1 120px;min-height:var(--mobile-target)}
  .icon-btn,.key-eye,#btn-activate-license{min-width:48px;min-height:48px}
  .key-wrap .field{padding-right:52px}.key-eye{right:2px}
  #user-profile-view #in-license-code{min-width:0}
  #user-profile-view #in-license-code+button{flex:none}
  #toasts{left:16px;right:16px;max-width:none;top:calc(var(--topbar-height) + env(safe-area-inset-top) + 8px)}
  .toast{font-size:13px;padding:11px 13px}.foot-note{padding:0 16px}
  /* app.css 中更高优先级的 44px 规则在移动端统一提升到 48px */
  .skip-link{min-height:48px}
}
/* 720–768px 平板区间：布局沿用 ≤1023 规则，但属触控场景，控件统一补足 48×48px 命中区 */
@media(min-width:720px) and (max-width:768px){
  .skip-link{min-height:48px}
  .user-pill{min-height:48px}
  .mode{min-height:48px}
  .search-kinds button{min-height:48px}
  .field-hero{min-height:48px}
  .field{min-height:48px}
  .btn-hero,.hero-section.has-results .btn-hero{min-height:48px}
  .disclosure-trigger{min-height:48px}
  .example-chip{min-height:48px}
  label.check{min-height:48px;display:inline-flex;align-items:center}
  .btn{min-height:48px}
  .seg button{min-height:48px}
  .icon-btn{width:48px;height:48px}
  .key-eye{min-width:48px;min-height:48px}
  .dtab{min-height:48px;min-width:48px;padding:8px 10px}
  .pg-btn{min-width:48px;height:48px}
  .combo-item{min-height:48px}
  .live-item{min-height:48px}
  .tree-row{min-height:48px}
}
@keyframes sheetUp{from{opacity:.5;transform:translateY(28px)}to{opacity:1;transform:none}}
@media(max-width:400px){
  .mode{padding:0 10px}.hero-giant{font-size:clamp(2.4rem,12vw,3.3rem)}
  .drawer-img{width:64px;height:64px}.drawer-nr .nr{font-size:16px}
  .seg button{font-size:11px}.seg button .ic{width:13px;height:13px}
}
@media(prefers-reduced-motion:reduce){
  .modal{animation:none}.panel,.toast,.loading-rows .sk-row{animation:none}
  .search-disclosure .disclosure-body{animation:none}
  .mode,.btn,.btn-hero,.dtab,.search-kinds button{transition:none}
  .tbl tr.row-link{transition:none}
  .tbl tr.row-link:active{transform:none;box-shadow:none}
}