/* ============ THEME: PRINCESS · 金白皇室 — royal shimmer / gold glass ============ */
body[data-theme="princess"] {
  --bg: #fffaf0;
  --card: rgba(255, 252, 245, 0.72);
  --primary: #b45309;
  --primary-light: #fef3c7;
  --primary-dark: #78350f;
  --accent: #eab308;
  --accent-light: #fef9c3;
  --success: #84cc16;
  --success-light: #ecfccb;
  --text: #3f2306;
  --text-secondary: #78350f;
  --text-muted: #a16207;
  --border: rgba(180, 83, 9, 0.12);
  --danger: #b91c1c;
  --radius: 22px;
  --shadow: 0 8px 32px rgba(180, 83, 9, 0.10);
  --shadow-lg: 0 24px 60px rgba(180, 83, 9, 0.18);
  --font-stack: 'Cormorant Garamond', 'Noto Serif SC', Georgia, serif;
}

body[data-theme="princess"] {
  background:
    radial-gradient(circle at 20% 6%, rgba(250, 204, 21, 0.28), transparent 35%),
    radial-gradient(circle at 80% 12%, rgba(245, 158, 11, 0.18), transparent 35%),
    radial-gradient(circle at 50% 90%, rgba(253, 230, 138, 0.12), transparent 40%),
    linear-gradient(180deg, #fffaf0 0%, #fffbeb 45%, #fef3c7 100%);
}

/* gold sparkle particles */
body[data-theme="princess"]::before {
  content: ''; position: fixed; pointer-events: none; z-index: 0;
  width: 4px; height: 4px; border-radius: 50%;
  top: 12%; left: 20%;
  background: #fbbf24;
  box-shadow:
    60px 20px 0 0 rgba(251, 191, 36, 0.7),
    120px -10px 0 1px rgba(234, 179, 8, 0.5),
    200px 40px 0 0 rgba(251, 191, 36, 0.6),
    280px 15px 0 1px rgba(245, 158, 11, 0.4),
    340px 50px 0 0 rgba(251, 191, 36, 0.5),
    30px 80px 0 1px rgba(234, 179, 8, 0.3),
    170px 100px 0 0 rgba(251, 191, 36, 0.4),
    250px 90px 0 1px rgba(245, 158, 11, 0.3);
  animation: sparkleShift 6s ease-in-out infinite;
}
@keyframes sparkleShift {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}

/* floating crown ornament */
body[data-theme="princess"]::after {
  content: '👑'; position: fixed; pointer-events: none; z-index: 0;
  font-size: 24px; opacity: 0.2;
  top: 6%; right: 14%;
  animation: crownFloat 12s ease-in-out infinite;
}
@keyframes crownFloat {
  0%, 100% { transform: translateY(0) rotate(-5deg); opacity: 0.2; }
  50% { transform: translateY(-12px) rotate(5deg); opacity: 0.35; }
}

body[data-theme="princess"] .auth-title {
  font-family: var(--font-stack);
  background: linear-gradient(135deg, #b45309, #eab308 60%, #fbbf24);
  -webkit-background-clip: text; color: transparent;
  font-size: 32px; letter-spacing: 1px; font-weight: 700;
}
body[data-theme="princess"] .auth-logo {
  width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 30%, #fef9c3, #fde68a 50%, #d97706 100%);
  font-size: 52px;
  box-shadow: 0 0 0 4px #fef3c7, 0 0 0 6px #eab308, 0 0 30px rgba(234, 179, 8, 0.25), 0 24px 50px rgba(180, 83, 9, 0.30);
  animation: floatBadge 3.4s ease-in-out infinite;
}
@keyframes floatBadge { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(3deg); } }
body[data-theme="princess"] .auth-subtitle { font-family: var(--font-stack); color: var(--primary-dark); font-style: italic; font-size: 16px; }
body[data-theme="princess"] .auth-form {
  background: rgba(255, 251, 235, 0.60); border: 1.5px solid rgba(253, 230, 138, 0.6);
  border-radius: 22px; padding: 22px;
  backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: 0 8px 32px rgba(180, 83, 9, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
body[data-theme="princess"] .auth-btn,
body[data-theme="princess"] .save-btn,
body[data-theme="princess"] .modal-btn,
body[data-theme="princess"] .dream-add-btn,
body[data-theme="princess"] .onboarding-next {
  background: linear-gradient(135deg, #fbbf24, #d97706 50%, #b45309);
  color: #fffbeb; font-family: var(--font-stack); font-weight: 700; letter-spacing: 0.5px;
  box-shadow: 0 12px 24px rgba(180, 83, 9, 0.22);
  border-radius: 14px;
  transition: all 0.22s ease;
  position: relative; overflow: hidden;
}
/* gold shimmer sweep on buttons */
body[data-theme="princess"] .auth-btn::after,
body[data-theme="princess"] .save-btn::after,
body[data-theme="princess"] .modal-btn::after,
body[data-theme="princess"] .dream-add-btn::after,
body[data-theme="princess"] .onboarding-next::after {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  animation: goldSweep 3s ease-in-out infinite;
}
@keyframes goldSweep {
  0% { left: -100%; }
  50%, 100% { left: 100%; }
}
body[data-theme="princess"] .auth-btn:hover,
body[data-theme="princess"] .save-btn:hover,
body[data-theme="princess"] .modal-btn:hover,
body[data-theme="princess"] .dream-add-btn:hover,
body[data-theme="princess"] .onboarding-next:hover {
  box-shadow: 0 16px 32px rgba(180, 83, 9, 0.30), 0 0 20px rgba(234, 179, 8, 0.15);
  transform: translateY(-1px);
}
body[data-theme="princess"] .auth-input,
body[data-theme="princess"] .modal-input,
body[data-theme="princess"] .dream-input,
body[data-theme="princess"] .entry-input,
body[data-theme="princess"] .tag-select {
  background: rgba(255, 251, 235, 0.65); border-color: rgba(253, 230, 138, 0.5);
  backdrop-filter: blur(8px);
  transition: all 0.22s ease;
}
body[data-theme="princess"] .auth-input:focus,
body[data-theme="princess"] .modal-input:focus,
body[data-theme="princess"] .dream-input:focus,
body[data-theme="princess"] .entry-input:focus,
body[data-theme="princess"] .tag-select:focus {
  border-color: #eab308;
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.12), 0 0 12px rgba(234, 179, 8, 0.08);
}
body[data-theme="princess"] .header {
  background: rgba(255, 251, 235, 0.55);
  backdrop-filter: blur(24px) saturate(1.4);
  border-bottom: 1px solid rgba(253, 230, 138, 0.4);
  box-shadow: 0 4px 24px rgba(180, 83, 9, 0.04);
}
body[data-theme="princess"] .header h1 {
  font-family: var(--font-stack); font-size: 24px; letter-spacing: 1px;
  background: linear-gradient(135deg, #b45309, #eab308); -webkit-background-clip: text; color: transparent;
}
body[data-theme="princess"] .streak-badge {
  background: rgba(254, 243, 199, 0.65); color: var(--primary-dark);
  border: 1px solid rgba(251, 191, 36, 0.4);
  box-shadow: 0 6px 18px rgba(180, 83, 9, 0.10);
  font-family: var(--font-stack); font-weight: 700;
  backdrop-filter: blur(8px);
}
body[data-theme="princess"] .card,
body[data-theme="princess"] .chart-container,
body[data-theme="princess"] .stat-card,
body[data-theme="princess"] .profile-card,
body[data-theme="princess"] .badge-tile,
body[data-theme="princess"] .badge-summary,
body[data-theme="princess"] .quest-card,
body[data-theme="princess"] .progress-section {
  background: rgba(255, 251, 235, 0.55);
  border: 1px solid rgba(253, 230, 138, 0.35);
  backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: 0 8px 32px rgba(180, 83, 9, 0.06);
  transition: all 0.22s ease;
}
body[data-theme="princess"] .card:hover,
body[data-theme="princess"] .stat-card:hover,
body[data-theme="princess"] .quest-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(180, 83, 9, 0.10), 0 0 16px rgba(234, 179, 8, 0.06);
}
body[data-theme="princess"] .quote-card {
  background: linear-gradient(135deg, #b45309 0%, #d97706 50%, #fbbf24 100%);
  box-shadow: 0 22px 46px rgba(180, 83, 9, 0.22);
  position: relative; overflow: hidden;
}
/* crown ornament on quote */
body[data-theme="princess"] .quote-card::after {
  content: '♛'; position: absolute; right: 16px; top: 8px;
  font-size: 22px; opacity: 0.3;
  animation: crownFloat 8s ease-in-out infinite;
}
body[data-theme="princess"] .quote-text { font-family: var(--font-stack); font-size: 17px; font-style: italic; }
body[data-theme="princess"] .hero-card {
  background: linear-gradient(140deg, #92400e 0%, #b45309 30%, #d97706 60%, #fbbf24 100%);
  box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.15), 0 20px 50px rgba(180, 83, 9, 0.20);
  position: relative; overflow: hidden;
}
/* shimmer overlay on hero */
body[data-theme="princess"] .hero-card::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.12) 45%, transparent 55%);
  animation: heroShimmer 5s ease-in-out infinite;
}
@keyframes heroShimmer {
  0% { transform: translateX(-100%); }
  50%, 100% { transform: translateX(100%); }
}
body[data-theme="princess"] .progress-ring-fill { stroke: var(--accent); filter: drop-shadow(0 4px 10px rgba(234, 179, 8, 0.4)); }
body[data-theme="princess"] .progress-center { color: var(--primary); }
body[data-theme="princess"] .entry-row {
  background: rgba(254, 243, 199, 0.35);
  border: 1px solid rgba(253, 230, 138, 0.35);
  border-radius: 14px; padding: 8px;
  backdrop-filter: blur(8px);
  transition: all 0.22s ease;
}
body[data-theme="princess"] .entry-row:hover { transform: translateX(4px); }
body[data-theme="princess"] .entry-number { background: rgba(254, 249, 195, 0.65); color: var(--primary-dark); }
body[data-theme="princess"] .entry-number.filled {
  background: linear-gradient(135deg, #eab308, #b45309); color: white;
  box-shadow: 0 6px 14px rgba(234, 179, 8, 0.20);
}
body[data-theme="princess"] .entry-add-btn { color: var(--primary); border-color: rgba(253, 230, 138, 0.5); background: rgba(254, 243, 199, 0.35); }
body[data-theme="princess"] .entry-add-btn:hover { background: rgba(254, 243, 199, 0.65); }
body[data-theme="princess"] .tab-bar {
  bottom: 10px; width: calc(100% - 24px);
  border: 1px solid rgba(253, 230, 138, 0.4);
  border-radius: 22px;
  background: rgba(255, 251, 235, 0.55);
  backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: 0 12px 40px rgba(180, 83, 9, 0.08);
}
body[data-theme="princess"] .tab-item { transition: all 0.22s ease; }
body[data-theme="princess"] .tab-item.active {
  color: white; background: linear-gradient(135deg, #fbbf24, #d97706, #b45309);
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(180, 83, 9, 0.20), 0 0 12px rgba(234, 179, 8, 0.10);
}
body[data-theme="princess"] .jar-card {
  background: linear-gradient(135deg, #fef3c7, #fbbf24 50%, #b45309); color: #3f2306;
  box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.12), 0 22px 50px rgba(180, 83, 9, 0.18);
}
body[data-theme="princess"] .jar-btn { backdrop-filter: blur(8px); transition: all 0.2s ease; }
body[data-theme="princess"] .jar-btn:hover { background: rgba(255, 255, 255, 0.35); }
body[data-theme="princess"] .dream-progress-fill {
  background: linear-gradient(90deg, #fbbf24, #b45309);
  box-shadow: 0 0 6px rgba(234, 179, 8, 0.3);
}
body[data-theme="princess"] .stat-value { color: var(--primary); font-family: var(--font-stack); }
body[data-theme="princess"] .profile-avatar {
  background: radial-gradient(circle at 30% 30%, #fef9c3, #d97706);
  box-shadow: 0 0 0 3px #fef3c7, 0 0 0 5px #eab308, 0 0 20px rgba(234, 179, 8, 0.2);
}
body[data-theme="princess"] .toast { background: linear-gradient(135deg, #78350f, #d97706); }
body[data-theme="princess"] .modal-overlay { background: rgba(63, 35, 6, 0.22); backdrop-filter: blur(12px); }
body[data-theme="princess"] .modal {
  background: rgba(255, 251, 235, 0.80);
  border: 1px solid rgba(253, 230, 138, 0.5);
  backdrop-filter: blur(24px) saturate(1.3);
}
body[data-theme="princess"] .calendar-day { transition: all 0.18s ease; }
body[data-theme="princess"] .calendar-day:hover { transform: scale(1.1); }
body[data-theme="princess"] .calendar-day.today { border-color: var(--accent); box-shadow: 0 0 8px rgba(234, 179, 8, 0.25); }
body[data-theme="princess"] .badge-tile {
  transition: all 0.22s ease;
}
body[data-theme="princess"] .badge-tile:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 14px 36px rgba(180, 83, 9, 0.12), 0 0 12px rgba(234, 179, 8, 0.06);
}
body[data-theme="princess"] .badge-tile.unlocked {
  background: linear-gradient(140deg, rgba(254, 243, 199, 0.5), rgba(255, 255, 255, 0.6));
  border: 1px solid rgba(251, 191, 36, 0.35);
}
body[data-theme="princess"] .badge-tile.unlocked .icon {
  filter: drop-shadow(0 4px 8px rgba(180, 83, 9, 0.2));
}

/* xp bar gold */
body[data-theme="princess"] .xp-bar-fill {
  background: linear-gradient(90deg, #fde68a, #fbbf24, #d97706);
  box-shadow: 0 0 10px rgba(234, 179, 8, 0.5);
}

/* decorative gold line under header */
body[data-theme="princess"] .header::after {
  content: ''; position: absolute; bottom: -1px; left: 10%; right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #fbbf24, #eab308, #fbbf24, transparent);
  opacity: 0.5;
}