/* Loading */
#loading{position:fixed;inset:0;background:var(--color-accent);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;gap:16px}
/* Логотип на загрузке и на входе. Белый вариант — на фиолетовом фоне,
   фиолетовый — на белой карточке входа. */
#loading .llogo{width:96px;height:96px;display:block}
.loginLogo{width:84px;height:84px;display:block;margin:0 auto 10px}
#loading .lt{font-family:'Caveat',cursive;font-style:italic;font-size:40px;font-weight:700;color:var(--color-text-on-accent)}
#loading .ls{width:44px;height:44px;border:4px solid var(--color-border-on-accent-soft);border-top-color:var(--color-border-on-accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* HOME */
/* Шапки разделов: градиент вместо сплошной заливки, скругление снизу и два
   декоративных круга, вынесенных за границы блока (в макете они дают глубину).
   Круги — на ::before/::after, поэтому у .hhd есть position:relative в разметке. */
.hhd,.sphd,.calhd{background:var(--gradient-header);position:relative;overflow:hidden}
/* Шапки покупок и календаря залипают при скролле — было до редизайна, оставляем.
   sticky, как и relative, задаёт систему координат для абсолютных кругов. */
.sphd,.calhd{position:sticky;top:0}
/* Декоративные круги держим ВЫШЕ полосы стеклянных плиток (плитки начинаются
   с y≈110). Иначе под одной плиткой оказывается подсветка круга, а под второй
   чистый градиент — и одинаковые по стилю плитки выглядят разной прозрачности.
   Ровно это и было видно на бете: «Календарь» казался мутнее «Покупок». */
.hhd::before,.sphd::before,.calhd::before{content:'';position:absolute;top:-130px;right:-70px;width:230px;height:230px;border-radius:50%;background:rgba(255,255,255,.07);pointer-events:none}
.hhd::after{content:'';position:absolute;top:-60px;left:-70px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.05);pointer-events:none}
.hhd>*,.sphd>*,.calhd>*{position:relative}
.hhd{padding:18px 16px 22px;border-radius:0 0 30px 30px}
.hkicker{font-size:10.5px;font-weight:600;letter-spacing:.18em;color:var(--color-text-on-accent);opacity:.72}
.htitle{font-family:'Caveat',cursive;font-style:italic;font-size:32px;font-weight:700;color:var(--color-text-on-accent);line-height:1.1;margin-top:4px}
.hsub{font-size:13px;color:var(--color-text-on-accent);opacity:.78;margin-top:5px}
.hacts{display:flex;gap:8px;align-items:center;flex:none}
.hbtn{width:38px;height:38px;border-radius:19px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;color:var(--color-text-on-accent);font-family:var(--ff);padding:0;position:relative}
/* Аватар — пока заглушка с первой буквой имени. Настоящие эмодзи-аватары
   участников требуют миграции и правок RLS, это отдельная задача после редизайна. */
.havatar{width:40px;height:40px;border-radius:20px;background:rgba(255,255,255,.92);border:none;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;color:var(--color-accent-text);cursor:pointer;font-family:var(--ff);padding:0;position:relative;flex:none}

/* Стеклянные плитки. Эффект требует градиента под собой — иначе его не видно. */
.gtiles{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:18px}
.gtile{background:rgba(255,255,255,.13);border:.5px solid rgba(255,255,255,.28);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border-radius:22px;padding:14px;display:flex;flex-direction:column;cursor:pointer;color:var(--color-text-on-accent);text-align:left;font-family:var(--ff);transition:transform .12s}
.gtile:active{transform:scale(.985)}
.gtile-top{display:flex;align-items:flex-start;justify-content:space-between}
.gtile-ic{width:42px;height:42px;border-radius:var(--radius-icon);background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:22px}
.gtile-num{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1}
.gtile-nl{font-size:10.5px;opacity:.7;margin-top:3px}
.gtile-name{font-size:20px;font-weight:700;letter-spacing:-.01em;margin-top:10px}
/* Высоту задаёт содержимое, а не aspect-ratio: на широком экране квадратная
   плитка вырастала до 210px, и margin-top:auto отбивал превью в самый низ —
   между названием и товарами зияла дыра. Обе плитки в grid-строке всё равно
   выравниваются по высоте друг с другом. */
.gtile-peek{margin-top:6px;font-size:12.5px;opacity:.8;line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* Без поддержки backdrop-filter плитка просто плотнее — читаемость не страдает. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .gtile{background:rgba(255,255,255,.22)}
}
/* Пользователь просил меньше прозрачности в системе — уважаем. */
@media (prefers-reduced-transparency:reduce){
  .gtile,.hbtn{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.22)}
}
.hbody{padding:18px 20px 4px}
.rg{margin-bottom:18px}
.rgl{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--color-text-muted);margin-bottom:9px;display:flex;align-items:baseline;gap:8px;padding:0 2px}
/* Ссылка-действие справа от заголовка группы: «Всё», «Аптечка». */
.rgа,.rga{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--color-accent-light);cursor:pointer;text-transform:none;letter-spacing:0}
/* Строки группы — внутри одной белой карточки с разделителями. */
.rgc{background:var(--color-surface);border-radius:var(--radius-card);padding:0 16px;box-shadow:var(--shadow-card)}
.rgl::after{content:'';flex:1;height:1px;background:var(--color-border)}
/* Строка сводки. Раньше это была отдельная мини-карточка, и тип записи
   кодировался фоном ВСЕЙ карточки. В единой карточке такие заливки читаются
   заплатками, поэтому цвет переехал на иконку-квадрат — так в макете. */
.rc{padding:13px 0;display:flex;gap:12px;align-items:center;cursor:pointer;border-bottom:1px solid var(--color-border)}
.rc:last-child{border-bottom:none}
.rci{font-size:16px;flex-shrink:0;width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--color-surface-2)}
.rc.b .rci{background:var(--color-birthday-surface)}
.rc.t .rci{background:var(--color-warning-surface)}
.rc.w .rci{background:var(--color-tint)}
.rc.f .rci{background:var(--color-info-surface)}
.rc.m .rci{background:var(--color-meal-surface)}
.rc.sh .rci{background:var(--color-tint)}
.rcn{font-size:14.5px;font-weight:600}.rcs{font-size:12.5px;color:var(--color-text-muted);margin-top:1px}