/* ==========================================================================
   甜薯剧场 2.0 —— 新设计系统（叠加层）
   设计来源：Apple 色块tile + Dropbox 拼图色块 + Duolingo 唇边按钮 + Airbnb 暖米/胶囊/卡片 + Nike 大图叙事 + Stripe 精致字阶
   加载方式：在 style.css 之后引入，覆盖旧视觉；旧功能类名保留，功能不丢。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计变量
   -------------------------------------------------------------------------- */
:root{
  /* 暖中性色（Airbnb / Dropbox） */
  --bg: #F7F6F2;
  --bg-2: #FFFFFF;
  --bg-3: #F0EEE8;
  --surface: #FFFFFF;
  --surface-warm: #F4F2EC;

  --ink: #232221;
  --ink-2: #413F3D;
  --ink-3: #6E6A66;
  --ink-4: #9E9A94;
  --rule: #DFDCD6;
  --rule-strong: #C5C1BB;

  /* 甜薯品牌色 */
  --brand: #E44D2E;
  --brand-dark: #B8361C;
  --brand-light: #FCECE8;
  --brand-ink: #FFFFFF;

  /* 焦点/状态 */
  --focus: #FFD60A;
  --success: #007D48;
  --warning: #FEDF35;
  --error: #D30005;
  --info: #1151FF;

  /* 字体 */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --serif: "Noto Serif SC", "Songti SC", Georgia, "Times New Roman", serif;
  --mono: "SF Mono", SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;

  /* 字号（Nike/Stripe 式大字阶） */
  --fs-hero: clamp(48px, 8vw, 112px);
  --fs-display: clamp(36px, 5vw, 72px);
  --fs-title: clamp(28px, 3.2vw, 48px);
  --fs-h2: clamp(24px, 2.6vw, 36px);
  --fs-h3: clamp(20px, 2vw, 28px);
  --fs-h4: 20px;
  --fs-body: 17px;
  --fs-sm: 14px;
  --fs-xs: 12px;

  --fw-bold: 700;
  --fw-medium: 500;
  --fw-regular: 400;

  /* 间距（8px 基准） */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* 圆角 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* 阴影（Airbnb 式 elevation） */
  --shadow-1: 0 0 0 1px rgba(35,34,33,.04), 0 2px 4px rgba(35,34,33,.06);
  --shadow-2: 0 0 0 1px rgba(35,34,33,.04), 0 4px 12px rgba(35,34,33,.08);
  --shadow-3: 0 0 0 1px rgba(35,34,33,.04), 0 8px 28px rgba(35,34,33,.10);

  /* 动画 */
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --ease-apple: cubic-bezier(.4,0,.6,1);
  --duration-fast: .15s;
  --duration-normal: .25s;
  --duration-slow: .45s;

  --site-nav-height: 64px;
  --mobtab-height: 60px;
  --container: 1280px;
}

/* --------------------------------------------------------------------------
   2. 基础重置与排版
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.55;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img,picture,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,h6,p{margin:0}

/* 大号标题排版 */
.heading-hero{
  font-size:var(--fs-hero);
  font-weight:var(--fw-bold);
  line-height:.95;
  letter-spacing:-.03em;
}
.heading-display{
  font-size:var(--fs-display);
  font-weight:var(--fw-bold);
  line-height:1;
  letter-spacing:-.025em;
}
.heading-title{
  font-size:var(--fs-title);
  font-weight:var(--fw-bold);
  line-height:1.05;
  letter-spacing:-.02em;
}
.heading-section{
  font-size:var(--fs-h2);
  font-weight:var(--fw-bold);
  line-height:1.1;
  letter-spacing:-.015em;
}
.body-large{font-size:var(--fs-h4);line-height:1.45}
.body-secondary{color:var(--ink-3)}
.caption{font-size:var(--fs-sm);color:var(--ink-3);line-height:1.5}

