/* ============================================================
   BODY PROTOCOL — визуальный слой «Circuit»
   ------------------------------------------------------------
   Построен по логотипу и грузится последним, поэтому переопределяет
   всё, что осталось от прежних версий оформления.

   Правило слоя: свет и волосяная линия вместо заливок и теней.
   Объём даёт подсветка грани, а не тень под панелью.
   ============================================================ */

/* ---------- Логотип ---------- */
.logo-lockup { display: flex; flex-direction: column; align-items: center; }
.logo-full, .logo-mark { display: block; height: auto; max-width: 100%; }
/* Лёгкий ореол — логотип нарисован светящимся, на чёрном это его продолжает */
.logo-full { filter: drop-shadow(0 0 26px rgba(var(--acc-rgb), .16)); }
.logo-mark { filter: drop-shadow(0 0 12px rgba(var(--acc-rgb), .22)); }
.logo-lockup.inline { flex-direction: row; gap: 10px; align-items: center; }

/* ---------- Типографика ---------- */
h1, h2, .ob-h, .tour-card h3 {
  font-family: var(--font-label); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
h1 { font-size: clamp(1.25rem, 5vw, 1.5rem); line-height: 1.15; }
.kicker, .stat span, .wcell .dw, .ring-wrap .lbl span, .fld > span, .ob-day-name {
  font-family: var(--font-label); font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; font-size: .74rem;
  color: var(--muted);
}
.kicker { color: var(--volt); }
.num, .mkcal, .na-macros, .reco-box code, .code-input, .stat b,
.ring-wrap .lbl b, .e-left, .adh, .acc-avatar {
  font-family: var(--font-mono); font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.stat b, .ring-wrap .lbl b, .e-left { font-weight: 700; }

/* ---------- Панели: волосяная линия и внутренний свет ---------- */
.card, .stat, .tile, .ob-feat, .ob-big, .ob-sup, .wcell, .acc-banner, .tour-card {
  background:
    linear-gradient(180deg, var(--sheen) 0%, var(--sheen-2) 42%, transparent 100%),
    var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 var(--sheen) inset;
}
.card { border-radius: var(--r-lg); }
.card.press { transition: border-color .25s, box-shadow .25s, transform .12s; }
.card.press:active { transform: scale(.99); }

/* Ключевые блоки светятся янтарной гранью — как ось логотипа */
.hero, .na-card {
  border-color: rgba(var(--acc-rgb), .3);
  box-shadow: var(--glow-acc), 0 1px 0 var(--sheen) inset;
  position: relative; overflow: hidden;
}
.hero::before, .na-card::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent, var(--acc) 22%, var(--acc) 78%, transparent);
  box-shadow: 0 0 14px rgba(var(--acc-rgb), .8);
  mask-image: none; -webkit-mask-image: none;
}

/* ---------- Кнопки ---------- */
.btn {
  font-family: var(--font-label); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; font-size: .92rem;
  border: 1px solid var(--line); background: var(--panel-2);
  box-shadow: none; padding: 15px 18px; transition: .22s;
}
.btn:hover { border-color: rgba(var(--acc-rgb), .35); }
.btn:active { transform: scale(.98); }
.btn.volt {
  background: linear-gradient(180deg, rgba(var(--acc-rgb), .22), rgba(var(--acc-2-rgb), .12));
  border: 1px solid var(--acc); color: var(--volt);
  box-shadow: var(--glow-acc), 0 0 0 1px rgba(var(--acc-rgb), .12) inset;
  text-shadow: 0 0 10px rgba(var(--acc-rgb), .55);
}
.btn.volt:hover { box-shadow: 0 0 34px rgba(var(--acc-rgb), .45); }
.btn.volt::after { display: none; }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--danger); border-color: rgba(255,77,94,.4); }

.icon-btn, .chip-btn {
  border: 1px solid var(--line); background: var(--panel-2);
  border-radius: var(--r-sm); transition: .2s;
}
.icon-btn:hover, .chip-btn:hover { border-color: rgba(var(--acc-rgb), .4); color: var(--volt); }
.chip-btn.on {
  background: rgba(var(--acc-rgb), .14); color: var(--volt);
  border-color: var(--acc); box-shadow: var(--glow-acc-s);
}

