:root {
  --accent: #e8607a;
  --accent-soft: #fde7ec;
  --text: #2b2b2b;
  --muted: #888;
  --line: #eee;
  --bg: #fff;
  --surface: #fafafa;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent-soft: #4a2730;
    --text: #eee;
    --muted: #999;
    --line: #333;
    --bg: #161616;
    --surface: #202020;
  }
}

* { box-sizing: border-box; }

/* 有 display 的元件（例如 .button）也要能用 hidden 屬性藏起來 */
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
  font-family: system-ui, -apple-system, "PingFang TC", "Noto Sans TC", sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-tap-highlight-color: transparent;
}

main { max-width: 520px; margin: 0 auto; }

#login-view { text-align: center; padding-top: 30vh; }
#login-view h1 { margin-bottom: 1.5rem; }

h1 { font-size: 1.25rem; margin: 0; }
h2 { font-size: 1rem; margin: 0; }

.button {
  display: inline-block;
  padding: .6rem 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.button.danger { color: #c0392b; }

.icon {
  border: 0; background: none; color: var(--text);
  font-size: 1.75rem; width: 44px; height: 44px; cursor: pointer;
}

.link { border: 0; background: none; color: var(--muted); font: inherit; cursor: pointer; padding: 1rem 0; }

.offline-bar {
  margin-top: .75rem; padding: .6rem .75rem; border-radius: 10px;
  background: var(--surface); border: 1px dashed var(--muted);
  color: var(--muted); font-size: .875rem;
}

.push-bar {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-top: .75rem; padding: .6rem .75rem; border-radius: 10px;
  background: var(--accent-soft); font-size: .875rem;
}
.push-bar span { flex: 1; min-width: 10rem; }
.push-bar .button { padding: .4rem .75rem; font-size: .875rem; }

.month-bar { display: flex; align-items: center; justify-content: space-between; padding: .75rem 0; }

.weekdays, .month-grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.weekdays span { font-size: .75rem; color: var(--muted); padding-bottom: .25rem; }

.day {
  aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 0; border-radius: 50%; background: none; color: var(--text);
  font: inherit; cursor: pointer;
}
.day.other-month { color: var(--muted); opacity: .5; }
.day.today { font-weight: 700; color: var(--accent); }
.day.selected { background: var(--accent-soft); }
.day .dots { display: flex; gap: 3px; height: 5px; }
.day .dot { width: 5px; height: 5px; border-radius: 50%; }

.day-panel { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.day-panel-head { display: flex; align-items: center; justify-content: space-between; }

.day-list { list-style: none; padding: 0; margin: .75rem 0; }
.day-list li {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .75rem; border-radius: 10px; background: var(--surface); margin-bottom: .5rem;
  border-left: 4px solid var(--accent);
}
.day-list .time { min-width: 4.5rem; color: var(--muted); font-size: .875rem; }
.day-list .origin { font-size: .7rem; margin-top: .15rem; }
.day-list .body { flex: 1; min-width: 0; }
.day-list .title { font-weight: 600; overflow-wrap: anywhere; }
.day-list .owner { font-size: .75rem; font-weight: 600; }
.day-list .note { color: var(--muted); font-size: .875rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.day-list .empty { background: none; border: 0; color: var(--muted); }
.day-list li.shared {
  border-left: 0;
  padding-left: calc(.75rem + 4px);
  background:
    linear-gradient(var(--c1) 50%, var(--c2) 50%) left / 4px 100% no-repeat,
    var(--surface);
}
.day-list .actions { display: flex; gap: .25rem; }
.day-list .actions button { padding: .3rem .6rem; font-size: .8rem; }

dialog {
  width: min(92vw, 420px);
  border: 0; border-radius: 16px; padding: 1.25rem;
  background: var(--bg); color: var(--text);
}
dialog::backdrop { background: rgb(0 0 0 / .4); }

#event-form { display: flex; flex-direction: column; gap: .75rem; }
#event-form label { display: flex; flex-direction: column; gap: .25rem; font-size: .875rem; color: var(--muted); }
#event-form label.inline { flex-direction: row; align-items: center; gap: .5rem; color: var(--text); }
#event-form input:not([type=checkbox]), #event-form textarea, #event-form select {
  font: inherit; font-size: 16px; color: var(--text);
  padding: .5rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  width: 100%;
}
#event-form .all-day-fields { display: none; }
#event-form.all-day .timed-fields { display: none; }
#event-form.all-day .all-day-fields { display: contents; }
.timed-fields { display: contents; }

.form-actions { display: flex; justify-content: flex-end; gap: .5rem; }

.delete-choices { display: flex; flex-direction: column; gap: .5rem; }
.delete-choices p { margin: 0 0 .25rem; color: var(--muted); font-size: .875rem; }

.comments-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.comment-list { list-style: none; padding: 0; margin: .75rem 0; max-height: 50vh; overflow-y: auto; }
.comment-list li { padding: .5rem 0; border-bottom: 1px solid var(--line); }
.comment-list .meta { display: flex; gap: .5rem; align-items: baseline; font-size: .75rem; color: var(--muted); }
.comment-list .author { font-weight: 600; }
.comment-list .text { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: .15rem; }
.comment-list .empty { color: var(--muted); border: 0; }
.comment-list .link { padding: 0; font-size: .75rem; }
#comment-form { display: flex; flex-direction: column; gap: .5rem; }
#comment-form textarea {
  font: inherit; font-size: 16px; color: var(--text); width: 100%;
  padding: .5rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
}
.error { color: #c0392b; margin: 0; min-height: 1em; font-size: .875rem; }
.notice { color: var(--accent); margin: 0; font-size: .875rem; }
.notice:empty { display: none; }