/* Shared responsive layout: loaded last on every entry page. */
.stats-grid-primary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:20px 0}
.stats-grid-primary .stat-card{border:0;border-radius:20px;padding:24px;min-height:150px;box-shadow:0 8px 28px #20324a09;background:var(--card-bg,#fff)}
.stats-grid-primary .stat-label{font-size:14px;color:var(--muted)}
.stats-grid-primary .stat-value{font-size:38px;font-weight:750;letter-spacing:-1px;margin-top:24px}
.account-overview{padding:30px;border-radius:24px;background:linear-gradient(125deg,var(--primary-soft,#eef2ff),var(--card-bg,#fff));display:flex;align-items:center;justify-content:space-between;gap:24px}
.account-overview h3{font-size:24px;margin:10px 0;letter-spacing:-.6px}.account-overview p{color:var(--muted);line-height:1.7;margin:0}.overview-eyebrow{color:var(--primary);font-size:12px;font-weight:700;letter-spacing:2px}.overview-actions{display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0}
.recycle-config{display:flex;gap:18px;flex-wrap:wrap;align-items:center}.recycle-config label{display:flex;align-items:center;gap:8px}.recycle-config input[type=number]{width:90px}.data-table input[type=checkbox]{width:18px;height:18px;accent-color:var(--primary)}
#translationNotice{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:100000;max-width:min(600px,90vw);padding:12px 18px;border-radius:12px;background:#1e293b;color:#fff;font-size:13px;box-shadow:0 4px 24px #0002}
@media(max-width:1000px){.account-overview{align-items:flex-start;flex-direction:column}.dash-main{min-width:0}.dash-toolbar{flex-wrap:wrap}.dash-toolbar input,.dash-toolbar select{max-width:100%}}
@media(max-width:767px){
  /* 同样禁止给 body 加 overflow-x:hidden（会让 sticky 失效），只收敛宽度 */
  #app,.content,.dash-layout,.dash-main{min-width:0;max-width:100%}
  /* ⚠️ 这里的 background 必须和 styles.css 的 .info.top-info 保持一致（同一个"顶栏跟随页面底色"的要求）。
     以前这里写死 var(--card-bg,#fff)，只改桌面那条的话手机端依旧是一条白带。 */
  .content .info.top-info{padding:10px 14px!important;display:flex;gap:7px;flex-wrap:nowrap!important;min-height:62px;border:0;box-shadow:0 4px 20px #19233b06;background:color-mix(in srgb,var(--bg) 88%,transparent)}
  .info.top-info #langBtn,.info.top-info #pageBtn,.info.top-info #themeSwitch{width:auto!important;min-width:0!important;max-width:105px!important;font-size:12px;overflow:hidden;text-overflow:ellipsis;padding:0 9px!important;height:36px!important;border:0;background:var(--primary-soft)}
  .info.top-info #langBtn{max-width:86px!important}.info.top-info #themeSwitch{max-width:75px!important}.info.top-info #toggleSidebar{min-width:34px!important;width:34px!important;height:36px!important;border:0}
  .info.top-info #userMenuWrap{margin-left:auto!important}.info.top-info #userMenuWrap>button{min-width:34px!important;max-width:38px!important;padding:0!important}.info.top-info #userMenuWrap>button span{display:none}.info.top-info #btnAuth{font-size:12px;padding:0 9px;min-width:0}
  .carousel-area{height:260px!important;margin:12px 14px 0!important;border-radius:22px!important;box-shadow:0 12px 28px #17353018}
  .carousel-area::after{background:linear-gradient(180deg,#07192c65,transparent 75%)}
  .carousel-side.left{top:14px!important;left:16px!important;right:16px!important;padding:0!important;height:auto!important;z-index:2}
  .carousel-side.left .cw-title{font-size:11px;opacity:.85}.carousel-side.left .cw-now{font-size:26px!important;line-height:1.2}.carousel-side.left .cw-now small{font-size:11px}
  .cw-forecast{gap:7px!important;max-width:240px;margin-top:8px!important}.cw-forecast .day{padding:5px 8px!important;border:0!important;background:#ffffff20!important;border-radius:10px;font-size:10px;line-height:1.4}
  #calendarWidget{display:none!important}.topbar{padding:0!important}.topbar.has-carousel{padding-top:0!important}
  #mainSearchWrap,#mainSearchWrap.carousel-search-float,.topbar>.search.carousel-search-float{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;width:auto!important;margin:-28px 24px 15px!important;z-index:30}
  /* 2026-09-12 修复：桌面轮播规则 .carousel-search-float .search-inner{height:58px} 在移动端
     仍生效，而移动网格需要 42+30+内边距≈90px —— 内容溢出白色药丸：工具图标被挤到轮播图上、
     搜索按钮被顶出边缘（用户截图 8）。这里显式 height:auto 覆盖。 */
  #mainSearchWrap .search-inner{display:grid!important;grid-template-columns:30px minmax(0,1fr) auto;grid-template-rows:42px 30px;gap:1px 8px;padding:9px 12px!important;height:auto!important;min-height:0!important;border:0!important;border-radius:18px!important;background:var(--card-bg,#fff)!important;box-shadow:0 6px 28px #1f324b1a;color:var(--text);overflow:visible}
  #mainSearchWrap .engine-icon{position:static!important;grid-column:1;grid-row:1;width:28px!important;height:28px!important;margin:0!important;transform:none!important}
  #mainSearchWrap .search-input-stack{grid-column:2;grid-row:1;min-width:0;width:100%}
  #mainSearchWrap #searchInput{font-size:16px!important;padding:0!important;color:var(--text)!important;height:42px;width:100%;min-width:0;background:transparent;border:0}
  #mainSearchWrap #searchInput::placeholder{color:var(--muted)}
  /* 🔴 2026-09-15 第四次口径：三小工具从「第二行左对齐」改为**靠右** ——
     非 hero 版式窄屏的搜索键占第 3 列且横跨两行，工具行取 `grid-column:1/3`，
     右对齐后正好收在搜索键**左侧**、且落在第二行（键的下半部）⇒「搜索键左下角」。
     原来 `flex-start` 把它们甩到胶囊最左边，与搜索键隔了一整个输入框。
     （hero 版式窄屏走的是 home-hero.css 自己那套栅格，不受本条影响。） */
  #mainSearchWrap .search-mini-tools{grid-column:1/3;grid-row:2;justify-content:flex-end;gap:14px;margin:0!important}.search-tool{color:var(--muted)!important;width:28px;height:28px}
  #mainSearchWrap .search-submit-tools{grid-column:3;grid-row:1/3;min-width:56px;align-self:center}#searchBtn{min-width:56px;padding:10px 12px!important;border-radius:12px!important}
  .cards-sections{padding:0 14px 24px!important}.cards-sections>section,.cards-section{padding:18px 12px!important;margin-bottom:18px;border:0!important;border-radius:20px;box-shadow:0 6px 24px #1d324809}
  .cat-tabs{flex-wrap:nowrap!important;overflow:auto;scrollbar-width:none;gap:7px!important;padding-bottom:6px!important;margin-bottom:12px!important}.cat-tabs>*{flex:0 0 auto;white-space:nowrap;min-height:34px;padding:6px 12px!important;font-size:12px}
  .cards{grid-template-columns:1fr!important;gap:10px!important}.cards .card{padding:15px!important;border:0!important;border-radius:16px!important;box-shadow:0 3px 14px #25354a08}.card .desc{line-height:1.55}.footer{margin-top:22px}
  .dash-main{margin:0!important;padding:16px 14px!important;width:100%;box-sizing:border-box}.dash-topbar{padding:14px!important;border-radius:16px;gap:8px!important}.dash-topbar h2{font-size:19px;min-width:130px}.dash-topbar #toggleSidebar{display:inline-flex!important}.dash-topbar-btn{padding:6px 9px!important;font-size:12px!important}.dash-toolbar{gap:8px!important}.dash-toolbar input,.dash-toolbar select{min-width:0;flex:1 1 130px}.dash-toolbar button{font-size:12px;min-height:36px}
  .account-overview{padding:22px;border-radius:20px;gap:18px}.account-overview h3{font-size:21px}.account-overview p{font-size:13px}.overview-actions{width:100%}.overview-actions button{flex:1;white-space:nowrap;padding:10px 7px;font-size:12px}
  .stats-grid-primary{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:15px 0}.stats-grid-primary .stat-card{padding:14px 10px;min-height:105px;border-radius:16px}.stats-grid-primary .stat-label{font-size:11px}.stats-grid-primary .stat-value{font-size:28px;margin-top:17px}
  .table-wrap{overflow:auto;border-radius:14px}.data-table{min-width:580px}.panel{border-radius:16px;padding:16px}.modal-content{max-width:calc(100vw - 20px)!important;max-height:92dvh;border-radius:20px!important}.modal-body{padding:16px}.form-grid .row{flex-wrap:wrap}.form-grid input,.form-grid textarea,.form-grid select{box-sizing:border-box;min-width:0;font-size:16px}
}
@media(max-width:370px){.info.top-info #themeSwitch{max-width:42px!important}.info.top-info #langBtn{max-width:65px!important}.info.top-info #pageBtn{max-width:60px!important}.stats-grid-primary .stat-label{font-size:10px}}

/* ==========================================================================
   分页面移动端补丁（2026-09-15）
   用户要求：「所有分页面按首页适配移动端的策略来适配移动端，更整齐、交互更好」。
   这里只补**批量巡检里真实看到的问题**，不重写已有规则：
   在 390px 下逐页量过 scrollWidth，18 个分页都没有横向溢出；
   但后台仪表盘的工具栏按钮会被压成竖排文字（「刷\n新」「导出\nJSON」），
   日期区间输入框也被挤到只剩几十像素。根因是按钮没有 nowrap、
   日期输入没有最小宽度，于是 flex 把它们压到了文字宽度以下。
   ========================================================================== */
@media(max-width:767px){
  .dash-toolbar{row-gap:10px!important;align-items:center}
  /* 按钮文字**永不断行**：宁可整颗按钮换到下一行，也不要「刷\n新」这种竖排 */
  .dash-toolbar button,.dash-toolbar .btn,.dash-toolbar a.btn,.dash-toolbar .chip{white-space:nowrap!important}
  /* 日期区间给一个能放下「2026-09-15」的最小宽度，避免被挤成「年-月-日」碎片。
     2026-09-15 二修：132px 仍然放不下 —— 390 视口下工具栏可用宽 362px，
     「从 [input] 到 [input]」四个元素平摊下来每个 input 只剩 ~150px，
     原生日期框显示不全（用户截图里就是「年 -月-日-」被切掉尾巴）。
     提高到 152px 后两个 input 恰好换行成「从 …」/「到 …」两行，各拿到整行宽度。 */
  .dash-toolbar input[type="date"]{flex:1 1 168px!important;min-width:152px!important}
  /* 工具栏里的「从 … 到 …」这类成组的行内文字，整组独占一行更整齐 */
  .dash-toolbar .date-range,.dash-toolbar .range{flex:1 1 100%}
}

/* ==========================================================================
   分页面移动端补丁 · 第二轮（2026-09-15）
   ----------------------------------------------------------
   ⚠️ 更正上一段注释里的一个**测量错误**：那里写「18 个分页都没有横向溢出」，
      其实是探针参照物取错了 —— 我拿 `element.right > window.innerWidth` 判定，
      而内容一旦溢出，Chrome 会把 `window.innerWidth` **一起放大**（390 → 443），
      于是这个条件永远不成立，看起来"全都没问题"。
      正确参照必须是 `document.documentElement.clientWidth`（= 设备宽 390）。
      用正确参照复量，真实结果是：dashboard 溢出 53px、security 溢出 53px、
      profile 溢出 31px —— 这正是用户报的「移动端还是无法完整显示」。
   ========================================================================== */
@media(max-width:767px){
  /* ① 管理后台工具栏：`.dash-toolbar .toolbar-group` 是 `display:flex` 且**不换行**，
        组内按钮把整组撑到 416px（设备宽只有 390）→ 整页横向滚动 53px。
        修法：允许组内换行 + 允许收缩（min-width:0 是关键，否则 flex item 的下限
        是内容宽度，换行也救不回来）。 */
  .dash-toolbar .toolbar-group{flex-wrap:wrap;min-width:0;max-width:100%}
  .dash-toolbar .toolbar-group > *{min-width:0}
  .dash-toolbar{min-width:0;max-width:100%}
  .dash-main,.dash-main > *{min-width:0}
  .dash-toolbar > *{max-width:100%}

  /* ② 个人中心日期选择器：`.date-field-native` 本意是"隐形原生输入"（1px 藏在文本框下面），
        但它同时命中 `.form-grid input { width:100% }`（0,1,1 胜过 0,1,0），
        于是变成 `position:absolute; width:390px`，右边界顶到 421px → 溢出 31px。
        修法：把尺寸钉死（含 max-width），让"隐形"这件事不被通用规则破坏。 */
  .date-field{min-width:0;max-width:100%}
  .date-field-native{width:1px!important;height:1px!important;max-width:1px!important}

  /* ③ 安全中心：`.security-section` 是 `flex; justify-content:space-between`，
        窄屏下左边文字块被右边的控件挤到只剩 20px 宽 →
        标题/描述被压成**竖排**（探针实测 .s-title w=20 h=96、.s-desc w=20 h=160）。
        修法：窄屏改为纵向堆叠，文字块独占整行；控件区左对齐而不是被推到最右。 */
  .security-section{flex-direction:column;align-items:stretch;gap:12px}
  .security-section .s-title,.security-section .s-desc{width:auto;max-width:100%}
  .security-section .form-grid{width:100%;max-width:100%}
  .security-section .form-grid input,.security-section .form-grid select,
  .security-section .form-grid textarea{width:100%;max-width:100%}
  .security-section .form-grid > *{min-width:0}
  /* 区块内的两列栅格在窄屏一律降成一列，避免 138px 那种"半格放不下" */
  .security-section .row{flex-wrap:wrap}
  #accounts.security-section{display:block}
  #accounts .form-grid{grid-template-columns:1fr!important}
}

/* 认证记录表（client/verify.js 里那张 7 列表格）：窄屏被压成竖排。
   探针实测 `th` 宽 18px、高 82px 且文本是「审核备注」—— 就是被挤成了竖排。
   根因：`layouts.css` 有一条 `table { max-width: 100% }`，表格只会**压缩列宽**
   而不会滚动；7 列压进 390px，每列平均不到 56px。
   这张表用 `class="table"`（全站仅此一处），所以可以安全地单独处理：
   让承载它的 `.panel` 当横向滚动容器，并给表格一个有意义的宽度下限。
   ⚠️ `:has()` 在这里比加一层包裹结构更安全 —— 项目铁律是「禁移 DOM 结构」，
      而包裹表格会改变它的父元素，所有 `父 > 子` 选择器都有失配风险。 */
@media(max-width:767px){
  .panel:has(> table.table){overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.table{min-width:680px}
  table.table th,table.table td{white-space:nowrap}
}

/* ==========================================================================
   分页面移动端补丁 · 第三轮（2026-09-15 晚）
   ----------------------------------------------------------
   本轮的**根因只有一条**：≤768px 时 `.dash-layout > .dash-main`（0,2,0）
   压过了 `.dash-main{margin-left:0;width:100%}`（0,1,0），后台主区一直留着 190px 桌面留白
   → 390 视口下主区只有 200px 宽。已在 styles.css 里用同特异性选择器修掉；
   下面这几条是它**仍然会留下**的细节（工具栏分隔线、表格列被压成竖排、
   全选标签被压成竖排），逐条收口。
   ========================================================================== */
@media(max-width:767px){
  /* ① 仪表板工具栏的 1px 竖分隔线：`.dash-toolbar` 窄屏会换行，
        分隔线经常会落在某一行的**行首**，看起来就是一根孤零零的细竖线
        （用户截图里出现在「7天/30天/90天/365天」下面）。
        用户已明确报这一条 → 窄屏直接不显示分隔线（换行后它本来也没有分组含义）。 */
  .dash-toolbar .toolbar-divider{display:none!important}

  /* ② 表格列被压成「一字一行」。根因是 layouts.css 的 `pre, code { overflow-wrap:anywhere }`：
        在 `table-layout:auto` 下，列的 min-content 因此退化到**1 个字**，
        于是页面管理的「标识」列（`<code>regular</code>`）断成 regula/r、
        「名称」列「常规」竖排（用户截图）。
        修法：单元格给一个有意义的宽度下限 + code/徽标不拆词。 */
  .data-table th,.data-table td{min-width:72px}
  .data-table th:first-child,.data-table td:first-child{min-width:48px}
  .data-table code,.data-table .status-badge,.data-table .badge{white-space:nowrap;overflow-wrap:normal;word-break:keep-all}

  /* ③ 站内消息工具栏的「本页全选」标签：`.msg-check-all` 是 flex item 且默认 flex-shrink:1，
        窄屏被压到 30px 宽 → 「本页全选」按字换行成 4 行（用户截图里的「本\n页」）。
        修法：标签类文字项禁止收缩、禁止断行，放不下时整颗换行。 */
  .dash-toolbar > label,.dash-toolbar .msg-check-all{white-space:nowrap!important;flex-shrink:0}
}