/* --------------------------------------------------------------------------
   3. 动画关键帧
   -------------------------------------------------------------------------- */
@keyframes fade-up{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes scale-in{
  from{opacity:0;transform:scale(.96)}
  to{opacity:1;transform:scale(1)}
}
@keyframes curtain-left{to{transform:translateX(-100%)}}
@keyframes curtain-right{to{transform:translateX(100%)}}
@keyframes shimmer{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}
@keyframes heart-beat{
  0%,100%{transform:scale(1)}
  25%{transform:scale(1.35)}
  50%{transform:scale(1.15)}
  75%{transform:scale(1.35)}
}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
@keyframes slide-down{
  from{opacity:0;transform:translateY(-12px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes press-down{
  to{transform:translateY(4px);box-shadow:0 0 0 var(--brand-dark)}
}

/* 滚动 reveal 用类 */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .7s var(--ease-out), transform .7s var(--ease-out)}
.reveal.in{opacity:1;transform:translateY(0)}

/* --------------------------------------------------------------------------
   4. 全站导航（毛玻璃顶栏）
   -------------------------------------------------------------------------- */
.site-nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:1000;
  height:var(--site-nav-height);
  display:flex;
  align-items:center;
  padding:0 var(--space-5);
  background:rgba(247,246,242,.72);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;
  transition:background var(--duration-normal) var(--ease-soft), border-color var(--duration-normal) var(--ease-soft);
}
.site-nav.scrolled{
  background:rgba(247,246,242,.92);
  border-bottom-color:var(--rule);
}
.site-nav__inner{
  width:100%;max-width:var(--container);margin:0 auto;
  display:flex;align-items:center;gap:var(--space-4);
}
.site-nav__brand{
  display:flex;align-items:center;gap:var(--space-2);
  font-family:var(--serif);
  font-size:22px;
  font-weight:var(--fw-bold);
  color:var(--ink);
}
.site-nav__brand-mark{
  width:36px;height:36px;border-radius:var(--radius-md);
  background:var(--brand);color:var(--brand-ink);
  display:grid;place-items:center;font-size:18px;
}
.site-nav__links{
  display:none;align-items:center;gap:var(--space-1);margin-left:auto;
}
@media(min-width:834px){
  .site-nav__links{display:flex}
}
.site-nav__links a,
.site-nav__links button{
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-pill);
  font-size:var(--fs-sm);
  font-weight:var(--fw-medium);
  color:var(--ink-2);
  transition:color var(--duration-fast), background var(--duration-fast);
  background:transparent;border:0;
}
.site-nav__links a:hover,
.site-nav__links button:hover{background:var(--surface-warm);color:var(--ink)}
.site-nav__links a.on,
.site-nav__links button.on{background:var(--ink);color:var(--bg)}

/* 导航搜索胶囊 */
.nav-search{
  display:none;align-items:center;gap:var(--space-2);
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius-pill);
  padding:6px 6px 6px var(--space-4);
  box-shadow:var(--shadow-1);
  transition:box-shadow var(--duration-normal), transform var(--duration-normal);
}
@media(min-width:1024px){.nav-search{display:flex}}
.nav-search:focus-within{box-shadow:var(--shadow-2);transform:translateY(-1px)}
.nav-search input{
  border:0;background:transparent;font-size:var(--fs-sm);outline:0;width:160px;
}
.nav-search button{
  border:0;background:var(--brand);color:#fff;border-radius:var(--radius-pill);
  padding:var(--space-2) var(--space-4);font-size:var(--fs-sm);font-weight:var(--fw-medium);
}

/* 手机底栏 */
.mobtab{
  position:fixed;left:0;right:0;bottom:0;z-index:1000;
  height:var(--mobtab-height);
  background:rgba(247,246,242,.88);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid var(--rule);
  display:flex;justify-content:space-around;align-items:center;
  padding-bottom:env(safe-area-inset-bottom);
}
@media(min-width:834px){.mobtab{display:none}}
.mobtab a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;height:100%;font-size:11px;color:var(--ink-3);transition:color var(--duration-fast);
}
.mobtab a.on{color:var(--brand)}
.mobtab a svg{font-size:22px}

