:root {
    --ink: #183021;
    --forest: #17281d;
    --moss: #365129;
    --leaf: #6f8d45;
    --gold: #c6a650;
    --cream: #f4f0e6;
    --paper: #fffdf7;
    --muted: #6f756e;
    --line: #ded9ca;
    --danger: #9a3f36;
    --shadow: 0 18px 48px rgba(23, 40, 29, 0.09);
}

* { box-sizing: border-box; }

html { background: var(--cream); }

body {
    margin: 0;
    min-width: 280px;
    color: var(--ink);
    background:
        radial-gradient(circle at 9% 8%, rgba(198, 166, 80, 0.11), transparent 26rem),
        var(--cream);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

button, input, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.site-header {
    min-height: 72px;
    padding: 14px max(20px, env(safe-area-inset-right)) 14px max(20px, env(safe-area-inset-left));
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(54, 81, 41, 0.15);
    background: rgba(244, 240, 230, 0.88);
    backdrop-filter: blur(18px);
    position: sticky;
    top: 0;
    z-index: 20;
}

.brand {
    color: var(--ink);
    text-decoration: none;
    font: 700 18px/1.2 Georgia, serif;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.brand-mark {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--paper);
    background: var(--forest);
    font-size: 22px;
}

.top-nav { display: flex; align-items: center; gap: 8px; }
.top-nav a { color: var(--moss); font-size: 14px; font-weight: 650; text-decoration: none; padding: 12px; }
.icon-button, .arrow-button, .close-button {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    color: var(--ink);
    background: rgba(54, 81, 41, 0.08);
    cursor: pointer;
}
.arrow-button:disabled { opacity: .32; cursor: default; }

.app-shell { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 58px 0 64px; }

.hero {
    min-height: 280px;
    padding: clamp(34px, 6vw, 68px);
    border-radius: 28px;
    color: var(--paper);
    background:
        linear-gradient(130deg, rgba(23, 40, 29, 0.1), rgba(23, 40, 29, 0.92)),
        var(--forest);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .18;
    background-image: linear-gradient(90deg, transparent 49.8%, rgba(255,255,255,.13) 50%);
    background-size: 72px 72px;
    pointer-events: none;
}

.hero > div { position: relative; z-index: 1; }
.eyebrow, .section-kicker {
    margin: 0 0 9px;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: 11px;
    font-weight: 800;
}

.hero h1 {
    margin: 0;
    max-width: 620px;
    font: 700 clamp(44px, 8vw, 82px)/.91 Georgia, "Times New Roman", serif;
    letter-spacing: -.045em;
}

.hero h1 span { color: #cfdab8; }
.hero-copy { max-width: 550px; margin: 24px 0 0; color: rgba(255,255,255,.7); line-height: 1.65; }
.hero-piece { font: 140px/1 Georgia, serif; color: rgba(207, 218, 184, .12); transform: rotate(8deg); }

.stats {
    margin: -24px auto 28px;
    width: calc(100% - 64px);
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-radius: 18px;
    background: var(--paper);
    box-shadow: var(--shadow);
}

.stats article { min-height: 108px; display: grid; place-content: center; text-align: center; border-right: 1px solid var(--line); }
.stats article:last-child { border: 0; }
.stat-value { font: 700 30px/1 Georgia, serif; }
.stat-label { margin-top: 8px; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }

.content-grid { min-width: 0; display: grid; grid-template-columns: .92fr 1.08fr; gap: 24px; align-items: start; }
.panel { min-width: 0; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,253,247,.92); box-shadow: 0 10px 35px rgba(23,40,29,.045); }
.calendar-panel, .daily-panel { padding: 28px; }
.panel-header, .daily-date, .dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.panel h2, .focus-card h2, .dialog-card h2 { margin: 0; font: 700 28px/1.1 Georgia, serif; }
.calendar-actions { display: flex; align-items: center; gap: 5px; }
.month-button, .today-button { border: 0; color: var(--moss); background: transparent; cursor: pointer; font-size: 12px; font-weight: 800; padding: 10px 6px; }
.month-heading { margin: 28px 0 16px; font: 700 17px/1 Georgia, serif; text-transform: capitalize; }
.weekday-row, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.weekday-row { margin-bottom: 7px; color: #92978f; font-size: 10px; font-weight: 800; text-align: center; text-transform: uppercase; }
.calendar-day {
    aspect-ratio: 1;
    min-width: 0;
    border: 3px solid transparent;
    border-radius: 50%;
    color: var(--ink);
    background: transparent;
    cursor: pointer;
    position: relative;
    font-size: 13px;
}
.calendar-day:hover:not(:disabled) { background: rgba(54,81,41,.07); }
.calendar-day.outside { color: #b6b8b2; }
.calendar-day.future { cursor: default; color: #c5c6c1; }
.calendar-day.today { box-shadow: inset 0 0 0 1px var(--gold); }
.calendar-day.selected { border-color: var(--forest); font-weight: 800; }
.calendar-day.complete { color: white; background: var(--moss); }
.calendar-day.partial::after {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gold);
    bottom: 4px;
    left: calc(50% - 2.5px);
}
.calendar-day.complete:hover:not(:disabled) { background: var(--forest); }
.calendar-legend { margin-top: 20px; display: flex; gap: 18px; color: var(--muted); font-size: 11px; }
.calendar-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 8px; height: 8px; display: block; border-radius: 50%; }
.legend-dot.complete { background: var(--moss); }
.legend-dot.partial { background: var(--gold); }

.daily-progress { margin-top: 25px; height: 6px; border-radius: 9px; background: #ebe7dc; overflow: hidden; }
.daily-progress-fill { width: 0; height: 100%; background: var(--leaf); transition: width .35s ease; }
.daily-summary { margin: 10px 0 22px; color: var(--muted); font-size: 13px; }
.task-list { display: grid; gap: 10px; }
.task {
    min-height: 78px;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    gap: 13px;
    border: 1px solid var(--line);
    border-radius: 14px;
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.task:hover { transform: translateY(-1px); border-color: #b8b49f; }
.task.checked { background: #f0f3e8; border-color: #cbd5b5; }
.task input { position: absolute; opacity: 0; pointer-events: none; }
.checkmark { width: 36px; height: 36px; display: grid; place-items: center; border: 1.5px solid #b9b9ad; border-radius: 50%; color: transparent; background: white; font-weight: 900; }
.task.checked .checkmark { color: white; border-color: var(--moss); background: var(--moss); }
.task-copy strong { display: block; font-size: 15px; }
.task-copy { min-width: 0; }
.task-copy small { display: block; margin-top: 5px; color: var(--muted); line-height: 1.35; }
.task-time { color: var(--moss); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.task.checked .task-copy strong { text-decoration: line-through; text-decoration-color: rgba(54,81,41,.4); }

.review-card { margin-top: 20px; padding: 18px; border-radius: 14px; color: var(--paper); background: var(--forest); }
.review-card h3 { margin: 0; font: 700 20px/1 Georgia, serif; }
.review-card > p { color: rgba(255,255,255,.63); font-size: 13px; }
.review-question { display: block; margin-top: 14px; color: #dbe2cf; font-size: 12px; font-weight: 700; }
.review-question textarea { margin-top: 7px; min-height: 64px; color: white; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }
.note-field { display: block; margin-top: 22px; color: var(--ink); font-size: 13px; font-weight: 750; }
.note-field small { color: var(--muted); font-weight: 500; }
textarea { width: 100%; resize: vertical; padding: 12px; border: 1px solid var(--line); border-radius: 10px; outline: none; line-height: 1.45; }
.note-field textarea { margin-top: 8px; background: white; }
textarea:focus, input:focus { border-color: var(--leaf); box-shadow: 0 0 0 3px rgba(111,141,69,.13); }
.saved-message { min-height: 16px; margin: 8px 0 0; color: var(--leaf); font-size: 11px; text-align: right; }

.focus-card { margin-top: 24px; padding: clamp(28px,5vw,50px); display: grid; grid-template-columns: 120px 1fr; gap: 36px; color: white; border-radius: 22px; background: var(--moss); }
.focus-number { font: 700 76px/1 Georgia, serif; color: rgba(255,255,255,.16); }
.focus-card h2 { font-size: 34px; }
.focus-card p:not(.section-kicker) { color: rgba(255,255,255,.75); line-height: 1.6; }
.focus-card ul { margin: 20px 0 0; padding: 0; display: grid; gap: 10px; list-style: none; }
.focus-card li { padding-left: 22px; position: relative; color: #e7eadf; font-size: 14px; }
.focus-card li::before { content: "→"; position: absolute; left: 0; color: var(--gold); }
blockquote { margin: 42px auto 0; max-width: 720px; text-align: center; font: italic 24px/1.5 Georgia, serif; color: var(--moss); }

dialog { width: min(460px, calc(100% - 32px)); padding: 0; border: 0; border-radius: 20px; color: var(--ink); background: transparent; box-shadow: 0 30px 90px rgba(0,0,0,.25); }
dialog::backdrop { background: rgba(15,27,19,.62); backdrop-filter: blur(4px); }
.dialog-card { padding: 28px; background: var(--paper); }
.close-button { font-size: 26px; }
.settings-field { margin: 28px 0 22px; display: grid; gap: 8px; font-size: 13px; font-weight: 800; }
.settings-field input { min-height: 48px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.settings-field small { color: var(--muted); font-weight: 500; }
.primary-button, .danger-button { width: 100%; min-height: 48px; border-radius: 10px; cursor: pointer; font-weight: 800; }
.primary-button { border: 0; color: white; background: var(--forest); }
.danger-button { margin-top: 10px; color: var(--danger); border: 1px solid #e1c5c1; background: transparent; }

@media (max-width: 820px) {
    .app-shell { width: min(100% - 28px, 680px); padding-top: 24px; }
    .hero { min-height: 245px; border-radius: 22px; }
    .hero-piece { display: none; }
    .content-grid { grid-template-columns: 1fr; }
    .daily-panel { order: -1; }
}

@media (max-width: 520px) {
    .site-header { min-height: 62px; padding-top: 9px; padding-bottom: 9px; }
    .brand-mark { width: 36px; height: 36px; }
    .top-nav a { display: none; }
    .app-shell { width: calc(100% - 20px); padding: 10px 0 42px; }
    .hero { min-height: 220px; padding: 27px 24px 42px; border-radius: 18px; }
    .hero h1 { font-size: clamp(40px, 13vw, 58px); }
    .hero-copy { margin-top: 18px; font-size: 14px; }
    .stats { width: calc(100% - 20px); margin-top: -22px; }
    .stats article { min-height: 86px; }
    .stat-value { font-size: 24px; }
    .stat-label { font-size: 9px; }
    .calendar-panel, .daily-panel { padding: 20px 16px; border-radius: 17px; }
    .panel h2 { font-size: 25px; }
    .task { min-height: 82px; padding: 12px; grid-template-columns: 39px 1fr; }
    .task-time { grid-column: 2; margin-top: -8px; }
    .calendar-day { font-size: 12px; border-width: 2px; }
    .focus-card { grid-template-columns: 1fr; gap: 10px; padding: 28px 23px; }
    .focus-number { font-size: 46px; }
    .focus-card h2 { font-size: 29px; }
    blockquote { font-size: 20px; padding: 0 12px; }
}

@media (max-width: 360px) {
    .calendar-panel .panel-header { align-items: flex-start; flex-direction: column; }
    .calendar-actions { width: 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}