/* Отметка выполнения — контакт на плате */
.tick {
  border-radius: 50%; border: 1px solid var(--line);
  background: var(--ink); color: var(--muted-2); transition: .22s;
}
.meal.eaten .tick, .sup-row.taken .tick {
  border-color: var(--acc); color: var(--volt);
  background: rgba(var(--acc-rgb), .12); box-shadow: var(--glow-acc-s);
}

/* ---------- Сегменты ---------- */
.seg { border: 1px solid var(--line); background: var(--panel); border-radius: var(--r-sm); padding: 3px; }
.seg button {
  font-family: var(--font-label); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; font-size: .86rem; border-radius: var(--r-sm); transition: .2s;
}
.seg button.on {
  background: rgba(var(--acc-rgb), .16); color: var(--volt);
  box-shadow: 0 0 0 1px rgba(var(--acc-rgb), .45) inset, var(--glow-acc-s);
}

/* ---------- Поля ----------
   Форма задаётся ниже, в секции «СКРУГЛЕНИЯ». Здесь её не дублируем:
   раньше радиус полей стоял в двух местах, и правка в одном не работала. */
input, select, textarea {
  background: var(--panel-2) !important;
  border: 1px solid var(--line) !important;
  transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--acc) !important;
  box-shadow: var(--glow-acc-s); outline: none;
}

/* ---------- Полосы: неоновая нить ---------- */
.mbar, .pw-meter, .wcell .wbar, .setbar {
  background: var(--track); border: 0; border-radius: 2px; overflow: visible;
}
.mbar i, .pw-meter i, .wcell .wbar i, .setbar i {
  border-radius: 2px; box-shadow: 0 0 10px rgba(var(--acc-rgb), .6);
}
.ring-wrap circle, #rt-ring { stroke-linecap: round !important; }
.ring-wrap svg { filter: drop-shadow(0 0 8px rgba(var(--acc-rgb), .35)); }

/* ---------- Метки разделов: дорожка с контактом ---------- */
.sec-title, .month-label, .week-title {
  position: relative; padding-left: 20px; background: none; color: var(--volt);
}
.sec-title::before, .month-label::before, .week-title::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 12px; height: 1px;
  background: var(--acc); box-shadow: 0 0 8px rgba(var(--acc-rgb), .9);
}
.sec-title::after, .month-label::after, .week-title::after {
  content: ''; position: absolute; left: 12px; top: 50%; width: 4px; height: 4px;
  margin-top: -2px; border-radius: 50%; background: var(--acc);
  box-shadow: 0 0 8px rgba(var(--acc-rgb), .9);
}

/* ---------- Лента приёмов пищи ---------- */
.mline::before { background: linear-gradient(180deg, transparent, var(--line) 12%, var(--line) 88%, transparent); width: 1px; }
.mline i { border-radius: 50%; width: 9px; height: 9px; border: 1px solid var(--line-hi); background: var(--ink); }
.meal.eaten .mline i { background: var(--acc); border-color: var(--acc); box-shadow: 0 0 10px rgba(var(--acc-rgb), .9); }
.mfood, .na-food, .chip {
  border: 1px solid var(--line); background: var(--panel-2); border-radius: var(--r-sm);
}

/* ---------- Навигация ---------- */
#nav .inner {
  background: rgba(0,0,0,.86); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: 0 -8px 40px rgba(0,0,0,.9);
  backdrop-filter: blur(18px);
}
#nav button {
  font-family: var(--font-label); font-weight: 600;
  letter-spacing: .12em; font-size: .72rem; text-transform: uppercase;
}
#nav button.on { color: var(--volt); }
#nav button.on svg { filter: drop-shadow(0 0 8px rgba(var(--acc-rgb), .8)); }
#nav button.on::before {
  border-radius: 2px; height: 2px; width: 22px; top: 7px;
  background: var(--acc); box-shadow: 0 0 10px rgba(var(--acc-rgb), .9);
}
.sync-badge { border-radius: 50%; border: 1px solid var(--line); }

