html,body{margin:0;padding:0}
.notifications-panel{padding:var(--space-4,1rem);max-width:600px;margin:0 auto}.notifications-header{margin-bottom:var(--space-4,1rem);justify-content:space-between;align-items:center;display:flex}.notifications-header h2{font-family:var(--font-serif,"Newsreader", serif);font-size:1.5rem}.notification-item{align-items:flex-start;gap:var(--space-3,.75rem);padding:var(--space-3,.75rem);cursor:pointer;transition:background var(--duration,.2s) var(--ease,ease);border-radius:8px;display:flex;position:relative}.notification-item:hover{background:var(--paper-100,#f5f3f0)}.notification-unread{background:var(--paper-50,#faf9f7)}.notification-item-left{flex-shrink:0;position:relative}.notification-icon{font-size:12px;position:absolute;bottom:-2px;right:-2px}.notification-item-content{flex:1;min-width:0}.notification-preview{color:var(--graphite-900,#1a1a1a);margin:0;font-size:.875rem}.notification-time{color:var(--graphite-400,#888);font-size:.75rem}.notification-dot{background:var(--red-pencil,#c8462c);border-radius:50%;flex-shrink:0;width:8px;height:8px;margin-top:6px}.notifications-empty{text-align:center;padding:var(--space-8,2rem);color:var(--graphite-400,#888)}.notifications-load-more{margin:var(--space-4,1rem) auto;display:block}.messages-screen{height:calc(100vh - 64px);display:flex;overflow:hidden}.messages-sidebar{border-right:1px solid var(--paper-200,#e8e5e0);width:320px;padding:var(--space-4,1rem);overflow-y:auto}.messages-sidebar h3{font-family:var(--font-serif,"Newsreader", serif);margin-bottom:var(--space-4,1rem)}.conversation-item{align-items:center;gap:var(--space-3,.75rem);padding:var(--space-3,.75rem);cursor:pointer;transition:background var(--duration,.2s);border-radius:8px;display:flex}.conversation-item:hover,.conversation-item.active{background:var(--paper-100,#f5f3f0)}.conversation-item-content{flex:1;min-width:0}.conversation-name{font-size:.875rem;font-weight:600}.conversation-preview{color:var(--graphite-400,#888);white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:.75rem;overflow:hidden}.conversation-badge{background:var(--red-pencil,#c8462c);color:#fff;text-align:center;border-radius:10px;min-width:18px;padding:2px 6px;font-size:.7rem;font-weight:600}.chat-view{flex-direction:column;flex:1;display:flex}.chat-view.chat-empty{color:var(--graphite-400,#888);justify-content:center;align-items:center}.chat-messages{padding:var(--space-4,1rem);gap:var(--space-2,.5rem);flex-direction:column;flex:1;display:flex;overflow-y:auto}.chat-message{align-items:flex-end;gap:var(--space-2,.5rem);max-width:70%;display:flex}.chat-message.own{flex-direction:row-reverse;align-self:flex-end}.chat-message.other{align-self:flex-start}.chat-message-bubble{padding:var(--space-2,.5rem) var(--space-3,.75rem);border-radius:16px;font-size:.875rem}.chat-message.own .chat-message-bubble{background:var(--pencil-blue,#4a90d9);color:#fff;border-bottom-right-radius:4px}.chat-message.other .chat-message-bubble{background:var(--paper-100,#f5f3f0);color:var(--graphite-900,#1a1a1a);border-bottom-left-radius:4px}.chat-message-bubble p{margin:0}.chat-message-time{opacity:.6;margin-top:2px;font-size:.65rem;display:block}.chat-input-container{align-items:flex-end;gap:var(--space-2,.5rem);padding:var(--space-3,.75rem) var(--space-4,1rem);border-top:1px solid var(--paper-200,#e8e5e0);display:flex}.chat-input{border:1px solid var(--paper-200,#e8e5e0);padding:var(--space-2,.5rem) var(--space-3,.75rem);resize:none;font-size:.875rem;font-family:var(--font-sans,"Inter Tight", sans-serif);border-radius:20px;flex:1}.chat-send-btn{background:var(--red-pencil,#c8462c);color:#fff;padding:var(--space-2,.5rem) var(--space-4,1rem);cursor:pointer;border:none;border-radius:20px;font-size:.875rem;font-weight:600}.chat-send-btn:disabled{opacity:.5;cursor:not-allowed}.collections-screen{padding:var(--space-4,1rem);max-width:800px;margin:0 auto}.collections-header{margin-bottom:var(--space-4,1rem);justify-content:space-between;align-items:center;display:flex}.collections-grid{gap:var(--space-4,1rem);grid-template-columns:repeat(auto-fill,minmax(250px,1fr));display:grid}.collection-card{border:1px solid var(--paper-200,#e8e5e0);padding:var(--space-4,1rem);cursor:pointer;transition:box-shadow var(--duration,.2s), transform var(--duration,.2s);border-radius:12px}.collection-card:hover{box-shadow:var(--shadow-md,0 4px 12px #00000014);transform:translateY(-1px)}.collection-card-header{justify-content:space-between;align-items:flex-start;display:flex}.collection-card-header h3{margin:0;font-size:1rem}.collection-visibility{text-transform:uppercase;letter-spacing:.05em;border-radius:4px;padding:2px 6px;font-size:.7rem}.collection-visibility.public{background:var(--sage,#7caa8e);color:#fff}.collection-visibility.private{background:var(--graphite-300,#aaa);color:#fff}.collection-description{color:var(--graphite-600,#555);margin:var(--space-2,.5rem) 0;font-size:.875rem}.collection-card-footer{color:var(--graphite-400,#888);margin-top:var(--space-3,.75rem);justify-content:space-between;font-size:.75rem;display:flex}.create-collection-form{gap:var(--space-2,.5rem);padding:var(--space-4,1rem);border:1px dashed var(--paper-200,#e8e5e0);border-radius:12px;flex-direction:column;display:flex}.create-collection-form input,.create-collection-form textarea{border:1px solid var(--paper-200,#e8e5e0);padding:var(--space-2,.5rem);border-radius:6px;font-size:.875rem}.collection-visibility-toggle{align-items:center;gap:var(--space-2,.5rem);font-size:.875rem;display:flex}.guestbook{padding:var(--space-4,1rem) 0}.guestbook h3{font-family:var(--font-serif,"Newsreader", serif);margin-bottom:var(--space-3,.75rem)}.guestbook-form{margin-bottom:var(--space-4,1rem)}.guestbook-form textarea{border:1px solid var(--paper-200,#e8e5e0);width:100%;padding:var(--space-3,.75rem);resize:vertical;font-size:.875rem;font-family:var(--font-sans,"Inter Tight", sans-serif);border-radius:8px}.guestbook-form button{margin-top:var(--space-2,.5rem);background:var(--red-pencil,#c8462c);color:#fff;padding:var(--space-2,.5rem) var(--space-4,1rem);cursor:pointer;border:none;border-radius:6px;font-weight:600}.guestbook-entry{padding:var(--space-3,.75rem) 0;border-bottom:1px solid var(--paper-100,#f5f3f0)}.guestbook-entry-header{align-items:center;gap:var(--space-2,.5rem);margin-bottom:var(--space-1,.25rem);display:flex}.guestbook-author{font-size:.875rem;font-weight:600}.guestbook-date{color:var(--graphite-400,#888);font-size:.75rem}.guestbook-text{margin:var(--space-1,.25rem) 0;font-size:.875rem}.guestbook-delete{color:var(--graphite-400,#888);font-size:.75rem}.reading-stats-card{border:1px solid var(--paper-200,#e8e5e0);padding:var(--space-4,1rem);border-radius:12px}.reading-stats-card h4{margin:0 0 var(--space-3,.75rem);font-family:var(--font-serif,"Newsreader", serif)}.reading-stats-grid{gap:var(--space-3,.75rem);grid-template-columns:repeat(2,1fr);display:grid}.reading-stat{flex-direction:column;align-items:center;display:flex}.reading-stat-value{color:var(--graphite-900,#1a1a1a);font-size:1.25rem;font-weight:700}.reading-stat-label{color:var(--graphite-400,#888);text-transform:uppercase;letter-spacing:.05em;font-size:.7rem}.reading-stats-progress{margin-top:var(--space-3,.75rem)}.progress-bar{background:var(--paper-200,#e8e5e0);border-radius:3px;height:6px;overflow:hidden}.progress-fill{background:var(--sage,#7caa8e);height:100%;transition:width var(--duration-slow,.32s) var(--ease,ease);border-radius:3px}.progress-label{color:var(--graphite-400,#888);margin-top:var(--space-1,.25rem);font-size:.75rem;display:block}.verified-badge{vertical-align:middle;margin-left:4px;display:inline-flex}.mutual-follows{align-items:center;gap:var(--space-2,.5rem);color:var(--graphite-500,#666);font-size:.75rem;display:flex}.mutual-follows-avatars{display:flex}.mutual-follows-avatars>*{border:2px solid #fff;border-radius:50%;margin-left:-4px}.mutual-follows-avatars>:first-child{margin-left:0}.share-button-container{display:inline-block;position:relative}.share-button{align-items:center;gap:var(--space-1,.25rem);color:var(--graphite-500,#666);cursor:pointer;padding:var(--space-1,.25rem) var(--space-2,.5rem);background:0 0;border:none;border-radius:4px;font-size:.875rem;display:flex}.share-button:hover{color:var(--graphite-900,#1a1a1a);background:var(--paper-100,#f5f3f0)}.share-menu-overlay{z-index:99;position:fixed;inset:0}.share-menu{border:1px solid var(--paper-200,#e8e5e0);box-shadow:var(--shadow-md,0 4px 12px #00000014);padding:var(--space-2,.5rem);z-index:100;background:#fff;border-radius:8px;min-width:150px;position:absolute;bottom:100%;right:0}.share-menu button{text-align:left;width:100%;padding:var(--space-2,.5rem) var(--space-3,.75rem);cursor:pointer;background:0 0;border:none;border-radius:4px;font-size:.875rem;display:block}.share-menu button:hover{background:var(--paper-100,#f5f3f0)}.add-to-collection-modal{max-width:400px;padding:var(--space-4,1rem)}.add-to-collection-modal h3{margin:0 0 var(--space-3,.75rem)}.collection-note-input input{border:1px solid var(--paper-200,#e8e5e0);width:100%;padding:var(--space-2,.5rem);margin-bottom:var(--space-3,.75rem);border-radius:6px;font-size:.875rem}.collection-list-select{max-height:200px;margin-bottom:var(--space-3,.75rem);overflow-y:auto}.collection-select-item{width:100%;padding:var(--space-2,.5rem) var(--space-3,.75rem);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:space-between;align-items:center;font-size:.875rem;display:flex}.collection-select-item:hover{background:var(--paper-100,#f5f3f0)}.collection-select-count{color:var(--graphite-400,#888);font-size:.75rem}.collection-create-inline{gap:var(--space-2,.5rem);align-items:center;display:flex}.collection-create-inline input{border:1px solid var(--paper-200,#e8e5e0);padding:var(--space-2,.5rem);border-radius:6px;flex:1;font-size:.875rem}.unread-badge{background:var(--red-pencil,#c8462c);color:#fff;text-align:center;border-radius:8px;min-width:14px;padding:1px 4px;font-size:.6rem;font-weight:700;line-height:1.4;position:absolute;top:-4px;right:-4px}.modal-overlay{z-index:1000;background:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-content{box-shadow:var(--shadow-xl,0 20px 60px #00000026);background:#fff;border-radius:12px;max-height:80vh;overflow-y:auto}.modal-close{margin-top:var(--space-3,.75rem);display:block}.btn-primary{background:var(--red-pencil,#c8462c);color:#fff;padding:var(--space-2,.5rem) var(--space-4,1rem);cursor:pointer;border:none;border-radius:6px;font-size:.875rem;font-weight:600}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-text{color:var(--red-pencil,#c8462c);cursor:pointer;background:0 0;border:none;font-size:.875rem;font-weight:500}.btn-text:hover{text-decoration:underline}.form-actions{gap:var(--space-2,.5rem);align-items:center;display:flex}