:root {
    color-scheme: dark;
    --canvas: #17181d;
    --panel: #202126;
    --panel-raised: #2c2f34;
    --grid: #3a3d43;
    --grid-soft: #2d3035;
    --text: #e8eaed;
    --muted: #aeb4bc;
    --faint: #747980;
    --blue: #9dbbff;
    --blue-strong: #4d7eea;
    --green: #63c294;
    --violet: #9bafff;
    --sidebar-width: 320px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
    min-width: 320px;
    margin: 0;
    background: var(--canvas);
    color: var(--text);
}

.auth-page {
    min-height: 100vh;
    background: radial-gradient(circle at 50% -15%, #30395a 0, var(--canvas) 46%);
}

.auth-layout {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 28px;
}

.auth-card {
    width: min(100%, 455px);
    padding: 40px;
    border: 1px solid #3a3d45;
    border-radius: 28px;
    background: rgb(31 33 39 / 94%);
    box-shadow: 0 24px 65px rgb(0 0 0 / 34%);
}

.auth-brand { display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 700; }
.auth-brand .brand-mark { width: 38px; height: 38px; font-size: 16px; }
.auth-brand .brand-mark::before { width: 38px; transform: translateY(-14px); }
.eyebrow { margin: 31px 0 8px; color: var(--blue); font-size: 13px; font-weight: 760; letter-spacing: .07em; text-transform: uppercase; }
.auth-card h1 { margin: 0; color: #f4f5f7; font-size: 31px; letter-spacing: -.75px; }
.auth-copy { margin: 13px 0 0; color: var(--muted); line-height: 1.55; }
.auth-form { display: grid; gap: 17px; margin-top: 28px; }
.auth-field { display: grid; gap: 8px; color: #dfe2e7; font-size: 14px; font-weight: 680; }
.auth-field input {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid #555a63;
    border-radius: 12px;
    background: #141519;
    color: var(--text);
}
.auth-field input:hover { border-color: #777d88; }
.auth-field input:focus { border-color: var(--blue); outline: 0; }
.auth-hint { margin: -4px 0 0; color: var(--faint); font-size: 12px; line-height: 1.5; }
.auth-submit, .signout-button {
    min-height: 48px;
    border-radius: 13px;
    background: #587fd8;
    color: white;
    font-weight: 760;
}
.auth-submit:hover, .signout-button:hover { background: #6a91ea; }
.auth-notice { margin: 19px 0 -4px; padding: 11px 13px; border-radius: 11px; font-size: 14px; line-height: 1.4; }
.auth-notice.is-success { background: rgb(72 143 105 / 20%); color: #9be4bb; }
.auth-notice.is-error { background: rgb(211 89 89 / 18%); color: #ffb5b5; }
.auth-secondary { color: var(--blue); }

button, input, select, textarea { font: inherit; }

button {
    border: 0;
    cursor: pointer;
}

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

svg {
    display: block;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    grid-template-rows: 80px minmax(0, 1fr);
    min-height: 100vh;
}

.topbar {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
    padding: 0 24px 0 20px;
    border-bottom: 1px solid #24272c;
    background: #1b1c20;
}

.icon-button {
    display: inline-grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 50%;
    background: transparent;
    color: var(--text);
}

.icon-button:hover { background: #303238; }

.brand {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 11px;
    color: inherit;
    text-decoration: none;
}

.brand-mark {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    overflow: hidden;
    border-radius: 11px;
    background: linear-gradient(140deg, #72a5ff, #745ddd 72%);
    box-shadow: inset 0 2px 0 rgb(255 255 255 / 25%);
    color: white;
    font-size: 19px;
    font-weight: 750;
}

.brand-mark::before {
    position: absolute;
    width: 42px;
    height: 9px;
    border-radius: 11px 11px 0 0;
    background: rgb(255 255 255 / 20%);
    content: "";
    transform: translateY(-16px);
}

.brand-name { font-size: 22px; font-weight: 480; letter-spacing: -.45px; }

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.today-button, .schedule-shortcut, .view-switcher {
    min-height: 48px;
    padding: 0 27px;
    border: 1px solid #73777e;
    border-radius: 25px;
    background: transparent;
    color: var(--text);
    font-weight: 650;
}

.today-button:hover, .schedule-shortcut:hover, .view-switcher:hover { background: #292b30; }

.schedule-shortcut.is-active {
    display: none;
}

.date-nav { display: flex; align-items: center; }

.topbar h1 {
    margin: 0 0 0 8px;
    overflow: hidden;
    color: #f0f1f4;
    font-size: clamp(22px, 2vw, 29px);
    font-weight: 450;
    letter-spacing: -.55px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.view-title-compact { display: none; }

.utility-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.mobile-date-nav, .mobile-period-strip, .mobile-drawer-content, .drawer-backdrop { display: none; }

.view-switcher { display: inline-flex; align-items: center; gap: 8px; padding: 0 17px 0 21px; }
.view-switcher svg { width: 17px; height: 17px; }
.view-switcher-wrap { position: relative; }
.view-menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 9px);
    right: 0;
    display: grid;
    min-width: 156px;
    padding: 8px;
    border: 1px solid #484c54;
    border-radius: 14px;
    background: #292b31;
    box-shadow: 0 14px 34px rgb(0 0 0 / 38%);
}
.view-menu[hidden] { display: none; }
.view-menu button {
    min-height: 38px;
    padding: 0 13px;
    border-radius: 9px;
    background: transparent;
    color: #d9dde3;
    text-align: left;
}
.view-menu button:hover, .view-menu button.is-active { background: #3a4050; color: #edf3ff; }
.view-menu button.is-active { font-weight: 720; }

.profile-button {
    border: 2px solid #f4ca3d;
    background: linear-gradient(140deg, #1e9d78, #2d4d9c);
    color: white;
    font-size: 13px;
    font-weight: 800;
}

.logout-form { margin: 0; }

.sidebar {
    grid-column: 1;
    min-width: 0;
    padding: 15px 20px 28px;
    background: #1b1c20;
}

@media (min-width: 761px) {
    body.sidebar-collapsed .app-shell { grid-template-columns: 0 minmax(0, 1fr); }
    body.sidebar-collapsed .sidebar {
        visibility: hidden;
        overflow: hidden;
        padding-inline: 0;
        pointer-events: none;
    }
}

.create-button {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-height: 70px;
    padding: 0 23px;
    border-radius: 20px;
    background: #3a3d42;
    box-shadow: 0 2px 5px rgb(0 0 0 / 25%);
    color: var(--text);
    font-weight: 680;
}

.create-button:hover { background: #474a50; }
.create-button > span { font-size: 37px; font-weight: 270; line-height: 1; }
.create-button svg { width: 17px; height: 17px; }

.create-event-menu {
    position: fixed;
    z-index: 55;
    width: 210px;
    padding: 8px;
    border: 1px solid #424750;
    border-radius: 14px;
    background: #2a2d33;
    box-shadow: 0 13px 31px rgb(0 0 0 / 40%);
}
.create-event-menu-option {
    display: flex;
    width: 100%;
    min-height: 45px;
    align-items: center;
    padding: 0 14px;
    border-radius: 9px;
    background: transparent;
    color: #edf0f5;
    font-size: 14px;
    font-weight: 690;
    text-align: left;
}
.create-event-menu-option:hover, .create-event-menu-option:focus-visible { background: #414a5c; color: #fff; }

body.toolbar-utility-open { overflow: hidden; }
.toolbar-utility-backdrop {
    position: fixed;
    z-index: 68;
    inset: 0;
    border: 0;
    background: rgb(0 0 0 / 42%);
}
.toolbar-utility-backdrop.is-menu { background: transparent; }
.toolbar-utility-dialog {
    position: fixed;
    z-index: 69;
    top: 82px;
    right: 66px;
    width: min(430px, calc(100vw - 32px));
    max-height: min(680px, calc(100vh - 112px));
    overflow: auto;
    border: 1px solid #3b4049;
    border-radius: 16px;
    background: #202124;
    box-shadow: 0 22px 52px rgb(0 0 0 / 48%);
    color: #e9edf5;
}
.toolbar-utility-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 0 12px 0 20px; border-bottom: 1px solid #353942; }
.toolbar-utility-header h2 { margin: 0; font-size: 17px; font-weight: 700; }
.toolbar-utility-close { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: #cfd5df; font-size: 25px; font-weight: 320; line-height: 1; }
.toolbar-utility-close:hover, .toolbar-utility-close:focus-visible { background: #393d46; color: #fff; }
.toolbar-utility-content { display: grid; gap: 14px; padding: 18px 20px 20px; }
.toolbar-utility-dialog--menu { top: 72px; right: 102px; width: min(264px, calc(100vw - 32px)); max-height: none; border-radius: 9px; box-shadow: 0 8px 24px rgb(0 0 0 / 42%); }
.toolbar-utility-dialog--menu .toolbar-utility-content { gap: 0; padding: 8px; }
.toolbar-settings-menu-option { width: 100%; min-height: 42px; padding: 10px 13px; border-radius: 5px; color: #e8ebf1; font: inherit; font-size: 14px; font-weight: 620; text-align: left; }
.toolbar-settings-menu-option:hover, .toolbar-settings-menu-option:focus-visible { background: #3c4048; color: #fff; }
.toolbar-utility-help, .toolbar-utility-status { margin: 0; color: #afb7c5; font-size: 13px; line-height: 1.5; }
.toolbar-search-input { width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid #58606d; border-radius: 8px; background: #17181c; color: #f0f3f7; font: inherit; }
.toolbar-search-input:focus { border-color: #9bbcff; outline: 2px solid rgb(155 188 255 / 28%); outline-offset: 1px; }
.toolbar-search-results { display: grid; gap: 7px; }
.toolbar-search-result { display: grid; gap: 4px; width: 100%; padding: 12px; border: 1px solid #343944; border-radius: 10px; background: #181a1f; color: #e6eaf1; text-align: left; }
.toolbar-search-result strong { font-size: 14px; }
.toolbar-search-result span { color: #a8b2c2; font-size: 12px; }
.toolbar-search-result:hover, .toolbar-search-result:focus-visible { border-color: #7e9bcc; background: #242936; }
.toolbar-settings-fieldset { display: grid; gap: 9px; margin: 0; padding: 14px; border: 1px solid #383d47; border-radius: 11px; }
.toolbar-settings-fieldset legend { padding: 0 5px; color: #dfe5ef; font-size: 14px; font-weight: 700; }
.toolbar-settings-option { display: flex; align-items: start; gap: 10px; padding: 6px 4px; color: #c4ccd8; font-size: 13px; line-height: 1.45; cursor: pointer; }
.toolbar-settings-option input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: #9dbbff; }

body.create-event-dialog-open { overflow: hidden; }
.create-event-backdrop {
    position: fixed;
    z-index: 60;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    background: rgb(0 0 0 / 53%);
}
.create-event-dialog {
    position: fixed;
    z-index: 61;
    top: 50%;
    left: 50%;
    width: min(568px, calc(100vw - 40px));
    max-height: min(670px, calc(100vh - 40px));
    overflow: auto;
    border: 1px solid #414651;
    border-radius: 22px;
    background: #202124;
    box-shadow: 0 25px 68px rgb(0 0 0 / 54%);
    color: #e7eaf0;
    transform: translate(-50%, -50%);
}
.create-event-dialog-header {
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 8px 12px 6px 24px;
    border-bottom: 0;
}
.create-event-dialog-header h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}
.create-event-dialog-close {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: transparent;
    color: #d2d7e0;
    font-size: 28px;
    font-weight: 320;
    line-height: 1;
}
.create-event-dialog-close:hover { background: #3a3e47; color: #fff; }
.create-event-form { display: grid; gap: 12px; padding: 12px 34px 20px; }
.create-event-field { display: grid; gap: 6px; color: #cbd1db; font-size: 13px; font-weight: 710; }
.create-event-field input, .create-event-field select, .create-event-field textarea {
    width: 100%;
    min-height: 39px;
    padding: 0 12px;
    border: 1px solid #515762;
    border-radius: 10px;
    background: #181a1f;
    color: #edf0f5;
}
.create-event-field textarea { min-height: 64px; padding: 10px 12px; resize: vertical; }
.create-event-field input:hover, .create-event-field select:hover, .create-event-field textarea:hover { border-color: #737b89; }
.create-event-field input:focus, .create-event-field select:focus, .create-event-field textarea:focus { border-color: #9dbbff; outline: 0; }
.create-event-field input::placeholder, .create-event-field textarea::placeholder { color: #858d99; }
.create-event-time-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.create-event-all-day { display: inline-flex; width: fit-content; align-items: center; gap: 9px; color: #e0e4eb; font-size: 14px; font-weight: 670; }
.create-event-all-day input { width: 18px; height: 18px; margin: 0; accent-color: #90aff1; }
.create-event-form > .create-event-field:first-child { gap: 0; }
.create-event-form > .create-event-field:first-child > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}
.create-event-form > .create-event-field:first-child input {
    min-height: 54px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #4b515b;
    border-radius: 0;
    background: transparent;
    color: #f1f3f7;
    font-size: 27px;
    font-weight: 520;
    letter-spacing: -.45px;
}
.create-event-form > .create-event-field:first-child input:focus { border-color: #9dbbff; }
.create-event-calendar {
    display: flex;
    min-height: 46px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 13px;
    border: 1px solid #414750;
    border-radius: 11px;
    background: #1d1f24;
    color: #aeb7c6;
    font-size: 13px;
}
.create-event-calendar strong { color: #e4e8ef; font-size: 14px; font-weight: 680; }
.create-event-form-error { margin: -2px 0 0; color: #ffb4b4; font-size: 13px; line-height: 1.45; }
.create-event-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 3px; }
.create-event-cancel, .create-event-save { min-height: 43px; padding: 0 19px; border-radius: 10px; font-size: 14px; font-weight: 730; }
.create-event-cancel { background: transparent; color: #c6d7ff; }
.create-event-cancel:hover { background: #363b45; color: #e0e9ff; }
.create-event-save { background: #9dbbff; color: #18345f; }
.create-event-save:hover { background: #b2cbff; }
.create-event-save:disabled { cursor: progress; opacity: .66; }

.month-quick-create {
    position: fixed;
    z-index: 62;
    display: grid;
    width: min(352px, calc(100vw - 24px));
    gap: 12px;
    padding: 18px;
    border: 1px solid #4b5260;
    border-radius: 16px;
    background: #24262b;
    box-shadow: 0 20px 48px rgb(0 0 0 / 48%);
    color: #edf0f5;
}
.month-quick-create h2 { margin: 0; font-size: 16px; font-weight: 720; letter-spacing: -.15px; }
.month-quick-create-form { display: grid; gap: 10px; }
.month-quick-create-form input {
    width: 100%;
    min-height: 43px;
    padding: 0 1px;
    border: 0;
    border-bottom: 1px solid #59606c;
    border-radius: 0;
    background: transparent;
    color: #f3f5f8;
    font-size: 18px;
}
.month-quick-create-form input:focus { border-color: #9dbbff; outline: 0; }
.month-quick-create-form input::placeholder { color: #9aa2af; }
.month-quick-create-timing { margin: 0; color: #b9c1ce; font-size: 13px; line-height: 1.45; }
.month-quick-create-error { margin: 0; color: #ffb4b4; font-size: 13px; line-height: 1.4; }
.month-quick-create-actions { display: flex; justify-content: flex-end; gap: 7px; padding-top: 3px; }
.month-quick-create-actions button {
    min-height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    background: transparent;
    color: #c8d8ff;
    font-size: 13px;
    font-weight: 720;
}
.month-quick-create-actions button:hover { background: #353a45; color: #e4ebff; }
.month-quick-create-actions button[type="submit"] { background: #9dbbff; color: #18345f; }
.month-quick-create-actions button[type="submit"]:hover { background: #b2cbff; }
.month-quick-create-actions button:disabled { cursor: progress; opacity: .66; }

.mini-calendar { margin-top: 38px; }
.mini-heading { display: flex; align-items: center; justify-content: space-between; }
.mini-heading h2, .calendar-list h2 {
    margin: 0;
    color: #e1e4e8;
    font-size: 17px;
    font-weight: 650;
}

.mini-nav {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: transparent;
    color: #d5d7dc;
    font-size: 27px;
    line-height: 1;
}

.mini-nav:hover { background: #303238; }

.mini-weekdays, .mini-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
}

.mini-weekdays { margin-top: 17px; color: #b3b7be; font-size: 12px; font-weight: 620; }
.mini-grid { gap: 1px; margin-top: 9px; }

.mini-day {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    justify-self: center;
    border-radius: 50%;
    background: transparent;
    color: #e4e6e9;
    font-size: 13px;
}

.mini-day:hover { background: #34373d; }
.mini-day.is-muted { color: #6b7077; }
.mini-day.is-selected { background: #9bb9fa; color: #203967; font-weight: 750; }
.mini-day.is-today:not(.is-selected) { box-shadow: inset 0 0 0 1px #7f9bd4; }

.calendar-list { margin-top: 36px; }
.sidebar-logout { margin-top: 34px; }
.signout-button { width: 100%; min-height: 42px; background: transparent; border: 1px solid #5e636c; color: #dce0e6; }
.signout-button:hover { background: #2d3036; }
.calendar-singleton {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 40px;
    margin: 8px 0 0;
    color: #d8dbe0;
    font-size: 16px;
}
.calendar-singleton-color { width: 18px; height: 18px; flex: 0 0 18px; border-radius: 5px; background: #4b82e7; }

.calendar-area {
    grid-column: 2;
    min-width: 0;
    padding: 0 90px 20px 0;
}

.calendar-card {
    display: grid;
    min-height: calc(100vh - 100px);
    overflow: hidden;
    border-radius: 25px;
    background: #141518;
}

.month-weekdays, .month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.month-weekdays { border-bottom: 1px solid var(--grid); }
.month-weekdays span {
    display: flex;
    min-height: 56px;
    align-items: center;
    justify-content: center;
    color: #b7bbc3;
    font-size: 13px;
    font-weight: 720;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.calendar-card--month { grid-template-rows: 45px minmax(0, 1fr); }
.month-grid {
    grid-auto-rows: 0;
    grid-template-rows: repeat(var(--visible-month-weeks, 6), minmax(105px, 1fr));
    overflow: hidden;
}
.month-day {
    position: relative;
    min-width: 0;
    border-right: 1px solid var(--grid);
    border-bottom: 1px solid var(--grid);
    background: transparent;
    color: #dadddf;
    text-align: left;
}

.month-day:nth-child(7n) { border-right: 0; }
.month-day:nth-last-child(-n + 7) { border-bottom: 0; }
.month-day:hover { background: #1e2024; }
.month-day.is-selected { background: #20232a; }
.month-day-date {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    padding: 0;
    background: transparent;
    color: inherit;
    text-align: left;
}
.month-day-date time {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    margin: 10px;
    border-radius: 50%;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.month-day.is-outside { color: #72777f; }
.month-day.is-today .month-day-date time { background: #9dbbff; color: #1e386d; font-weight: 780; }
.month-day-create {
    position: absolute;
    z-index: 0;
    inset: 44px 0 0;
    width: 100%;
    padding: 0;
    background: transparent;
    color: transparent;
}
.month-day-create:hover { background: rgb(157 187 255 / 5%); }
.month-day-create:focus-visible { outline: 2px solid #c9daff; outline-offset: -3px; }

.event-chip, .event-overflow {
    position: relative;
    z-index: 1;
    display: block;
    min-width: 0;
    overflow: hidden;
    margin: 0 7px 4px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 690;
    line-height: 22px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-chip {
    padding: 0 7px;
    background: var(--event-color, #4d7eea);
    color: #fff;
    text-align: left;
}
.event-chip:hover { filter: brightness(1.08); }

.event-overflow { padding: 0 3px; color: #b9c2d3; }

.day-agenda {
    margin: 18px 5px 0;
    padding: 19px 21px 20px;
    border: 1px solid var(--grid);
    border-radius: 18px;
    background: #17181c;
}

.agenda-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.agenda-kicker { margin: 0 0 4px; color: #8f98a7; font-size: 12px; font-weight: 730; letter-spacing: .07em; text-transform: uppercase; }
.agenda-heading h2 { margin: 0; color: #eef0f5; font-size: 18px; font-weight: 690; text-transform: capitalize; }
.agenda-count { padding: 5px 9px; border-radius: 999px; background: #292d35; color: #c9d5ef; font-size: 12px; font-weight: 680; white-space: nowrap; }
.agenda-content { margin-top: 15px; }
.agenda-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.agenda-event { display: flex; gap: 11px; align-items: start; padding: 11px 0; border-top: 1px solid #2a2d34; }
.agenda-event:first-child { padding-top: 0; border-top: 0; }
.agenda-event-trigger { display: flex; width: 100%; align-items: start; gap: 11px; padding: 0; background: transparent; color: inherit; text-align: left; }
.agenda-event-trigger:hover .agenda-event-details h3, .agenda-event-trigger:focus-visible .agenda-event-details h3 { color: #b9ceff; }
.agenda-event-trigger:focus-visible { outline: 2px solid #a9c2f5; outline-offset: 4px; border-radius: 8px; }
.agenda-event-color { width: 4px; min-height: 42px; margin-top: 2px; border-radius: 999px; }
.agenda-event-details { min-width: 0; }
.agenda-event h3 { margin: 0; color: #f0f2f5; font-size: 14px; font-weight: 710; }
.agenda-event-meta, .agenda-event-location { margin: 4px 0 0; color: #a8b0bd; font-size: 13px; }
.agenda-event-location { color: #8e98a7; }
.empty-state { margin: 0; color: var(--muted); font-size: 14px; }
.empty-state.is-error { color: #ef9b9b; }
.mobile-create { display: none; }

.calendar-card--timeline {
    display: block;
    height: calc(100vh - 100px);
    min-height: 0;
}
.timeline-scroll {
    height: 100%;
    overflow: auto;
    scrollbar-color: #717780 #1c1d21;
}
.timeline-header {
    position: sticky;
    z-index: 2;
    top: 0;
    display: grid;
    grid-template-columns: 76px repeat(var(--timeline-columns), minmax(128px, 1fr));
    min-width: 100%;
    border-bottom: 1px solid var(--grid);
    background: #141518;
}
.calendar-card--week .timeline-header, .calendar-card--week .timeline-all-day, .calendar-card--week .timeline-body { min-width: 972px; }
.timeline-timezone {
    display: flex;
    align-items: end;
    justify-content: end;
    min-height: 78px;
    padding: 0 10px 9px 0;
    color: #a7abb4;
    font-size: 12px;
    font-weight: 650;
}
.timeline-day-header {
    display: grid;
    min-height: 78px;
    place-items: center;
    align-content: center;
    gap: 4px;
    border-left: 1px solid var(--grid);
    background: transparent;
    color: #bfc3c9;
}
.timeline-day-header > span { color: #aab0ba; font-size: 12px; font-weight: 730; letter-spacing: .04em; }
.timeline-day-header time {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 50%;
    color: #e1e4e8;
    font-size: 28px;
    font-variant-numeric: tabular-nums;
}
.timeline-day-header.is-today > span { color: #a8c3ff; }
.timeline-day-header.is-today time { background: #9dbbff; color: #1e386d; }
.timeline-day-header:hover { background: #1e2025; }
.timeline-all-day {
    display: grid;
    grid-template-columns: 76px repeat(var(--timeline-columns), minmax(128px, 1fr));
    min-width: 100%;
    border-bottom: 1px solid var(--grid);
    background: #17181c;
}
.timeline-all-day-label {
    display: flex;
    min-height: 36px;
    align-items: start;
    justify-content: end;
    padding: 8px 10px 0 0;
    color: #9ea5b0;
    font-size: 11px;
    font-weight: 670;
}
.timeline-all-day-cell {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: 3px;
    min-height: 36px;
    padding: 4px;
    border-left: 1px solid var(--grid);
}
.timeline-all-day-event, .timeline-all-day-overflow {
    display: block;
    min-width: 0;
    overflow: hidden;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    line-height: 19px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.timeline-all-day-event { padding: 0 6px; background: var(--event-color, #4d7eea); color: #fff; text-align: left; }
.timeline-all-day-event:hover { filter: brightness(1.08); }
.timeline-all-day-overflow { padding: 0 3px; color: #bbc5d8; }
.timeline-body {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    min-width: 100%;
}
.timeline-axis {
    display: grid;
    grid-template-rows: repeat(24, 68px);
    color: #aeb3bc;
    font-size: 12px;
    text-align: right;
}
.timeline-axis span { padding: 0 10px 0 0; transform: translateY(-8px); }
.timeline-columns {
    display: grid;
    grid-template-columns: repeat(var(--timeline-columns), minmax(128px, 1fr));
    min-width: 0;
}
.timeline-column { position: relative; display: grid; grid-template-rows: repeat(24, 68px); border-left: 1px solid var(--grid); --timeline-hour-height: 68px; }
.timeline-slot {
    display: block;
    width: 100%;
    padding: 0;
    border-bottom: 1px solid var(--grid);
    background: transparent;
    color: inherit;
}
.timeline-slot:hover { background: #1c1e23; }
.timeline-slot:focus-visible { position: relative; z-index: 2; outline: 2px solid #c9daff; outline-offset: -2px; }
.timeline-now-marker {
    position: absolute;
    z-index: 3;
    top: calc(var(--timeline-now-offset) * var(--timeline-hour-height));
    right: -1px;
    left: -1px;
    height: 2px;
    pointer-events: none;
    background: #f06b6b;
}
.timeline-now-marker::before {
    position: absolute;
    top: 50%;
    left: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    content: "";
    transform: translateY(-50%);
    background: #f06b6b;
}
.timeline-event {
    position: absolute;
    z-index: 1;
    top: calc((var(--event-start) * var(--timeline-hour-height)) + 2px);
    right: 4px;
    left: 4px;
    min-height: 20px;
    height: max(20px, calc((var(--event-duration) * var(--timeline-hour-height)) - 4px));
    overflow: hidden;
    padding: 4px 6px;
    border-radius: 5px;
    background: var(--event-color, #4d7eea);
    box-shadow: inset 3px 0 0 rgb(255 255 255 / 30%);
    color: #fff;
    font-size: 12px;
    font-weight: 720;
    line-height: 1.25;
    text-align: left;
}
.timeline-event:hover { filter: brightness(1.08); }

.event-detail-backdrop {
    position: fixed;
    z-index: 45;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    background: transparent;
}
.event-detail-popover {
    position: fixed;
    z-index: 46;
    width: min(620px, calc(100vw - 32px));
    padding: 18px 28px 26px;
    border: 1px solid #3c4048;
    border-radius: 22px;
    background: #202124;
    box-shadow: 0 20px 46px rgb(0 0 0 / 46%);
}
.event-detail-header { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-height: 38px; }
.event-detail-edit, .event-detail-delete {
    display: grid;
    width: 36px;
    height: 36px;
    min-height: 36px;
    place-items: center;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    color: #d5dae2;
    font-size: 0;
}
.event-detail-edit::before, .mobile-event-detail-edit::before {
    content: "✎";
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    transform: translateY(-1px);
}
.event-detail-delete, .mobile-event-detail-delete { position: relative; }
.event-detail-delete::before, .mobile-event-detail-delete::before {
    box-sizing: border-box;
    width: 12px;
    height: 13px;
    border: 2px solid currentColor;
    border-top: 0;
    border-radius: 1px 1px 3px 3px;
    content: "";
}
.event-detail-delete::after, .mobile-event-detail-delete::after {
    position: absolute;
    top: 9px;
    width: 16px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 -3px 0 -1px currentColor;
    content: "";
}
.event-detail-edit:hover, .event-detail-edit:focus-visible { background: #393c43; color: #eef3ff; }
.event-detail-delete { color: #d5dae2; }
.event-detail-delete:hover, .event-detail-delete:focus-visible { background: #57332f; color: #fff0ed; }
.event-detail-close {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 50%;
    background: transparent;
    color: #d4d8df;
    font-size: 27px;
    font-weight: 330;
    line-height: 1;
}
.event-detail-close:hover { background: #393c43; color: #fff; }
.event-detail-main { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 16px; padding: 13px 6px 0; }
.event-detail-color { width: 18px; height: 18px; margin-top: 5px; border-radius: 5px; }
.event-detail-main h2 { margin: 0; color: #f0f2f6; font-size: 26px; font-weight: 620; line-height: 1.28; }
.event-detail-when { margin: 8px 0 0; color: #d0d5dd; font-size: 14px; line-height: 1.5; }
.event-detail-details { display: grid; gap: 14px; margin: 24px 6px 0 44px; }
.event-detail-row { display: grid; gap: 4px; }
.event-detail-row > span { color: #9ea7b5; font-size: 12px; font-weight: 760; letter-spacing: .05em; text-transform: uppercase; }
.event-detail-row p { margin: 0; color: #e0e3e8; font-size: 14px; line-height: 1.52; overflow-wrap: anywhere; }

body.event-delete-confirmation-open { overflow: hidden; }
.event-delete-backdrop {
    position: fixed;
    z-index: 70;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    background: rgb(0 0 0 / 60%);
}
.event-delete-confirmation {
    position: fixed;
    z-index: 71;
    top: 50%;
    left: 50%;
    width: min(426px, calc(100vw - 32px));
    padding: 21px;
    border: 1px solid #4a4f59;
    border-radius: 21px;
    background: #26282d;
    box-shadow: 0 22px 55px rgb(0 0 0 / 52%);
    color: #f0f2f6;
    transform: translate(-50%, -50%);
}
.event-delete-confirmation-header { display: flex; min-width: 0; align-items: start; justify-content: space-between; gap: 12px; }
.event-delete-confirmation-header h2 { margin: 4px 0 0; color: #f4f5f7; font-size: 20px; font-weight: 690; line-height: 1.35; overflow-wrap: anywhere; }
.event-delete-confirmation-close {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: transparent;
    color: #d4d8df;
    font-size: 27px;
    font-weight: 330;
    line-height: 1;
}
.event-delete-confirmation-close:hover, .event-delete-confirmation-close:focus-visible { background: #393c43; color: #fff; }
.event-delete-confirmation-message { margin: 16px 0 0; color: #c6cbd4; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.event-delete-confirmation-error { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: rgb(175 68 63 / 22%); color: #ffb6ae; font-size: 13px; line-height: 1.45; }
.event-delete-confirmation-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 23px; }
.event-delete-confirmation-cancel, .event-delete-confirmation-delete {
    min-height: 40px;
    padding: 0 15px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 740;
}
.event-delete-confirmation-cancel { border: 1px solid #5b626d; background: transparent; color: #dbe2eb; }
.event-delete-confirmation-cancel:hover, .event-delete-confirmation-cancel:focus-visible { background: #393d45; color: #fff; }
.event-delete-confirmation-delete { background: #bd554b; color: #fff; }
.event-delete-confirmation-delete:hover, .event-delete-confirmation-delete:focus-visible { background: #d76559; }
.event-delete-confirmation-delete:disabled { cursor: progress; opacity: .68; }

.mobile-event-detail { display: none; }

.calendar-card--year {
    display: block;
    min-height: calc(100vh - 100px);
    overflow: auto;
}
.year-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(185px, 1fr));
    gap: 37px 42px;
    padding: 29px 35px 38px;
}
.year-month h2 { margin: 0 0 17px; color: #e2e5e9; font-size: 18px; font-weight: 690; }
.year-weekdays, .year-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; }
.year-weekdays { margin-bottom: 7px; color: #b8bdc5; font-size: 11px; font-weight: 650; }
.year-days { row-gap: 3px; }
.year-day {
    position: relative;
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    justify-self: center;
    border-radius: 50%;
    background: transparent;
    color: #e0e3e8;
    font-size: 12px;
}
.year-day:hover { background: #30333a; }
.year-day.is-today { background: #0d5d8f; color: #eef7ff; font-weight: 730; }
.year-day.is-selected:not(.is-today) { box-shadow: inset 0 0 0 2px #9bb9fa; color: #dbe7ff; font-weight: 730; }
.year-day.has-events::after {
    position: absolute;
    bottom: 2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--event-color, #4d7eea);
    box-shadow: 0 0 0 1px #15161a;
    content: "";
}

.calendar-card--agenda {
    min-height: min(520px, calc(100vh - 136px));
    align-content: start;
    padding: 30px 42px 64px;
    background: transparent;
}
.agenda-view-content { width: min(100%, 1160px); justify-self: start; }
.agenda-content-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 0 2px; border-bottom: 1px solid #343840; }
.agenda-view-content h3 { margin: 0; color: #e8ebf1; font-size: 18px; font-weight: 650; }
.agenda-view-content p { color: #aeb5c0; font-size: 14px; line-height: 1.55; }
.agenda-view-content .empty-state { margin: 20px 0 0 122px; }
.agenda-schedule-list { display: grid; margin-top: 0; }
.agenda-day-group { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 22px; min-height: 92px; padding: 18px 2px; border-bottom: 1px solid #30343c; }
.agenda-day-group.is-range-start { min-height: 82px; }
.agenda-day-heading { display: flex; align-items: start; gap: 12px; min-width: 0; }
.agenda-day-number { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 50%; background: #9dbbff; color: #193562; font-size: 18px; font-weight: 760; }
.agenda-day-details { min-width: 0; padding-top: 2px; }
.agenda-day-heading h4 { margin: 0; color: #e5eaf3; font-size: 14px; font-weight: 700; line-height: 1.35; }
.agenda-day-heading p { margin: 3px 0 0; color: #9ea8b6; font-size: 12px; line-height: 1.35; }
.agenda-day-group .agenda-list { display: grid; gap: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; list-style: none; }
.agenda-day-group .agenda-event { padding: 7px 0 13px; border-top: 1px solid #292d34; }
.agenda-day-group .agenda-event:first-child { padding-top: 0; border-top: 0; }
.agenda-day-group .agenda-event-trigger { min-height: 48px; padding: 4px 0; }
.agenda-day-group .agenda-event-color { min-height: 48px; }
.agenda-range-end { margin: 18px 0 0 138px; color: #8c96a4; font-size: 12px !important; }
.agenda-load-more { margin: 18px 0 0 138px; padding: 8px 15px; border: 1px solid #596676; border-radius: 4px; background: transparent; color: #b9d0ff; font-size: 14px; font-weight: 650; }
.agenda-load-more:hover { border-color: #91b9ff; background: #202c3e; color: #d6e6ff; }
.agenda-load-more:focus-visible { outline: 2px solid #a9c2f5; outline-offset: 3px; }

@media (max-width: 1080px) {
    :root { --sidebar-width: 245px; }
    .topbar { gap: 12px; padding-right: 16px; }
    .brand-name { display: none; }
    .desktop-utility { display: none; }
    .calendar-area { padding-right: 20px; }
}

@media (min-width: 761px) {
    .create-event-dialog {
        top: 58.5%;
        left: clamp(430px, 27vw, 520px);
    }
}

@media (max-width: 760px) {
    .auth-layout { align-items: start; padding: 72px 18px 32px; }
    .auth-card { padding: 29px 24px; border-radius: 23px; }
    .auth-card h1 { font-size: 27px; }
    .app-shell { display: block; min-height: 100svh; }
    .topbar {
        position: sticky;
        z-index: 20;
        top: 0;
        min-height: 116px;
        padding: 0 20px;
        gap: 8px;
    }
    .topbar-actions { flex: 1; min-width: 0; gap: 2px; }
    .today-button, .date-nav, .view-switcher, .view-switcher-wrap { display: none; }
    .topbar h1 { margin: 0; font-size: 26px; font-weight: 640; letter-spacing: -.65px; }
    .view-title-full { display: none; }
    .view-title-compact { display: inline; }
    .brand { display: none; }
    .utility-actions { display: none; }
    .mobile-date-nav { display: flex; flex: 0 0 auto; align-items: center; gap: 1px; }
    .mobile-nav-button { width: 34px; height: 34px; color: #d7dce5; }
    .mobile-nav-button svg { width: 19px; height: 19px; }
    .mobile-today {
        display: grid;
        width: 36px;
        height: 36px;
        place-items: center;
        border: 1px solid #92a8dd;
        border-radius: 10px;
        background: #283757;
        color: #eaf1ff;
        font-size: 15px;
        font-weight: 780;
    }
    .mobile-today:hover { background: #354a76; }
    .mobile-period-strip {
        position: sticky;
        z-index: 19;
        top: 116px;
        display: flex;
        min-height: 58px;
        gap: 8px;
        align-items: center;
        padding: 8px 14px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        border-bottom: 1px solid #272a31;
        background: #1b1c20;
        scrollbar-width: none;
    }
    .mobile-period-strip[hidden] { display: none; }
    .mobile-period-strip::-webkit-scrollbar { display: none; }
    .mobile-period-chip {
        flex: 0 0 auto;
        min-width: 62px;
        min-height: 40px;
        padding: 0 13px;
        border: 1px solid transparent;
        border-radius: 12px;
        background: #121419;
        color: #c4c9d2;
        font-size: 15px;
        font-weight: 720;
    }
    .mobile-period-chip:hover { background: #262b35; color: #e9edf5; }
    .mobile-period-chip.is-active { border-color: #718bc3; background: #314a7c; color: #eef3ff; }
    .mobile-period-chip:focus-visible { outline: 2px solid #c9daff; outline-offset: 2px; }
    .sidebar {
        position: fixed;
        z-index: 40;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(86vw, 340px);
        padding: 0;
        overflow-y: auto;
        border-right: 1px solid #333741;
        background: #202126;
        box-shadow: 12px 0 35px rgb(0 0 0 / 38%);
        transform: translateX(-105%);
        transition: transform 190ms ease-out;
    }
    body.sidebar-open .sidebar { transform: translateX(0); }
    .sidebar > :not(.mobile-drawer-content) { display: none; }
    .mobile-drawer-content { display: block; min-height: 100%; padding: 17px 16px 30px; }
    .mobile-drawer-header { display: flex; align-items: center; justify-content: space-between; min-height: 66px; padding: 0 4px 13px 8px; }
    .mobile-drawer-brand { display: inline-flex; align-items: center; gap: 11px; color: #f0f2f5; font-size: 20px; font-weight: 570; letter-spacing: -.3px; }
    .mobile-drawer-brand .brand-mark { width: 38px; height: 38px; border-radius: 10px; font-size: 16px; }
    .mobile-drawer-brand .brand-mark::before { width: 38px; transform: translateY(-14px); }
    .mobile-drawer-close { width: 40px; height: 40px; color: #c9ced8; }
    .mobile-view-list { display: grid; gap: 5px; margin-top: 14px; }
    .mobile-view-option, .mobile-drawer-today {
        display: flex;
        width: 100%;
        min-height: 52px;
        align-items: center;
        gap: 20px;
        padding: 0 18px;
        border-radius: 27px;
        background: transparent;
        color: #d9dde5;
        font-size: 18px;
        font-weight: 590;
        text-align: left;
    }
    .mobile-view-option svg, .mobile-drawer-today svg { width: 25px; height: 25px; color: #c7ccd6; }
    .mobile-view-option:hover, .mobile-view-option.is-active { background: #465168; color: #f4f6fb; }
    .mobile-view-option.is-active svg { color: #d8e5ff; }
    .mobile-drawer-divider { height: 1px; margin: 18px 4px 13px; background: #434750; }
    .mobile-drawer-today { border-radius: 13px; }
    .mobile-drawer-today:hover { background: #30333a; }
    .mobile-drawer-note { margin: 35px 17px 0; color: #8e95a1; font-size: 13px; line-height: 1.45; }
    .drawer-backdrop {
        position: fixed;
        z-index: 30;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        border: 0;
        opacity: 0;
        pointer-events: none;
        background: rgb(0 0 0 / 66%);
        transition: opacity 190ms ease-out;
    }
    body.sidebar-open .drawer-backdrop { opacity: 1; pointer-events: auto; }
    .calendar-area { padding: 0; }
    .calendar-card { min-height: 0; border-radius: 0; background: #1b1c20; }
    .calendar-card--timeline { height: calc(100svh - 70px); }
    .calendar-card--year { min-height: calc(100svh - 70px); }
    .calendar-card--agenda { min-height: calc(100svh - 70px); padding: 12px 14px 96px; }
    .agenda-content-heading { min-height: 54px; }
    .agenda-view-content h3 { font-size: 17px; }
    .agenda-day-group { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; min-height: 82px; padding: 15px 0; }
    .agenda-day-number { width: 36px; height: 36px; flex-basis: 36px; font-size: 16px; }
    .agenda-day-heading { gap: 9px; }
    .agenda-day-heading h4 { font-size: 12px; white-space: nowrap; }
    .agenda-day-heading p { display: none; }
    .agenda-day-group .agenda-event { padding: 6px 0 11px; }
    .agenda-range-end { margin-left: 108px; }
    .agenda-load-more { display: none; }
    .agenda-view-content .empty-state { margin-left: 108px; }
    .year-grid { grid-template-columns: repeat(2, minmax(145px, 1fr)); gap: 25px 18px; padding: 22px 15px 94px; }
    .year-month h2 { margin-bottom: 12px; font-size: 16px; }
    .year-day { width: 27px; height: 27px; }
    .month-weekdays { padding: 0 4px; border-bottom: 0; }
    .month-weekdays span { min-height: 62px; font-size: 14px; font-weight: 700; }
    .month-grid {
        grid-auto-rows: auto;
        gap: 3px;
        grid-template-rows: repeat(6, minmax(98px, 1fr));
        padding: 3px;
        background: #17181c;
        overflow: visible;
    }
    .month-day {
        min-height: 98px;
        border: 0;
        border-radius: 7px;
        background: #121419;
    }
    .month-day:hover { background: #1b1e25; }
    .month-day.is-selected { background: #222630; }
    .month-day time { width: 32px; height: 32px; margin: 4px auto 0; font-size: 18px; font-weight: 650; }
    .month-day-create { inset: 39px 0 0; }
    .event-chip {
        width: calc(100% - 8px);
        max-width: calc(100% - 8px);
        height: 19px;
        margin: 3px 4px 0;
        padding: 0 5px;
        border-radius: 4px;
        font-size: 10px;
        line-height: 19px;
        overflow: hidden;
    }
    .event-chip:focus-visible {
        outline: 2px solid #d5e3ff;
        outline-offset: 1px;
    }
    .event-overflow { display: none; }
    body.event-detail-open { overflow: hidden; }
    .mobile-event-detail {
        position: fixed;
        z-index: 60;
        inset: 0;
        display: flex;
        min-height: 100svh;
        flex-direction: column;
        overflow-y: auto;
        background: #15161a;
        color: #f1f3f7;
    }
    .mobile-event-detail-header {
        position: sticky;
        z-index: 1;
        top: 0;
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr) auto;
        min-height: 68px;
        align-items: center;
        padding: 0 12px 0 8px;
        border-bottom: 0;
        background: #15161a;
    }
    .mobile-event-detail-header h1 {
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .mobile-event-detail-back {
        display: grid;
        width: 44px;
        height: 44px;
        place-items: center;
        border-radius: 50%;
        background: transparent;
        color: #e5e8ed;
        font-size: 29px;
        line-height: 1;
    }
    .mobile-event-detail-back:hover, .mobile-event-detail-back:focus-visible { background: #30333b; }
    .mobile-event-detail-actions { display: flex; align-items: center; gap: 4px; }
    .mobile-event-detail-edit, .mobile-event-detail-delete {
        display: grid;
        width: 36px;
        height: 36px;
        min-height: 36px;
        place-items: center;
        padding: 0;
        border-radius: 50%;
        background: transparent;
        color: #d5dae2;
        font-size: 0;
    }
    .mobile-event-detail-edit:hover, .mobile-event-detail-edit:focus-visible { background: #303642; color: #edf3ff; }
    .mobile-event-detail-delete { color: #d5dae2; }
    .mobile-event-detail-delete:hover, .mobile-event-detail-delete:focus-visible { background: #5a3531; color: #fff0ed; }
    .event-delete-confirmation { top: auto; right: 0; bottom: 0; left: 0; width: 100%; padding: 23px 22px max(25px, env(safe-area-inset-bottom)); border-radius: 25px 25px 0 0; transform: none; }
    .event-delete-confirmation-header h2 { font-size: 19px; }
    .event-delete-confirmation-message { font-size: 15px; }
    .event-delete-confirmation-actions { margin-top: 25px; }
    .event-delete-confirmation-cancel, .event-delete-confirmation-delete { min-height: 46px; padding: 0 17px; font-size: 15px; }
    .mobile-event-detail-content { flex: 1; padding: 24px 24px max(48px, env(safe-area-inset-bottom)); }
    .mobile-event-detail-main { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 16px; align-items: start; }
    .mobile-event-detail-color { width: 21px; height: 21px; margin-top: 4px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 19%); }
    .mobile-event-detail-main h2 { margin: 0; color: #f2f4f8; font-size: clamp(25px, 7.5vw, 32px); font-weight: 650; line-height: 1.22; overflow-wrap: anywhere; }
    .mobile-event-detail-when { margin: 9px 0 0; color: #c3c8d2; font-size: 15px; line-height: 1.5; }
    .mobile-event-detail-details { display: grid; gap: 38px; margin: 37px 0 0; border: 0; }
    .mobile-event-detail-row { position: relative; padding: 0 0 0 41px; border: 0; }
    .mobile-event-detail-row:first-child { order: 2; }
    .mobile-event-detail-row:nth-child(2) { order: 1; }
    .mobile-event-detail-row:first-child { border-top: 0; }
    .mobile-event-detail-row h3 {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .mobile-event-detail-row p { margin: 0; color: #e5e8ee; font-size: 17px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
    .mobile-event-detail-row::before, .mobile-event-detail-row::after {
        position: absolute;
        box-sizing: border-box;
        content: "";
    }
    .mobile-event-detail-row:first-child::before {
        top: 1px;
        left: 3px;
        width: 22px;
        height: 22px;
        border: 2px solid #d1d5df;
        border-radius: 3px;
        box-shadow: inset 0 5px 0 -3px #d1d5df;
    }
    .mobile-event-detail-row:first-child::after {
        top: 6px;
        left: 6px;
        width: 16px;
        height: 2px;
        border-radius: 999px;
        background: #d1d5df;
    }
    .mobile-event-detail-row:nth-child(2)::before {
        top: 1px;
        left: 5px;
        width: 18px;
        height: 20px;
        border: 2px solid #d1d5df;
        border-bottom: 0;
        border-radius: 10px 10px 3px 3px;
        box-shadow: 0 4px 0 -2px #d1d5df;
    }
    .mobile-event-detail-row:nth-child(2)::after {
        top: 24px;
        left: 11px;
        width: 6px;
        height: 2px;
        border-radius: 999px;
        background: #d1d5df;
    }
    .day-agenda { margin: 14px 12px 92px; padding: 17px; border-radius: 16px; }
    .agenda-heading h2 { font-size: 17px; }
    .mobile-create {
        position: fixed;
        z-index: 4;
        right: 22px;
        bottom: 26px;
        display: grid;
        width: 62px;
        height: 62px;
        place-items: center;
        border-radius: 20px;
        background: #405b9d;
        box-shadow: 0 5px 16px rgb(0 0 0 / 35%);
        color: white;
        font-size: 43px;
        font-weight: 240;
        line-height: 1;
    }
    body.mobile-create-sheet-open { overflow: hidden; }
    .mobile-create-menu {
        position: fixed;
        z-index: 55;
        right: 22px;
        bottom: 101px;
        min-width: 154px;
        padding: 7px;
        border: 1px solid #4a505c;
        border-radius: 16px;
        background: #292c33;
        box-shadow: 0 14px 32px rgb(0 0 0 / 43%);
    }
    .mobile-create-menu-option {
        display: flex;
        width: 100%;
        min-height: 48px;
        align-items: center;
        padding: 0 15px;
        border-radius: 11px;
        background: transparent;
        color: #f0f2f7;
        font-size: 16px;
        font-weight: 700;
        text-align: left;
    }
    .mobile-create-menu-option:hover, .mobile-create-menu-option:focus-visible { background: #475a88; color: #fff; }
    .mobile-create-backdrop {
        position: fixed;
        z-index: 60;
        inset: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        background: rgb(0 0 0 / 56%);
    }
    .mobile-create-sheet {
        position: fixed;
        z-index: 61;
        right: 0;
        bottom: 0;
        left: 0;
        display: grid;
        max-height: 94svh;
        overflow: auto;
        border: 1px solid #3c414b;
        border-bottom: 0;
        border-radius: 27px 27px 0 0;
        background: #1c1e23;
        box-shadow: 0 -19px 48px rgb(0 0 0 / 44%);
        color: #edf0f5;
    }
    .mobile-create-sheet-header {
        position: sticky;
        z-index: 1;
        top: 0;
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr) auto;
        align-items: center;
        min-height: 58px;
        padding: 2px 19px;
        border-bottom: 0;
        background: #1c1e23;
    }
    .mobile-create-sheet-handle {
        position: absolute;
        top: 8px;
        left: 50%;
        width: 42px;
        height: 4px;
        border-radius: 999px;
        background: #737b89;
        transform: translateX(-50%);
    }
    .mobile-create-sheet-header h2 {
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .mobile-create-sheet-close {
        display: grid;
        width: 42px;
        height: 42px;
        place-items: center;
        border-radius: 50%;
        background: transparent;
        color: #e1e5ed;
        font-size: 31px;
        font-weight: 300;
        line-height: 1;
    }
    .mobile-create-sheet-close:hover, .mobile-create-sheet-close:focus-visible { background: #343943; }
    .mobile-create-sheet-save {
        min-width: 86px;
        min-height: 54px;
        padding: 0 18px;
        border-radius: 999px;
        background: #a6c0ff;
        color: #163360;
        font-size: 15px;
        font-weight: 760;
    }
    .mobile-create-sheet-save:hover, .mobile-create-sheet-save:focus-visible { background: #c0d2ff; }
    .mobile-create-sheet-save:disabled { cursor: progress; opacity: .68; }
    .mobile-create-sheet .create-event-form { gap: 20px; padding: 4px 20px max(26px, env(safe-area-inset-bottom)); }
    .mobile-create-sheet .create-event-form > .create-event-field:first-child input {
        min-height: 64px;
        font-size: 29px;
        font-weight: 520;
    }
    .mobile-create-sheet .create-event-field input, .mobile-create-sheet .create-event-field select, .mobile-create-sheet .create-event-field textarea { font-size: 16px; }
    .mobile-create-sheet .create-event-time-fields { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .mobile-create-sheet .create-event-calendar { min-height: 56px; }
    .mobile-create-sheet-actions { display: flex; margin-top: 2px; }
    .mobile-create-sheet-cancel {
        width: 100%;
        min-height: 46px;
        border: 1px solid #5a6577;
        border-radius: 12px;
        background: transparent;
        color: #c9d9ff;
        font-size: 15px;
        font-weight: 740;
    }
    .mobile-create-sheet-cancel:hover, .mobile-create-sheet-cancel:focus-visible { background: #343b49; color: #edf3ff; }
    .timeline-header, .timeline-all-day { grid-template-columns: 54px repeat(var(--timeline-columns), minmax(108px, 1fr)); }
    .timeline-body { grid-template-columns: 54px minmax(0, 1fr); }
    .timeline-timezone { min-height: 66px; padding: 0 7px 8px 0; font-size: 10px; }
    .timeline-all-day-label { min-height: 32px; padding: 7px 6px 0 0; font-size: 9px; }
    .timeline-all-day-cell { min-height: 32px; padding: 3px; }
    .timeline-all-day-event, .timeline-all-day-overflow { font-size: 10px; line-height: 17px; }
    .timeline-day-header { min-height: 66px; }
    .timeline-day-header time { width: 36px; height: 36px; font-size: 22px; }
    .timeline-axis { grid-template-rows: repeat(24, 58px); font-size: 11px; }
    .timeline-axis span { padding-right: 7px; }
    .timeline-columns { grid-template-columns: repeat(var(--timeline-columns), minmax(108px, 1fr)); }
    .timeline-column { grid-template-rows: repeat(24, 58px); --timeline-hour-height: 58px; }
    .timeline-event { right: 2px; left: 2px; padding: 3px 4px; font-size: 10px; }
    .calendar-card--day .timeline-header, .calendar-card--day .timeline-all-day, .calendar-card--day .timeline-body { min-width: 100%; }
    .calendar-card--three-day .timeline-header, .calendar-card--three-day .timeline-all-day, .calendar-card--three-day .timeline-body { min-width: 378px; }
    .calendar-card--week .timeline-header, .calendar-card--week .timeline-all-day, .calendar-card--week .timeline-body { min-width: 100%; }
    .calendar-card--week .timeline-header { grid-template-columns: 46px repeat(7, minmax(42px, 1fr)); }
    .calendar-card--week .timeline-all-day { grid-template-columns: 46px repeat(7, minmax(42px, 1fr)); }
    .calendar-card--week .timeline-body { grid-template-columns: 46px minmax(0, 1fr); }
    .calendar-card--week .timeline-columns { grid-template-columns: repeat(7, minmax(42px, 1fr)); }
    .calendar-card--week .timeline-timezone { padding-right: 4px; font-size: 9px; }
    .calendar-card--week .timeline-day-header { gap: 2px; }
    .calendar-card--week .timeline-day-header > span { font-size: 8px; letter-spacing: 0; }
    .calendar-card--week .timeline-day-header time { width: 30px; height: 30px; font-size: 17px; }
    .calendar-card--week .timeline-axis span { padding-right: 5px; }
    .calendar-card--week .timeline-all-day-label { padding-right: 3px; font-size: 8px; }
    .calendar-card--week .timeline-all-day-cell { padding: 2px 1px; }
    .calendar-card--week .timeline-all-day-event { padding: 0 2px; font-size: 8px; line-height: 15px; }
    .calendar-card--week .timeline-all-day-overflow { display: none; }
}

@media (max-width: 430px) {
    .topbar h1 { font-size: 22px; }
    .icon-button { width: 40px; height: 40px; }
    .month-weekdays span { min-height: 62px; font-size: 14px; }
    .month-grid { grid-template-rows: repeat(6, 1fr); }
    .month-day time { margin-top: 5px; }
}