:root{--depth-100: #ffffff;--depth-200: #f0efeb;--depth-300: #e8e4dd;--depth-400: #d1cfc7;--depth-500: #8b8581;--depth-600: #605b58;--depth-700: #181818;--accent-coral-100: #f76744;--accent-coral-200: #a22a23;--accent-teal-100: #68bcac;--accent-teal-200: #38645b;--accent-lavender-100: #bf77ff;--accent-lavender-200: #6c4391;--accent-azure-100: #06b4eb;--accent-azure-200: #086380;--accent-lime-100: #d3fb1e;--accent-lime-200: #8ba818;--font-primary: "Roslindale Display Condensed";--font-secondary: "Lausanne"}@font-face{font-family:Roslindale Display Condensed;src:url(/fonts/RoslindaleDisplayCondensed-Light.otf) format("opentype");font-weight:300;font-style:normal}@font-face{font-family:Roslindale Display Condensed;src:url(/fonts/RoslindaleDisplayCondensed-Regular.otf) format("opentype");font-weight:500;font-style:normal}@font-face{font-family:Roslindale Display Condensed;src:url(/fonts/RoslindaleDisplayCondensed-Medium.otf) format("opentype");font-weight:600;font-style:normal}@font-face{font-family:Roslindale Display Condensed;src:url(/fonts/RoslindaleDisplayCondensed-Bold.otf) format("opentype");font-weight:700;font-style:normal}@font-face{font-family:Lausanne;src:url(/fonts/TWKLausanne-50.otf) format("opentype");font-weight:50;font-style:normal}@font-face{font-family:Lausanne;src:url(/fonts/TWKLausanne-100.otf) format("opentype");font-weight:100;font-style:normal}@font-face{font-family:Lausanne;src:url(/fonts/TWKLausanne-150.otf) format("opentype");font-weight:150;font-style:normal}@font-face{font-family:Lausanne;src:url(/fonts/TWKLausanne-200.otf) format("opentype");font-weight:200;font-style:normal}@font-face{font-family:Lausanne;src:url(/fonts/TWKLausanne-250.otf) format("opentype");font-weight:250;font-style:normal}@font-face{font-family:Lausanne;src:url(/fonts/TWKLausanne-300.otf) format("opentype");font-weight:300;font-style:normal}@font-face{font-family:Lausanne;src:url(/fonts/TWKLausanne-350.otf) format("opentype");font-weight:350;font-style:normal}@font-face{font-family:Lausanne;src:url(/fonts/TWKLausanne-400.otf) format("opentype");font-weight:400;font-style:normal}@font-face{font-family:Lausanne;src:url(/fonts/TWKLausanne-450.otf) format("opentype");font-weight:450;font-style:normal}@font-face{font-family:Lausanne;src:url(/fonts/TWKLausanne-500.otf) format("opentype");font-weight:500;font-style:normal}@font-face{font-family:Lausanne;src:url(/fonts/TWKLausanne-550.otf) format("opentype");font-weight:550;font-style:normal}@font-face{font-family:Lausanne;src:url(/fonts/TWKLausanne-600.otf) format("opentype");font-weight:600;font-style:normal}@font-face{font-family:Lausanne;src:url(/fonts/TWKLausanne-650.otf) format("opentype");font-weight:650;font-style:normal}@font-face{font-family:Lausanne;src:url(/fonts/TWKLausanne-700.otf) format("opentype");font-weight:700;font-style:normal}@font-face{font-family:Lausanne;src:url(/fonts/TWKLausanne-750.otf) format("opentype");font-weight:750;font-style:normal}@font-face{font-family:Lausanne;src:url(/fonts/TWKLausanne-800.otf) format("opentype");font-weight:800;font-style:normal}@font-face{font-family:Lausanne;src:url(/fonts/TWKLausanne-850.otf) format("opentype");font-weight:850;font-style:normal}@font-face{font-family:Lausanne;src:url(/fonts/TWKLausanne-900.otf) format("opentype");font-weight:900;font-style:normal}@font-face{font-family:Lausanne;src:url(/fonts/TWKLausanne-950.otf) format("opentype");font-weight:950;font-style:normal}@font-face{font-family:Lausanne;src:url(/fonts/TWKLausanne-1000.otf) format("opentype");font-weight:1000;font-style:normal}*{margin:0;padding:0;box-sizing:border-box}body{width:100%;height:100%;font-family:var(--font-secondary);background-color:var(--depth-200);color:var(--depth-700);padding:.25em}.container{width:75%;margin:0 auto;padding:1em}img{width:100%;height:100%;object-fit:cover}p{font-size:1rem;font-weight:550}span{font-size:1rem;font-weight:450;line-height:1.35}a{display:block;padding:.25em;text-decoration:none;font-size:.9rem;font-weight:700;color:var(--depth-700)}h1{font-family:var(--font-primary);font-size:5rem;font-weight:600;color:var(--depth-700)}h3{font-size:1.25rem;font-weight:700;color:var(--depth-700)}section{margin:1rem 0 5rem}.section-header{margin-bottom:1rem}.page-intro-header h1{text-align:center;color:var(--depth-700);margin-top:10rem}input,textarea,input:focus-visible,textarea:focus-visible{border:none!important;outline:none!important}input{padding:.75rem 1.25rem;border-radius:.4rem;font-size:1rem;font-weight:550;background-color:var(--depth-100);color:var(--depth-600);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::placeholder{opacity:.85;color:var(--depth-500);font-weight:550;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.btn{outline:none;border:none;border-radius:.4rem;cursor:pointer}.sm{padding:.5rem 1rem;font-size:.85rem}.md{padding:.5rem 1rem;font-size:.95rem}.lg{padding:.75rem 1.25rem;font-size:1.125rem}.primary{font-family:var(--font-primary);font-weight:600}.secondary{font-family:var(--font-secondary);font-weight:500}.transparent{background-color:transparent;color:var(--depth-600)}.semi-transparent{background-color:var(--depth-300);color:var(--depth-600)}.dark{background-color:var(--depth-700);color:var(--depth-200)}@media (max-width: 1200px){.container{width:100%}}.navbar{display:flex;justify-content:space-between;align-items:center;padding:1rem 0;margin-bottom:2rem}.nav-brand a{text-transform:uppercase;font-family:var(--font-primary);font-size:1.5rem;font-weight:600;color:var(--depth-700)}.nav-links{display:flex;gap:1.5rem}.nav-links a{font-size:1rem;font-weight:600;color:var(--depth-700);text-decoration:none}.nav-links a:hover,.nav-links a.active{color:var(--depth-700)}.user-section{display:flex;align-items:center;gap:1rem}.user-info{display:flex;align-items:center;gap:.5rem}.user-name{font-size:.9rem;font-weight:700;color:var(--depth-700)}@media (max-width: 768px){.navbar{flex-direction:column;gap:1rem}.nav-links,.user-section{width:100%;justify-content:space-between}}.page-intro-header{width:100%}.stats-cards{display:flex;flex-wrap:wrap;gap:1rem}.stat-card{min-width:220px;padding:4rem 2rem;border-radius:.5rem;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;transition:transform .2s ease}#stat-card-1{background-color:var(--accent-coral-100)}#stat-card-2{background-color:var(--accent-teal-100)}#stat-card-3{background-color:var(--accent-lavender-100)}.stat-number{font-size:5rem;font-weight:500;margin-bottom:1.5rem;-webkit-user-select:none;user-select:none}.stat-label{font-size:1rem;font-weight:700;text-align:center;-webkit-user-select:none;user-select:none}#stat-card-1 .stat-label{color:var(--accent-coral-200)}#stat-card-2 .stat-label{color:var(--accent-teal-200)}#stat-card-3 .stat-label{color:var(--accent-lavender-200)}.currently-reading-section{margin-top:4rem}.section-header h3{font-weight:700;margin-bottom:1.5rem}.book-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}.book-card{aspect-ratio:3/4;border-radius:8px;position:relative;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;padding:.5rem}.delete-book-btn{position:absolute;top:1.5rem;right:1.5rem;color:var(--depth-500);background:none;border:none;border-radius:50%;font-size:1.25rem;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;z-index:10}.book-card:hover .delete-book-btn{opacity:.25;background:none}.delete-book-btn:hover{background:none;opacity:1!important}.book-info{width:100%;height:100%;padding:1rem 2rem 1rem 1rem;display:flex;flex-direction:column;justify-content:space-between}.book-card-1{background-color:var(--accent-lavender-100)}.book-card-1 .book-author{color:var(--accent-lavender-200)}.book-card-2{background-color:var(--accent-coral-100)}.book-card-2 .book-author{color:var(--accent-coral-200)}.book-card-3{background-color:var(--accent-lime-100)}.book-card-3 .book-author{color:var(--accent-lime-200)}.book-card-4{background-color:var(--accent-teal-100)}.book-card-4 .book-author{color:var(--accent-teal-200)}.add-book-btn-wrapper{position:fixed;width:100%;bottom:1rem;left:0;z-index:2;pointer-events:none}.add-book-btn-wrapper .container{display:flex;justify-content:flex-end;align-items:center}.add-book-btn{width:4rem;height:4rem;display:flex;justify-content:center;align-items:center;border-radius:100%;background-color:var(--depth-500);color:var(--depth-100);pointer-events:all;cursor:pointer}.add-icon{font-size:2rem}p.no-data-message{color:var(--depth-400)}@media (max-width: 900px){.stats-cards{flex-direction:column}.stat-card{width:100%;padding:2rem}.stat-number{font-size:3rem}}@media (max-width: 992px){.book-cards{grid-template-columns:repeat(3,1fr)}}@media (max-width: 768px){.book-cards{grid-template-columns:repeat(3,1fr)}}@media (max-width: 576px){.book-cards{grid-template-columns:repeat(2,1fr)}}.preferences.page{padding:2rem 0}.preferences-form-section{max-width:800px}.preference-group{margin-bottom:2.5rem}.preference-group h3{font-size:1.2rem;font-weight:700;margin-bottom:1rem}.options-group{display:flex;flex-wrap:wrap;gap:1rem}.theme-option,.color-option,.format-option{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem;border-radius:8px;border:2px solid var(--depth-300);background:none;font-family:Lausanne,sans-serif;cursor:pointer;transition:border-color .2s}.theme-option:hover,.color-option:hover,.format-option:hover{border-color:var(--depth-400)}.theme-option.selected,.color-option.selected,.format-option.selected{border-color:var(--depth-500);background-color:var(--depth-200)}.theme-preview{width:80px;height:80px;border-radius:8px;display:flex;align-items:center;justify-content:center}.light-theme{background-color:var(--depth-100);border:1px solid var(--depth-300)}.dark-theme{background-color:#1a1a1a;border:1px solid #333}.color-preview{width:50px;height:50px;border-radius:50%}.format-option{flex-direction:column;align-items:flex-start;min-width:150px}.example{font-size:.8rem;color:var(--depth-400)}@media (max-width: 768px){.options-group{flex-direction:column}.theme-option,.color-option,.format-option{width:100%;flex-direction:row;justify-content:space-between}}.profile-settings.page{padding:2rem 0}.page-intro-header{margin-bottom:3rem}.page-intro-header p{font-size:1.2rem;font-weight:400;color:var(--depth-400)}.profile-form-section{max-width:600px}.profile-form-group{margin-bottom:1.5rem}.profile-form-group label{display:block;font-size:.9rem;font-weight:700;color:var(--depth-400);margin-bottom:.5rem}.profile-form-group small{display:block;font-size:.8rem;color:var(--depth-400);margin-top:.25rem}.photo-placeholder{display:flex;flex-direction:column;align-items:center;padding:2rem;border-radius:8px;border:2px dashed var(--depth-300);background-color:var(--depth-200)}.photo-circle{width:100px;height:100px;border-radius:50%;background-color:var(--depth-300);display:flex;align-items:center;justify-content:center;font-size:2.5rem;font-weight:700;color:var(--depth-400);margin-bottom:1rem}.photo-placeholder p{font-size:.9rem;color:var(--depth-400)}.form-actions{margin-top:2rem}.save-btn{padding:.75rem 1.5rem;font-family:Lausanne,sans-serif;font-size:1rem;font-weight:600;background-color:var(--depth-500);color:var(--depth-100);border:none;border-radius:50px;cursor:pointer}.status-message{margin-top:1rem;padding:1rem;border-radius:8px;font-weight:600}.status-message.success{background-color:#4caf501a;color:#388e3c}.status-message.error{background-color:#f443361a;color:#d32f2f}.loading{text-align:center;padding:2rem;font-size:1.2rem;color:var(--depth-400)}.add-book.page .section-header h3{margin-top:6rem}.book-form{display:flex;flex-direction:column;gap:2rem}.genre-options{display:flex;flex-wrap:wrap;gap:1rem}.genre-btn,.status-btn{padding:.75rem 1.5rem;font-family:Lausanne,sans-serif;font-size:1rem;font-weight:600;color:var(--depth-500);background-color:var(--depth-300);border:none;border-radius:50px;cursor:pointer}.genre-btn.selected{background-color:var(--depth-500);color:var(--depth-100)}.rating-container{display:flex;flex-direction:column;gap:.5rem}.rating-stars{display:flex;gap:.25rem;justify-content:flex-start}.star{font-size:2rem;color:var(--depth-300);cursor:pointer}.quotes-section{display:flex;flex-direction:column;gap:1rem;margin-top:1rem}.quote-item{background-color:var(--depth-500);border-radius:10px;padding:1rem 4rem 1rem 1rem;position:relative}.quote-item p{font-weight:700;color:var(--depth-100)}.quote-actions{position:absolute;top:10px;right:10px;display:flex;gap:.5rem}.icon-btn{background:none;border:none;cursor:pointer;font-size:1.2rem;opacity:.5;color:var(--depth-100)}.icon-btn:hover{opacity:1}.quote-editor textarea{width:100%;min-height:120px;padding:1rem;font-family:Lausanne,sans-serif;font-size:1rem;font-weight:700;color:var(--depth-500);background-color:var(--depth-300);border-radius:.5rem}.save-quote-btn,.cancel-quote-btn{padding:.5rem 1rem;border-radius:4px;font-weight:600;cursor:pointer;border:none;font-family:Lausanne,sans-serif}.form-actions{display:flex;gap:1rem;margin-top:2rem}.save-btn,.discard-btn{padding:.75rem 1.5rem;font-family:Lausanne,sans-serif;font-size:1rem;font-weight:600;background-color:var(--depth-300);border:none;border-radius:50px;cursor:pointer}.save-btn{color:var(--depth-100);background-color:var(--depth-500)}@media (max-width: 768px){.genre-options,.status-options{flex-direction:row;flex-wrap:wrap}.form-actions{flex-direction:column}}.debug-info{background-color:#f0f8ff;border:1px solid #4682b4;color:#4682b4;padding:1rem;margin-bottom:1rem;border-radius:8px;font-family:Lausanne,sans-serif;font-size:.9rem}.error-message{background-color:#f443361a;color:#d32f2f;padding:1rem;margin-bottom:1rem;border-radius:8px;font-family:Lausanne,sans-serif;font-size:.9rem}.direct-save-btn{padding:.75rem 1.5rem;font-family:Lausanne,sans-serif;font-size:1rem;font-weight:600;background-color:#4682b4;color:var(--depth-100);border:none;border-radius:50px;cursor:pointer}.direct-save-btn:hover{background-color:#357fb3}.book-details.page{padding-top:0}.back-button{display:flex;align-items:center;gap:.5rem;background:none;border:none;color:var(--depth-400);font-family:Lausanne,sans-serif;font-size:.9rem;font-weight:700;cursor:pointer;padding:.5rem 0;margin-bottom:2rem}.back-button:hover{color:var(--depth-500)}.details-header{margin-bottom:2rem}.status-tag{display:inline-block;padding:.5rem 1rem;border-radius:50px;font-size:.8rem;font-weight:700;margin-bottom:1.5rem}.status-tag[data-status=currently-reading]{background-color:var(--accent-teal-100);color:var(--accent-teal-200)}.status-tag[data-status=finished]{background-color:var(--accent-lime-100);color:var(--accent-lime-200)}.status-tag[data-status=to-be-read]{background-color:var(--accent-lavender-100);color:var(--accent-lavender-200)}.book-actions{display:flex;gap:1rem;margin-bottom:2rem}.edit-btn,.delete-btn{padding:.5rem 1rem;border-radius:50px;font-size:.9rem;font-weight:700;cursor:pointer;border:none;font-family:Lausanne,sans-serif}.edit-btn{background-color:var(--depth-500);color:var(--depth-100)}.delete-btn{background-color:var(--depth-300);color:var(--depth-500)}.edit-btn:hover{background-color:var(--depth-400)}.delete-btn:hover{background-color:#ff5050;color:#fff}.book-info-section{margin-bottom:3rem}.book-meta{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.5rem;margin-bottom:2rem}.meta-item{display:flex;flex-direction:column;gap:.5rem}.meta-label{font-size:.8rem;font-weight:700;color:var(--depth-400)}.meta-value{font-size:1.2rem;font-weight:600}.meta-value.rating{display:flex;gap:.25rem}.star{font-size:1.5rem;color:var(--depth-300)}.star.active{color:var(--depth-500)}.book-review{margin-bottom:2rem}.book-review h3{font-size:1.2rem;font-weight:700;margin-bottom:1rem}.book-review p{font-size:1rem;line-height:1.5;white-space:pre-wrap}.book-quotes{margin-bottom:2rem}.book-quotes h3{font-size:1.2rem;font-weight:700;margin-bottom:1rem}.quote-card{background-color:var(--depth-500);color:var(--depth-100);padding:1.5rem;border-radius:8px;margin-bottom:1rem}.quote-card p{font-size:1.1rem;font-weight:600;font-style:italic;line-height:1.5}.edit-form{display:flex;flex-direction:column;gap:1.5rem}.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{font-size:.9rem;font-weight:700;color:var(--depth-400)}.form-group select,.form-group textarea{padding:1rem;border-radius:8px;border:none;background-color:var(--depth-300);font-size:1rem;font-weight:600;color:var(--depth-500)}.form-group textarea{min-height:150px}.status-options{display:flex;flex-wrap:wrap;gap:1rem}.status-btn{padding:.75rem 1.5rem;font-family:Lausanne,sans-serif;font-size:1rem;font-weight:600;color:var(--depth-500);background-color:var(--depth-300);border:none;border-radius:50px;cursor:pointer}.status-btn.selected{background-color:var(--depth-500);color:var(--depth-100)}.rating-stars{display:flex;gap:.25rem}.quotes-section{display:flex;flex-direction:column;gap:1rem}.quote-item{background-color:var(--depth-500);color:var(--depth-100);padding:1rem;border-radius:8px;position:relative}.delete-quote-btn{position:absolute;top:.5rem;right:.5rem;background:none;border:none;color:var(--depth-100);opacity:.5;cursor:pointer}.delete-quote-btn:hover{opacity:1}.quote-editor{display:flex;flex-direction:column;gap:.5rem}.quote-editor textarea{padding:1rem;border-radius:8px;border:none;background-color:var(--depth-300);font-family:Lausanne,sans-serif;font-size:1rem;font-weight:600;color:var(--depth-500);min-height:100px}.quote-editor-actions{display:flex;gap:.5rem}.save-quote-btn,.cancel-quote-btn{padding:.5rem 1rem;border-radius:50px;font-weight:600;cursor:pointer;border:none;font-family:Lausanne,sans-serif}.save-quote-btn{background-color:var(--depth-500);color:var(--depth-100)}.cancel-quote-btn{background-color:var(--depth-300);color:var(--depth-500)}.add-quote-btn{font-size:1rem;font-weight:700;padding:.5rem 0;background:none;color:var(--depth-500);border:none;align-self:flex-start;cursor:pointer}.form-actions{display:flex;gap:1rem;margin-top:1rem}.save-btn,.discard-btn{padding:.75rem 1.5rem;font-family:Lausanne,sans-serif;font-size:1rem;font-weight:600;border:none;border-radius:50px;cursor:pointer}.save-btn{background-color:var(--depth-500);color:var(--depth-100)}.discard-btn{background-color:var(--depth-300);color:var(--depth-500)}@media (max-width: 768px){.status-options,.form-actions{flex-direction:column}.book-title{font-size:2rem}}.login-page,.signup-page{height:100svh;display:flex;justify-content:center;align-items:center;background-color:var(--depth-200);overflow:hidden}.auth-container{display:flex;flex-direction:column;align-items:center;padding:3rem 2rem;border-radius:1rem;background-color:var(--depth-200);max-width:400px;width:100%}.auth-container-title{font-size:3rem;font-weight:600;margin-bottom:.75rem}.auth-container-tagline{width:75%;text-align:center;margin-bottom:2rem;color:var(--depth-500)}.auth-form-container{width:100%}.auth-form-container h2{margin-bottom:1.5rem;text-align:center;font-weight:700}.auth-form{display:flex;flex-direction:column;gap:.65rem;margin-bottom:1.5rem}.auth-form-group{display:flex;flex-direction:column;gap:.5rem}.auth-form-group label{font-size:.9rem;font-weight:700;color:var(--depth-400)}.auth-submit-btn{margin-bottom:.5rem}.auth-actions{display:flex;justify-content:center;margin-bottom:1.5rem}.auth-link{text-align:center}a.auth-link{margin:0 auto;width:max-content}.error-message{margin-bottom:1rem;padding:.75rem 1rem;border-radius:.5rem;background-color:#ff00000d;color:#d32f2f;font-size:.85rem;font-weight:600}.success-message{margin-bottom:1rem;padding:.75rem 1rem;border-radius:.5rem;background-color:#4caf501a;color:#388e3c;font-size:.85rem;font-weight:600}
