@import"https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&family=ZCOOL+KuaiLe&display=swap";:root{--bg: #f8f5ef;--ink: #2f2a26;--accent: #ff9f9f;--accent-2: #8dd6c7;--paper: #fff7dc;--shadow: rgba(46, 40, 35, .15);--warm: #ffe6c7;--ink-soft: rgba(47, 42, 38, .7)}*{box-sizing:border-box}body{margin:0;font-family:Comic Neue,Segoe UI,sans-serif;color:var(--ink);background:radial-gradient(circle at top,#fffdf7,var(--bg));min-height:100vh}.page{max-width:980px;margin:0 auto;padding:32px 20px 60px;display:flex;flex-direction:column;gap:28px}.hero{display:flex;justify-content:center}.bubble{background:var(--paper);border:3px solid var(--ink);padding:20px 28px;border-radius:24px 18px 28px 16px;box-shadow:6px 8px 0 var(--shadow);transform:rotate(-1.5deg);position:relative}.bubble:after{content:"";position:absolute;bottom:-18px;left:40px;width:24px;height:24px;background:var(--paper);border:3px solid var(--ink);border-radius:60% 40% 65% 35%;transform:rotate(12deg)}h1{font-family:ZCOOL KuaiLe,Comic Neue,cursive;margin:0 0 8px;font-size:32px}p{margin:0}.panel{display:flex;justify-content:center}.auth-stack{width:100%;max-width:620px;display:flex;flex-direction:column;align-items:center;gap:14px}.auth-panel .card{background:linear-gradient(135deg,#fffdf2,#fff3dd 55%,#ffeeda);border-color:#3a332c;box-shadow:14px 16px #2e28232e;overflow:hidden;animation:floatIn .5s ease both}.auth-panel .card:before{width:110px;height:18px;right:22px;background:var(--warm)}.auth-panel .card:after{background:#ffd6cc}.auth-panel .tabs{justify-content:center;background:#fff;padding:6px;border:2px solid var(--ink);border-radius:999px;width:fit-content;margin:0 auto 18px;box-shadow:6px 6px 0 var(--shadow)}.auth-panel .tab{border:0;background:transparent;padding:8px 18px;font-size:15px}.auth-panel .tab.active{background:var(--accent);border-radius:999px;box-shadow:inset 0 0 0 2px var(--ink)}.auth-panel .form{gap:18px}.auth-panel label{font-size:15px;color:var(--ink-soft)}.auth-panel input{border-radius:18px;padding:12px 14px;background:#fffdf9;box-shadow:inset 0 0 0 2px #2f2a2614}.auth-panel input:focus{outline:none;border-color:#3a332c;box-shadow:0 0 0 3px #ff9f9f59}.auth-panel button[type=submit]{width:100%;font-size:16px;letter-spacing:.5px;padding:12px 18px}.auth-panel .register-btn{background:#ffc36a}.card{width:100%;max-width:620px;background:#fff;border:3px solid var(--ink);border-radius:30px 16px 26px 18px;padding:24px;box-shadow:10px 10px 0 var(--shadow);position:relative}.card:before,.card:after{content:"";position:absolute;border:2px solid var(--ink);opacity:.5}.card:before{width:90px;height:16px;top:-10px;right:30px;border-radius:18px;transform:rotate(-3deg);background:var(--accent-2)}.card:after{width:40px;height:10px;bottom:-10px;left:40px;border-radius:10px;background:var(--accent)}.tabs{display:flex;gap:10px;margin-bottom:12px}.tab{border:2px solid var(--ink);background:#fff;padding:6px 14px;border-radius:14px;cursor:pointer;font-weight:700;transition:transform .2s ease}.tab.active{background:var(--accent)}.tab:hover{transform:translateY(-2px)}.form{display:flex;flex-direction:column;gap:14px}label{display:flex;flex-direction:column;gap:6px;font-weight:700}input,textarea{border:2px solid var(--ink);border-radius:14px;padding:10px 12px;font-family:inherit;font-size:16px;background:#fffef9}button{border:2px solid var(--ink);border-radius:16px;padding:10px 16px;background:var(--accent-2);font-weight:700;cursor:pointer;box-shadow:4px 4px 0 var(--shadow);transition:transform .2s ease}button:hover{transform:translateY(-2px)}.ghost{background:#fff}.notes-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}.note-form{display:grid;gap:10px;margin-bottom:20px}.notes-list{display:grid;gap:12px}.note-item{border:2px solid var(--ink);border-radius:16px 10px 18px 12px;padding:12px 14px;background:#fdf7f1;display:flex;justify-content:space-between;gap:12px;align-items:flex-start;position:relative}.note-meta{font-size:12px;opacity:.7;margin-top:6px}.note-text{white-space:pre-wrap}.note-item button{background:var(--accent);box-shadow:none}.toast{position:static;background:#fff;border:2px solid var(--ink);padding:10px 14px;border-radius:14px;box-shadow:4px 4px 0 var(--shadow);align-self:center}@keyframes floatIn{0%{transform:translateY(12px) scale(.98);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@media (max-width: 640px){.card{padding:18px}.notes-head{flex-direction:column;align-items:flex-start}}