/* 九层台产品线 · 共用骨架样式
 * 全站（首页 /plan/ /do/ /vista/）共用：设计变量、导航、产品互链、页脚、通用按钮。
 * 每个页面只保留自己的 <style>，其它一律引用本文件，避免各页各写一套导致框架漂移。
 * 维护时改这里 = 四个页面同时生效。
 */

:root{
  --bg:#F6F6F3;
  --surface:#FFFFFF;
  --surface2:#FBFAF7;
  --ink:#2C2C2A;
  --ink2:#6B6A65;
  --ink3:#9C9A92;
  --line:#E7E5DE;
  --brand:#534AB7;
  --brand-soft:#EEEDFE;
  --danger:#B3261E;      /* 退出/删除类操作 */
  --danger-soft:#FDECEA;
  --green:#3B6D11;
  --green-soft:#EAF3DE;
  --gold:#854F0B;      /* logo 深琥珀 */
  --gold-mid:#BA7517;  /* logo 中琥珀 */
  --gold-lit:#EF9F27;  /* logo 亮琥珀 */
  --gold-bg:#FAEEDA;   /* logo 底色 */
  --radius:16px;
  --shadow:0 1px 2px rgba(44,44,42,.04),0 8px 24px rgba(44,44,42,.06);
  --shadow-lg:0 2px 4px rgba(44,44,42,.05),0 16px 48px rgba(44,44,42,.10);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;display:flex;flex-direction:column;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* ── 顶部导航（四页一致）──────────────────── */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(250,248,243,.82);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .25s,box-shadow .25s;
}
.nav.stuck{border-bottom-color:var(--line);box-shadow:0 1px 12px rgba(38,35,30,.05)}
.nav-in{display:flex;align-items:center;gap:16px;height:64px}

/* 返回父站点 www.menciu.com（www.menciu.com 是 terrace 的上级站点） */
.nav-back{
  display:inline-flex;align-items:center;gap:5px;flex:none;
  padding:5px 12px 5px 8px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);
  font-size:13px;color:var(--ink2);white-space:nowrap;
  transition:color .2s,border-color .2s,background .2s;
}
.nav-back:hover{color:var(--brand);border-color:var(--brand);background:var(--brand-soft)}
.nav-back svg{flex:none}
.nav-back .bk-t{letter-spacing:.2px}

.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;letter-spacing:.5px}
.logo svg{display:block;flex:none;border-radius:7px}
.nav-links{display:flex;gap:24px;margin-left:auto;font-size:14.5px;color:var(--ink2)}
.nav-links a{transition:color .2s}
.nav-links a:hover{color:var(--brand)}
.nav-links a[aria-current="page"]{color:var(--brand);font-weight:600}
.nav-cta{
  margin-left:24px;padding:8px 18px;border-radius:999px;
  background:var(--brand);color:#fff;font-size:14.5px;font-weight:500;
  transition:transform .2s,box-shadow .2s;
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(83,74,183,.28)}

/* ── app 页顶栏的次级操作（返回首页 / 退出登录）────────────
   /do/app、/vista/app、/plan/app 共用；plan-workbench 顶栏用的是自己的 .tbtn，
   但同样要挂这两个入口，改样式时两边都要看。 */
.nav-mini{
  display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);
  font-size:14px;color:var(--ink2);white-space:nowrap;
  transition:color .2s,border-color .2s,background .2s;
}
.nav-mini:hover{color:var(--brand);border-color:var(--brand);background:var(--brand-soft)}
.nav-mini svg{flex:none}
.nav-exit:hover{color:var(--danger);border-color:var(--danger);background:var(--danger-soft)}

