/* Add-ons (assets/js/ext/addons.js) */
.addon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 8px; }
.addon-card { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; background: var(--bg-elev); }
.addon-card.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.addon-card p { margin: 0; }
.addon-card-head { display: flex; align-items: center; gap: 8px; width: 100%; }
.addon-icon { font-size: 20px; line-height: 1; }
.addon-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.addon-row { border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; }
.addon-row.off { opacity: .7; }
.addon-row .share-tag, .addon-title .share-tag { margin-left: 4px; }
.share-tag.ok { color: var(--c-green); border-color: var(--c-green); background: var(--bg-green); }
.share-tag.bad { color: var(--c-red); border-color: var(--c-red); background: var(--bg-red); }
.addon-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.addon-title h3 { margin: 0; }
.addon-review h4 { margin: 10px 0 2px; font-size: 14px; }
.addon-asks { margin: 0 0 4px; padding-left: 20px; }
.addon-asks li { margin: 3px 0; }
.addon-errors li { color: var(--c-red); margin: 3px 0; }
.addon-diff ul { margin: 2px 0 6px; padding-left: 20px; }
.addon-diff li.add { color: var(--c-green); }
.addon-diff li.del { color: var(--c-red); text-decoration: line-through; }
.addon-review .banner, .addon-secrets { display: block; text-align: left; border-radius: 6px; padding: 10px 12px; }
.addon-secrets label { margin-top: 6px; }
.addon-licence { margin-top: 4px; }
.addon-licence .input { max-width: 21em; }
.addon-fp { font-size: 15px; letter-spacing: .04em; }
.addon-catalogue details { margin-top: 8px; }
.sync-panel .ok { color: var(--c-green); }
.sync-note { margin: 0 0 10px; padding: 4px 8px; border-radius: 6px; background: var(--bg-hover); display: inline-block; }
.pocket-list table td:last-child { width: 1%; white-space: nowrap; text-align: right; }