:root{--bg:#efe7d6;--bg-grain:#e7dcc6;--surface:#fbf6ea;--surface-2:#f4ecda;--ink:#2b2520;--ink-soft:#6a5f50;--line:#ddd0b6;--accent:#b9472f;--accent-soft:#e9c9a0;--shadow:18px 18px 0 #2b25200f;--note-shadow:6px 8px 22px #2b25201f;--paper-1:#fbf3df;--paper-2:#f3ead0;--paper-3:#f7e4d8}[data-theme=dark]{--bg:#1c1814;--bg-grain:#211c16;--surface:#2a2420;--surface-2:#322b25;--ink:#efe6d6;--ink-soft:#b3a692;--line:#423a31;--accent:#e08a5b;--accent-soft:#5a4636;--shadow:18px 18px 0 #00000040;--note-shadow:6px 10px 26px #0006;--paper-1:#322a22;--paper-2:#2f2722;--paper-3:#34281f}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background-color:var(--bg);background-image:radial-gradient(circle at 18% 12%, var(--bg-grain) 0, transparent 42%), radial-gradient(circle at 82% 78%, var(--bg-grain) 0, transparent 45%);color:var(--ink);-webkit-font-smoothing:antialiased;font-family:Newsreader,Georgia,serif;transition:background-color .4s,color .4s}h1,h2,h3{margin:0;font-family:Fraunces,Georgia,serif}button{cursor:pointer;font-family:inherit}::selection{background:var(--accent-soft);color:var(--ink)}.theme-toggle{z-index:50;border:1px solid var(--line);background:var(--surface);width:44px;height:44px;color:var(--ink);border-radius:50%;place-items:center;font-size:1.1rem;transition:transform .2s,background .3s;display:grid;position:fixed;top:20px;right:20px;box-shadow:0 4px 14px #00000014}.theme-toggle:hover{transform:rotate(-12deg)scale(1.06)}.spinner{border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;width:30px;height:30px;animation:.8s linear infinite spin}.center-screen{place-items:center;height:100%;display:grid}@keyframes spin{to{transform:rotate(360deg)}}.login-wrap{place-items:center;min-height:100%;padding:24px;display:grid}.login-card{background:var(--surface);border:1px solid var(--line);width:100%;max-width:400px;box-shadow:var(--shadow);border-radius:4px;padding:48px 40px 40px;animation:.6s cubic-bezier(.2,.8,.2,1) both rise;position:relative}.login-card:before{content:"";background:var(--accent-soft);opacity:.7;border-radius:2px;width:120px;height:30px;position:absolute;top:-14px;left:50%;transform:translate(-50%)rotate(-3deg);box-shadow:0 3px 8px #0000001f}.login-eyebrow{text-transform:uppercase;letter-spacing:.32em;color:var(--accent);margin-bottom:10px;font-family:Newsreader,serif;font-size:.66rem}.login-card h1{letter-spacing:-.02em;font-size:2.5rem;font-weight:600;line-height:1.05}.login-card .sub{color:var(--ink-soft);margin:14px 0 30px;font-size:1.02rem;font-style:italic}.field{position:relative}.field input{background:var(--surface-2);border:1px solid var(--line);width:100%;color:var(--ink);border-radius:3px;outline:none;padding:14px 16px;font-family:Newsreader,serif;font-size:1.05rem;transition:border-color .2s,box-shadow .2s}.field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.btn-primary{letter-spacing:.02em;background:var(--accent);color:#fff;border:none;border-radius:3px;width:100%;margin-top:18px;padding:14px;font-size:1.02rem;font-weight:500;transition:transform .15s,filter .2s}.btn-primary:hover:not(:disabled){filter:brightness(1.07);transform:translateY(-1px)}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.error-msg{color:var(--accent);min-height:1.2em;margin-top:14px;font-size:.92rem;font-style:italic}.shake{animation:.4s shake}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-7px)}75%{transform:translate(7px)}}.app-shell{max-width:1180px;margin:0 auto;padding:56px 28px 96px}.app-header{border-bottom:2px solid var(--ink);flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:8px;padding-bottom:20px;display:flex}.brand-eyebrow{text-transform:uppercase;letter-spacing:.34em;color:var(--accent);margin-bottom:6px;font-size:.66rem}.app-header h1{letter-spacing:-.025em;font-size:3rem;font-weight:600;line-height:1}.header-meta{align-items:center;gap:18px;display:flex}.count{color:var(--ink-soft);font-size:1rem;font-style:italic}.btn-ghost{border:1px solid var(--line);color:var(--ink-soft);background:0 0;border-radius:3px;padding:8px 16px;font-size:.9rem;transition:border-color .2s,color .2s}.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}.new-note-bar{margin:32px 0}.btn-new{background:var(--ink);color:var(--surface);letter-spacing:.01em;border:none;border-radius:3px;align-items:center;gap:10px;padding:13px 24px;font-size:1rem;font-weight:500;transition:transform .15s,filter .2s;display:inline-flex}.btn-new:hover{filter:brightness(1.1);transform:translateY(-2px)}.btn-new .plus{font-size:1.3rem;line-height:1}.notes-grid{columns:3 280px;column-gap:24px}.note{break-inside:avoid;background:var(--paper-1);border:1px solid var(--line);box-shadow:var(--note-shadow);border-radius:3px;margin-bottom:24px;padding:20px 20px 16px;transition:transform .2s,box-shadow .2s;animation:.5s cubic-bezier(.2,.8,.2,1) both rise}.note:nth-child(3n+2){background:var(--paper-2);transform:rotate(-.5deg)}.note:nth-child(3n+3){background:var(--paper-3);transform:rotate(.6deg)}.note:hover{transform:translateY(-4px)rotate(0);box-shadow:10px 16px 34px #2b252033}.note textarea{resize:none;width:100%;color:var(--ink);background:0 0;border:none;outline:none;min-height:1.6em;font-family:Newsreader,serif;font-size:1.06rem;line-height:1.55;overflow:hidden}.note textarea::placeholder{color:var(--ink-soft);font-style:italic}.note-foot{border-top:1px dashed var(--line);justify-content:space-between;align-items:center;margin-top:14px;padding-top:10px;font-size:.74rem;display:flex}.note-date{color:var(--ink-soft);letter-spacing:.04em}.note-status{color:var(--accent);opacity:0;font-style:italic;transition:opacity .3s}.note-status.show{opacity:1}.btn-delete{color:var(--ink-soft);letter-spacing:.06em;text-transform:uppercase;background:0 0;border:none;border-radius:3px;padding:4px 6px;font-size:.74rem;transition:color .2s,background .2s}.btn-delete:hover{color:var(--accent);background:var(--accent-soft)}.empty{text-align:center;color:var(--ink-soft);padding:80px 20px}.empty .mark{color:var(--accent);opacity:.5;font-family:Fraunces,serif;font-size:3.5rem}.empty p{margin-top:10px;font-size:1.15rem;font-style:italic}@keyframes rise{0%{opacity:0;transform:translateY(16px)}to{opacity:1}}@media (width<=560px){.app-header h1{font-size:2.2rem}.notes-grid{columns:1}}