:root {
    color-scheme: light;
    --ink: #173c36;
    --ink-soft: #60736c;
    --green: #277c63;
    --green-dark: #1d5e4d;
    --green-pale: #e7f2eb;
    --lime: #d7ed9b;
    --paper: #f5f7f2;
    --white: #fff;
    --line: #e8eee8;
    --muted: #91a19a;
    --gold: #efb95f;
    --shadow: 0 16px 48px rgba(37, 73, 58, .07);
    font-family: "IBM Plex Sans Arabic", "DM Sans", sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-width: 320px;
    background:
        radial-gradient(ellipse at 91% 3%, rgba(215, 237, 155, .23), transparent 25rem),
        var(--paper);
    color: var(--ink);
}

button, input { font: inherit; }
button { color: inherit; }

.page-shell { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }

.topbar {
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(32, 82, 62, .08);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    font-size: 19px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: -.5px;
}

.brand-mark {
    display: grid;
    width: 35px;
    height: 35px;
    place-items: center;
    border-radius: 12px;
    background: var(--green);
    color: var(--white);
    font-size: 19px;
    box-shadow: 0 5px 12px rgba(39, 124, 99, .2);
}

.brand-dot { color: var(--green); }
.topbar-note { display: flex; align-items: center; gap: 9px; color: var(--ink-soft); font-size: 12px; }
.live-dot { width: 7px; height: 7px; background: #71b981; border-radius: 50%; box-shadow: 0 0 0 4px rgba(113, 185, 129, .13); }

.hero {
    min-height: 306px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    padding: 38px 55px 34px 72px;
    margin-top: 23px;
    border-radius: 25px;
    background: #eaf3e9;
}

.hero::after {
    content: "";
    position: absolute;
    width: 410px;
    height: 410px;
    left: -100px;
    top: -245px;
    border: 1px solid rgba(39, 124, 99, .09);
    border-radius: 50%;
}

.hero-copy { position: relative; z-index: 1; }
.eyebrow, .section-kicker { color: var(--green); font-size: 11px; font-weight: 600; letter-spacing: .2px; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; }
.eyebrow-line { display: inline-block; width: 22px; height: 2px; border-radius: 2px; background: var(--green); }
.hero h1 { margin: 0; color: var(--ink); font-size: clamp(32px, 4vw, 46px); line-height: 1.38; letter-spacing: -1.4px; }
.hero h1 span { color: var(--green); }
.hero-description { max-width: 390px; margin: 12px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.9; }

.hero-art { position: relative; width: 270px; height: 225px; flex: 0 0 270px; }
.orbit { position: absolute; inset: 20px 14px; border: 1px solid rgba(39, 124, 99, .14); border-radius: 50%; transform: rotate(-24deg); }
.orbit-two { inset: 37px -2px; transform: rotate(28deg); }
.hero-book {
    position: absolute;
    top: 37px;
    left: 77px;
    width: 116px;
    height: 145px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 19px;
    border-radius: 9px 16px 16px 9px;
    background: linear-gradient(140deg, #378a6b, #1d604d);
    box-shadow: 12px 15px 25px rgba(31, 94, 74, .22), inset 5px 0 rgba(255,255,255,.13);
    color: white;
    transform: rotate(-8deg);
    animation: float 4s ease-in-out infinite;
}
.book-label { font-size: 12px; letter-spacing: 1px; }
.book-mark { display: grid; width: 43px; height: 43px; margin-top: 14px; place-items: center; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; color: var(--lime); font-size: 22px; }
.book-lines { width: 49px; height: 2px; margin-top: 14px; border-radius: 2px; background: rgba(255,255,255,.32); }
.hero-badge { position: absolute; z-index: 1; left: 31px; top: 123px; display: flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 12px; background: white; box-shadow: var(--shadow); color: var(--green); font-size: 10px; transform: rotate(-7deg); }
.hero-badge strong { color: var(--gold); font-size: 19px; line-height: .8; }
.hero-spark { position: absolute; color: #a4c770; }
.spark-one { top: 32px; right: 51px; font-size: 23px; }
.spark-two { bottom: 25px; left: 55px; font-size: 20px; color: var(--gold); }

.overview {
    padding: 25px 31px 21px;
    margin-top: 22px;
    border: 1px solid rgba(39, 124, 99, .08);
    border-radius: 19px;
    background: var(--white);
    box-shadow: 0 8px 28px rgba(37, 73, 58, .035);
}
.overview-heading, .overview-footer, .overall-progress-row, .course-progress-line, .list-footer, .courses-heading { display: flex; align-items: center; justify-content: space-between; }
.section-kicker { margin: 0 0 3px; }
.overview-heading h2, .courses-heading h2 { margin: 0; font-size: 18px; letter-spacing: -.4px; }
.overview-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; background: #f1f6ef; color: var(--green); font-size: 19px; }
.overall-progress-row { gap: 18px; margin-top: 20px; }
.overall-track, .course-track { height: 8px; overflow: hidden; border-radius: 99px; background: #edf2ed; }
.overall-track { flex: 1; }
.overall-fill, .course-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #83b878, #2d8567); transition: width .55s cubic-bezier(.2,.8,.2,1); }
.overall-percent { min-width: 47px; color: var(--green); font-family: "DM Sans", sans-serif; font-size: 14px; direction: ltr; text-align: left; }
.overview-footer { margin-top: 11px; color: var(--ink-soft); font-size: 11px; }
.overview-milestone { color: var(--green); }
.overview-milestone span { color: var(--gold); }

.countdown-card, .notes-card {
    padding: 23px 27px;
    margin-top: 16px;
    border: 1px solid rgba(39, 124, 99, .08);
    border-radius: 18px;
    background: var(--white);
    box-shadow: 0 8px 28px rgba(37, 73, 58, .035);
}
.countdown-heading, .notes-heading { display: flex; align-items: center; justify-content: space-between; }
.countdown-heading h2, .notes-heading h2 { margin: 0; font-size: 17px; }
.countdown-calendar, .notes-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 12px; background: #e8f2e9; color: var(--green); font-size: 20px; }
.countdown-date { margin: 8px 0 15px; color: var(--ink-soft); font-size: 11px; }
.exam-schedule { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0 0 15px; }
.exam-field { display: grid; gap: 5px; min-width: 0; color: var(--ink-soft); font-size: 10px; }
.exam-field input { width: 100%; min-width: 0; height: 37px; padding: 5px 9px; border: 1px solid #e4ece4; border-radius: 9px; outline: 0; background: #f9fbf8; color: var(--ink); font-family: "DM Sans", sans-serif; font-size: 12px; }
.exam-field input:focus { border-color: #9dc7ad; box-shadow: 0 0 0 3px rgba(39, 124, 99, .08); }
.countdown-units { display: flex; align-items: center; justify-content: center; gap: clamp(9px, 3vw, 25px); }
.countdown-unit { display: flex; min-width: 62px; flex-direction: column; align-items: center; gap: 3px; }
.countdown-unit strong { color: var(--green-dark); font-family: "DM Sans", sans-serif; font-size: clamp(25px, 4vw, 34px); font-weight: 600; line-height: 1.15; direction: ltr; }
.countdown-unit span { color: var(--muted); font-size: 10px; }
.countdown-separator { align-self: flex-start; padding-top: 3px; color: #b7c8b7; font-family: "DM Sans", sans-serif; font-size: 23px; }
.countdown-message { margin: 14px 0 0; color: var(--green); font-size: 11px; text-align: center; }

.motivation {
    display: flex;
    align-items: center;
    gap: 17px;
    position: relative;
    overflow: hidden;
    min-height: 116px;
    padding: 20px 25px;
    margin-top: 16px;
    border-radius: 17px;
    background: #edf4df;
}
.motivation-icon { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border-radius: 14px; background: #dcebbf; color: #628a4b; font-size: 20px; }
.motivation-copy { position: relative; z-index: 1; }
.motivation .section-kicker { color: #718b58; }
.motivation h2 { margin: 2px 0 3px; color: var(--ink); font-size: 15px; }
.motivation-message { margin: 0; color: var(--ink-soft); font-size: 11px; }
.motivation-decoration { position: absolute; left: 23px; top: 0; color: rgba(111, 147, 74, .11); font-family: Georgia, serif; font-size: 142px; line-height: 1; }

.notes-card { margin-top: 16px; }
.notes-description { margin: 9px 0 13px; color: var(--ink-soft); font-size: 11px; line-height: 1.8; }
.notes-input { display: block; width: 100%; min-height: 130px; resize: vertical; padding: 13px 15px; border: 1px solid #e8eee8; border-radius: 11px; outline: 0; background: #fbfcfa; color: var(--ink); font-size: 12px; line-height: 1.9; }
.notes-input::placeholder { color: #a2aea8; }
.notes-input:focus { border-color: #9dc7ad; box-shadow: 0 0 0 3px rgba(39, 124, 99, .08); }
.notes-status { margin: 8px 2px 0; color: var(--muted); font-size: 9px; }

.courses-heading { align-items: end; margin: 39px 0 16px; }
.courses-heading > p { margin: 0 0 3px; color: var(--ink-soft); font-size: 11px; }
.course-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px; align-items: start; }
.course-card { min-width: 0; padding: 23px; border: 1px solid rgba(39, 124, 99, .08); border-radius: 19px; background: white; box-shadow: 0 8px 28px rgba(37, 73, 58, .035); }
.course-card-top { display: flex; align-items: center; justify-content: space-between; }
.course-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: #e8f2e9; color: var(--green); font-size: 18px; font-weight: 600; }
.course-card--quantitative .course-icon { background: #f4eddd; color: #b17a2e; font-family: "DM Sans", sans-serif; }
.reset-button { padding: 6px 9px; border: 0; border-radius: 8px; background: transparent; color: #89978f; font-size: 10px; cursor: pointer; transition: background .2s, color .2s; }
.reset-button:hover { background: #f8eeee; color: #b14d4d; }
.reset-button span { margin-right: 3px; font-size: 15px; vertical-align: -1px; }
.course-card h3 { margin: 13px 0 1px; font-size: 17px; }
.course-subtitle { margin: 0; color: var(--muted); font-size: 10px; }
.course-progress-line { margin-top: 19px; font-size: 11px; }
.course-count { color: var(--ink-soft); }
.course-percent { color: var(--green); font-family: "DM Sans", sans-serif; direction: ltr; }
.course-track { height: 6px; margin-top: 9px; }
.course-card--quantitative .course-fill { background: linear-gradient(90deg, #ecc77b, #c28b3c); }
.list-heading { display: flex; align-items: center; justify-content: space-between; margin: 22px 0 9px; font-size: 11px; font-weight: 600; }
.list-hint { color: var(--muted); font-size: 9px; font-weight: 400; }
.search-box { height: 37px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid #e8eee8; border-radius: 9px; background: #fbfcfa; }
.search-box:focus-within { border-color: #9dc7ad; box-shadow: 0 0 0 3px rgba(39, 124, 99, .08); }
.search-icon { color: #91a19a; font-size: 19px; line-height: 1; transform: rotate(-20deg); }
.search-box input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 10px; }
.search-box input::placeholder { color: #a2aea8; }
.section-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; max-height: 220px; overflow-y: auto; padding: 10px 2px 10px 0; scrollbar-color: #cfddd1 transparent; scrollbar-width: thin; }
.section-item { display: flex; align-items: center; justify-content: space-between; gap: 5px; min-height: 33px; padding: 5px 7px; border: 1px solid #edf1ed; border-radius: 8px; background: #fff; cursor: pointer; transition: border-color .16s, background .16s, transform .16s; }
.section-item:hover { transform: translateY(-1px); border-color: #bfd9c5; }
.section-item.is-complete { border-color: #d9eadd; background: #f0f7ef; }
.section-number { color: #566a60; font-family: "DM Sans", sans-serif; font-size: 10px; direction: ltr; }
.section-checkbox { width: 14px; height: 14px; flex: 0 0 14px; margin: 0; accent-color: var(--green); cursor: pointer; }
.empty-state { margin: 13px 0; color: var(--muted); font-size: 11px; text-align: center; }
.list-footer { padding-top: 9px; border-top: 1px solid #f0f3f0; color: var(--muted); font-size: 9px; }
.next-button { padding: 5px 0; border: 0; background: transparent; color: var(--green); font-size: 10px; font-weight: 600; cursor: pointer; }
.next-button:hover { color: var(--green-dark); }
.next-button span { display: inline-block; margin-right: 3px; transition: transform .2s; }
.next-button:hover span { transform: translateX(-3px); }
.page-footer { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 27px 0 33px; color: var(--muted); font-size: 10px; }
.page-footer p { margin: 0; }
.made-by { flex-basis: 100%; color: var(--ink-soft); text-align: center; }
.made-by strong { color: var(--green); font-weight: 600; }
.footer-star { color: #a9c57c; }
.footer-heart { color: #d78c81; font-size: 10px; }
.toast { position: fixed; z-index: 10; right: 50%; bottom: 24px; padding: 10px 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: #193e35; color: white; font-size: 12px; opacity: 0; pointer-events: none; transform: translate(50%, 12px); transition: opacity .2s, transform .2s; }
.toast.is-visible { opacity: 1; transform: translate(50%, 0); }
.toast.is-error { background: #8d3939; }

@keyframes float { 0%, 100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(-5deg) translateY(-7px); } }

@media (max-width: 760px) {
    .page-shell { width: min(100% - 30px, 560px); }
    .topbar { height: 68px; }
    .hero { min-height: 270px; padding: 34px 29px; }
    .hero-art { width: 195px; height: 195px; flex-basis: 195px; margin-left: -10px; transform: scale(.82); transform-origin: center left; }
    .hero h1 { font-size: clamp(29px, 6vw, 39px); }
    .hero-description { max-width: 330px; }
    .course-grid { grid-template-columns: 1fr; gap: 14px; }
    .course-card { padding: 21px; }
}

@media (max-width: 520px) {
    .topbar-note { font-size: 10px; }
    .hero { min-height: 250px; padding: 30px 21px; }
    .hero-art { position: absolute; left: -28px; bottom: -34px; opacity: .43; transform: scale(.77); transform-origin: bottom left; }
    .hero-copy { max-width: 100%; }
    .hero-description { max-width: 260px; }
    .overview { padding: 21px 19px 18px; }
    .overview-milestone { display: none; }
    .motivation { min-height: 108px; padding: 17px; }
    .courses-heading { display: block; margin-top: 32px; }
    .courses-heading > p { margin-top: 5px; }
    .section-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .page-footer { font-size: 9px; }
}

.daily-card {
    grid-column: 1 / -1;
    padding: 27px 29px;
    border: 1px solid rgba(36, 82, 62, .09);
    border-radius: 21px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 12px 35px rgba(35, 75, 55, .055);
}
.daily-heading, .daily-goal-title, .daily-count-row, .study-plan-heading, .plan-step { display: flex; align-items: center; }
.daily-heading, .daily-count-row, .study-plan-heading { justify-content: space-between; }
.daily-heading h2 { margin: 0; font-size: 21px; }
.daily-date { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.daily-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 14px; background: #e8f2e9; color: var(--green); font-size: 26px; }
.daily-goals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 21px; }
.daily-goal { padding: 17px 18px 15px; border: 1px solid #e8efe7; border-radius: 15px; background: #f9fbf8; }
.daily-goal--quantitative { background: #fdfaf4; border-color: #f1e9d8; }
.daily-goal-title { gap: 10px; }
.daily-goal-icon { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 12px; font-size: 17px; font-weight: 600; }
.verbal-mark { background: #e4f0e4; color: var(--green); }
.quant-mark { background: #f5ecd9; color: #b17a2e; font-family: "DM Sans", sans-serif; }
.daily-goal-title h3 { margin: 0; font-size: 14px; }
.daily-goal-title p { margin: 2px 0 0; color: var(--muted); font-size: 10px; }
.goal-target-label { display: inline-flex; align-items: center; gap: 7px; float: left; margin-top: -36px; color: var(--ink-soft); font-size: 10px; }
.goal-target { width: 49px; height: 34px; padding: 4px; border: 1px solid #e3ebe2; border-radius: 9px; outline: 0; background: white; color: var(--ink); font-family: "DM Sans", sans-serif; font-size: 14px; text-align: center; }
.goal-target:focus { border-color: #9dc7ad; box-shadow: 0 0 0 3px rgba(39, 124, 99, .08); }
.daily-count-row { clear: both; margin-top: 17px; }
.daily-done { color: var(--ink-soft); font-size: 11px; }
.count-controls { display: flex; gap: 6px; }
.count-button { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid #dce9da; border-radius: 9px; background: #edf5e9; color: var(--green-dark); font-size: 18px; line-height: 1; cursor: pointer; transition: background .16s, transform .16s; }
.count-button:hover { transform: translateY(-1px); background: #e0eedb; }
.count-button--minus { border-color: #e8e9e2; background: white; color: #75867b; }
.count-button--minus:hover { background: #f5f4ed; }
.daily-track { height: 7px; overflow: hidden; margin-top: 12px; border-radius: 99px; background: #e8eee7; }
.daily-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #a5cd79, #318265); transition: width .35s ease; }
.daily-goal--quantitative .daily-fill { background: linear-gradient(90deg, #ecc77b, #c28b3c); }
.study-plan { margin-top: 23px; padding-top: 19px; border-top: 1px solid #edf1ec; }
.study-plan-heading h3 { margin: 0; font-size: 14px; }
.study-plan-heading > span { color: var(--muted); font-size: 10px; }
.plan-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 13px; }
.plan-step { gap: 10px; min-width: 0; padding: 12px; border: 1px solid #eef2ed; border-radius: 12px; background: #fbfcfa; }
.plan-step-number { display: grid; width: 29px; height: 29px; flex: 0 0 29px; place-items: center; border-radius: 10px; background: #e6f0e4; color: var(--green); font-size: 12px; font-weight: 600; }
.plan-step-number--gold { background: #f6eddc; color: #a8742c; }
.plan-step-number--soft { background: #edf0e7; color: #78845d; }
.plan-step > div { min-width: 0; }
.plan-step strong { font-size: 11px; }
.plan-step p { margin: 3px 0 0; color: var(--ink-soft); font-size: 10px; }
.plan-step-time { margin-right: auto; color: var(--muted); font-size: 9px; white-space: nowrap; }
.daily-encouragement { margin: 14px 0 0; color: var(--green); font-size: 11px; font-weight: 500; }

@media (max-width: 760px) {
    .daily-card { grid-column: 1; padding: 22px; }
    .plan-steps { grid-template-columns: 1fr; }
    .plan-step-time { font-size: 10px; }
}

@media (max-width: 520px) {
    .daily-card { padding: 20px 17px; border-radius: 18px; }
    .daily-goals { gap: 9px; }
    .daily-goal { padding: 13px 11px; }
    .daily-goal-title { gap: 7px; }
    .daily-goal-icon { width: 32px; height: 32px; }
    .daily-goal-title h3 { font-size: 12px; }
    .goal-target-label { gap: 4px; font-size: 9px; }
    .goal-target { width: 41px; height: 31px; }
    .daily-done { font-size: 10px; }
    .count-controls { gap: 4px; }
    .count-button { width: 28px; height: 29px; }
    .study-plan-heading { align-items: flex-start; gap: 8px; }
    .study-plan-heading > span { text-align: left; }
}

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

/* Refined dashboard layout */
body {
    overflow-x: hidden;
    background: #dce6de;
    color: var(--ink);
}

.topbar { border-bottom-color: rgba(23, 60, 54, .1); }
.brand { color: var(--ink); }
.brand-dot { color: var(--green); }
.topbar-note { border-color: rgba(39, 124, 99, .1); background: rgba(255, 255, 255, .64); color: var(--ink-soft); }
.overview,
.countdown-card,
.notes-card,
.course-card,
.daily-card { color: var(--ink); }
.courses-heading h2 { color: var(--ink); }
.courses-heading .section-kicker { color: var(--green); }
.courses-heading > p { color: var(--ink-soft); }
.page-footer { color: var(--ink-soft); }

.page-shell {
    width: min(1120px, calc(100% - 48px));
}

.topbar {
    height: 76px;
    border-bottom-color: rgba(23, 60, 54, .1);
}

.brand {
    gap: 12px;
    font-size: 20px;
}

.brand-mark {
    width: 39px;
    height: 39px;
    border-radius: 14px;
}

.topbar-note {
    padding: 9px 13px;
    border: 1px solid rgba(39, 124, 99, .1);
    border-radius: 999px;
    background: rgba(255, 255, 255, .64);
}

main {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px;
    padding-top: 21px;
}

.hero,
.motivation,
.notes-card,
.courses-heading,
.course-grid,
.page-footer {
    grid-column: 1 / -1;
}

.hero {
    min-height: 310px;
    margin: 0;
    padding: 46px 58px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 28px;
    background:
        radial-gradient(circle at 16% 95%, rgba(139, 190, 132, .19), transparent 19rem),
        linear-gradient(118deg, #173f37, #23634f 68%, #2d765d);
    box-shadow: 0 20px 50px rgba(27, 74, 58, .15);
}

.hero::after {
    left: -85px;
    top: -270px;
    width: 520px;
    height: 520px;
    border-color: rgba(220, 239, 190, .12);
}

.hero-copy { max-width: 610px; }
.hero .eyebrow { color: #b7d9a1; }
.hero .eyebrow-line { background: #b7d9a1; }
.hero h1 { color: #fff; font-size: clamp(38px, 5vw, 56px); line-height: 1.28; }
.hero h1 span { color: #d7ed9b; }
.hero-description { max-width: 410px; margin-top: 16px; color: rgba(255, 255, 255, .72); font-size: 14px; }
.hero-art { transform: scale(1.05); }
.hero-book { box-shadow: 12px 15px 25px rgba(10, 39, 30, .32), inset 5px 0 rgba(255,255,255,.13); }
.orbit, .orbit-two { border-color: rgba(223, 239, 201, .19); }
.hero-spark { color: #d7ed9b; }

.overview,
.countdown-card,
.motivation,
.notes-card,
.course-card {
    min-width: 0;
    margin: 0;
    border: 1px solid rgba(36, 82, 62, .09);
    border-radius: 21px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 12px 35px rgba(35, 75, 55, .055);
}

.overview,
.countdown-card {
    grid-column: span 6;
    padding: 25px 27px;
}

.overview-heading h2,
.courses-heading h2 { font-size: 20px; }
.overview-icon,
.countdown-calendar,
.notes-icon { width: 40px; height: 40px; border-radius: 14px; }
.overall-progress-row { margin-top: 25px; }
.overall-track { height: 10px; }
.overall-fill { background: linear-gradient(90deg, #a5cd79, #318265); }
.overall-percent { font-size: 16px; }
.overview-footer { margin-top: 14px; font-size: 12px; }

.countdown-card { display: flex; flex-direction: column; justify-content: center; }
.countdown-heading h2,
.notes-heading h2 { font-size: 19px; }
.countdown-date { margin: 8px 0 17px; font-size: 12px; }
.countdown-units { gap: clamp(8px, 2vw, 21px); }
.countdown-unit { min-width: 65px; padding: 9px 8px; border: 1px solid #e8efe7; border-radius: 13px; background: #f7faf6; }
.countdown-unit strong { color: var(--green-dark); font-size: 30px; }
.countdown-unit span { font-size: 10px; }
.countdown-separator { padding-top: 12px; color: #a7bba9; }
.countdown-message { margin-top: 13px; font-size: 11px; }

.motivation {
    min-height: 128px;
    padding: 25px 29px;
    background: linear-gradient(105deg, #eaf3df, #f3f7e9 74%, #e8f1dd);
}
.motivation-icon { width: 49px; height: 49px; flex-basis: 49px; border-radius: 16px; }
.motivation h2 { font-size: 17px; }
.motivation-message { font-size: 12px; }
.motivation-decoration { left: 32px; color: rgba(111, 147, 74, .09); }

.notes-card { padding: 25px 29px; }
.notes-description { margin: 9px 0 15px; font-size: 12px; }
.notes-input { min-height: 145px; padding: 15px 17px; border-radius: 13px; background-color: #fcfdfb; font-size: 13px; }
.notes-status { margin-top: 9px; font-size: 10px; }

.courses-heading {
    align-items: end;
    margin: 12px 0 -3px;
}
.courses-heading h2 { font-size: 22px; }
.courses-heading > p { font-size: 12px; }
.course-grid { gap: 20px; }
.course-card { padding: 25px; transition: transform .22s ease, box-shadow .22s ease; }
.course-card:hover { transform: translateY(-3px); box-shadow: 0 18px 42px rgba(35, 75, 55, .09); }
.course-icon { width: 43px; height: 43px; border-radius: 14px; font-size: 20px; }
.course-card h3 { margin-top: 15px; font-size: 19px; }
.course-subtitle { font-size: 11px; }
.course-progress-line { margin-top: 22px; font-size: 12px; }
.course-percent { font-size: 14px; }
.course-track { height: 8px; margin-top: 11px; }
.list-heading { margin-top: 25px; font-size: 12px; }
.list-hint { font-size: 10px; }
.search-box { height: 43px; padding: 0 12px; border-radius: 11px; }
.search-box input { font-size: 12px; }
.section-list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; max-height: 245px; padding: 12px 2px 12px 0; }
.section-item { min-height: 37px; padding: 6px 9px; border-radius: 9px; }
.section-number { font-size: 11px; }
.section-checkbox { width: 16px; height: 16px; flex-basis: 16px; }
.list-footer { padding-top: 12px; font-size: 10px; }
.next-button { font-size: 11px; }
.page-footer { padding: 12px 0 22px; font-size: 11px; }
.toast { z-index: 20; }

@media (max-width: 760px) {
    .page-shell { width: min(560px, calc(100% - 30px)); }
    main { grid-template-columns: minmax(0, 1fr); gap: 15px; padding-top: 16px; }
    .hero,
    .overview,
    .countdown-card,
    .motivation,
    .notes-card,
    .courses-heading,
    .course-grid,
    .page-footer { grid-column: 1; }
    .topbar { height: 68px; }
    .hero { min-height: 270px; padding: 34px 29px; }
    .hero h1 { font-size: clamp(34px, 8vw, 44px); }
    .hero-art { transform: scale(.82); }
    .overview, .countdown-card { padding: 22px; }
    .countdown-unit { min-width: 58px; }
    .course-grid { grid-template-columns: 1fr; gap: 15px; }
    .course-card { padding: 22px; }
    .courses-heading { margin: 9px 0 0; }
}

@media (max-width: 520px) {
    .page-shell { width: calc(100% - 28px); }
    .topbar-note { max-width: 190px; padding: 8px 10px; font-size: 10px; white-space: nowrap; }
    .hero { min-height: 245px; padding: 29px 21px; border-radius: 23px; }
    .hero-art { left: -28px; bottom: -34px; opacity: .31; transform: scale(.72); transform-origin: bottom left; }
    .hero-copy { max-width: 100%; }
    .hero h1 { font-size: clamp(31px, 9vw, 39px); }
    .hero-description { max-width: 260px; font-size: 12px; }
    .overview, .countdown-card, .notes-card { padding: 20px 18px; border-radius: 18px; }
    .overview-milestone { display: none; }
    .countdown-units { gap: 6px; }
    .countdown-unit { min-width: 0; flex: 1; padding: 8px 4px; }
    .countdown-unit strong { font-size: 25px; }
    .countdown-separator { padding-top: 11px; font-size: 19px; }
    .motivation { min-height: 108px; padding: 17px; }
    .courses-heading { display: block; }
    .courses-heading > p { margin-top: 5px; }
    .section-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .page-footer { font-size: 9px; }
}

.course-card {
    border-color: rgba(36, 82, 62, .09);
    background: #fff;
    color: var(--ink);
    box-shadow: 0 12px 35px rgba(35, 75, 55, .055);
}
.course-card:hover { box-shadow: 0 18px 42px rgba(35, 75, 55, .09); }
.course-card h3,
.course-card .list-heading { color: var(--ink); }
.course-subtitle,
.course-count,
.list-hint,
.list-footer { color: var(--ink-soft); }
.course-percent { color: var(--green); }
.course-track { background: #edf2ed; }
.course-card--quantitative .course-percent { color: #b17a2e; }
.course-card--quantitative .course-track { background: #edf2ed; }
.reset-button { color: #89978f; }
.reset-button:hover { background: #f8eeee; color: #b14d4d; }
.search-box { border-color: #e8eee8; background: #fbfcfa; }
.search-box:focus-within { border-color: #9dc7ad; box-shadow: 0 0 0 3px rgba(39, 124, 99, .08); }
.search-icon { color: #91a19a; }
.search-box input { color: var(--ink); }
.search-box input::placeholder { color: #a2aea8; }
.section-item { border-color: #edf1ed; background: #fff; }
.section-item:hover { border-color: #bfd9c5; }
.section-item.is-complete { border-color: #d9eadd; background: #f0f7ef; }
.section-number { color: #566a60; }
.section-checkbox { accent-color: var(--green); }
.empty-state { color: var(--muted); }
.list-footer { border-top-color: #f0f3f0; }
.next-button { color: var(--green); }
.next-button:hover { color: var(--green-dark); }
.course-card--quantitative .section-item.is-complete { border-color: #eadfc9; background: #fbf5e9; }
.course-card--quantitative .section-checkbox { accent-color: #c28b3c; }

.starting-point { display: flex; align-items: center; gap: 8px; margin-top: 15px; padding: 9px 10px; border: 1px solid #e8eee8; border-radius: 10px; background: #f8faf7; }
.starting-point label { flex: 1; color: var(--ink-soft); font-size: 10px; }
.starting-point-input { width: 58px; height: 32px; padding: 4px; border: 1px solid #dfe8df; border-radius: 8px; outline: 0; background: white; color: var(--ink); font-family: "DM Sans", sans-serif; text-align: center; }
.starting-point-input:focus { border-color: #9dc7ad; box-shadow: 0 0 0 3px rgba(39, 124, 99, .08); }
.starting-point-button { min-height: 32px; padding: 0 11px; border: 0; border-radius: 8px; background: #e8f2e9; color: var(--green-dark); font-size: 10px; font-weight: 600; cursor: pointer; }
.starting-point-button:hover { background: #dcebdc; }

@media (max-width: 520px) {
    .page-shell { width: min(100% - 24px, 430px); }
    main { gap: 13px; }
    .topbar { gap: 8px; }
    .topbar-note { max-width: 172px; overflow: hidden; text-overflow: ellipsis; }
    .hero { padding-inline: 19px; }
    .overview,
    .countdown-card,
    .motivation,
    .notes-card,
    .daily-card,
    .course-card { border-radius: 17px; }
    .daily-goals { gap: 10px; }
    .count-button { width: 36px; height: 36px; }
    .section-list { gap: 7px; }
    .section-item { justify-content: space-between; gap: 4px; padding-inline: 7px; }
    .starting-point { gap: 6px; padding: 8px; }
    .starting-point label { font-size: 9px; }
    .starting-point-input { width: 50px; }
}

@media (max-width: 380px) {
    .topbar-note { max-width: 145px; font-size: 9px; }
    .brand { gap: 8px; font-size: 18px; }
    .brand-mark { width: 35px; height: 35px; }
    .hero { min-height: 230px; }
    .hero-art { opacity: .2; }
    .hero h1 { font-size: clamp(29px, 8.5vw, 33px); }
    .hero-description { max-width: 235px; }
    .daily-goals { grid-template-columns: 1fr; }
    .daily-goal { padding: 14px; }
    .goal-target-label { margin-top: -34px; }
    .section-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (hover: none) {
    .course-card:hover { transform: none; }
}

.plan-steps--four { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.course-card[hidden],
.daily-goal[hidden],
.plan-step[hidden] { display: none !important; }
.quant-source-choice {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    min-width: 0;
    padding: 17px;
    margin: -3px 0 0;
    border: 1px solid rgba(36, 82, 62, .09);
    border-radius: 17px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 8px 25px rgba(35, 75, 55, .04);
}
.quant-source-choice legend { grid-column: 1 / -1; padding: 0 5px; color: var(--ink-soft); font-size: 11px; font-weight: 600; }
.quant-source-option { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 11px 13px; border: 1px solid #e6ede5; border-radius: 12px; background: #fbfcfa; cursor: pointer; transition: background .18s, border-color .18s, box-shadow .18s; }
.quant-source-option:hover { border-color: #b7d1b8; }
.quant-source-option.is-selected { border-color: #7aa983; background: #edf5eb; box-shadow: inset 0 0 0 1px rgba(39, 124, 99, .08); }
.quant-source-option input { width: 16px; height: 16px; margin: 0; accent-color: var(--green); }
.quant-source-content { display: flex; flex: 1; flex-direction: column; gap: 2px; }
.quant-source-content strong { color: var(--ink); font-size: 12px; }
.quant-source-content small { color: var(--ink-soft); font-size: 10px; }
.quant-source-check { color: transparent; font-size: 15px; }
.quant-source-option.is-selected .quant-source-check { color: var(--green); }
.section-item { gap: 5px; }
.section-pick { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 5px; min-width: 0; cursor: pointer; }
.section-note-trigger { display: grid; width: 25px; height: 25px; flex: 0 0 25px; place-items: center; border: 0; border-radius: 7px; background: transparent; color: #93a49a; font-size: 14px; cursor: pointer; }
.section-note-trigger:hover,
.section-note-trigger.has-note { background: #e8f2e9; color: var(--green); }
.section-note-trigger.has-note { position: relative; }
.section-note-trigger.has-note::after { position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: #d29d4a; content: ""; }
.section-note-dialog { width: min(460px, calc(100% - 28px)); max-width: none; padding: 0; border: 1px solid #dfe9df; border-radius: 20px; background: #fff; color: var(--ink); box-shadow: 0 24px 70px rgba(17, 48, 36, .25); }
.section-note-dialog::backdrop { background: rgba(14, 35, 29, .45); backdrop-filter: blur(3px); }
.section-note-dialog-inner { padding: 22px; }
.section-note-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.section-note-dialog-heading h2 { margin: 0; font-size: 17px; }
.section-note-close { display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 10px; background: #f0f4ef; color: var(--ink-soft); font-size: 22px; cursor: pointer; }
.section-note-input { min-height: 150px; }
.section-note-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.section-note-actions > span { color: var(--muted); font-size: 10px; }
.reminder-button { min-height: 36px; padding: 0 13px; border: 0; border-radius: 9px; background: var(--green); color: white; font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }
.reminder-button:hover { background: var(--green-dark); }
.note-reminder { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 14px 0 0; margin-top: 14px; border-top: 1px solid #edf1ec; }
.reminder-toggle { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 11px; }
.reminder-toggle input { width: 16px; height: 16px; accent-color: var(--green); }
.reminder-time-label { color: var(--ink-soft); font-size: 10px; }
.reminder-time { height: 35px; padding: 4px 7px; border: 1px solid #e3ebe2; border-radius: 8px; background: #fbfcfa; color: var(--ink); font-family: "DM Sans", sans-serif; }
.note-reminder .reminder-button { grid-column: 2 / -1; justify-self: end; }
.reminder-status { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }

@media (max-width: 900px) {
    .plan-steps--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .quant-source-choice { grid-column: 1; }
}

@media (max-width: 520px) {
    .quant-source-choice { padding: 13px; }
    .quant-source-option { gap: 7px; padding: 10px 8px; }
    .quant-source-content strong { font-size: 11px; }
    .quant-source-content small { font-size: 9px; }
    .plan-steps--four { grid-template-columns: 1fr; }
    .note-reminder { grid-template-columns: 1fr auto; }
    .reminder-toggle { grid-column: 1 / -1; }
    .reminder-time-label { grid-column: 1; }
    .reminder-time { grid-column: 2; justify-self: end; }
    .note-reminder .reminder-button { grid-column: 1 / -1; justify-self: stretch; }
}

:root {
    --ink: #193b33;
    --ink-soft: #667970;
    --green: #34745d;
    --green-dark: #245846;
    --green-pale: #e8f1e8;
    --paper: #edf2ec;
    --line: #e3ebe3;
    --muted: #87978e;
    --shadow: 0 16px 42px rgba(32, 67, 51, .08);
}

body {
    background:
        radial-gradient(ellipse at 92% 0%, rgba(207, 225, 203, .56), transparent 31rem),
        radial-gradient(ellipse at 5% 42%, rgba(227, 235, 222, .58), transparent 28rem),
        #edf2ec;
}

.topbar {
    border-bottom-color: rgba(37, 79, 60, .08);
}

.brand-mark {
    box-shadow: 0 7px 17px rgba(35, 101, 75, .2);
}

.topbar-note {
    border-color: rgba(52, 116, 93, .12);
    background: rgba(255, 255, 255, .76);
    box-shadow: 0 4px 14px rgba(32, 67, 51, .035);
}

.hero {
    background:
        radial-gradient(circle at 16% 95%, rgba(151, 190, 133, .2), transparent 20rem),
        linear-gradient(118deg, #193f36, #245d4b 70%, #2d7056);
    box-shadow: 0 22px 48px rgba(27, 74, 58, .17);
}

.overview,
.countdown-card,
.motivation,
.notes-card,
.daily-card,
.course-card,
.quant-source-choice {
    border-color: rgba(46, 89, 65, .09);
    box-shadow: 0 12px 32px rgba(37, 73, 58, .055);
}

.overview,
.countdown-card,
.notes-card,
.daily-card,
.course-card {
    background: rgba(255, 255, 255, .96);
}

.overview,
.countdown-card,
.notes-card,
.daily-card,
.course-card,
.quant-source-choice {
    transition: box-shadow .22s ease, border-color .22s ease;
}

.overview:hover,
.countdown-card:hover,
.notes-card:hover,
.daily-card:hover,
.course-card:hover {
    border-color: rgba(52, 116, 93, .17);
    box-shadow: 0 17px 38px rgba(37, 73, 58, .08);
}

.countdown-unit {
    border-color: #e7eee6;
    background: linear-gradient(180deg, #fafcf9, #f5f8f3);
}

.motivation {
    border-color: rgba(126, 151, 91, .12);
    background: linear-gradient(110deg, #e8f0df, #f4f6e9 72%, #e8efdf);
}

.daily-card {
    background:
        radial-gradient(ellipse at 100% 0%, rgba(230, 239, 226, .32), transparent 24rem),
        rgba(255, 255, 255, .97);
}

.quant-source-choice {
    background: rgba(255, 255, 255, .9);
}

.quant-source-option {
    border-color: #e5ece4;
    background: #f9fbf8;
}

.quant-source-option.is-selected {
    border-color: #8eb29a;
    background: #edf5eb;
    box-shadow: inset 0 0 0 1px rgba(52, 116, 93, .1), 0 5px 13px rgba(52, 116, 93, .06);
}

.section-item {
    border-color: #e9eee8;
    box-shadow: 0 2px 6px rgba(37, 73, 58, .025);
}

.section-item.is-complete {
    border-color: #d3e4d4;
    background: #edf5ec;
}

.section-note-trigger:hover,
.section-note-trigger.has-note {
    background: #e6f0e5;
}

button,
input,
textarea {
    accent-color: var(--green);
}

:where(a, button, input, textarea, .section-item, .quant-source-option):focus-visible {
    outline: 3px solid rgba(52, 116, 93, .3);
    outline-offset: 3px;
}

.count-button,
.starting-point-button,
.reminder-button {
    transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.count-button:hover,
.starting-point-button:hover,
.reminder-button:hover {
    box-shadow: 0 5px 12px rgba(37, 73, 58, .1);
}

.page-footer {
    color: #74867b;
}

@media (max-width: 760px) {
    .overview:hover,
    .countdown-card:hover,
    .notes-card:hover,
    .daily-card:hover,
    .course-card:hover {
        box-shadow: 0 12px 32px rgba(37, 73, 58, .055);
    }
}

.activity-card {
    grid-column: 1 / -1;
    min-width: 0;
    padding: 22px 26px 0;
    overflow: hidden;
    border: 1px solid rgba(46, 89, 65, .09);
    border-radius: 21px;
    background:
        radial-gradient(ellipse at 100% 0%, rgba(226, 238, 219, .54), transparent 25rem),
        rgba(255, 255, 255, .96);
    box-shadow: 0 12px 32px rgba(37, 73, 58, .055);
}

.streak-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding-bottom: 20px;
}

.streak-icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 16px;
    background: #f8edda;
    color: #a77a37;
    font-size: 23px;
}

.streak-copy { min-width: 0; }
.streak-copy .section-kicker { margin-bottom: 3px; }
.streak-copy h2 { margin: 0; color: var(--ink); font-size: 18px; }
.streak-status { margin: 5px 0 0; color: var(--ink-soft); font-size: 11px; }
.streak-stats { display: flex; align-items: center; gap: 9px; }

.streak-stat {
    display: grid;
    min-width: 91px;
    gap: 2px;
    justify-items: center;
    padding: 9px 13px;
    border: 1px solid #e6eee5;
    border-radius: 13px;
    background: rgba(248, 251, 247, .9);
}

.streak-stat strong {
    color: var(--green-dark);
    font-family: "DM Sans", sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
}

.streak-stat span { color: var(--muted); font-size: 9px; }
.streak-stat--best { background: #fbf8ef; border-color: #f0ead8; }
.streak-stat--best strong { color: #a77a37; }

.activity-log { border-top: 1px solid #edf1ec; }

.activity-log summary {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.activity-log summary::-webkit-details-marker { display: none; }
.activity-log summary::before { content: "＋"; color: var(--green); font-size: 16px; }
.activity-log[open] summary::before { content: "−"; }
.activity-log summary > span:first-of-type { margin-left: auto; }

.activity-log-count {
    padding: 4px 9px;
    border-radius: 999px;
    background: #eef4ed;
    color: var(--green-dark);
    font-size: 9px;
    font-weight: 500;
}

.activity-list {
    display: grid;
    max-height: 320px;
    gap: 0;
    overflow-y: auto;
    padding: 0 4px 0 0;
    margin: 0;
    list-style: none;
    scrollbar-color: #cfddd1 transparent;
    scrollbar-width: thin;
}

.activity-entry {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid #f0f3ef;
}

.activity-entry-message { color: var(--ink-soft); font-size: 11px; line-height: 1.75; }
.activity-entry-time { flex: 0 0 auto; color: var(--muted); font-size: 9px; white-space: nowrap; }
.activity-empty { padding: 10px 0 0; margin: 0; color: var(--muted); font-size: 11px; }
.activity-footnote { margin: 10px 0 14px; color: #96a39b; font-size: 9px; }

@media (max-width: 760px) {
    .activity-card { grid-column: 1; padding: 19px 19px 0; }
    .streak-summary { grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
    .streak-stats { grid-column: 1 / -1; }
    .streak-stat { flex: 1; }
}

@media (max-width: 420px) {
    .activity-card { padding-inline: 15px; border-radius: 17px; }
    .streak-icon { width: 42px; height: 42px; border-radius: 14px; }
    .streak-copy h2 { font-size: 16px; }
    .streak-status { font-size: 10px; line-height: 1.6; }
    .streak-stats { gap: 7px; }
    .streak-stat { min-width: 0; padding: 8px; }
    .activity-entry { display: grid; gap: 3px; }
    .activity-entry-time { font-size: 9px; }
}

.email-reminder {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, .75fr);
    gap: 14px 18px;
    padding: 18px 0 2px;
    margin-top: 17px;
    border-top: 1px solid #e8eee7;
}

.email-reminder-heading {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    grid-column: 1 / -1;
}

.email-reminder-icon {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border-radius: 12px;
    background: #e8f1e8;
    color: var(--green);
    font-family: "DM Sans", sans-serif;
    font-size: 18px;
    font-weight: 700;
}

.email-reminder-heading h3 {
    margin: 0;
    color: var(--ink);
    font-size: 13px;
}

.email-reminder-heading p {
    margin: 4px 0 0;
    color: var(--ink-soft);
    font-size: 10px;
    line-height: 1.7;
}

.email-field,
.email-time-field {
    display: grid;
    align-content: start;
    gap: 6px;
    color: var(--ink-soft);
    font-size: 10px;
}

.email-field input {
    width: 100%;
    min-width: 0;
    height: 39px;
    padding: 7px 11px;
    border: 1px solid #e2eae1;
    border-radius: 9px;
    outline: 0;
    background: #fafcf9;
    color: var(--ink);
    direction: ltr;
    text-align: left;
    font-family: "DM Sans", sans-serif;
    font-size: 12px;
}

.email-field input:focus,
.email-time-field input:focus {
    border-color: #9dc7ad;
    box-shadow: 0 0 0 3px rgba(52, 116, 93, .09);
}

.email-reminder-settings {
    display: flex;
    align-items: end;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 9px;
}

.email-time-field { width: 105px; }
.email-time-field .reminder-time { width: 100%; }
.email-reminder-settings .reminder-button { min-height: 39px; }

.email-disable-button {
    min-height: 39px;
    padding: 0 12px;
    border: 1px solid #eadcda;
    border-radius: 9px;
    background: #fff9f8;
    color: #985b53;
    font: inherit;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
}

.email-disable-button:hover {
    border-color: #dfc5c1;
    background: #fbefed;
}

.email-reminder-status {
    grid-column: 1 / -1;
    margin: -4px 0 0;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.7;
}

.email-reminder-status.is-error { color: #a64e47; }
.email-reminder button:disabled { cursor: wait; opacity: .65; }

@media (max-width: 520px) {
    .email-reminder { grid-template-columns: 1fr; gap: 12px; }
    .email-reminder-heading { gap: 9px; }
    .email-reminder-settings { align-items: end; }
    .email-time-field { width: 100px; }
    .email-reminder-settings .reminder-button,
    .email-reminder-settings .email-disable-button { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .overview,
    .countdown-card,
    .notes-card,
    .daily-card,
    .course-card,
    .count-button,
    .starting-point-button,
    .reminder-button {
        transition: none;
    }
}

/* Unified sage dashboard refinements */
:root {
    --ink: #263d35;
    --ink-soft: #6b7b72;
    --green: #587d68;
    --green-dark: #3d6652;
    --green-pale: #e8eee7;
    --lime: #dce8c5;
    --paper: #f0f3ed;
    --line: #e5ebe3;
    --muted: #8d9a91;
    --gold: #c99a59;
    --shadow: 0 16px 40px rgba(44, 67, 52, .07);
}

body {
    background:
        radial-gradient(ellipse at 92% 0%, rgba(198, 215, 187, .26), transparent 28rem),
        linear-gradient(180deg, #f3f5f0 0%, #edf1eb 100%);
    color: var(--ink);
}

.page-shell { width: min(1160px, calc(100% - 56px)); }

.topbar {
    height: 82px;
    border-bottom-color: rgba(57, 82, 65, .1);
}

.brand-mark {
    background: linear-gradient(145deg, #6d8d77, #456c57);
    box-shadow: 0 7px 16px rgba(57, 96, 70, .2);
}

.topbar-note {
    border-color: rgba(75, 111, 84, .12);
    background: rgba(255, 255, 255, .72);
    color: #607367;
}

main { gap: 20px; padding-top: 23px; }

.hero {
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 30px;
    background:
        radial-gradient(circle at 12% 100%, rgba(192, 213, 160, .2), transparent 21rem),
        linear-gradient(118deg, #344f42 0%, #4d7058 58%, #668269 100%);
    box-shadow: 0 22px 48px rgba(52, 79, 63, .16);
}

.hero h1 span { color: #dce8b9; }
.hero .eyebrow, .hero .eyebrow-line { color: #c5d6af; }
.hero .eyebrow-line { background: #c5d6af; }
.hero-book { background: linear-gradient(145deg, #819c75, #4a7056); }
.hero-badge { color: #52705c; }

.overview,
.countdown-card,
.activity-card,
.daily-card,
.notes-card,
.course-card,
.quant-source-choice {
    border: 1px solid rgba(63, 91, 67, .1);
    border-radius: 22px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 10px 28px rgba(44, 67, 52, .045);
}

.overview,
.countdown-card,
.daily-card,
.notes-card,
.course-card,
.activity-card {
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.overview:hover,
.countdown-card:hover,
.daily-card:hover,
.notes-card:hover,
.activity-card:hover {
    border-color: rgba(87, 125, 96, .18);
    box-shadow: 0 15px 34px rgba(44, 67, 52, .075);
}

.overview, .countdown-card { padding: 27px 29px; }
.overview-icon, .countdown-calendar, .notes-icon, .daily-icon { background: #edf2e9; color: #5b7d63; }
.overall-track, .course-track, .daily-track { background: #e9eee7; }
.overall-fill, .course-fill, .daily-fill { background: linear-gradient(90deg, #a9bf8d, #62836a); }
.overall-percent, .course-percent { color: #56785e; }

.countdown-unit {
    border-color: #e8ede5;
    background: linear-gradient(180deg, #fbfcfa, #f4f7f2);
}

.countdown-unit strong { color: #4a6d55; }
.countdown-separator { color: #a7b5a4; }

.motivation {
    border: 1px solid rgba(116, 139, 86, .13);
    border-radius: 21px;
    background: linear-gradient(110deg, #e8efdf 0%, #f2f5e9 74%, #e8eee1 100%);
}

.daily-card, .notes-card { padding: 28px 30px; }
.daily-goal { border-radius: 17px; background: #f7f9f5; }
.daily-goal--quantitative { background: #faf8f1; }
.verbal-mark { background: #e7eee4; color: #5b7d63; }
.quant-mark { background: #f2ead9; color: #a47c42; }
.daily-fill { background: linear-gradient(90deg, #adbf8e, #64826a); }
.daily-goal--quantitative .daily-fill { background: linear-gradient(90deg, #e0c58d, #b38b51); }
.count-button {
    width: 36px;
    height: 36px;
    border-color: #dce6d9;
    border-radius: 11px;
    background: #eaf0e7;
    color: #4f7258;
}
.count-button--minus { background: #fff; color: #738176; }
.plan-step { border-color: #e9eee7; border-radius: 14px; background: #fafbf9; }
.plan-step-number { background: #e7eee3; color: #587a60; }
.plan-step-number--gold { background: #f3ecdf; color: #a27a43; }

.activity-card {
    padding: 22px 27px 0;
    background:
        radial-gradient(ellipse at 100% 0%, rgba(226, 235, 219, .54), transparent 25rem),
        rgba(255, 255, 255, .96);
}

.activity-card[data-streak-state="completed"] {
    border-color: rgba(91, 128, 94, .25);
}

.streak-icon {
    border-radius: 16px;
    background: #f3ecdc;
    color: #a88048;
}

.activity-card[data-streak-state="completed"] .streak-icon {
    background: #e8f0df;
    color: #59805f;
}

.streak-stat {
    border-color: #e5ebe3;
    border-radius: 15px;
    background: #f7f9f5;
}

.streak-stat strong { color: #587a60; }
.streak-stat--best { border-color: #eee8d8; background: #faf8f1; }
.streak-stat--best strong { color: #a88048; }

.streak-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 9px;
    padding: 14px 0 17px;
    border-top: 1px solid #edf1eb;
}

.streak-week-day {
    display: grid;
    min-width: 0;
    justify-items: center;
    gap: 6px;
    color: #8a978c;
    font-size: 10px;
}

.streak-week-marker {
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border: 1px solid #e6ebe3;
    border-radius: 11px;
    background: #f6f8f4;
    color: transparent;
    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    font-weight: 700;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.streak-week-day.is-complete .streak-week-marker {
    border-color: #cddbc6;
    background: #e7efe2;
    color: #52775b;
}

.streak-week-day.is-today .streak-week-marker {
    outline: 2px solid rgba(92, 126, 94, .28);
    outline-offset: 2px;
}

.streak-week-day.is-today .streak-week-label {
    color: #4f7058;
    font-weight: 700;
}

.activity-log { border-top-color: #e9eee7; }
.activity-log summary { min-height: 55px; }

.notes-input {
    border-color: #e3eae1;
    background-color: #fbfcfa;
    line-height: 1.9;
}

.notes-input:focus,
.reminder-time:focus,
.exam-field input:focus,
.goal-target:focus,
.starting-point-input:focus,
.email-field input:focus,
.search-box:focus-within {
    border-color: #9eb69b;
    box-shadow: 0 0 0 4px rgba(99, 132, 99, .1);
}

.note-reminder {
    border-color: #e7ece4;
    border-radius: 16px;
    background: #f8faf6;
}

.email-reminder {
    padding: 20px;
    border: 1px solid #e5ebe2;
    border-radius: 17px;
    background: linear-gradient(135deg, #fafbf8, #f5f8f2);
}

.email-reminder-icon { background: #e8eee4; color: #55785d; }

.email-field input,
.reminder-time,
.exam-field input,
.goal-target,
.starting-point-input,
.search-box {
    border-color: #e0e8de;
    border-radius: 11px;
    background-color: #fff;
}

.email-reminder-settings .reminder-button,
.reminder-button,
.starting-point-button,
.next-button {
    min-height: 42px;
    border-radius: 11px;
    background: #5b7d64;
    color: #fff;
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.reminder-button:hover,
.starting-point-button:hover {
    background: #496d54;
    box-shadow: 0 6px 14px rgba(70, 105, 78, .16);
    transform: translateY(-1px);
}

.email-disable-button {
    min-height: 42px;
    border-radius: 11px;
}

.quant-source-choice { padding: 19px; }
.quant-source-option { border-color: #e5ebe2; background: #fafbf9; }
.quant-source-option.is-selected { border-color: #aabd9e; background: #edf2e9; }
.quant-source-option input, .section-checkbox { accent-color: #5b7d64; }

.course-card {
    padding: 27px;
    box-shadow: 0 10px 28px rgba(44, 67, 52, .045);
}

.course-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 34px rgba(44, 67, 52, .075);
}

.course-icon { background: #e8eee4; color: #56765e; }
.course-card--quantitative .course-icon { background: #f1ecdf; color: #a27c46; }
.course-card--quantitative .section-checkbox { accent-color: #b28b53; }

.section-item {
    min-height: 40px;
    border-color: #e8ede6;
    border-radius: 11px;
    background: #fff;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.section-item:hover { transform: translateY(-1px); }
.section-item.is-complete { border-color: #d4e0cf; background: #f0f5ed; }
.course-card--quantitative .section-item.is-complete { border-color: #e8dfcb; background: #f8f4ea; }
.search-box { background: #fafbf9; }
.next-button { min-height: 36px; padding-inline: 12px; background: #edf2e9; color: #4e7057; }
.next-button:hover { background: #e2ebdd; color: #3e6349; }

button, input, textarea, summary, .quant-source-option, .section-note-trigger {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.section-note-trigger:focus-visible {
    outline: 3px solid rgba(94, 132, 96, .35);
    outline-offset: 2px;
}

.section-note-dialog { border-color: #dfe7dc; }
.toast { border-radius: 13px; box-shadow: 0 12px 30px rgba(34, 59, 44, .18); }
.page-footer { padding-bottom: 30px; color: #77877a; }

@media (max-width: 760px) {
    .page-shell { width: min(600px, calc(100% - 32px)); }
    main { gap: 15px; padding-top: 17px; }
    .hero { border-radius: 25px; }
    .activity-card { padding-inline: 20px; }
    .daily-card, .notes-card, .course-card { padding: 23px; }
    .streak-week { gap: 6px; }
}

@media (max-width: 520px) {
    .page-shell { width: calc(100% - 24px); }
    .topbar { height: 68px; }
    .topbar-note { max-width: 165px; }
    .hero { min-height: 240px; padding: 28px 20px; border-radius: 22px; }
    .hero h1 { font-size: clamp(30px, 8.5vw, 39px); }
    .overview, .countdown-card, .daily-card, .notes-card, .course-card { padding: 19px 17px; border-radius: 18px; }
    .activity-card { padding: 17px 16px 0; border-radius: 18px; }
    .streak-summary { gap: 11px; }
    .streak-stats { gap: 8px; }
    .streak-stat { padding: 9px 7px; }
    .streak-week { gap: 4px; padding-block: 12px 14px; }
    .streak-week-marker { width: 29px; height: 29px; border-radius: 10px; }
    .streak-week-day { gap: 5px; font-size: 9px; }
    .daily-goals { gap: 9px; }
    .daily-goal { padding: 14px 12px; }
    .countdown-unit { padding-inline: 3px; }
    .email-reminder { padding: 16px; }
    .email-reminder-settings .reminder-button,
    .email-reminder-settings .email-disable-button { flex: 1 1 100%; }
}

@media (max-width: 360px) {
    .topbar-note { max-width: 135px; font-size: 9px; }
    .streak-stats { grid-column: 1 / -1; }
    .daily-goals { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .overview, .countdown-card, .daily-card, .notes-card, .activity-card, .course-card,
    .section-item, .streak-week-marker, .reminder-button, .starting-point-button, .count-button {
        transition: none;
    }
}