/* ── Shopping List Manager v2.2 ── */
:root {
  --sl-green:      #2d6a32;
  --sl-green-dark: #1b4220;
  --sl-green-light:#e8f5e9;
  --sl-accent:     #4caf50;
  --sl-bg:         #f5f5f5;
  --sl-surface:    #ffffff;
  --sl-border:     #e0e0e0;
  --sl-text:       #212121;
  --sl-muted:      #757575;
  --sl-cart-bg:    #fff8e1;
  --sl-cart-border:#f9a825;
  --sl-danger:     #d32f2f;
  --sl-radius:     8px;
  --sl-shadow:     0 2px 8px rgba(0,0,0,.12);
  --sl-topbar-h:   56px;
}
.sl-app*,.sl-app*::before,.sl-app*::after{box-sizing:border-box;margin:0;padding:0;}
.sl-app {
  font-family:'Roboto','Segoe UI',sans-serif;
  background:var(--sl-bg); color:var(--sl-text);
  max-width:600px; margin:0 auto; min-height:100vh; position:relative;
}
.sl-hidden{display:none!important;}

/* ══ TOPBAR ═══════════════════════════════════════════════════════════ */
.sl-topbar {
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; gap:.5rem;
  height:var(--sl-topbar-h); background:var(--sl-green); color:#fff;
  padding:0 .75rem; box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.sl-hamburger {
  background:none; border:none; cursor:pointer;
  display:flex; flex-direction:column; gap:5px; padding:.4rem; flex-shrink:0;
}
.sl-hamburger span { display:block; width:22px; height:2px; background:#fff; border-radius:2px; }
.sl-topbar-center {
  flex:1; display:flex; align-items:center; gap:.3rem;
  overflow:hidden;
}
.sl-list-title {
  display:flex; align-items:center; gap:.25rem;
  font-size:1rem; font-weight:700; overflow:hidden;
}
.sl-list-title span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; }
.sl-page-title-text { font-size:1rem; font-weight:700; white-space:nowrap; }
.sl-dropdown-arrow { background:none; border:none; color:rgba(255,255,255,.85); cursor:pointer; font-size:2.5rem; padding:.1rem .2rem; flex-shrink:0; line-height:1; }
.sl-topbar-right { display:flex; align-items:center; gap:.3rem; flex-shrink:0; }
.sl-topbar-btn {
  background:rgba(255,255,255,.2); border:none; color:#fff;
  width:34px; height:34px; border-radius:50%; font-size:1.3rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .2s;
}
.sl-topbar-btn:hover{background:rgba(255,255,255,.35);}

/* List dropdown */
.sl-list-dropdown {
  position:sticky; top:var(--sl-topbar-h); z-index:99;
  background:var(--sl-surface); border-bottom:1px solid var(--sl-border); box-shadow:var(--sl-shadow);
}
.sl-list-dropdown-item {
  display:flex; align-items:center; gap:.4rem;
  padding:.7rem 1rem; border-bottom:1px solid var(--sl-border); cursor:pointer;
  font-size:.95rem; transition:background .15s;
}
.sl-list-dropdown-item:hover { background:var(--sl-green-light); }
.sl-list-dropdown-item.active { color:var(--sl-green); font-weight:700; }

/* ══ DRAWER ═══════════════════════════════════════════════════════════ */
.sl-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:200; }
.sl-overlay.open { display:block; }
.sl-drawer {
  position:fixed; top:0; left:-280px; bottom:0; width:280px;
  background:var(--sl-surface); z-index:201; box-shadow:4px 0 16px rgba(0,0,0,.2);
  transition:left .28s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column;
}
.sl-drawer.open{left:0;}
.sl-drawer-header { background:var(--sl-green); color:#fff; padding:1.25rem 1rem; display:flex; align-items:center; justify-content:space-between; }
.sl-drawer-title { font-size:1.05rem; font-weight:700; }
.sl-drawer-close { background:none; border:none; color:rgba(255,255,255,.8); font-size:1.1rem; cursor:pointer; }
.sl-nav-list { list-style:none; padding:.5rem 0; flex:1; }
.sl-nav-link { display:flex; align-items:center; gap:.9rem; padding:.9rem 1.25rem; text-decoration:none; color:var(--sl-text); font-size:1rem; transition:background .15s; }
.sl-nav-link:hover { background:var(--sl-green-light); }
.sl-nav-link.active { background:var(--sl-green-light); color:var(--sl-green); font-weight:700; }
.sl-nav-icon { font-size:1.2rem; width:28px; text-align:center; }

/* ══ PAGES ════════════════════════════════════════════════════════════ */
.sl-page { padding-bottom:1rem; }
.sl-page-hint { padding:.5rem 1rem; font-size:.82rem; color:var(--sl-muted); }

/* ══ ENTRIES ══════════════════════════════════════════════════════════ */
.sl-entries-wrap{padding-bottom:.5rem;}
.sl-category-header {
  display:flex; align-items:center; gap:.5rem;
  padding:.5rem 1rem; background:var(--sl-bg);
  border-top:1px solid var(--sl-border); border-bottom:1px solid var(--sl-border);
  position:sticky; top:var(--sl-topbar-h); z-index:10;
}
.sl-category-emoji{font-size:1.05rem;}
.sl-category-name{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--sl-muted);flex:1;}
.sl-category-sum{font-size:.78rem;color:var(--sl-green);font-weight:700;}

