/* ============================================================================
 *  盛航云 · 响应式补丁 responsive.css
 *  ----------------------------------------------------------------------------
 *  加载顺序：必须放在 style.css / console.css / admin.css 之后（最后加载）。
 *
 *  为什么单独一个文件：
 *    style.css 已经 69KB、18 个断点，直接在里改容易碰坏既有设计。
 *    这里只做"补"：补漏掉的断点、补被覆盖的规则、补全局兜底。
 *
 *  解决的核心问题（实测 @390px）：
 *    ① 顶栏「登录/免费注册」把页面顶出 36px 横向滚动
 *       原因：≤540px 那条 .top-actions .btn-primary{display:none}
 *             被 .top-actions [data-authbar] .btn-sm{display:inline-flex}
 *             以更高优先级覆盖了，注册按钮根本没被隐藏
 *    ② html 元素没有 overflow-x 兜底（只有 body 有），一有超宽元素就整页横滚
 *    ③ ≤700px 时 .tbl-wrap{display:none} 把整张表藏掉，数据直接看不见
 *    ④ 网格列数写死，窄屏挤压、宽屏留白
 *    ⑤ 字号写死 px，大屏偏小、小屏偏大
 * ==========================================================================*/

/* ============================================================================
 *  一、全局兜底：任何情况下都不该出现整页横向滚动
 * ==========================================================================*/
html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;   /* 防 iOS 横屏自动放大字号 */
  text-size-adjust: 100%;
}
html, body { max-width: 100%; }

/* 媒体元素永远不超出父容器 */
img, video, canvas, iframe, embed, object { max-width: 100%; }
img, video { height: auto; }

/* 长串（URL、密钥、错误堆栈）必须在容器内换行，否则撑破布局 */
pre, code, .mono, .kv-v, .log {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 表格自身不设最小宽度，交给滚动容器 */
table { max-width: 100%; }

/* ============================================================================
 *  二、顶栏：跟着宽度逐级收缩
 * ==========================================================================*/
.topbar-inner { min-width: 0; }
.top-actions   { flex-shrink: 0; min-width: 0; }

/* 笔记本 —— 导航收紧一点 */
@media (max-width: 1060px) {
  .topbar-inner { gap: 10px; }
  .nav a { padding: 8px 9px; font-size: 14px; }
}

/* 平板 —— 导航转抽屉，动作区靠右 */
@media (max-width: 860px) {
  .topbar-inner { position: relative; }
  .top-actions  { margin-left: auto; }
}

/* ★ 关键修复：≤600px 必须把「免费注册」真的隐藏掉（加 !important 压过 inline-flex） */
@media (max-width: 600px) {
  .top-actions [data-authbar] .btn-primary { display: none !important; }
  .top-actions [data-authbar] .btn-sm {
    height: 34px; padding: 0 12px; font-size: 12.5px;
  }
  .logo small { display: none; }   /* 英文副标题在小屏是纯噪音 */
}

/* 手机 —— 再瘦一圈 */
@media (max-width: 420px) {
  .topbar-inner { gap: 6px; }
  .logo-badge { width: 28px; height: 28px; border-radius: 8px; }
  .logo-badge svg { width: 17px; height: 17px; }
  .logo b { font-size: 13.5px; }
  .top-actions [data-authbar] .btn-sm {
    height: 32px; padding: 0 10px; font-size: 12px;
  }
  .menu-toggle { width: 32px; height: 32px; }
}

/* 极窄（老安卓 360 / 折叠屏外屏 280）—— 只留汉堡 + 头像/登录 */
@media (max-width: 360px) {
  .logo b { font-size: 12.5px; letter-spacing: 0; }
  .logo { gap: 6px; }
  .top-actions [data-authbar] { gap: 6px; }
  .top-actions [data-authbar] .btn-sm { height: 30px; padding: 0 8px; font-size: 11.5px; }
  .wrap { padding: 0 12px; }
}

/* ============================================================================
 *  三、表格：一律可横向滚动，绝不隐藏数据
 * ==========================================================================*/
.tbl-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;   /* 横滑到底不带动整页 */
}

