@import url('https://fonts.googleapis.com/css2?family=Bad+Script&family=Oranienbaum&display=swap');

:root {
    --cream: #f7f1e6;
    --cream-deep: #eee3d1;
    --ivory: #fffaf1;
    --paper: #fbf7ed;
    --blue-50: #eef5f8;
    --blue-100: #dbeaf1;
    --blue-200: #b8d0df;
    --blue-300: #8fb0c7;
    --blue-400: #5f86a6;
    --ink: #3e4146;
    --muted: #77716c;
    --line: rgba(78, 91, 102, 0.22);
    --shadow: 0 20px 55px rgba(62, 65, 70, 0.12);
    --soft-shadow: 0 8px 22px rgba(72, 88, 101, 0.10);
    --serif: 'Oranienbaum', 'Times New Roman', Times, serif;
    --sans: 'Oranienbaum', 'Times New Roman', Times, serif;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: #dce8ef;
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--ink);
    font-family: var(--serif);
    background:
        radial-gradient(circle at 15% 12%, rgba(143, 176, 199, 0.24), transparent 30%),
        radial-gradient(circle at 84% 88%, rgba(143, 176, 199, 0.22), transparent 34%),
        linear-gradient(135deg, #dbe9ef 0%, #f4efe5 42%, #d8e8ef 100%);
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.42;
    background-image:
        radial-gradient(rgba(68, 84, 96, 0.08) 0.7px, transparent 0.7px),
        radial-gradient(rgba(255, 255, 255, 0.35) 0.8px, transparent 0.8px);
    background-size: 7px 7px, 11px 11px;
    mix-blend-mode: multiply;
}

a {
    color: inherit;
    text-decoration: none;
}

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

.page-frame {
    position: relative;
    z-index: 1;
    width: min(1880px, calc(100vw - 24px));
    min-height: calc(100vh - 24px);
    margin: 12px auto;
    display: grid;
    grid-template-columns: minmax(300px, 25%) minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid rgba(80, 94, 105, 0.25);
    outline: 8px solid rgba(255, 250, 241, 0.65);
    background:
        linear-gradient(90deg, rgba(252, 248, 239, 0.96), rgba(250, 246, 237, 0.94)),
        radial-gradient(circle at 20% 20%, rgba(95, 134, 166, 0.08), transparent 42%);
    box-shadow: var(--shadow);
}

.page-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(62, 65, 70, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(62, 65, 70, 0.025) 1px, transparent 1px);
    background-size: 44px 44px;
    opacity: 0.22;
}

.panel-card {
    background:
        linear-gradient(135deg, rgba(255, 252, 245, 0.86), rgba(246, 241, 230, 0.80)),
        radial-gradient(circle at 80% 12%, rgba(170, 198, 214, 0.16), transparent 42%);
    border: 1px solid var(--line);
    box-shadow: var(--soft-shadow);
}

.sidebar {
    position: relative;
    z-index: 2;
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 42px 28px 24px;
    border-right: 1px solid rgba(80, 94, 105, 0.25);
    background:
        linear-gradient(180deg, rgba(249, 245, 235, 0.94), rgba(247, 241, 229, 0.88)),
        radial-gradient(circle at 10% 8%, rgba(95, 134, 166, 0.14), transparent 28%);
}

.brand {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 52px;
    margin-bottom: 44px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.brand-star {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    color: #a79578;
    font-size: 34px;
}

.brand p,
.brand strong {
    display: block;
    margin: 0;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 600;
}

.daily-card {
    position: relative;
    flex: 1;
    min-height: 760px;
    padding: 34px 32px;
    border-radius: 18px;
}

.ornament-corner {
    position: absolute;
    width: 42px;
    height: 42px;
    top: 14px;
}

.ornament-corner-left {
    left: 14px;
}

.ornament-corner-right {
    right: 14px;
}

.ornament-corner-bottom-left {
    left: 14px;
    bottom: 14px;
    top: auto;
    transform: rotate(-90deg);
}

.ornament-corner-bottom-right {
    right: 14px;
    bottom: 14px;
    top: auto;
    transform: rotate(90deg);
}

.daily-card h1,
.hero-copy h2 {
    margin: 0;
    color: #3d3d3f;
    font-weight: 400;
    letter-spacing: 0.02em;
}

.daily-card h1 {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
    font-size: clamp(34px, 2.6vw, 48px);
    text-align: center;
}

.daily-card h1::before,
.daily-card h1::after {
    content: '✧';
    color: #b8a989;
    font-size: 18px;
}

.date-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    align-items: center;
    min-height: 162px;
    padding: 22px 30px;
    overflow: hidden;
    border: 1px solid rgba(95, 134, 166, 0.38);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(238, 245, 248, 0.78), rgba(250, 247, 239, 0.76)),
        repeating-linear-gradient(0deg, rgba(95, 134, 166, 0.06), rgba(95, 134, 166, 0.06) 1px, transparent 1px, transparent 12px);
}

.date-card::before {
    content: '';
    position: absolute;
    inset: 9px;
    border: 1px solid rgba(95, 134, 166, 0.38);
    border-radius: 12px;
    pointer-events: none;
}

.date-text,
.date-month {
    position: relative;
    z-index: 1;
}

