/* =========================================================
   style.css —— 全局基础（所有布局共用）
   主题变量按 html[data-theme] 切换，供音乐播放器、
   切换按钮与各布局组件使用。
   ========================================================= */

/* ===== 主题变量（8 套） ===== */
:root{
  --bg:#fdf6f0;
  --paper:#fffaf6;
  --ink:#5d4037;
  --ink-soft:#8a7165;
  --pink:#e8849a;
  --pink-deep:#d76a85;
  --pink-soft:#f5d5d5;
  --green:#8fb886;
  --green-deep:#7aa671;
  --gold:#d4a85e;
  --orange:#f0c8a0;
  --line:#c98a9a;
  --shadow-card:0 6px 24px rgba(232,132,154,.14),0 2px 6px rgba(93,64,55,.06);
  --font-body:'ZCOOL XiaoWei','PingFang SC','Microsoft YaHei',serif;
  --font-display:'Ma Shan Zheng','PingFang SC',cursive;
  --font-en:'Long Cang',cursive;
}
html[data-theme="pink"]{
  --bg:#eaf5fa;
  --paper:rgba(255,255,255,.9);
  --ink:#2f5066;
  --ink-soft:#6d8999;
  --pink:#d78699;
  --pink-deep:#bd647c;
  --pink-soft:#f5dfe5;
  --green:#77aabd;
  --green-deep:#4f8da7;
  --gold:#c5a36f;
  --orange:#e4c5ad;
  --line:#b7d4e2;
  --shadow-card:0 8px 24px rgba(73,129,158,.14),0 2px 6px rgba(47,80,102,.08);
  --font-body:'PingFang SC','Microsoft YaHei',-apple-system,'Segoe UI',sans-serif;
  --font-display:'Ma Shan Zheng','PingFang SC',cursive;
  --font-en:'Long Cang',cursive;
}
html[data-theme="ink"]{
  --bg:#f3ecdd;
  --paper:#faf5e8;
  --ink:#33302b;
  --ink-soft:#7a7164;
  --pink:#b0483c;
  --pink-deep:#96382e;
  --pink-soft:#e0cfba;
  --green:#4f7d6e;
  --green-deep:#3d6a5b;
  --gold:#a97f3a;
  --orange:#c49a6c;
  --line:#6f675c;
  --shadow-card:0 3px 14px rgba(63,56,47,.12),0 1px 2px rgba(63,56,47,.05);
  --font-body:'Noto Serif SC','Songti SC','SimSun',serif;
  --font-display:'Noto Serif SC','Songti SC','SimSun',serif;
  --font-en:'Long Cang','STKaiti','KaiTi',cursive;
}
html[data-theme="night"]{
  --bg:#0d1228;
  --paper:rgba(255,255,255,.07);
  --ink:#eef0f9;
  --ink-soft:#9aa3c7;
  --pink:#e5c07b;
  --pink-deep:#c9a24f;
  --pink-soft:rgba(229,192,123,.18);
  --green:#7fb3d9;
  --green-deep:#5e97c2;
  --gold:#e5c07b;
  --orange:#b08968;
  --line:#4e5684;
  --shadow-card:0 8px 30px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.3);
  --font-body:'PingFang SC','Microsoft YaHei',-apple-system,'Segoe UI',sans-serif;
  --font-display:'PingFang SC','Microsoft YaHei',sans-serif;
  --font-en:'Long Cang','PingFang SC',cursive;
}
html[data-theme="morandi"]{
  --bg:#e9e3da;
  --paper:#f5f0e8;
  --ink:#5d5a54;
  --ink-soft:#8f8a80;
  --pink:#c2908f;
  --pink-deep:#a87876;
  --pink-soft:#e3d5cd;
  --green:#8fa69c;
  --green-deep:#778f85;
  --gold:#b7a27e;
  --orange:#cbb29a;
  --line:#b5aca0;
  --shadow-card:0 10px 30px rgba(93,90,84,.1),0 2px 8px rgba(93,90,84,.05);
  --font-body:'PingFang SC','Microsoft YaHei',-apple-system,'Segoe UI',sans-serif;
  --font-display:'PingFang SC','Microsoft YaHei',sans-serif;
  --font-en:'Long Cang',cursive;
}
html[data-theme="classic"]{
  --bg:#f5efe1;
  --paper:#fdfaf2;
  --ink:#4a4035;
  --ink-soft:#8a7a66;
  --pink:#b08d57;
  --pink-deep:#966f3c;
  --pink-soft:#e9ddc6;
  --green:#5a6e52;
  --green-deep:#48593f;
  --gold:#c9a227;
  --orange:#cbb089;
  --line:#b8a583;
  --shadow-card:0 8px 26px rgba(74,64,53,.12),0 2px 6px rgba(74,64,53,.06);
  --font-body:Georgia,'Noto Serif SC','Songti SC','Times New Roman',serif;
  --font-display:Georgia,'Noto Serif SC','Songti SC',serif;
  --font-en:'Long Cang','KaiTi',cursive;
}
html[data-theme="mono"]{
  --bg:#f6f6f4;
  --paper:#ffffff;
  --ink:#141414;
  --ink-soft:#8a8a8a;
  --pink:#141414;
  --pink-deep:#000;
  --pink-soft:#e8e8e6;
  --green:#141414;
  --green-deep:#000;
  --gold:#141414;
  --orange:#b5b5b0;
  --line:#999;
  --shadow-card:0 1px 0 rgba(0,0,0,.1);
  --font-body:'Helvetica Neue',Helvetica,Arial,'PingFang SC','Microsoft YaHei',sans-serif;
  --font-display:'Helvetica Neue','PingFang SC',sans-serif;
  --font-en:'Helvetica Neue',sans-serif;
}
html[data-theme="fresh"]{
  --bg:#eef4ea;
  --paper:#fbfffa;
  --ink:#3f5a45;
  --ink-soft:#7e9379;
  --pink:#e3a3a0;
  --pink-deep:#d4857f;
  --pink-soft:#f3e3dd;
  --green:#7aa88d;
  --green-deep:#5f8f74;
  --gold:#c8a86b;
  --orange:#e8c9a3;
  --line:#a9c2ae;
  --shadow-card:0 10px 28px rgba(122,168,141,.16),0 2px 8px rgba(63,90,69,.05);
  --font-body:'PingFang SC','Microsoft YaHei',-apple-system,'Segoe UI',sans-serif;
  --font-display:'PingFang SC','Microsoft YaHei',sans-serif;
  --font-en:'Long Cang',cursive;
}
html[data-theme="v2"]{
  --bg:#faf7f2;
  --paper:#ffffff;
  --ink:#1a1a1a;
  --ink-soft:#8a857d;
  --pink:#c0392b;
  --pink-deep:#a93226;
  --pink-soft:#f3dcd8;
  --green:#7d8a76;
  --green-deep:#64705f;
  --gold:#b0894f;
  --orange:#d9b98c;
  --line:#e5e0d8;
  --shadow-card:0 10px 30px rgba(26,26,26,.08),0 2px 8px rgba(26,26,26,.04);
  --font-body:'PingFang SC','Microsoft YaHei',-apple-system,'Segoe UI',sans-serif;
  --font-display:'PingFang SC','Microsoft YaHei',sans-serif;
  --font-en:'Long Cang',cursive;
}

