/* ===========================================================================
 * theme.css —— 品牌主题层（冰蓝）                唯一真相源，改主题只改这个文件
 * ===========================================================================
 *
 * 【为什么必须排在 /tailwind.css 之前】
 *   tailwind.css 里那些工具类要靠「靠后 = 同特异性下胜出」才能覆盖本文件的
 *   组件类，例如 <div class="clean-card border-emerald-300"> —— 绿色边框来自
 *   工具类，不是项目类。把本文件挪到 tailwind.css 之后，这些覆盖会整体反转，
 *   是**静默的视觉回归**（不报错，只是边框悄悄变回灰色）。
 *   ⚠️ 不要"因为它不生效"就把它挪到后面。它生效的方式是靠下面的 html 前缀。
 *
 * 【html 前缀是干什么的】
 *   tailwind.css 是 JIT 预编译产物（Tailwind 3.4.17），且**里面一个 blue-*
 *   选择器都没有**（bg/text/border/from/to 五种前缀全为 0）。所以"把 amber
 *   类改成 blue 类"这条路走不通 —— 浏览器拿到的是一条不存在的规则，
 *   bg-gradient-to-r 还在但色标为空，按钮会**直接变透明**，且不报错。
 *
 *   正确做法是「调色板垫片」：不改类名，改类的定义。用同名类重新声明
 *   amber / orange / yellow 三个家族，把整个暖色调色板映射到冰蓝。
 *
 *   特异性是**跨样式表**比较的，与加载顺序无关：
 *       html .bg-amber-400     ->  (0,1,1)   <- 本文件
 *       .bg-amber-400          ->  (0,1,0)   <- tailwind.css
 *   所以本文件既能排在前面（保住上面的层叠关系），又能压过 Tailwind。
 *   tailwind.css 里 !important 出现 0 次、最复杂变体仅 (0,2,0)、无 .dark
 *   也无 prefers-color-scheme —— 这个方案不需要 !important。
 *
 * 【为什么这么做的收益是决定性的】
 *   amber/orange/yellow 的类名同时出现在 HTML 和 12 处 JS 字符串里
 *   （className = "..." 整体覆写）。垫片方式让这些**一处都不用改**：
 *   商品卡选中态(ring-2 ring-amber-400 bg-amber-50/20 border-amber-400)、
 *   步骤条状态色、价格文字…… 全部自动变蓝。改类名则必须同步改 JS，
 *   而 .prod / .check-mark 这类纯 JS 钩子删掉会让结账**静默全坏**。
 *
 * 【这个垫片什么时候可以删】
 *   如果将来重建 tailwind.css，把品牌色做成 tailwind.config.js 里的自定义
 *   调色板（届时需先把 web/renew.html 加进 content 数组），本文件第 4 节
 *   就可以整体删除。在那之前不要删。
 *
 * 本文件是纯 CSS —— 没有构建步骤，禁止写 @apply / @tailwind（浏览器会整条丢弃）。
 * ========================================================================= */

/* ---------------------------------------------------------------------------
 * 1. 设计令牌
 *    取自参考站 bewild.ai/subscribe 编译后的 CSS（非目测）。
 * ------------------------------------------------------------------------ */
:root {
  /* 品牌主色：参考站全表出现 60 次，是其绝对主色 */
  --brand: #3189ef;
  --brand-strong: #2b7fe0;   /* 渐变收尾 / 深一档 */
  --brand-deep: #1a63bd;     /* 文字链接 */
  --brand-ink: #071c3d;      /* 主按钮上的文字（对比度 ~4.8:1，过 AA） */
  --brand-wash: #eef7ff;     /* 极浅底 */
  --brand-tint: #dcecff;     /* 浅底 */
  --brand-line: #bfdcff;     /* 边框 / ring */
  --brand-lift: #a5cfff;     /* hover 底 */

  /* 形状 */
  --radius-card: 0.875rem;
  --radius-control: 0.625rem;

  /* 卡片阴影：参考站用 0 .2vw .6vw rgb(0 0 0/6%)，这里换成 px 并掺一点品牌蓝 */
  --card-shadow: 0 1px 2px rgb(15 23 42 / 4%), 0 6px 18px -4px rgb(49 137 239 / 10%);

  /* 页面背景：冰蓝 -> 白。固定高度，长页面不会被摊薄成看不见 */
  --page-bg-top: #e0f4ff;
  --page-bg-height: 600px;
}