.date-text span,
.date-month span,
.date-month small {
    display: block;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.date-text span {
    margin-bottom: -6px;
    color: #62656b;
    font-size: 15px;
    font-weight: 600;
}

.date-text strong {
    color: var(--blue-400);
    font-size: clamp(68px, 7vw, 96px);
    line-height: 0.95;
    font-weight: 400;
}

.date-month span {
    color: #3f4348;
    font-size: 21px;
}

.date-month small {
    margin-top: 10px;
    color: #62656b;
    font-size: 17px;
}

.date-botanical {
    position: absolute;
    right: -483px;
    color: rgba(66, 96, 123, 0.46);
    font-size: 82px;
    transform: scale(0.1)rotate(16deg);
    z-index: 1;
}

.today-list {
    margin-top: 30px;
}

.today-list h2,
.notes-box h2 {
    margin: 0 0 12px;
    color: #5f6266;
    font-size: 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.task-row {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 31px;
    color: #4f5357;
    border-bottom: 1px dotted rgba(80, 94, 105, 0.28);
    cursor: pointer;
}

.task-row input {
    width: 17px;
    height: 17px;
    margin: 0;
    appearance: none;
    border: 1.5px solid rgba(83, 110, 130, 0.68);
    background: rgba(255, 252, 245, 0.82);
}

.task-row input:checked {
    background:
        linear-gradient(135deg, transparent 45%, var(--blue-400) 46% 56%, transparent 57%),
        linear-gradient(45deg, transparent 42%, var(--blue-400) 43% 54%, transparent 55%);
}

.task-row span {
    font-size: 17px;
}

.sidebar-quote {
    position: relative;
    min-height: 122px;
    margin: 34px 0 30px;
    padding: 24px 32px;
    border: 1px solid rgba(199, 185, 158, 0.32);
    background:
        linear-gradient(135deg, rgba(239, 230, 213, 0.72), rgba(249, 246, 239, 0.60)),
        radial-gradient(circle at 16% 20%, rgba(255, 255, 255, 0.66), transparent 36%);
    transform: rotate(-1.5deg);
}

.sidebar-quote p {
    margin: 0;
    color: #7b7064;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(20px, 2vw, 27px);
    line-height: 1.6;
}

.sidebar-quote span {
    position: absolute;
    right: 20px;
    bottom: 10px;
    color: var(--blue-400);
    font-size: 48px;
    opacity: 0.78;
}

.notes-box {
    margin-top: 10px;
}

.paper-note {
    min-height: 240px;
    padding: 24px;
    border: 1px solid rgba(95, 134, 166, 0.26);
    border-radius: 10px;
    background:
        linear-gradient(rgba(255, 255, 255, 0.02) 31px, rgba(95, 134, 166, 0.18) 32px),
        radial-gradient(circle at 88% 72%, rgba(95, 134, 166, 0.17), transparent 32%),
        rgba(255, 252, 245, 0.56);
    background-size: 100% 32px, auto, auto;
}

.paper-note::after {
    content: '❦';
    display: block;
    margin-top: 78px;
    margin-left: auto;
    width: max-content;
    color: rgba(95, 134, 166, 0.58);
    font-size: 72px;
    transform: rotate(-9deg);
}

.paper-note p {
    margin: 0;
    color: rgba(62, 65, 70, 0.48);
    font-size: 15px;
}

.paper-note .upcoming-reminder + .upcoming-reminder {
    margin-top: 14px;
}

.upcoming-reminder {
    display: grid;
    gap: 4px;
}

.upcoming-reminder span,
.upcoming-reminder em {
    color: rgba(62, 65, 70, 0.58);
    font-family: var(--sans);
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.upcoming-reminder strong {
    color: #3e4146;
    font-size: 16px;
}

.sidebar-footer {
    margin-top: 26px;
    color: #77716c;
    font-size: 12px;
}

.main-area {
    position: relative;
    z-index: 2;
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 0 30px 20px;
}

.top-nav {
    min-height: 118px;
    display: flex;
    align-items: center;
    gap: clamp(32px, 4vw, 86px);
    padding: 0 36px;
    border-bottom: 1px solid rgba(80, 94, 105, 0.22);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.top-nav a {
    position: relative;
    color: #373d43;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

.top-nav .nav-link {
    position: relative;
    padding: 0;
    border: 0;
    color: #373d43;
    background: transparent;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}

.top-nav a.active,
.top-nav .nav-link.active {
    color: var(--blue-400);
}

.top-nav a.active::after,
.top-nav .nav-link.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -20px;
    height: 1px;
    background: var(--blue-300);
}

.top-nav a.active::before,
.top-nav .nav-link.active::before {
    content: '';
    position: absolute;
    left: calc(50% - 3px);
    bottom: -23px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blue-400);
}

.nav-icons {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 34px;
}

.nav-icons span {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
}

.nav-icons img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 5px rgba(47, 78, 103, 0.08));
}

.nav-icons .moon-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
}

.moon-icon img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
}

.hero-section {
    position: relative;
    display: block;
    padding: 48px 48px 24px;
}

.hero-title-row {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(220px, 420px);
    align-items: center;
    gap: clamp(24px, 4vw, 70px);
}

.hero-copy h2 {
    font-size: clamp(48px, 5.2vw, 84px);
    line-height: 1.05;
}

.hero-title-picture {
    width: 100%;
    max-height: 190px;
    object-fit: cover;
    object-position: center;
    opacity: 0.82;
    filter: saturate(0.82);
    mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 100%);
}

.title-rule {
    position: relative;
    width: min(700px, 100%);
    height: 1px;
    margin: 20px 0 22px;
    background: var(--blue-300);
}

.title-rule::before,
.title-rule::after {
    content: '✦';
    position: absolute;
    top: 50%;
    color: var(--blue-400);
    font-size: 15px;
    transform: translateY(-50%);
}

.title-rule::before {
    left: -3px;
}

.title-rule::after {
    right: -3px;
}

.hero-copy p {
    max-width: 520px;
    margin: 0;
    color: #54565a;
    font-size: 18px;
    line-height: 1.45;
}

.calendar-section {
    position: relative;
    padding: 0 16px 0;
}

.week-scroller {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 84px) / 7);
    gap: 14px;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    padding: 0 0 28px;
    scrollbar-width: thin;
    scrollbar-color: rgba(95, 134, 166, 0.45) transparent;
    -webkit-overflow-scrolling: touch;
}

.week-scroller::-webkit-scrollbar {
    height: 8px;
}

.week-scroller::-webkit-scrollbar-track {
    background: transparent;
}

.week-scroller::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(95, 134, 166, 0.45);
}

.day-card {
    position: relative;
    height: clamp(560px, calc(100vh - 290px), 700px);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 24px 16px 18px;
    border: 1px solid rgba(80, 94, 105, 0.20);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 252, 245, 0.82), rgba(246, 241, 230, 0.76)),
        radial-gradient(circle at 50% 102%, rgba(95, 134, 166, 0.12), transparent 38%);
}

.day-card.is-today {
    border-color: rgba(95, 134, 166, 0.82);
    box-shadow: inset 0 0 0 1px rgba(95, 134, 166, 0.24), 0 12px 26px rgba(71, 100, 124, 0.10);
}

.day-header {
    position: relative;
    z-index: 2;
    text-align: center;
}

