/* ============================================================
   谋爱MOELEX · 全站设计基线 (V9 几何粗体 · 2026-09-01 定版)
   由 preview-home-geometric.html (V7定版) 提炼：
   - 顶部黑色版头（黄色 AI 情感军师眉标 + 白色谋爱 + 黄色 MOELEX + 墨绿副标 + 三短语短竖线）
   - 章节头：4px 黑色顶线 + 绿色『…』标题 + 右上英文眉标
   - 内容卡片：白底 + 1px 黑色边框 + 8px 黑色偏移阴影 + hover 浮起 6px
   - 数字托底：Impact 几何粗体 + 浅灰半透明
   - CTA：黄底黑字 + 8px 黑阴影 + 红色 em 强调 + 进度条
   - 我的 / 列表：白面板 + 黑阴影子项 + 红箭头
   - 指引：details + 黑边 + 红 / 减号开关
   - 底部导航：黑底黄字（active）/ 黑字
   - 颜色：黑 #000 / 白 #fff / 红 #D5232A / 黄 #FFD800 / 墨绿 #1E6B4B / 灰 #575757
   ============================================================ */
:root{
  --k:#000; --w:#fff;
  --red:#D5232A; --yel:#FFD800; --grn:#1E6B4B;
  --gray:#575757;
  /* 后台兼容令牌：替代已移除的旧首页样式，保持 Geometric Bold 调色。 */
  --bg:#F4F2EB;
  --card:var(--w);
  --text:var(--k);
  --muted:var(--gray);
  --border:var(--k);
  --radius:8px;
  --shadow:6px 6px 0 var(--k);
  --rose:var(--grn);
  --grad:linear-gradient(135deg, var(--grn), var(--k));
  --pad:clamp(20px,6vw,72px);
  --nav-h:45px;
  --topbar-h:64px;
  --rose-deep:#D5232A;
  --rose-soft:#FFE9EA;
  --grn-soft:#D8F0E4;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{font-size:16px;}
body{
  font-family:"PingFang SC","HarmonyOS Sans SC","Source Han Sans SC","Microsoft YaHei",sans-serif;
  background:var(--w); color:var(--k); font-weight:400; line-height:1.6;
  padding-bottom:env(safe-area-inset-bottom);
  overflow-x:hidden;
}
@keyframes pageEnter{from{opacity:0;clip-path:inset(0 0 6% 0)}to{opacity:1;clip-path:inset(0)}}
body.page-enter{animation:pageEnter 1.15s cubic-bezier(.16,1,.3,1) both;}
@media(prefers-reduced-motion:reduce){body.page-enter{animation:none;}}

/* —— 前台统一图片 Logo ——
   头部与页脚改用左侧裁齐的 moelex-logo-light-trim.png（2058×724）。
   原图 moelex-logo-light.png（2172×724）左侧带 114px 透明留白（占宽 5.25%），
   会把 Logo 视觉左边界从容器边距推开约 8px（页脚约 7px）。
   裁剪后按 2058/2172 = 0.9475 等比折算 CSS 宽度，字形大小与原图完全一致：
   头部 150→142 / 132→125 / 112→106，页脚 128→121 / 108→102。
   首页 hero 与 og-cover 是居中排版，继续用原图，不受影响。 */
.brand-logo{display:block;width:140px;max-width:100%;height:auto;object-fit:contain;}
.brand-logo--hero{width:clamp(300px,32vw,340px);max-width:calc(100vw - 40px);}
.brand-logo--footer{width:121px;max-width:100%;transform:translateY(-2px);}
@media(max-width:480px){.brand-logo{width:112px;}.brand-logo--hero{width:min(78vw,300px);}.brand-logo--footer{width:102px;}}
/* 登录/注册保持独立布局，沿用原 Logo 尺寸（不共用 .ml-head 外壳）。 */
.login-head .brand-logo{width:150px;}
@media(max-width:720px){.login-head .brand-logo{width:132px;}}
/* 现有独立页的深色容器统一使用浅色 Logo 图片。 */
.brand-side .brand-logo,.top-wrap .brand-logo{content:url('/assets/moelex-logo-light.png');}

/* ============================================================
   全站统一头部外壳（唯一来源）
   使用页面：/ 、/pricing 、/info/* 、/me 、/chat
   不使用：/login 、/register（独立登录布局）、admin*（不共用前台外壳）
   结构：.ml-head > .ml-head-in > .ml-head-brand
                                + [ .ml-head-toggle + .ml-head-start-mobile ]
                                + .ml-head-nav > a(.ml-head-cta)
   说明：外壳（黑底 / 高度 / Logo / 左右边距 / 垂直对齐 / 移动端折叠菜单）在此统一；
         右侧导航项与功能位由各页调用 partial 时传入，不强行统一成同一组按钮。
   ⚠️ .ml-head-toggle 与 .ml-head-nav 上各页自己那套 class 与 id 是页面内联脚本
      的钩子（菜单折叠），改名会打断事件绑定。
   ============================================================ */
:root{ --head-h:64px; }
.ml-head{ background:var(--k); color:var(--w); }
.ml-head-in{
  max-width:1280px; margin:0 auto;
  min-height:var(--head-h); box-sizing:border-box;
  display:flex; align-items:center; gap:20px;
  padding:0 clamp(16px,3vw,32px);
}
.ml-head-brand{flex:none; min-width:0; display:flex; align-items:center; text-decoration:none; color:inherit; cursor:pointer;}
.ml-head .brand-logo{width:142px; height:auto;}
.ml-head-toggle,.ml-head-start-mobile{display:none;}
/* 右侧功能组（汉堡 + 移动端 CTA）。PC 下两个子项都是 display:none，本组宽 0，不影响右侧导航。 */
.ml-head-actions{display:flex; align-items:center; gap:18px; flex:none;}
.ml-head-nav{margin-left:auto; display:flex; align-items:center; gap:18px;}
.ml-head-nav a{color:var(--w); font-size:14px; font-weight:800; text-decoration:none; white-space:nowrap;}
.ml-head-nav .ml-head-cta{background:var(--yel); color:var(--k); padding:9px 14px;}
@media(max-width:760px){
  :root{ --head-h:56px; }
  .ml-head-in{position:relative; padding:0 16px; gap:12px;}
  .ml-head .brand-logo{width:125px;}
  /* 有 CTA 时排成 LOGO｜自适应空白｜汉堡｜开始聊聊；无 CTA 时汉堡自己靠右。 */
  .ml-head-actions{margin-left:auto; gap:10px;}
  /* 三横线汉堡：44×44 点击区（与 /chat 的 .menu-btn 同规格），不再出现「菜单」文字 */
  .ml-head-toggle{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
    width:44px; height:44px; margin-left:0; padding:0;
    border:0; background:transparent; cursor:pointer;
    transition:background .15s ease;
  }
  .ml-head-toggle:hover{background:rgba(255,255,255,.08);}
  .ml-head-toggle > span{display:block; width:22px; height:2.5px; background:var(--yel);}
  .ml-head-start-mobile{display:block; background:var(--yel); color:var(--k); padding:7px 10px; text-decoration:none; font-size:13px; font-weight:900; white-space:nowrap;}
  .ml-head-nav{display:none; position:absolute; z-index:10; top:100%; left:0; right:0; margin:0; padding:10px 16px 16px; background:var(--k); border-top:1px solid rgba(255,255,255,.08); flex-direction:column; align-items:stretch; gap:0;}
  .ml-head-nav.open{display:flex;}
  .ml-head-nav a{display:block; padding:11px 0; font-size:13px;}
  .ml-head-nav .ml-head-cta{display:none;}
}
@media(max-width:360px){ .ml-head .brand-logo{width:106px;} }
.wrap{max-width:1100px; margin:0 auto;}
.mono{font-family:"SF Mono",Menlo,Consolas,"Courier New",monospace;}

/* —— 栏目标签 —— */
.lbl{
  font-family:"SF Mono",Menlo,Consolas,monospace;
  font-size:.78rem; font-weight:700; letter-spacing:.42em; text-transform:uppercase;
}

/* —— 章节头 —— */
.sec{padding:clamp(36px,6.5vw,80px) var(--pad) 0;}
.sec-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  border-top:4px solid var(--k); padding-top:12px; margin-bottom:clamp(18px,3.5vw,32px);
}
.sec-title{font-size:clamp(1.44rem,3.84vw,2.16rem); font-weight:900; letter-spacing:.12em; line-height:1; color:var(--grn);}
.sec-head .lbl{color:var(--grn); font-size:clamp(.92rem,2.6vw,1.15rem);}