/* --------------------------------------------------------------------------
   5. 按钮（胶囊 + Duolingo 唇边）
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  border:0;border-radius:var(--radius-pill);
  padding:12px 24px;
  font-size:var(--fs-body);font-weight:var(--fw-medium);line-height:1.2;
  text-decoration:none;white-space:nowrap;
  transition:filter var(--duration-fast), transform var(--duration-fast), box-shadow var(--duration-fast);
}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(2px)}
.btn:disabled{opacity:.5;pointer-events:none}

/* 主按钮：朱红 + 唇边 */
.btn--primary{
  background:var(--brand);color:#fff;
  box-shadow:0 4px 0 var(--brand-dark);
}
.btn--primary:active{
  transform:translateY(4px);
  box-shadow:0 0 0 var(--brand-dark);
}

/* 次要按钮 */
.btn--secondary{
  background:var(--ink);color:#fff;
  box-shadow:0 4px 0 #111;
}
.btn--secondary:active{transform:translateY(4px);box-shadow:0 0 0 #111}

/* 幽灵按钮 */
.btn--ghost{
  background:transparent;color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--rule-strong);
}
.btn--ghost:hover{background:var(--surface-warm)}

/* 小按钮 */
.btn--sm{padding:8px 16px;font-size:var(--fs-sm)}

/* 覆盖旧按钮类 */
.btn-primary,.btn-danger,.btn-cta{
  composes: btn btn--primary; /* CSS 不支持 composes；下面直接写 */
}
.btn-primary,.btn-danger,.btn-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  border:0;border-radius:var(--radius-pill);
  padding:12px 24px;
  font-size:var(--fs-body);font-weight:var(--fw-medium);line-height:1.2;
  text-decoration:none;white-space:nowrap;
  background:var(--brand);color:#fff;box-shadow:0 4px 0 var(--brand-dark);
  transition:filter var(--duration-fast), transform var(--duration-fast), box-shadow var(--duration-fast);
}
.btn-primary:hover,.btn-danger:hover,.btn-cta:hover{filter:brightness(1.05)}
.btn-primary:active,.btn-danger:active,.btn-cta:active{transform:translateY(4px);box-shadow:0 0 0 var(--brand-dark)}

.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  border:0;border-radius:var(--radius-pill);
  padding:12px 24px;
  font-size:var(--fs-body);font-weight:var(--fw-medium);line-height:1.2;
  background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--rule-strong);
}

/* --------------------------------------------------------------------------
   6. 表单字段
   -------------------------------------------------------------------------- */
.field{margin-bottom:var(--space-4)}
.field > label{display:block;margin-bottom:var(--space-2);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--ink-2)}
.field > input,
.field > select,
.field > textarea,
.input{
  width:100%;min-height:48px;
  background:var(--surface);color:var(--ink);
  border:1.5px solid var(--rule);border-radius:var(--radius-xl);
  padding:10px var(--space-4);
  font-size:var(--fs-body);line-height:1.4;
  outline:none;transition:border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.field > input:focus,
.field > select:focus,
.field > textarea:focus,
.input:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 4px var(--brand-light);
}

/* --------------------------------------------------------------------------
   7. 全宽色块 Tile（Apple 式）
   -------------------------------------------------------------------------- */