/* ---------------------------------------------------------------------------
 * 2. 页面外壳
 *    字体栈原先重复写在 index/shop/order 三页的内联 <style> 里，renew.html
 *    完全没有（一直走 Tailwind preflight 的 ui-sans-serif，与另三页不一致）。
 *    收敛到这里，四页统一。全系统字体，不引任何外部字体。
 * ------------------------------------------------------------------------ */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "PingFang SC", "HarmonyOS Sans SC", "Hiragino Sans GB", "Microsoft YaHei",
    sans-serif;
  background-color: #ffffff;
  background-image: linear-gradient(180deg, var(--page-bg-top) 0%, #ffffff 100%);
  background-repeat: no-repeat;
  background-size: 100% var(--page-bg-height);
  background-position: top center;
}

/* 选区高亮。原先靠 body 上的 selection:bg-amber-200 / selection:text-amber-900，
 * 而 Tailwind 为 selection: 变体生成了 4 种选择器形态，用垫片要写 4 条才压得干净；
 * 删掉那两个类 + 这里一条规则更省。 */
::selection {
  background: var(--brand-line);
  color: var(--brand-ink);
}

/* ---------------------------------------------------------------------------
 * 3. 表面 / 卡片
 *    .clean-card 与 .sub-card 原先在 index/shop/order 三页各抄了一份（逐字相同）。
 *    这里收敛成一份。注意**不加 html 前缀**：它们必须继续输给 Tailwind 工具类，
 *    否则 <div class="clean-card border-emerald-300"> 的绿边框就没了。
 *    也不要在这里写 border-radius —— 圆角由各元素的 rounded-* 工具类决定。
 * ------------------------------------------------------------------------ */
.clean-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: var(--card-shadow);
}

.sub-card {
  background: #f7fbff;
  border: 1px solid #e3eefb;
}

/* ---------------------------------------------------------------------------
 * 4. 调色板垫片：暖橙 -> 冰蓝
 *    47 个 token 是机器枚举出来的（4 页 HTML + JS 字符串全在内），一个不多一个不少。
 *    三种形态：① 直接覆盖属性 ② 变体（特异性跟着升一档）③ 渐变（三个变量必须全写）
 * ------------------------------------------------------------------------ */

/* --- 4.0 渐变：from-* 设定起点并清空终点；via-* 插中间；to-* 设定终点。
 *     ⚠️ 必须三个变量全写。只改 --tw-gradient-from 盖不住 —— via-* 把字面颜色
 *     直接塞进了 --tw-gradient-stops，不重写 stops 就会留下暖色。 */
