:root {
  color-scheme: light;
  --background: #f7efd8;
  --card: #fff9e9;
  --card-overlay: #fff9e999;
  --text: #242424;
  --muted: #625e65;
  --border: #e8dfc8;
  --rose: #f9e2e8;
  --peach: #fbe7d8;
  --butter: #f7efcc;
  --mint: #e0f0e5;
  --sky: #e0edf8;
  --lavender: #eae3f7;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --background: #1e293b;
  --card: #29364b;
  --card-overlay: #35455e99;
  --text: #f1f5fb;
  --muted: #d0d8e5;
  --border: #3b4b63;
  --rose: #4b455c;
  --peach: #4d4857;
  --butter: #4a4e54;
  --mint: #3a5055;
  --sky: #3b4f69;
  --lavender: #464968;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

.toolbar {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  padding: 12px 16px;
}

button {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

button:hover { border-color: var(--muted); }
button:disabled { cursor: default; }
#send-message:disabled { opacity: .6; }
button:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

#theme-toggle { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; }
.sun-icon { display: none; }
:root[data-theme="dark"] .moon-icon { display: none; }
:root[data-theme="dark"] .sun-icon { display: block; }

main { position: relative; z-index: 1; display: grid; gap: 12px; max-width: 700px; margin: 20px auto 28px; padding: 0 16px; }

#floating-stickers { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.floating-sticker { position: absolute; bottom: -160px; height: auto; max-height: 140px; object-fit: contain; opacity: 0; animation: sticker-float var(--float-duration) linear forwards; will-change: transform, opacity; }
@keyframes sticker-float {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(var(--start-rotation)); }
  10% { opacity: 1; }
  45% { transform: translate3d(var(--sway), calc(-50vh - 110px), 0) rotate(0deg); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--drift), calc(-100vh - 320px), 0) rotate(var(--end-rotation)); }
}
.card { padding: 18px 20px; border: 1px solid var(--border); border-radius: 20px; background: var(--card-overlay); box-shadow: 0 8px 30px #00000004; }
h1, h2 { margin: 0 0 12px; font-size: 22px; line-height: 1.35; font-weight: 600; }
.board-header h1 { margin: 0; font-size: 32px; }
ul { display: grid; gap: 8px; list-style: none; padding: 0; margin: 0; }
li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 14px; border-radius: 16px; background: var(--event-color); }
li[data-color="rose"] { --event-color: var(--rose); }
li[data-color="peach"] { --event-color: var(--peach); }
li[data-color="butter"] { --event-color: var(--butter); }
li[data-color="mint"] { --event-color: var(--mint); }
li[data-color="sky"] { --event-color: var(--sky); }
li[data-color="lavender"] { --event-color: var(--lavender); }
.date { display: block; color: var(--muted); font-size: 13px; }
.countdown { flex-shrink: 0; padding: 4px 10px; border-radius: 999px; background: #ffffff40; text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }
:root[data-theme="dark"] .countdown { background: #ffffff0d; }

.message-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; margin: -2px 0; padding: 10px 20px; border-radius: 14px; text-align: left; font-size: 15px; background: var(--card-overlay); }
.message-card:disabled { cursor: default; opacity: 1; }
.message-text { font-size: 16px; white-space: pre-wrap; overflow-wrap: anywhere; width: 100%; }
.message-author { font-size: 12px; color: var(--muted); }
.message-author:empty { display: none; }
.field-hint { font-size: 12px; color: var(--muted); }
.composer form { display: grid; gap: 8px; }
.composer { padding: 16px 20px; }
.composer h2 { margin-bottom: 10px; font-size: 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.composer label { font-size: 14px; }
textarea { width: 100%; min-height: 64px; resize: vertical; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--background); color: var(--text); font: inherit; }
textarea::placeholder { color: var(--muted); }
textarea:focus-visible, input:focus-visible { outline: 2px solid var(--muted); outline-offset: 3px; }
.composer-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 0; }
.author-toggle { display: flex; gap: 2px; margin: 0; padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--background); }
.author-toggle label { position: relative; cursor: pointer; }
.author-toggle span { display: block; padding: 5px 14px; border-radius: 999px; color: var(--muted); font-size: 13px; transition: background-color 180ms ease, color 180ms ease; }
.author-toggle input:checked + span { background: var(--lavender); color: var(--text); box-shadow: 0 2px 4px #00000008; }
.author-toggle input:focus-visible + span { outline: 2px solid var(--muted); outline-offset: 2px; }
#send-message { padding: 8px 16px; border-radius: 999px; background: var(--rose); font-size: 14px; white-space: nowrap; }
#message-status { margin: 0; }
#message-status:empty { display: none; }

.card, #events li, #theme-toggle, #send-message {
  transition: transform 280ms cubic-bezier(.2, .8, .2, 1.3), scale 150ms ease, box-shadow 220ms ease;
}
#theme-toggle svg { transition: transform 280ms cubic-bezier(.2, .8, .2, 1.3); }

@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px #0000000a; }
  #events li:hover { transform: translateY(-2px); box-shadow: 0 5px 12px #0000000c; }
  #theme-toggle:hover, #send-message:hover { transform: translateY(-2px); }
  #theme-toggle:hover svg { transform: rotate(15deg); }
}

.card:active { scale: .995; }
.composer:hover, .composer:active { transform: none; scale: 1; }
.message-card:disabled:hover, .message-card:disabled:active { transform: none; scale: 1; }
.card:has(#events li:active) { scale: 1; }
#events li:active, #theme-toggle:active, #send-message:active { scale: .97; }

@media (prefers-reduced-motion: reduce) {
  #floating-stickers { display: none; }
  .author-toggle span { transition: none; }
  .card, #events li, #theme-toggle, #theme-toggle svg, #send-message { transition: none; transform: none; scale: 1; }
  .card:hover, #events li:hover, #theme-toggle:hover, #theme-toggle:hover svg, #send-message:hover { transform: none; }
  .card:active, #events li:active, #theme-toggle:active, #send-message:active { scale: 1; }
}

@media (max-width: 480px) {
  .toolbar { padding: 10px 12px; }
  main { margin-top: 12px; padding: 0 12px; }
  .card { padding: 14px 12px; }
  .message-card { padding: 8px 12px; }
  .composer { padding: 14px 12px; }
  h1, h2 { font-size: 20px; }
  .board-header h1 { font-size: 28px; }
  li { gap: 8px; padding: 10px; }
  .date { display: block; }
  .countdown { padding: 4px 8px; font-size: 12px; }
}