.tile{
  position:relative;
  width:100%;
  padding:var(--space-9) var(--space-5);
  overflow:hidden;
}
@media(min-width:768px){.tile{padding:var(--space-10) var(--space-7)}}
.tile__inner{
  width:100%;max-width:var(--container);margin:0 auto;
}
.tile--light{background:var(--bg-2)}
.tile--warm{background:var(--bg)}
.tile--dark{
  background:#161310;color:#F7F6F2;
  --ink:#F7F6F2;--ink-2:#DFDCD6;--ink-3:#9E9A94;
}
.tile--brand{background:var(--brand);color:#fff;--ink:#fff;--ink-2:#FCECE8;--ink-3:#FCECE8}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:calc(var(--site-nav-height) + var(--space-7)) var(--space-5) var(--space-9);
  text-align:center;
  overflow:hidden;
}
.hero__bg{
  position:absolute;inset:0;z-index:0;
  background:radial-gradient(120% 120% at 50% 0%, #2A211C 0%, #161310 55%, #0D0C0B 100%);
}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(22,19,16,.25) 0%, rgba(22,19,16,.75) 100%);
}
.hero__content{
  position:relative;z-index:2;
  max-width:920px;margin:0 auto;
  color:#F7F6F2;
}
.hero__title{
  font-size:var(--fs-hero);
  font-weight:var(--fw-bold);
  line-height:.95;
  letter-spacing:-.035em;
  animation:fade-up .8s var(--ease-out) both;
}
.hero__subtitle{
  margin-top:var(--space-5);
  font-size:var(--fs-h3);
  line-height:1.4;
  color:rgba(247,246,242,.8);
  animation:fade-up .8s .15s var(--ease-out) both;
}
.hero__ctas{
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-3);
  margin-top:var(--space-7);
  animation:fade-up .8s .3s var(--ease-out) both;
}
.hero__scrolldown{
  position:absolute;bottom:var(--space-7);left:50%;transform:translateX(-50%);
  color:rgba(247,246,242,.6);font-size:var(--fs-sm);
  animation:fade-up .8s .6s var(--ease-out) both, float 2.5s ease-in-out infinite .6s;
}

/* 胶囊搜索（Airbnb 式） */
.capsule-search{
  display:inline-flex;align-items:center;gap:var(--space-1);
  background:#fff;color:var(--ink);
  border-radius:var(--radius-pill);
  box-shadow:var(--shadow-3);
  padding:8px 8px 8px 0;
  animation:scale-in .6s var(--ease-out) both;
}
.capsule-search__segment{
  display:flex;flex-direction:column;justify-content:center;
  padding:6px var(--space-4);min-width:120px;
  border-radius:var(--radius-pill);
  transition:background var(--duration-fast);
  cursor:pointer;
}
.capsule-search__segment:hover{background:var(--bg-3)}
.capsule-search__segment label{font-size:11px;font-weight:var(--fw-bold);color:var(--ink);text-transform:uppercase;letter-spacing:.04em}
.capsule-search__segment input,
.capsule-search__segment span{border:0;background:transparent;font-size:var(--fs-sm);color:var(--ink-3);outline:0;width:100%}
.capsule-search__divider{width:1px;height:32px;background:var(--rule)}
.capsule-search__btn{
  width:48px;height:48px;border-radius:50%;border:0;
  background:var(--brand);color:#fff;display:grid;place-items:center;
  box-shadow:0 4px 0 var(--brand-dark);
  transition:transform var(--duration-fast), box-shadow var(--duration-fast);
}
.capsule-search__btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--brand-dark)}

/* --------------------------------------------------------------------------
   9. 剧本海报卡片
   -------------------------------------------------------------------------- */