/* ---------- Листы ---------- */
.sheet {
  background: linear-gradient(180deg, var(--sheen), transparent 40%), var(--ink);
  border: 1px solid var(--line); border-bottom: 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.sheet::before { background: var(--acc); width: 44px; height: 3px; box-shadow: var(--glow-acc-s); }
.overlay { background: rgba(0,0,0,.86); }
.toast {
  border-radius: var(--r-sm); background: var(--ink); color: var(--volt);
  border: 1px solid var(--acc); box-shadow: var(--glow-acc);
}
.toast.with-undo button { background: rgba(var(--acc-rgb), .16); color: var(--volt); border-radius: var(--r-sm); }

/* ---------- Мастер, вход, служебное ---------- */
.ob-dot { border-radius: 2px; height: 3px; background: var(--track); }
.ob-dot.done { background: rgba(var(--acc-rgb), .5); }
.ob-dot.on { background: var(--acc); box-shadow: var(--glow-acc-s); }
.ob-link { border: 1px dashed var(--line); border-radius: var(--r-sm); }
.ob-link:hover { border-color: var(--acc); }
.ob-big { border-left: 1px solid var(--line); position: relative; }
.ob-big::before {
  content: ''; position: absolute; left: 0; top: 14%; bottom: 14%; width: 2px;
  background: var(--acc); box-shadow: 0 0 12px rgba(var(--acc-rgb), .8);
}
.ob-big.ghost::before { background: var(--ag); box-shadow: 0 0 10px rgba(var(--ag-rgb), .4); opacity: .5; }
.ob-sup.on { border-color: var(--acc); box-shadow: var(--glow-acc-s); }

.acc-avatar, .na-ico, .ab-ico, .prog-item .dot {
  border-radius: var(--r-sm); border: 1px solid rgba(var(--acc-rgb), .35);
  background: rgba(var(--acc-rgb), .08); color: var(--volt);
  box-shadow: 0 0 18px rgba(var(--acc-rgb), .18) inset;
}

.warn-box {
  background: rgba(var(--acc-rgb), .05); border: 1px solid rgba(var(--acc-rgb), .22);
  color: var(--acc-3); border-radius: var(--r-sm);
}
.auth-err { border-radius: var(--r-sm); }
.reco-box {
  border: 1px solid var(--acc); box-shadow: var(--glow-acc);
  border-radius: var(--r-md); background: rgba(var(--acc-rgb), .05);
}
.reco-box code { color: var(--volt); text-shadow: 0 0 12px rgba(var(--acc-rgb), .6); }
.ev-badge { border-radius: var(--r-sm); }
.rep-preview { border-radius: var(--r-md); border: 1px solid var(--line); }
.export-box { border-radius: var(--r-sm); }
.ver-line { color: var(--muted-2); }

/* Фоновая подсветка страницы — два ореола, как половины логотипа */
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46% 30% at 12% 4%, rgba(var(--acc-rgb), .07), transparent 70%),
    radial-gradient(46% 30% at 88% 4%, rgba(var(--ag-rgb), .04), transparent 70%);
}

@media (min-width: 1024px) {
  .press:hover { border-color: rgba(var(--acc-rgb), .35); box-shadow: 0 0 26px rgba(var(--acc-rgb), .12); }
  .wcell:hover { border-color: rgba(var(--acc-rgb), .35); }
  #nav button:hover { color: var(--volt); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-mark .lm-node { filter: none; }
}

/* Логотип на экранах входа и мастера */
.auth-card .logo-lockup, .ob-hero .logo-lockup { margin-bottom: 26px; }
.auth-h { text-align: center; }
.auth-card .ob-sub { text-align: center; }
.ob-hero-h { margin-top: 22px; }

/* В доке знак стоит рядом с надписью, без теглайна */
#nav .logo-lockup.inline { gap: 8px; }
#nav .logo-mark { flex: 0 0 auto; }
.nav-logo { display: none; }
@media (min-width: 1024px) {
  .nav-logo { display: block; padding: 4px 12px 20px; }
}
/* На телефоне знак живёт в шапке «Ещё», а не в доке */
.topbar .logo-lockup.inline .lw-1 { font-size: .8rem; }


/* ---------- Узкие карточки: широкий трекинг ломал строки ----------
   Вода и шаги стоят в две колонки, там подписи не помещались
   и «Вода · 1 зап.» переносилось посреди слова. */
