/* ===== RESET ===== */
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:"Inter",sans-serif;
  background: radial-gradient(circle at top, #1a0f2e 0%, #0d0717 100%);
  color:#fff;
}

/* ===== GLASS SECTIONS ===== */
.glass-section {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 18px;
  padding: 20px;
  margin: 24px 0;
}

/* ===== HEADER ===== */
header.glass-header {
  position: fixed;
  top:0;
  left:0;
  width:100%;
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding:14px 22px;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(255,255,255,0.2);
  z-index:999;
}
header .logo {
  font-size: 26px;
  font-weight:600;
  background: linear-gradient(90deg,#a678ff,#7a37ff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.nav-links {
  display:flex;
  gap:22px;
}
.nav-links a {
  color:#dcdcdc;
  text-decoration:none;
  font-size:15px;
  transition:0.25s;
}
.nav-links a:hover { color:#fff; }

/* ===== BURGER MENU ===== */
.burger { display:none; flex-direction: column; gap:5px; cursor:pointer; }
.burger div { width:25px; height:3px; background-color:#fff; border-radius:2px; }

/* ===== ADD GOAL BUTTON IN HEADER ===== */
#add-goal-header {
  display:none;
  padding:6px 12px;
  border:none;
  border-radius:8px;
  background: #9b57ff;
  color:#fff;
  cursor:pointer;
  transition:0.25s;
}
#add-goal-header:hover { background:#d2a1ff; }

/* ===== MAIN ===== */
main { max-width:900px; margin:120px auto 40px; padding:0 18px; }

/* ===== WHEEL OF LIFE ===== */
#wheel { width:100%; max-width:380px; margin:auto; display:block; }

/* ===== GOALS ===== */
.goals-container .goal-card {
  margin-bottom:16px;
  padding:16px;
  border-left:4px solid #9b57ff;
  transition:0.25s;
  background: rgba(255,255,255,0.05);
  border-radius:12px;
}
.goal-card:hover { border-left-color:#d2a1ff; transform:translateX(3px); }

/* ===== CALENDAR ===== */
.calendar-container { margin-top:20px; }
.calendar-header { display:flex; justify-content:space-between; margin-bottom:12px; }
.calendar-header button {
  background: rgba(255,255,255,0.12);
  border:none;
  border-radius:8px;
  padding:6px 12px;
  color:#fff;
  cursor:pointer;
  transition:0.25s;
}
.calendar-header button:hover { background: rgba(255,255,255,0.2); }

.calendar-grid {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:6px;
}
.calendar-cell {
  background: rgba(255,255,255,0.05);
  border-radius:8px;
  min-height:60px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:6px;
  font-size:14px;
}

/* ===== FOOTER ===== */
footer { text-align:center; margin:40px 0; color: rgba(255,255,255,0.4); }

/* ===== MOBILE ADAPTATION ===== */
@media(max-width:768px){
  .nav-links{ display:none; }
  .burger{ display:flex; }
  main{ margin-top:110px; padding:0 14px; }
  #lifeWheelCanvas{ max-width:260px; height:auto; display:block; margin:auto; }
  .goal-card{ padding:14px; font-size:14px; }
  .calendar-grid{ grid-template-columns:repeat(2,1fr); gap:6px; }
  .calendar-cell{ font-size:12px; padding:6px; min-height:50px; }
  #add-goal-header{ display:block; margin-left:8px; }
}

@media(max-width:480px){
  #lifeWheelCanvas{ max-width:220px; }
  .goal-card{ font-size:13px; }
  .calendar-grid{ grid-template-columns:1fr; }
  .calendar-cell{ min-height:45px; }
}
