/* ============================================================
   ★ v2.643：整站版式统一（铺满 + 一致的边距节奏）
   ============================================================
   🔴 用户要求（原话）：
      「这个页面也很丑，也没铺满屏，以后设计页面直接一步到位，
        做美观，整站风格统一，内容区一律铺满屏。」

   ★ 我在这一轮之前是【一个页面一个容器类】，结果：
        .ao-wrap   max-width: 1180px
        .ea-wrap   max-width:  940px
        .iv-wrap   max-width:  820px
        .cl-wrap   max-width:  880px
        还有 5 个页直接用 Tailwind max-w-[1600px] / max-w-5xl …
      ⇒ 每加一个页面就多一种宽度，整站看着【参差不齐】。
        这正是用户说的"不统一"。

   ★ 现在的规矩（以后新页面照这个来）：
        内容区一律铺满 —— width:100%; max-width:none;
        左右边距统一用 clamp(1rem, 2.5vw, 2.5rem)（窄屏不挤、宽屏不空）
        纵向间距各页保留原样（见下面每一行的 padding-top / bottom）
      ⚠️ 为什么纵向间距不统一：不同页面的第一屏内容不一样
         （列表页 vs 表单页），强行统一反而会让某些页顶得太紧。
         横向（铺满 + 边距）必须统一，纵向允许差一点。

   ⚠️ 为什么用一条全局规则覆盖，而不是逐个改 HTML：
      逐个改要动 13 个文件，任何一个漏了/改错都会破坏版式；
      而且以后新页面还会再犯（我这几轮就是这么攒出 7 种宽度类的）。
      集中成一条规则，谁不听话都能在这里一次性掰正。
   ⚠️ 例外（【故意】不铺满，谁改谁错）：
        login.html / setup.html  —— 登录框和安装向导。
          表单铺满 2000px 会变成一行的输入框，很难看也不好填。
          这类"单一表单页"收窄才是对的（主流产品全都这么做）。
        404.html / coming-soon.html —— 只有一行字，铺满更空。
      ⇒ 下面第一条规则【排除】这些页。
   ⚠️ 用 !important 是【有意】的：
      这些类在各自的 HTML 内联 <style> 里，
      内联 <style> 和外部样式表按【文档顺序】比优先级 ——
      HTML 里那句 <style> 在 style.css 之后加载，
      不加 !important 压不住（这是实测过的顺序问题）。
   ============================================================ */

/* ---------- 1) 前台内容区：一律铺满 ----------
   ⚠️ 排除登录/安装/404/即将上线 —— 那几个页【该收窄】（见文件顶部说明）。
      用 :not() 而不是靠 body[data-page] 白名单：
      新页面只要不加那四个 data-page 就自动铺满，符合"以后一步到位"。 */
body:not([data-page="login"]):not([data-page="setup"]):not([data-page="404"]):not([data-page="coming-soon"]) .ao-wrap,
body:not([data-page="login"]):not([data-page="setup"]):not([data-page="404"]):not([data-page="coming-soon"]) .bd-wrap,
body:not([data-page="login"]):not([data-page="setup"]):not([data-page="404"]):not([data-page="coming-soon"]) .cl-wrap,
body:not([data-page="login"]):not([data-page="setup"]):not([data-page="404"]):not([data-page="coming-soon"]) .ea-wrap,
body:not([data-page="login"]):not([data-page="setup"]):not([data-page="404"]):not([data-page="coming-soon"]) .iv-wrap,
body:not([data-page="login"]):not([data-page="setup"]):not([data-page="404"]):not([data-page="coming-soon"]) .mb-wrap,
body:not([data-page="login"]):not([data-page="setup"]):not([data-page="404"]):not([data-page="coming-soon"]) .home-wrap,
body:not([data-page="login"]):not([data-page="setup"]):not([data-page="404"]):not([data-page="coming-soon"]) .it-wrap,
body:not([data-page="login"]):not([data-page="setup"]):not([data-page="404"]):not([data-page="coming-soon"]) .doc-wrap,
body:not([data-page="login"]):not([data-page="setup"]):not([data-page="404"]):not([data-page="coming-soon"]) .tw,
body:not([data-page="login"]):not([data-page="setup"]):not([data-page="404"]):not([data-page="coming-soon"]) .cb
{
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
  /* ★★ v2.646：这里【故意不设 padding】
     ------------------------------------------------------------
     🔴 用户实测反馈：「你现在把电商专区的内容区改窄了」
     ★ 根因就是我这一条给【已经有自己 padding 的容器】又叠了一层：
         .zone-wrap  自带 padding: 0.9rem clamp(0.375rem, 0.75vw, 1rem) 2rem
         + 我这条    padding: clamp(1rem, 2.5vw, 2.5rem)
         ⇒ 两边各多挤 32px，看着就"比之前几个版本窄"。
     ★ 实测核对过（逐个读过各容器类的定义）：
         .zone-wrap / .home-wrap / .tw / .cb
             → padding 已经是 clamp(0.375rem, 0.75vw, 1rem)，【本来就是对的】
         .ao-wrap / .ea-wrap / .iv-wrap / .bd-wrap / .cl-wrap /
         .mb-wrap / .it-wrap / .doc-wrap
             → 0.9~1rem，也都在合理范围
     ⇒ 这些页只需要"别封顶"，不需要我给它们定边距。
       谁想调边距就改自己的类 —— 那个值才是这页的设计意图。
     ⚠️ 教训：统一版式时，「铺满」是硬要求，「边距具体几 px」不是 ——
        把边距也一刀切，反而把本来正确的页面改坏了。 */
}

