*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#f3f4f8;color:#222}.app{max-width:1000px;margin:0 auto;padding:24px 16px 60px}header{text-align:center;margin-bottom:20px}header h1{margin:0;font-size:2rem}header p{margin:4px 0 0;color:#666}input,textarea{width:100%;padding:9px 11px;border:1px solid #d7d9e0;border-radius:8px;font:inherit;background:#ffffffbf}input[type=checkbox]{width:auto}textarea{resize:vertical;margin:8px 0}.new-note{max-width:560px;margin:0 auto 20px;padding:16px;border-radius:14px;box-shadow:0 2px 10px #0000001a}.title-input{font-weight:600}.row{display:flex;gap:8px;align-items:center;margin-top:8px}.between{justify-content:space-between}.btn{padding:9px 16px;border:none;border-radius:8px;background:#4f46e5;color:#fff;font:inherit;cursor:pointer;white-space:nowrap}.btn.light{background:#00000014;color:#222}.btn:hover{opacity:.9}.link{background:none;border:none;cursor:pointer;color:#4f46e5;font:inherit;padding:2px 4px}.link.danger{color:#c62828}.icon{background:none;border:none;font-size:1.3rem;cursor:pointer;color:#888}.icon.on{color:#f5a623}.palette{display:flex;gap:6px}.swatch{width:24px;height:24px;border-radius:50%;border:2px solid rgba(0,0,0,.2);cursor:pointer;padding:0}.swatch.active{border-color:#222}.search{max-width:560px;display:block;margin:0 auto 20px;background:#fff}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;align-items:start}.card{padding:14px;border-radius:14px;box-shadow:0 2px 8px #0000001a}.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.card h3{margin:0 0 6px;word-break:break-word}.content{margin:0 0 8px;white-space:pre-wrap;word-break:break-word}.progress{height:6px;background:#0000001a;border-radius:4px;overflow:hidden;margin-top:8px}.progress span{display:block;height:100%;background:#22a06b}.tasks,.draft-tasks{list-style:none;padding:0;margin:8px 0 0}.tasks li,.draft-tasks li{display:flex;justify-content:space-between;align-items:center;padding:3px 0}.tasks label{display:flex;gap:8px;align-items:center;cursor:pointer}.tasks li.done span{text-decoration:line-through;color:#777}.card-actions{border-top:1px solid rgba(0,0,0,.1);padding-top:6px}.empty{text-align:center;color:#777;margin-top:40px}.error{max-width:560px;margin:0 auto 16px;background:#fdecea;color:#b71c1c;padding:10px 14px;border-radius:8px;cursor:pointer}