/* ============ 主题变量 ============ */
:root {
  --bg1: #eef2f8;
  --bg2: #d9e3f2;
}

* { -webkit-tap-highlight-color: transparent; }

/* ============ 动态壁纸背景（CSS 动态渐变，省电流畅） ============ */
body {
  background: linear-gradient(135deg, var(--bg1), var(--bg2), var(--bg1));
  background-size: 400% 400%;
  animation: bgshift 20s ease infinite;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}
@keyframes bgshift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 漂浮光斑，叠加出"动态壁纸"质感 */
.bg-anim { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .45; }
.b1 { width: 320px; height: 320px; background: #7aa2ff; top: -80px; left: -60px;  animation: float1 16s ease-in-out infinite; }
.b2 { width: 280px; height: 280px; background: #ff9ec7; bottom: -100px; right: -60px; animation: float2 20s ease-in-out infinite; }
.b3 { width: 240px; height: 240px; background: #9ef0d0; top: 42%; left: 55%;        animation: float3 24s ease-in-out infinite; }
@keyframes float1 { 0%,100%{ transform: translate(0,0); }        50%{ transform: translate(60px,40px); } }
@keyframes float2 { 0%,100%{ transform: translate(0,0); }        50%{ transform: translate(-50px,-40px); } }
@keyframes float3 { 0%,100%{ transform: translate(0,0); }        50%{ transform: translate(-40px,60px); } }

/* ============ 笔记正文：保留换行与空格 ============ */
.note-content {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 1rem;
  line-height: 1.7;
  font-family: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* ============ 卡片：半透明磨砂，融入背景（可在后台改 --card-bg） ============ */
.note-card {
  transition: transform .12s ease, box-shadow .12s ease;
  background: var(--card-bg, rgba(255, 255, 255, .68)) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .55);
}
.note-card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.1) !important; }
[data-bs-theme="dark"] .note-card {
  background: var(--card-bg, rgba(28, 32, 40, .66)) !important;
  border-color: rgba(255, 255, 255, .08);
}

/* ============ 开屏过场动画 ============ */
.splash {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, #2b3035 0%, #0b0d10 78%);
  transition: opacity .7s ease, visibility .7s ease;
}
.splash.hide { opacity: 0; visibility: hidden; }
.splash-inner { text-align: center; color: #fff; }
.splash-star {
  font-size: 92px; line-height: 1;
  animation: starPop 1.5s cubic-bezier(.2,.8,.2,1) both,
             starFloat 3s ease-in-out 1.5s infinite;
  display: inline-block;
}
.splash-title {
  margin-top: 16px; font-size: 22px; letter-spacing: 8px; color: #e9ecef;
  animation: fadeUp 1.1s .35s both;
}
.splash-sub { margin-top: 8px; font-size: 12px; letter-spacing: 3px; color: #868e96;
  animation: fadeUp 1.1s .55s both; }
.splash-bar {
  width: 168px; height: 3px; border-radius: 3px; margin: 26px auto 0;
  background: rgba(255,255,255,.14); overflow: hidden;
}
.splash-bar span {
  display: block; height: 100%; width: 42%; border-radius: 3px; background: #ffd43b;
  box-shadow: 0 0 12px #ffd43b; animation: load 1.5s ease-in-out infinite;
}
@keyframes starPop {
  0%   { transform: scale(.2) rotate(-45deg); opacity: 0; }
  60%  { transform: scale(1.18) rotate(7deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
@keyframes starFloat { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } }
@keyframes fadeUp { 0%{ opacity: 0; transform: translateY(14px); } 100%{ opacity: 1; transform: translateY(0); } }
@keyframes load { 0%{ margin-left: -42%; } 100%{ margin-left: 100%; } }

/* ============ 无障碍：用户关掉动画时不折腾 ============ */
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  .blob { animation: none; }
  .splash-star, .splash-title, .splash-sub, .splash-bar span { animation-duration: .001s; animation-iteration-count: 1; }
}

/* ============ 界面主色（可在「我的 → 设置」里改） ============ */
:root { --accent: #0d6efd; }

a { color: var(--accent); }

.btn-primary {
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: color-mix(in srgb, var(--accent) 85%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--accent) 85%, #000);
  --bs-btn-active-bg: color-mix(in srgb, var(--accent) 75%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--accent) 75%, #000);
  --bs-btn-disabled-bg: var(--accent);
  --bs-btn-disabled-border-color: var(--accent);
}
.btn-outline-primary {
  --bs-btn-color: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent);
  --bs-btn-hover-border-color: var(--accent);
  --bs-btn-active-bg: var(--accent);
  --bs-btn-active-border-color: var(--accent);
}
.btn-outline-primary.active { background: var(--accent); color: #fff; }

/* ============ 头像 ============ */
.avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700; flex: 0 0 auto;
}

/* ============ 微信式底部导航 ============ */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; height: 58px;
  display: flex; z-index: 1030;
  background: var(--bs-body-bg, #fff);
  border-top: 1px solid rgba(0, 0, 0, .08);
  padding-bottom: env(safe-area-inset-bottom);
}
[data-bs-theme="dark"] .tabbar { border-top-color: rgba(255, 255, 255, .1); }
.tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; text-decoration: none; color: #8a8f98; font-size: 12px;
}
.tabbar a.active { color: var(--accent); }
.tabbar .ico { font-size: 22px; line-height: 1; }

body { padding-bottom: 78px; }

/* ============ 深色主题下的动态背景 ============ */
[data-bs-theme="dark"] body {
  background: linear-gradient(135deg, #10141a, #1a2230, #10141a);
  background-size: 400% 400%;
  animation: bgshift 20s ease infinite;
}
[data-bs-theme="dark"] .blob { opacity: .22; }
[data-bs-theme="dark"] .note-card:hover { box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .5) !important; }

/* ============ 静态页：悬浮设置按钮/面板 ============ */
.set-fab {
  position: fixed; right: 16px; bottom: 78px;
  width: 48px; height: 48px; border-radius: 50%; border: none;
  background: var(--accent); color: #fff; font-size: 22px; z-index: 1040;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
.set-panel {
  position: fixed; right: 16px; bottom: 136px; width: 264px; z-index: 1050;
  display: none;
}
.set-panel.open { display: block; }

/* ============ 顶部标题：融入背景 + 禁止选中（防止点击跳出搜索） ============ */
.page-head {
  text-align: center; padding: 20px 0 6px;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.page-head .t1 {
  font-size: .95rem; letter-spacing: 4px; font-weight: 600;
  color: rgba(0, 0, 0, .30);
}
[data-bs-theme="dark"] .page-head .t1 { color: rgba(255, 255, 255, .32); }

/* 底部导航、标题、卡片标题：不可选中 */
.tabbar, .tabbar a, .page-head, .card-title, .note-card .card-title a {
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}

/* ============ 全局：压掉长按菜单（文字/链接都不弹） ============ */
* { -webkit-touch-callout: none; }
html, body { -webkit-user-select: none; user-select: none; }
/* 表单输入区允许选中，方便编辑 */
input, textarea, .allow-select {
  -webkit-user-select: text !important;
  user-select: text !important;
}

/* ============ 字体工具类（分镜用） ============ */
.f-hei  { font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; }
.f-yahei { font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Noto Sans CJK SC", sans-serif; }
.f-song { font-family: "Songti SC", "SimSun", "宋体", "Noto Serif CJK SC", serif; }
.f-kai  { font-family: "Kaiti SC", "KaiTi", "STKaiti", "楷体", serif; }
.f-fang { font-family: "STFangsong", "FangSong", "仿宋", serif; }
.f-yuan { font-family: "Yuanti SC", "YouYuan", "幼圆", "圆体", sans-serif; }
.f-lishu { font-family: "LiSu", "STLiti", "隶书", serif; }
.f-xingkai { font-family: "STXingkai", "Xingkai SC", "华文行楷", cursive; }
.f-shou { font-family: "Hanzipen SC", "cursive", cursive; }
.f-serif { font-family: Georgia, "Times New Roman", "Songti SC", "Noto Serif CJK SC", serif; }
.f-sans  { font-family: Arial, Helvetica, "PingFang SC", "Microsoft YaHei", sans-serif; }
.f-mono  { font-family: "SFMono-Regular", Menlo, Consolas, "Courier New", monospace; }
.italic { font-style: italic; }
.bold { font-weight: 700; }
.pos-center { text-align: center; }
.pos-left   { text-align: left; }
.pos-right  { text-align: right; }

/* ============ 互动回忆播放器 ============ */
.sp { position: fixed; inset: 0; z-index: 2000; background: #0b0d10; color: #fff;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overflow: hidden; cursor: pointer; }
.sp-bg { position: absolute; inset: 0; z-index: 0; transition: background 1.4s ease;
  background: radial-gradient(circle at 50% 30%, #1b2230, #0b0d10 70%); }
.sp-bg-video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.sp-scene { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  padding: 9vw; opacity: 0; transform: translateY(16px) scale(.99);
  transition: opacity .9s ease, transform .9s ease; pointer-events: none; }
.sp-scene.on { opacity: 1; transform: none; }
.sp-txt { width: max-content; max-width: 86%; line-height: 1.95; white-space: pre-line;
  text-shadow: 0 2px 20px rgba(0,0,0,.55); }
.sp-hint { position: absolute; bottom: 28px; left: 0; right: 0; text-align: center;
  font-size: 13px; letter-spacing: 2px; color: rgba(255,255,255,.42); transition: opacity 1s ease; }
.sp-hint.gone { opacity: 0; }
.sp-exit { position: absolute; top: 12px; left: 14px; z-index: 5; color: rgba(255,255,255,.5);
  text-decoration: none; font-size: 20px; line-height: 1; padding: 6px; }
.sp-splash { position: absolute; inset: 0; z-index: 9; background: #0b0d10;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  transition: opacity .9s ease, visibility .9s ease; }
.sp-splash.hide { opacity: 0; visibility: hidden; }
.sp-star { font-size: 76px; animation: sp-pop 1.3s cubic-bezier(.2,.8,.2,1) both; }
.sp-ttl { letter-spacing: 6px; color: #e9ecef; }
@keyframes sp-pop { 0%{ transform: scale(.3) rotate(-20deg); opacity: 0; } 60%{ transform: scale(1.15); } 100%{ transform: scale(1); } }

/* 唱机 */
.sp-gramo { position: absolute; right: 14px; bottom: 18px; z-index: 6;
  width: 92px; height: 88px; background: none; border: none; padding: 0; }
.sp-gramo .sp-base { position: absolute; right: 0; bottom: 0; width: 92px; height: 40px;
  border-radius: 8px; background: linear-gradient(#3a2f22, #241d15);
  box-shadow: 0 6px 16px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08); }
.sp-gramo .sp-platter { position: absolute; left: 4px; bottom: 8px; width: 62px; height: 62px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #cdb173 0 24%, #0e0e0e 25% 29%, #1c1c1c 29% 100%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.05) 0 1px, transparent 1px 3px);
  box-shadow: 0 0 0 2px rgba(205,177,115,.30), 0 4px 12px rgba(0,0,0,.6); }
.sp-gramo .sp-platter::after { content: ''; position: absolute; left: 50%; top: 50%;
  width: 6px; height: 6px; border-radius: 50%; background: #0b0d10; transform: translate(-50%,-50%); }
.sp-gramo.on .sp-platter { animation: sp-spin 3s linear infinite; }
.sp-gramo .sp-arm { position: absolute; right: 12px; bottom: 14px; width: 5px; height: 56px; border-radius: 3px;
  background: linear-gradient(#e6d29a, #9a7c34); transform-origin: bottom center; transform: rotate(40deg);
  transition: transform .7s cubic-bezier(.4,0,.2,1); box-shadow: 0 0 6px rgba(0,0,0,.5); }
.sp-gramo .sp-arm::before { content: ''; position: absolute; left: 50%; top: -7px; transform: translateX(-50%);
  width: 13px; height: 13px; border-radius: 50%; background: #c9a24a; box-shadow: inset 0 0 0 2px rgba(0,0,0,.28); }
.sp-gramo.on .sp-arm { transform: rotate(-26deg); }
@keyframes sp-spin { to { transform: rotate(360deg); } }