/* ── 页面上方产品互链（四页一致）──────────── */
.switcher{background:var(--surface2);border-bottom:1px solid var(--line)}
.sw-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding:20px 24px 0}
.sw-title{font-size:19px;font-weight:700;letter-spacing:.5px}
.sw-sub{font-size:13px;color:var(--ink3);letter-spacing:.2px}
.sw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:13px 24px 22px}
.sw{
  display:block;padding:12px 16px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface);
  transition:transform .2s,border-color .2s,background .2s;
}
.sw:hover{transform:translateY(-2px);border-color:var(--brand);background:var(--brand-soft)}
.sw.is-on{background:var(--brand-soft);border-color:var(--brand)}
.sw-k{display:block;font-size:15px;font-weight:600;letter-spacing:.5px}
.sw-v{display:block;font-size:12.5px;color:var(--ink3);margin-top:2px;line-height:1.5}
.sw.is-on .sw-v{color:var(--brand);opacity:.8}

/* ── 通用元素 ────────────────────────────── */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 14px;border-radius:999px;
  background:var(--brand-soft);color:var(--brand);
  font-size:13px;font-weight:500;letter-spacing:.3px;
}
h1{font-size:clamp(30px,4.8vw,46px);line-height:1.2;letter-spacing:1.5px;margin:20px 0 10px}
h1 .accent{color:var(--brand)}
/* 产品名着色：九层台在左、产品线名在右，与 do/vista/app 各页一致 */
h1 .dot{color:var(--brand)}
h1 .sub{color:var(--gold-mid)}
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:12px;
  font-size:15.5px;font-weight:500;
  transition:transform .2s,box-shadow .2s,border-color .2s,color .2s;
}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 4px 14px rgba(83,74,183,.22)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(83,74,183,.30)}
.btn-ghost{background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--brand);color:var(--brand)}
.btn svg{flex:none}
.badge{
  display:inline-block;padding:2px 8px;border-radius:6px;vertical-align:middle;
  background:var(--green-soft);color:var(--green);font-size:12px;font-weight:500;margin-left:8px;
}
.badge.soon{background:var(--surface2);color:var(--ink3);border:1px solid var(--line)}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
/* Hero 通用留白；首页等居中版式再加 .center */
.hero{padding:72px 0 56px}
.hero.center{text-align:center}

/* 规划中页面的居中版式（/do/、/vista/ 共用） */
main.page-center{flex:1;display:flex;align-items:center;padding:64px 0;background:var(--bg)}
.page-center .wrap{max-width:720px;text-align:center}
.page-center .lead{font-size:17px;color:var(--ink2);margin-bottom:8px;letter-spacing:.5px}
.page-center .note{font-size:15px;color:var(--ink2);max-width:30em;margin:14px auto 0;text-align:left}
/* 规划方向列表（文案定稿前不改承诺口径） */
.dir{list-style:none;max-width:34em;margin:26px auto 0;text-align:left}
.dir li{
  display:flex;gap:14px;padding:11px 0;border-top:1px solid var(--line);
  font-size:14.5px;color:var(--ink2);line-height:1.6;
}
.dir li:first-child{border-top:0}
.dir .d-k{flex:none;width:76px;color:var(--ink);font-weight:600;font-size:14px;letter-spacing:.5px}
.dir .d-v{color:var(--ink2)}
.hint{margin-top:20px;font-size:13px;color:var(--ink3)}

/* ── 产品线 app 页（/plan/app、/do/app、/vista/app）共用 ──
   /plan/app 已经指向真实应用；另两条线在应用做完之前先落在同一个 app 壳上，
   占位态共用下面这套版式。将来真做出来，只需把 .app-slot 换成真实挂载点，
   页面结构与 nginx 路由都不用再动。 */
