:root{
  --bg1: #101827;
  --bg2: #131d2f;

  --card: #1a2538;
  --card2: #1d2940;

  --text: #eaf0ff;
  --muted: rgba(234,240,255,.72);
  --border: rgba(255,255,255,.08);

  --shadow: 0 10px 24px rgba(0,0,0,.22);

  --primary: #4c7dff;
  --primary2: #2dd4bf;
  --danger: #ff4d6d;

  --soft: #22314c;
  --soft2: #2a3a59;
}

html,
body{
  background: linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 100%);
  color: var(--text);
}

body{
  margin: 0;
  padding: 18px 16px 90px;
  color: var(--text);
  background-attachment: fixed;
}

body.light-theme{
  --bg1: #eef3ff;
  --bg2: #dfe8ff;

  --card: #ffffff;
  --card2: #f7f9ff;

  --text: #15203a;
  --muted: rgba(21,32,58,.72);
  --border: rgba(21,32,58,.08);

  --shadow: 0 10px 24px rgba(0,0,0,.08);

  --soft: #edf2ff;
  --soft2: #e4ebff;

  background: linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 100%);
  color: var(--text);
}

.card{
  background: linear-gradient(180deg, var(--card) 0%, var(--card2) 100%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.topbar{
  background: transparent;
}

.muted{
  color: var(--muted);
}

.btn,
.tile,
.iconBtn,
.pill,
.navBtn,
.moodBtn,
.historyItem,
.summaryItem,
.badge,
.miniStat{
  background: var(--soft);
  color: var(--text);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
}

.btn:hover,
.tile:hover,
.iconBtn:hover,
.pill:hover,
.navBtn:hover,
.moodBtn:hover{
  transform: translateY(-1px);
  background: var(--soft2);
}

.btn:active,
.tile:active,
.iconBtn:active,
.pill:active,
.navBtn:active,
.moodBtn:active{
  transform: translateY(0) scale(.99);
  opacity: .96;
}

.btn{
  padding: 12px 14px;
  border-radius: 16px;
  font-weight: 800;
}

.primary{
  background: linear-gradient(135deg, #4c7dff, #2fb8d5);
  border: 1px solid rgba(255,255,255,.10);
}

.primary:hover{
  background: linear-gradient(135deg, #5a88ff, #39c4df);
}

.danger{
  background: linear-gradient(135deg, rgba(255,77,109,.92), rgba(255,77,109,.68));
  border: 1px solid rgba(255,255,255,.10);
}

.badge{
  background: linear-gradient(135deg, rgba(255,200,82,.95), rgba(255,155,31,.82));
  color: #241300;
  border: none;
}

.input{
  background: rgba(0,0,0,.16);
  border: 1px solid var(--border);
  color: var(--text);
}

body.light-theme .input{
  background: rgba(255,255,255,.88);
}

.input::placeholder{
  color: rgba(234,240,255,.50);
}

body.light-theme .input::placeholder{
  color: rgba(21,32,58,.45);
}

#progressContainer{
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
}

#progressBar{
  background: linear-gradient(90deg, #4c7dff, #2dd4bf);
  color: rgba(10,15,25,.92);
}

.bottomNav{
  background: rgba(19,29,47,.96);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 14px 30px rgba(0,0,0,.24);
}

body.light-theme .bottomNav{
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(21,32,58,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

.hero .brand{
  display: flex;
  gap: 12px;
  align-items: center;
}

.logo{
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--soft);
  border: 1px solid var(--border);
  font-size: 24px;
}

.hero h1{
  margin: 0;
  font-size: 20px;
  font-weight: 1000;
  letter-spacing: .2px;
}

.hero p{
  margin: 4px 0 0;
}

.page{
  animation: fadeIn .18s ease both;
}

@keyframes fadeIn{
  from{
    opacity: 0;
    transform: translateY(6px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}