/* —— 通用面板：白底 + 黑色 1px 边 + 8px 黑色偏移阴影 + hover 浮起 —— */
.panel{
  background:var(--w);
  border:1px solid var(--k);
  box-shadow:8px 8px 0 var(--k);
  transition: transform .22s ease, background .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.panel:hover{
  transform: translate(-6px, -6px);
  background:var(--grn); color:var(--w);
  border-color:var(--grn);
  box-shadow:0 0 0 var(--k);
}
.panel.no-shift{transition:none;box-shadow:none;border:none;background:transparent;}
.panel.no-shift:hover{transform:none;background:transparent;color:inherit;border:none;box-shadow:none;}

/* —— 顶部：黑色版头（可全宽） —— */
.mast{
  width:100vw; margin-left:calc(-50vw + 50%);
  background:var(--k); color:var(--w);
}
.mast.hero-only{padding:clamp(20px,4vw,32px) var(--pad);}
.hero{
  display:flex; flex-direction:column; align-items:center;
  padding:clamp(24px,4.5vw,44px) var(--pad) clamp(20px,3.5vw,32px);
  overflow:hidden;
}
.hero-tag{
  background:none; color:var(--yel);
  font-size:clamp(.92rem,2.4vw,1.1rem); font-weight:800; letter-spacing:.18em; text-indent:.18em;
}
.hero-slogan{
  color:var(--grn);
  font-size:clamp(.85rem,3vw,1.3rem); font-weight:700; line-height:1.5;
  letter-spacing:.05em; white-space:nowrap;
  margin-top:clamp(14px,2.6vw,24px);
}
.hero-slogan mark{color:var(--yel); font-weight:900; background:none;}
.hero-slogan::before{content:"『"; color:var(--yel); margin-right:.08em;}
.hero-slogan::after{content:"』"; color:var(--yel); margin-left:.08em;}
.hero-foot{
  display:flex; justify-content:center;
  margin-top:clamp(16px,3vw,28px);
}
.hero-strip{display:inline-flex; align-items:center;}
.hero-motto{
  color:rgba(255,255,255,.62);
  font-weight:700;
  font-size:clamp(.7rem,1.8vw,.82rem);
  letter-spacing:.3em; text-indent:.3em;
  padding:0 1.3em;
}
.hero-div{
  width:1px; height:.8em;
  background:rgba(255,255,255,.4); flex:none;
}

/* —— 二级页头部：黑色横条 + 返回箭头 + LOGO + 副标 —— */
.subtop{
  width:100vw; margin-left:calc(-50vw + 50%);
  background:var(--k); color:var(--w);
  padding:clamp(14px,2.4vw,22px) var(--pad);
  display:flex; align-items:center; gap:14px;
}
.subtop .back{
  color:var(--w); text-decoration:none; font-weight:900; font-size:1.3rem; line-height:1;
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.4); transition:all .2s ease; flex:none;
}
.subtop .back:hover{background:var(--yel); color:var(--k); border-color:var(--yel);}
.subtop .subtop-logo{
  display:flex; flex-direction:column; flex:1; min-width:0;
}
.subtop .subtop-cn{
  display:flex; justify-content:space-between; align-items:baseline;
  color:var(--w); font-size:clamp(1.5rem,5.2vw,2.2rem); font-weight:900; line-height:1; letter-spacing:.02em;
}
.subtop .subtop-en{
  color:var(--yel); font-weight:900; line-height:1;
  font-family:Impact,"Arial Black","Haettenschweiler","Arial Narrow Bold",sans-serif;
  font-size:clamp(.85rem,2.4vw,1.1rem); letter-spacing:.04em;
  margin-top:6px;
  display:flex; justify-content:space-between;
}
.subtop .subtop-tag{
  color:var(--yel); font-weight:800; font-size:clamp(.7rem,1.8vw,.85rem); letter-spacing:.2em;
  white-space:nowrap;
}

