/* ================= FLora 仪路 · 共享样式 ================= */

:root{
  /* 浅色：米黄底 + 脏粉/青绿/香槟金 */
  --bg:#F8F7F4;
  --bg-soft:#FFFFFF;
  --side:#F2F1EE;
  --card:#FFFFFF;
  --tx:#2D2926;
  --tx2:#6B6A67;
  --tx3:#B0AFA8;
  --line:#E8E8E6;
  --accent:#B8543F;
  --accent-soft:#EED7CF;
  --accent-2:#57B8AC;
  --accent-2-soft:#C5E8E2;
  --warm:#CF8A54;
  --warm-text:#9A6B3C;
  --up:#C04838;
  --down:#528A68;
  --accent-deep:#B8543F;
  --down-deep:#3F6E52;

  --r:14px;
  --r-sm:10px;
  --r-lg:22px;
  --shadow:0 1px 2px rgba(45,41,38,.04),0 10px 28px rgba(45,41,38,.06);
  --shadow-lift:0 8px 24px rgba(45,41,38,.13);
}

[data-theme="dark"]{
  /* 深色：暖深夜调，品牌色提亮 */
  --bg:#1E1A16;
  --bg-soft:#28231E;
  --side:#16120F;
  --card:#2A241F;
  --tx:#EDE6DA;
  --tx2:#B3A99B;
  --tx3:#847A6C;
  --line:#3B342C;
  --accent:#DB7158;
  --accent-soft:#3A2820;
  --accent-2:#6FCFC1;
  --accent-2-soft:#1E3733;
  --warm:#E2A468;
  --warm-text:#E8BE84;
  --up:#E57A66;
  --down:#84BB97;
  --accent-deep:#DB7158;
  --down-deep:#84BB97;

  --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 28px rgba(0,0,0,.45);
  --shadow-lift:0 8px 24px rgba(0,0,0,.55);
}

*{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;
  overflow-y:scroll; /* 始终预留垂直滚动条槽，避免各页内容长短不一时顶栏/全局布局左右跳动 */
}
body{
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
  background:var(--bg);color:var(--tx);line-height:1.75;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input{font-family:inherit;color:inherit}

/* 主题切换平滑过渡（仅对颜色/背景/边框/阴影生效，不影响 transform 动效） */
body,.card,.top-nav,.home-card,.theme-btn,.btn,.tag,.input,.search-box,.nav-item,.tab,.news-item,.qc,.mchip,.blk,.profile-card,.profile-body,.tool-hero,.login-box,.feat-list li,.page-head,.disclaimer,.qr-block,.mini-note{
  transition:background-color .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease;
}

/* 柔光氛围背景 */
body{position:relative}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(820px 560px at 10% -8%, rgba(184,84,63,.05), transparent 60%),
    radial-gradient(760px 560px at 102% -4%, rgba(87,184,172,.05), transparent 55%),
    radial-gradient(680px 680px at 88% 104%, rgba(207,138,84,.04), transparent 60%);
}
[data-theme="dark"] body::before{
  background:
    radial-gradient(820px 560px at 10% -8%, rgba(219,113,88,.14), transparent 60%),
    radial-gradient(760px 560px at 102% -4%, rgba(111,207,193,.12), transparent 55%),
    radial-gradient(680px 680px at 88% 104%, rgba(226,164,104,.11), transparent 60%);
}

/* ================= 顶部轻导航 ================= */
.top-nav{
  position:fixed;top:0;left:0;right:0;z-index:55;
  height:64px;display:flex;align-items:center;justify-content:space-between;
  padding:0 32px;
  background:rgba(248,247,244,.92);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px);
}
[data-theme="dark"] .top-nav{
  background:rgba(30,26,22,.92);
}
.top-nav .brand{
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;font-weight:700;font-size:1.25rem;
  color:var(--tx);letter-spacing:.02em;
  display:inline-flex;align-items:baseline;gap:4px;
}
.top-nav .brand .cn{font-style:normal;font-weight:700;color:var(--accent);letter-spacing:.04em}
.top-links{display:flex;align-items:center;gap:26px}
.top-links a{
  font-size:.9rem;color:var(--tx2);position:relative;padding:4px 0;
  transition:color .2s;
}
.top-links a::after{
  content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;
  background:var(--accent);border-radius:2px;transition:width .25s ease;
}
.top-links a:hover{color:var(--accent)}
.top-links a:hover::after{width:100%}

