:root {
  --sky:#2196c4;
  --sky-deep:#0d6e9c;
  --sand:#f7e7c4;
  --sand-deep:#eccf96;
  --sun:#ffb43d;
  --coral:#ff6b5e;
  --ink:#0f3a4d;
  --soft:#5a7b87;
  --card:#ffffff;
  --line:#e3ebef;
}

* { box-sizing:border-box; }
body {
  margin:0;
  font-family:'Nunito',system-ui,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

/* ---------------- Welcome ---------------- */
.welcome-body {
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(160deg,#7fd3f0 0%,#3aa6d4 38%,#ffcf8a 100%);
  position:relative;
  overflow:hidden;
}
.welcome-overlay {
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 80% 18%, rgba(255,255,255,.45), transparent 40%),
    radial-gradient(circle at 12% 80%, rgba(255,180,61,.35), transparent 45%);
  pointer-events:none;
}
.welcome-wrap { position:relative; z-index:2; padding:24px; width:100%; max-width:460px; }
.welcome-card {
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(6px);
  border-radius:28px;
  padding:42px 34px 34px;
  text-align:center;
  box-shadow:0 30px 70px rgba(13,110,156,.35);
}
.sun { font-size:54px; line-height:1; margin-bottom:6px; }
.welcome-kicker { margin:0; letter-spacing:3px; text-transform:uppercase; font-weight:700; color:var(--soft); font-size:.8rem; }
.welcome-title {
  font-family:'Pacifico',cursive;
  font-size:3rem;
  margin:.1em 0 .15em;
  color:var(--sky-deep);
  text-shadow:0 2px 0 #fff;
}
.welcome-sub { margin:0 0 26px; color:var(--soft); font-weight:600; }
.login-form { display:flex; gap:10px; flex-wrap:wrap; }
.pw-input {
  flex:1; min-width:160px;
  padding:14px 16px;
  border:2px solid var(--line);
  border-radius:14px;
  font-size:1rem; font-family:inherit;
  outline:none;
  transition:border-color .15s;
}
.pw-input:focus { border-color:var(--sky); }
.enter-btn {
  padding:14px 22px;
  border:0; border-radius:14px;
  background:linear-gradient(135deg,var(--sun),var(--coral));
  color:#fff; font-weight:800; font-size:1rem; font-family:inherit;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(255,107,94,.4);
  transition:transform .12s;
}
.enter-btn:hover { transform:translateY(-2px); }
.login-error { color:var(--coral); font-weight:700; min-height:1.2em; margin:14px 0 0; }
.welcome-foot { margin:18px 0 0; color:var(--soft); font-size:.85rem; }

/* ---------------- Calendar ---------------- */
.calendar-body { background:linear-gradient(180deg,#eaf6fb 0%,#fdf6e8 100%); min-height:100vh; }
.topbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  padding:20px 28px;
  background:linear-gradient(135deg,var(--sky),var(--sky-deep));
  color:#fff;
  box-shadow:0 6px 24px rgba(13,110,156,.25);
}
.topbar h1 { font-family:'Pacifico',cursive; font-size:1.7rem; margin:0; font-weight:400; }
.topbar .range { font-weight:700; opacity:.92; font-size:.95rem; }
.topbar-actions { display:flex; gap:10px; align-items:center; }
.btn {
  border:0; border-radius:12px; cursor:pointer;
  font-family:inherit; font-weight:800; font-size:.95rem;
  padding:11px 18px; transition:transform .12s, box-shadow .12s;
}
.btn-primary { background:linear-gradient(135deg,var(--sun),var(--coral)); color:#fff; box-shadow:0 8px 18px rgba(255,107,94,.35); }
.btn-primary:hover { transform:translateY(-2px); }
.btn-ghost { background:rgba(255,255,255,.2); color:#fff; }
.btn-ghost:hover { background:rgba(255,255,255,.32); }

.legend {
  display:flex; flex-wrap:wrap; gap:10px 18px;
  padding:16px 28px;
  align-items:center;
}
.legend .hint { color:var(--soft); font-weight:600; font-size:.85rem; margin-left:auto; }
.legend-item { display:flex; align-items:center; gap:7px; font-weight:700; font-size:.85rem; color:var(--ink); }
.legend-swatch { width:16px; height:16px; border-radius:5px; }

.calendar-scroll { padding:8px 28px 60px; }
.months { display:flex; flex-wrap:wrap; gap:26px; align-items:flex-start; }
.month {
  background:var(--card);
  border-radius:20px;
  padding:18px 18px 22px;
  box-shadow:0 12px 30px rgba(15,58,77,.08);
  flex:1 1 320px;
  min-width:300px;
}
.month h2 { margin:0 0 12px; font-size:1.2rem; color:var(--sky-deep); text-align:center; }
.dow { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:6px; }
.dow span { text-align:center; font-size:.72rem; font-weight:800; color:var(--soft); text-transform:uppercase; }
.grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cell { min-height:74px; }
.day {
  width:100%; height:100%; min-height:74px;
  border:1px solid var(--line); border-radius:12px;
  background:#fbfdfe; cursor:pointer;
  padding:6px 6px 5px; text-align:left;
  display:flex; flex-direction:column; gap:3px;
  font-family:inherit; transition:border-color .12s, transform .1s;
  overflow:hidden;
}
.day:hover { border-color:var(--sky); transform:translateY(-1px); }
.day.out { background:#f1f5f7; opacity:.45; cursor:default; pointer-events:none; }
.day.selected { border-color:var(--coral); box-shadow:0 0 0 2px var(--coral) inset; }
.day-num { font-weight:800; font-size:.85rem; color:var(--ink); }
.day.today .day-num { background:var(--sun); color:#fff; border-radius:50%; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; }
.chip {
  font-size:.66rem; font-weight:800; color:#fff;
  border-radius:6px; padding:2px 5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  line-height:1.25;
}
.chip .time { opacity:.85; font-weight:700; }

/* ---------------- Modal ---------------- */
.modal-back {
  position:fixed; inset:0; z-index:50;
  background:rgba(15,58,77,.45);
  display:none; align-items:center; justify-content:center;
  padding:20px;
}
.modal-back.open { display:flex; }
.modal {
  background:#fff; border-radius:22px;
  width:100%; max-width:460px;
  padding:26px; max-height:92vh; overflow:auto;
  box-shadow:0 30px 70px rgba(15,58,77,.4);
}
.modal h3 { margin:0 0 4px; color:var(--sky-deep); font-size:1.4rem; }
.modal .modal-sub { margin:0 0 18px; color:var(--soft); font-weight:600; font-size:.9rem; }
.field { margin-bottom:14px; }
.field label { display:block; font-weight:800; font-size:.8rem; color:var(--soft); margin-bottom:6px; text-transform:uppercase; letter-spacing:.5px; }
.field input, .field select, .field textarea {
  width:100%; padding:11px 12px; border:2px solid var(--line); border-radius:12px;
  font-family:inherit; font-size:1rem; outline:none; transition:border-color .15s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--sky); }
.field textarea { resize:vertical; min-height:60px; }
.two { display:flex; gap:12px; }
.two .field { flex:1; }
.cat-picker { display:flex; flex-wrap:wrap; gap:8px; }
.cat-opt {
  display:flex; align-items:center; gap:6px;
  border:2px solid var(--line); border-radius:11px;
  padding:7px 11px; cursor:pointer; font-weight:800; font-size:.82rem;
  transition:border-color .12s, background .12s;
}
.cat-opt .dot { width:14px; height:14px; border-radius:4px; }
.cat-opt.active { border-color:var(--ink); background:#f4f9fb; }
.modal-error { color:var(--coral); font-weight:700; min-height:1.1em; margin:2px 0 12px; font-size:.9rem; }
.modal-actions { display:flex; gap:10px; margin-top:8px; }
.modal-actions .btn { flex:1; }
.btn-danger { background:#ffe9e7; color:var(--coral); }
.btn-danger:hover { background:#ffd9d6; }
.btn-cancel { background:#eef3f5; color:var(--soft); }
.btn-save { background:linear-gradient(135deg,var(--sun),var(--coral)); color:#fff; }

.loading { text-align:center; color:var(--soft); font-weight:700; padding:40px; }

@media (max-width:560px){
  .welcome-title { font-size:2.4rem; }
  .topbar { padding:16px; }
  .legend, .calendar-scroll { padding-left:14px; padding-right:14px; }
  .cell, .day { min-height:58px; }
}