:root{--bg:#fff;--text:#111827;--note-bg:#f9fafb;--note-border:#e5e7eb;--fab-bg:#3b82f6;--fab-bg-hover:#2563eb;--modal-bg:#fff}body{margin:0;font-family:Arial,sans-serif;padding:2rem;background:var(--bg);color:var(--text)}body.dark{--bg:#111827;--text:#f3f4f6;--note-bg:#1f2937;--note-border:#374151;--fab-bg:#2563eb;--fab-bg-hover:#1d4ed8;--modal-bg:#1f2937}button,input,textarea{padding:.5rem;margin-right:.5rem}ul{list-style:none;padding:0}.view-toggle{margin-bottom:1rem}.notes-container{display:grid;grid-gap:1rem;gap:1rem;padding:0;margin:0}.notes-container.list{grid-template-columns:1fr}.notes-container.grid{grid-template-columns:repeat(2,1fr)}@media (min-width:1024px){.notes-container.grid{grid-template-columns:repeat(4,1fr)}}.note-item{background:var(--note-bg);border:1px solid var(--note-border);border-radius:.75rem;padding:1rem;display:flex;flex-direction:column;justify-content:space-between;min-height:120px;box-shadow:0 1px 3px rgba(0,0,0,.1);transition:box-shadow .2s ease-in-out;cursor:-webkit-grab;cursor:grab}.note-item:active{cursor:-webkit-grabbing;cursor:grabbing}.note-item:hover{box-shadow:0 4px 6px rgba(0,0,0,.15)}.note-text{flex:1 1}.note-title{font-weight:700;margin-bottom:.25rem}.note-date{font-size:.875rem;color:var(--note-border);margin-bottom:.5rem}.note-actions{display:flex;gap:.5rem;margin-top:.5rem;opacity:0;pointer-events:none;visibility:hidden;transition:opacity .2s ease-in-out}.note-actions button{padding:.25rem;border-radius:.375rem;background:transparent;border:none;cursor:pointer;margin-right:0}.note-actions button:hover{background:var(--note-border)}.note-item:focus-within .note-actions,.note-item:hover .note-actions{opacity:1;pointer-events:auto;visibility:visible}.fab{margin-right:0;position:fixed;bottom:1rem;right:1rem;background-color:var(--fab-bg);color:#fff;border:none;border-radius:9999px;width:56px;height:56px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,.2)}.fab:hover{background-color:var(--fab-bg-hover)}.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center}.modal{background:var(--modal-bg);padding:1rem;border-radius:.75rem;display:flex;flex-direction:column;gap:.5rem;min-width:300px}.save-button{margin-right:0;align-self:flex-end;background:var(--fab-bg);color:#fff;border:none;border-radius:.375rem;padding:.5rem 1rem;cursor:pointer}.save-button:hover{background:var(--fab-bg-hover)}.theme-toggle{position:fixed;top:1rem;right:1rem;background:var(--note-bg);color:var(--text);border:1px solid var(--note-border);border-radius:.375rem;padding:.25rem .5rem;cursor:pointer;margin-right:0}