/* ===== 基础 ===== */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  line-height:1.8;
  overflow-x:hidden;
  transition:background-color .3s;
}
button{touch-action:manipulation;font-family:inherit;}
::selection{background:rgba(232,132,154,.22);}
:focus-visible{outline:2px solid var(--pink);outline-offset:2px;}
.en-font{font-family:var(--font-en);}

/* ===== 布局切换 ===== */
.layout[hidden]{display:none;}
/* hidden 属性兜底：列表等带 display 样式的元素也能被隐藏 */
[hidden]{display:none!important;}

/* ===== 复制提示小浮框（全局，右下角音乐播放器上方） ===== */
#copy-toast{
  position:fixed;
  right:1rem;
  bottom:calc(5.8rem + env(safe-area-inset-bottom));
  background:rgba(51,48,43,.88);
  color:#fff;
  font-size:.82rem;
  letter-spacing:.05em;
  padding:.55rem 1rem;
  border-radius:12px;
  box-shadow:0 4px 16px rgba(0,0,0,.25);
  z-index:200;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .25s,transform .25s;
  pointer-events:none;
  max-width:70vw;
}
#copy-toast.show{opacity:1;transform:none;}

/* 卡片复制反馈：轻轻上移回弹，保留各布局原有的 transform */
@keyframes card-copy-nudge{
  0%,100%{top:0;}
  45%{top:-4px;}
  75%{top:1px;}
}
html[data-theme] .card-copy-bump{position:relative;animation:card-copy-nudge .28s ease-out;}

/* ===== 滚动显现动画 ===== */
.anim .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);}
.reveal.in{opacity:1;transform:none;}
@keyframes fade-up{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;}
  .anim .reveal{opacity:1;transform:none;}
  /* 花瓣保持飘落（轻量装饰动画，特意不受 reduced-motion 禁用） */
  .petal{animation:petal-fall 8s linear infinite!important;}
  .petal.p1{animation-delay:0s!important;}
  .petal.p2{animation-delay:-2.6s!important;}
  .petal.p3{animation-delay:-5.3s!important;}
}