/* ================= 主题切换按钮 ================= */
.theme-btn{
  width:36px;height:36px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--bg-soft);border:1px solid var(--line);color:var(--tx2);font-size:1.05rem;
  transition:transform .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease,border-color .25s ease;
}
.theme-btn:hover{transform:translateY(-1px) scale(1.06);color:var(--accent);box-shadow:var(--shadow)}
.theme-btn:active{transform:scale(.94)}

/* ================= 焦点可见 ================= */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent-2);outline-offset:2px;border-radius:var(--r-sm);
}

/* ================= 通用组件 ================= */
.page-head{position:relative;overflow:visible;padding:28px 0 18px}
.page-head h2{font-size:1.6rem;font-weight:700;margin-bottom:6px}
.page-head p{color:var(--tx2);font-size:.95rem}
.page-head h2::after{
  content:"";display:block;width:46px;height:3px;margin-top:10px;
  background:linear-gradient(90deg,var(--accent),var(--warm));border-radius:2px;
}

/* 右上角氛围小花：统一用于各内页标题区 */
.flourish{
  position:absolute;width:96px;height:96px;right:-6px;top:-18px;
  opacity:.36;pointer-events:none;color:var(--accent);
  animation:flourishIn .9s cubic-bezier(.22,1,.36,1) both;
}
.page-hero{position:relative;overflow:visible}
.page-hero .flourish{right:-8px;top:-12px}
.hero{position:relative;overflow:visible}
.hero .flourish{right:-8px;top:-14px;width:110px;height:110px}
@keyframes flourishIn{
  from{opacity:0;transform:scale(.85) rotate(-8deg)}
  to{opacity:.36;transform:none}
}
@media(prefers-reduced-motion:reduce){.flourish{animation:none}}

.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:22px;
}
.card:hover{box-shadow:var(--shadow-lift)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 18px;border-radius:var(--r);font-size:.9rem;font-weight:600;
  background:var(--accent-deep);color:#fff;box-shadow:var(--shadow);
  transition:transform .2s ease,background .2s ease,box-shadow .2s ease,color .2s ease;
}
.btn:hover{transform:translateY(-1px) scale(1.03);box-shadow:var(--shadow-lift)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}

.tag{
  display:inline-block;padding:5px 12px;border-radius:999px;font-size:.78rem;
  background:var(--bg-soft);color:var(--tx2);border:1px solid var(--line);
  transition:transform .2s ease,background .2s ease,color .2s ease,border-color .25s ease;
}
.tag:hover{transform:translateY(-1px);color:var(--accent);border-color:var(--accent-soft)}

/* 骨架屏 */
.skeleton{
  position:relative;overflow:hidden;background:var(--bg-soft);
  border:1px solid var(--line);border-radius:var(--r);min-height:140px;
}
.skeleton::after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:shimmer 1.3s infinite;
}
@keyframes shimmer{100%{transform:translateX(100%)}}
[data-theme="dark"] .skeleton::after{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
}

/* 回到顶部 */
.to-top{
  position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;
  background:var(--accent-deep);color:#fff;font-size:1.15rem;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-lift);opacity:0;transform:translateY(14px) scale(.9);
  pointer-events:none;transition:opacity .3s ease,transform .3s ease,background .2s ease;z-index:55;
}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--accent-deep);filter:brightness(.92);transform:translateY(-2px) scale(1.05)}
.to-top:active{transform:scale(.94)}

/* 阅读进度条 */
.progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:60;
  background:linear-gradient(90deg,var(--accent),var(--warm),var(--accent-2));
  transition:width .12s linear;
}

/* 滚动揭示（配合 JS 的 .js class） */
html.js .reveal{
  opacity:0;transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1),background-color .25s ease,border-color .25s ease,color .25s ease;
  transition-delay:var(--d,0s);
}
html.js .reveal.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

@media(max-width:760px){
  .top-nav{padding:0 18px}
  .top-links{gap:16px}
  .top-links a span{display:none}
}

/* ================= 左侧边栏布局（内页） ================= */
.app{display:flex;min-height:100vh;padding-top:64px}

.sidebar{
  width:220px;flex-shrink:0;background:var(--side);
  border-right:1px solid var(--line);
  padding:22px 14px;display:flex;flex-direction:column;gap:6px;
}
a.brand-side{display:block;text-decoration:none}
.brand-side{padding:6px 10px 18px}
.brand-side .en{
  font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:700;
  font-size:1.15rem;margin-right:6px;color:var(--accent);
}
.brand-side .cn{font-weight:700;font-size:1.15rem;letter-spacing:.06em;color:var(--accent)}
.brand-side small{display:block;font-size:.72rem;font-weight:400;color:var(--tx3);margin-top:4px;letter-spacing:.04em}