.poster-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:var(--space-5);
}
.poster-card{
  position:relative;background:var(--surface);border-radius:var(--radius-2xl);
  overflow:hidden;box-shadow:var(--shadow-1);
  transition:transform var(--duration-normal), box-shadow var(--duration-normal);
  animation:fade-up .6s var(--ease-out) both;
}
.poster-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-3)}
.poster-card__cover{
  aspect-ratio:3/4;width:100%;object-fit:cover;
}
.poster-card__emoji{
  aspect-ratio:3/4;display:grid;place-items:center;font-size:80px;background:var(--bg-3);
}
.poster-card__body{padding:var(--space-4)}
.poster-card__title{font-size:var(--fs-h4);font-weight:var(--fw-bold);line-height:1.2}
.poster-card__meta{margin-top:var(--space-2);font-size:var(--fs-sm);color:var(--ink-3)}
.poster-card__tags{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-top:var(--space-3)}
.poster-card__heart{
  position:absolute;top:var(--space-3);right:var(--space-3);
  width:36px;height:36px;border-radius:50%;border:0;
  background:rgba(255,255,255,.9);color:var(--ink-3);
  display:grid;place-items:center;box-shadow:var(--shadow-1);
  transition:transform var(--duration-fast), color var(--duration-fast);
}
.poster-card__heart:hover{transform:scale(1.1);color:var(--brand)}
.poster-card__heart.active{color:var(--brand)}

/* 小徽章（覆盖旧 badge） */
.badge,
.pill{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 10px;border-radius:var(--radius-pill);
  font-size:var(--fs-xs);font-weight:var(--fw-medium);line-height:1.3;
  background:var(--bg-3);color:var(--ink-2);
}
.badge--brand{background:var(--brand-light);color:var(--brand-dark)}
.badge--dark{background:var(--ink);color:#fff}

.pill{cursor:pointer;transition:background var(--duration-fast), color var(--duration-fast), transform var(--duration-fast)}
.pill.on{background:var(--ink);color:var(--bg)}
.pill:hover:not(.on){background:var(--surface-warm)}

/* --------------------------------------------------------------------------
   10. 彩色拼图导航（Dropbox 式）
   -------------------------------------------------------------------------- */
.puzzle-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3);
}
@media(min-width:768px){.puzzle-grid{grid-template-columns:repeat(4,1fr)}}
.puzzle-tile{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;
  min-height:180px;padding:var(--space-5);border-radius:var(--radius-2xl);
  color:#fff;text-decoration:none;
  transition:transform var(--duration-normal), border-radius var(--duration-normal);
  overflow:hidden;
}
.puzzle-tile:hover{transform:translateY(-4px) scale(1.02);border-radius:var(--radius-2xl)}
.puzzle-tile__icon{font-size:32px}
.puzzle-tile__title{font-size:var(--fs-h3);font-weight:var(--fw-bold);line-height:1.1}
.puzzle-tile__desc{font-size:var(--fs-sm);opacity:.85;margin-top:var(--space-2)}
.puzzle-tile--car{background:#283750}
.puzzle-tile--comm{background:#7A3E38}
.puzzle-tile--dm{background:#3A4F3A}
.puzzle-tile--me{background:#8A6A2F}

/* --------------------------------------------------------------------------
   10b. 区块标题 / 行列表
   -------------------------------------------------------------------------- */
.sec-head{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-6)}
.sec-no{font-family:var(--mono);font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.sec-head .heading-section{margin:0}

.row-line{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) 0;border-bottom:1px solid var(--rule)}
.row-line:last-child{border-bottom:0}
.rl-main{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;min-width:0}
.rl-main > *{min-width:0}

/* --------------------------------------------------------------------------
   11. 面板与旧组件覆盖
   -------------------------------------------------------------------------- */
.panel{
  background:var(--surface);border-radius:var(--radius-2xl);
  padding:var(--space-5);box-shadow:var(--shadow-1);
}
.card{
  background:var(--surface);border-radius:var(--radius-xl);
  padding:var(--space-5);box-shadow:var(--shadow-1);
  transition:transform var(--duration-normal), box-shadow var(--duration-normal);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}

/* 覆盖旧 .panel 保持功能 */
.panel{background:var(--surface);border-radius:var(--radius-2xl);padding:var(--space-5);box-shadow:var(--shadow-1);border:0}

/* 表格 */
.table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.table th,.table td{padding:var(--space-3) var(--space-4);text-align:left;border-bottom:1px solid var(--rule)}
.table th{font-weight:var(--fw-medium);color:var(--ink-3);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em}

/* 链接 */
.lnk{color:var(--brand);text-decoration:underline;text-underline-offset:3px;transition:color var(--duration-fast)}
.lnk:hover{color:var(--brand-dark)}

/* --------------------------------------------------------------------------
   12. 欢迎页幕布动画
   -------------------------------------------------------------------------- */
.curtain{
  position:fixed;inset:0;z-index:9999;display:flex;pointer-events:none;
}
.curtain__half{
  flex:1;background:#4A1212;
  background-image:repeating-linear-gradient(90deg, rgba(0,0,0,.15) 0px, rgba(0,0,0,.15) 2px, transparent 2px, transparent 60px);
  transition:transform 1.2s var(--ease-out);
}
.curtain__half--left{transform-origin:left}
.curtain__half--right{transform-origin:right}
.curtain.open .curtain__half--left{transform:translateX(-100%)}
.curtain.open .curtain__half--right{transform:translateX(100%)}
.curtain__logo{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--serif);font-size:48px;font-weight:var(--fw-bold);color:#F7F6F2;
  opacity:1;transition:opacity .4s;
}
.curtain.open .curtain__logo{opacity:0}

/* 欢迎页舞台 */
.welcome-stage{
  position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--bg);text-align:center;padding:var(--space-5);
}
.welcome-stage__title{
  font-size:var(--fs-display);font-weight:var(--fw-bold);line-height:1;letter-spacing:-.03em;
  animation:fade-up .8s var(--ease-out) both;
}
.welcome-stage__subtitle{
  margin-top:var(--space-4);font-size:var(--fs-h3);color:var(--ink-3);max-width:560px;
  animation:fade-up .8s .15s var(--ease-out) both;
}
.welcome-stage__actions{
  margin-top:var(--space-7);display:flex;gap:var(--space-3);animation:fade-up .8s .3s var(--ease-out) both;
}

/* --------------------------------------------------------------------------
   13. 工具类
   -------------------------------------------------------------------------- */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--space-5)}
