/* Basic calm theme, responsive, and animations */
:root{
  --mint:#8fe3c4;
  --sky:#8fb8ff;
  --lav:#c6b6ff;
  --card-bg: rgba(255,255,255,0.9);
}

/* Page background */
.page-bg {
  background: linear-gradient(120deg, rgba(139,195,255,0.15), rgba(140,223,197,0.15));
  background-attachment: fixed;
  min-height:100vh;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* topbar */
.topbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1rem 2rem;
  background: linear-gradient(90deg, rgba(255,255,255,0.25), rgba(255,255,255,0.10));
  backdrop-filter: blur(6px);
  position:sticky;
  top:0;
  z-index:30;
}

/* glass card */
.card {
  background: var(--card-bg);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(20, 20, 40, 0.06);
}

/* common inputs */
.input {
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  border: 1px solid rgba(20,20,30,0.08);
  background: #fff;
  font-weight:600;
  color:#111;
}

/* buttons */
.btn-primary {
  background: linear-gradient(90deg,var(--sky),var(--lav));
  color:#042;
  padding:0.7rem 1rem;
  border-radius:12px;
  font-weight:700;
  border:none;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn-primary:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(60,100,180,0.12); }

.btn-ghost { background:transparent; border:1px solid rgba(0,0,0,0.06); padding:.5rem .75rem; border-radius:10px; }
.btn-logout { background:#ff6b6b; color:white; border-radius:10px; padding:0.5rem 0.8rem; }

/* small utilities */
.container { max-width:1200px; margin:0 auto; }
.text-muted { color:#666; }

/* emojis */
.emoji {
  font-size:2rem; padding:0.4rem; border-radius:10px; cursor:pointer; transition: transform .12s ease, box-shadow .12s ease;
}
.emoji:hover { transform: translateY(-6px) scale(1.08); box-shadow: 0 10px 25px rgba(50,90,160,0.08); }
.emoji.selected { transform: scale(1.28); box-shadow: 0 16px 40px rgba(80,100,220,0.14); border-radius:50%; }

/* modal calm corner */
.modal { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.4); z-index:60; }
.modal-content { width:95%; max-width:900px; background:white; border-radius:12px; padding:1.25rem; }

/* bubble breathing */
.bubble { width:120px; height:120px; border-radius:50%; background:linear-gradient(180deg,var(--mint),var(--sky)); margin:12px auto; box-shadow: 0 12px 30px rgba(80,160,200,0.12); transition: all 0.4s ease; }

/* doodle canvas style */
canvas { width:100%; border-radius:8px; }

/* logs */
#moodLogs .mood-card, #journalList .journal-card, #allMoodsList .mood-item {
  padding:0.6rem; border-radius:10px; background:#fff; font-weight:600; color:#111;
  box-shadow: 0 6px 20px rgba(20,30,60,0.04);
}

/* responsive */
@media (max-width:800px){
  .topbar { padding:0.6rem 1rem; }
  .emoji { font-size:1.6rem; }
}


:root {
  --color1: #8FD694; /* green */
  --color2: #8FB8FF; /* blue */
  --color3: #FF9AA2; /* pink */
  --color4: #FFFFFF; /* white */
}

/* Animated gradient background */
@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  25% { background-position: 50% 100%; }
  50% { background-position: 100% 50%; }
  75% { background-position: 50% 0%; }
  100% { background-position: 0% 50%; }
}

.page-bg {
  background: linear-gradient(120deg, var(--color1), var(--color2), var(--color3), var(--color4));
  background-size: 400% 400%;
  animation: gradientBG 20s ease infinite;
  min-height: 100vh;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Button hover/click animations */
.btn-primary {
  background: linear-gradient(90deg,var(--color2),var(--color3));
  color:#042;
  padding:0.7rem 1rem;
  border-radius:12px;
  font-weight:700;
  border:none;
  cursor:pointer;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-primary:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 35px rgba(120,140,255,0.25);
}
.btn-primary:active {
  filter: brightness(1.2);
  transform: scale(0.95);
  box-shadow: 0 8px 25px rgba(120,140,255,0.35);
}
.btn-ghost {
  background: linear-gradient(135deg, #fff, #e2e8f0);
  border-radius:12px;
  padding:.5rem .75rem;
  border:1px solid rgba(0,0,0,0.06);
  font-weight:600;
  transition: all 0.2s ease;
}
.btn-ghost:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 20px rgba(120,140,200,0.1);
}

/* Dark mode */
body.dark-mode {
  --color1: #0f4c75;
  --color2: #3282b8;
  --color3: #1b262c;
  --color4: #1e1e1e;
  color: #eee;
}
body.dark-mode .card {
  background: rgba(20,20,40,0.85);
  color:#fff;
}
body.dark-mode .input {
  background:#1e1e2a;
  color:#eee;
  border:1px solid rgba(255,255,255,0.15);
}
body.dark-mode .btn-primary {
  color:#fff;
}
body.dark-mode .emoji {
  filter: brightness(1.2);
}

body.dark-mode {
  --color1: #0f4c75;
  --color2: #3282b8;
  --color3: #1b262c;
  --color4: #1e1e1e;
  color: #eee;
}

body.dark-mode .card, body.dark-mode .admin-card {
  background: rgba(20,20,40,0.85);
  color: #fff;
}

body.dark-mode .input, body.dark-mode .select {
  background: #1e1e2a;
  color: #eee;
  border: 1px solid rgba(255,255,255,0.15);
}

body.dark-mode .btn-primary, body.dark-mode .btn-ghost {
  color: #fff;
}

body.dark-mode .chart-container {
  background: rgba(30,30,50,0.6);
}

#calmZone {
  background: linear-gradient(135deg, rgba(79,209,197,0.7), rgba(147,197,253,0.6), rgba(236,72,153,0.6));
  animation: hueShift 10s infinite alternate;
}

@keyframes hueShift {
  from { filter: hue-rotate(0deg); }
  to { filter: hue-rotate(360deg); }
}

#funActivities button {
  transition: all 0.3s ease;
  font-weight: 600;
}
#funActivities button:hover {
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.7);
}
#funActivities textarea {
  background: rgba(255, 255, 255, 0.9);
  color: #333;
}

#calmZone::-webkit-scrollbar {
  width: 8px;
}
#calmZone::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #38bdf8, #ec4899);
  border-radius: 10px;
}
#calmZone::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
}