.side-nav{display:flex;flex-direction:column;gap:3px}
.side-nav a{
  display:flex;align-items:center;gap:9px;
  padding:10px 12px;border-radius:var(--r);
  font-size:.9rem;color:var(--tx2);transition:.15s;text-align:left;width:100%;
}
.side-nav a:hover{background:var(--bg-soft);color:var(--tx)}
.side-nav a.active{background:var(--accent-deep);color:#fff;font-weight:700}
.side-nav a .ic{width:16px;height:16px;flex-shrink:0;display:block}
.side-foot{margin-top:auto;padding:14px 10px 4px;font-size:.7rem;color:var(--tx3);line-height:1.6}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.main-topbar{
  height:56px;flex-shrink:0;border-bottom:1px solid var(--line);
  background:var(--bg-soft);display:flex;align-items:center;gap:14px;padding:0 22px;
}
.menu-btn{display:none;font-size:1.1rem;color:var(--tx2);padding:6px 8px;border-radius:var(--r)}
.menu-btn:hover{background:var(--bg)}
.main-topbar h1{font-size:1rem;font-weight:600;letter-spacing:.02em;color:var(--tx)}
.main-topbar .back{
  margin-left:auto;
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 12px;border-radius:999px;
  font-size:.78rem;font-weight:600;color:var(--accent);
  background:var(--bg-soft);border:1px solid var(--line);
  transition:background .2s ease,transform .2s ease,color .2s ease,border-color .2s ease;
}
.main-topbar .back:hover{
  background:var(--accent-soft);color:var(--accent-deep);
  border-color:var(--accent-soft);transform:translateY(-1px);
}
.main-topbar .back svg{width:14px;height:14px;flex-shrink:0}

.main-content{padding:28px 26px 60px;max-width:1100px;width:100%;margin:0 auto}

@media(max-width:760px){
  .sidebar{position:fixed;left:0;top:64px;bottom:0;z-index:50;transform:translateX(-100%);transition:transform .25s ease}
  .sidebar.open{transform:translateX(0)}
  .menu-btn{display:inline-flex}
}

/* ================= 内页通用布局 ================= */
.top-links a.active{color:var(--accent)}
.top-links a.active::after{width:100%}

.inner-wrap{max-width:980px;margin:0 auto;padding:108px 22px 60px}
.page-hero{
  text-align:center;padding:18px 0 40px;
  animation:fadeInUp .8s cubic-bezier(.22,1,.36,1) both;
}
@keyframes fadeInUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero-ic{
  width:64px;height:64px;margin:0 auto 20px;border-radius:var(--r-lg);
  display:flex;align-items:center;justify-content:center;font-size:1.7rem;
  color:var(--hi,#B8543F);background:var(--hibg,#EED7CF);
  box-shadow:var(--shadow);
}
.page-hero h1{font-size:2.6rem;font-weight:700;letter-spacing:.04em;margin-bottom:12px;color:var(--tx)}
.page-hero p{color:var(--tx2);font-size:1.02rem;max-width:480px;margin:0 auto;line-height:1.8}

.inner-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px;
}
.inner-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:24px;
  transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s ease,border-color .25s ease,background-color .25s ease;
}
.inner-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift);border-color:var(--accent-soft)}
.ic-badge{
  width:42px;height:42px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;
  color:var(--hi,#B8543F);background:var(--hibg,#EED7CF);font-size:1.2rem;margin-bottom:14px;
}
.inner-card h3{font-size:1.05rem;font-weight:700;margin-bottom:8px;color:var(--tx)}
.inner-card p{font-size:.85rem;color:var(--tx2);line-height:1.7}

.inner-note{
  margin-top:28px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow);padding:22px 24px;
}
.inner-note h4{font-size:.95rem;font-weight:700;margin-bottom:8px;color:var(--tx)}
.inner-note p{font-size:.86rem;color:var(--tx2);line-height:1.8}
.inner-note .tags{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}

.inner-cta{margin-top:30px;text-align:center}
.muted{color:var(--tx3);font-size:.8rem;margin-top:10px}

@media(max-width:780px){
  .inner-grid{grid-template-columns:1fr}
  .page-hero h1{font-size:2.1rem}
}
@media(prefers-reduced-motion:reduce){
  .page-hero{animation:none}
}