.text-center{text-align:center}
.mt-1{margin-top:var(--space-1)}.mt-2{margin-top:var(--space-2)}.mt-3{margin-top:var(--space-3)}
.mt-4{margin-top:var(--space-4)}.mt-5{margin-top:var(--space-5)}.mt-6{margin-top:var(--space-6)}
.mt-7{margin-top:var(--space-7)}.mt-8{margin-top:var(--space-8)}.mt-9{margin-top:var(--space-9)}
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}
.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}

/* --------------------------------------------------------------------------
   14. 响应式调整
   -------------------------------------------------------------------------- */
@media(max-width:833px){
  .site-nav{padding:0 var(--space-4);height:56px}
  .hero{padding-top:calc(56px + var(--space-6))}
  .capsule-search{flex-direction:column;width:100%;border-radius:var(--radius-xl);padding:var(--space-3)}
  .capsule-search__divider{display:none}
  .capsule-search__btn{width:100%;height:auto;border-radius:var(--radius-pill);padding:var(--space-3)}
}

/* --------------------------------------------------------------------------
   15. 骨架补充：用户操作区 / 页脚 / flash
   -------------------------------------------------------------------------- */
.site-nav__actions{display:flex;align-items:center;gap:var(--space-2);margin-left:auto}
.site-nav__icon{position:relative;width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:var(--ink-2);display:grid;place-items:center;font-size:18px;transition:background var(--duration-fast), color var(--duration-fast)}
.site-nav__icon:hover{background:var(--surface-warm);color:var(--ink)}
.site-nav__dot{position:absolute;top:2px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:50%;background:var(--brand);color:#fff;font-size:10px;font-weight:var(--fw-bold);display:grid;place-items:center}
.site-nav__who{display:flex;align-items:center;gap:var(--space-2);padding:4px 12px 4px 4px;border-radius:var(--radius-pill);background:var(--surface);box-shadow:var(--shadow-1);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--ink);transition:box-shadow var(--duration-fast)}
.site-nav__who:hover{box-shadow:var(--shadow-2)}
.site-nav__avatar{width:28px;height:28px;border-radius:50%;object-fit:cover}

