:root {
  --bg: #F9F9F7; --card: #FFFFFF; --text: #2F2F2C; --muted: #6E6E66;
  --border: #E0E0DA; --navbar: #7A8C78; --header-bg: #657765; --accent: #8DAA8C;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-user-theme]) {
    --bg: #1A1C19; --card: #262825; --text: #EBEDE8; --muted: #A5A99F;
    --border: #6F756B; --navbar: #657765; --header-bg: #7A8C78; --accent: #A7C3A5;
  }
}
:root[data-user-theme="dark"] { --bg: #1A1C19; --card: #262825; --text: #EBEDE8; --muted: #A5A99F; --border: #6F756B; --navbar: #657765; --header-bg: #7A8C78; --accent: #A7C3A5; }
:root[data-user-theme="light"] { --bg: #F9F9F7; --card: #FFFFFF; --text: #2F2F2C; --muted: #6E6E66; --border: #E0E0DA; --navbar: #7A8C78; --header-bg: #657765; --accent: #8DAA8C; }

body { background: var(--bg); color: var(--text); transition: all .4s ease; padding-top: 80px; min-height: 100vh; font-family: system-ui, -apple-system, sans-serif; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 1.2rem; overflow: hidden; box-shadow: 0 8px 25px rgba(0,0,0,.06); transition: .4s; animation: cardFadeIn .7s forwards; opacity: 0; transform: translateY(30px); }
.card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,.14); }
.navbar { background: var(--navbar) !important; box-shadow: 0 4px 15px rgba(0,0,0,.12); }
.day-header { background: var(--header-bg); color: #fff; font-weight: 700; text-align: center; padding: 1.3rem; font-size: 1.25rem; }
.btn-icon, #theme { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.15); backdrop-filter: blur(10px); }
@keyframes cardFadeIn { to { opacity: 1; transform: none; } }
strong { color: var(--accent); font-weight: 800; }
.text-muted { color: var(--muted) !important; }
#loading { color: var(--accent); }
.spinner-border { --bs-spinner-border-color: var(--accent); }
#cards .col:nth-child(n) .card { animation-delay: calc(.1s * var(--i,1)); }

body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%238DAA8C' fill-opacity='0.20' d='M0,160L48,176C96,192,192,224,288,224C384,224,480,192,576,160C672,128,768,96,864,112C960,128,1056,192,1152,208C1248,224,1344,192,1392,176L1440,160L1440,320L0,320Z'/%3E%3C/svg%3E") center bottom / 180% 260px no-repeat, linear-gradient(to bottom, var(--bg) 0%, transparent 50%); }
@media (max-width: 768px) { body::before { background-size: 300% 300px; } }
@media (prefers-color-scheme: dark) { body::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23A7C3A5' fill-opacity='0.12' d='M0,160L48,176C96,192,192,224,288,224C384,224,480,192,576,160C672,128,768,96,864,112C960,128,1056,192,1152,208C1248,224,1344,192,1392,176L1440,160L1440,320L0,320Z'/%3E%3C/svg%3E"); } }