:root{
  --bg:#f4f7fb;
  --bg-2:#eef6ff;
  --glass: rgba(255,255,255,0.72);
  --accent:#2b7cff;
  --muted:#6b7280;
  --card-radius:14px;
  --shadow: 0 12px 40px rgba(11,22,55,0.06);
  --text:#07203b;
  --logo-grad: linear-gradient(135deg,var(--accent),#7ad0ff);
}

/* Dark (Soft Calm) variables */
:root.dark{
  --bg:#2d3748;
  --bg-2:#4a5568;
  --glass: rgba(255,255,255,0.06);
  --accent:#7ad0ff;
  --muted:#cbd5e1;
  --shadow: 0 12px 40px rgba(2,6,23,0.6);
  --text:#e6eef8;
  --logo-grad: linear-gradient(135deg,#4a5568,#2d3748);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:linear-gradient(180deg,var(--bg-2),var(--bg));
  color:var(--text);
  margin:0;padding:0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition:background .45s, color .3s;
  overflow:hidden;
}
.container{max-width:1100px;margin:0 auto;padding:18px;opacity:0;transform:scale(0.98);transition:all .6s cubic-bezier(.16,1,.3,1);height:100vh;display:flex;flex-direction:column;}
.container.show{opacity:1;transform:scale(1);}

/* Splash Screen */
#splash{
  position:fixed;inset:0;background:linear-gradient(135deg,#2b7cff,#7ad0ff);
  display:flex;flex-direction:column;align-items:center;justify-content:center;color:white;z-index:9999;
  opacity:1;transition:opacity .6s, transform .6s;
}
#splash.dim{background:linear-gradient(135deg,#1f2937,#374151);}
#splash h1{font-size:42px;font-weight:800;margin:0 0 8px;letter-spacing:0.2px;}
#splash p{font-size:16px;margin-bottom:20px;opacity:0.95;}
.theme-grid{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;max-width:900px;padding:8px;}
.theme-btn{
  width:140px;height:140px;border-radius:18px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px;gap:8px;
  color:white;font-weight:700;font-size:14px;box-shadow:0 18px 45px rgba(0,0,0,0.18);
  transition:transform .28s, box-shadow .28s, opacity .28s;
}
.theme-btn:hover{transform:translateY(-8px);box-shadow:0 30px 80px rgba(0,0,0,0.28);}

/* small footer on splash */
.splash-footer{margin-top:18px;color:rgba(255,255,255,0.9);font-size:13px;opacity:0.95;display:flex;gap:12px;align-items:center;flex-direction:column;}
.splash-choose{font-size:13px;opacity:0.95}

/* UI */
.header{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.logo{width:54px;height:54px;border-radius:12px;background:var(--logo-grad);display:flex;align-items:center;justify-content:center;color:white;font-weight:800;font-size:20px;box-shadow:var(--shadow);transition:all .35s;}
.title{font-size:20px;font-weight:700;}
.subtitle{color:var(--muted);font-size:13px;margin-top:4px;}
.controls{margin-left:auto;display:flex;gap:8px;align-items:center;}
.btn{padding:8px 14px;border-radius:10px;border:0;background:var(--accent);color:white;cursor:pointer;font-weight:700;transition:transform .15s,opacity .12s;}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--text);border:1px solid rgba(7,32,59,0.06);}

/* layout */
.main-row{display:grid;grid-template-columns:1fr 360px;gap:20px;align-items:start;flex:1;overflow:auto;padding-bottom:20px}
.card{background:var(--glass);backdrop-filter:blur(10px);border-radius:var(--card-radius);padding:18px;border:1px solid rgba(255,255,255,0.06);box-shadow:var(--shadow);transition:all .3s;}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-top:12px;}
.day{min-height:100px;padding:12px;border-radius:12px;position:relative;background:linear-gradient(180deg,rgba(255,255,255,0.03),transparent);border:1px solid rgba(0,0,0,0.06);cursor:pointer;transition:all .18s;overflow:hidden}
.day:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(2,6,23,0.12);}
.day.today{border:2.5px solid var(--accent)!important;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.04))!important;}
.date-num{position:absolute;left:12px;top:10px;color:var(--muted);font-weight:700;}
.emoji{position:absolute;right:12px;bottom:10px;font-size:26px;}
.note-dot{position:absolute;left:10px;bottom:10px;width:10px;height:10px;border-radius:50%;background:rgba(43,124,255,0.95);box-shadow:0 4px 10px rgba(43,124,255,0.18);}

/* premium watermark */
.watermark{
  position:fixed;right:10px;bottom:10px;opacity:0.06;font-size:60px;pointer-events:none;transform:rotate(-22deg);
}

/* advice & misc */
.advice-box{min-height:110px;padding:14px;border-radius:12px;background:linear-gradient(180deg,transparent,rgba(255,255,255,0.02));font-weight:600;line-height:1.5;}
.lang{padding:6px 10px;border-radius:8px;border:1px solid rgba(7,32,59,0.06);background:transparent;color:var(--text)}
.small{font-size:12px;color:var(--muted)}

/* modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(7,12,24,0.5);display:none;align-items:center;justify-content:center;z-index:9999;}
.modal{width:460px;border-radius:16px;padding:20px;background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.02));backdrop-filter:blur(6px);box-shadow:0 30px 80px rgba(2,6,23,0.45);border:1px solid rgba(255,255,255,0.03);color:var(--text)}
.mood-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px;}
.mood-card{padding:12px;border-radius:12px;background:linear-gradient(180deg,transparent,rgba(255,255,255,0.01));text-align:center;cursor:pointer;border:1px solid rgba(7,32,59,0.04);transition:all .2s;}
.mood-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,0.12);}
.mood-card.selected{box-shadow:0 0 0 3px var(--accent);background:rgba(122,208,255,0.06);}
.note-input{width:100%;min-height:80px;padding:12px;border-radius:8px;border:1px solid rgba(7,32,59,0.06);margin-top:12px;font-family:'Inter',sans-serif;resize:vertical;background:transparent;color:var(--text)}
.percentage-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px;}
.percentage-card{padding:12px;border-radius:10px;background:linear-gradient(180deg,transparent,rgba(255,255,255,0.02));text-align:center;}
@keyframes emojiFly{0%{transform:scale(1);opacity:1;}100%{transform:scale(2) translateY(-100px);opacity:0;}}
.emoji-fly{position:fixed;font-size:40px;animation:emojiFly .8s ease-out forwards;z-index:99999;}
.quick-actions{display:flex;gap:8px;align-items:center}

/* Chart area */
.chart-card{margin-top:12px}
.canvas-wrap{height:220px}

/* responsive */
@media(max-width:900px){
  .main-row{grid-template-columns:1fr}
  .theme-grid{gap:12px}
  .theme-btn{width:120px;height:120px}
  .container{padding:12px}
}