/* ============================================================
   内页灵动升级 · 与首页「仪路生花」视觉语言统一
   设计意图：把首页的"呼吸感"带进每一张内页——
   会呼吸的小花、衬线斜体渐变标题、浮动光环的英雄图标、
   悬浮微旋的卡片、错落有致的入场。所有动效在
   prefers-reduced-motion 下由全局规则自动关闭。
   ============================================================ */

/* 1) 小花：入场后持续轻轻呼吸（浮动 + 微旋） */
.flourish{
  transform-origin:60% 60%;
  animation:
    flourishIn .9s cubic-bezier(.22,1,.36,1) both,
    flourishBreath 8s ease-in-out 1s infinite;
}
@keyframes flourishBreath{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-6px) rotate(4deg)}
}

/* 2) 内页标题统一：衬线斜体 + 渐变下划线 +（居中页）轻旋 */
.page-head h2,
.page-hero h1{
  font-family:"STSong","SimSun","Source Han Serif SC","Noto Serif SC",Georgia,serif;
  font-style:italic;font-weight:700;letter-spacing:.04em;
  display:inline-block;position:relative;color:var(--tx);
}
.page-head h2::after,
.page-hero h1::after{
  content:"";display:block;height:5px;margin-top:12px;border-radius:3px;opacity:.92;
  background:linear-gradient(90deg,var(--accent),var(--warm),var(--accent-2));
}
.page-head h2::after{width:54px;margin-left:0}
.page-hero h1::after{width:64px;margin-left:auto;margin-right:auto}
.page-hero h1{transform:rotate(-1.4deg)}
/* 入场：标题随页面 hero 一起错落升起 */
.page-head{animation:fadeInUp .8s cubic-bezier(.22,1,.36,1) both}

/* 3) 英雄图标：入场缩放 + 持续轻浮 + 柔光环 */
.hero-ic{
  position:relative;
  animation:heroIcIn .8s cubic-bezier(.22,1,.36,1) both, heroIcFloat 6s ease-in-out 1.1s infinite;
}
.hero-ic::before{
  content:"";position:absolute;inset:-7px;border-radius:inherit;z-index:-1;opacity:.55;
  background:radial-gradient(circle at 50% 45%, var(--hibg,#EED7CF) 0%, transparent 72%);
}
@keyframes heroIcIn{from{opacity:0;transform:scale(.7) rotate(-6deg)}to{opacity:1;transform:none}}
@keyframes heroIcFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* 4) 卡片：悬浮抬升 + 图标微旋 + 微光扫过 */
.inner-card{position:relative;overflow:hidden}
.inner-card::after{
  content:"";position:absolute;top:0;left:-65%;width:55%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-18deg);transition:left .7s ease;
}
[data-theme="dark"] .inner-card::after{
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.10),transparent);
}
.inner-card:hover::after{left:125%}
.inner-card:hover .ic-badge{transform:scale(1.14) rotate(-5deg)}
.ic-badge{transition:transform .3s cubic-bezier(.22,1,.36,1),background-color .25s}

/* 5) 错落入场延时（配合 .reveal 的 --d） */
.inner-grid .inner-card:nth-child(1){--d:.04s}
.inner-grid .inner-card:nth-child(2){--d:.12s}
.inner-grid .inner-card:nth-child(3){--d:.20s}
.inner-grid .inner-card:nth-child(4){--d:.28s}
.about-layout>.reveal:nth-child(1){--d:.05s}
.about-layout>.reveal:nth-child(2){--d:.16s}
.page-head.reveal{--d:.02s}

/* 6) 侧栏激活态：花瓣指示 + 悬浮微移 */
.side-nav a{position:relative;transition:.18s ease}
.side-nav a:hover{transform:translateX(3px)}
.side-nav a.active{position:relative;overflow:hidden}
.side-nav a.active::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:4px;height:22px;border-radius:0 5px 5px 0;background:rgba(255,255,255,.9);
}

/* 7) 知识卡片标签：悬浮轻轻抬起（已 hover 变色，这里加位移） */
.tags .tag:hover{transform:translateY(-2px)}

/* 8) 区块间的小花分隔线：在需要处用 <div class="bloom-rule"></div> */
.bloom-rule{
  display:flex;align-items:center;gap:12px;margin:34px auto;max-width:240px;color:var(--tx3);
}
.bloom-rule::before,.bloom-rule::after{
  content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);
}
.bloom-rule span{font-size:1rem;color:var(--accent);opacity:.55;animation:flourishBreath 8s ease-in-out infinite}

@media(max-width:780px){
  .page-hero h1{transform:rotate(-1deg)}
}