.app-state{
  display:inline-block;vertical-align:middle;margin-left:10px;
  padding:4px 12px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface2);color:var(--ink3);
  font-size:13px;font-weight:500;letter-spacing:.3px;
}
/* 应用窗口占位区：一个虚线框 + 几条骨架条，明示「这里是应用，还没长出来」 */
.app-slot{
  max-width:640px;margin:30px auto 0;padding:40px 24px;text-align:center;
  border:1px dashed var(--line);border-radius:var(--radius);background:var(--surface);
}
.app-slot .sk{width:62%;height:10px;margin:10px auto;border-radius:6px;background:var(--surface2)}
.app-slot .sk.w2{width:44%}
.app-slot .sk.ph{
  width:100%;height:64px;margin:18px auto 6px;border-radius:12px;
  border:1px dashed var(--line);background:transparent;
}
.app-slot .sk-t{font-size:13.5px;color:var(--ink3);margin-top:14px;letter-spacing:.3px}

/* ── 页脚（四页一致，备案号位置固定）──────── */
footer{flex:none;margin-top:auto;background:#F1F0EA;border-top:1px solid var(--line);padding:30px 0}
.foot-in{display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;align-items:center;
  font-size:13px;color:var(--ink3)}
.foot-links{display:flex;flex-wrap:wrap;gap:18px}
.foot-links a{transition:color .2s}
.foot-links a:hover{color:var(--brand)}
.beian{border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.beian:hover{color:var(--brand);border-bottom-color:var(--brand)}
/* 父站点 www.menciu.com（最终落地页） */
.foot-parent{color:var(--ink2);font-weight:500}
.foot-parent:hover{color:var(--brand)}

/* ── 动效 ───────────────────────────────── */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.3,1)}
.reveal.in{opacity:1;transform:none}

/* ── 响应式 ────────────────────────────────
   断点：900 收起主导航 / 720 单列产品互链 / 560 极窄屏。
   一律遵守：不出现横向滚动条、点按区域不小于 40px、字号随视口收缩。 */
@media (max-width:900px){
  .nav-links{display:none}
  .nav-cta{margin-left:auto}
  section{padding:52px 0}
  .hero{padding:52px 0 40px}
  .views{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .wrap{padding:0 18px}
  .sw-head{padding:16px 18px 0;gap:2px 10px}
  .sw-title{font-size:16.5px}
  .sw-grid{grid-template-columns:1fr;gap:8px;padding:10px 18px 18px}
  .sw{display:flex;align-items:baseline;gap:12px;padding:10px 14px}
  .sw-k{flex:none;width:62px}
  .sw-v{margin-top:0}
}
@media (max-width:560px){
  /* 窄屏：返回按钮只留箭头，标题与按钮同步收缩，避免顶栏换行 */
  .nav-in{gap:10px;height:58px}
  .nav-back{padding:6px 9px 6px 6px;gap:2px}
  .nav-back .bk-t{display:none}
  .logo{font-size:15.5px;gap:7px}
  .logo svg{width:26px;height:26px}
  .nav-cta{margin-left:auto;padding:7px 13px;font-size:13.5px}
  /* 窄屏顶栏只留图标，避免「返回箭头 + logo + 首页 + 退出 + 主按钮」挤成两行 */
  .nav-mini{padding:6px 9px;font-size:13px;gap:3px}
  .nav-mini .hk-t{display:none}
  .hero{padding:38px 0 30px}
  h1{font-size:clamp(24px,7vw,32px)}
  .eyebrow{font-size:12.5px;padding:4px 12px}
  .btn{padding:12px 20px;font-size:15px;flex:1 1 auto;justify-content:center}
  .hero-btns{gap:10px}
  .sw-grid{gap:6px;padding:8px 18px 16px}
  .sw{padding:9px 13px;gap:10px}
  /* 长英文/长链接不撑破容器 */
  body{overflow-wrap:anywhere}
  footer{padding:24px 0 calc(24px + env(safe-area-inset-bottom))}
  .foot-in{flex-direction:column;align-items:flex-start;gap:12px}
  .foot-links{gap:14px}
}
/* 全面屏安全区（iPhone 刘海/底部横条） */
.nav{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);
  padding-top:env(safe-area-inset-top)}
main,section,.switcher,.hero{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
footer{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}