.user-popup{position:absolute;top:calc(100% + 10px);right:0;width:260px;background-color:var(--container-bg);border:1px solid var(--border-color);border-radius:12px;box-shadow:var(--shadow-md),0 10px 25px -5px #00000040;z-index:1000;padding:.75rem 0;animation:userPopupFadeIn .18s cubic-bezier(.16,1,.3,1);transform-origin:top right}@keyframes userPopupFadeIn{0%{opacity:0;transform:scale(.95) translateY(-6px)}to{opacity:1;transform:scale(1) translateY(0)}}.user-popup-header{display:flex;align-items:center;gap:.75rem;padding:.5rem 1rem .75rem}.user-popup-avatar-wrap{position:relative;flex-shrink:0}.user-popup-avatar{width:44px;height:44px;border-radius:50%;background-color:var(--avatar-bg);color:var(--avatar-fg);border:2px solid var(--accent-color);display:flex;align-items:center;justify-content:center}.user-popup-avatar-icon{width:24px;height:24px}.user-status-indicator{position:absolute;bottom:0;right:0;width:11px;height:11px;border-radius:50%;background-color:#9ece6a;border:2px solid var(--container-bg)}.user-popup-meta{display:flex;flex-direction:column;min-width:0}.user-popup-name{margin:0;font-size:.95rem;font-weight:600;color:var(--card-title-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-popup-email{margin:0;font-size:.75rem;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-popup-badge{display:inline-block;margin-top:.25rem;font-size:.68rem;font-weight:600;padding:.15rem .45rem;border-radius:4px;background-color:#7aa2f726;color:var(--accent-color);align-self:flex-start}.user-popup-divider{height:1px;background-color:var(--border-color);margin:.4rem 0}.user-popup-menu,.user-popup-footer{display:flex;flex-direction:column;padding:0 .4rem}.user-popup-item{display:flex;align-items:center;gap:.75rem;width:100%;padding:.6rem .75rem;background:transparent;border:none;border-radius:8px;color:var(--text-primary);font-size:.88rem;font-weight:500;cursor:pointer;text-align:left;transition:background-color .15s ease,color .15s ease,transform .1s ease}.user-popup-item:hover{background-color:var(--cover-placeholder-bg);color:var(--accent-color)}.user-popup-item:active{transform:scale(.98)}.user-item-icon{width:18px;height:18px;color:var(--text-secondary);transition:color .15s ease}.user-popup-item:hover .user-item-icon{color:var(--accent-color)}.user-item-label{flex:1}.user-unread-badge{background-color:var(--accent-color);color:#fff;font-size:.7rem;font-weight:700;min-width:18px;height:18px;padding:0 4px;border-radius:9999px;display:flex;align-items:center;justify-content:center}.user-signout-item{color:#f7768e}.user-signout-item:hover{background-color:#f7768e1f;color:#f7768e}.user-signout-item .signout-icon,.user-signout-item:hover .signout-icon{color:#f7768e}.site-header{background-color:var(--header-bg);color:var(--header-text);padding:.85rem 1.5rem;border-radius:8px;box-shadow:var(--shadow-sm);border:1px solid var(--border-color);transition:background-color .25s ease,color .25s ease,border-color .25s ease}.header-content{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto}.header-brand{text-decoration:none;color:inherit}.header-title{font-size:1.25rem;font-weight:600;letter-spacing:-.02em;margin:0;color:var(--header-title)}.header-actions{display:flex;align-items:center;gap:.75rem}.header-user-wrapper{position:relative}.header-theme-btn,.header-avatar-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--border-color);background-color:var(--avatar-bg);color:var(--avatar-fg);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:transform .15s ease,background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease}.header-theme-btn:hover,.header-avatar-btn:hover{transform:scale(1.05)}.header-avatar-btn.active{border-color:var(--accent-color);box-shadow:0 0 0 2px #7aa2f759}.theme-icon,.avatar-icon{width:20px;height:20px}.book-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.75rem;cursor:pointer;outline:none;border-radius:10px;padding:.35rem;transition:transform .15s ease}.book-card:focus-visible{outline:2px solid var(--accent-color);outline-offset:3px}.book-cover-placeholder{width:100%;max-width:160px;aspect-ratio:1 / 1;background-color:var(--cover-placeholder-bg);border:1px solid var(--border-color);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--cover-icon-color);box-shadow:var(--shadow-sm);transition:transform .2s ease,background-color .25s ease,border-color .25s ease,box-shadow .2s ease}.book-card:hover .book-cover-placeholder{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--accent-color)}.book-icon{width:38px;height:38px;opacity:.75}.book-info{display:flex;flex-direction:column;gap:.25rem;width:100%;max-width:160px}.book-title{font-size:.95rem;font-weight:500;color:var(--card-title-color);margin:0;line-height:1.35;word-break:break-word}.book-author{font-size:.85rem;color:var(--card-author-color);margin:0;line-height:1.3}.book-grid-container{background-color:var(--container-bg);border:1px solid var(--border-color);border-radius:12px;padding:3rem 2.5rem;box-shadow:var(--shadow-md);transition:background-color .25s ease,border-color .25s ease}.book-grid{display:grid;grid-template-columns:repeat(4,1fr);row-gap:3.5rem;column-gap:2rem;justify-items:center;align-items:start}@media(max-width:900px){.book-grid{grid-template-columns:repeat(3,1fr);row-gap:2.5rem;column-gap:1.5rem}.book-grid-container{padding:2rem 1.5rem}}@media(max-width:650px){.book-grid{grid-template-columns:repeat(2,1fr);row-gap:2rem;column-gap:1rem}.book-grid-container{padding:1.5rem 1rem}}@media(max-width:380px){.book-grid{grid-template-columns:1fr}}.auth-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000000a6;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:2000;padding:1.5rem;animation:authBackdropFade .2s ease-out}@keyframes authBackdropFade{0%{opacity:0}to{opacity:1}}.auth-modal-container{position:relative;width:100%;max-width:440px;background-color:var(--container-bg);border:1px solid var(--border-color);border-radius:16px;box-shadow:var(--shadow-md),0 20px 40px #0006;padding:2rem;animation:authModalSlideIn .22s cubic-bezier(.16,1,.3,1);box-sizing:border-box}@keyframes authModalSlideIn{0%{opacity:0;transform:scale(.94) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}.auth-modal-close{position:absolute;top:1.25rem;right:1.25rem;width:32px;height:32px;border-radius:50%;background:transparent;border:none;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background-color .15s ease,color .15s ease,transform .1s ease}.auth-modal-close svg{width:20px;height:20px}.auth-modal-close:hover{background-color:var(--cover-placeholder-bg);color:var(--text-primary);transform:scale(1.05)}.auth-modal-header{margin-bottom:1.5rem}.auth-modal-book-tag{display:inline-flex;align-items:center;gap:.4rem;background-color:var(--cover-placeholder-bg);border:1px solid var(--border-color);padding:.3rem .65rem;border-radius:9999px;margin-bottom:.85rem;max-width:100%}.book-tag-icon{width:14px;height:14px;color:var(--accent-color);flex-shrink:0}.book-tag-text{font-size:.78rem;font-weight:500;color:var(--accent-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.auth-modal-title{font-size:1.35rem;font-weight:700;color:var(--card-title-color);margin:0 0 .4rem;letter-spacing:-.02em}.auth-modal-subtitle{font-size:.88rem;color:var(--text-secondary);margin:0;line-height:1.45}.auth-tabs{display:flex;background-color:var(--cover-placeholder-bg);border:1px solid var(--border-color);border-radius:8px;padding:.25rem;margin-bottom:1.5rem;gap:.25rem}.auth-tab-btn{flex:1;padding:.55rem .75rem;border-radius:6px;border:none;background:transparent;font-size:.88rem;font-weight:600;color:var(--text-secondary);cursor:pointer;transition:background-color .15s ease,color .15s ease,box-shadow .15s ease}.auth-tab-btn.active{background-color:var(--container-bg);color:var(--accent-color);box-shadow:var(--shadow-sm)}.auth-demo-toast{background-color:#9ece6a26;border:1px solid #9ece6a;color:#9ece6a;padding:.6rem .85rem;border-radius:8px;font-size:.85rem;font-weight:500;margin-bottom:1rem;text-align:center;animation:authBackdropFade .2s ease}.auth-form{display:flex;flex-direction:column;gap:1rem}.auth-input-group{display:flex;flex-direction:column;gap:.4rem}.auth-label-row{display:flex;justify-content:space-between;align-items:center}.auth-label{font-size:.82rem;font-weight:600;color:var(--text-primary)}.auth-link{font-size:.78rem;color:var(--accent-color);text-decoration:none}.auth-link:hover{text-decoration:underline}.auth-input{width:100%;padding:.65rem .85rem;border-radius:8px;border:1px solid var(--border-color);background-color:var(--cover-placeholder-bg);color:var(--text-primary);font-size:.9rem;outline:none;transition:border-color .15s ease,box-shadow .15s ease;box-sizing:border-box}.auth-input:focus{border-color:var(--accent-color);box-shadow:0 0 0 3px #7aa2f733}.auth-checkbox-row{display:flex;align-items:center;font-size:.82rem;color:var(--text-secondary)}.auth-checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.auth-checkbox{accent-color:var(--accent-color);width:15px;height:15px}.auth-submit-btn{width:100%;padding:.75rem 1rem;border-radius:8px;background-color:var(--accent-color);color:#fff;border:none;font-size:.92rem;font-weight:600;cursor:pointer;margin-top:.25rem;transition:opacity .15s ease,transform .1s ease}.auth-submit-btn:hover{opacity:.92}.auth-submit-btn:active{transform:scale(.99)}.auth-divider-text{position:relative;text-align:center;margin:.5rem 0}.auth-divider-text:before{content:"";position:absolute;left:0;top:50%;width:100%;height:1px;background-color:var(--border-color)}.auth-divider-text span{position:relative;background-color:var(--container-bg);padding:0 .65rem;font-size:.75rem;color:var(--text-secondary)}.auth-social-btns{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.auth-social-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.55rem .75rem;border-radius:8px;background-color:var(--cover-placeholder-bg);border:1px solid var(--border-color);color:var(--text-primary);font-size:.85rem;font-weight:500;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,transform .1s ease}.auth-social-btn:hover{border-color:var(--accent-color);background-color:var(--avatar-bg)}.social-icon{width:16px;height:16px}.auth-signout-view{display:flex;flex-direction:column;gap:1.25rem}.auth-signout-card{display:flex;align-items:center;gap:.85rem;background-color:var(--cover-placeholder-bg);border:1px solid var(--border-color);padding:1rem;border-radius:10px}.auth-signout-avatar{width:44px;height:44px;border-radius:50%;background-color:var(--avatar-bg);color:var(--avatar-fg);border:2px solid var(--accent-color);display:flex;align-items:center;justify-content:center;flex-shrink:0}.auth-signout-avatar svg{width:24px;height:24px}.auth-signout-info{display:flex;flex-direction:column;min-width:0}.auth-signout-label{font-size:.72rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em;font-weight:600}.auth-signout-name{font-size:.95rem;font-weight:600;color:var(--card-title-color)}.auth-signout-email{font-size:.78rem;color:var(--text-secondary)}.auth-signout-notice{font-size:.85rem;color:var(--text-secondary);line-height:1.45;margin:0}.auth-signout-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:.75rem 1rem;border-radius:8px;background-color:#f7768e26;border:1px solid #f7768e;color:#f7768e;font-size:.92rem;font-weight:600;cursor:pointer;transition:background-color .15s ease,transform .1s ease}.auth-signout-btn svg{width:18px;height:18px}.auth-signout-btn:hover{background-color:#f7768e;color:#fff}.auth-signout-btn:active{transform:scale(.99)}.app-layout{min-height:100vh;display:flex;flex-direction:column;max-width:1200px;margin:0 auto;padding:1.5rem;gap:1.5rem;box-sizing:border-box}.main-content{flex:1}@media(max-width:650px){.app-layout{padding:1rem;gap:1rem}}:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;--body-bg: #e1e2e7;--text-primary: #343b58;--text-secondary: #6172b0;--header-bg: #e9e9ed;--header-text: #3760bf;--header-title: #343b58;--avatar-bg: #d5d6db;--avatar-fg: #2e7de9;--container-bg: #d5d6db;--border-color: #c4c6cd;--cover-placeholder-bg: #e9e9ed;--cover-icon-color: #2e7de9;--card-title-color: #343b58;--card-author-color: #6172b0;--accent-color: #2e7de9;--accent-purple: #9854f1;--shadow-sm: 0 1px 3px rgba(52, 59, 88, .08);--shadow-md: 0 4px 12px rgba(52, 59, 88, .08)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--body-bg: #1a1b26;--text-primary: #c0caf5;--text-secondary: #9aa5ce;--header-bg: #1f2335;--header-text: #7aa2f7;--header-title: #c0caf5;--avatar-bg: #292e42;--avatar-fg: #7aa2f7;--container-bg: #24283b;--border-color: #292e42;--cover-placeholder-bg: #1f2335;--cover-icon-color: #7aa2f7;--card-title-color: #c0caf5;--card-author-color: #7982a9;--accent-color: #7aa2f7;--accent-purple: #bb9af7;--shadow-sm: 0 2px 6px rgba(0, 0, 0, .35);--shadow-md: 0 6px 18px rgba(0, 0, 0, .45)}}[data-theme=dark]{--body-bg: #1a1b26;--text-primary: #c0caf5;--text-secondary: #9aa5ce;--header-bg: #1f2335;--header-text: #7aa2f7;--header-title: #c0caf5;--avatar-bg: #292e42;--avatar-fg: #7aa2f7;--container-bg: #24283b;--border-color: #292e42;--cover-placeholder-bg: #1f2335;--cover-icon-color: #7aa2f7;--card-title-color: #c0caf5;--card-author-color: #7982a9;--accent-color: #7aa2f7;--accent-purple: #bb9af7;--shadow-sm: 0 2px 6px rgba(0, 0, 0, .35);--shadow-md: 0 6px 18px rgba(0, 0, 0, .45)}[data-theme=light]{--body-bg: #e1e2e7;--text-primary: #343b58;--text-secondary: #6172b0;--header-bg: #e9e9ed;--header-text: #3760bf;--header-title: #343b58;--avatar-bg: #d5d6db;--avatar-fg: #2e7de9;--container-bg: #d5d6db;--border-color: #c4c6cd;--cover-placeholder-bg: #e9e9ed;--cover-icon-color: #2e7de9;--card-title-color: #343b58;--card-author-color: #6172b0;--accent-color: #2e7de9;--accent-purple: #9854f1;--shadow-sm: 0 1px 3px rgba(52, 59, 88, .08);--shadow-md: 0 4px 12px rgba(52, 59, 88, .08)}*{box-sizing:border-box}body{margin:0;padding:0;background-color:var(--body-bg);color:var(--text-primary);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color .25s ease,color .25s ease}