@charset "utf-8";
/* ==============================================================================
   AI双获客 · 共用样式层  base.css
   建立：2026-09-16  |  目的：全站「地基」—— 设计令牌 + 全局基础 + 移动端适配
   ------------------------------------------------------------------------------
   【挂载】<link rel="stylesheet" href="/static/base.css">
           位置：模板 <head> 内、模板自带 <style> **之后**（靠后加载才能盖住它）
           路由：/static/ → geo_saas/assets/（app.py:572 已支持，零架构改动）

   【断点约定】只用两个（= 现有 21/18 个模板的事实标准）
           820px —— 手机 / 平板界线
           520px —— 手机竖屏

   【★ 分层策略（重要，别改）】
     ① 设计令牌放 @layer base ⇒ **低优先级**
        原因：studio.html 是**暗色主题**模板（--bg:#0f172a / --ink:#e2e8f0），
              它自带的 :root 必须能盖住这里的亮色默认值，否则整页会变白。
        未分层的样式优先级 > 分层样式 ⇒ 模板的 :root 自动赢。
     ② 修复类规则（全局基础 / 移动端）**不分层** ⇒ 高优先级
        原因：要能盖住 27 个模板各自 @media 里的 `.main-nav{flex-wrap:nowrap;overflow-x:auto}`。
     ③ 降级：不支持 @layer 的老浏览器会整块忽略 ①（令牌失效），
        但 ② 仍生效 ⇒ 不会"越修越坏"。

   【设计原则】只写「全站通治」的规则，不写任何页面特有样式。
   ============================================================================== */

/* ------------------------------------------------------------------------------
   1. 设计令牌
   值 = 实测统计出的**事实标准**（11~14 个模板已一致沿用），故对多数页面零观感变化。
   ------------------------------------------------------------------------------ */
@layer base {
  :root {
    /* 色 —— 主色/强调（--brand 13 模板一致） */
    --brand:    #2563eb;
    --brand-h:  #1d4ed8;
    --brand-d:  #1e40af;
    --brand-bg: #eff6ff;
    /* 色 —— 文字/线条/底 */
    --ink:      #1c2430;
    --mut:      #64748b;
    --line:     #e6eaf0;
    --bg:       #f4f6f9;
    --card:     #ffffff;
    /* 色 —— 语义 */
    --ok:       #059669;  --ok-bg:     #ecfdf5;
    --warn:     #d97706;  --warn-bg:   #fffbeb;
    --danger:   #dc2626;  --danger-bg: #fef2f2;
    /* 圆角（原 22 种取值收敛为 4 档） */
    --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-pill: 999px;
    /* 阴影 */
    --sh-1: 0 1px 2px rgba(15,23,42,.04), 0 2px 10px rgba(15,23,42,.05);
    --sh-2: 0 4px 14px rgba(15,23,42,.08), 0 10px 28px rgba(15,23,42,.10);
    /* 动效 */
    --tr: .15s ease;
    /* 字体栈（原 4 种写法，统一为这一种；本批**不强制**应用到 body，见 §2） */
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC",
            "PingFang SC", "Microsoft YaHei", sans-serif;
  }
}

/* ------------------------------------------------------------------------------
   2. 全局基础（不分层 = 高优先级，只做低风险「兜底」）
   ------------------------------------------------------------------------------ */
/* box-sizing：30/30 模板已声明 border-box，此处固化为全站约定 */
*, *::before, *::after { box-sizing: border-box; }

/* 移动端字号自动放大（iOS 横屏）防护 */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ★ 长串（URL / 英文 / 订单号）不撑破容器
   —— 治 /baike（参考资料里的长 URL，实测溢出 64px）
        /deploy（实测溢出 74px）
   用 anywhere 而非 break-word：前者参与 min-content 计算，
   能让 flex/grid 子项正确收缩。 */
body { overflow-wrap: anywhere; }

/* 媒体不溢出 */
img, video, canvas { max-width: 100%; }

/* ------------------------------------------------------------------------------
   3. 移动端底座（≤820px）
   ------------------------------------------------------------------------------ */
