@charset "UTF-8";
/* ====================================================================
   96IDCtx 前台主题 · 响应式
   文件：assets/css/i9-responsive.css
   --------------------------------------------------------------------
   必需断点 : 1200 / 992 / 768 / 480（+ 1440 大屏档）
   说明     : 首页与区块的响应式已在 i9-home.css 内就近定义；
              本文件负责全局骨架（导航 / 页脚 / 内页头 / 容器）的断点收敛，
              并按「容器实际宽度」优先降列，避免站点外壳变宽后布局被挤坏。
   ==================================================================== */

/* ====================================================================
   1. 大屏 ≥ 1441px
   ==================================================================== */
@media (min-width: 1441px) {
  :root { --i9-container: 1280px; }
}

/* ====================================================================
   2. 头部优先级降级（按宽度预算逐级让位，任何一级都不覆盖导航）
   —— 预算：导航 7 项 ≈636px + 右侧全展开 ≈604px = 1240px，
      而容器上限只有 1160px —— 必然重叠，必须降级，
      不能指望"屏幕宽一点就好了"。
   ==================================================================== */
@media (max-width: 1400px) {
  .i9-header__inner { gap: 16px; }
  .i9-header__actions { gap: 12px; }
}

/* 第①级：搜索框收成图标（点击/聚焦展开为覆盖层，不推挤导航） */
@media (max-width: 1240px) {
  .i9-nav__link { padding: 0 10px; }
  .i9-header__inner { gap: 12px; }
  .i9-header__actions { gap: 10px; }
  .i9-header__actions .i9-searchbox {
    width: 32px;
    padding: 0;
    justify-content: center;
    background: none;
  }
  .i9-header__actions .i9-searchbox input { display: none; }
}

/* 第②级：隐藏用户名与控制台链接 */
@media (max-width: 1140px) {
  .i9-header__user,
  .i9-header__divider { display: none; }
  .i9-nav__link { padding: 0 9px; }
}

/* 第③级：隐藏注册按钮（移动端抽屉里仍可注册） */
@media (max-width: 1040px) {
  .i9-header__cta,
  .i9-header__actions .i9-btn { display: none; }
  .i9-nav__link { padding: 0 8px; }
}

/* 容器在中等屏放宽到满宽，给导航更多预算 */
@media (max-width: 1240px) {
  .i9-container { max-width: 100%; padding-inline: 20px; }
}

/* ====================================================================
   3. ≤992px：导航折叠为抽屉
   ==================================================================== */
@media (max-width: 992px) {
  :root {
    --i9-header-h: 56px;
    --i9-sec-py: 40px;
  }

  .i9-nav { display: none; }
  .i9-hamburger { display: flex; }
  .i9-mega { display: none; }
  /* 折叠态：右侧只留搜索图标 + 注册按钮 + 汉堡 */
  .i9-header__actions { margin-left: auto; gap: 10px; }
  .i9-header__actions .i9-searchbox input { display: none; }
  .i9-header__user,
  .i9-header__divider,
  .i9-header__link { display: none; }
  .i9-header__cta,
  .i9-header__actions .i9-btn { display: inline-flex; }

  .i9-pagehead { padding-block: 20px 16px; }
  .i9-pagehead__title { font-size: 26px; }

  .i9-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
  .i9-footer__brand { grid-column: 1 / -1; }
  .i9-footer__qr { grid-column: 1 / -1; }
}

/* ====================================================================
   4. ≤768px：手机
   ==================================================================== */