.site-foot{padding:var(--space-6) var(--space-5);background:var(--surface-warm);border-top:1px solid var(--rule)}
.site-foot__inner{max-width:var(--container);margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4);font-size:var(--fs-sm);color:var(--ink-3)}
.skin-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.skin-bar a{padding:2px 8px;border-radius:var(--radius-pill);font-size:var(--fs-xs);color:var(--ink-3);background:var(--bg);transition:color var(--duration-fast), background var(--duration-fast)}
.skin-bar a.on{background:var(--ink);color:var(--bg)}

.flash-wrap{position:fixed;top:calc(var(--site-nav-height) + var(--space-3));left:50%;transform:translateX(-50%);z-index:1100;display:flex;flex-direction:column;gap:var(--space-2);width:min(90%, 480px)}
.flash{padding:var(--space-3) var(--space-5);border-radius:var(--radius-xl);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-3);font-size:var(--fs-sm);animation:slide-down .3s var(--ease-out)}
.flash.error{background:var(--error);color:#fff}
.flash.ok{background:var(--success);color:#fff}
.flash.info{background:var(--info);color:#fff}

/* 按钮尺寸组合修正 */
.btn--sm.btn--primary,
.btn--sm.btn--secondary,
.btn--sm.btn--ghost{padding:8px 16px;font-size:var(--fs-sm)}

/* --------------------------------------------------------------------------
   16. 组件补充：社区 tabbar / 进度条
   -------------------------------------------------------------------------- */
.tabbar{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.tabbar a{padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--ink-3);background:var(--surface);box-shadow:var(--shadow-1);transition:background var(--duration-fast), color var(--duration-fast);text-decoration:none}
.tabbar a:hover{background:var(--surface-warm);color:var(--ink)}
.tabbar a.on{background:var(--ink);color:var(--bg)}

/* --------------------------------------------------------------------------
   17. 我的（/me）：两栏 + 纵向胶囊导航
   -------------------------------------------------------------------------- */
.me-wrap{max-width:var(--container);margin:0 auto;display:grid;grid-template-columns:300px 1fr;gap:var(--space-7);align-items:start}
.me-nav{display:flex;flex-direction:column;gap:var(--space-2);position:sticky;top:calc(var(--site-nav-height) + var(--space-4))}
.me-nav .mi{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);width:100%;padding:var(--space-3) var(--space-4);border:0;border-radius:var(--radius-xl);background:var(--surface);box-shadow:var(--shadow-1);font-size:var(--fs-body);font-weight:var(--fw-medium);color:var(--ink);cursor:pointer;transition:background var(--duration-fast), box-shadow var(--duration-fast), transform var(--duration-fast)}
.me-nav .mi:hover{box-shadow:var(--shadow-2)}
.me-nav .mi.on{background:var(--ink);color:var(--bg)}
.me-nav .mi span{font-size:var(--fs-sm);opacity:.7}
.profile{text-align:center;padding:var(--space-6)}
.profile .avatar{width:84px;height:84px;border-radius:50%;margin:0 auto var(--space-3);background:var(--bg-3);display:grid;place-items:center;font-size:34px;font-weight:var(--fw-bold);color:var(--ink)}
.p-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);margin-top:var(--space-4);text-align:center}
.p-stats b{display:block;font-size:var(--fs-h3);font-weight:var(--fw-bold)}
.p-stats span{font-size:var(--fs-xs);color:var(--ink-3)}
@media(max-width:860px){.me-wrap{grid-template-columns:1fr;gap:var(--space-5)}.me-nav{position:static;flex-direction:row;overflow-x:auto}.me-nav .mi{flex:0 0 auto}}