@media (max-width: 820px) {

  /* ---- 3.1 ★ 主导航：换行 + 紧凑
     现状病（实测）：27 个模板都写 `.main-nav{flex-wrap:nowrap;overflow-x:auto}`
       + 只给 `a` 补了 white-space:nowrap ⇒ 两个 <span>（内容中心 drop-sum /
       用户名 ud-sum）没有 nowrap，被 flex 压成**竖排单字**；
       且滚动条被 `scrollbar-width:none` 隐藏 ⇒ 老板**不知道右侧还有入口**。
     修法：小屏改为**换行**（全部入口可见），并补全 nowrap。 */
  .main-nav {
    flex-wrap: wrap;              /* 盖掉模板的 nowrap */
    overflow-x: visible;
    row-gap: 1px;
    padding: 6px 9px;
  }
  .main-nav > a,
  .main-nav .drop-sum,
  .main-nav .ud-sum {
    white-space: nowrap;          /* ★ 治「竖排单字」 */
    font-size: 11.5px;
    padding: 5px 8px;
    border-radius: 7px;
  }
  .main-nav .sep { display: none; }        /* 小屏下竖分隔线纯占位 */
  .main-nav .drop-menu { max-width: calc(100vw - 24px); }  /* 下拉不越界 */

  /* 用户区独占一行、右对齐（它带内联 margin-left:auto ⇒ 需 !important） */
  .main-nav .user-drop {
    margin-left: 0 !important;
    flex-basis: 100%;
    display: flex;
    justify-content: flex-end;
  }

  /* ---- 3.2 内容留白收窄（小屏寸土寸金） */
  .wrap { padding-left: 12px; padding-right: 12px; }

  /* ---- 3.3 ★ 表格横滚
     治 /assets 实测溢出 19px（表格直接躺在 .card 里，没有横滚容器）。
     有 .tbl-wrap 包裹的页（如 /console）本就是横滚，此处是双保险。 */
  .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ---- 3.4 ★ 页头小字：移动端隐藏 ----
     问题（375×812 实测）：页头 <h1>+<p> 合计 35~180px，其中小字本身占 36~110px；
       再叠加「换行后的主导航」120~154px ⇒ 顶端两块 = 189~334px = **屏高 23%~41%**，
       首屏看不到任何操作按钮（最差的 /prod_images 到 41%）。
     修法：一处通治 —— 24 个模板都是 `<header><h1>…</h1><p>小字</p></header>` 结构，
       文案**保留在模板里**（桌面端照旧显示），只在手机上藏。
     ⚠️ **必须排除 `.hero`**：官网产物 `output/<slug>/site.html` 里是
       `<header class="hero"><p class="sub">副标题</p>`，且**同样引用了本文件**
       —— 那是官网正文而非「页头小字」，隐藏它 = 改坏老板的官网。
     ⚠️ 收益**不是统一值**（别按一个数估）：实测 /publish /points /media_kit 省 60~63px；
       /sites /geo /effects /monitor /help /assets /baike 省 42~44px；/kb 为 0（header 里没有 <p>）。 */
  header:not(.hero) p { display: none; }

  /* ---- 3.5 ★ 页头收紧（2026-10-16 · 全站通治，原只在 /my_site 一页生效）----
     问题：22 个模板的页头是 `<header>` 渐变条，基础 padding 20px/22px 14px ＋ h1 20px；
       叠加换行后的主导航，顶端两块仍占掉手机首屏的大头。
     修法（只压这三处，不改配色/圆角/结构）：
       页头内边距 → 12px/14px 9px ｜ 页头标题 20 → 17px ｜ `.fx-top` 包裹层下留白 16 → 8px。
     ⚠️ **必须排除 `.hero`**：官网产物 `output/<slug>/site.html` 里是
       `<header class="hero">`（padding 64/56、标题 clamp 字号）—— 那是官网**正文**，
       压它 = 改坏老板的官网。
     ⚠️ **必须排除 `.hd-flat`**：studio.html 的页头是**零内边距的单行 flex**（h1 + 一个链接），
       给它补内边距只会**变高**（越修越坏）⇒ 该模板已给自己的 `<header>` 打上 `.hd-flat`。 */
  header:not(.hero):not(.hd-flat) { padding: 12px 14px 9px; }
  header:not(.hero) h1 { font-size: 17px; line-height: 1.3; }
  .fx-top { padding-bottom: 8px; }
}

/* ------------------------------------------------------------------------------
   4. 窄屏微调（≤520px）
   ------------------------------------------------------------------------------ */
@media (max-width: 520px) {
  .main-nav > a,
  .main-nav .drop-sum,
  .main-nav .ud-sum { font-size: 12px; padding: 6px 8px; }

  /* 卡片圆角收到 --r-md，小屏下 16px 显得过圆
     （带 fallback：老浏览器不支持 @layer 时令牌未定义，声明自动失效而非报错） */
  .card { border-radius: var(--r-md, 12px); }
}