/* ============================================================
   主题变量 · Pink Kitty 🎀 / Purple Devil 🖤
   ============================================================ */

:root {
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif;
  --bounce: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- Pink Kitty ---------- */
[data-theme="pink"] {
  --bg: #FFF6F8;
  --bg-grad: radial-gradient(circle at 15% 10%, #FFE9F0 0, transparent 45%),
             radial-gradient(circle at 85% 25%, #FFF1E6 0, transparent 40%),
             #FFF6F8;
  --pattern: radial-gradient(#FFD9E4 1.6px, transparent 1.6px);
  --pattern-size: 26px 26px;
  --card: #FFFFFF;
  --card-soft: #FFF0F4;
  --text: #5A3A44;
  --text-soft: #C08E9E;
  --on-bg-text: #7C4A5A;
  --primary: #FF7BA2;
  --primary-deep: #F4547F;
  --primary-soft: #FFE3EC;
  --accent: #FF5C7A;
  --gold: #F5A623;
  --border: #FBE0E8;
  --shadow: 0 8px 24px rgba(244, 84, 127, .12);
  --shadow-sm: 0 3px 10px rgba(244, 84, 127, .10);
  --tabbar-bg: rgba(255, 255, 255, .92);
  --overlay: rgba(90, 45, 60, .35);
  --deco-color: #FFC9D9;
  --input-bg: #FFF7F9;
  --danger: #E2506E;
}

/* ---------- Purple Devil ---------- */
[data-theme="purple"] {
  --bg: #241A2E;
  --bg-grad: radial-gradient(circle at 15% 10%, #3A2450 0, transparent 45%),
             radial-gradient(circle at 85% 25%, #2E1B3D 0, transparent 40%),
             linear-gradient(180deg, #251B30, #1E1527);
  --pattern: linear-gradient(45deg, rgba(176, 124, 216, .07) 25%, transparent 25%, transparent 75%, rgba(176, 124, 216, .07) 75%),
             linear-gradient(45deg, rgba(176, 124, 216, .07) 25%, transparent 25%, transparent 75%, rgba(176, 124, 216, .07) 75%);
  --pattern-size: 32px 32px;
  --pattern-pos: 0 0, 16px 16px;
  --card: #FDF7FF;
  --card-soft: #F3E8FB;
  --text: #4A3358;
  --text-soft: #A183B5;
  --on-bg-text: #EBD9FA;
  --primary: #B07CD8;
  --primary-deep: #8F55BE;
  --primary-soft: #EAD9F8;
  --accent: #D08CE0;
  --gold: #E8B84B;
  --border: #E5D2F2;
  --shadow: 0 10px 30px rgba(10, 4, 18, .45);
  --shadow-sm: 0 4px 14px rgba(10, 4, 18, .35);
  --tabbar-bg: rgba(253, 247, 255, .94);
  --overlay: rgba(14, 6, 22, .6);
  --deco-color: #6E4A8F;
  --input-bg: #FBF4FE;
  --danger: #C44B7A;
}

/* ---------- 背景装饰 ---------- */
.bg-deco {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--bg-grad);
}
.bg-deco::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--pattern);
  background-size: var(--pattern-size);
  background-position: var(--pattern-pos, 0 0);
  opacity: .55;
}
.deco svg {
  position: absolute;
  color: var(--deco-color);
  opacity: .5;
  animation: floaty 7s ease-in-out infinite;
}
.deco .d1 { width: 64px; top: 9%;  left: 6%;  animation-delay: 0s; }
.deco .d2 { width: 40px; top: 20%; right: 8%;  animation-delay: 1.2s; }
.deco .d3 { width: 30px; top: 46%; left: 4%;   animation-delay: 2.1s; }
.deco .d4 { width: 56px; top: 62%; right: 5%;  animation-delay: .6s; }
.deco .d5 { width: 48px; top: 82%; left: 10%;  animation-delay: 1.7s; }
.deco .d6 { width: 26px; top: 34%; right: 20%; animation-delay: 2.8s; }

[data-theme="pink"] .deco-purple { display: none; }
[data-theme="purple"] .deco-pink { display: none; }

@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-12px) rotate(5deg); }
}