.CalendarContentArea {
    --cal-blue: #2478ed;
    --cal-surface: color-mix(in srgb,var(--mainPageHeaderBgColor) 92%,transparent);
    min-height: 100%;
    box-sizing: border-box;
    background: radial-gradient(circle at 84% 0,rgba(39,120,255,.15),transparent 30%),var(--mainPageBodyBgColor);
    color: var(--textColor);
    font-family: Inter,Segoe UI,sans-serif;

    .CalendarHero {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 24px;
        max-width: 1400px;
        margin: 0 auto 30px
    }

    .CalendarEyebrow {
        margin: 0 0 9px;
        text-transform: uppercase;
        letter-spacing: .16em;
        font-size: 11px;
        font-weight: 750;
        color: #3887ff
    }

    .CalendarHero h1 {
        margin: 0;
        font-size: clamp(38px,5vw,62px);
        line-height: 1;
        letter-spacing: -.045em
    }

    .CalendarIntro {
        max-width: 650px;
        margin: 16px 0 0;
        color: var(--paraphColor);
        font-size: 17px;
        line-height: 1.55
    }

    .CalendarViewTabs,.CalendarToolbar,.CalendarView {
        max-width: 1400px;
        margin-inline: auto
    }

    .CalendarViewTabs {
        display: inline-flex;
        position: relative;
        left: calc((100% - min(1400px,100%))/2);
        padding: 4px;
        border: 1px solid var(--mainPageBorderColor);
        border-radius: 12px;
        background: var(--cal-surface)
    }

    .CalendarViewTabs button {
        border: 0;
        border-radius: 8px;
        padding: 10px 18px;
        background: transparent;
        color: var(--paraphColor);
        font: inherit;
        font-weight: 650;
        cursor: pointer
    }

    .CalendarViewTabs button[aria-pressed=true] {
        background: var(--cal-blue);
        color: #fff;
        box-shadow: 0 4px 16px rgba(36,120,237,.25)
    }

    .CalendarToolbar {
        display: flex;
        align-items: center;
        gap: 9px;
        margin-top: 20px;
        margin-bottom: 18px
    }

    .CalendarToolbar h2 {
        margin: 0 0 0 5px;
        font-size: clamp(19px,2.2vw,27px);
        letter-spacing: -.025em
    }

    .CalendarToolbarSpacer {
        flex: 1
    }

    .CalendarIconButton,.CalendarPrimaryButton,.CalendarSecondaryButton {
        border: 1px solid var(--mainPageBorderColor);
        border-radius: 10px;
        padding: 10px 14px;
        background: var(--cal-surface);
        color: var(--textColor);
        font: inherit;
        font-weight: 650;
        cursor: pointer
    }

    .CalendarIconButton {
        width: 42px;
        height: 42px;
        padding: 0;
        font-size: 20px
    }

    .CalendarPrimaryButton {
        border-color: var(--cal-blue);
        background: var(--cal-blue);
        color: #fff
    }

    .CalendarView[hidden],button[hidden] {
        display: none!important
    }

    .CalendarView {
        display: grid
    }

    .CalendarYearView {
    }

    .CalendarYearGrid {
        display: grid;
        grid-template-columns: repeat(3,minmax(210px,1fr));
        gap: 14px
    }

    .CalendarMiniMonth,.CalendarSidePanel,.CalendarMonthGrid,.CalendarWeekScroller {
        border: 1px solid var(--mainPageBorderColor);
        background: var(--cal-surface);
        border-radius: 16px
    }

    .CalendarMiniMonth {
        padding: 16px
    }

    .CalendarMiniMonth h3 {
        margin: 0 0 14px;
        font-size: 15px
    }

    .CalendarMiniWeekdays,.CalendarMiniDays {
        display: grid;
        grid-template-columns: repeat(7,1fr);
        gap: 3px;
        text-align: center
    }

    .CalendarMiniWeekdays {
        margin-bottom: 6px;
        color: var(--paraphColor);
        font-size: 10px;
        font-weight: 700
    }

    .CalendarMiniDays button,.CalendarMiniDays>span {
        display: grid;
        place-items: center;
        aspect-ratio: 1;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: var(--textColor);
        font-size: 11px;
        cursor: pointer
    }

    .CalendarMiniDays button:hover {
        background: color-mix(in srgb,var(--cal-blue) 14%,transparent)
    }

    .CalendarMiniDays button.has-phase {
        box-shadow: inset 0 -3px 0 var(--phase-color)
    }

    .CalendarMiniDays button.is-today {
        background: var(--cal-blue);
        color: #fff;
        font-weight: 750
    }

    .CalendarYearView {
        grid-template-columns: minmax(0,1fr) 320px;
        gap: 16px
    }

    .CalendarSidePanel {
        padding: 20px;
        align-self: start;
        position: sticky;
        top: 16px
    }

    .CalendarPanelHeading {
        display: flex;
        justify-content: space-between;
        align-items: flex-start
    }

    .CalendarPanelHeading h3 {
        margin: 0;
        font-size: 22px
    }

    .CalendarCount {
        display: grid;
        place-items: center;
        min-width: 28px;
        height: 28px;
        border-radius: 9px;
        background: rgba(56,135,255,.14);
        color: #3887ff;
        font-weight: 750
    }

    .CalendarPhaseList {
        display: grid;
        gap: 10px;
        margin-top: 18px
    }

    .CalendarPhaseCard {
        position: relative;
        padding: 14px 36px 14px 15px;
        border-left: 3px solid var(--phase-color);
        border-radius: 9px;
        background: color-mix(in srgb,var(--mainPageBodyBgColor) 75%,transparent)
    }

    .CalendarPhaseCard h4 {
        margin: 5px 0;
        font-size: 15px
    }

    .CalendarPhaseCard p {
        margin: 6px 0 0;
        color: var(--paraphColor);
        font-size: 13px;
        line-height: 1.45
    }

    .CalendarPhaseDates {
        color: var(--phase-color);
        font-size: 11px;
        font-weight: 750;
        text-transform: uppercase;
        letter-spacing: .07em
    }

    .CalendarPhaseCard button {
        position: absolute;
        right: 9px;
        top: 8px;
        border: 0;
        background: transparent;
        color: var(--paraphColor);
        font-size: 18px;
        cursor: pointer
    }

    .CalendarEmpty {
        padding: 28px 12px;
        text-align: center;
        color: var(--paraphColor)
    }

    .CalendarEmpty strong {
        color: var(--textColor)
    }

    .CalendarEmpty p {
        font-size: 13px;
        line-height: 1.5
    }

    .CalendarMonthWeekdays {
        display: grid;
        grid-template-columns: repeat(7,1fr);
        padding: 0 8px 9px;
        color: var(--paraphColor);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .08em
    }

    .CalendarMonthWeekdays span {
        padding-left: 9px
    }

    .CalendarMonthGrid {
        display: grid;
        grid-template-columns: repeat(7,1fr);
        overflow: hidden
    }

    .CalendarMonthDay {
        box-sizing: border-box;
        min-height: 118px;
        padding: 10px;
        border-right: 1px solid var(--mainPageBorderColor);
        border-bottom: 1px solid var(--mainPageBorderColor)
    }

    .CalendarMonthDay:nth-child(7n) {
        border-right: 0
    }

    .CalendarMonthDay:nth-last-child(-n+7) {
        border-bottom: 0
    }

    .CalendarMonthDay time {
        display: grid;
        place-items: center;
        width: 27px;
        height: 27px;
        border-radius: 50%;
        font-size: 12px;
        font-weight: 650
    }

    .CalendarMonthDay.is-outside {
        opacity: .35
    }

    .CalendarMonthDay.is-today time {
        background: var(--cal-blue);
        color: #fff
    }

    .CalendarMonthItems {
        display: grid;
        gap: 4px;
        margin-top: 6px
    }

    .CalendarMonthPhase,.CalendarMonthRoutine {
        overflow: hidden;
        padding: 4px 6px;
        border-radius: 5px;
        font-size: 10px;
        font-weight: 650;
        white-space: nowrap;
        text-overflow: ellipsis
    }

    .CalendarMonthPhase {
        border-left: 3px solid var(--phase-color);
        background: color-mix(in srgb,var(--phase-color) 14%,transparent)
    }

    .CalendarMonthRoutine {
        background: rgba(56,135,255,.12);
        color: #3887ff
    }

    .CalendarWeekHint {
        display: flex;
        justify-content: space-between;
        margin: 0 4px 8px;
        color: var(--paraphColor);
        font-size: 12px
    }

    .CalendarWeekScroller {
        max-height: 68vh;
        overflow: auto
    }

    .CalendarWeekGrid {
        display: grid;
        grid-template-columns: 68px repeat(7,minmax(120px,1fr));
        min-width: 950px
    }

    .CalendarWeekCorner,.CalendarWeekDayHead {
        position: sticky;
        top: 0;
        z-index: 3;
        height: 68px;
        box-sizing: border-box;
        border-bottom: 1px solid var(--mainPageBorderColor);
        background: color-mix(in srgb,var(--mainPageHeaderBgColor) 98%,transparent)
    }

    .CalendarWeekCorner {
        left: 0;
        z-index: 4;
        display: grid;
        place-items: center;
        color: var(--paraphColor);
        font-size: 10px
    }

    .CalendarWeekDayHead {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        border-left: 1px solid var(--mainPageBorderColor)
    }

    .CalendarWeekDayHead span {
        font-size: 11px;
        color: var(--paraphColor)
    }

    .CalendarWeekDayHead strong {
        font-size: 21px
    }

    .CalendarWeekDayHead small {
        padding: 3px 5px;
        border-radius: 4px;
        background: rgba(56,135,255,.12);
        color: #3887ff;
        font-size: 9px
    }

    .CalendarWeekDayHead.is-today strong {
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: var(--cal-blue);
        color: #fff
    }

    .CalendarWeekTime {
        position: relative;
        left: 0;
        z-index: 1;
        height: 36px;
        box-sizing: border-box;
        padding: 3px 8px 0 0;
        text-align: right;
        color: var(--paraphColor);
        font-size: 10px;
        background: var(--cal-surface)
    }

    .CalendarWeekCell {
        height: 36px;
        box-sizing: border-box;
        border-top: 1px solid color-mix(in srgb,var(--mainPageBorderColor) 45%,transparent);
        border-left: 1px solid var(--mainPageBorderColor)
    }

    .CalendarWeekCell.is-hour {
        border-top-color: var(--mainPageBorderColor)
    }

    .CalendarWeekCell.has-routine {
        background: linear-gradient(90deg,rgba(56,135,255,.16),rgba(56,135,255,.08));
        border-left: 3px solid #3887ff
    }

    .CalendarDialog {
        width: min(520px,calc(100% - 32px));
        box-sizing: border-box;
        padding: 0;
        border: 1px solid var(--mainPageBorderColor);
        border-radius: 18px;
        background: var(--mainPageBodyBgColor);
        color: var(--textColor);
        box-shadow: 0 24px 90px rgba(0,0,0,.35)
    }

    .CalendarDialog::backdrop {
        background: rgba(6,12,24,.7);
        backdrop-filter: blur(4px)
    }

    .CalendarDialog form {
        display: grid;
        gap: 17px;
        padding: 24px
    }

    .CalendarDialogHeader {
        display: flex;
        align-items: flex-start;
        justify-content: space-between
    }

    .CalendarDialogHeader h2 {
        margin: 0;
        font-size: 26px
    }

    .CalendarDialogHeader button {
        border: 0;
        background: transparent;
        color: var(--textColor);
        font-size: 25px;
        cursor: pointer
    }

    .CalendarDialog label {
        display: grid;
        gap: 7px;
        color: var(--paraphColor);
        font-size: 12px;
        font-weight: 650
    }

    .CalendarDialog [hidden] {
        display: none !important
    }

    .CalendarDialog [data-calendar-task-fields] {
        display: grid;
        gap: 12px
    }

    .CalendarDialog [data-calendar-item-fields],
    .CalendarDialog [data-calendar-rhythm-fields] {
        display: grid;
        gap: 12px
    }

    .CalendarDialog .CalendarCheckboxLabel {
        display: flex;
        align-items: center
    }

    .CalendarDialog .CalendarCheckboxLabel input {
        width: auto
    }

    .CalendarDialog input,.CalendarDialog textarea,.CalendarDialog select {
        box-sizing: border-box;
        width: 100%;
        border: 1px solid var(--mainPageBorderColor);
        border-radius: 9px;
        padding: 11px 12px;
        background: var(--mainPageHeaderBgColor);
        color: var(--textColor);
        font: inherit
    }

    .CalendarDialog textarea {
        resize: vertical
    }

    .CalendarFormRow {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px
    }

    .CalendarDurationRow {
        grid-template-columns: 2fr 1fr 1fr
    }

    .CalendarDialog fieldset {
        margin: 0;
        padding: 0;
        border: 0
    }

    .CalendarDialog legend {
        margin-bottom: 9px;
        color: var(--paraphColor);
        font-size: 12px;
        font-weight: 650
    }

    .CalendarColors {
        display: flex;
        gap: 11px
    }

    .CalendarColors label {
        display: block
    }

    .CalendarColors input {
        position: absolute;
        opacity: 0;
        width: 1px
    }

    .CalendarColors span {
        display: block;
        width: 28px;
        height: 28px;
        border: 3px solid transparent;
        border-radius: 50%;
        background: var(--swatch);
        cursor: pointer
    }

    .CalendarColors input:checked+span {
        border-color: var(--mainPageBodyBgColor);
        box-shadow: 0 0 0 2px var(--swatch)
    }

    .CalendarDialogActions {
        display: flex;
        justify-content: flex-end;
        gap: 9px;
        margin-top: 4px
    }

    .CalendarFormHelp {
        margin: 0;
        color: var(--paraphColor);
        font-size: 12px;
        line-height: 1.5
    }

    .CalendarRoutineChip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 8px;
        border-radius: 7px;
        background: rgba(56,135,255,.12);
        color: #3887ff;
        font-weight: 650
    }

    .CalendarRoutineChip button {
        border: 0;
        background: transparent;
        color: inherit;
        font-size: 16px;
        line-height: 1;
        cursor: pointer
    }

    /* Matrice annuelle : 12 mois en colonnes, 31 jours en lignes. */.CalendarYearView {
        grid-template-columns: 1fr;
        gap: 16px
    }

    .CalendarYearScroller {
        overflow-x: auto;
        border: 1px solid var(--mainPageBorderColor);
        border-radius: 16px;
        background: var(--cal-surface);
        scrollbar-color: var(--cal-blue) transparent
    }

    .CalendarYearGrid {
        display: grid;
        grid-template-columns: repeat(12,minmax(108px,1fr));
        gap: 0;
        min-width: 1296px
    }

    .CalendarYearMonth {
        display: grid;
        grid-template-rows: 42px repeat(31,30px);
        min-width: 0;
        border-right: 1px solid var(--mainPageBorderColor)
    }

    .CalendarYearMonth:last-child {
        border-right: 0
    }

    .CalendarYearMonth h3 {
        position: sticky;
        top: 0;
        z-index: 2;
        display: grid;
        place-items: center;
        box-sizing: border-box;
        margin: 0;
        border-bottom: 1px solid color-mix(in srgb,var(--cal-blue) 70%,var(--mainPageBorderColor));
        background: color-mix(in srgb,var(--cal-blue) 72%,#07154a);
        color: #fff;
        font-size: 12px;
        font-weight: 650
    }

    .CalendarYearDay {
        display: grid;
        grid-template-columns: 28px 1fr;
        align-items: center;
        width: 100%;
        min-width: 0;
        padding: 0;
        border: 0;
        border-bottom: 1px solid color-mix(in srgb,var(--mainPageBorderColor) 58%,transparent);
        background: transparent;
        color: var(--textColor);
        font: inherit;
        text-align: left;
        cursor: pointer
    }

    .CalendarYearDay strong {
        display: grid;
        place-items: center;
        align-self: stretch;
        background: color-mix(in srgb,var(--cal-blue) 76%,#07154a);
        color: #fff;
        font-size: 10px;
        font-weight: 600
    }

    .CalendarYearDay span {
        align-self: stretch;
        display: flex;
        align-items: center;
        padding-left: 7px;
        background: var(--annual-coverage,transparent);
        font-size: 10px;
        text-transform: capitalize
    }

    .CalendarYearDay.has-time-coverage span {
        box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--textColor) 8%,transparent)
    }

    .CalendarYearDay.has-full-day-coverage strong {
        background: var(--annual-full-day-color) !important;
        color: #fff
    }

    .CalendarYearDay:hover {
        box-shadow: inset 0 0 0 2px var(--cal-blue)
    }

    .CalendarYearDay.is-weekend {
        background: color-mix(in srgb,var(--cal-blue) 19%,transparent)
    }

    .CalendarYearDay.is-weekend strong {
        background: color-mix(in srgb,var(--cal-blue) 48%,#07154a)
    }

    .CalendarYearDay.has-phase {
        background: color-mix(in srgb,var(--phase-color) 28%,transparent);
        box-shadow: inset 4px 0 0 var(--phase-color)
    }

    .CalendarYearDay.has-phase strong {
        background: color-mix(in srgb,var(--phase-color) 78%,#07154a)
    }

    .CalendarYearDay.is-today {
        outline: 2px solid var(--cal-blue);
        outline-offset: -2px;
        position: relative;
        z-index: 1
    }

    .CalendarYearDay.is-empty {
        display: block;
        border-bottom: 1px dashed color-mix(in srgb,var(--mainPageBorderColor) 40%,transparent);
        background: repeating-linear-gradient(45deg,transparent,transparent 3px,color-mix(in srgb,var(--mainPageBorderColor) 22%,transparent) 3px,color-mix(in srgb,var(--mainPageBorderColor) 22%,transparent) 5px)
    }

    .CalendarYearView .CalendarSidePanel {
        position: static
    }

    .CalendarYearView .CalendarPhaseList {
        grid-template-columns: repeat(auto-fit,minmax(220px,1fr))
    }

    .CalendarYearDay.has-assignment {
        position: relative
    }

    .CalendarYearDay.has-assignment::after {
        content: attr(data-assignment-count);
        position: absolute;
        right: 4px;
        display: grid;
        place-items: center;
        min-width: 14px;
        color: #fff;
        font-size: 16px;
        font-weight: 600
    }

    .CalendarMonthDay {
        cursor: pointer
    }

    .CalendarMonthAssignment {
        overflow: hidden;
        width: 100%;
        padding: 5px 6px;
        border: 0;
        border-left: 3px solid var(--assignment-color,#e88d67);
        border-radius: 5px;
        background: color-mix(in srgb,var(--assignment-color,#e88d67) 15%,transparent);
        color: var(--textColor);
        font: inherit;
        font-size: 10px;
        font-weight: 650;
        text-align: left;
        white-space: nowrap;
        text-overflow: ellipsis;
        cursor: pointer
    }

    .CalendarWeekCell.has-assignment {
        position: relative;
        border-left: 3px solid var(--assignment-color,#e88d67)
    }

    .CalendarWeekAssignment {
        position: absolute;
        top: 1px;
        right: var(--assignment-overlap-inset,2px);
        left: var(--assignment-overlap-inset,2px);
        z-index: 2;
        overflow: hidden;
        padding: 3px 5px;
        border: 0;
        border-radius: 4px;
        background: var(--assignment-color,#e88d67);
        color: #fff;
        font: inherit;
        font-size: 9px;
        font-weight: 700;
        text-align: left;
        white-space: nowrap;
        text-overflow: ellipsis;
        cursor: pointer
    }

    .CalendarDangerButton {
        border: 1px solid #d85b62;
        border-radius: 10px;
        padding: 10px 14px;
        background: transparent;
        color: #e66b72;
        font: inherit;
        font-weight: 650;
        cursor: pointer
    }

    .CalendarDialogActionSpacer {
        flex: 1
    }

    .CalendarColors {
        flex-wrap: wrap
    }

    .CalendarColors .CalendarCustomColor {
        position: relative;
        display: block;
        width: 32px;
        height: 32px
    }

    .CalendarColors .CalendarCustomColor input[type=color] {
        position: static;
        opacity: 1;
        box-sizing: border-box;
        width: 32px;
        height: 32px;
        padding: 2px;
        border: 1px solid var(--mainPageBorderColor);
        border-radius: 50%;
        background: transparent;
        cursor: pointer
    }

    .CalendarColors .CalendarCustomColor:has(input[type=radio]:checked) {
        border-radius: 50%;
        box-shadow: 0 0 0 2px var(--textColor)
    }

    .CalendarRoutineBuilderHeader {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px
    }

    .CalendarRoutineSegments {
        display: grid;
        gap: 9px;
        max-height: 310px;
        overflow: auto
    }

    .CalendarRoutineSegment {
        display: grid;
        grid-template-columns: minmax(120px,1.4fr) 88px 130px 130px 105px 105px 58px 68px 30px;
        align-items: end;
        gap: 7px;
        padding: 10px;
        border: 1px solid var(--mainPageBorderColor);
        border-radius: 10px;
        background: var(--cal-surface)
    }

    .CalendarRoutineSegment label {
        font-size: 10px
    }

    .CalendarRoutineSegment input,.CalendarRoutineSegment select {
        padding: 8px 6px
    }

    .CalendarRoutineSegment input[type=color] {
        height: 36px;
        padding: 3px
    }

    .CalendarRoutineSegmentRemove {
        align-self: center;
        border: 0;
        background: transparent;
        color: #e66b72;
        font-size: 20px;
        cursor: pointer
    }

    .CalendarMonthRoutine {
        background: color-mix(in srgb,var(--routine-color,#3887ff) 16%,transparent);
        color: var(--routine-color,#3887ff)
    }

    .CalendarWeekCell.has-routine {
        background: color-mix(in srgb,var(--routine-color,#3887ff) var(--routine-opacity,18%),transparent);
        border-left-color: var(--routine-color,#3887ff)
    }

    @media(max-width:700px) {
        .CalendarRoutineSegment {
            grid-template-columns: 1fr 70px 90px
        }

        .CalendarRoutineSegmentRemove {
            grid-column: 3
        }

        .CalendarRoutineTime {
            grid-row: auto
        }

    }

    .CalendarWeekGrid {
        position: relative
    }

    .CalendarCurrentTimeLine {
        position: absolute;
        left: 68px;
        right: 0;
        z-index: 4;
        height: 2px;
        background: #ef5b62;
        box-shadow: 0 0 8px rgba(239,91,98,.45);
        pointer-events: none
    }

    .CalendarCurrentTimeLine::before {
        content: "";
        position: absolute;
        left: -4px;
        top: -3px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #ef5b62
    }

    .CalendarCurrentTimeLine span {
        position: absolute;
        left: -7px;
        top: 50%;
        transform: translate(-100%,-50%);
        padding: 2px 4px;
        border-radius: 4px;
        background: #ef5b62;
        color: #fff;
        font-size: 9px;
        font-weight: 750
    }

    .CalendarRoutineChip {
        cursor: pointer
    }

    .CalendarRoutineChip:focus-visible {
        outline: 2px solid var(--cal-blue);
        outline-offset: 2px
    }

    #CalendarRoutineDialog {
        width: min(1200px,calc(100% - 32px))
    }

    .CalendarAnnualAssignmentsContent {
        display: grid;
        gap: 18px;
        padding: 24px
    }

    .CalendarAnnualAssignmentsList {
        display: grid;
        gap: 8px
    }

    .CalendarAnnualAssignmentRow {
        display: grid;
        grid-template-columns: 58px minmax(0,1fr) auto auto;
        align-items: center;
        gap: 10px;
        padding: 12px;
        border: 1px solid var(--mainPageBorderColor);
        border-radius: 10px;
        background: var(--cal-surface)
    }

    .CalendarAnnualAssignmentRow time {
        font-weight: 750;
        color: #3887ff
    }

    .CalendarAnnualAssignmentRow div {
        display: grid;
        gap: 2px
    }

    .CalendarAnnualAssignmentRow small,.CalendarAnnualAssignmentRow span {
        color: var(--paraphColor);
        font-size: 11px
    }

    .CalendarAnnualAssignmentRow>button {
        border: 1px solid var(--mainPageBorderColor);
        border-radius: 7px;
        padding: 7px 9px;
        background: transparent;
        color: var(--textColor);
        cursor: pointer
    }

    .CalendarAnnualAssignmentRow>button[data-delete] {
        color: #e66b72
    }

    .CalendarYearDay.is-holiday {
        background: color-mix(in srgb,#38a169 26%,transparent)
    }

    .CalendarYearDay.is-holiday strong {
        background: #2f855a
    }

    .CalendarYearDay.is-holiday span {
        color: color-mix(in srgb,#38a169 75%,var(--textColor));
        font-weight: 750
    }

    .CalendarYearMonth h3 {
        background: color-mix(in srgb,var(--cal-blue) 14%,var(--mainPageHeaderBgColor));
        border-bottom-color: color-mix(in srgb,var(--cal-blue) 28%,var(--mainPageBorderColor));
        color: var(--textColor)
    }

    .CalendarYearDay strong {
        background: color-mix(in srgb,var(--cal-blue) 10%,var(--mainPageHeaderBgColor));
        color: var(--paraphColor)
    }

    .CalendarYearDay.is-weekend {
        background: color-mix(in srgb,var(--cal-blue) 7%,transparent)
    }

    .CalendarYearDay.is-weekend strong {
        background: color-mix(in srgb,var(--cal-blue) 17%,var(--mainPageHeaderBgColor));
    }

    .CalendarYearDay.is-holiday {
        background: color-mix(in srgb,#38a169 26%,transparent)
    }

    .CalendarYearDay.is-holiday strong {
        background: #2f855a;
        color: #fff
    }

    .CalendarYearDay.has-phase {
        background: color-mix(in srgb,var(--phase-color) 28%,transparent)
    }

    .CalendarYearDay.has-phase strong {
        background: color-mix(in srgb,var(--phase-color) 70%,var(--mainPageHeaderBgColor));
        color: #fff
    }

    .CalendarYearDay.is-holiday {
        background: color-mix(in srgb,#38a169 26%,transparent)
    }

    .CalendarYearDay.is-holiday strong {
        background: #2f855a;
        color: #fff
    }

    .CalendarYearDay.is-today {
        z-index: 1;
        background: color-mix(in srgb,var(--cal-blue) 24%,var(--cal-surface));
        box-shadow: inset 0 0 0 2px var(--cal-blue),0 0 12px color-mix(in srgb,var(--cal-blue) 35%,transparent);
        outline: 0
    }

    .CalendarYearDay.is-today strong {
        background: var(--cal-blue);
        color: #fff;
        font-weight: 800
    }

    .CalendarYearDay.is-today span {
        color: var(--textColor);
        font-weight: 800
    }

    .CalendarMonthRoutine {
        border-left: 3px solid var(--routine-color,#3887ff);
        background: color-mix(in srgb,var(--routine-color,#3887ff) var(--routine-opacity,18%),transparent);
        color: color-mix(in srgb,var(--routine-color,#3887ff) 78%,var(--textColor))
    }

    .CalendarWeekDayHead small {
        background: color-mix(in srgb,var(--routine-color,#3887ff) var(--routine-opacity,18%),transparent);
        color: color-mix(in srgb,var(--routine-color,#3887ff) 78%,var(--textColor))
    }

    .CalendarWeekView {
        --calendar-week-header-height: 68px;
        --calendar-week-frame: 2px;
        --calendar-week-hour-height: calc((90vh - var(--calendar-week-header-height) - var(--calendar-week-frame))/24)
    }

    .CalendarWeekScroller {
        box-sizing: border-box;
        height: 80vh;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden
    }

    .CalendarWeekGrid {
        align-content: stretch;
        box-sizing: border-box;
        height: 100%;
        min-height: 0;
        overflow: hidden;
        grid-template-rows: 68px repeat(24,calc((100% - 68px)/24));
        grid-auto-rows: 0
    }

    .CalendarWeekCell {
        position: relative
    }

    .CalendarTimeRangePreview {
        position: absolute;
        z-index: 5;
        right: 1px;
        left: 1px;
        min-height: 2px;
        border: 1px solid var(--cal-blue);
        border-radius: 3px;
        background: color-mix(in srgb,var(--cal-blue) 32%,transparent);
        pointer-events: none
    }

    .CalendarYearDay.is-range-selecting,
    .CalendarWeekDayHead.is-range-selecting,
    .CalendarWeekCell.is-range-selecting {
        outline: 2px solid var(--cal-blue);
        outline-offset: -2px;
        background-color: color-mix(in srgb,var(--cal-blue) 18%,transparent)
    }

    .CalendarWeekTime,.CalendarWeekCell {
        align-self: stretch;
        box-sizing: border-box;
        height: 100%;
        min-height: 0;
        max-height: none
    }

    .CalendarWeekCell {
        position: relative
    }

    .CalendarWeekCell.is-today {
        background: color-mix(in srgb,var(--cal-blue) 3%,transparent);
        border-right: 1px solid color-mix(in srgb,var(--cal-blue) 16%,var(--mainPageBorderColor));
        border-left-color: color-mix(in srgb,var(--cal-blue) 20%,var(--mainPageBorderColor))
    }

    .CalendarWeekDayHead.is-today strong {
        background: color-mix(in srgb,var(--cal-blue) 10%,transparent);
        color: color-mix(in srgb,var(--cal-blue) 70%,var(--textColor));
        box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--cal-blue) 20%,transparent)
    }

    .CalendarWeekRoutineSlice {
        position: absolute;
        right: 0;
        left: 0;
        z-index: 0;
        box-sizing: border-box;
        border-left: 3px solid;
        pointer-events: none
    }

    .CalendarWeekTime {
        position: relative;
        overflow: visible;
        padding-top: 0;
        line-height: var(--calendar-week-hour-height);
        user-select: none
    }

    .CalendarWeekHourLabel {
        display: block
    }

    .CalendarWeekSequenceStart {
        position: absolute;
        z-index: 3;
        right: 7px;
        padding: 1px 3px;
        border-radius: 3px;
        background: var(--mainPageBodyBgColor);
        color: var(--routine-color,#3887ff);
        font-size: .68rem;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
        transform: translateY(-50%);
        pointer-events: none
    }

    .CalendarWeekAssignment {
        min-height: 4px;
        padding-block: 1px
    }

    @media(max-width:1100px) {
        .CalendarSidePanel {
            position: static
        }

    }

    @media(max-width:760px) {
        .CalendarContentArea {
            padding: 24px 16px
        }

        .CalendarHero {
            align-items: flex-start;
            flex-direction: column
        }

        .CalendarHero .CalendarSecondaryButton {
            display: none
        }

        .CalendarToolbar {
            flex-wrap: wrap
        }

        .CalendarToolbar h2 {
            font-size: 18px
        }

        .CalendarToolbarSpacer {
            display: none
        }

        .CalendarPrimaryButton {
            margin-left: auto
        }

        .CalendarViewTabs {
            display: flex;
            left: 0;
            width: 100%;
            box-sizing: border-box
        }

        .CalendarViewTabs button {
            flex: 1;
            padding-inline: 7px
        }

        .CalendarMonthDay {
            min-height: 85px;
            padding: 5px
        }

        .CalendarMonthPhase {
            font-size: 0;
            padding: 3px
        }

        .CalendarMonthRoutine {
            font-size: 8px
        }

        .CalendarMonthWeekdays {
            font-size: 9px
        }

        .CalendarFormRow {
            grid-template-columns: 1fr
        }

    }

    @media(max-width:460px) {
        .CalendarToolbar .CalendarPrimaryButton {
            width: 100%;
            margin: 6px 0 0
        }

        .CalendarMonthDay {
            min-height: 70px
        }

        .CalendarMonthDay time {
            width: 23px;
            height: 23px
        }

        .CalendarMonthRoutine {
            overflow: hidden;
            width: 6px;
            height: 6px;
            padding: 0;
            border-radius: 50%;
            font-size: 0
        }

    }

}