.two-col .kicker { font-size: .64rem; letter-spacing: .12em; }
.wc-head { flex-wrap: nowrap; align-items: center; }
.wc-head .kicker { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-head b { white-space: nowrap; font-size: .78rem; flex: 0 0 auto; }
.src-line { line-height: 1.35; }

/* Общий трекинг чуть плотнее: на кириллице .2em расползается */
.kicker, .stat span, .wcell .dw, .ring-wrap .lbl span, .fld > span, .ob-day-name {
  font-size: .7rem; letter-spacing: .16em;
}
.stat span { font-size: .62rem; letter-spacing: .1em; }
.wcell .dw { font-size: .6rem; letter-spacing: .08em; }

/* ============================================================
   НИЖНИЙ ДОК: подписи и индикатор синхронизации
   ------------------------------------------------------------
   На узком экране пять подписей не помещались и слипались
   в одно слово, а значок синхронизации был абсолютно
   спозиционирован поверх кнопки «Ещё» и перекрывал её.
   ============================================================ */
#nav .inner { padding: 0 4px; }
#nav button {
  min-width: 0;                       /* без этого flex-элемент не сжимается */
  padding: 0 3px; gap: 5px;
  overflow: hidden;
}
#nav button svg { flex: 0 0 auto; }
#nav .nl {
  display: block; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.1;
  /* Кегль подбирается под ширину экрана: самое длинное слово —
     «Тренировки», по нему и считаем, чтобы ничего не обрезалось. */
  font-size: .53rem; letter-spacing: 0;
}
@media (max-width: 339px) { #nav .nl { font-size: .48rem; } #nav button { gap: 4px; } }
@media (min-width: 390px) { #nav .nl { font-size: .58rem; letter-spacing: .02em; } }
@media (min-width: 430px) { #nav .nl { font-size: .63rem; letter-spacing: .05em; } }

/* Индикатор синхронизации — отдельная плашка над доком, не в доке */
#sync-badge.sync-badge {
  position: fixed; z-index: 55;
  left: 50%; transform: translateX(-50%);
  bottom: calc(var(--dock-h) + 26px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 7px;
  width: auto; height: auto; padding: 7px 13px;
  border-radius: 999px; border: 1px solid var(--line);
  background: rgba(0,0,0,.92); backdrop-filter: blur(14px);
  font-family: var(--font-label); font-weight: 600;
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
  animation: sb-in .25s ease;
}
@keyframes sb-in { from { opacity: 0; transform: translate(-50%, 8px); } }
#sync-badge.sync-badge[hidden] { display: none; }
#sync-badge i { font-style: normal; font-size: .8rem; line-height: 1; }
#sync-badge.ok   { color: var(--volt); border-color: rgba(var(--acc-rgb), .45); }
#sync-badge.sync { color: var(--muted); }
#sync-badge.sync i { display: inline-block; animation: spin 1.1s linear infinite; }
#sync-badge.off  { color: var(--danger); border-color: rgba(255,77,94,.5); }

/* На десктопе место есть — плашка живёт в сайдбаре и не мигает */
@media (min-width: 1024px) {
  #sync-badge.sync-badge {
    left: 14px; transform: none; bottom: auto; top: 92px;
    animation: none;
  }
  @keyframes sb-in { from { opacity: 1; } }
}

/* Элементы grid по умолчанию не сжимаются уже содержимого (min-width: auto),
   поэтому «— / 20 000» с nowrap распирал колонку и выталкивал страницу
   за экран. Разрешаем сжатие, а на совсем узких экранах ставим в столбик. */
.two-col > * { min-width: 0; }
.two-col .wc-head b { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 344px) { .two-col { grid-template-columns: 1fr; } }

/* ============================================================
   АКТИВНАЯ ВКЛАДКА
   ------------------------------------------------------------
   Логотип держится на трёх приёмах: янтарное свечение,
   вертикальная светящаяся ось и точка-контакт на её конце.
   Активная иконка собрана из них же.
   ============================================================ */
#nav button { position: relative; overflow: visible; }

/* Гнездо под активной иконкой: тусклый янтарный ореол на чёрном */
#nav button::after {
  content: ''; position: absolute; top: 6px; left: 50%;
  width: 40px; height: 40px; margin-left: -20px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--acc-rgb), .22) 0%, rgba(var(--acc-rgb), 0) 70%);
  opacity: 0; transform: scale(.6); transition: opacity .28s, transform .28s;
  pointer-events: none;
}
#nav button.on::after { opacity: 1; transform: scale(1); }

