:root {
  --primary-color: #00ffe7;
  --secondary-color: #6e00ff;
  --accent-color: #ff00ff;
  --text-color: #e0e0e0;
  --glass-bg: rgba(20,20,25,0.6);
  --shadow-color: rgba(0,0,0,0.7);
  --hover-glow: rgba(0,255,231,0.5);
}

*{margin:0;padding:0;box-sizing:border-box;font-family:'Inter',sans-serif;}
body{
  background: radial-gradient(circle at 50% 50%, #0b0c10, #1f1f3d, #000014);
  color: var(--text-color);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:20px;
  overflow-x:hidden;
  scroll-behavior:smooth;
  position:relative;
}

#bgParticles{
  position: fixed; top:0; left:0; width:100%; height:100%;
  z-index:-1; pointer-events:none;
}

header{width:100%;max-width:800px;display:flex;justify-content:center;margin-bottom:30px;}
header h1{
  font-size:3rem;
  color: var(--primary-color);
  text-shadow:0 0 10px var(--primary-color),0 0 20px var(--secondary-color),0 0 30px var(--accent-color);
  animation: neonGlow 2s infinite alternate;
}

.journal-input{
  width:100%; max-width:800px; background: var(--glass-bg);
  backdrop-filter: blur(20px); padding:25px; border-radius:25px; border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 15px 40px rgba(0,0,0,0.8), inset 0 0 20px rgba(255,255,255,0.05);
  margin-bottom:30px;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.journal-input:hover{transform:translateY(-5px) scale(1.02); box-shadow:0 20px 60px rgba(0,0,0,0.9), inset 0 0 25px rgba(255,255,255,0.1);}
.journal-input textarea{
  width:100%; height:120px; padding:15px; border-radius:15px; border:none;
  background: rgba(15,15,20,0.8); color: var(--text-color); resize:none; font-size:1rem;
  box-shadow: inset 0 0 25px rgba(255,255,255,0.05); transition: all 0.3s ease;
}
.journal-input textarea:focus{outline:none;box-shadow:0 0 35px var(--primary-color),0 0 50px var(--secondary-color); transform:scale(1.02);}

.mood-selector{display:flex; gap:15px; justify-content:center; margin:25px 0;}
.mood-btn{
  cursor:pointer; padding:15px 22px; border-radius:50%; font-size:2rem;
  border:2px solid rgba(255,255,255,0.15);
  background: rgba(25,25,35,0.7); color: var(--text-color);
  transition: transform 0.3s, box-shadow 0.3s; backdrop-filter: blur(5px);
}
.mood-btn:hover{transform:scale(1.4) rotate(8deg); background: rgba(0,255,231,0.15); box-shadow:0 0 25px var(--primary-color),0 0 50px var(--secondary-color) inset;color: var(--primary-color);}
.mood-btn.selected{animation:bounce 0.3s, neonGlow 1.5s infinite alternate; background: rgba(0,255,231,0.35); color:#000; border-color: var(--primary-color);}

.save-btn, .reset-btn{
  padding:14px 30px; border-radius:20px; border:none; font-weight:700; cursor:pointer; transition: all 0.3s ease; text-shadow:0 0 5px #000;
}
.save-btn{background: linear-gradient(135deg,var(--primary-color),var(--secondary-color),var(--accent-color)); color:#121212; box-shadow:0 0 25px var(--primary-color),0 0 50px var(--secondary-color) inset;}
.save-btn:hover{transform:translateY(-3px) scale(1.08); box-shadow:0 0 40px var(--primary-color),0 0 80px var(--secondary-color) inset;}
.reset-btn{background: linear-gradient(135deg,#ff3d71,#ff6ec7,#f50057); color:#fff; margin-left:12px; box-shadow:0 0 25px #ff3d71,0 0 50px #ff6ec7 inset;}
.reset-btn:hover{transform:translateY(-3px) scale(1.08); box-shadow:0 0 40px #ff3d71,0 0 80px #ff6ec7 inset;}

.entries{display:flex; flex-direction:column; gap:20px; width:100%; max-width:900px;}
.entry{background: rgba(20,20,30,0.7); backdrop-filter: blur(18px); padding:25px 35px; border-radius:25px; border:1px solid rgba(255,255,255,0.1); box-shadow:0 15px 50px rgba(0,0,0,0.8), inset 0 0 20px rgba(255,255,255,0.05); display:flex; flex-direction:column; opacity:0; transform:translateY(50px); transition: all 0.8s ease;}
.entry.show{opacity:1; transform:translateY(0);}
.entry:hover{transform:translateY(-10px) scale(1.04); box-shadow:0 20px 60px var(--hover-glow), inset 0 0 25px rgba(255,255,255,0.1);}
.entry .date{font-size:0.9rem;color:#bbb;}
.entry .text{margin:12px 0;color: var(--text-color); font-weight:500;}
.entry .mood{font-size:2.2rem;color: var(--primary-color); text-shadow:0 0 15px var(--primary-color),0 0 30px var(--secondary-color); animation:pulseMood 2s infinite alternate;}

.analytics{width:100%; max-width:900px; background: rgba(20,20,30,0.7); backdrop-filter: blur(18px); padding:30px; border-radius:25px; border:1px solid rgba(255,255,255,0.1); box-shadow:0 15px 50px rgba(0,0,0,0.8), inset 0 0 20px rgba(255,255,255,0.05); margin-top:35px; color: var(--text-color); transform:translateY(50px); opacity:0; transition: all 0.8s ease;}
.analytics.show{opacity:1; transform:translateY(0);}
.analytics h2{margin-bottom:25px;font-size:2rem;color: var(--primary-color); text-shadow:0 2px 15px rgba(255,204,0,0.7);}
.chart-placeholder{display:flex; flex-direction:column; gap:12px; padding:20px; border-radius:20px; background: rgba(15,15,20,0.65);}

.analytics-bar-container{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.analytics-label{width:90px;text-align:right;font-weight:600;color:#e0e0e0;}
.analytics-bar{flex:1;height:24px;border-radius:14px;background:linear-gradient(90deg,var(--primary-color),var(--secondary-color),var(--accent-color));transition: width 1s ease-in-out;}
.analytics-count{width:40px;text-align:left;font-weight:600;color:#e0e0e0;}

@keyframes neonGlow{0%{text-shadow:0 0 10px var(--primary-color),0 0 20px var(--secondary-color);}100%{text-shadow:0 0 25px var(--primary-color),0 0 40px var(--secondary-color);}}
@keyframes pulseMood{0%{text-shadow:0 0 12px var(--primary-color),0 0 25px var(--secondary-color);}100%{text-shadow:0 0 22px var(--primary-color),0 0 35px var(--secondary-color);}}
@keyframes bounce{0%,100%{transform:scale(1);}50%{transform:scale(1.3);}}

@media(max-width:700px){.journal-input textarea{height:100px;} .entry{flex:1 1 auto;}}