:root{
  --green-dk:#0f2f28;
  --green:#156d5b;
  --mint:#1fa37a;
  --card:#112f2a;
  --text:#e6fff6;
}
body{
  background: var(--green-dk);
  background-image: var(--bg-image, none);
  background-size: cover; background-position:center;
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}
.navbar, .footer{
  background: linear-gradient(135deg, var(--green-dk), color-mix(in srgb, var(--green-dk) 85%, black));
}

.card-soft{
  /* ambil dari variabel; fallback ke hijau lama kalau belum diset */
  background: var(--card, rgba(17,47,42,.92));
  border: 1px solid var(--card-border, rgba(255,255,255,.06));
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}


.btn-primary{
  background: linear-gradient(135deg, var(--mint), var(--green));
  border: none;
  color: #eafff8;
  border-radius: .9rem;
  padding:.8rem 1.1rem;
}
.btn-primary:hover{ filter: brightness(1.08); }
input, textarea, select{
  border-radius:.8rem!important;
}
.btn-outline-light.active{ background:#1fa37a; color:#07251f; border-color:#1fa37a; }

/* Calendar ala grid Google */
.calendar-wrap{
  max-width: 720px; margin: 0 auto;
}
.cal-header{
  display:flex; align-items:center; justify-content:center; gap:.75rem;
}
.cal-month{
  font-weight:600; font-size:1.1rem;
}
.cal-grid{
  display:grid; grid-template-columns: repeat(7, 1fr); gap:.5rem;
}
/* Perjelas garis kotak kalender */
.cal-cell {
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .5rem;
  border: 1px solid rgba(255,255,255,0.85); /* lebih putih terang */
  color: #eafff8;
  cursor: pointer;
  user-select: none;
  background-color: rgba(255,255,255,0.03);
  transition: background-color .2s;
}
.cal-cell:hover {
  background-color: rgba(255,255,255,0.12);
}
.cal-cell.active {
  outline: 3px solid #1fa37a;
  background: rgba(31,163,122,.25);
  border-color: #fff; /* kotak aktif lebih tegas */
}

.cal-cell.muted{ opacity:.35; cursor:default; }
.cal-dow{ text-align:center; opacity:.8; font-weight:600; }
.centered{ display:flex; align-items:center; justify-content:center; }
.form-card{ max-width: 900px; margin: 0 auto; }
.time-select{ max-width: 320px; margin: 0 auto; }
.action-center{ text-align:center; }