@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap);:root{--font-family-primary:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-weight-light:300;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--spacing-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-xxl:3rem;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-round:50%;--transition-fast:150ms ease-in-out;--transition-base:250ms ease-in-out;--transition-slow:350ms ease-in-out;--z-base:1;--z-dropdown:100;--z-sticky:500;--z-overlay:1000;--z-modal:2000;--z-tooltip:3000;--bg-primary:#fff;--bg-secondary:#f8f9fa;--bg-tertiary:#e9ecef;--text-primary:#212529;--text-secondary:#6c757d;--text-muted:#adb5bd;--border-color:#dee2e6;--border-color-hover:#ced4da;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-base:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--shadow-xl:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;--accent-primary:#0d6efd;--accent-hover:#0b5ed7;--accent-active:#0a58ca;--success:#198754;--success-hover:#157347;--danger:#dc3545;--danger-hover:#bb2d3b;--warning:#fd7e14;--warning-hover:#e8590c;--note-color-1:gold;--note-color-2:#ff6b6b;--note-color-3:#4ecdc4;--note-color-4:#45b7d1;--note-color-5:#96ceb4;--note-color-6:#ffeaa7;--note-color-7:plum;--note-color-8:#ffa07a;--note-color-9:#87ceeb;--note-color-10:khaki;--note-color-11:#ffb347}[data-theme=dark]{--bg-primary:#202124;--bg-secondary:#2d2e30;--bg-tertiary:#3c4043;--text-primary:#e8eaed;--text-secondary:#9aa0a6;--text-muted:#5f6368;--border-color:#5f6368;--border-color-hover:#80868b;--shadow-sm:0 1px 2px 0 #0000004d;--shadow-base:0 1px 3px 0 #0006,0 1px 2px -1px #0006;--shadow-md:0 4px 6px -1px #0006,0 2px 4px -2px #0006;--shadow-lg:0 10px 15px -3px #0006,0 4px 6px -4px #0006;--shadow-xl:0 20px 25px -5px #00000080,0 8px 10px -6px #00000080;--accent-primary:#8ab4f8;--accent-hover:#aecbfa;--accent-active:#c9ddfc;--success:#81c995;--success-hover:#9dd6ab;--danger:#f28b82;--danger-hover:#f5a39e;--warning:#fdd663;--warning-hover:#fde08a;--note-color-1:#b8860b;--note-color-2:#8b0000;--note-color-3:#008b8b;--note-color-4:#191970;--note-color-5:#228b22;--note-color-6:#ff8c00;--note-color-7:#8b008b;--note-color-8:sienna;--note-color-9:#2f4f4f;--note-color-10:#556b2f;--note-color-11:peru}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body,html{height:100%}body{background-color:var(--bg-primary);color:var(--text-primary);font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);line-height:1.6;min-height:100%;overflow-x:hidden;overflow-y:auto;padding-bottom:60px;transition:background-color var(--transition-base),color var(--transition-base)}.skip-link{height:1px;left:-999px;overflow:hidden;position:absolute;top:auto;width:1px}.skip-link:focus{background:#0d6efd;background:var(--bg-accent,#0d6efd);border-radius:4px;color:#fff;height:auto;left:1rem;padding:.5rem 1rem;top:1rem;width:auto;z-index:9999}:focus{outline:none}:focus-visible{outline:3px solid #0d6efd;outline-offset:2px}.visually-hidden{clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute!important;white-space:nowrap;width:1px}.icon-btn{align-items:center;background:none;border:none;color:inherit;cursor:pointer;display:inline-flex;margin:0;padding:.4rem}.icon-btn:focus-visible{border-radius:4px;outline:2px solid #0d6efd;outline:2px solid var(--focus-color,#0d6efd)}.App{display:flex;flex-direction:column;min-height:100vh}button{background:none;border:none;cursor:pointer;font-family:inherit;outline:none}button:disabled{cursor:not-allowed;opacity:.6}input,textarea{font-family:inherit;outline:none}a{color:inherit;text-decoration:none}ol,ul{list-style:none}img{display:block;height:auto;max-width:100%}@media (max-width:768px){body{padding-bottom:50px}}.top-bar{background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color);box-shadow:var(--shadow-md);left:0;padding:var(--spacing-md) var(--spacing-xl);position:fixed;right:0;top:0;transition:all var(--transition-base);z-index:var(--z-sticky)}.top-bar-content{align-items:center;display:flex;justify-content:center;margin:0 auto;max-width:1200px}.app-title{color:var(--text-primary);font-size:1.8rem;font-weight:var(--font-weight-semibold);letter-spacing:-.5px;margin:0;text-align:center}.notes-container{flex:1 1;margin-bottom:60px;margin-top:80px;overflow-y:auto;padding:var(--spacing-xl);width:100%}.notes-masonry{column-gap:var(--spacing-lg);columns:280px 5;margin:0 auto;width:100%}.note-item{break-inside:avoid;display:inline-block;margin-bottom:var(--spacing-md);page-break-inside:avoid;width:100%}@media (max-width:1200px){.notes-masonry{columns:280px 4}}@media (max-width:992px){.notes-masonry{columns:280px 3}}@media (max-width:768px){.top-bar{padding:var(--spacing-sm) var(--spacing-md)}.app-title{font-size:1.4rem}.notes-container{padding:var(--spacing-md)}.notes-masonry{column-gap:var(--spacing-md);columns:280px 2}}@media (max-width:480px){.notes-masonry{column-count:1}}.note-card{word-wrap:break-word;background-color:var(--bg-tertiary);border-radius:var(--radius-lg);box-shadow:var(--shadow-base);cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;min-height:120px;padding:var(--spacing-md);position:relative;transition:background-color var(--transition-fast)}.note-card:hover{background-color:var(--border-color);box-shadow:var(--shadow-md)}.note-content{flex:1 1;margin-bottom:var(--spacing-sm)}.note-title{word-wrap:break-word;font-size:1rem;font-weight:var(--font-weight-bold);line-height:1.3;margin:0 0 var(--spacing-sm) 0}.note-text,.note-title{color:var(--text-primary)}.note-text{font-size:.95rem;line-height:1.5;margin:0;white-space:pre-wrap;word-break:break-word}.note-text.completed{color:var(--text-secondary);opacity:.7;text-decoration:line-through}.note-actions{align-items:center;display:flex;gap:var(--spacing-xs);justify-content:flex-end;margin-top:var(--spacing-sm);opacity:0;transition:opacity var(--transition-fast)}.note-card:hover .note-actions{opacity:1}.action-icon{align-items:center;background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;display:flex;font-size:.75rem;height:24px;justify-content:center;opacity:.8;padding:var(--spacing-xs);transition:all var(--transition-fast);width:24px}.action-icon:hover{background-color:var(--bg-secondary);border-color:var(--text-secondary);color:var(--text-primary);opacity:1;transform:scale(1.1)}.action-icon.complete:hover{background-color:var(--success);border-color:var(--success);color:#fff}.action-icon.delete:hover{background-color:var(--danger);border-color:var(--danger);color:#fff}.note-color-1{background-color:var(--note-color-1)!important}.note-color-2{background-color:var(--note-color-2)!important}.note-color-3{background-color:var(--note-color-3)!important}.note-color-4{background-color:var(--note-color-4)!important}.note-color-5{background-color:var(--note-color-5)!important}.note-color-6{background-color:var(--note-color-6)!important}.note-color-7{background-color:var(--note-color-7)!important}.note-color-8{background-color:var(--note-color-8)!important}.note-color-9{background-color:var(--note-color-9)!important}.note-color-10{background-color:var(--note-color-10)!important}.note-color-11{background-color:var(--note-color-11)!important}.color-picker-container{position:relative}.color-picker-dropdown{grid-gap:var(--spacing-xs);animation:fadeIn var(--transition-fast);background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-md);bottom:100%;box-shadow:var(--shadow-lg);display:grid;gap:var(--spacing-xs);grid-template-columns:repeat(4,1fr);left:50%;margin-bottom:var(--spacing-xs);padding:var(--spacing-sm);position:absolute;transform:translateX(-50%);z-index:var(--z-dropdown)}.color-option-small{border:2px solid #0000;border-radius:var(--radius-round);cursor:pointer;height:24px;transition:all var(--transition-fast);width:24px}.color-option-small:hover{border-color:var(--text-primary);transform:scale(1.2)}.modal-overlay{align-items:center;animation:fadeIn var(--transition-fast);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#00000080;display:flex;inset:0;justify-content:center;padding:var(--spacing-xl);position:fixed;z-index:var(--z-modal)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{animation:slideUp var(--transition-base);background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);max-height:80vh;max-width:600px;overflow-y:auto;width:100%}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-header{align-items:center;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;padding:var(--spacing-lg) var(--spacing-xl) var(--spacing-md)}.modal-header h3{color:var(--text-primary);font-size:1.5rem;font-weight:var(--font-weight-semibold);margin:0}.modal-close-btn{align-items:center;background:none;border:none;border-radius:var(--radius-round);color:var(--text-secondary);cursor:pointer;display:flex;font-size:1.25rem;height:36px;justify-content:center;padding:var(--spacing-sm);transition:all var(--transition-fast);width:36px}.modal-close-btn:hover{background-color:var(--bg-primary);color:var(--text-primary);transform:rotate(90deg)}.modal-form{padding:var(--spacing-lg) var(--spacing-xl) var(--spacing-xl)}.note-input-container{margin-bottom:var(--spacing-lg)}.modal-note-title{background-color:var(--bg-primary);border:2px solid var(--border-color);border-radius:var(--radius-lg);color:var(--text-primary);font-family:var(--font-family-primary);font-size:1.1rem;font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-md);min-height:24px;padding:var(--spacing-md);resize:none;transition:all var(--transition-fast);width:100%}.modal-note-title:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px #0d6efd1a;outline:none}.modal-note-title::placeholder{color:var(--text-muted)}.modal-note-text{background-color:var(--bg-primary);border:2px solid var(--border-color);border-radius:var(--radius-lg);color:var(--text-primary);font-family:var(--font-family-primary);font-size:1rem;line-height:1.6;min-height:150px;padding:var(--spacing-md);resize:vertical;transition:all var(--transition-fast);width:100%}.modal-note-text:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px #0d6efd1a;outline:none}.modal-note-text::placeholder{color:var(--text-muted)}.color-selector{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);margin-bottom:var(--spacing-lg)}.color-option{border:3px solid #0000;border-radius:var(--radius-round);cursor:pointer;height:32px;position:relative;transition:all var(--transition-fast);width:32px}.color-option:hover{box-shadow:var(--shadow-md);transform:scale(1.15)}.color-option.selected{border-color:var(--text-primary);transform:scale(1.1)}.color-option.selected:after{color:var(--text-primary);content:"✓";font-size:.9rem;font-weight:var(--font-weight-bold);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.modal-actions{display:flex;gap:var(--spacing-md);justify-content:flex-end}.modal-btn{border:none;border-radius:var(--radius-md);cursor:pointer;font-size:1rem;font-weight:var(--font-weight-medium);min-width:100px;padding:var(--spacing-sm) var(--spacing-lg);transition:all var(--transition-fast)}.modal-btn-primary{background-color:var(--accent-primary);color:#fff}.modal-btn-primary:hover{background-color:var(--accent-hover);box-shadow:var(--shadow-md);transform:translateY(-1px)}.modal-btn-primary:active{transform:translateY(0)}.modal-btn-secondary{background-color:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-primary)}.modal-btn-secondary:hover{background-color:var(--border-color)}@media (max-width:768px){.modal-overlay{padding:var(--spacing-md)}.modal-header{padding:var(--spacing-md) var(--spacing-lg) var(--spacing-sm)}.modal-header h3{font-size:1.3rem}.modal-form{padding:var(--spacing-md) var(--spacing-lg)}.modal-note-text,.modal-note-title{font-size:.95rem}.color-option{height:28px;width:28px}}@media (max-width:480px){.modal-overlay{padding:var(--spacing-sm)}.modal-actions{flex-direction:column}.modal-btn{width:100%}}.floating-action-button{align-items:center;background-color:var(--accent-primary);border:none;border-radius:var(--radius-round);bottom:80px;box-shadow:var(--shadow-lg);color:var(--bg-primary);cursor:pointer;display:flex;font-size:1.25rem;height:56px;justify-content:center;position:fixed;right:var(--spacing-xl);transition:all var(--transition-base);width:56px;z-index:var(--z-overlay)}.floating-action-button:hover{background-color:var(--accent-hover);box-shadow:var(--shadow-xl);transform:scale(1.1)}.floating-action-button:active{transform:scale(.95)}.floating-action-button:focus{box-shadow:var(--shadow-xl),0 0 0 4px #0d6efd33;outline:none}@media (max-width:768px){.floating-action-button{bottom:70px;font-size:1.125rem;height:52px;right:var(--spacing-lg);width:52px}}@media (max-width:480px){.floating-action-button{bottom:75px;font-size:1rem;height:48px;right:1.2rem;width:48px}}@media (max-width:360px){.floating-action-button{bottom:80px;right:var(--spacing-md)}}@media (max-width:320px){.floating-action-button{bottom:85px}}.footer{background-color:var(--bg-secondary);border-top:1px solid var(--border-color);bottom:0;box-shadow:0 -2px 8px var(--shadow-sm);left:0;position:fixed;right:0;z-index:var(--z-sticky)}.footer-content{grid-gap:var(--spacing-md);display:grid;grid-template-columns:auto 1fr auto;margin:0 auto;max-width:1200px;min-height:60px;padding:var(--spacing-sm) var(--spacing-xl)}.footer-content,.social-links{align-items:center;gap:var(--spacing-md)}.social-links{display:flex;justify-self:start}.social-link{align-items:center;background-color:var(--bg-tertiary);border:2px solid #0000;border-radius:var(--radius-round);display:flex;font-size:.9rem;height:32px;justify-content:center;text-decoration:none;transition:all var(--transition-base);width:32px}.social-link.github{color:var(--text-primary)}.social-link.github:hover{background-color:var(--text-primary);box-shadow:var(--shadow-md);color:var(--bg-primary);transform:translateY(-2px)}.social-link.linkedin{color:var(--accent-primary)}.social-link.linkedin:hover{background-color:var(--accent-primary);box-shadow:var(--shadow-md);color:var(--bg-primary);transform:translateY(-2px)}.copyright{justify-self:center;text-align:center}.copyright p{color:var(--text-primary);font-size:.85rem;font-weight:var(--font-weight-medium);margin:0;opacity:.9}.footer .theme-toggle{align-items:center;display:flex;justify-self:end}.footer .theme-btn{align-items:center;background-color:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-xl);color:var(--text-primary);cursor:pointer;display:flex;font-size:.8rem;font-weight:var(--font-weight-medium);gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm);transition:all var(--transition-base)}.footer .theme-btn:hover{background-color:var(--accent-primary);border-color:var(--accent-primary);box-shadow:var(--shadow-sm);color:var(--bg-primary);transform:translateY(-1px)}.footer .theme-icon{font-size:.8rem;transition:transform var(--transition-base)}.footer .theme-btn:hover .theme-icon{transform:scale(1.1)}.footer .theme-text{font-size:.75rem}@media (max-width:768px){.footer-content{padding:var(--spacing-xs) var(--spacing-md)}.social-links{gap:var(--spacing-sm)}.social-link{font-size:.8rem;height:28px;width:28px}.copyright p{font-size:.75rem}.footer .theme-btn{font-size:.75rem;padding:.3rem .5rem}}@media (max-width:480px){.footer-content{flex-wrap:wrap;justify-content:space-between;min-height:60px;padding:var(--spacing-sm)}.social-links{gap:var(--spacing-sm);order:1}.theme-toggle{order:2}.copyright{margin-top:var(--spacing-xs);order:3;width:100%}.copyright p{font-size:.65rem;white-space:normal}.footer .theme-text{display:none}.footer .theme-btn{border-radius:var(--radius-lg);font-size:.7rem;padding:.3rem .5rem}.footer .theme-icon{font-size:.7rem}}@media (max-width:360px){.footer-content{min-height:65px}}@media (max-width:320px){.footer-content{min-height:70px}}
/*# sourceMappingURL=main.20848baa.css.map*/