*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{height:100%;overflow:auto}.bottom-nav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-around;align-items:center;background:#fff;border-top:1px solid #e0e0e0;padding:8px 0;z-index:100}.nav-button{background:none;border:none;cursor:pointer;padding:8px 16px;color:#666;display:flex;align-items:center;justify-content:center}.nav-button.active{color:#000}.nav-button svg{width:24px;height:24px}.home-page{height:100%;padding-bottom:80px;background:#fff;overflow:auto}.home-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #e0e0e0}.home-header h1{font-size:18px;font-weight:600;margin:0}.home-content{padding:24px 16px}.search-page{height:100%;padding-bottom:80px;background:#fff;overflow:auto}.search-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #e0e0e0}.search-header h1{font-size:18px;font-weight:600;margin:0}.search-content{padding:24px 16px}.search-results{margin-top:24px}.log-page{height:100%;padding-bottom:80px;background:#fff;overflow:auto}.log-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #e0e0e0}.log-header h1{font-size:18px;font-weight:600;margin:0}.cancel-button{background:none;border:none;cursor:pointer;color:#666;font-size:16px;padding:4px 8px}.log-button{background:#4caf50;color:#fff;border:none;padding:8px 16px;border-radius:4px;cursor:pointer;font-size:16px;font-weight:600}.log-content{padding:24px 16px}.search-bar-container{position:relative;margin-bottom:24px}.search-bar{width:100%;padding:12px 40px 12px 16px;border:1px solid #e0e0e0;border-radius:8px;font-size:16px}.clear-search{position:absolute;right:40px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:20px;color:#666;padding:4px}.search-icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#666}.search-results{display:flex;flex-direction:column;gap:8px}.search-result{padding:12px;background:#fff;border:1px solid #e0e0e0;border-radius:8px;cursor:pointer;display:flex;gap:8px;align-items:flex-start}.search-result:hover{background:#f5f5f5}.result-type{font-weight:600;color:#666;font-size:12px;flex-shrink:0}.selected-work{text-align:center;margin-bottom:32px}.work-cover{width:80px;height:120px;object-fit:cover;border-radius:4px;margin-bottom:12px}.selected-work h2{font-size:18px;font-weight:600;margin:0 0 4px}.selected-work p{font-size:14px;color:#666;margin:0}.form-field{margin-bottom:24px}.form-field label{display:block;font-size:14px;font-weight:600;margin-bottom:8px;color:#333}.form-field input[type=date]{width:100%;padding:8px;border:1px solid #e0e0e0;border-radius:4px;font-size:14px;margin-bottom:4px}.date-display{font-size:14px;color:#666}.stars{display:flex;gap:4px}.star{background:none;border:none;cursor:pointer;font-size:24px;color:#ddd;padding:0}.star.filled{color:gold}.tags-input{display:flex;gap:8px;margin-bottom:8px}.tags-input input{flex:1;padding:8px;border:1px solid #e0e0e0;border-radius:4px;font-size:14px}.tags-input button{padding:8px 16px;background:#333;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px}.tags-list{display:flex;flex-wrap:wrap;gap:8px}.tag{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:#f0f0f0;border-radius:4px;font-size:14px}.tag button{background:none;border:none;cursor:pointer;font-size:18px;color:#666;padding:0;line-height:1}.form-field textarea{width:100%;padding:8px;border:1px solid #e0e0e0;border-radius:4px;font-size:14px;font-family:inherit;resize:vertical}.quotes-table{border:1px solid #e0e0e0;border-radius:4px;overflow:hidden}.quotes-header{display:grid;grid-template-columns:80px 1fr;gap:8px;padding:8px;background:#f5f5f5;font-size:12px;font-weight:600;color:#666}.quote-row{display:grid;grid-template-columns:80px 1fr auto;gap:8px;padding:8px;border-top:1px solid #e0e0e0;align-items:start}.quote-row input{padding:6px;border:1px solid #e0e0e0;border-radius:4px;font-size:14px}.quote-row textarea{padding:6px;border:1px solid #e0e0e0;border-radius:4px;font-size:14px;font-family:inherit;resize:vertical}.remove-quote{background:none;border:none;cursor:pointer;font-size:20px;color:#666;padding:4px;line-height:1}.add-quote-button{width:100%;padding:8px;background:#f5f5f5;border:none;border-top:1px solid #e0e0e0;cursor:pointer;font-size:14px;color:#333}.add-quote-button:hover{background:#e0e0e0}.list-page{height:100%;padding-bottom:80px;background:#fff;overflow:auto}.list-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #e0e0e0}.list-header h1{font-size:18px;font-weight:600;margin:0}.list-content{padding:16px}.journal-entry{margin-bottom:32px;padding-bottom:32px;border-bottom:1px solid #e0e0e0}.journal-entry:last-child{border-bottom:none}.entry-date{font-size:14px;color:#333;margin:0 0 12px;font-weight:500}.entry-header{display:flex;gap:12px;margin-bottom:16px}.entry-thumbnail{width:50px;height:75px;object-fit:cover;border-radius:4px;flex-shrink:0;opacity:.6}.entry-info{flex:1}.entry-title{font-size:16px;font-weight:600;margin:0 0 4px;color:#333}.entry-author{font-size:14px;color:#666;margin:0}.entry-review{margin:12px 0;padding:12px;background:#f5f5f5;border-radius:4px}.entry-review p{margin:0;font-size:14px;line-height:1.5;color:#666}.entry-stars{margin:12px 0;display:flex;gap:2px}.star-filled{color:gold;font-size:18px}.star-empty{color:#ddd;font-size:18px}.entry-quotes{margin:12px 0;display:flex;flex-direction:column;gap:8px}.quote-item{display:flex;gap:12px;font-size:14px;line-height:1.5}.quote-page{font-weight:600;color:#333;flex-shrink:0;min-width:30px}.quote-text{color:#333;flex:1}.entry-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.tag{display:inline-block;padding:4px 10px;background:#f0f0f0;border-radius:4px;font-size:12px;color:#666}.profile-page{height:100%;padding-bottom:80px;background:#fff;overflow:auto}.profile-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #e0e0e0}.profile-header h1{font-size:18px;font-weight:600;margin:0}.settings-button{background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;color:#000}.profile-content{padding:24px 16px}.user-info{text-align:center;margin-bottom:32px}.profile-photo{width:100px;height:100px;border-radius:50%;object-fit:cover;margin-bottom:16px}.user-info h2{font-size:24px;font-weight:600;margin:0 0 8px}.location{color:#666;margin:0 0 16px}.bio{margin-top:16px;padding:16px;background:#f5f5f5;border-radius:8px;text-align:left}.bio p{margin:0;font-size:14px;line-height:1.5;color:#333}.section{margin-bottom:32px}.section h3{font-size:18px;font-weight:600;margin:0 0 16px}.book-covers{display:flex;gap:16px;overflow-x:auto;padding-bottom:8px}.book-cover{flex-shrink:0;width:100px}.book-cover img{width:100px;height:150px;object-fit:cover;border-radius:4px;margin-bottom:8px}.book-title{font-size:12px;margin:0;line-height:1.3;color:#333}.journal-summary{font-size:14px;color:#666;margin:0 0 16px}.journal-entries{display:flex;flex-direction:column;gap:16px}.journal-entry{display:flex;gap:12px}.entry-thumbnail{width:50px;height:75px;object-fit:cover;border-radius:4px;flex-shrink:0}.entry-details{flex:1}.entry-date{font-size:14px;color:#666;margin:0 0 4px}.entry-title{font-size:14px;color:#333;margin:0;line-height:1.4}.stats-section{display:flex;flex-direction:column;gap:12px}.stat-item{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #e0e0e0}.stat-item:last-child{border-bottom:none}.stat-label{font-size:14px;color:#666}.stat-value{font-size:14px;font-weight:600;color:#000}.app{height:100%;background:#fff;overflow:auto}.login-view{display:flex;align-items:center;justify-content:center;height:100%;padding:24px;overflow:auto}.login-view form{display:flex;flex-direction:column;gap:16px;max-width:300px;width:100%}.login-view input{padding:12px;border:1px solid #e0e0e0;border-radius:4px;font-size:16px}.login-view button{padding:12px;background:#333;color:#fff;border:none;border-radius:4px;font-size:16px;cursor:pointer}.login-view button:hover{background:#555}