* { box-sizing: border-box; }
:root { color: #203d32; background: #f6f3ed; font-family: ui-rounded, "PingFang SC", "Noto Sans CJK SC", sans-serif; }
body { margin: 0; min-width: 320px; background: #f6f3ed; }
a { color: inherit; text-decoration: none; }
.home-page, .draft-page { width: min(100%, 42rem); margin: 0 auto; padding: 2rem 1.25rem 7rem; }
.page-heading { position: relative; margin: .25rem 0 2rem; }
.eyebrow { margin: 0 0 .45rem; color: #6f7d72; font-size: .68rem; font-weight: 700; letter-spacing: .11em; }
h1, h2, p { margin-top: 0; }
.page-heading h1 { margin: 0; color: #1f4d3a; font-family: Georgia, "Noto Serif SC", serif; font-size: clamp(2.1rem, 10vw, 3rem); font-weight: 500; letter-spacing: -.06em; line-height: 1.08; }
.profile-button { position: absolute; top: .15rem; right: .1rem; width: 2.5rem; height: 2.5rem; border: 1px solid #d8d6cc; border-radius: 50%; background: #fffdf9; color: #1f4d3a; font-size: 1rem; }
.capture-card { overflow: hidden; margin-bottom: 2.25rem; border: 1px solid #d9ddd2; border-radius: 1.1rem; background: #fffefb; box-shadow: 0 13px 26px rgba(51, 67, 51, .08); }
.capture-card form { display: block; }
.capture-label { display: block; padding: 1.1rem 1.15rem 0; color: #1f4d3a; font-size: 1rem; font-weight: 700; }
.capture-card textarea { display: block; width: 100%; min-height: 8.5rem; padding: .7rem 1.15rem 1.1rem; resize: vertical; border: 0; outline: 0; background: transparent; color: #2a332c; font: inherit; font-size: 1rem; line-height: 1.65; }
.capture-card textarea::placeholder, .confirmation-form textarea::placeholder { color: #a6aaa0; }
.capture-footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #eaebe4; padding: .55rem .7rem .55rem 1.15rem; color: #768176; font-size: .85rem; }
.capture-footer button, .primary-button { border: 0; border-radius: .7rem; background: #1f4d3a; color: #fff; cursor: pointer; font: inherit; font-weight: 700; }
.capture-footer button { padding: .65rem .9rem; }
.capture-footer button span, .primary-button span { margin-left: .5rem; }
.content-section { margin: 0 0 2rem; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .7rem; }
.section-title h2 { margin: 0; color: #29483a; font-family: Georgia, "Noto Serif SC", serif; font-size: 1.3rem; font-weight: 500; }
.section-title a { color: #708174; font-size: .8rem; }
.task-card { display: grid; grid-template-columns: auto 1fr; column-gap: .65rem; padding: 1rem; border-radius: .85rem; background: #fffdf9; box-shadow: 0 3px 12px rgba(51, 67, 51, .045); }
.task-time { grid-row: span 2; color: #b87535; font-size: .75rem; font-weight: 700; }
.drafts-section .section-title span { color: #8b7451; font-size: .78rem; }.draft-card { display: grid; grid-template-columns: auto 1fr; gap: .35rem .65rem; margin-bottom: .65rem; padding: .9rem 1rem; border: 1px solid #e4dfd2; border-radius: .85rem; background: #fffaf1; }.draft-card .draft-status { grid-row: span 2; align-self: center; color: #9b7542; font-size: .72rem; font-weight: 700; }.draft-card > span:nth-child(2) { overflow: hidden; color: #38463b; font-size: .9rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }.draft-card > span:last-child { color: #7f887e; font-size: .76rem; }
.task-title { font-size: .95rem; font-weight: 700; }
.task-meta, .empty-state { margin: .25rem 0 0; color: #859086; font-size: .82rem; }
.empty-state { padding: .9rem 0; border-top: 1px solid #dfdfd6; }
.bottom-nav { position: fixed; z-index: 2; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; gap: min(4vw, 2.5rem); border-top: 1px solid #e5e3da; padding: .65rem .45rem max(.65rem, env(safe-area-inset-bottom)); background: rgba(255, 254, 251, .94); backdrop-filter: blur(14px); }
.bottom-nav a { display: grid; place-items: center; gap: .16rem; min-width: 2.65rem; color: #8a948a; font-size: .63rem; }
.bottom-nav a span { font-size: 1.25rem; line-height: 1; }.bottom-nav .active { color: #1f4d3a; }.bottom-nav .new-action span { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; background: #1f4d3a; color: #fff; font-size: 1.35rem; }
.draft-page { padding-top: 1rem; }.draft-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: 1.7rem; }.draft-header a { color: #61766a; font-size: .9rem; }.draft-header h1 { margin: 0; color: #1f4d3a; font-family: Georgia, "Noto Serif SC", serif; font-size: 1.15rem; font-weight: 600; }
.original-card { margin-bottom: 2rem; padding: 1.1rem; border-left: 3px solid #c6a172; border-radius: .15rem .85rem .85rem .15rem; background: #fffaf1; }.original-card pre { margin: 0; white-space: pre-wrap; color: #45463e; font: inherit; line-height: 1.65; }
.suggestion-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 1rem; }.suggestion-heading h2 { margin: 0; color: #29483a; font-family: Georgia, "Noto Serif SC", serif; font-size: 1.25rem; font-weight: 500; }.suggestion-heading > span { color: #8b7451; font-size: .78rem; }
.confirmation-form { display: grid; gap: 1rem; }.confirmation-form label { display: grid; gap: .45rem; color: #526357; font-size: .82rem; font-weight: 700; }.confirmation-form input, .confirmation-form select, .confirmation-form textarea { width: 100%; border: 1px solid #d9ddd2; border-radius: .7rem; padding: .78rem .85rem; outline-color: #4b765f; background: #fffefb; color: #26392e; font: inherit; font-weight: 400; }.confirmation-form textarea { min-height: 5rem; resize: vertical; }.primary-button { width: 100%; margin-top: .35rem; padding: .95rem; }.draft-link { text-align: center; color: #788379; font-size: .84rem; }
.login-page { min-height: 100vh; }.login-main { display: grid; align-content: center; min-height: 100vh; width: min(100%, 31rem); margin: 0 auto; padding: 2rem 1.25rem; }.login-intro { margin-bottom: 2.25rem; }.login-intro h1 { margin: 0; color: #1f4d3a; font-family: Georgia, "Noto Serif SC", serif; font-size: clamp(2.65rem, 13vw, 4rem); font-weight: 500; letter-spacing: -.07em; line-height: 1.03; }.login-card { padding: 1.45rem; border: 1px solid #dcdfd5; border-radius: 1.15rem; background: #fffefb; box-shadow: 0 16px 38px rgba(51, 67, 51, .1); }.login-card h2 { margin: 0 0 .35rem; color: #29483a; font-family: Georgia, "Noto Serif SC", serif; font-size: 1.55rem; font-weight: 500; }.login-card > p:not(.eyebrow) { margin: 0 0 1.4rem; color: #758076; font-size: .9rem; line-height: 1.6; }.login-card form { display: grid; gap: .5rem; }.login-card label { color: #526357; font-size: .82rem; font-weight: 700; }.login-card input { width: 100%; margin-bottom: .65rem; border: 1px solid #d9ddd2; border-radius: .7rem; padding: .82rem .85rem; outline-color: #4b765f; background: #fffefb; color: #26392e; font: inherit; }.login-note { margin: 1rem 0 0; color: #859086; text-align: center; font-size: .75rem; }
.delete-draft-form { margin-top: 1.5rem; text-align: center; }.delete-draft-form button { border: 0; background: transparent; color: #9a6558; cursor: pointer; font: inherit; font-size: .82rem; text-decoration: underline; text-underline-offset: .2rem; }
.search-page, .todo-page { width: min(100%, 42rem); min-height: 100vh; margin: 0 auto; padding: 2rem 1.25rem 7rem; }.compact-heading { margin: .25rem 0 1.8rem; }.compact-heading h1 { margin: 0 0 .45rem; color: #1f4d3a; font-family: Georgia, "Noto Serif SC", serif; font-size: clamp(2rem, 9vw, 2.7rem); font-weight: 500; letter-spacing: -.06em; }.compact-heading > p:not(.eyebrow) { margin: 0; color: #748076; font-size: .9rem; line-height: 1.6; }.search-card { overflow: hidden; margin-bottom: 1.6rem; border: 1px solid #d9ddd2; border-radius: 1rem; background: #fffefb; box-shadow: 0 10px 24px rgba(51, 67, 51, .07); }.search-input { display: flex; align-items: center; gap: .65rem; padding: 1rem 1.05rem; color: #557063; }.search-input span { font-size: 1.35rem; }.search-input input { width: 100%; border: 0; outline: 0; background: transparent; color: #26392e; font: inherit; font-size: 1rem; }.search-options { display: flex; align-items: center; gap: .8rem; border-top: 1px solid #e8e9e3; padding: .7rem .85rem; color: #738074; font-size: .72rem; }.search-options label { display: flex; align-items: center; gap: .25rem; }.search-options input { accent-color: #1f4d3a; }.search-options button { margin-left: auto; border: 0; background: transparent; color: #1f4d3a; font: inherit; font-size: .78rem; font-weight: 700; }.search-empty, .todo-empty { padding: 2.6rem 1.25rem; border: 1px dashed #d5d9d0; border-radius: 1rem; color: #778278; text-align: center; }.search-empty > span, .todo-empty > span { display: grid; width: 2.6rem; height: 2.6rem; place-items: center; margin: 0 auto .75rem; border-radius: 50%; background: #e9eee7; color: #397058; font-size: 1.25rem; }.search-empty h2, .todo-empty h2 { margin: 0 0 .4rem; color: #3b5547; font-family: Georgia, "Noto Serif SC", serif; font-size: 1.25rem; font-weight: 500; }.search-empty p, .todo-empty p { margin: 0; font-size: .83rem; line-height: 1.6; }.result-heading h2 { margin: 0 0 .7rem; color: #3d5648; font-family: Georgia, "Noto Serif SC", serif; font-size: 1.2rem; font-weight: 500; }.search-results { display: grid; gap: .65rem; }.result-card { border-radius: .9rem; background: #fffefb; box-shadow: 0 4px 14px rgba(51, 67, 51, .05); }.result-card a { display: block; padding: 1rem; }.result-reason { color: #9b7542; font-size: .7rem; font-weight: 700; }.result-card h2 { margin: .4rem 0; color: #314a3e; font-size: 1rem; }.result-card p { margin: 0 0 .7rem; color: #778178; font-size: .83rem; line-height: 1.5; }.result-link { color: #527966; font-size: .75rem; font-weight: 700; }.todo-tabs { display: flex; gap: .45rem; margin-bottom: 1.25rem; }.todo-tabs button { border: 1px solid #d9ddd2; border-radius: 99rem; padding: .45rem .75rem; background: transparent; color: #6d7a70; font: inherit; font-size: .78rem; }.todo-tabs .selected { border-color: #1f4d3a; background: #1f4d3a; color: #fff; }.todo-empty { padding: 3rem 1.25rem; }.todo-empty a { display: inline-block; margin-top: 1.15rem; color: #1f4d3a; font-size: .82rem; font-weight: 700; }
@media (min-width: 700px) { .home-page, .draft-page { padding-top: 3.5rem; }.bottom-nav { width: 34rem; right: auto; left: 50%; border: 1px solid #e5e3da; border-bottom: 0; border-radius: 1rem 1rem 0 0; transform: translateX(-50%); } }