/* My lists screen and the new-basket template picker. */
/* ---------- list cards (My lists) ---------- */
.lcard { background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); padding: var(--s4); display: grid; gap: var(--s3); }
.lcard .row { display: flex; align-items: center; gap: var(--s3); }
.lcard .ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 28px; flex: none; }
.lcard .meta { flex: 1; min-width: 0; }
.lcard .nm { font-weight: 800; font-size: 16.5px; }
.lcard .info { font-size: 13px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.lcard .est { text-align: end; flex: none; }
.lcard .est .v { font-weight: 800; font-size: 18px; }
.lcard .est .k { font-size: 11.5px; color: var(--ink-3); }
.lcard .actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
.chip-btn { border: 0; border-radius: var(--r-pill); padding: 8px 14px; background: var(--lilac-50); color: var(--purple); font-weight: 700; font-size: 13.5px; display: inline-flex; gap: 6px; align-items: center; }
.chip-btn svg { width: 16px; height: 16px; }
.chip-btn.solid { background: var(--purple); color: #fff; }
.chip-btn.danger { background: var(--danger-50); color: var(--danger); }
.example-tag { font-size: 11px; font-weight: 700; color: #8A6400; background: #FFF1BF; padding: 2px 8px; border-radius: var(--r-pill); }
.confirm { background: var(--danger-50); border-radius: var(--r-sm); padding: var(--s3); display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; font-size: 14px; }
.confirm span { flex: 1; min-width: 160px; }
.rename { display: flex; gap: var(--s2); }
.rename input { flex: 1; min-width: 0; border: 2px solid var(--lilac); border-radius: var(--r-sm); padding: 8px 12px; background: var(--surface); }

/* ---------- new basket templates ---------- */
.hero-ill { display: grid; place-items: center; padding: var(--s2) 0; }
.hero-ill svg { width: 190px; height: 150px; }
.choices { display: grid; gap: var(--s3); }
.choice {
  border: 0; background: var(--surface); border-radius: var(--r); padding: var(--s4); display: flex; align-items: center; gap: var(--s3);
  box-shadow: var(--shadow); text-align: start; transition: box-shadow .2s, background .2s;
}
.choice .ico { font-size: 30px; width: 44px; text-align: center; }
.choice .t { flex: 1; } .choice .t b { display: block; font-size: 16px; } .choice .t span { font-size: 13px; color: var(--ink-2); }
.radio { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--lilac); flex: none; display: grid; place-items: center; }
.choice[aria-checked="true"] { background: var(--lilac-50); box-shadow: inset 0 0 0 2px var(--purple-300), var(--shadow); }
.choice[aria-checked="true"] .radio { border-color: var(--purple); }
.choice[aria-checked="true"] .radio::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--purple); }