:root{font-family:'DM Sans','Noto Sans SC',system-ui,sans-serif;color:#222820;background:#f7f7f2;font-synthesis:none}
html{scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid #d2a86b;outline-offset:3px}
button:disabled{cursor:not-allowed;opacity:.5}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.app-shell{max-width:1440px;margin:auto;padding:0 56px}
.topbar{height:86px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e6e8e0}
.brand{display:inline-flex;align-items:center;gap:10px;color:#233328;text-decoration:none;font-size:24px;font-weight:700;letter-spacing:-.06em}
.brand-dot{color:#d99061}
.brand-mark{width:29px;height:29px;border:2px solid #486b50;border-radius:8px;display:grid;grid-template-columns:repeat(2,1fr);gap:3px;padding:5px;transform:rotate(-8deg)}
.brand-mark span{background:#8ea88c;border-radius:2px}
.brand-mark span:nth-child(2){background:#d9ac7d}
.brand-mark span:nth-child(3){background:#cfddd0}
.brand-mark span:nth-child(4){background:#436d4e}
.topbar-right{display:flex;align-items:center;gap:24px}
.local-badge{color:#758076;font-size:12px;display:flex;align-items:center;gap:8px}
.status-dot,.legend-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#679471}
.button{border-radius:9px;padding:11px 17px;font-size:13px;font-weight:600;transition:transform .15s,background .15s,border-color .15s}
.button:hover,.add-day-button:hover{transform:translateY(-1px)}
.button-dark{background:#284d38;color:#fff;border:1px solid #284d38}
.button-dark:hover{background:#1c3b2a}
.button-outline{background:#fff;color:#36533d;border:1px solid #d9e0d7}
.button-outline:hover{border-color:#879f89;background:#f9fbf7}
.button-plus{font-size:19px;line-height:0;vertical-align:-1px;font-weight:400;margin-right:3px}
.intro{min-height:264px;display:flex;align-items:center;justify-content:space-between;position:relative;overflow:hidden;padding:33px 0 28px}
.eyebrow,.section-kicker{font-size:10px;font-weight:700;letter-spacing:.19em;color:#6f8b73;margin:0 0 15px}
.eyebrow-line{display:inline-block;width:25px;height:1px;background:#b8c8b8;vertical-align:middle;margin:0 8px}
.intro h1{font-size:clamp(32px,3.1vw,49px);line-height:1.26;letter-spacing:-.055em;margin:0;color:#263a2c;font-weight:700}
.intro h1 em{font-style:normal;color:#849f85}
.intro-copy{font-size:14px;color:#89948a;margin:17px 0 0;letter-spacing:.015em}
.intro-art{width:270px;height:220px;position:relative;margin-right:85px;flex-shrink:0}
.art-paper{position:absolute;background:#fff;box-shadow:0 13px 28px rgba(57,81,58,.09);border-radius:10px;width:166px;height:166px;left:50px;top:27px;border:1px solid #e7ebe2}
.paper-back{transform:rotate(12deg);background:#eef1e8}
.paper-front{transform:rotate(-8deg);padding:22px}
.art-month{display:block;width:74px;height:10px;background:#40664b;border-radius:3px}
.art-grid{display:block;margin-top:19px;width:120px;height:102px;background-image:linear-gradient(#e1e9dc 1px,transparent 1px),linear-gradient(90deg,#e1e9dc 1px,transparent 1px);background-size:24px 25px}
.art-check{position:absolute;right:19px;bottom:26px;color:#dc986a;font-size:34px;font-weight:700}
.art-circle{position:absolute;width:51px;height:51px;border:9px solid #dfc2a3;border-radius:50%;top:0;right:17px;opacity:.65}
.workspace{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(320px,1fr);gap:20px;align-items:stretch}
.calendar-card,.day-panel,.archive{border:1px solid #e8ebe3;background:#fff;border-radius:15px;box-shadow:0 7px 24px rgba(39,58,39,.035)}
.calendar-card{padding:27px 29px 16px}
.calendar-heading,.archive-head,.day-panel-head{display:flex;justify-content:space-between;align-items:start}
.calendar-heading h2,.day-panel h2,.archive h2{margin:0;color:#27372b;font-size:27px;letter-spacing:-.055em;line-height:1.25}
.calendar-heading .section-kicker,.day-panel .section-kicker,.archive .section-kicker{margin-bottom:7px}
.month-actions{display:flex;align-items:center;gap:12px}
.today-button{border:0;background:transparent;color:#65806b;font-size:12px;padding:8px}
.today-button:hover{text-decoration:underline}
.arrow-group{display:flex;gap:6px}
.icon-button{width:34px;height:34px;border:1px solid #e2e8df;background:#fff;border-radius:8px;font-size:23px;line-height:26px;color:#4e6754}
.icon-button:hover{background:#f4f8f3}
.weekday-row,.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.weekday-row{margin-top:26px;padding-bottom:12px;text-align:center;color:#9ba69b;font-size:11px}
.weekday-row span:nth-last-child(-n+2){color:#b2a8a0}
.calendar-grid{border-top:1px solid #edf0ea;border-left:1px solid #edf0ea}
.calendar-day{min-height:106px;border:0;border-right:1px solid #edf0ea;border-bottom:1px solid #edf0ea;background:#fff;text-align:left;display:flex;flex-direction:column;padding:10px 7px 6px;gap:4px;min-width:0;color:#415347;position:relative;transition:background .15s}
.calendar-day:hover{background:#f6f9f5}
.calendar-day.other-month{background:#fafbf9;color:#b9c2b7}
.calendar-day.other-month:hover{background:#f4f7f2}
.calendar-day.selected{background:#f1f7ee;box-shadow:inset 0 0 0 2px #6e9475;z-index:1}
.calendar-day.today .day-number{background:#315d40;color:#fff}
.day-number{display:grid;place-items:center;width:25px;height:25px;min-width:25px;border-radius:50%;font-size:12px;font-weight:600}
.day-top{display:flex;align-items:center;justify-content:space-between;width:100%}
.day-record-count{color:#89a38d;font-size:10px}
.day-chip{display:block;max-width:100%;width:100%;padding:3px 5px;border-radius:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:#4c7054;background:#e8f1e8}
.day-chip[data-category="工作"]{color:#66628c;background:#efedf9}
.day-chip[data-category="学习"]{color:#80663e;background:#f7efe0}
.day-chip[data-category="健康"]{color:#a26f61;background:#f8ebe4}
.day-chip[data-category="其他"]{color:#697377;background:#edf1f2}
.day-more{font-size:10px;color:#88998b}
.calendar-foot{display:flex;justify-content:space-between;align-items:center;color:#9ca79b;font-size:11px;margin-top:16px}
.calendar-foot span:first-child{display:flex;align-items:center;gap:7px}
.day-panel{padding:27px 25px 18px;display:flex;flex-direction:column;min-height:520px}
.day-panel h2{font-size:25px}
.day-subtitle{color:#a0aaa0;font-size:12px;margin:8px 0 0}
.day-count{background:#edf3eb;color:#6b8a71;padding:5px 9px;border-radius:20px;font-size:11px;white-space:nowrap;margin-top:26px}
.add-day-button{height:42px;border:1px dashed #9db8a0;background:#f8fbf7;color:#52785a;border-radius:8px;margin-top:25px;font-size:12px;font-weight:600;transition:transform .15s}
.add-day-button span{font-size:18px;vertical-align:-1px;font-weight:400;margin-right:5px}
.day-records{flex:1;padding-top:15px;max-height:406px;overflow:auto}
.empty-day{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:240px;text-align:center;color:#9da99f}
.empty-illustration{width:65px;height:65px;border:1px solid #dce8da;border-radius:18px;display:grid;place-items:center;color:#a2b9a5;font-size:27px;margin-bottom:17px;transform:rotate(-8deg)}
.empty-day strong{color:#6b7c70;font-size:13px;font-weight:600}
.record-card{border-left:2px solid #7aa081;background:#fafbf9;border-radius:0 8px 8px 0;padding:12px 12px 11px;margin-bottom:10px}
.record-card[data-category="工作"]{border-color:#958fc1}
.record-card[data-category="学习"]{border-color:#d5ae6f}
.record-card[data-category="健康"]{border-color:#d99d87}
.record-card[data-category="其他"]{border-color:#9cabaf}
.record-card-top{display:flex;align-items:center;justify-content:space-between;gap:7px}
.record-meta{display:flex;align-items:center;gap:8px;color:#89998b;font-size:11px}
.record-category{font-weight:600;color:#65876b}
.record-card[data-category="工作"] .record-category{color:#7771a0}
.record-card[data-category="学习"] .record-category{color:#aa854d}
.record-card[data-category="健康"] .record-category{color:#bd806a}
.record-card h3{font-size:13px;margin:8px 0 0;font-weight:600;line-height:1.5;overflow-wrap:anywhere}
.record-card p{font-size:11px;color:#859187;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;margin:5px 0 0}
.record-actions{display:flex;gap:4px}
.small-action{border:0;background:transparent;color:#9ba89b;padding:3px 5px;font-size:11px}
.small-action:hover{color:#315d40;text-decoration:underline}
.small-action.delete:hover{color:#b56556}
.day-panel-bottom{border-top:1px solid #f0f2ed;padding-top:16px;color:#abb4aa;font-size:11px;text-align:center;margin-top:8px}
.day-panel-bottom span{color:#d5ae79;margin-right:4px}
.archive{margin-top:24px;overflow:hidden}
.archive-head{padding:27px 29px 20px}
.archive-head h2{font-size:24px}
.archive-head h2 span{color:#93a495;font-size:15px;margin-left:5px}
.archive-head p:not(.section-kicker){font-size:12px;color:#9ca69d;margin:7px 0 0}
.export-actions{display:flex;gap:8px;align-self:center}
.export-panel{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.archive-head p.csv-help{font-size:10px;color:#8b9b8d;margin:3px 0 0;text-align:right}
.export-actions .button{padding:9px 14px}
.archive-toolbar{margin:0 29px 14px;display:flex;align-items:center;gap:11px}
.search-box{height:37px;display:flex;align-items:center;gap:8px;border:1px solid #e4e9e1;background:#fbfcfa;border-radius:8px;padding:0 10px;min-width:240px}
.search-box:focus-within{border-color:#8baa8e}
.search-box svg{width:16px;height:16px;fill:none;stroke:#99a69b;stroke-width:1.7}
.search-box input{border:0;background:transparent;outline:none;width:100%;font-size:12px;color:#334338}
.search-box input::placeholder{color:#a9b2a8}
.filter-label{color:#a4ada3;font-size:11px;margin-left:6px}
.archive-toolbar select{height:37px;border:1px solid #e4e9e1;background:#fbfcfa;border-radius:8px;padding:0 28px 0 10px;color:#5b6e5e;font-size:12px}
.filter-count{margin-left:auto;color:#a0aaa0;font-size:11px}
.table-wrap{min-height:200px;overflow-x:auto}
table{border-collapse:collapse;width:100%;text-align:left}
thead{background:#f9faf7}
th{font-size:10px;letter-spacing:.04em;color:#9aa69b;font-weight:600;padding:13px 29px;border-top:1px solid #edf0e9;border-bottom:1px solid #edf0e9;white-space:nowrap}
td{padding:13px 29px;border-bottom:1px solid #f0f2ed;color:#778579;font-size:12px;vertical-align:middle}
tbody tr:hover{background:#fbfcfa}
td:first-child{color:#455749;font-weight:600;white-space:nowrap}
td:nth-child(2){white-space:nowrap}
.table-title{display:block;color:#354b3b;font-weight:600;max-width:400px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.table-note{display:block;max-width:400px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#a3aea3;margin-top:3px;font-size:11px}
.table-category{display:inline-block;padding:4px 8px;border-radius:20px;background:#e9f2e8;color:#66876b;white-space:nowrap;font-size:11px}
.table-category[data-category="工作"]{background:#efedf9;color:#7771a0}
.table-category[data-category="学习"]{background:#f8efe0;color:#aa854d}
.table-category[data-category="健康"]{background:#f8ebe4;color:#bd806a}
.table-category[data-category="其他"]{background:#edf1f2;color:#758185}
.table-action{color:#6e8c74;border:0;background:none;font-size:11px;white-space:nowrap}
.table-action:hover{text-decoration:underline}
.archive-empty{text-align:center;padding:48px 20px;color:#9aa69b;font-size:12px}
.backup-bar{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:19px 29px;background:#fafbf8}
.backup-bar>div:first-child{display:flex;flex-direction:column;gap:4px}
.backup-bar strong{font-size:12px;color:#697e6d}
.backup-bar span{color:#a5afa6;font-size:11px}
.backup-actions{display:flex;gap:18px;white-space:nowrap}
.text-button{border:0;background:none;color:#68866d;font-size:11px;padding:4px 0}
.text-button:hover{text-decoration:underline}
footer{display:flex;gap:8px;padding:30px 0 35px;color:#a3ada3;font-size:11px}
footer span{color:#c1cbbf}
.footer-right{margin-left:auto!important;color:#a3ada3}
dialog{border:1px solid #e5eae2;border-radius:16px;padding:0;width:min(490px,calc(100% - 24px));max-height:calc(100% - 30px);box-shadow:0 25px 80px rgba(27,47,30,.2);color:#27372b}
dialog::backdrop{background:rgba(28,43,31,.36);backdrop-filter:blur(2px)}
#record-form{padding:26px 28px 25px;overflow:auto}
.dialog-head{display:flex;justify-content:space-between;align-items:start;margin-bottom:23px}
.dialog-head h2{margin:0;font-size:25px;letter-spacing:-.04em}
.dialog-close{width:28px;height:28px;border:0;background:#f4f6f2;color:#809083;border-radius:50%;font-size:22px;line-height:24px}
#record-form label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:600;margin-bottom:17px}
.optional{display:inline;color:#a4afa5;font-weight:400}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#record-form input,#record-form select,#record-form textarea{width:100%;background:#fbfcfa;border:1px solid #dfe6dd;border-radius:8px;padding:10px 11px;color:#344638;font-size:13px;outline:none}
#record-form input:focus,#record-form select:focus,#record-form textarea:focus{border-color:#84a48a}
#record-form textarea{resize:vertical;min-height:100px;line-height:1.5}
.form-error{color:#b65d4e;font-size:11px;margin:-3px 0 12px}
.dialog-actions{display:flex;justify-content:flex-end;gap:9px;border-top:1px solid #eef1eb;padding-top:19px}
.toast{position:fixed;right:24px;bottom:24px;background:#284d38;color:#fff;border-radius:9px;padding:11px 16px;font-size:12px;box-shadow:0 12px 30px rgba(22,48,29,.2);opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .2s,transform .2s;z-index:10}
.toast.show{opacity:1;transform:translateY(0)}

@media(max-width:1050px){.app-shell{padding:0 30px}
.intro-art{margin-right:20px}
.workspace{grid-template-columns:minmax(0,1.55fr) minmax(295px,1fr)}
.calendar-card{padding:24px 18px 15px}
.day-panel{padding:24px 18px 15px}
.calendar-day{min-height:92px}
.day-chip{font-size:9px}
th,td{padding-left:18px;padding-right:18px}
}

@media(max-width:780px){.app-shell{padding:0 19px}
.topbar{height:70px}
.local-badge{display:none}
.intro{min-height:210px}
.intro-art{display:none}
.workspace{grid-template-columns:1fr}
.day-panel{min-height:300px}
.day-records{max-height:none}
.empty-day{min-height:150px}
.archive-head{gap:18px}
.archive-toolbar{flex-wrap:wrap}
.filter-count{width:100%;margin-left:0}
.backup-bar{align-items:start;flex-direction:column}
.backup-actions{gap:22px}
}

@media(max-width:520px){.app-shell{padding:0 12px}
.topbar{height:65px}
.brand{font-size:21px}
.topbar .button{padding:8px 10px;font-size:11px}
.intro{min-height:193px;padding:27px 3px}
.eyebrow{font-size:9px}
.eyebrow-line{width:13px;margin:0 3px}
.intro h1{font-size:31px}
.intro-copy{font-size:12px;line-height:1.7}
.calendar-card,.day-panel{border-radius:12px}
.calendar-card{padding:19px 9px 13px}
.calendar-heading{padding:0 7px}
.calendar-heading h2,.day-panel h2{font-size:22px}
.month-actions{gap:3px}
.today-button{font-size:10px;padding:5px}
.icon-button{width:29px;height:29px;font-size:20px;line-height:22px}
.weekday-row{margin-top:20px}
.calendar-day{min-height:75px;padding:6px 3px;gap:3px}
.day-number{width:21px;height:21px;min-width:21px;font-size:11px}
.day-record-count{font-size:8px}
.day-chip{font-size:8px;padding:2px 3px}
.day-more{font-size:8px}
.calendar-foot{padding:0 7px}
.archive-head{padding:21px 18px;display:block}
.archive-head h2{font-size:22px}
.export-actions{margin-top:17px}
.export-panel{align-items:flex-start}
.archive-head p.csv-help{text-align:left}
.archive-toolbar{margin:0 18px 14px}
.search-box{flex:1;min-width:100%}
.filter-label{margin-left:0}
.table-wrap{overflow-x:auto}
table{min-width:600px}
th,td{padding:11px 13px}
.backup-bar{padding:18px}
.footer-right{display:none}
footer{padding:25px 4px}
}

/* Generated stationery artwork and pointer feedback. */
body{position:relative;min-height:100vh;overflow-x:hidden}
body::before{content:"";position:absolute;inset:0 0 auto;height:720px;background:url("assets/journal-paper.png") center top/cover no-repeat;opacity:.7;mask-image:linear-gradient(#000 0%,#000 54%,transparent 100%);pointer-events:none;z-index:0}
body::after{content:"";position:fixed;inset:0;background:radial-gradient(310px circle at var(--pointer-x,50%) var(--pointer-y,50%),rgba(202,157,101,.16),transparent 72%);opacity:0;transition:opacity .25s;pointer-events:none;z-index:1}
body.pointer-active::after{opacity:1}
.app-shell{position:relative;z-index:2}
.intro-art{transform:translate3d(var(--art-x,0px),var(--art-y,0px),0);transition:transform .35s ease-out}
.intro-flourish{position:absolute;right:-17px;top:-20px;width:150px;height:240px;object-fit:contain;opacity:.46;pointer-events:none;filter:drop-shadow(0 8px 12px rgba(67,89,63,.08));transition:transform .4s ease,opacity .4s ease}
.intro:hover .intro-flourish{transform:rotate(5deg) translateY(-5px);opacity:.62}
.intro:hover h1 em{color:#718f77}
.intro h1 em{transition:color .25s}
.art-paper{z-index:1}
.art-circle{z-index:2}
.brand{transition:color .2s,transform .2s}
.brand:hover{color:#55745c;transform:translateY(-2px)}
.brand-mark{transition:transform .3s,box-shadow .3s}
.brand:hover .brand-mark{transform:rotate(4deg) scale(1.08);box-shadow:0 5px 12px rgba(67,107,78,.15)}
.calendar-card,.day-panel,.archive{transition:border-color .25s,box-shadow .25s,transform .25s}
.calendar-card:hover,.day-panel:hover,.archive:hover{border-color:#d8e4d6;box-shadow:0 13px 35px rgba(42,73,47,.075)}
button{position:relative;overflow:hidden}
.button-ripple{position:absolute;z-index:3;border-radius:50%;background:rgba(92,139,97,.2);pointer-events:none;transform:scale(0);animation:button-wave .55s ease-out forwards}
.button-dark .button-ripple{background:rgba(255,255,255,.3)}
@keyframes button-wave{to{transform:scale(1);opacity:0}}
.button-dark:hover{box-shadow:0 9px 22px rgba(37,78,50,.25)}
.button-outline:hover,.icon-button:hover,.add-day-button:hover{box-shadow:0 6px 16px rgba(67,105,73,.11)}
.button:not(.calendar-day):active,.icon-button:active,.add-day-button:active,.dialog-close:active{transform:scale(.96)}
.icon-button{transition:transform .2s,background .2s,box-shadow .2s}
.icon-button:hover{transform:translateY(-2px);background:#edf5ec}
.today-button,.text-button,.table-action,.small-action{transition:color .2s,background .2s,transform .2s}
.today-button:hover,.text-button:hover,.table-action:hover,.small-action:hover{transform:translateY(-1px)}
.text-button:hover,.small-action:hover,.table-action:hover{background:#edf5ec;border-radius:5px}
.small-action.delete:hover{background:#f9ede8}
.dialog-close:hover{background:#e8f1e7;color:#35563c;transform:rotate(90deg)}
.calendar-day{transition:background .18s,box-shadow .18s,transform .18s}
.calendar-day:hover,.calendar-day:focus-visible{transform:translateY(-2px);background:#f2f8ef;box-shadow:inset 0 0 0 1px #b8ceb8,0 8px 20px rgba(62,99,66,.12);z-index:2}
.calendar-day.selected:hover{box-shadow:inset 0 0 0 2px #6e9475,0 8px 20px rgba(62,99,66,.12)}
.calendar-day:active{transform:scale(.97)}
.day-number,.day-chip{transition:transform .18s,background .18s}
.calendar-day:hover .day-number{transform:scale(1.15)}
.calendar-day:hover .day-chip{transform:translateX(2px)}
.weekday-row span,.calendar-foot{transition:color .2s}
.weekday-row span:hover,.calendar-foot:hover{color:#68876e}
.record-card{transition:transform .2s,box-shadow .2s,background .2s}
.record-card:hover{transform:translateX(3px);background:#f6faf5;box-shadow:0 7px 16px rgba(47,76,52,.07)}
.empty-day{width:100%;border:0;background:transparent;cursor:pointer;transition:background .2s}
.empty-day:hover{background:#fafcf9}
.empty-day:hover .empty-illustration{transform:rotate(2deg) scale(1.08);border-color:#a8c2a9;color:#6b9572}
.empty-illustration{transition:transform .25s,border-color .25s,color .25s}
.empty-hint{font-size:12px;margin:7px 0 0}
.day-panel-bottom span{display:inline-block;transition:transform .3s}
.day-panel-bottom:hover span{transform:rotate(40deg) scale(1.2)}
.search-box,.archive-toolbar select,#record-form input,#record-form select,#record-form textarea{transition:border-color .2s,background .2s,box-shadow .2s}
.search-box:hover,.archive-toolbar select:hover,#record-form label:hover input,#record-form label:hover select,#record-form label:hover textarea{border-color:#a7bea9;background:#fff}
.search-box:focus-within,#record-form input:focus,#record-form select:focus,#record-form textarea:focus{box-shadow:0 0 0 3px rgba(107,151,114,.13)}
tbody tr{cursor:pointer;transition:background .18s}
tbody tr:hover,tbody tr:focus-visible{background:#f3f8f1}
tbody tr:focus-visible{outline:2px solid #8fac91;outline-offset:-2px}
tbody tr:hover td:first-child{box-shadow:inset 3px 0 #7caa82}
tbody tr:hover .table-title{color:#2a6940}
.backup-bar{position:relative;isolation:isolate;transition:background .2s}
.backup-bar::after{content:"";position:absolute;right:25px;top:-12px;width:105px;height:120px;background:url("assets/botanical-flourish.png") center/contain no-repeat;opacity:.14;pointer-events:none;transition:opacity .3s,transform .3s;z-index:-1}
.backup-bar:hover{background:#f5f9f3}
.backup-bar:hover::after{opacity:.25;transform:translateX(-6px) rotate(-4deg)}
footer{transition:color .2s}
footer:hover{color:#78927c}
@media(max-width:780px){body::before{height:520px;background-position:75% top;opacity:.42}.intro-flourish{display:none}.calendar-day:hover{transform:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.intro-art{transform:none!important}body::after{display:none}}

/* Read-only detail and important journal entries. */
.day-markers{display:flex;align-items:center;justify-content:flex-end;gap:3px;min-width:0}
.day-important-star{display:grid;place-items:center;width:15px;height:15px;flex:none;border-radius:50%;background:#f5e6cd;color:#a46f36;font-size:10px;line-height:1}
.calendar-day.has-important:not(.selected){background:#fffcf6}
.calendar-day.has-important:hover{background:#fff7e8}
.day-chip.important{background:#f8ecd9;color:#8d622e;box-shadow:inset 2px 0 #c99457}
.legend-star{font-style:normal;color:#b67f40;font-size:12px;margin-left:7px}
.record-card{cursor:pointer}
.record-card:focus-visible{outline:2px solid #8fac91;outline-offset:2px}
.record-card.important{border-left-color:#c18b4e;background:#fffaf1}
.record-card.important:hover{background:#fff6e7;box-shadow:0 7px 16px rgba(136,93,45,.1)}
.important-badge{color:#9a6d35;background:#f6e9d4;border-radius:20px;padding:3px 7px;font-size:10px;white-space:nowrap}
.flag-action{font-size:15px;color:#a77b47;line-height:1}
.flag-action[aria-pressed="true"]{color:#bb7d29}
tbody tr.important{background:#fffdf8}
tbody tr.important:hover,tbody tr.important:focus-visible{background:#fff8e9}
.table-title-line{display:flex;align-items:center;gap:6px;min-width:0}
.table-important{flex:none;color:#b37a38;font-size:13px}
.table-title-line .table-title{min-width:0}
#view-dialog{width:min(640px,calc(100% - 24px));background:#fffefa;overflow:hidden}
#view-dialog.important{border-color:#dec29b}
.view-content{padding:31px 34px 28px;max-height:calc(100vh - 40px);overflow:auto}
.view-content .dialog-head{margin-bottom:25px;padding-bottom:17px;border-bottom:1px solid #e9eee5}
.view-date{font-size:13px;color:#6c806f;margin:0;font-weight:600}
.view-heading{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.view-heading h2{font-size:29px;letter-spacing:-.04em;line-height:1.35;margin:0;color:#283d2e;overflow-wrap:anywhere}
.view-important{display:inline-flex;align-items:center;white-space:nowrap;border-radius:20px;padding:6px 10px;background:#f6e8d0;color:#9f7036;font-size:11px;font-weight:700;margin-top:7px}
.view-important[hidden]{display:none}
.view-meta{display:flex;align-items:center;gap:9px;margin-top:16px;color:#718674;font-size:12px}
.view-meta span{border-radius:20px;background:#edf4eb;padding:5px 10px}
.view-meta #view-time[hidden]{display:none}
.view-note{margin-top:26px;padding:22px 23px;min-height:145px;max-height:42vh;overflow:auto;border:1px solid #edf0e8;border-radius:10px;background:#fafbf8;color:#475b4c;font-size:14px;line-height:1.85;white-space:pre-wrap;overflow-wrap:anywhere}
.view-note.is-empty{color:#a0aba1}
#view-dialog.important .view-note{border-color:#efdfc6;background:#fffcf7}
.view-actions{display:flex;justify-content:space-between;gap:10px;margin-top:24px}
.view-actions .button{min-height:41px}
#view-toggle-important[aria-pressed="true"]{color:#9b6e37;border-color:#dbc094;background:#fff8eb}
#record-form label.important-toggle{flex-direction:row;align-items:center;gap:12px;padding:13px 14px;border:1px solid #e8dfd0;border-radius:9px;background:#fffcf7;cursor:pointer}
#record-form .important-toggle input{width:18px;height:18px;flex:none;margin:0;accent-color:#b78344;cursor:pointer}
.important-toggle-copy{display:flex;flex-direction:column;gap:3px}
.important-toggle-copy strong{font-size:12px;color:#786246}
.important-toggle-copy small{font-size:10px;color:#a3917b;font-weight:400}
#record-form label.important-toggle:has(input:checked){background:#fff5e5;border-color:#d8b782}
#record-form label.important-toggle:has(input:checked) strong{color:#956b34}
@media(max-width:520px){.day-markers{gap:2px}.day-important-star{width:13px;height:13px;font-size:9px}.legend-star{margin-left:3px}.calendar-foot{font-size:10px}.view-content{padding:23px 20px}.view-heading h2{font-size:24px}.view-actions{flex-direction:column}.view-actions .button{width:100%}}

/* Calm controls, roomy editor, and a compact year overview. */
html{scrollbar-color:#b5c8b3 #f3f5ef;scrollbar-width:thin;scrollbar-gutter:stable;overflow-x:clip}
html:has(dialog[open]){overflow:hidden}
*{scrollbar-color:#b5c8b3 transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#f3f5ef;border-radius:10px}
::-webkit-scrollbar-thumb{background:#b5c8b3;border:2px solid #f3f5ef;border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:#88a88c}
.day-records::-webkit-scrollbar-track,.view-content::-webkit-scrollbar-track,#record-form::-webkit-scrollbar-track{background:transparent}
.day-records::-webkit-scrollbar-thumb,.view-content::-webkit-scrollbar-thumb,#record-form::-webkit-scrollbar-thumb{border-color:#fff}
.header-overview-link{display:inline-flex;align-items:center;gap:13px;text-decoration:none;white-space:nowrap}
.header-overview-link span{font-size:17px;line-height:1;transition:transform .2s}
.header-overview-link:hover span{transform:translate(2px,-2px)}
.record-card{border:1px solid #e6eee3;border-left:3px solid #7aa081;border-radius:10px;padding:14px 15px 12px;margin-bottom:11px}
.record-card.important{border-color:#efdfc6;border-left-color:#c18b4e}
.record-card[data-category]:not(.important){border-color:#e6eee3}
.record-card[data-category="工作"]:not(.important){border-left-color:#958fc1}
.record-card[data-category="学习"]:not(.important){border-left-color:#d5ae6f}
.record-card[data-category="健康"]:not(.important){border-left-color:#d99d87}
.record-card[data-category="其他"]:not(.important){border-left-color:#9cabaf}
.record-card-top{align-items:flex-start}
.record-meta{flex-wrap:wrap;gap:6px 10px}
.record-card h3{font-size:14px;margin-top:11px}
.record-card p{font-size:12px;line-height:1.65;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.record-card-bottom{border-top:1px solid #e9efe7;margin-top:13px;padding-top:10px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.record-card.important .record-card-bottom{border-top-color:#f0e2cc}
.record-open-hint{color:#99a79a;font-size:10px;white-space:nowrap}
.record-actions{gap:5px;flex-wrap:wrap;justify-content:flex-end}
.small-action{border:1px solid #dde8db;background:#fff;color:#5c7c62;border-radius:6px;min-height:28px;padding:4px 8px;font-size:10px;font-weight:600;white-space:nowrap}
.small-action:hover{border-color:#aac4ac;text-decoration:none;background:#f0f7ef}
.small-action.flag-action{color:#9c713d;border-color:#eadcc5}
.small-action.flag-action:hover,.small-action.flag-action[aria-pressed="true"]{background:#fff3df;border-color:#d9b984;color:#9c682d}
.small-action.delete{color:#a58b86;border-color:#eee5e2}
.small-action.delete:hover{color:#a55f54;border-color:#e8c4bc;background:#fff2ee}
.dialog-close{width:38px;height:38px;flex:none;display:grid;place-items:center;border:1px solid #e4e9e1;background:#fafbf8;color:#697e6e;border-radius:11px;font-size:23px;line-height:1;box-shadow:0 2px 6px rgba(40,70,45,.04);transition:background .2s,color .2s,transform .2s,border-color .2s}
.dialog-close:hover{border-color:#bdd3bf;background:#eff6ee;transform:none}
.dialog-close:active{transform:scale(.94)}
#record-dialog{width:min(760px,calc(100% - 28px));max-height:calc(100vh - 44px)}
#record-form{padding:32px 36px 28px;max-height:calc(100vh - 44px)}
#record-form .dialog-head{margin-bottom:26px;padding-bottom:18px;border-bottom:1px solid #edf0e9}
#record-form .dialog-head h2{font-size:29px}
#record-form label{font-size:13px;margin-bottom:19px}
.field-label{display:inline-flex;align-items:baseline;gap:7px}
.field-label .optional{font-size:11px}
#record-form input,#record-form select,#record-form textarea{font-size:14px;padding:12px 13px}
#record-form textarea{min-height:165px}
.form-grid{gap:18px}
.form-grid-secondary{align-items:stretch}
#record-form .form-grid-secondary .important-toggle{margin-bottom:19px;align-self:stretch;min-height:69px}
.important-toggle-copy strong{font-size:13px}
.important-toggle-copy small{font-size:11px}
.dialog-actions{background:#fff;position:sticky;bottom:-28px;z-index:2;padding:18px 0 1px}

.year-overview{margin-top:24px;padding:30px 30px 25px;border:1px solid #e8ebe3;background:#fff;border-radius:15px;box-shadow:0 7px 24px rgba(39,58,39,.035);scroll-margin-top:18px}
.year-head{display:flex;align-items:start;justify-content:space-between;gap:20px}
.year-head h2{font-size:27px;letter-spacing:-.055em;line-height:1.25;margin:0;color:#27372b}
.year-head .section-kicker{margin-bottom:8px}
.year-head p:not(.section-kicker){font-size:12px;color:#97a39a;margin:8px 0 0}
.year-actions{display:flex;align-items:center;gap:6px;white-space:nowrap}
.year-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:24px 0}
.year-stats>div{min-height:85px;padding:15px 18px;background:#f8faf6;border:1px solid #edf1e9;border-radius:10px;display:flex;align-items:baseline;gap:5px;flex-wrap:wrap}
.year-stats span{width:100%;color:#899c8c;font-size:11px}
.year-stats strong{font-size:25px;color:#315b3d;letter-spacing:-.05em;line-height:1}
.year-stats small{font-size:11px;color:#a3afa5}
.year-stats>div:nth-child(3){background:#fffaf2;border-color:#f1e6d4}
.year-stats>div:nth-child(3) strong{color:#a7793e}
.year-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.year-month{min-width:0;padding:16px 16px 15px;border:1px solid #e9eee6;border-radius:11px;background:#fff;transition:box-shadow .2s,border-color .2s,transform .2s}
.year-month:hover{border-color:#cbdccb;box-shadow:0 8px 20px rgba(55,84,59,.07);transform:translateY(-2px)}
.year-month-head{display:flex;justify-content:space-between;align-items:baseline;gap:5px;margin-bottom:11px}
.year-month-head span{font-size:10px;color:#9baa9b;white-space:nowrap}
.year-month-link{border:0;background:transparent;padding:0 3px 1px 0;color:#365842;font-size:15px;font-weight:700;text-align:left}
.year-month-link:hover{color:#aa773c;text-decoration:underline;text-underline-offset:3px}
.year-weekdays,.year-month-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center}
.year-weekdays{font-size:9px;color:#a7b3a8;margin-bottom:5px}
.year-day,.year-day-spacer{display:grid;place-items:center;aspect-ratio:1;min-width:0}
.year-day{border:1px solid #e8eee7;border-radius:5px;color:#829286;background:#f8faf7;font-size:10px;padding:0;position:relative;transition:transform .15s,border-color .15s,box-shadow .15s,background .15s}
.year-day.level-1{background:#dcecdc;border-color:#dcecdc;color:#456e4d}
.year-day.level-2{background:#8fb795;border-color:#8fb795;color:#fff}
.year-day.level-3{background:#477a54;border-color:#477a54;color:#fff}
.year-day.year-day-important::after{content:"";position:absolute;right:2px;top:2px;width:5px;height:5px;border-radius:50%;background:#d9a258;box-shadow:0 0 0 1px #fff8e9}
.year-day.year-day-today{box-shadow:inset 0 0 0 1px #365b3e}
.year-day.year-day-selected{outline:2px solid #c6904b;outline-offset:1px;z-index:1}
.year-day:hover,.year-day:focus-visible{transform:scale(1.16);border-color:#497d56;box-shadow:0 3px 8px rgba(52,96,60,.18);z-index:2}
.year-day:active{transform:scale(.94)}
.year-foot{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:20px;padding-top:16px;border-top:1px solid #edf1e9}
.year-legend{display:flex;align-items:center;gap:5px;color:#9aa99d;font-size:10px;white-space:nowrap}
.year-legend i{width:14px;height:14px;border-radius:3px;border:1px solid #e8eee7;background:#f8faf7}
.year-legend .level-1{background:#dcecdc;border-color:#dcecdc}
.year-legend .level-2{background:#8fb795;border-color:#8fb795}
.year-legend .level-3{background:#477a54;border-color:#477a54}
.year-legend b{width:7px;height:7px;border-radius:50%;background:#d9a258;margin-left:8px}
.year-foot p{font-size:11px;color:#8d9f90;margin:0;text-align:right;min-height:18px}
@media(max-width:1080px){.year-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:780px){.year-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.year-head{flex-wrap:wrap}.year-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.year-foot{flex-wrap:wrap}.year-foot p{text-align:left}}
@media(max-width:520px){.header-overview-link{gap:5px}.year-overview{padding:21px 12px 19px}.year-head{gap:8px;padding:0 5px}.year-head h2{font-size:23px}.year-head p:not(.section-kicker){line-height:1.6}.year-actions{width:100%;justify-content:flex-end}.year-stats{gap:7px;margin:18px 0}.year-stats>div{padding:11px 12px;min-height:70px}.year-stats strong{font-size:22px}.year-grid{gap:8px}.year-month{padding:12px 9px}.year-month-head span{font-size:9px}.year-month-link{font-size:13px}.year-weekdays,.year-month-grid{gap:2px}.year-weekdays{font-size:8px}.year-day{font-size:8px;border-radius:3px}.year-day.year-day-important::after{width:3px;height:3px;right:1px;top:1px}.year-foot{gap:9px}.record-open-hint{display:none}.record-actions{width:100%}.record-card-bottom{justify-content:flex-end}.form-grid-secondary{grid-template-columns:1fr;gap:0}#record-form{padding:24px 20px 18px}#record-form .dialog-head h2{font-size:25px}#record-form textarea{min-height:125px}.dialog-actions{bottom:-18px}}
@media(max-width:520px){.table-wrap{overflow:visible}table,tbody{display:block;width:100%;min-width:0}thead{display:none}tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:8px;padding:15px 18px;border-top:1px solid #edf1e9}tbody tr:first-child{border-top:0}td{display:block;padding:0;border:0;min-width:0}td:first-child{grid-column:1;grid-row:1}td:nth-child(2){grid-column:2;grid-row:1;text-align:right}td:nth-child(3){grid-column:1;grid-row:2}td:nth-child(4){grid-column:1/-1;grid-row:3}td:nth-child(5){grid-column:2;grid-row:2;text-align:right}.table-title,.table-note{max-width:none}.table-action{padding:5px 9px;border:1px solid #d9e5d7;border-radius:6px;background:#fff}.table-action:hover{text-decoration:none}}