/* MursuBook: lisäominaisuuksien tyylit (merkinnät, ilmoitukset, haasteet, tumma tila) */
.mini-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.mini-badge { background: #EEF2FF; color: var(--primary); border: 1px solid #E0E7FF; border-radius: 10px; padding: 2px 9px; font-size: 10px; font-weight: 600; }
.mini-badge.due-soon { background: #FEE2E2; color: #B91C1C; border-color: #FCA5A5; }
.mini-badge.series { background: #FEF3C7; color: #92400E; border-color: #FDE68A; }
.shelf-badge { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 9px; font-size: 10px; font-weight: 700; background: #D1FAE5; color: #047857; }
.shelf-badge.friends { background: #E0E7FF; color: #3730A3; }
.title-actions { display: flex; align-items: center; flex-shrink: 0; }

.notif-card .notif { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; margin-bottom: 7px; font-size: 13px; background: #EEF2FF; color: #3730A3; flex-wrap: wrap; }
.notif.warn { background: #FEF3C7; color: #92400E; } .notif.bad { background: #FEE2E2; color: #B91C1C; }
.notif-actions { display: flex; gap: 6px; } .notif-actions .btn-small { flex: none; padding: 6px 12px; }
.streak { font-weight: 700; font-size: 13px; color: #EA580C; } .streak small { font-weight: 500; color: var(--gray); }
.daily-card .progress-bar > div { background: linear-gradient(90deg, #F97316, #FBBF24); }
.feed-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f3f4f6; font-size: 13px; }
.feed-row:last-child { border-bottom: none; } .feed-row small { color: var(--gray); white-space: nowrap; font-size: 11px; }
.member-row.me .goal-meta { color: var(--primary); font-weight: 700; }

/* Kirjan tietoikkunan lisäosat */
.extra-section { text-align: left; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 8px; background: white; }
.extra-section > summary { cursor: pointer; padding: 10px 14px; font-size: 13px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 8px; }
.extra-section > summary::-webkit-details-marker { display: none; }
.extra-body { padding: 2px 14px 12px 14px; font-size: 13px; }
.extra-note { border-top: 1px solid #f3f4f6; padding: 8px 0; }
.extra-note small { color: var(--gray); display: block; margin-top: 2px; }
.extra-note.quote > .note-text { border-left: 3px solid #FCD34D; padding-left: 10px; font-style: italic; }
.extra-estimate { text-align: left; font-size: 12px; color: var(--gray); margin: 0 0 10px 2px; }
.extra-form textarea { width: 100%; box-sizing: border-box; min-height: 64px; border: 1px solid #d1d5db; border-radius: 10px; padding: 10px; font-family: inherit; font-size: 13px; margin-bottom: 6px; resize: vertical; }
.extra-form .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; font-size: 12px; }
.extra-form input[type=number], .extra-form input[type=text], .extra-form select { border: 1px solid #d1d5db; border-radius: 8px; padding: 7px 9px; font-family: inherit; font-size: 12px; }
.extra-link-btn { background: none; border: none; color: var(--primary); font-weight: 600; cursor: pointer; font-size: 12px; padding: 4px 0; font-family: inherit; }
.similar-item { display: flex; gap: 10px; align-items: center; padding: 6px 0; cursor: pointer; border-top: 1px solid #f3f4f6; }
.similar-item img { width: 34px; height: 50px; object-fit: cover; border-radius: 4px; background: #e5e7eb; }
.mood-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px 0; }
.quick-status { text-align: center; font-size: 13px; font-weight: 600; margin: 10px 0; color: var(--secondary); }

#offline-banner { position: sticky; top: 0; z-index: 3000; background: #FEF3C7; color: #92400E; text-align: center; font-size: 12px; font-weight: 600; padding: 7px 12px; }
.fmt-hidden { display: none !important; }

/* Tumma tila: käännetään värit ja palautetaan kuvat */
html[data-theme="dark"] { filter: invert(0.9) hue-rotate(180deg); background: #fff; }
html[data-theme="dark"] img, html[data-theme="dark"] video, html[data-theme="dark"] canvas, html[data-theme="dark"] #reader,
html[data-theme="dark"] .menu-avatar, html[data-theme="dark"] .nav-badge, html[data-theme="dark"] .badge-grid .ach-icon { filter: invert(1) hue-rotate(180deg); }