/* Design System - Single Source of Truth */
/* Generated: 2025-12-04T08:20:50.805Z */

/* ========== Fonts ========== */

@font-face { font-family: Poppins; src: url("../fonts/poppins/Poppins-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }

@font-face { font-family: Poppins; src: url("../fonts/poppins/Poppins-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }

@font-face { font-family: Poppins; src: url("../fonts/poppins/Poppins-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }

@font-face { font-family: Poppins; src: url("../fonts/poppins/Poppins-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }

@font-face { font-family: Poppins; src: url("../fonts/poppins/Poppins-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

@font-face { font-family: "Super Maples"; src: url("../fonts/SuperMaples-2vR2w.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; }

/* ========== CSS Variables ========== */
/* NOTE: Color variables now managed by DaisyUI theme-bridge.css */
/* The following are commented out to allow DaisyUI theming to work */

/* OLD HARDCODED VARIABLES - Now controlled by theme-bridge.css
:root { --bg: #1a1d2e; --bg1: #1f2335; --bg2: #24283b; --accent: #9d7ff7; --accent-hover: #b4a0ff; --accent-glow: rgba(157, 127, 247, 0.2); --accent-border: rgba(157, 127, 247, 0.35); --accent-secondary: #f472b6; --accent-tertiary: #22d3ee; --glass: rgba(255,255,255,0.08); --glass-bg: rgba(255,255,255,0.08); --glass-border: rgba(255,255,255,0.12); --glass-hover: rgba(255,255,255,0.12); --muted: #a9b1d6; --text: #c0caf5; --text-primary: #d5ddf6; --shadow: 0 20px 50px rgba(0,0,0,0.4); --shadow-sm: 0 8px 20px rgba(0,0,0,0.25); --shadow-colored: 0 10px 40px rgba(157, 127, 247, 0.25); --card-hover: rgba(157, 127, 247, 0.1); --card: #24283b; --modal-bg: #1f2335; --modal-border: rgba(157, 127, 247, 0.4); }

[data-theme="light"] { --bg: #f0ede8; --bg1: #e8e4df; --bg2: #dfd9d2; --accent: #8b5cf6; --accent-hover: #7c3aed; --accent-glow: rgba(139, 92, 246, 0.12); --accent-border: rgba(139, 92, 246, 0.25); --accent-secondary: #ec4899; --accent-tertiary: #06b6d4; --glass: rgba(255,255,255,0.7); --glass-border: rgba(0,0,0,0.1); --glass-hover: rgba(0,0,0,0.05); --muted: #6b7280; --text: #374151; --text-primary: #1f2937; --shadow: 0 12px 32px rgba(0,0,0,0.06); --shadow-sm: 0 4px 12px rgba(0,0,0,0.04); --shadow-colored: 0 8px 25px rgba(139, 92, 246, 0.12); --card-hover: rgba(139, 92, 246, 0.06); --card: #ffffff; --modal-bg: rgba(255, 255, 255, 0.95); --modal-border: rgba(139, 92, 246, 0.3); }
*/

/* Decorative elements removed - DaisyUI themes now control all colors */

/* OLD theme toggle styles - no longer needed
[data-theme="light"] body { overflow-x: hidden; background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat: ; background-origin: ; background-clip: ; background-color: ; background-attachment: fixed; }

[data-theme="light"] .top-navbar .theme-toggle::before { content: "☀️"; }

[data-theme="light"] .container > .theme-toggle { background: linear-gradient(135deg, rgb(251, 191, 36) 0%, rgb(245, 158, 11) 100%); box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 8px inset, rgba(251, 191, 36, 0.3) 0px 2px 8px; }

[data-theme="light"] .container > .theme-toggle::before { content: "☀️"; left: 32px; background: linear-gradient(135deg, rgb(255, 255, 255) 0%, rgb(243, 244, 246) 100%); box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px; }

[data-theme="light"] .container > .theme-toggle:hover { box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px inset, rgba(251, 191, 36, 0.4) 0px 4px 12px; }
*/

/* COMMENTED OUT - Now controlled by DaisyUI themes via theme-bridge.css
[data-theme="light"] .suggestions li:hover { background: linear-gradient(90deg, rgba(217, 70, 239, 0.08), rgba(217, 70, 239, 0.04)); }

[data-theme="light"] .hl { background: linear-gradient(90deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.04)); }

[data-theme="dark"] .filter-select option { background: rgb(26, 31, 46); color: rgb(226, 232, 240); }

[data-theme="light"] .filter-select option { background: rgb(255, 255, 255); color: rgb(15, 23, 42); }

[data-theme="light"] .chosen-season.green { background: linear-gradient(135deg, rgb(209, 250, 229), rgb(167, 243, 208)); color: rgb(6, 95, 70); border-color: rgb(110, 231, 183); }

[data-theme="light"] .chosen-season.completed { background: linear-gradient(135deg, rgb(209, 250, 229), rgb(167, 243, 208)); color: rgb(6, 95, 70); border-color: rgb(110, 231, 183); box-shadow: rgba(16, 185, 129, 0.15) 0px 0px 20px; }

[data-theme="light"] .season-badge.green { background: rgb(209, 250, 229); color: rgb(6, 95, 70); border-color: rgb(110, 231, 183); }

[data-theme="light"] .custom-select-list { background: rgba(255, 255, 255, 0.95); }

[data-theme="light"] .select-wrap .season-select option { color: rgb(15, 23, 42); background: rgb(255, 255, 255); }
*/

/* KEPT - Uses CSS variables (will adapt to DaisyUI themes) */
[data-theme="light"] .custom-select-item:hover, [data-theme="light"] .custom-select-item[aria-selected="true"] { background: oklch(var(--p) / 0.1); color: oklch(var(--p)); }

[data-theme="dark"] .mobile-edit-popup { background: oklch(var(--b1)); border-top: 1px solid oklch(var(--bc) / 0.2); }

[data-theme="dark"] .mobile-edit-popup-header { border-bottom-color: oklch(var(--bc) / 0.2); }

[data-theme="dark"] .mobile-edit-popup-header span { color: oklch(var(--bc)); }

[data-theme="dark"] .mobile-edit-popup-close { background: oklch(var(--b2)); color: oklch(var(--bc)); }

[data-theme="dark"] .mobile-edit-popup-close:active { background: oklch(var(--p) / 0.1); }

[data-theme="dark"] .mobile-popup-info { border-bottom-color: oklch(var(--bc) / 0.2); }

[data-theme="dark"] .mobile-popup-title { color: oklch(var(--bc)); }

[data-theme="dark"] .mobile-popup-genres { color: oklch(var(--bc) / 0.6); }

[data-theme="dark"] .mobile-popup-description { color: oklch(var(--bc) / 0.6); }

[data-theme="dark"] .mobile-popup-summary { border-bottom-color: oklch(var(--bc) / 0.2); }

[data-theme="dark"] .mobile-popup-title { color: oklch(var(--bc)); }

[data-theme="dark"] .mobile-popup-subtitle { color: oklch(var(--bc) / 0.6); }

[data-theme="dark"] .mobile-popup-action { background: oklch(var(--b2)); border-color: oklch(var(--bc) / 0.2); color: oklch(var(--bc)); }

[data-theme="dark"] .mobile-popup-action:active { background: oklch(var(--p) / 0.1); }

/* COMMENTED OUT - Hardcoded colors, now controlled by DaisyUI themes
[data-theme="dark"] .mobile-popup-action.positive { background: rgba(34, 197, 94, 0.15); color: rgb(74, 222, 128); }

[data-theme="dark"] .mobile-popup-action.danger { background: rgba(239, 68, 68, 0.15); color: rgb(248, 113, 113); }
*/

[data-theme="dark"] .mobile-popup-icon-row { border-top-color: oklch(var(--bc) / 0.2); }

[data-theme="dark"] .mobile-popup-icon { background: oklch(var(--b2)); border-color: oklch(var(--bc) / 0.2); color: oklch(var(--bc)); }

[data-theme="dark"] .mobile-popup-icon:active { background: oklch(var(--p) / 0.1); }

[data-theme="dark"] .mobile-popup-icon svg { color: oklch(var(--p)); }

[data-theme="light"] #notification-panel { background: oklch(var(--b1)); border-left: 1px solid oklch(var(--bc) / 0.2); }

[data-theme="light"] .notification-header { background: oklch(var(--b1)); border-bottom: 1px solid oklch(var(--bc) / 0.2); }

[data-theme="light"] .notification-item { border-bottom: 1px solid oklch(var(--bc) / 0.2); }

[data-theme="light"] .notification-item:hover { background-color: oklch(var(--b3)); }

[data-theme="light"] .notification-item.unread { background-color: oklch(var(--p) / 0.1); border-left: 3px solid oklch(var(--p)); }

/* COMMENTED OUT - Hardcoded colors, now controlled by DaisyUI themes
[data-theme="light"] #notification-overlay { background: rgba(0, 0, 0, 0.3); }
*/

[data-theme="light"] .notification-title { color: oklch(var(--bc)) !important; }

[data-theme="light"] .notification-message { color: oklch(var(--bc)) !important; }

[data-theme="light"] .notification-time { color: oklch(var(--bc) / 0.6) !important; }

[data-theme="light"] .notification-list::-webkit-scrollbar-thumb { background: oklch(var(--bc) / 0.2); }

[data-theme="light"] .notification-list::-webkit-scrollbar-thumb:hover { background: oklch(var(--b2)); }

/* COMMENTED OUT - Hardcoded colors, now controlled by DaisyUI themes
[data-theme="light"] .notification-item-read { background: rgba(0, 0, 0, 0.02) !important; }

[data-theme="light"] .notification-item-read .notification-title, [data-theme="light"] .notification-item-read .notification-time { color: rgba(15, 23, 42, 0.5); }
*/

/* ========== Animations ========== */

@keyframes twinkle { 
  0%, 100% { opacity: 0.2; background-position: 0% 0%; }
  50% { opacity: 0.4; background-position: 100% 100%; }
}

@keyframes float-gentle { 
  0%, 100% { opacity: 0.1; background-position: 0% 0%; }
  50% { opacity: 0.2; background-position: 50% 50%; }
}

@keyframes organic-flow { 
  0%, 100% { transform: translate(0px, 0px) scale(1) rotate(0deg); opacity: 0.7; }
  25% { transform: translate(30px, -40px) scale(1.05) rotate(5deg); opacity: 0.8; }
  50% { transform: translate(-20px, 30px) scale(0.95) rotate(-3deg); opacity: 0.75; }
  75% { transform: translate(40px, 20px) scale(1.02) rotate(4deg); opacity: 0.7; }
}

@keyframes sunrise { 
  0% { opacity: 0; transform: translateY(100%); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-20%); }
}

@keyframes sunset { 
  0% { opacity: 0; transform: translateY(-100%); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translateY(20%); }
}

@keyframes sparkle-pulse { 
  0%, 100% { opacity: 0; transform: scale(0.8) translateY(0px); }
  50% { opacity: 0.6; transform: scale(1.2) translateY(-5px); }
}

@keyframes loading-shimmer { 
  0% { background-position: 200% 0px; }
  100% { background-position: -200% 0px; }
}

@keyframes loading-dot-pulse { 
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1.3); }
}

@keyframes title-glow { 
  0%, 100% { filter: drop-shadow(transparent 0px 0px 0px); }
  50% { filter: drop-shadow(rgba(255, 107, 157, 0.3) 0px 0px 8px); }
}

@keyframes dropdownSlide { 
  0% { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0px); }
}

@keyframes slideDown { 
  0% { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0px); }
}

@keyframes fadeIn { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes slideUp { 
  0% { transform: translateY(30px); opacity: 0; }
  100% { transform: translateY(0px); opacity: 1; }
}

@keyframes successPulse { 
  0% { transform: scale(1); border-color: oklch(var(--bc) / 0.2); }
  50% { transform: scale(1.02); border-color: rgb(52, 211, 153); box-shadow: rgba(52, 211, 153, 0.4) 0px 0px 30px, rgba(0, 0, 0, 0.5) 0px 20px 60px; }
  100% { transform: scale(1); border-color: rgb(52, 211, 153); box-shadow: rgba(52, 211, 153, 0.3) 0px 0px 20px, rgba(0, 0, 0, 0.5) 0px 20px 60px; }
}

@keyframes errorShake { 
  0%, 100% { transform: translateX(0px); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
  20%, 40%, 60%, 80% { transform: translateX(10px); }
}

@keyframes spin { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes wave { 
  0% { transform: rotate(0deg); }
  10% { transform: rotate(14deg); }
  20% { transform: rotate(-8deg); }
  30% { transform: rotate(14deg); }
  40% { transform: rotate(-4deg); }
  50% { transform: rotate(10deg); }
  60% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

@keyframes iconPop { 
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes fadeInUp { 
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0px); }
}

@keyframes pulse { 
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

@keyframes countdownPulse { 
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(168, 85, 247, 0.1)); }
}

@keyframes urgentBlink { 
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(1.5); }
}

@keyframes urgentPulse { 
  0%, 100% { box-shadow: rgba(239, 68, 68, 0.4) 0px 0px 0px 0px; }
  50% { box-shadow: rgba(239, 68, 68, 0) 0px 0px 0px 4px; }
}

@keyframes dropdown-slide { 
  0% { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 1; transform: translateY(0px); }
}

@keyframes fadeIn { 
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0px); }
}

@keyframes bounce { 
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes pulse-glow { 
  0%, 100% { box-shadow: rgba(255, 107, 157, 0.4) 0px 0px 0px 0px; }
  50% { box-shadow: rgba(255, 107, 157, 0.2) 0px 0px 15px 5px; }
}

@keyframes confetti-fall { 
  0% { transform: translate(0px, 0px) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) rotate(var(--rotation)); opacity: 0; }
}

@keyframes modal-fade-in { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes modal-slide-up { 
  0% { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0px); opacity: 1; }
}

@keyframes slideIn { 
  0% { opacity: 0; transform: translateX(-20px); }
  100% { opacity: 1; transform: translateX(0px); }
}

@keyframes fadeOutMsg { 
  0% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes statCardSlideIn { 
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0px); }
}

@keyframes skeletonShimmer { 
  0% { background-position: 200% 0px; }
  100% { background-position: -200% 0px; }
}

@keyframes skeletonFadeIn { 
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0px); }
}

@keyframes bellRing { 
  0%, 100% { transform: rotate(0deg); }
  10%, 30% { transform: rotate(-10deg); }
  20%, 40% { transform: rotate(10deg); }
}

@keyframes spin { 
  100% { transform: rotate(360deg); }
}

@keyframes slideDown { 
  0% { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0px); }
}

@keyframes skeleton-loading { 
  0% { background-position: 200% 0px; }
  100% { background-position: -200% 0px; }
}

@keyframes slideUp { 
  0% { transform: translateY(100%); opacity: 0; }
  100% { transform: translateY(0px); opacity: 1; }
}

@keyframes bounceIn { 
  0% { transform: scale(0); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes slideInRight { 
  0% { transform: translateX(400px); opacity: 0; }
  100% { transform: translateX(0px); opacity: 1; }
}

@keyframes typing { 
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0px); }
  30% { opacity: 1; transform: translateY(-4px); }
}