/* —— 核心能力：mosaic 拼接 —— */
.mosaic{display:grid; grid-template-columns:repeat(2,1fr); grid-auto-rows:minmax(120px,auto); gap:18px; background:var(--w);}
.cell{
  position:relative; padding:clamp(14px,2.4vw,26px); display:flex; flex-direction:column; justify-content:flex-start;
  border:1px solid var(--k); box-shadow:6px 6px 0 var(--k);
  overflow:hidden;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease;
}
.cell:hover{transform:translate(-6px, -6px); box-shadow:0 0 0 transparent;}
.cell .lbl{
  margin-bottom:auto;
  font-size:clamp(.78rem,2.2vw,.95rem); letter-spacing:.35em;
  position:relative; z-index:2;
}
.cell-t{font-size:clamp(1.3rem,4vw,2.1rem); font-weight:900; line-height:1.15; letter-spacing:.03em; position:relative; z-index:2;}
.cell-d{font-size:clamp(.9rem,2.6vw,1.1rem); font-weight:600; margin-top:.4em; line-height:1.5; position:relative; z-index:2;}
.gnum{
  position:absolute; z-index:1; pointer-events:none;
  right:0; top:0;
  font-family:Impact,"Arial Black","Haettenschweiler",sans-serif;
  font-style:normal; font-weight:900; line-height:.75;
  font-size:clamp(4.5rem,17vw,9.5rem);
  letter-spacing:-.02em;
  color:rgba(120,120,120,.18);
}
.cell-dark .gnum{color:rgba(255,255,255,.2);}
.m1{grid-row:span 2; background:var(--w);}     .m1 .cell-d{color:#333;}
.m2{background:var(--yel); color:var(--k);}    .m2 .cell-d{color:#4a3a00;}
.m3{background:var(--w);}                      .m3 .cell-d{color:#333;}
.m4{grid-column:1/-1; background:var(--w);}    .m4 .cell-d{color:#333;}
.m5{background:var(--grn); color:var(--w);}    .m5 .cell-d{color:var(--grn-soft);}
.m6{background:var(--w);}                      .m6 .cell-d{color:#333;}
.m7{grid-column:1/-1; background:var(--red); color:var(--w);} .m7 .cell-d{color:var(--rose-soft);}

@media (min-width:820px){
  .mosaic{grid-template-columns:repeat(6,1fr); grid-auto-rows:minmax(160px,auto);}
  .m1{grid-column:span 2; grid-row:span 2;}
  .m2{grid-column:span 2;}
  .m3{grid-column:span 2;}
  .m4{grid-column:span 2;}
  .m5{grid-column:span 2;}
  .m6{grid-column:span 4;}
  .m7{grid-column:span 2;}
}

/* —— 通用面板：白色面板 + 黑色偏移阴影 + hover 浮动墨绿 —— */
.guide-panel{background:var(--w); transition: transform .22s ease, box-shadow .22s ease;}
.guide-panel:hover{transform: translate(-6px, -6px); box-shadow:0 0 0 transparent; background:var(--w) !important; color:var(--k) !important; border-color:var(--k) !important;}
.guide-panel summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:clamp(16px,3vw,24px) clamp(18px,3.2vw,28px);
  font-size:clamp(1rem,2.8vw,1.28rem); font-weight:900; letter-spacing:.05em;
  transition: color .2s ease;
}
.guide-panel summary::-webkit-details-marker{display:none;}
.guide-panel summary::after{content:"+"; font-size:1.6rem; font-weight:900; color:var(--red); line-height:1; flex:none;}
.guide-panel details[open] summary::after{content:"−";}
.guide-body{
  border-top:1px solid var(--k);
  padding:clamp(14px,2.8vw,22px) clamp(18px,3.2vw,28px) clamp(18px,3.2vw,26px);
  font-size:clamp(.92rem,2.5vw,1.05rem); line-height:1.75; color:#222;
}
.guide-body p{margin-bottom:10px;}

/* ============================================================
   全站统一页脚（唯一来源 · 黑色品牌版）
   使用页面：首页 / /pricing / /info/* / /me
   不使用：/chat（独立工作台）/ /login / /register / admin*
   结构：.foot > .foot-in > (.foot-top > .foot-brand + .foot-links)
                              + .foot-legal + .foot-copy
   DOM 唯一来源：views/partials/footer.ejs
   配色：黑底 + 白色 Logo(moelex-logo-light-trim.png) + 白色链接(hover 品牌黄)
         + 弱化浅灰说明文字；内部不使用任何分隔线，靠留白分层。
   响应式：PC 与手机共用同一套结构，仅靠 flex-wrap 与 clamp() 自适应。
   ============================================================ */
.foot{
  width:100vw; margin-left:calc(-50vw + 50%);
  margin-top:clamp(28px,4vw,44px);
  border-top:2px solid var(--k);
  background:var(--k); color:var(--w);
}
.foot-in{
  max-width:1280px; margin:0 auto;
  /* 上下留白 2026-09-15 再收紧约 13%（30→26 / 手机 20→18） */
  padding:clamp(18px,2.8vw,26px) clamp(20px,3vw,32px);
}
.foot-top{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:clamp(12px,2vw,20px);
  padding-bottom:clamp(12px,2vw,16px);
}
.foot-brand{display:flex; align-items:center; gap:.45em; flex-wrap:wrap;}
.foot-links{display:flex; flex-wrap:wrap; gap:.4em 1.4em;}
.foot-links a{
  color:var(--w); text-decoration:none;
  font-size:clamp(.78rem,1.9vw,.86rem); font-weight:800; letter-spacing:.04em;
  padding-bottom:2px; border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.foot-links a:hover{color:var(--yel); border-bottom-color:var(--yel);}
.foot-legal{
  margin:clamp(10px,1.7vw,14px) 0 0; max-width:78em;
  font-size:clamp(.68rem,1.7vw,.74rem); font-weight:600; line-height:1.9; color:#9B9B9B;
}
.foot-copy{
  margin:clamp(10px,1.6vw,14px) 0 0; padding-top:clamp(10px,1.5vw,13px);
  font-size:clamp(.66rem,1.65vw,.72rem); font-weight:700; color:#8A8A8A; letter-spacing:.02em;
}
@media(max-width:640px){
  .foot{width:100%; margin-left:0;}
  .foot-in{padding-left:16px; padding-right:16px;}
}

/* —— 底部导航 —— */
.bottom-nav{
  position:fixed; left:50%; transform:translateX(-50%); bottom:0; z-index:50;
  width:1100px; max-width:100%;
  height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--w); border-top:1px solid var(--k);
  display:flex;
}
.bottom-nav a{
  flex:1; display:flex; align-items:center; justify-content:center;
  text-decoration:none; color:var(--k); font-weight:900;
  font-size:.95rem; letter-spacing:.35em; text-indent:.35em;
}
.bottom-nav a.active{background:var(--k); color:var(--yel);}
.bottom-nav a:active{color:var(--red);}

/* —— 通用 chip / 按钮 —— */
.chip-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px;}
.chip-pill{
  display:inline-flex; align-items:center;
  padding:6px 14px;
  background:var(--w); border:1px solid var(--k); color:var(--k);
  font-weight:700; font-size:.85rem; letter-spacing:.05em;
  transition: all .2s ease;
}
.chip-pill:hover{background:var(--yel); transform:translate(-2px, -2px); box-shadow:3px 3px 0 var(--k);}
.chip-pill.on{background:var(--k); color:var(--yel);}

/* —— 表单输入（卡片内） —— */
.field{
  display:flex; flex-direction:column; gap:6px;
}
.field label{font-size:.78rem; color:var(--gray); font-weight:700; letter-spacing:.05em;}
.field input, .field select, .field textarea{
  width:100%; padding:10px 12px; border:1px solid var(--k);
  background:var(--w); color:var(--k); font:inherit; font-size:.95rem;
  box-sizing:border-box; border-radius:0; outline:none;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--grn); box-shadow:3px 3px 0 var(--grn);
}

/* —— 通用工具：行 / 列 / 间距 —— */
.row{display:flex; gap:12px; flex-wrap:wrap;}
.col{flex:1; min-width:0;}
.gap-s{gap:8px;} .gap-m{gap:14px;} .gap-l{gap:20px;}
.mt-s{margin-top:8px;} .mt-m{margin-top:14px;} .mt-l{margin-top:22px;}
.mb-s{margin-bottom:8px;} .mb-m{margin-bottom:14px;} .mb-l{margin-bottom:22px;}

/* —— 移动端 2 列布局的颜色面板 —— */
@media (max-width:480px){
  .sec{padding:clamp(28px,6vw,48px) var(--pad) 0;}
  .cta-t{font-size:1.3rem;}
}

/* —— 桌面大屏延伸 —— */
@media (min-width:1200px){
  .wrap{max-width:1100px;}
}