@import "https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=Nunito:wght@500;600;700;800&display=swap";:root{--paper:#f4ecd8;--paper-edge:#e8ddc3;--ink:#2f2a24;--ink-soft:#6b6152;--line:#5e544229;--red:#d64545;--blue:#3b6fd4;--green:#3d9c5e;--purple:#7b5ac4;--orange:#d97e2f;--teal:#2a9d8f;--stamp:#c0392b;--shadow:0 10px 30px #3c321e2e;--tape:#d6c8a08c}*{box-sizing:border-box;margin:0;padding:0}body{color:var(--ink);background:repeating-linear-gradient(180deg, transparent 0, transparent 31px, var(--line) 31px, var(--line) 32px), linear-gradient(90deg, transparent 0, transparent 42px, #d6454521 42px, #d6454521 47px, transparent 47px), var(--paper);background-attachment:fixed;min-height:100vh;font-family:Nunito,Segoe UI,system-ui,sans-serif}.app{max-width:820px;margin:0 auto;padding:20px 18px 70px}.top{border-bottom:2px solid #5e544240;justify-content:space-between;align-items:center;gap:12px;padding:14px 0 6px;display:flex}.brand{align-items:center;gap:12px;display:flex}.logo{background:var(--ink);color:var(--paper);width:52px;height:52px;box-shadow:var(--shadow);border-radius:12px 12px 12px 4px;place-items:center;font-family:Caveat,cursive;font-size:30px;font-weight:700;display:grid;transform:rotate(-4deg)}.brand strong{letter-spacing:-.3px;font-size:20px;font-weight:800;display:block}.brand small{color:var(--ink-soft);font-size:12.5px;font-style:italic}.top-actions{align-items:center;gap:10px;display:flex}.chip{color:var(--ink-soft);background:#ffffff73;border:1.5px dashed #5e544266;border-radius:12px;padding:7px 12px;font-size:12px;font-weight:600}.btn{border:2px solid var(--ink);color:var(--ink);cursor:pointer;box-shadow:3px 3px 0 var(--ink);background:#ffffff8c;border-radius:12px;padding:8px 16px;font-family:Nunito,sans-serif;font-size:13.5px;font-weight:700;transition:transform 80ms,box-shadow 80ms}.btn:hover{box-shadow:2px 2px 0 var(--ink);transform:translate(1px,1px)}.btn:active{box-shadow:0 0 0 var(--ink);transform:translate(3px,3px)}.btn.primary{background:var(--ink);color:var(--paper)}.link{color:var(--ink-soft);cursor:pointer;background:0 0;border:none;margin-top:10px;font-family:inherit;font-size:12.5px;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.login-panel,.add-panel{box-shadow:var(--shadow);background:#fffdf4eb;border:2px solid #5e54424d;border-radius:4px 16px 16px;gap:10px;margin:18px 0;padding:20px;display:grid;position:relative}.login-panel:before,.add-panel:before{content:"";background:var(--tape);border-left:1px dashed #5e544240;border-right:1px dashed #5e544240;width:84px;height:22px;position:absolute;top:-11px;left:18px;transform:rotate(-2deg)}.login-panel h2,.add-panel h2{font-family:Caveat,cursive;font-size:26px}.login-panel input,.add-panel input,.add-panel select,.add-panel textarea{color:var(--ink);background:0 0;border:none;border-bottom:2px dashed #5e544273;border-radius:0;width:100%;padding:8px 4px;font-family:Nunito,sans-serif;font-size:15px}.login-panel input:focus,.add-panel input:focus,.add-panel select:focus,.add-panel textarea:focus{border-bottom-color:var(--blue);outline:none}.add-panel textarea{resize:vertical;border:2px dashed #5e544259;border-radius:10px;padding:10px}.grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.filters{flex-wrap:wrap;align-items:center;gap:10px;margin:16px 0 14px;display:flex}.filters select{color:var(--ink);background:#ffffff80;border:2px solid #5e544259;border-radius:12px;padding:8px 12px;font-family:Nunito,sans-serif;font-size:13px;font-weight:600}.count{color:var(--ink-soft);margin-left:auto;font-size:13px;font-weight:700}.list{gap:16px;display:grid}.card{transform:rotate(var(--tilt,0deg));background:#fffdf5e0;border:2px solid #5e544247;border-radius:4px 18px 18px;justify-content:space-between;align-items:flex-start;gap:14px;padding:16px 18px;display:flex;position:relative;box-shadow:4px 5px #5e544224}.card:nth-child(3n+1){--tilt:-.35deg}.card:nth-child(3n+2){--tilt:.4deg}.card:nth-child(3n){--tilt:-.2deg}.card:before{content:"";background:var(--tape);width:70px;height:20px;position:absolute;top:-10px;right:26px;transform:rotate(2deg)}.card.done{opacity:.6}.card.done h3{-webkit-text-decoration:line-through wavy #2f2a2499;text-decoration:line-through wavy #2f2a2499}.card.overdue{border-color:var(--stamp);box-shadow:4px 5px #c0392b40}.card-main{flex:1;min-width:0}.subject{background:var(--subj-bg,#3b6fd424);color:var(--subj-ink,var(--blue));border-radius:8px 8px 8px 2px;margin-bottom:6px;padding:1px 10px 2px;font-family:Caveat,cursive;font-size:17px;font-weight:700;display:inline-block}.card h3{margin-bottom:3px;font-size:16.5px;font-weight:800}.card p{color:var(--ink-soft);margin-bottom:8px;font-size:13.5px;line-height:1.45}.due{color:var(--ink-soft);background:#fff6;border:1.5px solid #5e54424d;border-radius:8px;padding:3px 9px;font-size:12px;font-weight:800;display:inline-block}.due.bad{color:var(--stamp);border:2.5px solid var(--stamp);text-transform:uppercase;background:#c0392b0f;border-radius:6px;font-family:Caveat,cursive;font-size:15px;transform:rotate(-2deg)}.due.today{color:var(--green);border-color:var(--green)}.card-actions{flex-shrink:0;align-items:center;gap:8px;display:flex}.check{border:2px solid var(--green);color:var(--green);cursor:pointer;background:#3d9c5e1f;border-radius:12px;padding:8px 13px;font-family:Nunito,sans-serif;font-size:12.5px;font-weight:800}.check.checked{background:var(--green);color:#f4fdf6;border-color:var(--green)}.check:disabled{opacity:.45;cursor:not-allowed}.del{color:var(--red);cursor:pointer;background:0 0;border:2px solid #d6454580;border-radius:12px;width:36px;height:36px;font-family:Caveat,cursive;font-size:18px}.empty{text-align:center;color:var(--ink-soft);padding:60px 0;font-family:Caveat,cursive;font-size:22px}.toast{background:var(--ink);color:var(--paper);z-index:9;border-radius:14px;padding:11px 20px;font-size:13.5px;font-weight:700;position:fixed;bottom:22px;left:50%;transform:translate(-50%);box-shadow:5px 6px #2f2a2459}@media (width<=560px){.grid{grid-template-columns:1fr}.card{flex-direction:column}.card-actions{width:100%}.check{flex:1}.top{flex-direction:column;align-items:flex-start}.top-actions{justify-content:space-between;width:100%}}