:root{--sans:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;--background:#0f1115;--surface:#171a21;--elevated-surface:#1f2430;--border:#2a2f3a;--accent:#f97316;--accent-dark:#c2410c;--accent-soft:#f9731626;--text-muted:#9aa4b2;--text:#e6eaf2;--text-header:#fcd4b6;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font:18px/145% var(--sans);background:var(--background);color:var(--text);margin:0;font-size:18px;line-height:1.45}h1,h2,h3,h4,h5,h6{font-family:var(--sans);color:var(--text-header);margin-top:0;font-weight:500}h1{margin:32px 0;font-size:56px}h2{margin:0 0 8px;font-size:24px;line-height:118%}p{font-family:var(--sans);color:var(--text);margin:0}button{box-sizing:border-box;border:1px solid var(--accent-dark);color:var(--text);font:inherit;font-family:var(--mono);cursor:pointer;background-color:#0000;border-radius:6px;justify-content:center;align-items:center;padding:.2rem .5rem;transition:border-color .3s,color .3s;display:inline-flex}button:hover{border-color:var(--accent);color:var(--text-header)}button:active{border-color:var(--accent-soft);color:var(--text-muted)}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}code{background:var(--surface);padding:4px 8px;font-size:15px;line-height:135%}input[type=checkbox]{appearance:none;border:1px solid var(--accent-dark);background-color:var(--surface);cursor:pointer;border-radius:5px;flex-shrink:0;place-content:center;width:18px;height:18px;margin:.25rem .75rem;transition:border-color .3s;display:grid}input[type=checkbox]:after{content:"✔";color:var(--accent-dark);opacity:0;font-size:14px;transition:color .3s}input[type=checkbox]:checked:after{opacity:1}input[type=checkbox]:hover{border-color:var(--accent)}input[type=checkbox]:hover:after{color:var(--accent)}input[type=checkbox]:active{border-color:var(--accent-soft)}input[type=checkbox]:active:after{color:var(--accent-soft)}input[type=text]{box-shadow:none;color:var(--text);font-family:var(--sans);background:0 0;border:none;border-bottom:1px solid #0000;outline:none;flex:1;padding:4px 0;font-size:1rem;transition:border-bottom-color .4s}input[type=text]:hover{border-bottom-color:var(--accent)}input[type=text]:focus{border-bottom-color:var(--accent);outline:none}textarea{box-shadow:none;color:var(--text);font-family:var(--sans);resize:none;background:0 0;border:none;border-bottom:1px solid #0000;outline:none;width:100%;padding:4px 0;font-size:1rem;transition:border-bottom-color .4s;overflow:hidden}textarea:hover{border-bottom-color:var(--accent)}textarea:focus{border-bottom-color:var(--accent);outline:none}.main{padding-top:64px}.main-content{flex-direction:column;align-items:stretch;max-width:1200px;margin:0 auto;display:flex}.header{background:var(--surface);border-bottom:1px solid var(--border);z-index:1000;height:64px;position:fixed;top:0;left:0;right:0}.header-content{align-items:center;max-width:1200px;height:64px;margin:0 auto;display:flex}.logo{color:inherit;cursor:pointer;text-decoration:none}.logo-h1{margin:0}.login{margin-left:auto}.card{background:linear-gradient(135deg, var(--surafce), var(--elevated-surface));border:2px solid var(--accent-dark);box-sizing:border-box;border-radius:14px;width:100%;margin:0;padding:1rem;transition:border-color .3s;position:relative;box-shadow:0 10px 20px #0000000d}.card:hover{border-color:var(--accent)}.input-card-header[type=text]{font-family:var(--sans);color:var(--text-header);width:100%;margin:0 0 8px;font-size:24px;font-weight:500;line-height:118%}.card-text{color:var(--text-muted)}.footer{justify-content:space-between;margin-top:1rem;display:flex}.card-header{margin-bottom:1rem}.button-delete{opacity:0;pointer-events:none;border:1px solid var(--accent-dark);background-color:var(--surface);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;transition:opacity .2s,border-color .3s;display:flex;position:absolute;top:0;right:0;transform:translate(50%,-50%)}.button-delete:after{content:"✖";color:var(--accent-dark);font-size:18px;transition:color .3s}.button-delete:hover{border-color:var(--accent)}.button-delete:hover:after{color:var(--accent)}.button-delete:active{border-color:var(--accent-soft)}.button-delete:active:after{color:var(--accent-soft)}.card:hover .button-delete{opacity:1;pointer-events:auto}.button-edit{opacity:0;pointer-events:none;border:1px solid var(--accent-dark);background-color:var(--surface);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;transition:opacity .2s,border-color .3s;display:flex;position:absolute;top:0;right:0;transform:translate(50%,70%)}.button-edit:after{content:"✎";color:var(--accent-dark);font-size:18px;transition:color .3s}.button-edit:hover{border-color:var(--accent)}.button-edit:hover:after{color:var(--accent)}.button-edit:active{border-color:var(--accent-soft)}.button-edit:active:after{color:var(--accent-soft)}.card:hover .button-edit{opacity:1;pointer-events:auto}.ul-checklist{margin:0;padding-left:0}.checklist-item-add{appearance:none;border:1px solid var(--accent-dark);background-color:var(--surface);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;margin:.5rem 0 0 .7rem;padding:0;transition:border-color .3s;display:flex}.checklist-item-add:after{content:"+";width:100%;height:100%;color:var(--accent-dark);justify-content:center;align-items:center;font-size:18px;line-height:1;transition:color .3s;display:flex;transform:translateY(-1px)translate(-.15px)}.checklist-item-add:hover{border-color:var(--accent)}.checklist-item-add:hover:after{color:var(--accent)}.checklist-item-add:active{border-color:var(--accent-soft)}.checklist-item-add:active:after{color:var(--accent-soft)}.input-checklist[type=text]{font-family:var(--mono);transition:color .3s ease-out}.input-checklist[type=text].checked{opacity:.7;color:var(--text-muted);text-decoration:line-through}.li-checklist{justify-content:center;gap:0;display:flex}.checklist-item-delete{appearance:none;opacity:0;pointer-events:none;border:1px solid var(--accent-dark);background-color:var(--surface);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;margin:.25rem .75rem;transition:opacity .2s,border-color .3s;display:flex}.checklist-item-delete:after{content:"✖";color:var(--accent-dark);font-size:14px;transition:color .3s}.checklist-item-delete:hover{border-color:var(--accent)}.checklist-item-delete:hover:after{color:var(--accent)}.checklist-item-delete:active{border-color:var(--accent-soft)}.checklist-item-delete:active:after{color:var(--accent-soft)}.li-checklist:hover .checklist-item-delete{opacity:1;pointer-events:auto}.masonry-grid{width:100%;margin-top:1.5rem;display:flex}.masonry-column{background-clip:padding-box;padding:0 .5rem}.masonry-column>*{margin-bottom:1rem}.main-layout{flex-direction:column;width:100%;display:flex}.header-container{background:var(--surface);border-bottom:1px solid var(--border);border-left:1px solid var(--border);border-right:1px solid var(--border);border-bottom-right-radius:14px;border-bottom-left-radius:14px;gap:1rem;padding:1rem;display:flex}.note-button{border:solid 1px var(--accent-dark);background-color:#0000;border-radius:6px;justify-content:center;align-items:center;padding:.2rem .5rem;transition:border-color .3s;display:flex}.note-button:hover{border-color:var(--accent)}.note-button:hover .p-plus,.note-button:hover .p-text{color:var(--text-header)}.note-button:active{border-color:var(--accent-soft)}.note-button:active .p-plus,.note-button:active .p-text{color:var(--text-muted)}.note-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.p-plus,.p-text{font-family:var(--mono);color:var(--text);transition:color .3s}.p-text{margin-left:.5rem;font-size:1.2rem}.p-plus{margin:-5px 0;font-size:2.2rem}.error-component{box-sizing:border-box;color:#f87171;background-color:#451a1a;border:1px solid #dc2626;border-radius:8px;width:100%;margin:1rem 0 .75rem;padding:.75rem 1rem;animation:.5s ease-out error-component-fade-in}@keyframes error-component-fade-in{0%{opacity:0}to{opacity:1}}.loading-component{border:4px solid var(--accent-soft);border-top-color:var(--accent);border-radius:50%;width:3rem;height:3rem;margin:1.5rem auto;animation:.8s linear infinite loading-component-spin,.5s ease-out loading-component-fade-in}@keyframes loading-component-spin{to{transform:rotate(360deg)}}@keyframes loading-component-fade-in{0%{opacity:0}to{opacity:1}}.login-prompt{text-align:center;justify-content:center;margin:1.5rem 0;display:flex}.login-prompt button{vertical-align:middle;margin:0 .25rem}.container{flex-direction:column;max-width:900px;margin:20px auto 0;display:flex}