/* SHOP */
.sphd{padding:14px 18px 18px;border-radius:0 0 22px 22px;z-index:10}
.spt{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}
/* Заголовок раздела: по макету это Onest 700, а не рукописный Caveat.
   Caveat остаётся только на «VS · Family» и названиях семей. */
.sectitle{font-size:21px;letter-spacing:-.01em;color:var(--color-text-on-accent);font-weight:700}
.secsub{font-size:12px;color:var(--color-text-on-accent);opacity:.72;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.setwrap{padding:16px 20px 18px}
/* Секция настроек — карточка с микрокапс-заголовком. */
.setsec{background:var(--color-surface);border-radius:var(--radius-card);padding:16px;margin-bottom:14px;box-shadow:var(--shadow-card)}
.setsec-t{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--color-text-muted);margin-bottom:10px}
.setrow{display:flex;align-items:center;gap:12px;width:100%;background:none;border:none;padding:4px 0;cursor:pointer;font-family:var(--ff);text-align:left}
.setrow-ic{width:24px;text-align:center;font-size:16px;flex:none}
.setrow-l{flex:1;min-width:0;font-size:14.5px;font-weight:500;color:var(--color-text)}
.switch{width:44px;height:26px;border-radius:14px;background:var(--color-checkbox-border);padding:3px;display:flex;justify-content:flex-start;flex:none;transition:background .18s}
.switch.on{background:var(--color-accent);justify-content:flex-end}
.switch-k{width:20px;height:20px;border-radius:10px;background:var(--color-surface);transition:transform .18s}
.setfam{font-family:'Caveat',cursive;font-style:italic;font-size:24px;font-weight:700;line-height:1.1;margin-bottom:4px}
/* Аватар участника — та же заглушка по первой букве, что в шапке главной. */
.mav{width:36px;height:36px;border-radius:18px;background:var(--color-tint);color:var(--color-accent-text);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;flex-shrink:0}
/* Эмодзи внутри кружка аватара. Буква рисуется жирной — эмодзи от жирности
   только мажется, поэтому вес сбрасывается, а размер чуть подрастает.
   Единицы относительные: один класс обслуживает все три кружка разного размера. */
.av-em{font-weight:400;font-size:1.2em;line-height:1}
/* Выбор своего аватара в настройках */
.avpick{margin-bottom:9px}
.avpick summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;padding:4px 0}
.avpick summary::-webkit-details-marker{display:none}
.avpick-l{flex:1;font-size:13px}
.avpick-ch{color:var(--color-text-muted);font-size:12px;transition:transform .15s}
.avpick[open] .avpick-ch{transform:rotate(180deg)}
.avpick-note{font-size:11.5px;color:var(--color-text-muted);line-height:1.4}
.sdot{width:8px;height:8px;border-radius:50%;background:var(--color-online-dot);display:inline-block;margin-left:5px;transition:background .5s}
.hbtns{display:flex;gap:5px}
.ibtn{background:var(--color-overlay-light);border:none;border-radius:var(--radius-control);padding:6px 10px;color:var(--color-text-on-accent);cursor:pointer;font-size:12px;font-weight:500;font-family:var(--ff);white-space:nowrap}
.wbtn{background:var(--color-wb);border:none;border-radius:var(--radius-control);padding:6px 10px;color:var(--color-text-on-accent);cursor:pointer;font-size:12px;font-weight:600;font-family:var(--ff);white-space:nowrap}
/* Строка ввода — первая строка карточки списка, как в макете. */
.addrow{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid var(--color-border)}
.addplus{width:23px;text-align:center;font-size:19px;color:var(--color-accent-text);flex-shrink:0;line-height:1}
.addrow input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--color-text);font-family:var(--ff);font-size:15px;font-weight:500;padding:4px 0}
.addrow input::placeholder{color:var(--color-text-muted-2)}
.addbtn{background:var(--color-tint);color:var(--color-accent-text);border:none;border-radius:12px;padding:7px 13px;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--ff);flex-shrink:0}
.wbt-toggle{display:flex;align-items:center;cursor:pointer;user-select:none;width:fit-content;padding:9px 0 10px;border-bottom:1px solid var(--color-border)}
.wbt-toggle input[type=checkbox]{display:none}
.wbpill{background:var(--color-surface-2);border:1.5px solid transparent;border-radius:var(--radius-chip);padding:3px 10px;font-size:11px;font-weight:600;color:var(--color-text-muted);transition:all .2s}
.wbt-toggle input:checked+.wbpill{background:var(--color-wb);border-color:var(--color-wb);color:var(--color-text-on-accent)}
.stats{display:flex;gap:8px;padding:14px 20px 0}
/* Статистическая плитка невысокая: 22px на ней смотрятся раздутыми,
   в макете у этих плиток 16px — берём радиус контрола. */
.sc{flex:1;background:var(--color-surface);border-radius:var(--radius-control);padding:10px 12px;box-shadow:var(--shadow-card)}
.sn{font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--color-accent-text);line-height:1}
.sl{font-size:11.5px;font-weight:500;color:var(--color-text-muted);margin-top:2px}
.lw{padding:14px 20px 18px}
/* Список — строки внутри ОДНОЙ карточки с разделителями, а не плитки с отступами. */
.lcard{background:var(--color-surface);border-radius:var(--radius-card);padding:0 16px;box-shadow:var(--shadow-card)}
.lcard>*:last-child>.ic:last-child,.lcard>.ic:last-child{border-bottom:none}
.slbl{font-size:10.5px;color:var(--color-text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.14em;padding:14px 0 6px}
.ic{padding:13px 0;display:flex;align-items:flex-start;gap:13px;animation:sli .2s;border-bottom:1px solid var(--color-border)}
.ic:last-child{border-bottom:none}
@keyframes sli{from{transform:translateY(-5px);opacity:0}to{transform:translateY(0);opacity:1}}
/* Отмеченная строка: только зачёркнутое название приглушённым цветом.
   Прозрачности на всей строке нет — она глушила и чип категории, и таймер. */
.ic.done .iname{text-decoration:line-through;color:var(--color-text-muted-2)}
.chk{width:23px;height:23px;border-radius:12px;border:2px solid var(--color-checkbox-border);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:transparent;font-size:12px;font-weight:700;transition:all .2s;margin-top:1px}
.ic.done .chk{background:var(--color-accent);border-color:var(--color-accent-text);color:var(--color-text-on-accent)}
/* Модификатор WB-строки списка назван is-wb, а не wbi: класс .wbi уже занят
   элементом каталога в модалке, и его рамка с фоном протекала в строку списка. */
.ic.is-wb.done .chk{background:var(--color-wb);border-color:var(--color-wb)}
.ii{flex:1;min-width:0}.iname{font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.imeta{display:flex;align-items:center;gap:7px;margin-top:4px;flex-wrap:wrap}
.cbdg{font-size:11px;padding:3px 8px;border-radius:var(--radius-badge);font-weight:600}
.wbbdg{font-size:11px;padding:3px 8px;border-radius:var(--radius-badge);font-weight:700;background:var(--color-wb);color:var(--color-text-on-accent)}
.itimer{font-size:11.5px;color:var(--color-text-muted-2)}
.wblink{font-size:11px;margin-top:3px;display:block}.wblink a{color:var(--color-wb);text-decoration:none;font-weight:500}
.wbnl{font-size:10.5px;color:var(--color-text-disabled);margin-top:2px;display:block}
.dbtn{background:transparent;border:none;cursor:pointer;color:var(--color-text-icon-muted);font-size:15px;padding:3px;flex-shrink:0}