/* Инструкции */
.instrwrap{padding:14px 20px 18px}
/* Раньше поиск инструкций одалживал класс .wbfi у каталога WB и приезжал
   с розовой рамкой Wildberries. Своя нейтральная форма поля. */
.srchfi{width:100%;border:1px solid var(--color-border-input);border-radius:var(--radius-control);padding:12px 14px;font-size:15px;font-family:var(--ff);color:var(--color-text);background:var(--color-bg);outline:none;margin-bottom:12px}
.srchfi::placeholder{color:var(--color-text-muted-2)}
.srchfi:focus{border-color:var(--color-accent-text)}
/* Заметки — строки внутри одной карточки, как список покупок. */
.instr-card{border-bottom:1px solid var(--color-border)}
.instr-card:last-child{border-bottom:none}
.instr-head{display:flex;align-items:center;padding:14px 0;gap:13px;cursor:pointer}
.instr-head:hover{background:transparent}
.instr-ico{font-size:17px;width:24px;text-align:center;flex-shrink:0}
.instr-name{flex:1;font-size:14.5px;font-weight:600;min-width:0;line-height:1.3}
.instr-chev{font-size:20px;color:var(--color-text-muted-2);flex-shrink:0;line-height:1}
/* Последняя строка карточки — «+ Добавить инструкцию», как в макете. */
.instr-add{display:flex;align-items:center;gap:13px;padding:14px 0;color:var(--color-accent-text);font-size:14.5px;font-weight:600;cursor:pointer;border-top:1px solid var(--color-border)}
.instr-add span{width:24px;text-align:center;font-size:18px}
.instr-sub-count{font-size:10.5px;color:var(--color-text-muted);background:var(--color-surface-muted);padding:1px 6px;border-radius:var(--radius-badge);white-space:nowrap}
.instr-acts{display:flex;gap:3px;flex-shrink:0}
.instr-subs{border-top:1px solid var(--color-border);padding:4px 8px 8px}
.instr-sub{display:flex;align-items:center;padding:7px 10px;gap:7px;border-radius:var(--radius-badge);cursor:pointer;font-size:13px}
.instr-sub:hover{background:var(--color-surface-hover)}
.instr-sub-name{flex:1;min-width:0}
.instr-view-content{font-size:13.5px;line-height:1.65;color:var(--color-text);white-space:pre-wrap;word-break:break-word}
.instr-view-content b{font-weight:600}
.instr-view-content .li{padding-left:14px;position:relative;display:block}
.instr-view-content .li::before{content:'•';position:absolute;left:3px;color:var(--color-accent-text);font-weight:700}
.instr-photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:5px;margin-top:10px}
.instr-photo{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-icon);border:1px solid var(--color-border);cursor:zoom-in;background:var(--color-surface-muted)}
.iph-thumb{position:relative;width:64px;height:64px;border-radius:var(--radius-icon);overflow:hidden;border:1px solid var(--color-border);background:var(--color-surface-muted)}
.iph-thumb img{width:100%;height:100%;object-fit:cover}
.iph-rm{position:absolute;top:2px;right:2px;background:var(--color-danger-overlay);color:var(--color-text-on-accent);border:none;border-radius:50%;width:18px;height:18px;font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.instr-sub-list{background:var(--color-surface-hover);border-radius:var(--radius-card);padding:8px;margin-top:8px}
.instr-sub-list-item{display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:6px;margin-bottom:4px;font-size:13px}

/* Корзина */
.trash-group{margin-bottom:14px}
.trash-group-title{font-size:13px;font-weight:600;color:var(--color-accent-text);margin-bottom:7px}
.trash-item{display:flex;align-items:center;gap:8px;padding:9px 10px;background:var(--color-surface);border-radius:var(--radius-card);margin-bottom:5px;box-shadow:var(--shadow-card)}
.trash-info{flex:1;min-width:0}
.trash-name{font-size:13px;font-weight:500;color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trash-meta{font-size:10.5px;color:var(--color-text-muted);margin-top:1px}
.trash-acts{display:flex;gap:4px;flex-shrink:0}
.trash-btn{border:none;border-radius:var(--radius-control);padding:6px 10px;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--ff)}
.trash-btn.r{background:var(--color-accent);color:var(--color-text-on-accent)}
.trash-btn.d{background:var(--color-danger-surface-light);color:var(--color-destructive)}

/* Confirm modal */
#cfrm{position:fixed;inset:0;background:var(--color-backdrop);display:none;align-items:center;justify-content:center;z-index:10000;padding:20px;animation:cfrmFade .12s ease-out}
#cfrm.show{display:flex}
@keyframes cfrmFade{from{opacity:0}to{opacity:1}}
.cfrm-card{background:var(--color-surface);border-radius:var(--radius-card);padding:20px;width:100%;max-width:340px;box-shadow:0 8px 32px var(--color-shadow);animation:cfrmPop .15s ease-out}
@keyframes cfrmPop{from{transform:scale(.94);opacity:.6}to{transform:scale(1);opacity:1}}
.cfrm-icon{font-size:32px;text-align:center;margin-bottom:8px}
.cfrm-title{font-size:16px;font-weight:600;text-align:center;color:var(--color-text);margin-bottom:6px}
.cfrm-msg{font-size:14px;color:var(--color-text);text-align:center;line-height:1.45;margin-bottom:6px;word-wrap:break-word}
.cfrm-msg b{color:var(--color-accent-text)}
.cfrm-hint{font-size:11.5px;color:var(--color-text-muted);text-align:center;line-height:1.4;margin-bottom:16px}
.cfrm-acts{display:flex;gap:8px}
.cfrm-acts button{flex:1;border:none;border-radius:9px;padding:11px;font-size:14px;font-weight:600;font-family:var(--ff);cursor:pointer}
.cfrm-cancel{background:var(--color-surface-cancel);color:var(--color-text)}
.cfrm-ok{background:var(--color-destructive);color:var(--color-text-on-accent)}
.cfrm-ok.safe{background:var(--color-accent)}