@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { color-scheme: light; --ink:#252820; --muted:#797b71; --paper:#f6f4ef; --green:#496c53; --line:#e7e4dc; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--paper); color:var(--ink); font-family:'DM Sans',sans-serif; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
.app-shell { width:min(100% - 40px, 940px); margin:0 auto; padding:26px 0 36px; }
.topbar { display:flex; align-items:center; justify-content:space-between; }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font:700 15px 'Manrope',sans-serif; letter-spacing:-.4px; }
.brand-mark { display:grid; place-items:center; width:29px; height:29px; border-radius:10px 10px 10px 4px; background:var(--green); color:white; font:800 19px 'Manrope',sans-serif; }
.install-button { border:1px solid #d9ded7; background:#fff; color:var(--green); border-radius:999px; padding:9px 15px; font-size:12px; font-weight:700; }
.intro { padding:78px 0 38px; }
.eyebrow,.editor-label { margin:0 0 12px; color:var(--green); font-size:10px; font-weight:700; letter-spacing:1.7px; }
h1 { margin:0; font:700 clamp(34px,6vw,52px)/1.12 'Manrope',sans-serif; letter-spacing:-2px; }
.subtitle { margin:12px 0 0; color:var(--muted); font-size:15px; }
.toolbar { display:flex; gap:12px; align-items:center; margin:0 0 24px; }
.search-box { display:flex; align-items:center; gap:9px; flex:1; height:46px; padding:0 14px; border:1px solid var(--line); border-radius:13px; background:#fbfaf7; color:#8b8c83; }
.search-box span { font-size:25px; line-height:1; transform:rotate(-20deg); }
.search-box input { width:100%; border:0; outline:0; background:transparent; color:var(--ink); font-size:13px; }
.search-box input::placeholder { color:#9b9b92; }
.new-button,.done-button { height:46px; padding:0 18px; border:0; border-radius:13px; background:var(--green); color:white; font-size:13px; font-weight:700; }
.new-button span { margin-right:5px; font-size:18px; vertical-align:-1px; }
.notes-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
.note-card { min-height:150px; padding:18px; border:1px solid var(--line); border-radius:15px; background:#fffefa; text-align:left; transition:transform .15s,border-color .15s; }
.note-card:hover { transform:translateY(-2px); border-color:#c9d1c8; }
.note-card h2 { margin:0 0 9px; overflow:hidden; font:700 15px/1.4 'Manrope',sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.note-card p { display:-webkit-box; margin:0; overflow:hidden; color:#74766e; font-size:12px; line-height:1.65; -webkit-box-orient:vertical; -webkit-line-clamp:4; white-space:pre-wrap; }
.note-date { display:block; margin-top:16px; color:#a1a197; font-size:10px; }
.empty-state { grid-column:1/-1; padding:44px 20px; border:1px dashed #dcd9d0; border-radius:15px; color:var(--muted); text-align:center; font-size:13px; }
.empty-state strong { display:block; margin-bottom:6px; color:var(--ink); font:700 15px 'Manrope',sans-serif; }
.privacy-note { margin:26px 0 0; color:#92938a; font-size:11px; text-align:center; }
.privacy-note span { margin-right:5px; }
.signature { margin-top:30px; color:#a3a399; font-size:9px; font-weight:600; letter-spacing:1.5px; text-align:right; }
.editor { width:min(560px,calc(100% - 28px)); padding:0; border:1px solid var(--line); border-radius:18px; background:#fffefa; color:var(--ink); box-shadow:0 24px 80px #20251d33; }
.editor::backdrop { background:#20251d66; backdrop-filter:blur(3px); }
.editor form { padding:22px; }
.editor-top { display:flex; align-items:center; justify-content:space-between; }
.editor-label { margin:0; }
.icon-button { width:32px; height:32px; border:0; border-radius:50%; background:#f1efe9; color:#55574f; font-size:23px; line-height:1; }
.title-input { display:block; width:100%; margin:14px 0 8px; padding:8px 0; border:0; outline:0; background:transparent; font:700 22px 'Manrope',sans-serif; }
.editor textarea { display:block; width:100%; min-height:220px; resize:vertical; border:0; outline:0; background:transparent; color:#4f514a; font-size:14px; line-height:1.7; }
.editor-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:12px; border-top:1px solid var(--line); }
.save-hint { flex:1; color:#999a91; font-size:10px; }
.done-button { height:38px; border-radius:10px; padding:0 15px; }
.delete-button { border:0; background:transparent; color:#b04c43; font-size:12px; }
@media(max-width:650px) { .app-shell { width:min(100% - 28px, 560px); padding-top:18px; } .intro { padding:58px 0 30px; } .notes-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .note-card { min-height:140px; padding:14px; } .note-card h2 { font-size:14px; } }
@media(max-width:390px) { .notes-grid { grid-template-columns:1fr; } .new-button { padding:0 12px; } }