.bookclub-page{max-width:720px;margin:0 auto;padding:3rem 1.5rem 6rem}.page-header{text-align:center;margin-bottom:3rem;animation:fade-up .6s ease forwards}.page-header h1{font-family:var(--font-display);font-size:clamp(2.5rem,6vw,4rem);color:var(--text);margin-bottom:.5rem}.subtitle{color:var(--text-muted);font-size:1.1rem}.book-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.25rem;padding:1.5rem;border-radius:16px;background:var(--bg-card);border:1px solid var(--border);backdrop-filter:blur(12px);margin-bottom:2rem;animation:fade-up .6s ease .1s both}.book-cover-wrap{position:relative;flex-shrink:0}.book-cover-wrap img{width:120px;height:180px;object-fit:cover;border-radius:8px;box-shadow:0 8px 30px #00000080}.cover-glow{position:absolute;inset:-8px;border-radius:16px;background:radial-gradient(circle,rgba(222,80,60,.15),transparent 70%);z-index:-1}.current-label{display:inline-block;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--petal);background:#de8b8626;padding:.2rem .65rem;border-radius:50px;margin-bottom:.75rem}.book-info h2{font-family:var(--font-display);font-size:1.5rem;color:var(--text);margin-bottom:.25rem}.book-author{color:var(--text-muted);font-size:1rem;margin-bottom:.5rem}.book-pages{color:var(--accent);font-size:.9rem;font-weight:500}.overview-section{margin-bottom:2.5rem;animation:fade-up .6s ease .15s both}.overview-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-bottom:1.25rem}.overview-card{display:flex;align-items:center;gap:.65rem;padding:.85rem 1rem;border-radius:12px;background:var(--bg-card);border:1px solid var(--border);backdrop-filter:blur(12px);transition:border-color .2s ease,transform .2s ease}.overview-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.overview-icon svg{width:16px;height:16px}.overview-icon[data-accent=moss]{background:#7cc9a226;color:var(--moss)}.overview-icon[data-accent=sky]{background:#8fb6da26;color:var(--sky)}.overview-icon[data-accent=clay]{background:#e1a46426;color:var(--clay)}.overview-icon[data-accent=petal]{background:#de8b8626;color:var(--petal)}.overview-data{display:flex;flex-direction:column;min-width:0}.overview-value{font-weight:600;font-size:1rem;color:var(--text);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.overview-label{font-size:.65rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;font-weight:500}.group-progress{padding:1rem 1.25rem;border-radius:12px;background:var(--bg-card);border:1px solid var(--border)}.group-progress-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}.group-progress-label span:first-child{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}.group-pct{font-size:.85rem;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums}.group-bar-track{position:relative;width:100%;height:10px;background:#7cc9a214;border-radius:50px;overflow:visible}.group-bar-fill{height:100%;background:linear-gradient(90deg,var(--fern),var(--accent));border-radius:50px;transition:width .6s cubic-bezier(.22,1,.36,1);position:relative;z-index:1}.group-bar-markers{position:absolute;inset:0;z-index:2}.marker-dot{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid var(--bg);transform:translate(-50%,-50%);box-shadow:0 2px 6px #0000004d;cursor:default;transition:transform .15s ease}.marker-dot:after{content:attr(data-name);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%);font-size:.65rem;font-weight:600;color:var(--text);white-space:nowrap;background:#0c1311e6;padding:.15rem .5rem;border-radius:4px;opacity:0;pointer-events:none;transition:opacity .15s ease}.identity-bar{margin-bottom:1.5rem;padding:1rem 1.35rem;border-radius:14px;background:var(--bg-card);border:1px solid var(--border);backdrop-filter:blur(12px);animation:fade-up .6s ease .2s both}.join-form-inline{display:flex;flex-direction:column;align-items:stretch;gap:.75rem}.join-label{font-weight:600;color:var(--text);font-size:.95rem;white-space:nowrap;text-align:center}.compact-join{flex:1}.compact-join input{width:100%;padding:.55rem .85rem;border-radius:8px;border:1.5px solid var(--border);background:#0c131180;color:var(--text);font-family:var(--font-body);font-size:.9rem;outline:none;transition:border-color .25s ease,box-shadow .25s ease}.compact-join input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #7cc9a21f}.compact-join input::placeholder{color:var(--text-muted);opacity:.5}.join-hint{color:var(--text-muted);font-size:.75rem;opacity:.6;margin-top:.5rem;line-height:1.4;text-align:center}.identity-active{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35rem}.identity-greeting{color:var(--text);font-size:.95rem}.identity-greeting strong{color:var(--accent)}.identity-switch{background:none;border:none;color:var(--text-muted);font-family:var(--font-body);font-size:.8rem;cursor:pointer;opacity:.6;transition:opacity .2s ease,color .2s ease;text-decoration:underline;text-underline-offset:2px}.your-progress-card{margin-bottom:2rem;padding:1.5rem 1.5rem 1.25rem;border-radius:16px;background:var(--bg-card);border:1.5px solid var(--accent-dim);backdrop-filter:blur(12px);box-shadow:0 0 30px #7cc9a20f;animation:fade-up .4s ease both}.your-progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.your-progress-title{font-weight:600;font-size:1rem;color:var(--text)}.your-progress-pct{font-size:1.1rem;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}.progress-bar-track{position:relative;width:100%;height:8px;background:#7cc9a214;border-radius:50px;overflow:hidden;margin-bottom:.6rem}.progress-bar-track.large{height:12px;margin-bottom:1rem}.progress-bar-fill{height:100%;border-radius:50px;transition:width .5s cubic-bezier(.22,1,.36,1);min-width:3px}.progress-bar-fill.low{background:var(--petal)}.progress-bar-fill.mid{background:linear-gradient(90deg,var(--clay),var(--sun))}.progress-bar-fill.high{background:linear-gradient(90deg,var(--fern),var(--accent))}.progress-bar-fill.done{background:linear-gradient(90deg,var(--accent),var(--sky))}.your-page-input-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.9rem;color:var(--text-muted);margin-bottom:1.25rem}.your-page-input-row strong{color:var(--text)}.save-indicator{font-size:.75rem;font-weight:500;margin-left:.25rem;transition:opacity .3s ease}.save-indicator.saving{color:var(--clay)}.save-indicator.saved{color:var(--accent)}.save-indicator.error{color:var(--petal)}.your-note-form{border-top:1px solid var(--border);padding-top:1rem}.your-note-row{display:flex;flex-direction:column;gap:.75rem;align-items:stretch}.note-page-context{color:var(--text-muted);font-size:.75rem;margin-top:.5rem;opacity:.7}.input-wrap{position:relative;flex:1}.textarea-wrap{flex:1}.textarea-wrap textarea{width:100%;padding:.65rem .9rem;border-radius:10px;border:1.5px solid var(--border);background:#0c131180;color:var(--text);font-family:var(--font-body);font-size:.88rem;outline:none;resize:none;line-height:1.5;transition:border-color .25s ease,box-shadow .25s ease,background .25s ease}.textarea-wrap textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px #7cc9a21f,0 4px 12px #00000026;background:#0c1311b3}.textarea-wrap textarea::placeholder{color:var(--text-muted);opacity:.45}.btn-primary{display:inline-flex;align-items:center;gap:.45rem;padding:.7rem 1.35rem;border-radius:10px;border:none;background:linear-gradient(135deg,var(--accent),var(--fern));color:var(--bg);font-family:var(--font-body);font-size:.9rem;font-weight:600;cursor:pointer;transition:all .25s cubic-bezier(.22,1,.36,1);white-space:nowrap;box-shadow:0 2px 8px #7cc9a233}.btn-primary svg{width:15px;height:15px}.btn-primary:active{transform:translateY(0)}.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.btn-primary.compact{padding:.6rem 1.1rem;font-size:.85rem;align-self:flex-end}.form-error{color:var(--petal);font-size:.8rem;margin-top:.5rem;min-height:1em}.page-num-input{width:60px;padding:.3rem .4rem;border-radius:6px;border:1.5px solid var(--border);background:#0c131180;color:var(--accent);font-family:var(--font-body);font-size:.9rem;font-weight:600;text-align:center;outline:none;font-variant-numeric:tabular-nums;transition:border-color .2s ease,box-shadow .2s ease;-moz-appearance:textfield}.page-num-input::-webkit-inner-spin-button,.page-num-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.page-num-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px #7cc9a226}.progress-section{animation:fade-up .6s ease .3s both;margin-bottom:3rem}.progress-section h3{font-family:var(--font-display);font-size:1.3rem;color:var(--text);margin-bottom:1rem}.members-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}.empty-state{color:var(--text-muted);font-size:.95rem;text-align:center;padding:2rem;border:1px dashed var(--border);border-radius:12px;grid-column:1 / -1}.member-card{padding:.85rem 1rem;border-radius:12px;background:var(--bg-card);border:1px solid var(--border);backdrop-filter:blur(12px);transition:border-color .2s ease,box-shadow .2s ease}.member-card.is-you{border-color:var(--accent-dim);box-shadow:0 0 20px #7cc9a20f}.member-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.member-name-group{display:flex;align-items:center;gap:.35rem;min-width:0}.member-name{font-weight:600;color:var(--text);font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.you-badge{display:inline-block;font-size:.55rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);background:#7cc9a21f;padding:.08rem .4rem;border-radius:50px;line-height:1.4;flex-shrink:0}.member-pct{font-size:.8rem;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;flex-shrink:0}.member-bar{width:100%;height:6px;background:#7cc9a214;border-radius:50px;overflow:hidden;margin-bottom:.4rem}.member-bar-fill{height:100%;border-radius:50px;transition:width .5s cubic-bezier(.22,1,.36,1);min-width:2px}.member-bar-fill.low{background:var(--petal)}.member-bar-fill.mid{background:linear-gradient(90deg,var(--clay),var(--sun))}.member-bar-fill.high{background:linear-gradient(90deg,var(--fern),var(--accent))}.member-bar-fill.done{background:linear-gradient(90deg,var(--accent),var(--sky))}.member-page{font-size:.68rem;color:var(--text-muted);opacity:.7;font-variant-numeric:tabular-nums}.done-badge{display:inline-flex;align-items:center;font-size:.62rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);background:#7cc9a21f;padding:.12rem .5rem;border-radius:50px}.notes-section{animation:fade-up .6s ease .4s both}.notes-section h3{font-family:var(--font-display);font-size:1.3rem;color:var(--text);margin-bottom:.4rem}.notes-hint{color:var(--text-muted);font-size:.82rem;margin-bottom:1.25rem;opacity:.8;line-height:1.5}.notes-list{display:flex;flex-direction:column;gap:.65rem}.notes-empty{color:var(--text-muted);font-size:.9rem;text-align:center;padding:1.5rem;border:1px dashed var(--border);border-radius:10px}.note-card{padding:.85rem 1rem;border-radius:12px;background:var(--bg-card);border:1px solid var(--border);backdrop-filter:blur(12px);animation:note-appear .4s ease both}.note-card.just-revealed{animation:note-reveal .6s cubic-bezier(.22,1,.36,1) both;border-color:var(--accent-dim);box-shadow:0 0 24px #7cc9a21a}.note-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:.35rem}.note-author-name{font-weight:600;font-size:.82rem;color:var(--accent)}.note-you-tag{color:var(--text-muted);font-size:.75rem;font-weight:400;opacity:.7}.note-page-badge{font-size:.65rem;font-weight:500;color:var(--text-muted);background:#7cc9a214;padding:.15rem .5rem;border-radius:50px}.note-text{color:var(--text);font-size:.88rem;line-height:1.55}.note-timestamp{color:var(--text-muted);font-size:.65rem;opacity:.55;flex-shrink:0}.note-footer{display:flex;align-items:center;gap:.35rem;margin-top:.5rem;flex-wrap:wrap}.reaction-pill{display:inline-flex;align-items:center;gap:.2rem;padding:.2rem .5rem .2rem .35rem;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:#ffffff14;cursor:pointer;transition:background .12s ease,border-color .12s ease;-webkit-tap-highlight-color:transparent}.reaction-pill .r-emoji{font-size:.95rem;line-height:1}.reaction-pill .r-count{font-family:var(--font-body);font-size:.7rem;font-weight:600;color:#ffffff73;font-variant-numeric:tabular-nums}.reaction-pill:active{background:#ffffff1a}.reaction-pill.is-mine{background:#7cc9a22e;border-color:#7cc9a24d}.reaction-pill.is-mine .r-count{color:var(--accent)}.note-actions{display:inline-flex;align-items:center;gap:.15rem;margin-left:auto}.note-action-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;border:none;background:none;cursor:pointer;color:#ffffff73;transition:color .12s ease,background .12s ease;-webkit-tap-highlight-color:transparent;position:relative;padding:0}.note-action-btn svg{width:16px;height:16px;display:block}.note-action-btn:active{color:var(--accent);background:#7cc9a214}.note-action-btn.is-open{color:var(--accent);background:#7cc9a21a}.emoji-picker{position:absolute;bottom:calc(100% + 6px);right:0;display:flex;gap:0;background:#141e1bfa;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:.35rem;box-shadow:0 12px 40px #00000080;z-index:10}.emoji-picker:after{display:none}.emoji-pick{display:flex;align-items:center;justify-content:center;background:none;border:none;font-size:1.2rem;cursor:pointer;width:36px;height:36px;border-radius:8px;transition:background .1s ease;-webkit-tap-highlight-color:transparent}.emoji-pick:active{background:#ffffff14}.note-thread{margin-top:.65rem;padding-left:.85rem;border-left:2px solid rgba(124,201,162,.2);display:flex;flex-direction:column;gap:.35rem}.reply-item{padding:.4rem 0}.reply-head{display:flex;align-items:baseline;gap:.4rem;margin-bottom:.1rem}.reply-author{font-weight:600;font-size:.75rem;color:var(--accent)}.reply-you-tag{color:var(--text-muted);font-size:.68rem;opacity:.6}.reply-time{color:var(--text-muted);font-size:.6rem;opacity:.45}.reply-body{color:var(--text);font-size:.82rem;line-height:1.5}.reply-compose{display:flex;gap:.45rem;align-items:center;margin-top:.3rem}.reply-input{flex:1;padding:.4rem .7rem;border-radius:50px;border:1.5px solid var(--border);background:#0c131180;color:var(--text);font-family:var(--font-body);font-size:.8rem;outline:none;transition:border-color .2s ease,box-shadow .2s ease}.reply-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px #7cc9a21a}.reply-input::placeholder{color:var(--text-muted);opacity:.4}.reply-send{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:none;background:linear-gradient(135deg,var(--accent),var(--fern));color:var(--bg);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;flex-shrink:0;padding:0}.reply-send svg{width:13px;height:13px}.reply-send:active{transform:scale(.95)}.reply-send:disabled{opacity:.3;cursor:not-allowed;transform:none}.note-spoiler-wall{text-align:center;padding:1rem;color:var(--text-muted);font-size:.8rem;border:1px dashed var(--border);border-radius:10px;opacity:.7}.note-group{margin-bottom:.25rem}.note-group-header{display:flex;align-items:center;width:100%;padding:.6rem 0;background:none;border:none;cursor:pointer;color:var(--text-muted);font-family:var(--font-body);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;-webkit-tap-highlight-color:transparent;gap:.5rem}.note-group-header span:first-child{flex:1;text-align:left}.note-group-count{font-size:.7rem;font-weight:500;color:var(--text-muted);opacity:.6;text-transform:none;letter-spacing:normal}.note-group-header .chevron{width:12px;height:12px;flex-shrink:0;transition:transform .2s ease;opacity:.5}.note-group[data-expanded=true] .chevron{transform:rotate(90deg)}.note-group-body{display:none;flex-direction:column;gap:.5rem;padding-bottom:.5rem}.note-group[data-expanded=true] .note-group-body{display:flex}.reply-summary{display:inline-flex;align-items:center;background:none;border:none;cursor:pointer;color:var(--text-muted);font-family:var(--font-body);font-size:.75rem;padding:.3rem 0;margin-top:.35rem;opacity:.7;transition:opacity .15s ease,color .15s ease;-webkit-tap-highlight-color:transparent}.reply-summary:active{opacity:1;color:var(--accent)}@keyframes fade-up{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes note-appear{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes note-reveal{0%{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@media (min-width: 640px){.book-hero{flex-direction:row;text-align:left;gap:2rem;padding:2rem}.book-info h2{font-size:1.8rem}.overview-grid{grid-template-columns:repeat(4,1fr)}.join-form-inline{flex-direction:row;align-items:center}.join-label{text-align:left}.identity-active{flex-direction:row;text-align:left;gap:.75rem}.your-page-input-row{flex-wrap:nowrap}.your-note-row{flex-direction:row;align-items:flex-end}.btn-primary.compact{align-self:stretch}.react-trigger:hover{border-color:var(--accent-dim);border-style:solid;color:var(--accent);background:#7cc9a20f}.reply-btn:hover{color:var(--accent)}.emoji-pick:hover{background:#7cc9a226;transform:scale(1.15)}.emoji-picker{left:50%;transform:translate(-50%)}.emoji-picker:after{left:50%;transform:translate(-50%)}.overview-card:hover{border-color:var(--accent-dim);transform:translateY(-1px)}.member-card:hover{border-color:var(--accent-dim);box-shadow:0 2px 12px #0000001f}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #7cc9a24d}.marker-dot:hover{transform:translate(-50%,-50%) scale(1.25)}.marker-dot:hover:after{opacity:1}.reaction-pill:hover{border-color:#7cc9a266;background:#7cc9a224}.identity-switch:hover{opacity:1;color:var(--petal)}.reply-send:hover{transform:scale(1.08);box-shadow:0 2px 10px #7cc9a24d}.note-action-btn:hover{color:var(--accent)}.note-group-header:hover{color:var(--text)}.note-group-header:hover .chevron{opacity:.8}.reply-summary:hover{opacity:1;color:var(--accent)}}