/* ============================================================
   耳机笔记 mobile.css — 移动端增强样式（v0.5.4）
   原则：
   1. 只允许在媒体查询内覆盖，桌面端（>900px）不受影响；
   2. 只新增样式，不修改 desktop.css 基线；
   3. 页面通过 mobile.css?v=0.5.4-m1 引用，可单独缓存/回滚。
   ============================================================ */

/* ---------- 触控基础（仅触屏设备生效） ---------- */
@media (hover: none), (pointer: coarse) {
  a,
  button,
  input,
  select,
  textarea,
  .srp-star,
  .tag-chip,
  .brand-list__chip,
  .filter-dropdown__trigger,
  .label-picker-btn,
  .product-card,
  .prod-card {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
}

/* ---------- P0：产品库网格（修复 1226px 横向撑开） ---------- */
/* 仅在 1280px 以下生效，1440px 桌面端保持原规则不变 */
@media (max-width: 1280px) {
  .products-grid {
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  }
  .products-grid .prod-card {
    min-width: 0;
  }
}

/* 产品库：手机竖屏双列 */
@media (max-width: 640px) {
  .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 0 12px 96px;
  }
  .prod-card {
    min-width: 0;
  }
  .prod-card .pc-img::before {
    width: min(160px, 42vw);
    height: min(160px, 42vw);
  }
  .pc-body {
    padding: 8px 9px 10px;
    gap: 2px;
  }
  .pc-brand {
    font-size: 9px;
    letter-spacing: 0.5px;
  }
  .pc-name {
    font-size: 13px;
  }
  .pc-name-cn {
    font-size: 10px;
  }
  .pc-meta {
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
    padding-top: 6px;
  }
  .pc-rating {
    font-size: 10px;
    gap: 3px;
  }
  .pc-stars {
    font-size: 9px;
  }
  .pc-score {
    font-size: 10px;
  }
  .pc-price {
    font-size: 14px;
  }
  .pc-footer {
    flex-wrap: wrap;
    gap: 4px;
    font-size: 9px;
  }
  .pc-labels {
    gap: 3px;
  }
  .pc-label {
    font-size: 8px;
    padding: 2px 5px;
  }
}
@media (max-width: 360px) {
  /* 320px 档：评分/价格、评价/标记信息上下排列 */
  .prod-card .pc-img::before {
    width: 110px;
    height: 110px;
  }
  .pc-name {
    font-size: 12px;
  }
  .pc-meta {
    flex-direction: column;
    align-items: flex-start;
  }
  .pc-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- P0：首页瀑布流（修复 436px 最小宽度） ---------- */
@media (max-width: 480px) {
  .masonry {
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 10px 10px calc(36px + env(safe-area-inset-bottom, 0px));
  }
  .masonry-item,
  .product-card,
  .product-card__body {
    min-width: 0;
  }
  /* 双列卡片：压缩内边距与字号，避免 320px 下互相挤压 */
  .product-card__body {
    padding: 8px 9px 10px;
  }
  .product-card__brand {
    font-size: 9px;
    letter-spacing: 0.5px;
  }
  .product-card__name {
    font-size: 12px;
  }
  .product-card__slogan {
    font-size: 10px;
  }
  .product-card__meta {
    flex-wrap: wrap;
    gap: 4px;
  }
  .product-card__price {
    font-size: 14px;
  }
  .product-card__rating {
    font-size: 10px;
    gap: 3px;
  }
}
@media (max-width: 360px) {
  /* 320px 档：价格和评分上下排列，避免一行放不下 */
  .product-card__meta {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- P0：移动端导航（搜索框换到第二行，保留全部功能） ---------- */
@media (max-width: 640px) {
  .nav {
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 10px 14px;
  }
  .nav-search {
    order: 3;
    flex: 1 1 100%;
    max-width: none;
    margin: 2px 0 0;
    padding: 9px 12px;
  }
  .nav-search input {
    font-size: 16px; /* 防止 iOS 聚焦自动放大 */
  }
  .nav-links {
    margin-left: auto;
    gap: 6px;
  }
  .nav-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 7px 10px;
    font-size: 12px;
  }
  .nav-links a.avatar-btn {
    width: 38px;
    height: 38px;
    min-height: 38px;
  }
}

@media (max-width: 360px) {
  .nav {
    padding: 10px 12px;
  }
  .nav-brand {
    font-size: 16px;
    letter-spacing: 0;
  }
  .nav-links a {
    padding: 6px 8px;
    font-size: 11px;
  }
}

/* ---------- 品牌标签：移动端改为单行横滑 ---------- */
@media (max-width: 768px) {
  .brand-list {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 14px;
    gap: 6px;
    scrollbar-width: none;
  }
  .brand-list::-webkit-scrollbar {
    display: none;
  }
  .brand-list__chip {
    flex: 0 0 auto;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
  }
}

/* ---------- 移动端表单：16px 防 iOS 聚焦缩放 ---------- */
@media (max-width: 640px) {
  .form-input,
  .field-input,
  .ph-search,
  textarea.wide,
  .ph-controls select {
    font-size: 16px;
  }
  .sc-viewport {
    height: 140px;
  }

  .centered-form {
    max-width: 100%;
    padding: 16px 14px 72px;
  }
  .form-card {
    padding: 18px 14px;
  }
  .login-hero {
    margin-bottom: 24px;
  }
  .login-hero h2 {
    font-size: 22px;
  }
  .profile-card {
    padding: 20px 16px;
  }
}

/* ---------- 触控目标：核心控件不小于 44px 高度 ---------- */
@media (max-width: 640px) {
  .filter-dropdown__trigger {
    min-height: 38px;
    padding: 7px 10px;
  }
  .tag-chip {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 8px 12px;
  }
  .label-picker {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
  }
  .label-picker-btn {
    min-height: 36px;
    padding: 6px 4px;
    font-size: 11px;
    justify-content: center;
    gap: 3px;
  }
  .srp-stars {
    gap: 2px;
  }
  .srp-stars .srp-star {
    min-width: 0;
    min-height: 44px;
    padding: 0 2px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .srp-fine {
    gap: 8px;
  }
  .srp-fine button {
    width: 44px;
    height: 44px;
    font-size: 18px;
    border-radius: 12px;
  }
  input[type="range"] {
    min-height: 44px;
  }
  .btn-primary,
  .btn-outline,
  .btn-ghost,
  .form-actions .btn {
    min-height: 46px;
  }
  .btn-mark,
  .btn-back {
    min-height: 48px;
  }
  .submit-section .submit-btn,
  #submit-btn {
    min-height: 52px;
    font-size: 16px;
  }
}

/* ---------- 底部固定元素：safe-area + 不遮挡内容 ---------- */
@media (max-width: 640px) {
  .theme-toggle {
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    right: calc(16px + env(safe-area-inset-right, 0px));
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
  .add-fab {
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    right: calc(16px + env(safe-area-inset-right, 0px));
    width: 50px;
    height: 50px;
    font-size: 26px;
  }
  /* 产品库给右下角 FAB 预留空间 */
  .products-grid {
    padding-bottom: 96px;
  }
  .main {
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------- 移动端文字对比度（仅小屏） ---------- */
@media (max-width: 640px) {
  [data-theme="dark"] {
    --text2: #a6a6b4;
    --text3: #8a8a99;
  }
  [data-theme="light"] {
    --text2: #50506a;
    --text3: #74748e;
  }
}

/* ---------- 小屏细节 ---------- */
@media (max-width: 480px) {
  .product-list .prod-card {
    min-width: 0;
  }
  .product-list .prod-card .pc-name {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 380px) {
  /* 375px 档位：星级评分换行，避免整页被撑宽 */
  .star-rating-precise {
    flex-wrap: wrap;
    gap: 4px 8px;
  }
  .srp-value {
    min-width: 0;
    font-size: 26px;
  }
  .srp-stars .srp-star {
    font-size: 34px;
  }
}

@media (max-width: 360px) {
  .products-hero h1 {
    font-size: 28px;
  }
  .specs-grid {
    grid-template-columns: 1fr;
  }
  .product-info-row,
  .new-brand-form .row {
    grid-template-columns: 1fr;
  }
  /* 320px 下星级评分不把整页撑宽 */
  .star-rating-precise {
    flex-wrap: wrap;
    gap: 4px 8px;
  }
  .srp-value {
    min-width: 0;
    font-size: 26px;
  }
  .srp-stars .srp-star {
    font-size: 32px;
  }
}

/* ---------- 产品库分页：小屏可换行 ---------- */
@media (max-width: 480px) {
  .pagination-bar {
    max-width: calc(100vw - 28px);
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }
  .pg-pages {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
  }
  .pg-btn {
    height: 40px;
    padding: 0 10px;
  }
  .pg-btn--num {
    min-width: 40px;
  }
}

/* ---------- 固定提交栏：写笔记页提交按钮吸底 ---------- */
@media (max-width: 640px) {
  .submit-section {
    position: sticky;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    z-index: 20;
    margin-bottom: 8px;
  }
  .submit-section .submit-btn {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  }
}

/* ---------- 移动端分享卡片弹窗响应式 (OpenDesign Mobile Drawer) ---------- */
@media (max-width: 820px) {
  .od-share-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .od-share-dialog {
    width: 100%;
    max-width: none;
    max-height: 92vh;
    border-radius: 20px 20px 0 0;
    animation: odModalSheetUp 0.3s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
  }
  @keyframes odModalSheetUp {
    from { transform: translateY(100%); opacity: 0.6; }
    to { transform: translateY(0); opacity: 1; }
  }
  .od-share-body {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
  .od-preview-area {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 16px 14px;
    max-height: 50vh;
  }
  .od-controls-area {
    padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px));
    gap: 16px;
  }
  .od-card-mount {
    max-width: 380px;
  }
  .od-template-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .od-theme-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .sc-card-inner {
    padding: 22px 18px 20px;
    gap: 14px;
  }
  .sc-spectrum-grid {
    grid-template-columns: 1fr;
  }
  .sc-smartisan-title,
  .sc-studio-title {
    font-size: 19px !important;
  }
  .sc-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .sc-footer-right {
    align-self: center;
  }
  .od-actions-group {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------- 移动端频响模块与缺省态适配 ---------- */
@media (max-width: 640px) {
  .fr-section {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .fr-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .fr-meta {
    flex-wrap: wrap;
    font-size: 11px;
    gap: 6px;
  }
  .fr-card {
    padding: 12px 10px 10px;
    border-radius: 14px;
  }
  .fr-chart-wrap {
    height: 190px;
  }
  .fr-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-size: 10px;
  }
  .fr-empty-card {
    padding: 24px 16px 20px;
    border-radius: 14px;
    gap: 12px;
  }
  .fr-empty-notice {
    font-size: 12px;
  }
  .fr-empty-actions {
    flex-direction: column;
    width: 100%;
    gap: 8px;
  }
  .fr-ext-btn {
    width: 100%;
    justify-content: center;
    padding: 9px 14px;
    font-size: 12px;
  }
}

/* ---------- 移动端网站底部声明适配 ---------- */
@media (max-width: 640px) {
  .site-footer {
    margin-top: 40px;
    padding: 28px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  }
  .site-footer__inner {
    gap: 16px;
  }
  .site-footer__main {
    flex-direction: column;
    gap: 20px;
  }
  .site-footer__cols {
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }
  .site-footer__bottom {
    font-size: 10.5px;
  }
}

/* ---------- 导航搜索联想面板：小屏贴满搜索框宽度 ---------- */
@media (max-width: 640px) {
  .nav-search-suggest {
    left: 0;
    right: 0;
    min-width: 0;
  }
  .nav-search-suggest .nss-inner {
    max-height: 55vh;
  }
  .nss-meta {
    display: none; /* 小屏收起右侧评分，保主标题完整 */
  }
}

/* ---------- 搜索页 search.html：小屏响应式 ---------- */
@media (max-width: 640px) {
  .search-hero {
    padding: 26px 14px 16px;
  }
  .search-hero h1 {
    font-size: 28px;
  }
  .sh-input {
    font-size: 16px; /* 防 iOS 聚焦自动放大 */
  }
  .sh-clear {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
  .schips {
    gap: 6px;
  }
  .schip {
    min-height: 36px;
    padding: 6px 12px;
  }
  .search-sections {
    padding: 4px 12px 48px;
    max-width: 100%;
    min-width: 0;
  }
  .sec-head,
  .brand-grid,
  .brand-card,
  .rev-list,
  .rev-card {
    min-width: 0;
    max-width: 100%;
  }
  .sec-head h2 {
    font-size: 15px;
  }
  .brand-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .rv-top {
    flex-wrap: wrap;
  }
}






/* ============ 灵感笔记（快速笔记）触屏与窄屏适配 2026-09 ============ */
@media (hover: none), (pointer: coarse) {
  .qne-star { font-size: 32px; padding: 2px; }
  .qne-img-remove { width: 26px; height: 26px; font-size: 13px; }
  .qne-close, .qne-unlink, .qne-banner-dismiss { min-width: 32px; min-height: 32px; }
}
@media (max-width: 640px) {
  .nav-quick-btn { padding: 6px 12px; font-size: 12px; }
  .qne-overlay { padding: 10px; align-items: flex-end; }
  .qne-modal {
    width: 100%;
    max-height: 92vh;
    border-radius: 14px 14px 0 0;
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .qne-img-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .qne-actions { flex-direction: column-reverse; }
}
@media (max-width: 360px) {
  .nav-quick-btn { padding: 5px 10px; font-size: 11px; }
  .qne-img-grid { grid-template-columns: repeat(3, 1fr); }
}