.sl-entry {
  display:flex; align-items:center; gap:.6rem;
  padding:.6rem .85rem; background:var(--sl-surface); border-bottom:1px solid var(--sl-border);
  cursor:pointer; transition:background .12s;
}
.sl-entry:hover{background:#fafafa;}
.sl-entry.checked{opacity:.5;}
.sl-entry.checked .sl-entry-name{text-decoration:line-through;}
.sl-entry.deferred{opacity:.65;background:#f9f9f9;}

.sl-entry-check {
  width:22px;height:22px;border:2px solid var(--sl-border);border-radius:4px;cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:all .15s;color:transparent;font-size:.85rem;background:var(--sl-surface);
}
.sl-entry-check.checked{background:var(--sl-green);border-color:var(--sl-green);color:#fff;}

.sl-entry-thumb{width:40px;height:40px;border-radius:8px;flex-shrink:0;background:var(--sl-bg);display:flex;align-items:center;justify-content:center;font-size:1.3rem;overflow:hidden;}
.sl-entry-thumb-img{width:100%;height:100%;object-fit:cover;border-radius:6px;}
.sl-item-thumb-img{width:32px;height:32px;object-fit:cover;border-radius:6px;}

.sl-entry-info{flex:1;min-width:0;}
.sl-entry-name{font-size:.92rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sl-entry-sub{font-size:.75rem;color:var(--sl-muted);}
.sl-entry-right{display:flex;align-items:center;gap:.2rem;flex-shrink:0;}
.sl-entry-price{font-size:.85rem;color:var(--sl-green);font-weight:700;white-space:nowrap;}
.sl-entry-defer{background:none;border:none;cursor:pointer;font-size:.95rem;padding:.1rem .2rem;border-radius:4px;transition:transform .15s;}
.sl-entry-defer:hover{transform:scale(1.25);}
.sl-defer-restore{color:var(--sl-green);}
.sl-entry-del{background:none;border:none;cursor:pointer;color:var(--sl-muted);font-size:.85rem;padding:.1rem .2rem;}

.sl-empty-hint{text-align:center;padding:2.5rem 1rem;color:var(--sl-muted);font-size:.9rem;}
.sl-empty-icon{font-size:3rem;display:block;margin-bottom:.75rem;}

/* ══ CART ═════════════════════════════════════════════════════════════ */
.sl-cart-section{margin:.75rem;border-radius:var(--sl-radius);background:var(--sl-cart-bg);border:1px solid var(--sl-cart-border);overflow:hidden;}
.sl-cart-header{display:flex;align-items:center;gap:.5rem;padding:.65rem 1rem;background:#fff8e1;border-bottom:1px solid var(--sl-cart-border);font-weight:700;font-size:.9rem;}
.sl-cart-count{font-size:.75rem;background:var(--sl-cart-border);padding:.15rem .45rem;border-radius:10px;margin-left:.25rem;}
.sl-cart-total{font-size:.88rem;color:var(--sl-green);font-weight:700;margin-left:auto;}
.sl-cart-footer{padding:.75rem;display:flex;justify-content:flex-end;}
.sl-btn-archive{background:var(--sl-green);color:#fff;border:none;border-radius:6px;padding:.6rem 1.25rem;font-size:.9rem;font-family:inherit;cursor:pointer;transition:background .2s;}
.sl-btn-archive:hover{background:var(--sl-green-dark);}
.sl-cart-entry{display:flex;align-items:center;gap:.6rem;padding:.5rem 1rem;border-bottom:1px solid rgba(249,168,37,.2);}
.sl-cart-entry-name{flex:1;font-size:.88rem;font-weight:600;}
.sl-cart-entry-qty{font-size:.78rem;color:var(--sl-muted);}
.sl-cart-entry-price{font-size:.85rem;color:var(--sl-green);font-weight:700;}
.sl-cart-entry-undo{background:none;border:none;cursor:pointer;color:var(--sl-muted);padding:.2rem;}

/* ══ BOTTOM BAR ═══════════════════════════════════════════════════════ */
.sl-bottom-bar{
  position:sticky;bottom:0;width:100%;
  background:var(--sl-green);color:#fff;display:flex;align-items:center;
  z-index:90;font-size:.8rem;margin-top:.5rem;
}
.sl-bottom-total,.sl-bottom-cart{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.45rem;gap:.1rem;line-height:1.3;}
.sl-bottom-total{border-right:1px solid rgba(255,255,255,.2);}
.sl-bottom-total span:last-child,.sl-bottom-cart span:last-child{font-weight:700;font-size:.88rem;}

/* ══ DEFERRED ════════════════════════════════════════════════════════ */
.sl-deferred-section{margin:.75rem .75rem 0;border-radius:var(--sl-radius);border:1px solid #b0bec5;background:#f5f5f5;overflow:hidden;}
.sl-deferred-count{background:#78909c;color:#fff;font-size:.72rem;padding:.15rem .5rem;border-radius:10px;}

/* ══ FAB ══════════════════════════════════════════════════════════════ */
.sl-fab{
  display:none!important;
}
.sl-fab:hover{background:var(--sl-green-dark);transform:scale(1.07);}

/* ══ MODAL ════════════════════════════════════════════════════════════ */
.sl-modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:300;display:flex;align-items:flex-end;justify-content:center;}
.sl-modal{background:var(--sl-surface);width:100%;max-width:560px;border-radius:16px 16px 0 0;max-height:92vh;overflow-y:auto;animation:sl-up .25s ease;}
@keyframes sl-up{from{transform:translateY(40px);opacity:0;}}
.sl-modal-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--sl-border);position:sticky;top:0;background:var(--sl-surface);z-index:1;}
.sl-modal-header h3{font-size:1.05rem;}
.sl-modal-close{background:none;border:none;cursor:pointer;font-size:1.1rem;color:var(--sl-muted);}
.sl-modal-body{padding:1rem 1.25rem;display:flex;flex-direction:column;gap:.7rem;}
.sl-modal-footer{display:flex;gap:.5rem;justify-content:flex-end;padding:.75rem 1.25rem;border-top:1px solid var(--sl-border);position:sticky;bottom:0;background:var(--sl-surface);}
.sl-modal-input{width:100%;border:1px solid var(--sl-border);border-radius:8px;padding:.55rem .8rem;font-size:.9rem;font-family:inherit;color:var(--sl-text);background:var(--sl-surface);transition:border-color .15s;}
.sl-modal-input:focus{outline:none;border-color:var(--sl-green);box-shadow:0 0 0 3px rgba(76,175,80,.15);}
.sl-form-row{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;}
.sl-form-row label,.sl-form-full{display:flex;flex-direction:column;gap:.3rem;font-size:.75rem;font-weight:700;color:var(--sl-muted);text-transform:uppercase;letter-spacing:.04em;}
.sl-qty-row{display:flex;gap:.4rem;}
.sl-unit{width:80px;flex-shrink:0;}
.sl-qty-hint{font-size:.7rem;color:var(--sl-muted);font-weight:400;text-transform:none;letter-spacing:0;margin-top:.15rem;}
.sl-btn-save{background:var(--sl-green);color:#fff;border:none;border-radius:8px;padding:.6rem 1.25rem;font-size:.9rem;font-family:inherit;cursor:pointer;}
.sl-btn-cancel{background:none;border:1px solid var(--sl-border);border-radius:8px;padding:.6rem 1rem;font-size:.9rem;font-family:inherit;cursor:pointer;color:var(--sl-muted);}

/* Autocomplete */
.sl-autocomplete-wrap{position:relative;}
.sl-autocomplete{position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--sl-surface);border:1px solid var(--sl-border);border-radius:10px;list-style:none;padding:.3rem 0;z-index:400;box-shadow:0 8px 24px rgba(0,0,0,.12);max-height:220px;overflow-y:auto;}
.sl-autocomplete li{display:flex;align-items:center;gap:.6rem;padding:.5rem .85rem;cursor:pointer;font-size:.88rem;}
.sl-autocomplete li:hover{background:var(--sl-bg);}
.sl-ac-thumb{width:30px;height:30px;border-radius:6px;object-fit:cover;flex-shrink:0;background:var(--sl-bg);display:flex;align-items:center;justify-content:center;font-size:.95rem;overflow:hidden;}
.sl-ac-thumb img{width:100%;height:100%;object-fit:cover;}
.sl-ac-info{flex:1;}
.sl-ac-name{font-weight:600;}
.sl-ac-meta{font-size:.72rem;color:var(--sl-muted);}
.sl-ac-price{font-size:.78rem;color:var(--sl-green);font-weight:700;}

/* Category select */
.sl-cat-select-wrapper{position:relative;width:100%;}
.sl-cat-select{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;border:1px solid var(--sl-border);border-radius:8px;background:var(--sl-surface);cursor:pointer;font-size:.88rem;transition:border-color .15s;}
.sl-cat-select:hover{border-color:var(--sl-green);}
.sl-cat-arrow{color:var(--sl-muted);font-size:.78rem;margin-left:.3rem;}
.sl-cat-dropdown{position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--sl-surface);border:1px solid var(--sl-border);border-radius:var(--sl-radius);z-index:500;box-shadow:0 8px 24px rgba(0,0,0,.12);max-height:220px;overflow-y:auto;}
.sl-cat-search{width:100%;border:none;border-bottom:1px solid var(--sl-border);padding:.5rem .75rem;font-size:.875rem;font-family:inherit;outline:none;}
.sl-cat-options{padding:.25rem 0;}
.sl-cat-option{padding:.45rem .85rem;cursor:pointer;font-size:.88rem;display:flex;align-items:center;gap:.4rem;transition:background .1s;}
.sl-cat-option:hover{background:var(--sl-green-light);}
.sl-cat-option.selected{background:var(--sl-green-light);font-weight:700;}

/* Media / Image */
.sl-image-field{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.3rem;}
.sl-btn-media{background:var(--sl-surface);border:1px solid var(--sl-border);border-radius:6px;padding:.4rem .8rem;font-size:.82rem;cursor:pointer;font-family:inherit;transition:background .15s;}
.sl-btn-media:hover{background:var(--sl-bg);}
.sl-btn-media-clear{background:none;border:1px solid #e57373;border-radius:6px;padding:.35rem .65rem;font-size:.78rem;color:var(--sl-danger);cursor:pointer;font-family:inherit;}
.sl-img-preview{max-height:80px;max-width:120px;border-radius:8px;object-fit:cover;margin-top:.5rem;display:block;}

/* ══ MANAGE LISTS / CATEGORIES ════════════════════════════════════════ */
.sl-manage-list{padding:.25rem 0;}
.sl-manage-item{display:flex;align-items:center;gap:.6rem;padding:.8rem .85rem;background:var(--sl-surface);border-bottom:1px solid var(--sl-border);}
.sl-manage-item-icon{font-size:1.3rem;width:32px;text-align:center;flex-shrink:0;}
.sl-manage-item-name{flex:1;font-size:.9rem;}
.sl-manage-item-badge{font-size:.7rem;background:var(--sl-green);color:#fff;padding:.15rem .45rem;border-radius:10px;margin-left:.4rem;}
.sl-manage-item-sub{font-size:.72rem;color:var(--sl-muted);margin-left:.4rem;}
.sl-manage-item-meta{font-size:.74rem;color:var(--sl-muted);margin-top:.1rem;}
.sl-manage-actions{display:flex;gap:.3rem;}
.sl-icon-btn{background:none;border:1px solid var(--sl-border);border-radius:6px;padding:.28rem .45rem;cursor:pointer;font-size:.82rem;color:var(--sl-muted);transition:all .15s;}
.sl-icon-btn:hover{background:var(--sl-bg);color:var(--sl-text);}
.sl-icon-btn.danger:hover{background:#ffebee;color:var(--sl-danger);border-color:var(--sl-danger);}

/* Drag handle + sortable */
.sl-drag-handle{font-size:1.1rem;color:#b0bec5;cursor:grab;padding:.1rem .3rem;flex-shrink:0;}
.sl-drag-handle:active{cursor:grabbing;}
.sl-drag-item{transition:opacity .15s;}
.sl-dragging{opacity:.45;background:var(--sl-green-light)!important;}
.sl-sortable{user-select:none;}

/* Inline forms */
.sl-inline-form{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding:.7rem .85rem;background:var(--sl-green-light);border-bottom:1px solid var(--sl-border);}
.sl-inline-input{border:1px solid var(--sl-border);border-radius:6px;padding:.42rem .65rem;font-size:.88rem;flex:1;min-width:100px;font-family:inherit;}
.sl-inline-input:focus{outline:none;border-color:var(--sl-green);}
.sl-inline-input.emoji{width:55px;flex:none;text-align:center;font-size:1rem;}
.sl-btn-save-sm{background:var(--sl-green);color:#fff;border:none;border-radius:6px;padding:.42rem .85rem;cursor:pointer;font-size:.85rem;white-space:nowrap;}
.sl-btn-cancel-sm{background:none;border:1px solid var(--sl-border);border-radius:6px;padding:.42rem .65rem;cursor:pointer;font-size:.85rem;}

/* Item edit form (expanded) */
.sl-item-edit-form{flex-direction:column;gap:.5rem;}
.sl-inline-row{display:flex;flex-direction:column;gap:.2rem;width:100%;}
.sl-inline-row2{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;width:100%;}
.sl-inline-col{display:flex;flex-direction:column;gap:.2rem;}
.sl-inline-label{font-size:.7rem;font-weight:700;color:var(--sl-muted);text-transform:uppercase;letter-spacing:.04em;}
.sl-inline-btns{display:flex;gap:.5rem;margin-top:.25rem;}
.sl-btn-select{border:1px solid var(--sl-border);background:var(--sl-surface);border-radius:6px;padding:.38rem .65rem;cursor:pointer;font-size:.85rem;font-family:inherit;text-align:left;transition:border-color .15s;}
.sl-btn-select:hover{border-color:var(--sl-green);}
.sl-item-edit-preview{max-height:60px;max-width:80px;border-radius:6px;object-fit:cover;}

/* Items page */
.sl-items-filter-bar{padding:.65rem .85rem;background:var(--sl-surface);border-bottom:1px solid var(--sl-border);}
.sl-items-cat-header{padding:.4rem .85rem;background:var(--sl-bg);border-bottom:1px solid var(--sl-border);font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--sl-muted);}

/* ══ HISTORY ══════════════════════════════════════════════════════════ */
.sl-history-entry{display:flex;align-items:center;gap:.75rem;padding:.85rem 1rem;background:var(--sl-surface);border-bottom:1px solid var(--sl-border);cursor:pointer;transition:background .15s;}
.sl-history-entry:hover{background:var(--sl-green-light);}
.sl-history-icon{font-size:1.7rem;flex-shrink:0;}
.sl-history-info{flex:1;}
.sl-history-date{font-weight:700;font-size:.9rem;}
.sl-history-meta{font-size:.78rem;color:var(--sl-muted);}
.sl-history-total{font-size:.95rem;font-weight:700;color:var(--sl-green);}
.sl-history-arrow{color:var(--sl-muted);}

.sl-bon{margin:.75rem;background:var(--sl-surface);border-radius:var(--sl-radius);border:1px solid var(--sl-border);overflow:hidden;}
.sl-bon-meta{padding:1rem;border-bottom:1px solid var(--sl-border);font-size:.88rem;}
.sl-bon-meta strong{display:block;margin-bottom:.2rem;font-size:1rem;}
.sl-bon-table{width:100%;border-collapse:collapse;font-size:.85rem;}
.sl-bon-table thead{background:var(--sl-bg);}
.sl-bon-table th{padding:.55rem .75rem;text-align:left;font-size:.75rem;color:var(--sl-muted);font-weight:700;border-bottom:2px solid var(--sl-border);}
.sl-bon-table th:last-child{text-align:right;}
.sl-bon-table td{padding:.5rem .75rem;border-bottom:1px solid var(--sl-border);}
.sl-bon-table td:last-child{text-align:right;font-weight:600;}
.sl-bon-total{display:flex;justify-content:space-between;padding:.75rem;border-top:2px solid var(--sl-border);font-weight:800;font-size:.95rem;}
.sl-back-btn-inline{display:inline-flex;align-items:center;gap:.3rem;margin:.75rem;padding:.45rem .85rem;background:none;border:1px solid var(--sl-border);border-radius:6px;cursor:pointer;font-size:.85rem;color:var(--sl-green);font-family:inherit;}

/* ══ CREATE LIST MODAL ════════════════════════════════════════════════ */
.sl-radio-label{display:flex;align-items:center;gap:.5rem;font-size:.9rem;padding:.3rem 0;cursor:pointer;font-weight:400;text-transform:none;letter-spacing:0;color:var(--sl-text);}
.sl-cat-filter-wrap{margin-top:.5rem;padding:.5rem;border:1px solid var(--sl-border);border-radius:8px;max-height:200px;overflow-y:auto;}
.sl-cat-filter-options{display:flex;flex-direction:column;gap:.25rem;}
.sl-cat-check-label{display:flex;align-items:center;gap:.5rem;font-size:.88rem;padding:.25rem;cursor:pointer;border-radius:4px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--sl-text);}
.sl-cat-check-label:hover{background:var(--sl-green-light);}

/* ══ TOAST ════════════════════════════════════════════════════════════ */
#sl-toast{position:fixed;bottom:72px;left:50%;transform:translateX(-50%) translateY(20px);background:#323232;color:#fff;padding:.55rem 1.1rem;border-radius:20px;font-size:.875rem;z-index:9999;opacity:0;transition:all .25s;pointer-events:none;white-space:nowrap;}
#sl-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

@media(max-width:420px){
  .sl-form-row{grid-template-columns:1fr;}
  .sl-inline-row2{grid-template-columns:1fr;}
}

/* ══ OFFLINE BANNER ═══════════════════════════════════════════════════ */
.sl-offline-banner {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .5rem 1rem; background: #f57c00; color: #fff;
  font-size: .82rem; font-weight: 700; text-align: center;
  position: sticky; top: var(--sl-topbar-h); z-index: 98;
  animation: sl-pulse 2s ease-in-out infinite;
}
@keyframes sl-pulse {
  0%,100%{opacity:1;} 50%{opacity:.75;}
}
.sl-queue-badge {
  background: rgba(255,255,255,.25); border-radius: 10px;
  padding: .1rem .5rem; font-size: .75rem;
}

/* ══ EMOJI PICKER ══════════════════════════════════════════════════════ */
.sl-emoji-picker {
  border: 1px solid var(--sl-border); border-radius: var(--sl-radius);
  background: var(--sl-surface); padding: .4rem;
  max-height: 220px; overflow-y: auto;
  margin-top: .35rem;
  box-shadow: var(--sl-shadow);
}
.sl-emoji-cat-label {
  font-size: .68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--sl-muted);
  padding: .3rem .2rem .15rem; display: block;
}
.sl-emoji-grid {
  display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: .3rem;
}
.sl-emoji-btn {
  background: none; border: none; cursor: pointer;
  font-size: 1.35rem; width: 36px; height: 36px;
  border-radius: 6px; display: flex; align-items: center; justify-content: center;
  transition: background .1s;
}
.sl-emoji-btn:hover { background: var(--sl-green-light); }
.sl-emoji-current {
  font-size: 2.2rem; display: inline-block;
  margin-top: .4rem; line-height: 1;
}

/* ══ DEFERRED COLLAPSIBLE ══════════════════════════════════════════════ */
.sl-deferred-section {
  margin: .75rem .75rem 0;
  border-radius: var(--sl-radius);
  border: 1px solid #b0bec5;
  background: #f5f5f5;
  overflow: hidden;
}
.sl-deferred-toggle {
  width: 100%; display: flex; align-items: center; gap: .5rem;
  padding: .6rem 1rem;
  background: #eceff1; border: none; cursor: pointer;
  font-size: .875rem; font-weight: 700; color: #546e7a;
  font-family: inherit; text-align: left;
  transition: background .15s;
}
.sl-deferred-toggle:hover { background: #e0e7ea; }
.sl-deferred-count {
  background: #78909c; color: #fff;
  font-size: .72rem; padding: .15rem .5rem; border-radius: 10px;
}
.sl-deferred-chevron { margin-left: auto; font-size: .8rem; color: #78909c; }
.sl-deferred-body { /* shown/hidden via .sl-hidden */ }

/* ══ IMAGE URL INPUT (hidden, fallback) ════════════════════════════════ */
.sl-image-url-input { margin-top: .4rem; }