.weekday,
.month,
.today-marker {
    display: block;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.weekday {
    color: #3f4348;
    font-size: 18px;
    font-weight: 700;
}

.day-number {
    display: inline-grid;
    place-items: center;
    min-width: 86px;
    min-height: 86px;
    margin: 16px 0 6px;
    color: var(--blue-400);
    font-size: clamp(42px, 3.3vw, 64px);
    line-height: 1;
    background:
        linear-gradient(rgba(255, 252, 245, 0.06), rgba(255, 252, 245, 0.06)),
        url('/static/images/decor/date.png') center / 100% 100% no-repeat;
    border: 0.5px solid;
    border-radius: 16px;
}

.month {
    color: #3f4348;
    font-size: 16px;
}

.today-marker {
    margin-top: 10px;
    color: var(--blue-400);
    font-size: 12px;
    letter-spacing: 0.08em;
}

.events-list {
    position: relative;
    z-index: 3;
    display: grid;
    align-content: start;
    gap: 12px;
    flex: 1;
    min-height: 0;
    margin-top: 22px;
    overflow-y: auto;
    padding-right: 6px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(95, 134, 166, 0.34) rgba(255, 252, 245, 0.22);
}

.events-list::-webkit-scrollbar {
    width: 6px;
}

.events-list::-webkit-scrollbar-track {
    background: rgba(255, 252, 245, 0.18);
}

.events-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(95, 134, 166, 0.34);
}

.event-card {
    position: relative;
    min-height: 66px;
    padding: 12px 10px 12px 16px;
    overflow: hidden;
    border: 1px solid rgba(80, 94, 105, 0.18);
    border-left: 5px solid var(--group-color, rgba(95, 134, 166, 0.52));
    border-radius: 6px;
    background: rgba(255, 252, 245, 0.86);
    box-shadow: 0 3px 10px rgba(72, 88, 101, 0.05);
}

.event-card.priority-high,
.daily-event-row.priority-high {
    box-shadow: inset 0 0 0 1px rgba(184, 132, 143, 0.35);
}

.event-card.priority-low,
.daily-event-row.priority-low {
    opacity: 0.82;
}