/* 原来 ≤700px 会把整张表 display:none —— 那是"看不见数据"，不是适配 */
@media (max-width: 700px) {
  .tbl-wrap { display: block !important; }
  table.tbl { min-width: 560px; }        /* 给个下限，否则列被压成一条线 */
  .tbl th, .tbl td { white-space: nowrap; }
  .tbl th:first-child, .tbl td:first-child { position: sticky; left: 0; background: #fff; z-index: 1; }
  /* 上面的 sticky 让第一列在横滑时保持可见，读表格不用来回对行 */
  .tbl thead th:first-child { background: #fafcff; }
}

/* 价格表等"裸表"（直接放在带 padding 的卡片里） */
.cbody-card { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cbody-card > table.tbl { margin: 0; }

/* ============================================================================
 *  四、网格：auto-fit 取代写死列数
 * ==========================================================================*/
.quick-entry  { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stat-grid    { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.footer-top   { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.card-grid,
.prod-grid,
.g3           { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.g2           { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }

/* 详情页 / 控制台的「主内容 + 侧栏」 */
@media (max-width: 1060px) {
  .detail-grid, .console-wrap { grid-template-columns: 1fr !important; }
  .order-card { position: static !important; }
}

/* ============================================================================
 *  四之二、首屏内容贴边 —— .hero-inner 把左右内边距归零了
 *  ----------------------------------------------------------------------------
 *  style.css 里：
 *    .wrap      { padding: 0 clamp(14px,2.4vw,28px) }     ← 有左右留白
 *    .hero-inner{ padding: clamp(46px,7vw,90px) 0 ... }   ← 简写把左右设成 0
 *  而首页的 DOM 是 <div class="wrap hero-inner"> —— 同一个元素，
 *  .hero-inner 写在后面就赢了，于是首屏文字一直贴着屏幕左右边缘。
 *  这里补回左右内边距。
 * ==========================================================================*/
.hero-inner {
  padding-left: clamp(14px, 2.4vw, 28px);
  padding-right: clamp(14px, 2.4vw, 28px);
}

/* 页面级 hero（产品详情等）同理 */
.page-hero .wrap { padding-left: clamp(14px, 2.4vw, 28px); padding-right: clamp(14px, 2.4vw, 28px); }

/* ============================================================================
 *  四之三、顶部「内部测试环境」横条：窄屏别挤成一团
 *  ----------------------------------------------------------------------------
 *  它是 JS 注入的，带 inline style（padding:7px 16px; font-size:12.5px），
 *  390px 下整句换行 + 按钮掉行，高度撑到 54px。
 * ==========================================================================*/
#testEnvBar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  line-height: 1.5;
}
#testEnvBar > b { white-space: nowrap; }

@media (max-width: 760px) {
  #testEnvBar {
    font-size: 11.5px !important;
    padding: 6px 10px !important;
    gap: 4px 8px;
  }
  /* 那句"数据和价格仅供联调验证"在小屏是次要信息，收窄成一行 */
  #testEnvBar { letter-spacing: 0 !important; }
}
@media (max-width: 480px) {
  #testEnvBar { font-size: 11px !important; padding: 5px 8px !important; }
  #testEnvBar > b { font-size: 11.5px; }
}

/* ============================================================================
 *  四之四、小屏压缩区块留白 —— 桌面 90px 的上下留白在手机上就是"一大片空"
 * ==========================================================================*/
@media (max-width: 760px) {
  .section { padding: clamp(26px, 6vw, 44px) 0 !important; }
  .sec-head { margin-bottom: clamp(14px, 3vw, 22px); }
  .sec-head p { font-size: 13px; }
}

/* ============================================================================
 *  五、字号：流式，大屏不虚、小屏不挤
 * ==========================================================================*/
.hero h1        { font-size: clamp(22px, 3.4vw, 44px); line-height: 1.24; }
.hero p.sub     { font-size: clamp(13.5px, 1.15vw, 18px); }
.sec-head .tt h2{ font-size: clamp(19px, 1.9vw, 28px); }
.cta h2         { font-size: clamp(17px, 2vw, 26px); }
.page-hero h1   { font-size: clamp(21px, 2.6vw, 34px); }

/* 段落最大宽度：超宽屏（2560+）一行字别拉到 2000px，读起来累 */
.hero p.sub, .sec-head p, .footer-top p { max-width: 68ch; }

/* ============================================================================
 *  六、超大屏（2K / 4K / 带鱼屏）：内容居中，不要无限拉宽
 * ==========================================================================*/
@media (min-width: 1920px) {
  .wrap { max-width: 1560px; }
  body  { font-size: 15px; }
}
@media (min-width: 2560px) {
  .wrap { max-width: 1720px; }
  body  { font-size: 15.5px; }
}

/* ============================================================================
 *  七、触屏设备：按钮和链接给足点击区域
 * ==========================================================================*/
@media (hover: none) and (pointer: coarse) {
  .btn            { min-height: 40px; }
  .btn-sm         { min-height: 36px; }
  .nav a          { padding: 12px 14px; }
  .tbl-wrap       { cursor: grab; }
}

/* ============================================================================
 *  八、控制台 / 运营后台：只修顶栏细节，侧栏交给原 CSS 的抽屉逻辑
 *  ----------------------------------------------------------------------------
 *  ★ 踩过的坑：一开始我在这里把 .ad-side / .cs-side 改成 position:static 想做
 *    "横条导航"，结果 admin.css(1000px) 和 console.css(900px) 本来就已经是
 *    off-canvas 抽屉（transform:translateX(-100%) + .open 展开），
 *    被我一改，侧栏变成静态但仍然带着 height:calc(100vh - head)，
 *    于是内容上方凭空多出 250px 空条。
 *    → 这里只调顶栏，不动侧栏。
 * ==========================================================================*/

/* 后台顶栏：标题不换行、按钮收紧 */
@media (max-width: 1000px) {
  .ad-head { gap: 10px; padding: 0 12px; }
  .ad-logo { white-space: nowrap; }
  .ad-logo span { white-space: nowrap; }
  .ad-title { min-width: 0; }
  .ad-title h1 {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: 16px;
  }
  .ad-head-right { gap: 7px; }
}

/* 控制台顶栏：同理 */
@media (max-width: 900px) {
  .cs-head { gap: 10px; padding: 0 12px; }
  .cs-logo span { white-space: nowrap; }
  .cs-title { min-width: 0; }
  .cs-title h1 {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: 17px;
  }
}

/* 手机：顶栏只留 LOGO 图 + 汉堡 + 右侧图标，文字全收 */
@media (max-width: 600px) {
  .ad-head, .cs-head { padding: 0 9px; gap: 7px; }
  .ad-logo span, .cs-logo > span { display: none; }   /* 只留 logo 图形 */
  .ad-env { display: none; }
  .cs-tag { display: none; }
  .ad-title h1, .cs-title h1 { font-size: 15px; }
  .ad-head-right .btn-sm, .cs-head-right .btn-sm { padding: 0 9px; }
  /* 侧栏抽屉宽度别超过屏幕 */
  .ad-side, .cs-side { width: min(250px, 82vw) !important; flex-basis: min(250px, 82vw) !important; }
}

@media (max-width: 400px) {
  .ad-head, .cs-head { padding: 0 7px; gap: 5px; }
  .ad-title h1, .cs-title h1 { font-size: 14px; }
}

/* ============================================================================
 *  九、打印：单据打印不要被响应式样式干扰
 * ==========================================================================*/
@media print {
  html, body { overflow: visible !important; }
  .topbar, .cs-side, .ad-side, .cs-head, .ad-head, .top-actions, .menu-toggle { display: none !important; }
}