:root { font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; color: #252936; background: #f5f6fa; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 0 0, #e9ebff 0, transparent 28%), #f5f6fa; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
.shell { max-width: 1660px; margin: auto; padding: 0 30px; }
.topbar { display: flex; justify-content: space-between; align-items: center; min-height: 70px; border-bottom: 1px solid #e7e8ee; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-icon { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 12px; background: #5865f2; color: white; font-size: 23px; font-weight: 800; box-shadow: 0 7px 18px #5865f241; }
.brand strong { display: block; font-size: 16px; letter-spacing: -.05em; }
.brand small { display: block; margin-top: 2px; color: #969cab; font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.top-actions { display: flex; align-items: center; gap: 24px; }
.settings-gear { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #dfe1ea; border-radius: 10px; background: #fff; color: #5965e8; font-size: 23px; line-height: 1; }
.settings-gear:hover { background: #f0f1ff; border-color: #aeb5f7; }
.cloud-pill { border: 1px solid #dfe2f8; border-radius: 40px; padding: 7px 12px; background: #f0f1ff; color: #525bb2; font-size: 11px; font-weight: 750; }
.link-button { padding: 5px 0; border: none; background: transparent; color: #6d7484; font-size: 12px; font-weight: 700; }
.link-button:hover { color: #3e4bc8; text-decoration: underline; }
.intro { display: flex; justify-content: space-between; align-items: end; gap: 20px; padding: 16px 0 18px; }
.intro h1 { margin: 2px 0 5px; font-size: clamp(25px, 2.6vw, 32px); letter-spacing: -.06em; }
.intro p:last-child { margin: 0; color: #858b9a; font-size: 13px; }
.eyebrow { margin: 0 0 5px; color: #5965e8; font-size: 10px; font-weight: 850; letter-spacing: .18em; }
.today-badge { border: 1px solid #e5e7ef; border-radius: 10px; background: #fff; padding: 10px 14px; color: #686e7e; font-size: 12px; white-space: nowrap; }
.layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(350px, 1fr); gap: 20px; align-items: start; }
.sidebar { display: grid; gap: 20px; min-height: 0; min-width: 0; }
.card { border: 1px solid #e8e9f0; border-radius: 19px; background: #fff; box-shadow: 0 12px 40px #28304c0c; }
.calendar-card { overflow: hidden; }
.calendar-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 17px 22px 15px; }
h2, h3, p { margin-top: 0; }
h2 { margin-bottom: 0; font-size: 22px; letter-spacing: -.05em; }
h3 { margin-bottom: 0; font-size: 15px; letter-spacing: -.03em; }
.calendar-card h2 { font-size: 24px; }
.calendar-actions { display: flex; align-items: center; gap: 9px; }
.icon-button, .outline-button { border: 1px solid #dfe1ea; border-radius: 9px; background: #fff; color: #555d70; font-size: 12px; font-weight: 750; }
.icon-button { width: 36px; height: 36px; font-size: 18px; }
.outline-button { padding: 9px 14px; }
.icon-button:hover, .outline-button:hover { border-color: #aeb5f7; color: #4c59d4; background: #f6f7ff; }
.weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.weekdays { margin: 0 14px; padding: 8px 0; color: #9aa0ae; font-size: 12px; font-weight: 800; text-align: center; }
.weekdays span:first-child { color: #ed8d8d; }
.weekdays span:last-child { color: #8295e6; }
.calendar-grid { border-top: 1px solid #eceef3; border-left: 1px solid #eceef3; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.calendar-grid.range-dragging, .calendar-grid.range-dragging .calendar-day { cursor: crosshair; }
.calendar-day { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; min-height: clamp(60px, calc((100dvh - 360px) / 6), 84px); padding: 6px 8px; border: 0; border-right: 1px solid #eceef3; border-bottom: 1px solid #eceef3; background: #fff; text-align: left; overflow: hidden; }
.calendar-day:hover { background: #f8f9ff; }
.calendar-day.sunday, .calendar-day.holiday { background: #fff6f6; }
.calendar-day.saturday { background: #f4f7ff; }
.calendar-day.sunday .day-number, .calendar-day.holiday .day-number, .holiday-name { color: #cf4d57; }
.calendar-day.saturday:not(.holiday) .day-number { color: #5277cb; }
.calendar-day.outside { background: #fbfbfd; color: #b9bec9; }
.calendar-day.outside .day-heading { opacity: .55; }
.calendar-day.selected { background: #f2f3ff; box-shadow: inset 0 0 0 2px #7e87f4; }
.calendar-day.range-selected { background: #e7eaff; }
.calendar-day.range-anchor { box-shadow: inset 0 0 0 2px #5865f2; }
.day-heading { display: flex; align-items: center; gap: 2px; min-width: 0; }
.day-number { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 14px; font-weight: 750; }
.holiday-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 800; }
.calendar-day.today .day-number { background: #5865f2; color: #fff; }
.event-chip { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 6px; padding: 4px 5px; background: #e9ebff; color: #4e58c2; font-size: 11px; font-weight: 700; }
.calendar-day.outside .event-chip { opacity: .5; }
.more-events { color: #78809a; font-size: 11px; padding-left: 7px; }
.calendar-footer { display: flex; align-items: center; gap: 7px; padding: 10px 18px; color: #898f9c; font-size: 11px; }
.weekend-legend { margin-left: 9px; }
.legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #8791f7; }
.footer-note { margin-left: auto; }
.day-card { display: flex; flex-direction: column; height: var(--calendar-card-height, 520px); min-height: 0; padding: 24px; overflow: hidden; }
.day-card .section-top { display: block; flex: none; }
.day-caption { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.day-caption .eyebrow { margin: 0; }
.day-title-row { display: flex; align-items: center; gap: 12px; }
.day-title-row h2 { flex: 1; min-width: 0; }
.day-header-actions { display: flex; flex: none; gap: 7px; }
.day-header-actions button { border: 1px solid #dfe1ea; border-radius: 8px; background: #fff; color: #5965d5; padding: 7px 10px; font-size: 12px; font-weight: 750; }
.day-header-actions #delete-selected-events { color: #be505b; }
.day-header-actions button:hover:enabled { background: #f2f3ff; border-color: #aeb5f7; }
.day-header-actions button:disabled { cursor: default; opacity: .4; }
.event-selection-hint { flex: none; margin: 12px 0 0; color: #858c9c; font-size: 11px; line-height: 1.5; }
.day-card h2 { font-size: 23px; }
.settings-card { padding: 23px; }
.section-top { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.count-pill { border-radius: 50px; background: #f0f1ff; color: #5260d9; padding: 7px 11px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.day-events { flex: 1; min-height: 0; margin-top: 16px; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.day-events:focus-visible { outline: 2px solid #7883f1; outline-offset: 3px; border-radius: 6px; }
.empty-day { margin: 0; border: 1px dashed #e1e3eb; border-radius: 11px; padding: 22px 12px; color: #a0a5b0; text-align: center; font-size: 14px; }
.day-event { display: flex; align-items: start; gap: 12px; padding: 12px 9px; border: 1px solid transparent; border-bottom-color: #f0f1f4; border-radius: 8px; cursor: pointer; }
.day-event:hover { background: #f8f9ff; }
.day-event.event-selected { border-color: #a9b1fa; background: #eaedff; }
.day-event:focus-visible { outline: 2px solid #7883f1; outline-offset: -2px; }
.day-events.range-dragging, .day-events.range-dragging .day-event { cursor: crosshair; }
.day-event-time { width: 105px; flex: none; color: #5965e8; font-size: 13px; font-weight: 800; padding-top: 2px; white-space: nowrap; }
.day-event-body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.day-event-body strong { display: block; font-size: 15px; }
.day-event-body small { display: block; margin-top: 5px; color: #9096a4; font-size: 13px; white-space: pre-wrap; }
.day-event-body .advance-badge { color: #5763cf; font-size: 11px; font-weight: 800; }
.day-event-body .weather-badge { color: #28808f; font-size: 11px; font-weight: 800; }
.day-event-date { color: #8289a0; font-size: 11px; font-weight: 700; }
.add-event-button { flex: none; width: 100%; margin-top: 18px; padding: 12px 16px; font-size: 13px; }
.event-dialog { width: min(480px, calc(100vw - 28px)); max-height: calc(100dvh - 40px); border: 1px solid #e8e9f0; border-radius: 19px; padding: 26px; box-shadow: 0 24px 80px #1c254d40; overflow-y: auto; }
.settings-dialog { width: min(480px, calc(100vw - 28px)); max-height: calc(100dvh - 40px); border: 1px solid #e8e9f0; border-radius: 19px; padding: 26px; box-shadow: 0 24px 80px #1c254d40; overflow-y: auto; }
.event-dialog::backdrop, .settings-dialog::backdrop { background: #1b22467a; backdrop-filter: blur(3px); }
.settings-dialog .form-heading { margin-bottom: 22px; }
.settings-dialog form { display: grid; gap: 17px; }
.settings-dialog input[type="time"] { max-width: 165px; }
.settings-dialog .field-help { margin: -9px 0 0; font-size: 12px; }
.event-form { display: grid; gap: 18px; }
.bulk-edit-group { display: grid; gap: 9px; }
.bulk-edit-group fieldset { min-width: 0; margin: 0; padding: 0 0 0 27px; border: 0; }
.bulk-edit-group fieldset:disabled { opacity: .45; }
.event-dialog h3 { font-size: 21px; }
.event-dialog label { font-size: 13px; }
.event-dialog input:not([type="checkbox"]), .event-dialog textarea { padding: 13px 14px; font-size: 14px; }
.event-dialog .field-help { font-size: 12px; }
.event-dialog .primary-button { padding: 14px 18px; font-size: 14px; }
.form-heading { display: flex; justify-content: space-between; align-items: center; }
label { display: block; color: #555c6c; font-size: 11px; font-weight: 800; }
input:not([type="checkbox"]), textarea { display: block; width: 100%; margin-top: 6px; padding: 10px 11px; border: 1px solid #dfe2ea; border-radius: 9px; color: #2b2f3a; background: #fff; font-size: 12px; outline: none; }
input:focus, textarea:focus { border-color: #7883f1; box-shadow: 0 0 0 3px #5865f221; }
.time-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.field-help { margin: -8px 0 0; color: #9ca2af; font-size: 10px; line-height: 1.5; }
.form-error { margin: 0; color: #ad3737; font-size: 12px; font-weight: 700; }
.primary-button { border: 0; border-radius: 9px; background: #5865f2; color: #fff; padding: 11px 15px; font-size: 12px; font-weight: 800; box-shadow: 0 7px 16px #5865f22b; }
.primary-button:hover { background: #4956dc; }
button:disabled { opacity: .55; cursor: wait; }
.settings-card h2 { margin-bottom: 19px; }
.settings-card form { display: grid; gap: 16px; }
.settings-card input[type="time"] { max-width: 165px; }
.check-row { display: flex; align-items: center; gap: 9px; }
.check-row input { width: 18px; height: 18px; accent-color: #5865f2; }
.settings-card .field-help { margin: -8px 0 0; }
.settings-card .outline-button { justify-self: start; }
.settings-actions { display: flex; align-items: center; gap: 14px; }
.weather-event-help .field-help { margin: -6px 0 0; }
.weather-event-help .link-button { margin-top: 3px; }
.weather-settings { display: grid; gap: 13px; padding-top: 19px; border-top: 1px solid #e8e9f0; }
.weather-settings h3 { font-size: 17px; }
.weather-copy { margin: 0; color: #858c9c; font-size: 12px; line-height: 1.7; }
.weather-copy a { color: #5965d5; }
.weather-search-row { display: flex; align-items: stretch; gap: 8px; }
.weather-search-row input { flex: 1; min-width: 0; margin-top: 0; }
.weather-location-results { display: grid; gap: 6px; max-height: 180px; overflow-y: auto; }
.weather-location-results:empty { display: none; }
.weather-location-choice { padding: 10px 12px; border: 1px solid #e0e3ef; border-radius: 8px; background: #f7f8ff; color: #555d70; text-align: left; font-size: 12px; }
.weather-location-choice:hover { border-color: #8791f7; }
.weather-preview { margin: 0; border-radius: 9px; padding: 12px; background: #f2f4ff; color: #4c5680; font: inherit; font-size: 12px; white-space: pre-wrap; line-height: 1.7; }
.preview-card { display: grid; grid-template-columns: minmax(180px, .55fr) minmax(0, 1.45fr) auto; gap: 20px; align-items: center; margin-top: 19px; padding: 22px; }
.preview-card h2 { font-size: 19px; }
.delivery-status { margin: 8px 0 0; color: #8d94a1; font-size: 11px; line-height: 1.5; }
.preview-card pre { margin: 0; max-height: 170px; overflow: auto; border-radius: 11px; background: #292e3e; color: #f7f8ff; padding: 15px; font-family: inherit; font-size: 11px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.preview-card .primary-button { white-space: nowrap; }
.notice { position: sticky; top: 10px; z-index: 5; margin-bottom: 16px; padding: 12px 15px; border: 1px solid #cbd0ff; border-radius: 9px; background: #f0f1ff; color: #3f4bc4; font-size: 12px; font-weight: 750; }
.notice.error { border-color: #efc9c9; background: #fff1f1; color: #a93b3b; }
.weather-config-notice { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; padding: 12px 15px; border: 1px solid #e8d49a; border-radius: 9px; background: #fff9e9; color: #8a6d25; font-size: 12px; line-height: 1.6; }
.weather-config-notice .link-button { color: #7c6020; white-space: nowrap; }
footer { padding: 28px 0; text-align: center; color: #a2a8b4; font-size: 10px; }
.login-body { display: grid; place-items: center; padding: 20px; }
.login-card { width: min(100%, 420px); padding: 34px; }
.login-card .brand { margin-bottom: 44px; }
.login-card h1 { margin: 0 0 7px; font-size: 25px; letter-spacing: -.06em; }
.login-copy { margin: 0 0 28px; color: #88909f; font-size: 12px; line-height: 1.6; }
.login-card form { display: grid; gap: 17px; }
.login-error { min-height: 16px; margin: -5px 0 0; color: #ad3737; font-size: 11px; }
@media (max-width: 920px) { .layout { grid-template-columns: 1fr; } .sidebar { grid-template-columns: 1fr; } .preview-card { grid-template-columns: 1fr 1.5fr; } .preview-card .primary-button { grid-column: 2; justify-self: start; } }
@media (max-width: 680px) { .shell { padding: 0 13px; } .topbar { min-height: 70px; } .cloud-pill { display: none; } .intro { padding: 25px 0; } .today-badge { display: none; } .preview-card { grid-template-columns: 1fr; } .preview-card .primary-button { grid-column: auto; } .calendar-toolbar { padding: 20px 16px 17px; } .calendar-card h2 { font-size: 23px; } .calendar-day { min-height: 83px; gap: 4px; padding: 6px 4px; } .day-number { width: 26px; height: 26px; font-size: 13px; flex: none; } .holiday-name { font-size: 9px; } .event-chip { font-size: 9px; padding: 4px 3px; } .more-events { font-size: 9px; padding-left: 3px; } .weekdays { margin: 0; font-size: 11px; } .calendar-footer { flex-wrap: wrap; } .weekend-legend { margin-left: 3px; } .footer-note { display: none; } .day-card, .settings-card { padding: 21px; } .day-card h2 { font-size: 23px; } .day-event { gap: 8px; } .day-event-time { width: 100px; font-size: 12px; } }
@media (max-width: 680px) { .calendar-toolbar { flex-wrap: wrap; } .calendar-actions { width: 100%; justify-content: flex-end; } .top-actions { gap: 12px; } #range-hint { display: block; width: 100%; margin: 2px 0 0; } }
@media (max-width: 480px) { .day-event { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 10px; } .day-event-time { grid-column: 1 / -1; width: auto; } .day-event-body { grid-column: 1; grid-row: 2; } .day-event-actions { grid-column: 2; grid-row: 2; } }