:root{--font-color: #333;--background-color: #eee;--border-color: #ddd}[data-theme=dark]{--font-color: #eee;--background-color: #17002c;--border-color: #444}.note-nav{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;background-color:var(--background-color);border-bottom:1px solid #ccc}.nav-brand h1{font-size:1.8rem;font-weight:700;color:var(--font-color)}.nav-logo{text-decoration:none;color:inherit}.nav-links{display:flex;align-items:center;gap:20px}.nav-link{text-decoration:none;color:var(--font-color);font-size:1rem;display:flex;align-items:center;gap:5px;transition:color .3s}.nav-link:hover{color:#007bff}.icon{font-size:1.2rem}.user{display:flex;align-items:center;gap:5px;margin-right:1rem}.user-name{color:var(--font-color);margin-left:20px;font-size:1rem;font-weight:700}.user-preferences{display:flex;gap:10px}.nav-btn{background:none;border:none;cursor:pointer;color:var(--font-color);transition:color .3s}.nav-btn:hover{color:#fff}.logout-btn:hover{color:#d9534f}@media (max-width: 768px){.note-nav{flex-direction:column;align-items:flex-start;padding:10px}.nav-links{flex-direction:column;width:100%;gap:10px;margin-top:10px}.user-preferences{width:100%;justify-content:flex-start;gap:15px;margin-top:10px}}:root{--bg-color: #ffffff00;--loader-color: #2a9d8f;--accent-color: #ffb121;--accent-color-alt1: #e5be10;--accent-color-alt2: #ede42a;--shadow-color: #272fa3}[data-theme=dark]{--bg-color: #12121200;--loader-color: #2ec4b6;--accent-color: #ffb74d;--accent-color-alt1: #f9a825;--accent-color-alt2: #ffea00;--shadow-color: #424242}.wrapper{display:flex;justify-content:center;align-items:center;height:80vh;margin:0}.loader{position:relative;width:120px;height:90px;margin:0 auto}.loader:before{content:"";position:absolute;bottom:30px;left:50px;height:30px;width:30px;border-radius:50%;background:var(--loader-color);animation:loading-bounce .5s ease-in-out infinite alternate}.loader:after{content:"";position:absolute;right:0;top:0;height:7px;width:45px;border-radius:4px;box-shadow:0 5px 0 var(--accent-color),-35px 50px 0 var(--accent-color-alt1),-70px 95px 0 var(--accent-color-alt2);animation:loading-step 1s ease-in-out infinite}@keyframes loading-bounce{0%{transform:scaleY(.7)}40%{transform:scale(.8,1.2)}60%{transform:scale(1)}to{bottom:140px}}@keyframes loading-step{0%{box-shadow:0 10px #0000,0 10px 0 var(--shadow-color),-35px 50px 0 var(--shadow-color),-70px 90px 0 var(--shadow-color)}to{box-shadow:0 10px 0 var(--shadow-color),-35px 50px 0 var(--shadow-color),-70px 90px 0 var(--shadow-color),-70px 90px #0000}}.login-page,.register-page{display:flex;flex-direction:column;align-items:center;justify-content:center;height:80vh;color:var(--text);padding:20px}.login-input,.register-input{display:flex;flex-direction:column;gap:15px;width:100%;max-width:400px;padding:20px;margin:20px;background-color:var(--form-bg);border-radius:12px;box-shadow:0 8px 30px #0000001a}input[type=text],input[type=email],input[type=password]{padding:12px;border-radius:8px;border:1px solid var(--input-border);font-size:16px;background-color:var(--input-bg);color:var(--input-text);transition:all .3s ease}input[type=text]:focus,input[type=email]:focus,input[type=password]:focus{border-color:var(--input-border-focus);outline:none}button{padding:12px;border-radius:8px;background-color:var(--button-bg);color:var(--button-text);border:none;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s ease}button:hover{background-color:var(--button-hover-bg);box-shadow:0 6px 20px #0000001a}a{color:var(--link-color);text-decoration:none;font-weight:700;transition:color .3s ease}a:hover{color:var(--link-hover-color)}@media (max-width: 768px){.login-input,.register-input{max-width:90%}}:root{--text: #333;--form-bg: #fff;--input-bg: #f0f0f0;--input-border: #ccc;--input-border-focus: #007bff;--input-text: #333;--button-bg: #007bff;--button-text: #fff;--button-hover-bg: #0056b3;--link-color: #007bff;--link-hover-color: #0056b3}[data-theme=dark]{--text: #e0e0e0;--form-bg: #1e1e1e;--input-bg: #2c2c2c;--input-border: #444;--input-border-focus: #1e90ff;--input-text: #e0e0e0;--button-bg: #1e90ff;--button-text: #fff;--button-hover-bg: #1c75d8;--link-color: #1e90ff;--link-hover-color: #1c75d8}*{margin:0;padding:0;box-sizing:border-box}:root{--font-color: #333;--background-color: #eee;--card-color: #eee;--border-color: #ddd;--highlight-color: #00bcd4;--delete-color: #f44336;--delete-hover-color: #e53935;--archive-color: #2196f3;--archive-hover-color: #1976d2;--unarchive-color: #4caf50;--unarchive-hover-color: #388e3c;--add-btn-color: #10b981;--add-btn-hover-color: #059669;--link-color: #007bff;--error-message-color: #4a5568;--error-link-color: #3182ce;--submit-btn-color: #10b981;--submit-btn-hover-color: #059669;--empty-message-color: #6b7280}[data-theme=dark]{--font-color: #eee;--background-color: #1f0023;--card-color: #1b0e2f;--border-color: #444;--highlight-color: #00bcd4;--delete-color: #e53935;--delete-hover-color: #b71c1c;--archive-color: #1976d2;--archive-hover-color: #0d47a1;--unarchive-color: #388e3c;--unarchive-hover-color: #2c6b2f;--add-btn-color: #059669;--add-btn-hover-color: #047d63;--link-color: #82b1ff;--error-message-color: #e0e0e0;--error-link-color: #90caf9;--submit-btn-color: #059669;--submit-btn-hover-color: #027c61;--empty-message-color: #9e9e9e}body{font-family:Arial,sans-serif;background-color:var(--background-color)}.search-bar{padding:8px;border:1px solid #6f7b8c;border-radius:4px;width:30%;background-color:var(--background-color);color:var(--font-color);font-size:1rem;outline:none}.search-bar::placeholder{color:var(--font-color)}.search-bar:focus{border-color:#00bcd4}.action-btn{padding:10px 20px;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease,transform .3s ease;display:flex;align-items:center;justify-content:center;font-size:16px}.action-btn.delete{background-color:#f44336;color:#fff}.action-btn.delete:hover{background-color:#e53935;transform:scale(1.05)}.action-btn.archive{background-color:#2196f3;color:#fff}.action-btn.archive:hover{background-color:#1976d2;transform:scale(1.05)}.action-btn.unarchive{background-color:#4caf50;color:#fff}.action-btn.unarchive:hover{background-color:#388e3c;transform:scale(1.05)}.action-btn:focus{outline:none;box-shadow:0 0 5px #0003}.action-btn svg{font-size:20px}.note-item__content{background-color:var(--background-color);padding:20px;margin-bottom:20px;border-radius:10px;box-shadow:0 2px 10px #0000001a;transition:transform .2s ease,box-shadow .2s ease}.note-item__content:hover{transform:translateY(-5px)}.note-item__title{font-size:1.5rem;font-weight:600;color:var(--font-color);margin-bottom:10px;text-decoration:none;transition:color .3s ease}.note-item__title a{text-decoration:none;color:inherit}.note-item__title a:hover{color:#007bff}.note-item__date{font-size:.9rem;color:#666;margin-bottom:15px}.note-item__body{font-size:1rem;line-height:1.6;color:var(--font-color)}.notes-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;padding:20px}.notes-list>*{background-color:var(--card-color);border-radius:10px;transition:transform .2s ease,box-shadow .2s ease;padding:20px}.notes-list>*:hover{transform:translateY(-5px);box-shadow:0 4px 20px #00000026}.notes-container{max-width:1200px;margin:0 auto;padding:20px}.notes-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding:10px 0;border-bottom:2px solid var(--border-color)}.notes-header h1{font-size:2rem;font-weight:700;color:var(--font-color)}.search-bar{padding:10px;border-radius:5px;border:1px solid var(--border-color);width:300px}.action-btn.add{position:fixed;bottom:30px;right:30px;background-color:var(--add-btn-color);border:none;border-radius:50%;width:60px;height:60px;display:flex;justify-content:center;align-items:center;box-shadow:0 4px 10px #0003;cursor:pointer;transition:background-color .3s ease}.action-btn.add:hover{background-color:var(--add-btn-hover-color)}.add-icon{font-size:30px;color:var(--font-color)}.action-btn.add a{display:flex;justify-content:center;align-items:center;color:inherit;text-decoration:none}.note-details{padding:20px;max-width:700px;margin:1rem auto;background-color:var(--background-color);border-radius:10px;box-shadow:0 4px 15px #0000001a;color:var(--font-color);font-family:Roboto,sans-serif;text-align:center}.note-title{font-size:28px;font-weight:700;color:var(--font-color);margin-bottom:10px}.note-date{font-size:16px;color:#6b7280;margin-bottom:20px}.note-body{font-size:18px;line-height:1.6;color:var(--font-color);margin:30px;word-wrap:break-word}.note-actions{display:flex;justify-content:center;gap:15px}.note-actions button{background-color:#f3f4f6;border:none;padding:10px 15px;font-size:16px;border-radius:8px;cursor:pointer;transition:background-color .2s ease;display:flex;align-items:center;justify-content:center}.note-input{display:flex;flex-direction:column;gap:20px;background-color:var(--border-color);padding:20px;border-radius:10px;box-shadow:0 4px 8px #0000001a;max-width:600px;margin:1em auto}.note-input h2{font-size:24px;color:var(--font-color)}.note-input__title__char-limit{font-size:14px;color:var(--font-color);text-align:right}.note-input__title{padding:10px;border:1px solid #d1d5db;border-radius:8px;font-size:18px;color:#374151;outline:none;transition:border-color .2s}.note-input__title:focus{border-color:#10b981}.add-new-page__input__body{min-height:150px;padding:10px;border:1px solid #d1d5db;border-radius:8px;font-size:16px;color:#374151;outline:none;background-color:#fff}.add-new-page__input__body:empty:before{content:attr(data-placeholder);color:#9ca3af;font-style:italic}.error-container{text-align:center}.error-container img{max-width:100%;height:auto;margin-bottom:1.5rem}.error-message{font-size:1.5rem;color:#4a5568;margin-bottom:2rem}.error-link{font-size:1rem;color:#3182ce;text-decoration:none;padding:10px 20px;border:2px solid #3182ce;border-radius:5px;transition:background-color .3s ease,color .3s ease}.error-link:hover{background-color:#3182ce;color:#fff}.error-link:focus{outline:none;box-shadow:0 0 0 3px #3182ce80}.submit-btn{display:flex;align-items:center;justify-content:center;background-color:#10b981;color:#fff;border:none;border-radius:8px;padding:10px 20px;cursor:pointer;transition:background-color .3s}.submit-btn:hover{background-color:#059669}.submit-icon{font-size:24px;margin-left:8px}.empty-container{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px}.empty-image{max-width:80%;height:auto;margin-bottom:20px}.empty-message{font-size:24px;color:#6b7280;font-weight:500}@media (max-width: 768px){.notes-container{padding:10px}.notes-header{flex-direction:column;align-items:flex-start}.search-bar{width:100%;margin-top:10px}}@media (max-width: 768px){.notes-list{grid-template-columns:1fr;padding:10px}.notes-list>*{padding:15px}}@media (max-width: 768px){.note-item__content{padding:15px}.note-item__title{font-size:1.2rem}.note-item__body{font-size:.9rem}}@media (max-width: 768px){.search-bar{width:100%}.nav-brand h1{font-size:1.6rem}.nav-links h1{font-size:1.3rem}}