html .from-amber-50 {
  --tw-gradient-from: #eef7ff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(238 247 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html .from-amber-100\/50 {
  --tw-gradient-from: rgb(238 247 255 / 0.5) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(238 247 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html .from-amber-400 {
  --tw-gradient-from: #3189ef var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(49 137 239 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html .from-amber-600 {
  --tw-gradient-from: #1a63bd var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(26 99 189 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html .hover\:from-amber-300:hover {
  --tw-gradient-from: #a5cfff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(165 207 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html .via-amber-300 {
  --tw-gradient-to: rgb(165 207 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #a5cfff var(--tw-gradient-via-position), var(--tw-gradient-to);
}
html .via-amber-400 {
  --tw-gradient-to: rgb(49 137 239 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #3189ef var(--tw-gradient-via-position), var(--tw-gradient-to);
}
html .via-orange-50\/30 {
  --tw-gradient-to: rgb(230 242 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(230 242 255 / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
html .via-orange-500 {
  --tw-gradient-to: rgb(74 155 245 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #4a9bf5 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
html .to-amber-500 {
  --tw-gradient-to: #2b7fe0 var(--tw-gradient-to-position);
}
html .to-orange-50 {
  --tw-gradient-to: #e6f2ff var(--tw-gradient-to-position);
}
html .to-yellow-400 {
  --tw-gradient-to: #7cbcf9 var(--tw-gradient-to-position);
}
html .hover\:to-amber-400:hover {
  --tw-gradient-to: #3189ef var(--tw-gradient-to-position);
}

/* --- 4.1 背景色 --- */
html .bg-amber-50      { background-color: #eef7ff; }
html .bg-amber-50\/20  { background-color: rgb(49 137 239 / 0.08); }  /* 商品卡选中态 */
html .bg-amber-50\/60  { background-color: rgb(238 247 255 / 0.6); }
html .bg-amber-50\/80  { background-color: rgb(238 247 255 / 0.8); }  /* renew 提示条（原先缺失）*/
html .bg-amber-100     { background-color: #dcecff; }
html .bg-amber-100\/80 { background-color: rgb(220 236 255 / 0.8); }
html .bg-amber-300     { background-color: #a5cfff; }
html .bg-amber-400     { background-color: #3189ef; }
html .bg-orange-50     { background-color: #e6f2ff; }
html .hover\:bg-amber-50:hover  { background-color: #eef7ff; }
html .hover\:bg-amber-300:hover { background-color: #a5cfff; }

/* --- 4.2 文字色 --- */
html .text-amber-500     { color: #2b7fe0; }
html .text-amber-600     { color: #1a63bd; }
html .text-amber-700     { color: #17539c; }
html .text-amber-800     { color: #14478a; }
html .text-amber-800\/80 { color: rgb(20 71 138 / 0.8); }
html .text-amber-900     { color: #123c76; }
html .text-amber-950     { color: #071c3d; }
html .text-orange-800    { color: #14478a; }
html .hover\:text-amber-600:hover { color: #1a63bd; }
html .hover\:text-amber-700:hover { color: #17539c; }
html .hover\:text-amber-800:hover { color: #14478a; }
html .hover\:text-amber-950:hover { color: #071c3d; }

/* --- 4.3 边框 / ring --- */
html .border-amber-200      { border-color: #bfdcff; }
html .border-amber-200\/80  { border-color: rgb(191 220 255 / 0.8); }
html .border-amber-400      { border-color: #3189ef; }   /* 商品卡选中态 */
html .border-orange-200     { border-color: #c3ddff; }
html .ring-amber-100        { --tw-ring-color: #dcecff; }
html .ring-amber-400        { --tw-ring-color: #3189ef; } /* 商品卡选中态 */
html .hover\:border-amber-400:hover { border-color: #3189ef; }

/* --- 4.4 表单 focus --- */
html .focus\:border-amber-400:focus { border-color: #3189ef; }
html .focus\:ring-amber-100:focus   { --tw-ring-color: #dcecff; }

/* ---------------------------------------------------------------------------
 * 5. 补齐 tailwind.css 里缺失的工具类
 *    这 14 个类在 4 个页面（尤其 renew.html）里被引用，但 tailwind.css 里
 *    根本没有对应规则，所以**当前就不生效**。根因：renew.html 没被列进
 *    .xj-cursor/tw/tailwind.config.js 的 content 数组（现已补上）。
 *    这里按 Tailwind 官方定义逐字补齐 —— 值必须忠实，将来若有人重建
 *    tailwind.css，这几条会变成冗余但不会变脸。
 * ------------------------------------------------------------------------ */

/* Tailwind 3.4 没有 shadow-xs（那是 v4 的类）。4 页里写了 16 处。
 * ⚠️ 必须自带 box-shadow，不能只写变量 —— tailwind.css 里 .shadow-sm 自己
 *    不带 box-shadow，靠一条被压缩器合并的组规则 .shadow-sm,.shadow-xl{...}
 *    补上；照抄只写变量的话 ring 体系会脱钩。 */
.shadow-xs {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* renew.html 的账号信息两列栅格。⚠️ 必须包媒体查询，否则手机上也会变两列。 */
@media (min-width: 640px) {
  .sm\:grid { display: grid; }
}

.gap-x-4 { column-gap: 1rem; }
.gap-y-1 { row-gap: 0.25rem; }
.mt-8    { margin-top: 2rem; }

.focus\:border-slate-500:focus { border-color: #64748b; }

.underline-offset-2 { text-underline-offset: 2px; }

/* 语义色（成功/错误）保持原义，只是补上缺失的定义 */
.hover\:bg-emerald-100:hover { background-color: #d1fae5; }
.text-emerald-900            { color: #064e3b; }
.text-emerald-900\/80        { color: rgb(6 78 59 / 0.8); }
.text-rose-700               { color: #be123c; }
.text-rose-900               { color: #881337; }

/* ---------------------------------------------------------------------------
 * 6. 圆角：向参考站更紧的几何微调一档
 * ------------------------------------------------------------------------ */
html .rounded-xl  { border-radius: var(--radius-control); }
html .rounded-2xl { border-radius: var(--radius-card); }

/* ---------------------------------------------------------------------------
 * 7. 应用外壳：左侧栏 + 内容列
 *
 * 参考站（bewild.ai/subscribe）的骨架是「固定左栏 + 右侧内容列」，不是顶栏。
 * 尺寸取自实测：导航项 180×48、圆角 12px、选中底色 rgb(244,243,240)、
 * 分隔线 1px #eeeeee。左栏宽 = 180 + 两侧 24 内边距 = 228。
 *
 * 布局用 grid 而不是嵌套 div：<main> 与 <footer> 仍然是 .app-shell 的直接
 * 子元素，所以这两个标签**内部一行都不用动**（含缩进），外壳改造的 diff
 * 只落在 body 那一行和 <header> 那一块。
 *
 * 本节的类名全是新造的（app-* / brand-mark / is-active），与 tailwind.css
 * 里任何工具类都不重名 —— 不存在层叠打架。不需要 html 前缀。
 * ------------------------------------------------------------------------ */
:root {
  /* 左栏：导航项 180 + 两侧内边距 24*2 + 1px 分隔线 = 229，再给品牌文字留 31。
     260 这个数不是为了好看，是"180 的导航项 + 品牌文字不折行"两头夹出来的。 */
  --rail-w: 260px;
  --rail-pad: 24px;
  --hairline: #eeeeee;
  --ink: #0a0a0a;
  /* 参考站的正文灰是 #979797，但中文在白底上只有 3.5:1，压深一档过 AA */
  --ink-soft: #6b7280;
  --app-max: 1040px;
}

.app-shell {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  min-height: 100vh;
}

.app-rail {
  grid-column: 1;
  grid-row: 1 / span 2;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: var(--rail-pad) 0;
  border-right: 1px solid var(--hairline);
}

.app-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 var(--rail-pad);
  text-decoration: none;
}

/* min-width:0 是必须的：否则 flex 子项不会收缩，文字会撑破左栏而不是被
   下面两条 nowrap 规则截住。 */
.app-brand-text {
  min-width: 0;
}

/* 品牌两行都 nowrap —— 宁可让 verify-shell.cjs 量出溢出数字，也不要它悄悄
   折成"ChatGPT 订 / 阅中心"那种断字。 */
.app-brand-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
}

.app-brand-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
}

.app-brand-pill {
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.5;
}

.app-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px var(--rail-pad) 0;
  border-top: 1px solid var(--hairline);
}

.app-rail-link {
  display: flex;
  align-items: center;
  gap: 10px;
  /* 定死 180，与参考站实测一致；不写的话会被 flex 拉满整栏 */
  width: 180px;
  height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  color: var(--ink-soft);
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

.app-rail-link svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.app-rail-link:hover {
  background: #f7f7f7;
  color: var(--ink);
}

.app-rail-link.is-active {
  background: rgb(244 243 240);
  color: var(--ink);
}

.app-main {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  max-width: var(--app-max);
  margin-inline: auto;
  padding: 40px 32px 32px;
}

.app-footer {
  grid-column: 2;
  grid-row: 2;
}

.app-wrap {
  width: 100%;
  max-width: var(--app-max);
  margin-inline: auto;
  padding-inline: 32px;
}

/* 手机 / 平板：左栏折成顶部横条（横向可滚），内容列独占一行。
   不这么做的话 228px 的固定左栏会在 375px 宽的屏上吃掉多半个视口。 */
@media (max-width: 1023px) {
  .app-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
  }

  .app-rail {
    grid-column: 1;
    grid-row: 1;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    height: auto;
    padding: 10px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
    background: rgb(255 255 255 / 0.92);
    backdrop-filter: blur(10px);
    z-index: 40;
    overflow-x: auto;
    overflow-y: hidden;
  }

  /* 手机上只留标志，品牌文字让位给导航 */
  .app-brand { padding: 0; }
  .app-brand-text { display: none; }

  .app-nav {
    flex-direction: row;
    gap: 2px;
    padding: 0;
    border-top: 0;
    min-width: 0;
  }

  /* 390px 宽的屏放不下 4 个「图标 + 四字」，会挤掉最后一项。
     去掉图标（导航项本身有文字），并把每一项收窄，四项就都在屏内了。 */
  .app-rail-link {
    width: auto;
    height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 0.8125rem;
    white-space: nowrap;
  }

  .app-rail-link svg { display: none; }

  .app-main {
    grid-column: 1;
    grid-row: 2;
    padding: 24px 16px 24px;
  }

  .app-footer {
    grid-column: 1;
    grid-row: 3;
  }

  .app-wrap { padding-inline: 16px; }
}