/* theme.css —— 前台配色中枢。
 * index / pay / tutorials 三个页面共用这一份变量；各页面自己的 CSS 只引用变量、不再写死颜色值。
 * 换主题只改下面「调色板」那一段，其它文件一律不用动。
 *
 * 文件分三段：
 *   ① 语义色与尺寸 —— 不参与换肤（红=价格/告警、绿=成功、黄=注意）
 *   ② 调色板 —— 三套备选，同一时刻只留一套不注释
 *   ③ 备选注释 —— 想换就把当前那套注释掉，解开另一套
 *
 * 当前启用：方案 B · 藏蓝 → 天青（#1d4ed8 → #0ea5e9）。
 * 上一版是青碧（teal），再上一版是靛蓝紫；三套的结构与尺寸完全一致，只是色相不同。 */
:root{
  /* ── ① 语义色：只表达含义，不跟主色混用 ───────────────────────── */
  --price:#e2554f;
  --hot:#f97316;
  --danger:#c0392b;
  --dangerText:#a02622;
  --dangerWeak:#fdecea;
  --dangerLine:#f0b8b5;
  --ok:#12795c;
  --okWeak:#f0fdf6;
  --okLine:#b4e5cb;
  --warn:#a9761a;
  --warnWeak:#fffaef;
  --warnLine:#f0dcb5;

  /* 尺寸与卡片阴影的中性部分 */
  --radius:14px;
  --cardShadow:0 4px 20px rgba(20,60,80,.08);

  /* ── ② 调色板（当前：方案 B · 藏蓝 → 天青）─────────────────────── */
  /* 主色三档：--brand 用于按钮/链接/选中描边，--brand2 是渐变亮端，--brandDeep 是渐变暗端与正文小标题 */
  --brand:#2563eb;
  --brand2:#0ea5e9;
  --brandDeep:#1d4ed8;
  /* 主色的低饱和衬底：选中块、标签底、说明框、虚线框内部 */
  --brandWeak:#eef4ff;
  --brandWeak2:#f3f8ff;
  --brandLine:#c3d8f7;
  --brandGlow:rgba(37,99,235,.28);
  --brandGlow2:rgba(37,99,235,.12);
  --brandShadow:0 8px 20px rgba(37,99,235,.16);

  /* 页面底色与文字三级灰 */
  --bg:linear-gradient(160deg,#f3f7ff 0%,#edf3fa 50%,#f2f8ff 100%);
  --text:#14202d;
  --text2:#5a6879;
  --text3:#7d8b99;
  --line:#e2eaf3;
  --line2:#f6f9fc;
  --chip:#f3f6fa;
  --inputBg:#fafcfe;
}

/* ── ③ 备选调色板：换主题时把上面 ② 那几行注释掉，解开下面任意一套 ────────
 *
 * 方案 A · 青碧（墨青 → 青蓝）—— 底色最沉，和绿色语义块区分略近
 * :root{
 *   --brand:#0d9488; --brand2:#0891b2; --brandDeep:#0f766e;
 *   --brandWeak:#ecfdf9; --brandWeak2:#f2fdfc; --brandLine:#b7e7e0;
 *   --brandGlow:rgba(13,148,136,.30); --brandGlow2:rgba(13,148,136,.14);
 *   --brandShadow:0 8px 20px rgba(13,148,136,.16);
 *   --bg:linear-gradient(160deg,#f2fbfa 0%,#edf6f8 50%,#f1f7ff 100%);
 *   --text:#14242b; --text2:#5c6b73; --text3:#7b8b94;
 *   --line:#e3edef; --line2:#f6fafb; --chip:#f3f7f8; --inputBg:#fafcfc;
 * }
 *
 * 方案 C · 墨紫 → 玫瑰（最轻奢，但和价格红略近，活动色要克制）
 * :root{
 *   --brand:#7c4dff; --brand2:#c026d3; --brandDeep:#5b21b6;
 *   --brandWeak:#f6f2ff; --brandWeak2:#faf7ff; --brandLine:#ded2f7;
 *   --brandGlow:rgba(124,77,255,.28); --brandGlow2:rgba(124,77,255,.12);
 *   --brandShadow:0 8px 20px rgba(124,77,255,.16);
 *   --bg:linear-gradient(160deg,#f7f3ff 0%,#f2eef8 50%,#fdf2ff 100%);
 *   --text:#1e1830; --text2:#615a72; --text3:#8a8299;
 *   --line:#ece5f6; --line2:#f9f6fd; --chip:#f5f2fa; --inputBg:#fdfbfe;
 * }
 * ───────────────────────────────────────────────────────────────────────── */

/* ---------------- 微信 / 支付宝品牌图标 ----------------
 * 用内联 SVG（data URI）画，不用系统 emoji：emoji 在 Windows / 安卓 / iOS 上形状差得很多，
 * 而“绿心 + 蓝钻”这两个色块本身也代表不了这两个品牌，看着像装饰不像支付方式。
 * 前台三个页面都加载 theme.css，所以这里定一份就够；后台不加载本文件，
 * admin.css 里有一份完全一样的规则 —— 改图标时两处一起改。 */
.pico{display:inline-block;vertical-align:-3px;background-repeat:no-repeat;background-position:center center;background-size:contain}
.pico-wx{width:18px;height:18px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M6 17.8L3.2 21l4.6-1.6z' fill='%2307C160'/%3E%3Cellipse cx='11.5' cy='11' rx='9.8' ry='8' fill='%2307C160'/%3E%3Cpath d='M24.8 23.4l2.6 2.4-3.8-.9z' fill='%2307C160'/%3E%3Cellipse cx='20' cy='18.6' rx='7.4' ry='6' fill='%2307C160' stroke='%23fff' stroke-width='1.8'/%3E%3Ccircle cx='8.6' cy='9.4' r='1.15' fill='%23fff'/%3E%3Ccircle cx='14.4' cy='9.4' r='1.15' fill='%23fff'/%3E%3Ccircle cx='17.4' cy='17.6' r='1' fill='%23fff'/%3E%3Ccircle cx='22.2' cy='17.6' r='1' fill='%23fff'/%3E%3C/svg%3E")}
.pico-ali{width:18px;height:18px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Crect x='.5' y='.5' width='27' height='27' rx='6' fill='%231677FF'/%3E%3Ctext x='14' y='20.5' text-anchor='middle' font-size='15' font-weight='700' fill='%23fff'%3E%E6%94%AF%3C/text%3E%3C/svg%3E")}