/* Ось логотипа: тонкая светящаяся черта над активной вкладкой */
#nav button.on::before {
  width: 26px; height: 2px; top: 4px; border-radius: 2px;
  background: var(--acc);
  box-shadow: 0 0 10px rgba(var(--acc-rgb), .95), 0 0 22px rgba(var(--acc-rgb), .5);
}

/* Сама иконка: янтарь, свечение и контурная подсветка, как у линий логотипа */
#nav button svg { transition: filter .28s, stroke .28s, transform .28s; }
#nav button.on svg {
  stroke: var(--acc);
  filter: drop-shadow(0 0 6px rgba(var(--acc-rgb), .95))
          drop-shadow(0 0 14px rgba(var(--acc-rgb), .45));
  transform: translateY(-1px);
}
#nav button.on .nl {
  color: var(--volt);
  text-shadow: 0 0 10px rgba(var(--acc-rgb), .55);
}

/* Точка-контакт под подписью — тот же элемент, что на концах дорожек */
#nav button.on .nl::after {
  content: ''; display: block; width: 3px; height: 3px; margin: 3px auto 0;
  border-radius: 50%; background: var(--acc);
  box-shadow: 0 0 6px rgba(var(--acc-rgb), .9);
}

/* Неактивные — приглушённое серебро правой половины логотипа */
#nav button { color: var(--muted-2); }
#nav button svg { stroke: currentColor; }

/* В сайдбаре активная вкладка получает янтарную грань слева,
   как ключевые блоки внутри приложения */
@media (min-width: 1024px) {
  #nav button::after { top: 50%; left: 22px; margin-top: -20px; margin-left: 0; }
  #nav button.on::before {
    width: 2px; height: 60%; top: 20%; left: 0;
    background: linear-gradient(180deg, transparent, var(--acc), transparent);
  }
  #nav button.on {
    background: linear-gradient(90deg, rgba(var(--acc-rgb), .12), rgba(var(--acc-rgb), 0) 70%);
  }
  #nav button.on .nl::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #nav button::after, #nav button svg { transition: none; }
}

/* Размеры логотипа по местам */
.auth-card .logo-full { width: min(230px, 62vw); margin-bottom: 8px; }
.ob-hero .logo-full { width: min(250px, 66vw); }

/* Круглая оправа: тёмное гнездо, янтарная грань и ореол вокруг.
   Без неё знак висел в пустоте и выглядел незакреплённым. */
.logo-badge {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; border-radius: 50%; overflow: hidden; position: relative;
  background: radial-gradient(circle at 50% 38%, rgba(var(--acc-rgb), .12), var(--ink) 72%);
  border: 1px solid rgba(var(--acc-rgb), .34);
  box-shadow: 0 0 20px rgba(var(--acc-rgb), .16), inset 0 0 16px rgba(var(--acc-rgb), .08);
}
/* Тонкий блик по верхней дуге — оправа читается как объём, а не как плоский круг */
.logo-badge::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(180deg, var(--sheen-hi), transparent 45%);
  pointer-events: none;
}
/* Кадр аватара квадратный — заполняем круг целиком, слегка выступая
   за края: так фигура читается, а не тонет в пустой оправе. */
.logo-badge img {
  width: 112%; height: 112%; object-fit: cover; object-position: 50% 44%;
  display: block; filter: drop-shadow(0 0 6px rgba(var(--acc-rgb), .45));
}

.topbar .logo-badge { margin-left: 10px; }
#nav-logo { display: none; }
@media (min-width: 1024px) {
  #nav-logo { display: flex; justify-content: center; padding: 8px 0 20px; }
}

/* ============================================================
   СКРУГЛЕНИЯ — одна шкала на всё приложение
   ------------------------------------------------------------
   Единственное место, где задаётся форма. Раньше таких секций было
   две — эта и ещё одна выше по файлу; поздняя молча отменяла раннюю,
   и потому карточка круглилась, а «.card.tight» рядом с ней оставалась
   квадратной. Плюс в двух файлах ниже лежит 72 объявления
   border-radius: 0 от брутальной версии, и всё, что сюда не попало,
   остаётся с прямыми углами.

   Шкала (styles.css): --r-lg 18px, --r-md 14px, --r-sm 12px,
   --r-pill капсула, 50% круг.
   ============================================================ */

