:root { color-scheme: light; --ink: #26322b; --muted: #718078; --paper: #fffdfa; --background: #f4f0e9; --line: #e9e4db; --accent: #e96d42; --accent-dark: #bf4b28; --mint: #dff4e9; --mint-ink: #28764d; --shadow: 0 16px 45px rgb(50 45 33 / 9%); font-family: ui-rounded, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
* { box-sizing: border-box; } body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--ink); background: radial-gradient(circle at 94% 0%, #ffe4ba 0, transparent 22rem), radial-gradient(circle at 0% 44%, #d8f1e1 0, transparent 29rem), var(--background); } button, input, textarea { font: inherit; } button { cursor: pointer; }
.app-shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 56px 0 48px; }.hero { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; margin-bottom: 24px; }.eyebrow, .section-kicker { margin: 0 0 5px; color: var(--accent-dark); font-size: .74rem; font-weight: 800; letter-spacing: .13em; } h1,h2,p { margin-top: 0; } h1 { margin-bottom: 7px; font-size: clamp(2rem,5vw,3.65rem); line-height: 1; letter-spacing: -.07em; } h2 { margin-bottom: 0; font-size: 1.18rem; letter-spacing: -.04em; }.subtitle { margin-bottom: 0; color: var(--muted); }
.notice { margin-bottom: 20px; padding: 13px 16px; border: 1px solid #f7cfaa; border-radius: 12px; color: #8b4b2f; background: #fff4e8; font-size: .9rem; }.planner { display: grid; grid-template-columns: minmax(420px,1.28fr) minmax(330px,.72fr); gap: 20px; }.calendar-panel,.agenda-panel,.data-actions { border: 1px solid rgb(255 255 255 / 88%); border-radius: 22px; background: rgb(255 255 255 / 88%); box-shadow: var(--shadow); }.calendar-panel { padding: 24px; }.month-toolbar,.agenda-header,.event-card-head,.data-actions,.dialog-heading,.dialog-actions,.event-actions { display: flex; align-items: center; }.month-toolbar { justify-content: space-between; margin-bottom: 23px; }.icon-button,.close-button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: #fff; font-size: 1.75rem; line-height: 1; }.weekdays,.calendar-grid { display: grid; grid-template-columns: repeat(7,1fr); }.weekdays { margin-bottom: 9px; color: var(--muted); text-align: center; font-size: .76rem; font-weight: 700; }.calendar-grid { gap: 5px; }.calendar-day { position: relative; min-height: 70px; padding: 10px 9px; border: 1px solid transparent; border-radius: 13px; color: var(--ink); background: transparent; text-align: left; vertical-align: top; }.calendar-day:hover { border-color: #f9ceb9; background: #fff8f5; }.calendar-day.outside { color: #b5beb8; }.calendar-day.is-selected { outline: 2px solid var(--accent); background: #fff6f1; }.calendar-day.has-event::after { content: ""; position: absolute; bottom: 10px; left: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 10px 0 0 #ffc6ae; }.date-number { display: block; font-weight: 800; }.event-marker { display: block; margin-top: 7px; color: var(--accent-dark); font-size: .67rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.legend { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 20px 4px 0; color: var(--muted); font-size: .78rem; }.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }.muted { margin-left: 8px; }
.agenda-panel { min-height: 516px; padding: 24px; }.agenda-header { justify-content: space-between; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }.schedule-count { flex: 0 0 auto; padding: 6px 10px; border-radius: 99px; color: var(--mint-ink); background: var(--mint); font-size: .8rem; font-weight: 800; }.schedule-list { display: grid; gap: 12px; padding-top: 18px; }.event-card { padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: var(--paper); }.event-card-head { align-items: flex-start; justify-content: space-between; gap: 12px; }.cat-name { margin-bottom: 5px; font-weight: 800; }.location { margin-bottom: 0; color: var(--muted); font-size: .88rem; line-height: 1.45; }.notes { margin: 12px 0 0; color: #916b5b; font-size: .8rem; line-height: 1.45; }.event-actions { gap: 9px; margin-top: 15px; }.map-button,.copy-button,.edit-button { border: 0; color: var(--accent-dark); background: transparent; text-decoration: none; font-size: .8rem; font-weight: 800; }.map-button { padding: 8px 11px; border: 1px solid #ffcdb9; border-radius: 9px; background: #fff3ed; }.copy-button,.edit-button { padding: 8px 3px; }.empty-state { padding: 35px 12px; color: var(--muted); text-align: center; line-height: 1.65; }
.data-actions { justify-content: space-between; gap: 20px; margin-top: 20px; padding: 20px 24px; }.data-actions h2 { margin-bottom: 7px; }.data-actions p { margin-bottom: 0; color: var(--muted); font-size: .88rem; }.primary-button,.secondary-button,.danger-button { padding: 10px 15px; border: 1px solid transparent; border-radius: 10px; font-size: .88rem; font-weight: 800; }.primary-button { color: white; background: var(--accent); box-shadow: 0 5px 12px rgb(233 109 66 / 24%); }.secondary-button { border-color: var(--line); color: var(--ink); background: white; }.danger-button { color: #c44545; background: #ffefef; }
dialog { width: min(520px,calc(100% - 28px)); padding: 0; border: 0; border-radius: 20px; box-shadow: 0 28px 90px rgb(31 31 24 / 28%); } dialog::backdrop { background: rgb(34 40 35 / 42%); backdrop-filter: blur(3px); } dialog form { display: grid; gap: 14px; padding: 24px; }.dialog-heading { justify-content: space-between; margin-bottom: 6px; }.dialog-heading h2 { margin: 0; } label { display: grid; gap: 7px; color: #4b5950; font-size: .84rem; font-weight: 800; } input,textarea { width: 100%; padding: 11px 12px; border: 1px solid #dfe4de; border-radius: 10px; color: var(--ink); background: #fff; outline: none; } textarea { resize: vertical; }.optional { color: var(--muted); font-weight: 500; }.dialog-actions { gap: 8px; margin-top: 8px; }.dialog-spacer { flex: 1; }
@media (max-width:800px) { .app-shell { width:min(100% - 22px,620px); padding-top:28px; }.hero,.data-actions { align-items:flex-start; flex-direction:column; }.planner { grid-template-columns:1fr; }.agenda-panel { min-height:270px; }.calendar-panel,.agenda-panel { padding:18px; }.calendar-day { min-height:61px; padding:8px 6px; }.event-marker { display:none; }.data-actions { padding:19px; } }