/* --------------------------------------------------------------------------
   17b. 后台 / DM 工作台：移动端顶栏（窄屏侧栏隐藏，用它做导航）
   -------------------------------------------------------------------------- */
.adm-mobile{display:none}
.adm-mobile .ab{display:flex;align-items:center;gap:var(--space-2);font-family:var(--serif);font-weight:var(--fw-bold);font-size:18px;color:var(--ink)}
.adm-mobile .ab .ic{font-size:20px}
@media(max-width:1040px){
  .adm-mobile{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
    padding-bottom:var(--space-4);margin-bottom:var(--space-4);border-bottom:1px solid var(--rule)}
  .adm-main{padding-top:calc(var(--site-nav-height) + var(--space-5))}
}

/* --------------------------------------------------------------------------
   17c. 后台 / DM 面板：标题、表格、区块统一到新设计系统（纯样式，不动 HTML）
   -------------------------------------------------------------------------- */
.adm-main .adm-panel,
.adm-panel{background:var(--surface);border:0;border-radius:var(--radius-xl);
  padding:var(--space-5);box-shadow:var(--shadow-1);
  transition:transform var(--duration-normal), box-shadow var(--duration-normal)}
.adm-main .adm-panel:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}

.adm-main h2{font-size:var(--fs-h2);font-weight:var(--fw-bold);line-height:1.1;letter-spacing:-.015em;margin:0 0 var(--space-4)}
.adm-main h3{font-size:var(--fs-h4);font-weight:var(--fw-bold);line-height:1.25;margin:0 0 var(--space-3)}
.adm-main .panel > h2:first-child,
.adm-main .panel > h3:first-child,
.adm-main .adm-panel > h2:first-child,
.adm-main .adm-panel > h3:first-child{margin-top:0}
.adm-main .two h2{margin-top:0}

.adm-main table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.adm-main table th,
.adm-main table td{padding:var(--space-3) var(--space-4);text-align:left;border-bottom:1px solid var(--rule)}
.adm-main table th{font-weight:var(--fw-medium);color:var(--ink-3);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em}
.adm-main table tr:last-child td{border-bottom:0}

.adm-main .stats{display:grid;grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));gap:var(--space-4);margin:var(--space-4) 0}
.adm-main .stats div{background:var(--surface-warm);border-radius:var(--radius-xl);padding:var(--space-4);text-align:center}
.adm-main .stats b{display:block;font-size:var(--fs-h3);font-weight:var(--fw-bold)}
.adm-main .stats span{font-size:var(--fs-xs);color:var(--ink-3)}

/* --------------------------------------------------------------------------
   18. 登录/注册独立布局（auth_base）
   -------------------------------------------------------------------------- */
.auth-body{background:var(--bg);color:var(--ink);font-family:var(--font-sans);min-height:100vh}
.auth-bg{position:fixed;inset:0;z-index:-1;background:radial-gradient(120% 80% at 50% -10%, var(--bg-2), var(--bg))}
.auth-stage{max-width:460px;margin:0 auto;padding:calc(var(--space-8) + var(--site-nav-height)) var(--space-5) var(--space-8);min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.auth-card{background:var(--surface);border-radius:var(--radius-2xl);box-shadow:var(--shadow-3);padding:var(--space-7);border:1px solid var(--rule)}
.auth-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-5)}
.auth-home{font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--ink-2);transition:color var(--duration-fast)}
.auth-home:hover{color:var(--ink)}
.theme-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--surface);box-shadow:var(--shadow-1);color:var(--ink-2);text-decoration:none;transition:background var(--duration-fast), color var(--duration-fast)}
.theme-btn:hover{background:var(--surface-warm);color:var(--ink)}
.auth-foot{text-align:center;color:var(--ink-3);font-size:var(--fs-sm);margin-top:var(--space-5)}
.auth-foot .btn{margin-left:8px}

/* 动画减弱 */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}