@media (max-width: 768px) {
  :root {
    --i9-sec-py: 32px;
    --i9-fs-hero: 26px;
    --i9-fs-h1: 22px;
    --i9-fs-h2: 19px;
    --i9-fs-h3: 17px;
  }

  .i9-container { padding-inline: 16px; }
  .i9-logo img, .i9-logo svg { height: 30px; }

  /* 内页头 */
  .i9-pagehead__row { flex-direction: column; gap: 12px; }
  .i9-pagehead__title { font-size: var(--i9-fs-h1); }
  .i9-pagehead__actions { width: 100%; }
  .i9-pagehead__actions .i9-btn { flex: 1 1 auto; }

  /* 区块头改为上下排列 */
  .i9-sec-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .i9-sec-head--center { align-items: center; }

  /* 卡片与网格统一单列 */
  .i9-grid--2, .i9-grid--3, .i9-grid--4, .i9-grid--5, .i9-grid--6 { grid-template-columns: minmax(0, 1fr); }
  .i9-split { grid-template-columns: minmax(0, 1fr); }
  .i9-split__aside { border-right: 0; border-bottom: 1px solid var(--i9-border-soft); }
  .i9-split__body { padding: 16px; }
  .i9-duo, .i9-duo--even { grid-template-columns: minmax(0, 1fr); }

  /* 表格横向滚动 */
  .i9-table { display: block; overflow-x: auto; white-space: nowrap; }

  /* 抽屉接近全屏 */
  .i9-drawer { width: min(92vw, 320px); }
  .i9-modal { max-width: none; }

  /* 页脚单列 */
  .i9-footer { padding-top: 28px; }
  .i9-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
  .i9-footer__bar { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* 移动端底部条启用 */
  .i9-mobile-bar { display: flex; }
  body.i9-site { padding-bottom: calc(54px + env(safe-area-inset-bottom, 0px)); }

  /* Toast 顶部铺满 */
  .i9-toast-stack { top: 12px; left: 12px; right: 12px; transform: none; align-items: stretch; }
  .i9-toast { max-width: none; }

  /* 按钮组纵向 */
  .i9-btn-group { flex-direction: column; align-items: stretch; width: 100%; }
  .i9-btn-group .i9-btn { width: 100%; }
}

/* ====================================================================
   5. ≤480px：小屏
   ==================================================================== */
@media (max-width: 480px) {
  :root { --i9-header-h: 52px; }
  .i9-container { padding-inline: 12px; }
  .i9-footer__main { grid-template-columns: minmax(0, 1fr); }
  .i9-pricecard__price { font-size: 18px; }
  .i9-stats__num { font-size: 22px; }
  .i9-mobile-bar__item { font-size: 10px; }

  .i9-logo img, .i9-logo svg { height: 28px; }
}

/* ====================================================================
   6. 容器查询增强：按主区真实宽度降列（对抗站点外壳吃宽度）
   ==================================================================== */
@supports (container-type: inline-size) {
  .i9-main { container-type: inline-size; container-name: i9-main; }

  @container i9-main (max-width: 1040px) {
    .i9-footer__main { grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, 1fr)); }
    .i9-footer__qr { grid-column: 1 / -1; }
  }
  @container i9-main (max-width: 880px) {
    .i9-duo, .i9-duo--even { grid-template-columns: minmax(0, 1fr); }
    .i9-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .i9-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @container i9-main (max-width: 660px) {
    .i9-grid--2, .i9-grid--3, .i9-grid--4 { grid-template-columns: minmax(0, 1fr); }
    .i9-footer__main { grid-template-columns: minmax(0, 1fr); }
  }
}

/* ====================================================================
   7. 横屏矮视口
   ==================================================================== */
@media (max-height: 480px) and (orientation: landscape) {
  .i9-mobile-bar { display: none; }
  body.i9-site { padding-bottom: 0; }
}

/* ====================================================================
   8. 高对比度
   ==================================================================== */
@media (prefers-contrast: more) {
  .i9-nav__link, .i9-prod__desc, .i9-text-sm { color: var(--i9-text-2); }
  .i9-card, .i9-feat, .i9-sol, .i9-pricecard { border-color: var(--i9-border); }
}


/* ====================================================================
   移动端 · 右侧悬浮条精简
   --------------------------------------------------------------------
   ≤992px 只保留「头像圆 + 回到顶部圆」，原来的竖条（5 个入口）下线：
     · 入口没有丢 —— 底部快捷条已有 首页/产品/活动/客服/QQ/我的
     · 竖条在手机上要占约 360px 高，挡内容且与底部快捷条功能重叠
   ==================================================================== */
