#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50}nav{padding:30px}nav a{font-weight:700;color:#2c3e50}nav a.router-link-exact-active{color:#42b983}.login-container[data-v-62598c6e]{width:300px;margin:0 auto;padding:20px;border:1px solid #ccc;border-radius:5px;background-color:#f9f9f9}.tab-bar[data-v-62598c6e]{display:flex;margin-bottom:20px}.tab-bar button[data-v-62598c6e]{flex:1;padding:10px;border:none;background-color:#eee;cursor:pointer;transition:background-color .3s ease}.tab-bar button.active-tab[data-v-62598c6e]{background-color:#007bff;color:#fff}form input[data-v-62598c6e]{width:100%;padding:10px;margin-bottom:15px;border:1px solid #ccc;border-radius:3px;transition:border-color .3s ease,box-shadow .3s ease}form button[data-v-62598c6e]{width:100%;padding:10px;background-color:#007bff;color:#fff;border:none;border-radius:3px;cursor:pointer;transition:background-color .3s ease}form button[data-v-62598c6e]:hover{background-color:#0056b3}.footer[data-v-62598c6e]{margin-top:20px;text-align:center;font-size:12px}.site-footer[data-v-62598c6e]{text-align:center;padding:15px;background-color:#f4f4f4;border-top:1px solid #eaeaea;font-size:14px;color:#666}.site-footer a[data-v-62598c6e]{color:#007bff;text-decoration:none;transition:color .3s ease}.site-footer a[data-v-62598c6e]:hover{color:#0056b3}body[data-v-5417f1a1]{font-family:Roboto,sans-serif;background-color:#f8f8f8;margin:0;padding:0;min-height:100vh;box-sizing:border-box}.note-container[data-v-5417f1a1]{display:flex;flex-direction:column;min-height:100vh}.app-title[data-v-5417f1a1]{background-color:#007bff;color:#fff;margin:0;padding:20px;text-align:center;font-size:24px;letter-spacing:1px}.main-content[data-v-5417f1a1]{display:flex;flex:1}.input-and-category-section[data-v-5417f1a1]{padding:20px;width:30%;display:flex;flex-direction:column}.add-note-btn[data-v-5417f1a1],.category-select[data-v-5417f1a1],.note-content-input[data-v-5417f1a1],.note-title-input[data-v-5417f1a1]{padding:10px;border:1px solid #ccc;border-radius:5px;font-size:16px;margin-bottom:15px;transition:border-color .3s ease;width:100%;box-sizing:border-box}.category-select[data-v-5417f1a1]:focus,.note-content-input[data-v-5417f1a1]:focus,.note-title-input[data-v-5417f1a1]:focus{outline:none;border-color:#007bff;box-shadow:0 0 5px rgba(0,123,255,.2)}.add-note-btn[data-v-5417f1a1]{padding:15px 30px;background-color:#007bff;color:#fff;border:none;cursor:pointer;transition:background-color .3s ease}.add-note-btn[data-v-5417f1a1]:hover{background-color:#0056b3}.notes-list-section[data-v-5417f1a1]{padding:20px;width:70%;border-left:1px solid #eaeaea;display:flex;flex-direction:column}.search-input[data-v-5417f1a1]{padding:10px;border:1px solid #ccc;border-radius:5px;font-size:16px;margin-bottom:15px;transition:border-color .3s ease;width:100%;box-sizing:border-box}.search-input[data-v-5417f1a1]:focus{outline:none;border-color:#007bff;box-shadow:0 0 5px rgba(0,123,255,.2)}.notes-list[data-v-5417f1a1]{flex:1;overflow-y:auto}.note-item[data-v-5417f1a1]{background-color:#f9f9f9;padding:20px;margin-bottom:15px;border-radius:5px;box-shadow:0 1px 3px rgba(0,0,0,.08);transition:transform .3s ease,box-shadow .3s ease;position:relative}.note-item[data-v-5417f1a1]:hover{transform:translateY(-3px);box-shadow:0 3px 6px rgba(0,0,0,.12)}.note-category[data-v-5417f1a1]{position:absolute;top:5px;left:5px;background-color:#007bff;color:#fff;padding:3px 6px;border-radius:3px;font-size:12px}.note-title[data-v-5417f1a1]{margin-top:20px;margin-bottom:10px;font-size:20px;color:#333}.note-content[data-v-5417f1a1]{margin-bottom:10px;color:#666}.note-date[data-v-5417f1a1]{display:block;color:#999;font-size:14px;margin-bottom:10px}.delete-btn[data-v-5417f1a1]{background-color:#dc3545;color:#fff;border:none;padding:10px 20px;border-radius:5px;font-size:14px;cursor:pointer;transition:background-color .3s ease}.delete-btn[data-v-5417f1a1]:hover{background-color:#c82333}.site-footer[data-v-5417f1a1]{text-align:center;padding:15px;background-color:#f4f4f4;border-top:1px solid #eaeaea;font-size:14px;color:#666}.site-footer a[data-v-5417f1a1]{color:#007bff;text-decoration:none;transition:color .3s ease}.site-footer a[data-v-5417f1a1]:hover{color:#0056b3}