/* ===== 音乐播放器（全局共享，跟随主题变量） ===== */
.music-player{
  position:fixed;
  right:1rem;
  bottom:calc(1.2rem + env(safe-area-inset-bottom));
  display:flex;
  align-items:center;
  gap:.6rem;
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(10px) saturate(1.3);
  backdrop-filter:blur(10px) saturate(1.3);
  padding:.5rem .85rem .5rem .5rem;
  border-radius:30px;
  border:1px solid var(--line);
  box-shadow:0 6px 20px rgba(93,64,55,.16);
  z-index:100;
  max-width:calc(100vw - 2rem);
}
.music-toggle{
  width:44px;height:44px;
  border-radius:50%;
  border:none;
  background:linear-gradient(135deg,var(--pink),var(--pink-deep));
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  flex-shrink:0;
  box-shadow:0 3px 10px rgba(232,132,154,.4);
}
.music-toggle svg{width:18px;height:18px;}
.music-toggle.spinning{animation:spin 6s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.music-info{display:flex;flex-direction:column;gap:.1rem;min-width:0;}
.music-title{
  font-size:.8rem;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:130px;
}
.music-switch{
  display:flex;align-items:center;gap:.2rem;
  background:none;border:none;
  font-family:inherit;font-size:.7rem;color:var(--ink-soft);
  cursor:pointer;padding:.1rem 0;
}
.music-switch svg{width:12px;height:12px;}
.music-menu{
  position:absolute;
  right:0;bottom:calc(100% + .6rem);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:10px;
  padding:.4rem;
  display:flex;flex-direction:column;gap:.15rem;
  box-shadow:0 6px 20px rgba(93,64,55,.15);
  white-space:nowrap;
  max-height:60vh;overflow-y:auto;
  min-width:180px;
}
.music-menu[hidden]{display:none;}
.music-menu button{
  display:flex;align-items:center;gap:.5rem;
  border:none;background:none;
  font-family:inherit;font-size:.82rem;
  color:var(--ink-soft);
  padding:.42rem .9rem;border-radius:6px;
  cursor:pointer;text-align:left;
}
.music-menu button .now-playing{width:12px;height:12px;flex-shrink:0;font-size:.9rem;line-height:1;}
.music-menu button:hover{background:var(--pink-soft);}
.music-menu button.active{background:var(--pink-soft);color:var(--pink);font-weight:bold;}

/* 手机上音乐播放器整体缩小，少遮挡内容 */
@media (max-width:640px){
  .music-player{gap:.38rem;padding:.28rem .58rem .28rem .28rem;border-radius:22px;}
  .music-toggle{width:34px;height:34px;box-shadow:0 2px 8px rgba(232,132,154,.35);}
  .music-toggle svg{width:14px;height:14px;}
  .music-title{font-size:.66rem;max-width:92px;}
  .music-switch{font-size:.58rem;}
  .music-switch svg{width:10px;height:10px;}
  .music-menu{min-width:150px;}
  #copy-toast{bottom:calc(3.9rem + env(safe-area-inset-bottom));font-size:.74rem;padding:.45rem .8rem;}
}

/* ===== 风格切换按钮 ===== */
.theme-switcher{
  position:fixed;
  left:1rem;
  bottom:calc(1.2rem + env(safe-area-inset-bottom));
  z-index:100;
}
.theme-toggle{
  width:44px;height:44px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(93,64,55,.14);
  transition:transform .2s;
}
.theme-toggle:active{transform:scale(.92);}
.theme-toggle svg{width:22px;height:22px;}
.theme-menu{
  position:absolute;
  left:0;bottom:calc(100% + .6rem);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:10px;
  padding:.4rem;
  display:flex;
  flex-direction:column;
  gap:.15rem;
  box-shadow:0 6px 20px rgba(93,64,55,.15);
  white-space:nowrap;
  max-height:60vh;
  overflow-y:auto;
}
.theme-menu[hidden]{display:none;}
.theme-menu button{
  display:flex;align-items:center;gap:.5rem;
  border:none;background:none;
  font-family:inherit;font-size:.82rem;
  color:var(--ink-soft);
  padding:.42rem .9rem;
  border-radius:6px;
  cursor:pointer;text-align:left;
}
.theme-menu button .dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;}
.theme-menu button:hover{background:var(--pink-soft);}
.theme-menu button.active{background:var(--pink-soft);color:var(--pink);font-weight:bold;}

/* ===== 花瓣（粉色布局专属装饰） ===== */
.petal{position:fixed;top:-40px;pointer-events:none;opacity:0;z-index:2;animation:petal-fall 8s linear infinite;}
.petal.p1{left:8%;width:40px;}
.petal.p2{left:42%;width:30px;animation-delay:-2.6s;}
.petal.p3{left:76%;width:34px;animation-delay:-5.3s;}
@keyframes petal-fall{
  0%{opacity:0;transform:translateY(0) rotate(0deg);}
  10%{opacity:.75;}
  100%{opacity:0;transform:translateY(105vh) rotate(240deg);}
}

/* ===== 女方/男方 双色变量（地址区分用，全局约定） =====
   所有主题统一一对颜色（不随主题变）：
   女方玫红 --side-f / 男方湖蓝 --side-m，明暗主题下都可读 */
:root{--side-f:#d6336c;--side-m:#1e78c8;}

/* ===== ICP 备案号（滑到页面最底才浮现，全局唯一，颜色随主题 --ink） ===== */
.icp-footer{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:90;
  padding:6px 12px calc(6px + env(safe-area-inset-bottom));
  text-align:center;
  font-size:11px;
  line-height:1.5;
  letter-spacing:.04em;
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity .35s ease,transform .35s ease;
}
.icp-footer::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--bg);
  opacity:.82;
}
.icp-footer a{position:relative;color:var(--ink);text-decoration:none;}
.icp-footer.show{opacity:.85;transform:none;pointer-events:auto;}