@media (max-width: 992px) {
  .i9-float {
    right: 10px;
    bottom: 74px;          /* 让开底部快捷条（约 56px + 间距） */
    width: auto;           /* 收成单圆宽度，不再是 50px 竖条 */
  }

  /* 竖条整条隐藏；高度不计入布局 */
  .i9-float__rail,
  .i9-float__sep { display: none !important; }

  /* 头像圆稍缩小，保持底部对齐 */
  .i9-float__av {
    width: 46px;
    height: 46px;
    margin-bottom: 8px;
  }
  .i9-float__av i { width: 11px; height: 11px; }

  /* 回到顶部：贴右下角，与头像垂直排列 */
  .i9-float__top {
    width: 46px;
    height: 46px;
    margin-top: 0;
    border-radius: 50%;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .14);
  }

  /* 触屏没有悬停，提示改为点击时由 :focus-visible 触发，避免“卡住”的浮层 */
  .i9-float__tip { display: none !important; }
}

@media (max-width: 480px) {
  .i9-float { right: 8px; bottom: 70px; }
  .i9-float__av,
  .i9-float__top { width: 42px; height: 42px; }
  .i9-float__av { margin-bottom: 7px; }
}

/* ====================================================================
   移动端 · 首页首屏紧凑化
   ==================================================================== */
@media (max-width: 992px) {
  .i9-banner { padding-block: 20px 26px; }
  .i9-banner__inner { gap: 18px; }

  /* 标题区收紧 */
  .i9-banner__sub { margin-top: 10px; }
  .i9-banner__actions { margin-top: 16px; }
  .i9-banner__finder { margin-top: 16px; }
  .i9-banner__tags { margin-top: 14px; }

  /* 首屏按钮改为等宽双列，比如今的“两行各一个”省半行高度 */
  .i9-banner__actions .i9-btn { flex: 1 1 0; min-width: 0; justify-content: center; }

  /* 检索条高度压缩：控件降高、去阴影、减少内边距 */
  .i9-banner__finder {
    padding: 10px;
    gap: 8px;
    box-shadow: none;
  }

  /* 插图收窄并置底，避免大块留白 */
  .i9-banner__art { order: 99; max-width: 200px; margin: 2px auto 0; }
  .i9-banner__img { max-width: 200px; }
  .i9-banner__ph { aspect-ratio: 16 / 9; }
}

@media (max-width: 768px) {
  .i9-banner { padding-block: 18px 22px; }
  .i9-banner__title { font-size: 27px; line-height: 1.28; letter-spacing: -.2px; }
  .i9-banner__sub { font-size: 13.5px; line-height: 1.6; }

  /* 检索条在窄屏改为紧凑单列：每行控件拉满，减少“台阶”感 */
  .i9-banner__finder {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px;
  }
  .i9-banner__finder .i9-finder__divider { display: none; }
  .i9-banner__finder .i9-btn { width: 100%; justify-content: center; }
  .i9-banner__finder .i9-finder__label { margin-bottom: 2px; }

  /* 首屏与其下第一个区块之间收紧，让「快捷入口」卡片更多进入第一屏 */
  .i9-banner + .i9-section,
  .i9-banner + .i9-section--tight { padding-top: 22px; }
}

@media (max-width: 480px) {
  .i9-banner { padding-block: 16px 20px; }
  .i9-banner__title { font-size: 24px; }
  .i9-banner__sub { font-size: 13px; }
  .i9-banner__art { max-width: 168px; }
  .i9-banner__img { max-width: 168px; }
  .i9-banner__tags { gap: 6px; }
  .i9-banner__tags a.i9-tag { height: 24px; padding: 0 10px; font-size: 12px; }
  .i9-banner + .i9-section,
  .i9-banner + .i9-section--tight { padding-top: 18px; }
}