/* ---------- 2) Tailwind 内联宽度的页面：同样铺满 ----------
   ⚠️ 这 5 个页用 max-w-[1600px] / max-w-5xl 这种 Tailwind 类。
      它们【只能靠 Tailwind CDN】定义（tailwind-lite.css 里没有任意值类），
      ⇒ CDN 挂了就变全宽，宽度会跳。
      这里用结构选择器接管，不再依赖 CDN。
   ⚠️ 名单必须是【具体的 data-page】而不是"通配" ——
      因为 login / setup / 404 这几个页【没有 data-page】，
      如果用通配会把它们也铺满（表单铺满 2000px 很难看）。
      实际核对过：login/setup/404 都是 data-page 缺失，
      所以"点名"是最安全的做法。
   ⚠️ work.html 和 coming-soon.html 也【没有 data-page】，
      但它们不该收窄 ⇒ 用 :has(.app-shell) 点名。
      ⚠️ 我第一版这里写的是 body:has(.work-wrap) / body:has(.cs-wrap) ——
         【那两个类根本不存在】（我猜的）。查过之后改成 .app-shell：
           work / coming-soon / admin 的 body 里都有 .app-shell（实测确认）
           而 login / setup / 404 【没有】 .app-shell
         ⇒ 这个特征刚好能把"该铺满的"和"该收窄的"分开。 */
body[data-page="image"]    .page-content > main,
body[data-page="edit"]     .page-content > main,
body[data-page="shop"]     .page-content > main,
body[data-page="me"]       .page-content > main,
body[data-page="recharge"] .page-content > main,
body:has(.app-shell)       .page-content > main
{
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
  /* ★★ 这几个页【必须】由这里给 padding ——
     它们的边距原来靠 Tailwind 的 px-4 / sm:px-6，
     而 studio-split.css 把卡片的 padding 去掉之后，
     如果这里也不给，内容就会【顶到屏幕边缘】（比电商专区还宽，同样不对）。
     ⚠️ 值必须和电商专区的 .zone-wrap 一致（0.9rem 下限），
        这样"铺满"是真的一致，不是每页各铺各的。
     ⚠️ studio-split.css 里对 image/music/video/text/edit/shop 又写了一遍
        同样的值（那两个文件加载顺序在后，带 !important 会赢）——
        重复是有意的：studio-split 只管那几个创建页，
        layout-unify 管剩下的（me / recharge / work / coming-soon / admin）。 */
  padding-left: clamp(0.375rem, 0.75vw, 1rem) !important;
  padding-right: clamp(0.375rem, 0.75vw, 1rem) !important;
}

/* ---------- 3) 后台：边距略收（后台数据密，左右不用留太大）----------
   ⚠️ admin.html 也没有 data-page，但它有 data-menu="admin"（实测确认）——
      这是全站判断"是不是后台壳"的同一个判据（layout.js 的 isAdminShell）。 */
body[data-menu="admin"] .page-content > main
{
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: clamp(0.375rem, 0.75vw, 1rem) !important;
  padding-right: clamp(0.375rem, 0.75vw, 1rem) !important;
  box-sizing: border-box;
}

/* ---------- 4) ★ 窄屏兜底：边距收到 1rem ----------
   ⚠️ 不加这条的话，clamp 的下限会让手机上的内容比原来还窄。
   ★★ v2.646：这里【只能管第 2 条那几个页】——
      上一版我无差别地给 .ao-wrap / .zone-wrap 这些【自带容器】也设了 1rem，
      等于又在窄屏上覆盖了它们自己的 padding（和宽屏那个错是同一个错）。
      现在只作用于「由我补 padding 的那批」（Tailwind 内联页）。
   ⚠️ 自带容器的页不用管：它们的 clamp(0.9rem, ...) 下限本来就 < 1rem，
      手机上自动缩到 0.9rem，比 1rem 还宽一点，不需要兜底。 */
@media (max-width: 639px) {
  body[data-page="image"]    .page-content > main,
  body[data-page="edit"]     .page-content > main,
  body[data-page="shop"]     .page-content > main,
  body[data-page="me"]       .page-content > main,
  body[data-page="recharge"] .page-content > main,
  body:has(.app-shell)       .page-content > main {
    padding-left: clamp(0.375rem, 0.75vw, 1rem) !important;
    padding-right: clamp(0.375rem, 0.75vw, 1rem) !important;
  }
}