.group-badge {
    display: inline-flex;
    width: max-content;
    margin-top: 7px;
    padding: 4px 7px;
    border: 1px solid color-mix(in srgb, var(--group-color, #789dbb) 60%, transparent);
    border-radius: 999px;
    color: #40566b;
    background: color-mix(in srgb, var(--group-color, #789dbb) 18%, #fffaf1);
    font-family: var(--sans);
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.event-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: rgba(95, 134, 166, 0.78);
}

.event-card time {
    display: block;
    margin-bottom: 5px;
    color: #4d6072;
    font-size: 14px;
    line-height: 1.2;
}

.event-card p {
    margin: 0;
    color: #3f4348;
    font-size: 15px;
    line-height: 1.28;
}

.day-art {
    display: none;
}

.calendar-random-art {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(0.72) contrast(0.9);
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 10%, #000 20%, #000 80%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(180deg, transparent 10%, #000 66%, #000 80%, transparent 130%);
    mask-composite: intersect;
    top: 7%;
}

.day-card::after {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
}

.art-wave {
    background:
        radial-gradient(90px 36px at 20% 80%, rgba(64, 105, 139, 0.38) 0 48%, transparent 50%),
        radial-gradient(100px 42px at 56% 77%, rgba(96, 139, 169, 0.34) 0 48%, transparent 50%),
        radial-gradient(120px 50px at 91% 78%, rgba(64, 105, 139, 0.24) 0 48%, transparent 50%),
        linear-gradient(180deg, transparent, rgba(184, 208, 223, 0.34));
}

.art-flowers::before,
.art-sprout::before,
.art-lotus::before,
.art-paper::before {
    position: absolute;
    color: rgba(61, 103, 137, 0.48);
    font-size: 118px;
    line-height: 1;
}

.art-flowers::before {
    content: '✿';
    right: 18px;
    bottom: 12px;
}

.art-sprout::before {
    content: '❦';
    right: 18px;
    bottom: 8px;
    transform: rotate(-16deg);
}

.art-lotus::before {
    content: '✾';
    right: 20px;
    bottom: 14px;
}

.art-mountains {
    background:
        linear-gradient(145deg, transparent 48%, rgba(77, 117, 149, 0.35) 49% 62%, transparent 63%) 0 44px / 120px 120px,
        linear-gradient(35deg, transparent 50%, rgba(126, 164, 188, 0.35) 51% 62%, transparent 63%) 45px 48px / 130px 120px,
        radial-gradient(circle at 50% 35%, rgba(95, 134, 166, 0.25), transparent 11px),
        linear-gradient(180deg, transparent, rgba(184, 208, 223, 0.26));
}

.art-paper::before {
    content: '✾';
    left: 14px;
    bottom: 12px;
    font-size: 90px;
}

.art-paper::after {
    content: '';
    position: absolute;
    right: -4px;
    bottom: 20px;
    width: 150px;
    height: 130px;
    background:
        repeating-linear-gradient(8deg, transparent 0 11px, rgba(74, 64, 55, 0.18) 12px 13px),
        rgba(231, 222, 203, 0.55);
    transform: rotate(-9deg);
}

.art-whale::before {
    content: '◜';
    position: absolute;
    right: 14px;
    bottom: 14px;
    color: rgba(44, 84, 118, 0.50);
    font-family: var(--serif);
    font-size: 176px;
    line-height: 0.7;
    transform: rotate(9deg);
}

.art-whale::after {
    content: '';
    position: absolute;
    right: 34px;
    bottom: 46px;
    width: 88px;
    height: 44px;
    border-radius: 90% 40% 45% 80%;
    background: rgba(61, 103, 137, 0.36);
    transform: rotate(-10deg);
}

.scroll-btn {
    position: absolute;
    z-index: 4;
    top: 42%;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(80, 94, 105, 0.18);
    border-radius: 50%;
    color: #42505c;
    background: rgba(255, 252, 245, 0.82);
    box-shadow: 0 8px 22px rgba(72, 88, 101, 0.12);
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
}

.scroll-prev {
    left: -44px;
}

.scroll-next {
    right: -44px;
}

.bottom-panel {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1.42fr;
    min-height: 188px;
    margin: 28px 16px 24px;
    border-radius: 12px;
    overflow: hidden;
}

.bottom-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 252, 245, 0.76), rgba(255, 252, 245, 0.56));
}

.bottom-cell {
    position: relative;
    z-index: 1;
    padding: 28px 34px;
}

.bottom-cell + .bottom-cell {
    border-left: 1px solid rgba(80, 94, 105, 0.24);
}

.quote-mark {
    display: block;
    height: 28px;
    color: rgba(95, 134, 166, 0.36);
    font-size: 68px;
    line-height: 0.72;
}

.quote-cell p {
    max-width: 350px;
    margin: 8px 0 18px;
    color: #3f4348;
    font-style: italic;
    font-size: 19px;
    line-height: 1.48;
}

.mini-line {
    width: 230px;
    height: 1px;
    background: var(--blue-300);
}

.mini-line::after {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    margin-left: auto;
    border-radius: 50%;
    background: var(--blue-400);
    transform: translateY(-2.5px);
}

.bottom-cell h3 {
    margin: 0 0 24px;
    color: var(--blue-400);
    font-size: 15px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.bottom-cell p {
    margin: 0;
    color: #54565a;
    line-height: 1.5;
}

.editable-focus {
    min-height: 84px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    outline: none;
    white-space: pre-wrap;
}

.editable-focus:hover,
.editable-focus:focus {
    border-color: rgba(95, 134, 166, 0.28);
    background: rgba(255, 252, 245, 0.52);
    box-shadow: inset 0 0 0 1px rgba(255, 252, 245, 0.62);
}

.progress-cell {
    overflow: hidden;
}

.progress-picture {
    position: absolute;
    right: -6px;
    bottom: -34px;
    width: min(190px, 36%);
    pointer-events: none;
    opacity: 0.68;
    filter: saturate(0.78);
}

.progress-content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    align-items: center;
    gap: 28px;
}

.progress-ring {
    --size: 96px;
    width: var(--size);
    height: var(--size);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
        radial-gradient(circle, var(--paper) 0 55%, transparent 56%),
        conic-gradient(var(--blue-400) calc(var(--progress) * 1%), rgba(184, 208, 223, 0.55) 0);
    box-shadow: inset 0 0 0 1px rgba(80, 94, 105, 0.12);
}

.progress-ring span {
    font-size: 22px;
}

.progress-content strong {
    display: block;
    margin-bottom: 4px;
    color: #3f4348;
    font-size: 18px;
}

.progress-content a {
    display: inline-block;
    margin-top: 22px;
    color: var(--blue-400);
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.main-footer {
    display: flex;
    justify-content: flex-end;
    gap: 24px;
    margin: auto 16px 0;
    padding-top: 14px;
    border-top: 1px solid rgba(80, 94, 105, 0.24);
    color: #54565a;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

@media (max-width: 1260px) {
    .page-frame {
        grid-template-columns: 330px minmax(0, 1fr);
    }

    .top-nav {
        gap: 24px;
        padding-inline: 24px;
    }

    .nav-icons {
        gap: 18px;
    }

    .hero-section {
        padding-inline: 32px;
    }

    .hero-title-row {
        grid-template-columns: 1fr;
    }

    .hero-title-picture {
        max-height: 150px;
        mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
    }

    .bottom-panel {
        grid-template-columns: 1fr;
    }

    .bottom-cell + .bottom-cell {
        border-top: 1px solid rgba(80, 94, 105, 0.24);
        border-left: 0;
    }
}

@media (max-width: 900px) {
    .page-frame {
        width: min(100vw - 16px, 760px);
        grid-template-columns: 1fr;
    }

    .sidebar {
        border-right: 0;
        border-bottom: 1px solid rgba(80, 94, 105, 0.22);
    }

    .daily-card {
        min-height: auto;
    }

    .top-nav {
        min-height: auto;
        justify-content: flex-start;
        overflow-x: auto;
        padding: 26px 8px 24px;
    }

    .nav-icons {
        display: none;
    }

    .hero-section {
        padding: 36px 8px 24px;
    }

    .calendar-section,
    .bottom-panel,
    .main-footer {
        margin-inline: 0;
    }

    .week-scroller {
        grid-auto-columns: minmax(230px, 76vw);
        padding-inline: 6px;
    }

    .scroll-btn {
        display: none;
    }

    .bottom-panel {
        margin-top: 16px;
    }
}

@media (max-width: 560px) {
    .sidebar,
    .main-area {
        padding-inline: 16px;
    }

    .daily-card {
        padding-inline: 20px;
    }

    .date-card {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .bottom-cell {
        padding-inline: 22px;
    }

    .progress-content {
        grid-template-columns: 1fr;
    }
}

/* Fix: allow the full planner page to scroll vertically on smaller laptop/fullscreen heights. */
html,
body {
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.page-frame {
    height: auto;
    min-height: calc(100vh - 24px);
    overflow: visible;
    align-items: start;
}

.sidebar,
.main-area {
    min-height: calc(100vh - 24px);
}

@media (max-width: 900px) {
    .sidebar,
    .main-area {
        min-height: auto;
    }
}

/* Today panel: events generated from the calendar, with notes and recurring counters. */
.today-events-scroll {
    max-height: clamp(230px, 30vh, 390px);
    overflow-y: auto;
    padding-right: 8px;
    border-top: 1px dotted rgba(80, 94, 105, 0.22);
    border-bottom: 1px dotted rgba(80, 94, 105, 0.22);
    scrollbar-width: thin;
    scrollbar-color: rgba(95, 134, 166, 0.45) transparent;
}

.today-events-scroll::-webkit-scrollbar {
    width: 7px;
}

.today-events-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.today-events-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(95, 134, 166, 0.45);
}

.daily-event-row {
    align-items: start;
    min-height: auto;
    padding: 12px 0;
}

.daily-event-content {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.task-row .daily-event-content {
    font-size: unset;
}

.daily-event-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.task-row .daily-event-meta,
.task-row .daily-event-meta time,
.task-row .daily-event-meta em,
.task-row .daily-event-content strong,
.task-row .daily-event-content small {
    font-size: unset;
}

.daily-event-meta time {
    color: #4d6072;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.daily-event-meta em,
.regular-badge {
    display: inline-flex;
    align-items: center;
    width: max-content;
    border: 1px solid rgba(95, 134, 166, 0.32);
    border-radius: 999px;
    color: #4d6072;
    background: rgba(238, 245, 248, 0.72);
    font-family: var(--sans);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.daily-event-meta em {
    padding: 5px 8px;
}

.daily-event-content strong {
    color: #3f4348;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.25;
}

.daily-event-content small {
    color: rgba(62, 65, 70, 0.68);
    font-size: 14px;
    line-height: 1.36;
}

.empty-state {
    margin: 14px 0 0;
    color: rgba(62, 65, 70, 0.55);
    font-size: 15px;
    font-style: italic;
}

.event-card.is-regular {
    background:
        linear-gradient(135deg, rgba(238, 245, 248, 0.76), rgba(255, 252, 245, 0.64));
}

.event-card.is-regular::before {
    background: rgba(72, 112, 144, 0.88);
}

.regular-badge {
    margin-top: 9px;
    padding: 6px 8px;
}

/* Selected-day controls in the left panel. */
.day-switcher {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 10px;
    margin: -10px 0 18px;
}

.today-return-btn {
    grid-column: 1 / -1;
    justify-self: center;
    min-height: 30px;
    padding: 0 14px;
    border: 1px solid rgba(95, 134, 166, 0.34);
    border-radius: 999px;
    color: #42505c;
    background: rgba(255, 252, 245, 0.72);
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.today-return-btn:hover {
    background: rgba(238, 245, 248, 0.88);
}

.day-switcher span {
    display: block;
    color: rgba(62, 65, 70, 0.64);
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
}

.day-switch-btn {
    width: 38px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(95, 134, 166, 0.34);
    border-radius: 999px;
    color: #42505c;
    background: rgba(255, 252, 245, 0.72);
    box-shadow: 0 5px 14px rgba(72, 88, 101, 0.07);
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
}

.day-switch-btn:hover:not(:disabled) {
    background: rgba(238, 245, 248, 0.88);
}

.day-switch-btn:disabled {
    cursor: default;
    opacity: 0.35;
}

/* Calendar day selection. */
.day-card {
    cursor: pointer;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.day-card:hover {
    transform: translateY(-2px);
    border-color: rgba(95, 134, 166, 0.42);
}

.day-card.is-selected {
    border-color: rgba(95, 134, 166, 0.95);
    background:
        linear-gradient(180deg, rgba(238, 245, 248, 0.92), rgba(255, 252, 245, 0.80)),
        radial-gradient(circle at 50% 102%, rgba(95, 134, 166, 0.18), transparent 38%);
    box-shadow: inset 0 0 0 2px rgba(95, 134, 166, 0.30), 0 14px 28px rgba(71, 100, 124, 0.14);
}

.day-card.is-selected .day-number {
    color: #315f84;
    background:
        linear-gradient(rgba(184, 208, 223, 0.18), rgba(184, 208, 223, 0.18)),
        url('/static/images/decor/date.png') center / 100% 100% no-repeat;
}

.selected-marker {
    display: inline-flex;
    width: max-content;
    margin: 9px auto 0;
    padding: 5px 9px;
    border: 1px solid rgba(95, 134, 166, 0.34);
    border-radius: 999px;
    color: #4d6072;
    background: rgba(255, 252, 245, 0.64);
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.10em;
    line-height: 1;
    text-transform: uppercase;
}

.selected-marker[hidden] {
    display: none;
}

/* ===== CRUD: добавление, редактирование и удаление задач ===== */
body.modal-open {
    overflow: hidden;
}

.daily-heading-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.daily-heading-row h1 {
    margin-bottom: 0;
}

.soft-action-btn,
.day-add-btn,
.ghost-btn,
.save-btn,
.modal-close,
.row-actions button,
.calendar-event-actions button {
    font: inherit;
}

.soft-action-btn {
    flex: 0 0 auto;
    margin-top: 4px;
    padding: 8px 11px;
    border: 1px solid rgba(95, 134, 166, 0.34);
    border-radius: 999px;
    color: #41586d;
    background: rgba(255, 252, 245, 0.72);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(72, 88, 101, 0.06);
}

.soft-action-btn:hover,
.day-add-btn:hover,
.ghost-btn:hover,
.save-btn:hover,
.modal-close:hover,
.row-actions button:hover,
.calendar-event-actions button:hover {
    transform: translateY(-1px);
}

.day-add-btn {
    position: absolute;
    z-index: 5;
    top: 12px;
    right: 12px;
    padding: 6px 9px;
    border: 1px solid rgba(95, 134, 166, 0.34);
    border-radius: 999px;
    color: #41586d;
    background: rgba(255, 252, 245, 0.88);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    box-shadow: 0 8px 18px rgba(72, 88, 101, 0.12);
}

.day-card:hover .day-add-btn,
.day-card:focus-within .day-add-btn {
    opacity: 1;
    pointer-events: auto;
}

.event-card {
    padding-right: 42px;
}

.calendar-event-actions {
    position: absolute;
    z-index: 4;
    top: 7px;
    right: 7px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.event-card:hover .calendar-event-actions,
.event-card:focus-within .calendar-event-actions {
    opacity: 1;
    transform: translateY(0);
}

.calendar-event-actions button,
.row-actions button {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(95, 134, 166, 0.26);
    border-radius: 50%;
    color: #40566b;
    background: rgba(255, 252, 245, 0.9);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(72, 88, 101, 0.08);
}

.empty-card-state {
    position: relative;
    z-index: 1;
    margin: 20px 0 0;
    padding: 12px;
    border: 1px dashed rgba(95, 134, 166, 0.26);
    border-radius: 8px;
    color: rgba(63, 67, 72, 0.62);
    background: rgba(255, 252, 245, 0.48);
    font-size: 13px;
    text-align: center;
}

.daily-event-row.task-row {
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: start;
    padding: 8px 0;
}

.daily-event-row input {
    margin-top: 5px;
}

.daily-event-row input:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.row-actions {
    display: flex;
    gap: 5px;
    opacity: 0;
    transform: translateY(-1px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.daily-event-row:hover .row-actions,
.daily-event-row:focus-within .row-actions {
    opacity: 1;
    transform: translateY(0);
}

.daily-event-content {
    min-width: 0;
}

/* Reference-style left planner panel. */
:root {
    --reference-paper: #f7f0e4;
    --reference-paper-deep: #eee3d2;
    --reference-blue: #789dbb;
    --reference-blue-soft: rgba(120, 157, 187, 0.42);
    --reference-ink: #414349;
    --reference-caption: #6e6b67;
    --reference-serif: 'Oranienbaum', 'Times New Roman', Times, serif;
    --reference-hand: 'Bad Script', 'Oranienbaum', 'Times New Roman', Times, serif;
}

.sidebar {
    padding: 38px 22px 24px;
    background:
        radial-gradient(circle at 18% 8%, rgba(120, 157, 187, 0.08), transparent 28%),
        radial-gradient(circle at 82% 76%, rgba(188, 174, 145, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(251, 247, 238, 0.96), rgba(244, 236, 222, 0.94));
}

.sidebar::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.55;
    background-image:
        radial-gradient(rgba(98, 84, 62, 0.10) 0.45px, transparent 0.45px),
        radial-gradient(rgba(255, 255, 255, 0.60) 0.7px, transparent 0.7px);
    background-size: 5px 5px, 13px 13px;
    mix-blend-mode: multiply;
}

.brand {
    position: relative;
    z-index: 2;
    gap: 18px;
    margin: 0 18px 34px;
    color: var(--reference-ink);
    font-family: var(--reference-serif);
    letter-spacing: 0.24em;
}

.brand-star {
    position: relative;
    color: transparent;
    background: url('/static/images/decor/big-star.png') center / contain no-repeat;
}

.brand-star::before,
.brand-star::after,
.daily-card h1::before,
.daily-card h1::after {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    background: url('/static/images/decor/smal-star.png') center / contain no-repeat;
}

.brand-star::before,
.brand-star::after {
    content: none;
}

.brand p,
.brand strong {
    font-size: 13px;
    line-height: 1.55;
    font-weight: 700;
}

.daily-card.panel-card {
    z-index: 1;
    padding: 30px 28px 34px;
    border: 1px solid rgba(120, 157, 187, 0.32);
    border-radius: 18px;
    background:
        linear-gradient(rgba(255, 255, 255, 0.08) 31px, rgba(120, 157, 187, 0.035) 32px),
        radial-gradient(circle at 10% 18%, rgba(120, 157, 187, 0.08), transparent 24%),
        linear-gradient(180deg, rgba(253, 249, 240, 0.92), rgba(247, 240, 228, 0.92));
    background-size: 100% 32px, auto, auto;
    box-shadow: inset 0 0 0 1px rgba(255, 252, 246, 0.8), 0 18px 42px rgba(77, 67, 55, 0.08);
}

.daily-card.panel-card::before {
    content: '';
    position: absolute;
    inset: 10px;
    pointer-events: none;
    border: 1px solid rgba(120, 157, 187, 0.34);
    border-radius: 14px;
}

.ornament-corner {
    z-index: 2;
    width: 88px;
    height: 88px;
    object-fit: contain;
    opacity: 0.82;
    filter: saturate(0.88) opacity(0.85);
    pointer-events: none;
}

.ornament-corner-left {
    left: 14px;
    top: 10px;
}

.ornament-corner-right {
    right: 14px;
    top: 10px;
    transform: scaleX(-1);
}

.ornament-corner-bottom-left {
    left: 14px;
    bottom: 10px;
    top: auto;
    transform: scaleY(-1);
}

.ornament-corner-bottom-right {
    right: 14px;
    bottom: 10px;
    top: auto;
    transform: scale(-1);
}

.daily-heading-row {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 12px;
    margin-top: 6px;
}

.daily-card h1 {
    color: var(--reference-ink);
    font-family: var(--reference-serif);
    font-size: clamp(33px, 3.1vw, 47px);
    letter-spacing: 0.015em;
    line-height: 1.05;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
}

.daily-card h1::before,
.daily-card h1::after {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    opacity: 0.72;
}

.soft-action-btn {
    margin: 0;
    padding: 7px 14px;
    border-color: rgba(120, 157, 187, 0.36);
    color: #4f6f89;
    background: rgba(253, 249, 240, 0.68);
    font-family: var(--reference-serif);
    font-size: 12px;
    letter-spacing: 0.16em;
    box-shadow: none;
}

.day-switcher {
    position: relative;
    z-index: 3;
    margin: 12px 18px 18px;
}

.day-switcher span,
.today-return-btn,
.day-switch-btn {
    font-family: var(--reference-serif);
}

.date-card {
    z-index: 2;
    min-height: 158px;
    margin: 0 14px;
    padding: 26px 42px 22px;
    border: 0;
    border-radius: 0;
    background:
        url('/static/images/decor/date-block.png') center / 100% 100% no-repeat;
    box-shadow: none;
}

.date-card::before {
    content: none;
}

.date-card::after {
    content: none;
}

.date-text span,
.date-month span,
.date-month small {
    font-family: var(--reference-serif);
    font-weight: 700;
    letter-spacing: 0.18em;
}

.date-text span {
    color: var(--reference-caption);
    font-size: 14px;
}

.date-text strong {
    color: #5d7fa0;
    font-size: clamp(80px, 7vw, 112px);
    line-height: 0.85;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}

.date-month span {
    color: #4e5157;
    font-size: 18px;
}

.date-month small {
    color: #696968;
    font-size: 15px;
}

.date-botanical {
    right: 18px;
    bottom: 12px;
    width: 104px;
    height: auto;
    transform: none;
    opacity: 0.70;
}

.today-list {
    position: relative;
    z-index: 2;
    margin: 28px 22px 0;
}

.today-list h2,
.notes-box h2 {
    color: #616066;
    font-family: var(--reference-serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.20em;
}

.today-events-scroll {
    max-height: clamp(190px, 27vh, 330px);
    padding-right: 0;
    border-top: 0;
    border-bottom: 0;
}

.daily-event-row.task-row {
    grid-template-columns: 18px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px dotted rgba(120, 157, 187, 0.34);
}

.daily-event-row input {
    width: 14px;
    height: 14px;
    border: 1.5px solid rgba(97, 119, 137, 0.72);
    border-radius: 2px;
    background: rgba(255, 252, 245, 0.78);
}

.daily-event-row input:checked {
    position: relative;
    background: rgba(232, 240, 245, 0.88);
}

.daily-event-row input:checked::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 0;
    width: 5px;
    height: 9px;
    border: solid #5d7fa0;
    border-width: 0 2px 2px 0;
    transform: rotate(42deg);
}

.daily-event-row input:checked + .daily-event-content strong,
.daily-event-row input:checked + .daily-event-content small {
    color: rgba(73, 76, 80, 0.46);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.daily-event-meta time,
.daily-event-meta em {
    font-family: var(--reference-serif);
}

.daily-event-meta time {
    color: rgba(78, 81, 87, 0.68);
    font-size: 11px;
    letter-spacing: 0.08em;
}

.daily-event-content strong {
    color: #4b4d52;
    font-family: var(--reference-serif);
    font-size: 15px;
    font-weight: 700;
}

.daily-event-content small {
    color: rgba(78, 81, 87, 0.58);
    font-family: var(--reference-serif);
    font-size: 13px;
}

.row-actions {
    align-self: center;
}

.sidebar-quote {
    z-index: 2;
    border: 0;
    transform: rotate(-1.4deg);
    background: none;
}
.sidebar-quote::before {
  content: "";
  position: absolute;
  /* Позиционирование в правом нижнем углу с вашими отступами */
  right: 14px;
  bottom: 12px;
  /* Размеры из вашего оригинального кода */
  width: 78px;
  height: auto;
  aspect-ratio: 1; /* Помогает корректно масштабировать auto-высоту */
  
  background: url('/static/images/decor/quote-flower.png') center / contain no-repeat;
  
  /* ПОВОРОТ: Настройте градусы (deg) под себя */
  transform: rotate(45deg); 
  
  pointer-events: none;
  z-index: 2; /* Будет поверх бумаги, если нужно */
}

/* 2. ВТОРОЕ ИЗОБРАЖЕНИЕ (Бумага): Приподнимаем */
.sidebar-quote::after {
  content: "";
  position: absolute;
  inset: 0; /* Растягиваем на весь блок */
  
  /* Размеры и центрирование из вашего кода */
  background: url('/static/images/decor/note-paper.png') center / 125% 150% no-repeat;
  
  /* СДВИГ ВВЕРХ: отрицательный translateY приподнимает картинку. 
     Вместо -20px можно использовать проценты, например -5% */
  transform: translateY(-20px); 
  
  pointer-events: none;
  z-index: -1;
}

.sidebar-quote p {
    max-width: 260px;
    color: #7b7064;
    font-family: var(--reference-hand);
    font-style: italic;
    font-size: clamp(18px, 1.8vw, 24px);
    line-height: 1.55;
}

.sidebar-quote span {
    display: none;
}

.notes-box {
    position: relative;
    z-index: 2;
    margin: 0 22px;
}

.paper-note {
    position: relative;
    min-height: 190px;
    padding: 22px 18px 42px;
    border-color: rgba(120, 157, 187, 0.30);
    border-radius: 6px;
    background:
        url('/static/images/decor/reminders-flowers.png') right -12px bottom -16px / 130px auto no-repeat,
        linear-gradient(rgba(255, 255, 255, 0.02) 27px, rgba(120, 157, 187, 0.16) 28px),
        rgba(253, 249, 240, 0.52);
    background-size: 130px auto, 100% 28px, auto;
}

.paper-note::after {
    content: none;
}

.paper-note p {
    color: rgba(65, 67, 73, 0.58);
    font-family: var(--reference-serif);
    font-size: 14px;
    line-height: 1.45;
}

.upcoming-reminder strong {
    color: #4b4d52;
    font-family: var(--reference-serif);
    font-size: 15px;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at 28% 18%, rgba(214, 225, 231, 0.48), transparent 34%),
        rgba(56, 65, 72, 0.34);
    backdrop-filter: blur(8px);
}

.modal-backdrop[hidden] {
    display: none;
}

.task-modal {
    position: relative;
    width: min(720px, 100%);
    max-height: min(92vh, 820px);
    overflow: auto;
    padding: 28px;
    border: 1px solid rgba(80, 94, 105, 0.22);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255, 252, 245, 0.96), rgba(246, 241, 230, 0.94)),
        radial-gradient(circle at 92% 14%, rgba(95, 134, 166, 0.18), transparent 28%);
    box-shadow: 0 28px 70px rgba(54, 65, 73, 0.24);
}

.task-modal::before {
    content: '✾';
    position: absolute;
    right: 26px;
    bottom: 12px;
    color: rgba(95, 134, 166, 0.16);
    font-size: 96px;
    pointer-events: none;
}

.modal-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(95, 134, 166, 0.18);
}

.modal-kicker {
    display: block;
    margin-bottom: 4px;
    color: #6f8496;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.modal-header h2 {
    margin: 0;
    color: #38434d;
    font-family: var(--serif);
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 500;
}

.modal-close {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(95, 134, 166, 0.28);
    border-radius: 50%;
    color: #40566b;
    background: rgba(255, 252, 245, 0.78);
    font-size: 25px;
    cursor: pointer;
}

.form-grid,
.regular-fields {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.regular-fields {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid rgba(95, 134, 166, 0.20);
    border-radius: 14px;
    background: rgba(229, 236, 239, 0.34);
}

.form-field {
    display: grid;
    gap: 7px;
}

.form-field-wide {
    grid-column: 1 / -1;
}

.form-field span,
.regular-scope legend {
    color: #5f6266;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    border: 1px solid rgba(95, 134, 166, 0.28);
    border-radius: 10px;
    color: #3f4348;
    background: rgba(255, 252, 245, 0.84);
    font: inherit;
    font-size: 15px;
    outline: none;
}

.form-field input,
.form-field select {
    min-height: 44px;
    padding: 0 12px;
}

.form-field textarea {
    min-height: 96px;
    padding: 12px;
    resize: vertical;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: rgba(95, 134, 166, 0.68);
    box-shadow: 0 0 0 4px rgba(95, 134, 166, 0.12);
}

.regular-scope {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    margin: 16px 0 0;
    padding: 14px 16px;
    border: 1px solid rgba(95, 134, 166, 0.20);
    border-radius: 14px;
    background: rgba(255, 252, 245, 0.54);
}

.regular-scope[hidden],
.regular-fields[hidden] {
    display: none;
}

.regular-scope label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #4f5357;
    font-size: 14px;
}

.form-hint,
.form-error {
    position: relative;
    z-index: 1;
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.5;
}

.form-hint {
    color: rgba(63, 67, 72, 0.66);
}

.form-error {
    padding: 10px 12px;
    border: 1px solid rgba(155, 88, 75, 0.24);
    border-radius: 10px;
    color: #8f4d42;
    background: rgba(255, 238, 232, 0.72);
}

.modal-actions {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
}

.ghost-btn,
.save-btn {
    min-height: 42px;
    padding: 0 18px;
    border-radius: 999px;
    cursor: pointer;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 12px;
}

.ghost-btn {
    border: 1px solid rgba(95, 134, 166, 0.26);
    color: #41586d;
    background: rgba(255, 252, 245, 0.72);
}

.save-btn {
    border: 1px solid rgba(65, 96, 120, 0.42);
    color: #fffaf1;
    background: linear-gradient(135deg, rgba(79, 114, 143, 0.92), rgba(111, 145, 169, 0.88));
    box-shadow: 0 10px 22px rgba(72, 88, 101, 0.16);
}

@media (max-width: 720px) {
    .form-grid,
    .regular-fields {
        grid-template-columns: 1fr;
    }

    .task-modal {
        padding: 22px;
    }

    .modal-actions {
        flex-direction: column-reverse;
    }

    .ghost-btn,
    .save-btn {
        width: 100%;
    }
}

.app-view[hidden] {
    display: none;
}

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding: 48px 48px 24px;
}

.section-head span,
.inspiration-hero > div > span,
.goal-form span,
.progress-select-label span {
    display: block;
    color: #6f8496;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.section-head h2,
.inspiration-hero h2 {
    margin: 6px 0 0;
    color: #3d3d3f;
    font-size: clamp(44px, 5vw, 78px);
    font-weight: 400;
    line-height: 1;
}

.notes-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    padding: 0 16px 28px;
}

.note-column {
    min-height: 360px;
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--group-color, #789dbb) 48%, rgba(80, 94, 105, 0.18));
    border-radius: 8px;
    background:
        linear-gradient(rgba(255, 255, 255, 0.04) 29px, color-mix(in srgb, var(--group-color, #789dbb) 15%, transparent) 30px),
        rgba(255, 252, 245, 0.72);
    background-size: 100% 30px, auto;
    box-shadow: var(--soft-shadow);
}

.note-column header {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) 30px 30px;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.note-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--group-color, #789dbb);
}

.note-column h3 {
    margin: 0;
    color: #3f4348;
    font-size: 22px;
    font-weight: 400;
}

.note-column header button,
.inline-link-btn {
    border: 1px solid rgba(95, 134, 166, 0.28);
    border-radius: 999px;
    color: #40566b;
    background: rgba(255, 252, 245, 0.78);
    cursor: pointer;
}

.note-column header button {
    width: 30px;
    height: 30px;
}

.note-task-list {
    display: grid;
    gap: 10px;
}

.note-task {
    display: grid;
    gap: 4px;
    width: 100%;
    padding: 12px;
    border: 1px solid rgba(80, 94, 105, 0.16);
    border-left: 4px solid var(--group-color, #789dbb);
    border-radius: 6px;
    color: #3f4348;
    background: rgba(255, 252, 245, 0.82);
    text-align: left;
    cursor: pointer;
}

.note-task time,
.goal-task time,
.goal-stats {
    color: rgba(62, 65, 70, 0.58);
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.note-task strong,
.goal-task strong {
    font-size: 16px;
}

.note-task small {
    color: rgba(62, 65, 70, 0.62);
    font-size: 13px;
}

.inspiration-hero {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1fr);
    gap: 28px;
    padding: 48px 48px 26px;
}

.inspiration-hero p {
    max-width: 520px;
    margin: 16px 0 0;
    color: #54565a;
    font-size: 18px;
    line-height: 1.45;
}

.goal-form {
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: 12px;
    padding: 18px;
    border: 1px solid rgba(95, 134, 166, 0.22);
    border-radius: 8px;
    background: rgba(255, 252, 245, 0.70);
    box-shadow: var(--soft-shadow);
}

.goal-form label {
    display: grid;
    gap: 7px;
}

.goal-form-wide {
    grid-column: 1 / -1;
}

.goal-form input,
.goal-form select,
.goal-form textarea,
.progress-select-label select {
    width: 100%;
    border: 1px solid rgba(95, 134, 166, 0.28);
    border-radius: 8px;
    color: #3f4348;
    background: rgba(255, 252, 245, 0.86);
    outline: none;
}

.goal-form input,
.goal-form select,
.progress-select-label select {
    min-height: 40px;
    padding: 0 11px;
}

.goal-form textarea {
    min-height: 70px;
    padding: 10px 11px;
    resize: vertical;
}

.goals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
    padding: 0 16px 30px;
}

.goal-card {
    position: relative;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 18px;
    min-height: 280px;
    padding: 22px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--goal-color, #789dbb) 42%, rgba(80, 94, 105, 0.18));
    border-radius: 8px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--goal-color, #789dbb) 13%, rgba(255, 252, 245, 0.88)), rgba(255, 252, 245, 0.72)),
        radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--goal-color, #789dbb) 24%, transparent), transparent 34%);
    box-shadow: var(--soft-shadow);
}

.goal-orbit {
    width: 106px;
    height: 106px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
        conic-gradient(var(--goal-color, #789dbb) calc(var(--progress) * 1%), rgba(255, 252, 245, 0.72) 0),
        rgba(255, 252, 245, 0.72);
}

.goal-orbit span {
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #40566b;
    background: var(--paper);
    font-size: 22px;
}

.goal-body > span {
    color: #6f8496;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.goal-card h3 {
    margin: 6px 0 8px;
    color: #3f4348;
    font-size: 28px;
    font-weight: 400;
}

.goal-card p {
    margin: 0 0 12px;
    color: #54565a;
    line-height: 1.42;
}

.goal-task-preview {
    display: grid;
    gap: 7px;
    margin-top: 14px;
}

.goal-task {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px dotted rgba(80, 94, 105, 0.22);
}

.goal-task.is-done strong {
    color: rgba(62, 65, 70, 0.48);
    text-decoration: line-through;
}

.goal-empty {
    color: rgba(62, 65, 70, 0.58);
    font-style: italic;
}

.goal-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.goal-actions button {
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid rgba(95, 134, 166, 0.24);
    border-radius: 999px;
    color: #40566b;
    background: rgba(255, 252, 245, 0.74);
    cursor: pointer;
}

.progress-select-label {
    display: grid;
    gap: 5px;
    margin-top: 10px;
}

.inline-link-btn {
    margin-top: 10px;
    padding: 8px 0;
    border: 0;
    background: transparent;
    color: var(--blue-400);
    font-size: 14px;
    font-weight: 700;
    text-align: left;
}

.progress-star.is-active {
    color: #b78b47;
    background: rgba(255, 248, 221, 0.92);
}

.form-field-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding-top: 20px;
}

.form-field-toggle input {
    width: 18px;
    min-height: 18px;
}

@media (max-width: 980px) {
    .inspiration-hero {
        grid-template-columns: 1fr;
        padding-inline: 24px;
    }

    .section-head {
        padding-inline: 24px;
    }
}

@media (max-width: 640px) {
    .goal-form,
    .goal-card {
        grid-template-columns: 1fr;
    }

    .notes-board,
    .goals-grid {
        padding-inline: 0;
    }
}