/* Крупные панели */
.card, .card.tight, .sheet, .hero, .na-card, .acc-banner, .tour-card,
.tile, .ob-feat, .ob-big, .reco-box, .import-img, .rep-preview {
  border-radius: var(--r-lg);
}

/* Всё, на что нажимают */
.btn, .icon-btn, .seg, .na-ico, .ab-ico, .prog-item .dot,
.acc-avatar, .avatar, .ob-sup, .stat, .wcell, .export-box,
.add-set-btn, .stepper, .pw-eye, .theme-pick, #nav button {
  border-radius: var(--r-md);
}
/* Вложенное — чуть слабее: внутри рамки с отступом 3px тот же радиус
   выглядит толще родительского. */
.seg button { border-radius: calc(var(--r-md) - 4px); }

/* Поля ввода — той же формы, что кнопки: в листе они стоят вплотную,
   и разница даже в два пикселя читается как небрежность.
   !important — потому что в styles.css у каждого типа input свой
   радиус 0, и без него побеждает он. */
input, select, textarea, .gram-inp {
  border-radius: var(--r-md) !important;
}

/* Плашки-подложки: это не элементы управления, у них своя ступень */
.warn-box, .auth-err, .ob-calc, .ob-link, .fact-row, .mf-row, .ci-cmp {
  border-radius: var(--r-sm) !important;
}

/* Плашки, строки списков, мелкие блоки */
.sup-row, .ex-row, .grp-item, .unit-row, .ocr-raw, .inapp-notice, .mfood, .mf-card,
.wday, .hist-item .day, .picto, .ex-idx, .prev-hint, .qty-add,
.theme-demo, .macro, .month-label, .ci-raw, .pr-line.total {
  border-radius: var(--r-sm);
}

/* Капсулы: чипы, теги, счётчики, мелкие кнопки-пилюли */
.chip, .chip-btn, .na-food, .set-chip, .ev-badge,
.sel-chip, .sync-badge, .toast, .elapsed-pill, .grp-item .cnt,
.ex-cat-item .g, #rest-mini, .sheet-grip, .ob-dot,
.chart-legend .lg::before, #upd-bar { border-radius: var(--r-pill); }
.chip-btn { padding: 8px 16px; }
.na-food { padding: 5px 12px; }

/* Круги */
.tick, .mline i, .logo-badge, .live-dot, .nav-live.on, .theme-dot {
  border-radius: 50%;
}

/* Лист выезжает из края экрана — скруглён только сверху */
.sheet { border-radius: var(--r-lg) var(--r-lg) 0 0; }
@media (min-width: 768px) { .sheet { border-radius: var(--r-lg); } }

/* Полосы прогресса тоже капсулы — иначе на фоне круглых чипов
   их прямые концы читаются как недоделка */
.mbar, .pw-meter, .wcell .wbar, .setbar,
.mbar i, .pw-meter i, .wcell .wbar i, .setbar i,
::-webkit-scrollbar-thumb { border-radius: var(--r-pill); }

/* Рамка фокуса повторяет форму элемента, а не рисует квадрат поверх круга */
:focus-visible { border-radius: inherit; }

/* Намеренно без скругления: .hero::before и .sheet::before — акцентные
   линии в один-два пикселя, скруглять там нечего. */

/* ---------- Контурные иконки ---------- */
.ico-line { display: block; flex: 0 0 auto; }
.tile .ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: var(--r-md);
  color: var(--volt); background: rgba(var(--acc-rgb), .08);
  border: 1px solid rgba(var(--acc-rgb), .22);
  font-size: 0;
}
.empty .big { display: flex; justify-content: center; color: var(--muted-2); opacity: .6; }
.wo-plan .wi, .wo-row .wi, .wcell .wi, .prog-item .dot .ico-line { color: var(--volt); }
.wi { display: inline-flex; align-items: center; }
.na-ico, .ab-ico { display: inline-flex; align-items: center; justify-content: center; }
.hist-item .name .ico-line, .sheet-head h2 .ico-line { display: inline-block; vertical-align: -4px; margin-right: 6px; }
.pw-eye { display: inline-flex; align-items: center; justify-content: center; opacity: .55; }
.pw-eye.on { opacity: 1; color: var(--volt); }
#sync-badge .ico-line { color: inherit; }