/* Розділ «Акаунт».
   ═══════════════════════════════════════════════════════════════════════
   Класи полів (`.fld`, `.ac-seg`) визначені ТУТ, а не взяті зі спільного
   шару: у застосунку такого шару для форм немає — є `.inp` і десяток
   локальних розкладок на кожен розділ. Заводити глобальні `.fld`/`.seg`
   заради одного екрана означало б претендувати на імена, які завтра
   знадобляться комусь іншому, тому все, крім `.inp`, під префіксом або
   всередині `.ac-fields`. */

.ac-panel{ padding: 22px 24px 20px; margin-bottom: 16px; }
.ac-head h2{ margin: 0 0 4px; font-size: 17px; letter-spacing: -.01em; }
.ac-head p{ margin: 0 0 18px; font-size:  var(--fs-13); max-width: 66ch; }

.ac-note{
  margin: 0 0 16px; padding: 12px 16px;
  border: 1px solid var(--border); border-left: 2px solid var(--warn);
  border-radius: var(--radius-sm); background: var(--panel);
  color: var(--text-dim); font: 500 var(--fs-13)/1.55 var(--sans);
}
.ac-note code{ font: 600 var(--fs-12)/1 var(--mono); color: var(--text); }

/* ── профіль ─────────────────────────────────────────────────────────── */
.ac-id{ display: grid; gap: 26px; grid-template-columns: auto minmax(0, 1fr);
  align-items: start; }
.ac-av-wrap{ display: flex; flex-direction: column; gap: var(--sp-10); align-items: center; }
.ac-av{
  width: 92px; height: 92px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-brand); color: var(--on-brand);
  font: 700 30px/1 var(--sans); flex: none;
}
.ac-av img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.ac-av-acts{ display: flex; flex-direction: column; gap: var(--sp-6); align-items: center; }
/* `<label for>` виглядає кнопкою, але нею не є — курсор про це не знає. */
.ac-av-acts label.btn{ cursor: pointer; }
.ac-av-hint{ font-size:  var(--fs-11); text-align: center; max-width: 150px; }

.ac-fields{ display: grid; gap: var(--sp-16); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ac-fields-narrow{ grid-template-columns: repeat(2, minmax(0, 260px)); }
.ac-fields .fld{ display: flex; flex-direction: column; gap: var(--sp-6); min-width: 0; }
.ac-fields .fld-k{
  font: 600 var(--fs-11)/1 var(--sans);color: var(--text-mute);
}
.ac-fields .fld-hint{ font: 500 var(--fs-11)/1.5 var(--sans); color: var(--text-mute); }
.ac-fields .inp[readonly]{ opacity: .72; cursor: default; }

/* ── перемикач мови ──────────────────────────────────────────────────── */
.ac-seg{
  display: inline-flex; padding: 3px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--border); width: max-content;
}
.ac-seg-b{
  padding: 7px 14px; border: none; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--text-mute);
  font: 600 var(--fs-12)/1 var(--sans); transition: var(--t-fast) var(--ease);
}
.ac-seg-b:hover{ color: var(--text); }
.ac-seg-b.on{ background: var(--brand-ink); color: var(--on-brand); }

/* ── тариф ───────────────────────────────────────────────────────────── */
.ac-stats{ display: grid; gap: 1px; background: var(--border-soft);
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  overflow: hidden; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ac-stat{ background: var(--panel); padding: 16px 18px; }
.ac-stat .k{ display: block; font: 600 var(--fs-11)/1 var(--sans);color: var(--text-mute); margin-bottom: 10px; }
/* Число моно з табличними цифрами: воно оновлюється, і пропорційний шрифт
   змушував би сусідні елементи посмикуватись на кожній зміні. */
.ac-stat .v{ font: 700 26px/1 var(--mono); color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ac-stat .t{ margin-top: 8px; font: 500 var(--fs-12)/1.4 var(--sans); color: var(--text-mute); }

/* ── підвал блоку ────────────────────────────────────────────────────── */
.ac-foot{ display: flex; align-items: center; gap: var(--sp-12); margin-top: 20px;
  flex-wrap: wrap; }
.ac-foot .muted{ font-size:  var(--fs-12); }

/* ── адаптив ─────────────────────────────────────────────────────────── */
@media (max-width: 900px){
  .ac-fields, .ac-fields-narrow{ grid-template-columns: 1fr; }
  .ac-stats{ grid-template-columns: 1fr; }
}
@media (max-width: 620px){
  /* Аватарка над полями, а не збоку: у колонці 320px вона з'їдала третину
     ширини рядка вводу. */
  .ac-id{ grid-template-columns: 1fr; gap: 18px; }
  .ac-av-wrap{ flex-direction: row; align-items: center; gap: var(--sp-14); }
  .ac-av{ width: 64px; height: 64px; font-size: 22px; }
  .ac-av-acts{ align-items: flex-start; }
  .ac-av-hint{ text-align: left; max-width: none; }
}

/* ═══ ОГЛЯД: увага й найближчі публікації ══════════════════════════════
   Живуть у цьому ж файлі, а не в core/: це нові блоки 2026-08-09, і
   тримати їх окремо від законсервованого каскаду простіше — прибрати
   один рядок у index.html повертає попередній вигляд обох розділів. */

/* ── що потребує уваги ───────────────────────────────────────────────── */
.ov-attn{ display: grid; gap: var(--sp-10); margin: 0 0 20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ov-attn-card{
  display: flex; align-items: center; gap: var(--sp-12); width: 100%;
  padding: 14px 16px; text-align: left; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--panel); color: var(--text-dim);
  transition: var(--t-fast) var(--ease);
}
.ov-attn-card:hover{ border-color: var(--border-hover); background: var(--panel-2);
  transform: translateY(-1px); }
/* Смуга ліворуч, а не заливка картки: чотири кольорові прямокутники поруч
   читаються як тривога навіть тоді, коли жоден із них не терміновий. */
.ov-attn-card{ border-left-width: 2px; }
.ov-attn-card.info{ border-left-color: var(--brand-ink); }
.ov-attn-card.warn{ border-left-color: var(--warn); }
.ov-attn-card.bad{ border-left-color: var(--danger); }
.oa-ic{ width: 18px; height: 18px; flex: none; display: flex;
  align-items: center; justify-content: center; color: var(--text-mute); }
.oa-ic svg{ width: 18px; height: 18px; }
.ov-attn-card.warn .oa-ic{ color: var(--warn); }
.ov-attn-card.bad .oa-ic{ color: var(--danger); }
.ov-attn-card.info .oa-ic{ color: var(--brand-ink); }
.oa-txt{ display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.oa-txt b{ font: 600 var(--fs-13)/1.3 var(--sans); color: var(--text); }
.oa-txt span{ font: 500 var(--fs-12)/1.4 var(--sans); color: var(--text-mute); }
.oa-n{ flex: none; font: 700 20px/1 var(--mono); color: var(--text);
  font-variant-numeric: tabular-nums; }

/* ── найближчі публікації ────────────────────────────────────────────── */
.ov-next{ display: grid; gap: 1px; margin-bottom: 24px;
  background: var(--border-soft); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); overflow: hidden; }
.ov-next-row{
  display: flex; align-items: center; gap: var(--sp-14); width: 100%;
  padding: 11px 16px; text-align: left; cursor: pointer; border: none;
  background: var(--panel); color: var(--text-dim);
  transition: var(--t-fast) var(--ease);
}
.ov-next-row:hover{ background: var(--panel-2); color: var(--text); }
/* Час моно й фіксованої ширини: рядки мусять читатись колонкою, а не
   стрибати залежно від довжини назви місяця. */
.onx-when{ flex: none; width: 120px; font: 600 var(--fs-12)/1 var(--mono);
  color: var(--text-mute); font-variant-numeric: tabular-nums; }
.onx-nets{ flex: none; display: flex; gap: 5px; align-items: center;
  color: var(--text-mute); }
.onx-nets svg{ width: 15px; height: 15px; }
.onx-txt{ flex: 1; min-width: 0; font: 500 var(--fs-13)/1.4 var(--sans);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 620px){
  .onx-when{ width: 84px; font-size:  var(--fs-11); }
  .ov-attn{ grid-template-columns: 1fr; }
}

/* ═══ ДЗВІНОК: смуга «що потребує уваги» ══════════════════════════════
   Повернуто з прибраного «Огляду» (2026-08-10) і стоїть НАД стрічкою
   подій, а не всередині неї: це різні речі. Стан відповідає на «що
   робити зараз» і зникає, коли питання закрите; подія лишається
   назавжди й каже «що вже сталося».

   Візуально картки цитують ті самі кольорові смуги ліворуч, що були в
   «Огляді»: заливка всієї картки з чотирьох поруч читається як тривога
   навіть тоді, коли жодна не термінова. */
.bell-attn{ display: grid; gap: var(--sp-8); padding: 12px 14px 4px; }
.bell-attn-card{
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 11px 13px; text-align: left; cursor: pointer;
  border: 1px solid var(--border); border-left-width: 2px;
  border-radius: var(--radius-sm);
  background: var(--panel-2); color: var(--text-dim);
  transition: var(--t-fast) var(--ease);
}
.bell-attn-card:hover{ border-color: var(--border-hover); color: var(--text); }
.bell-attn-card.info{ border-left-color: var(--brand-ink); }
.bell-attn-card.warn{ border-left-color: var(--warn); }
.bell-attn-card.bad{ border-left-color: var(--danger); }
.ba-ic{ width: 17px; height: 17px; flex: none; display: flex;
  align-items: center; justify-content: center; color: var(--text-mute); }
.ba-ic svg{ width: 17px; height: 17px; }
.bell-attn-card.warn .ba-ic{ color: var(--warn); }
.bell-attn-card.bad .ba-ic{ color: var(--danger); }
.bell-attn-card.info .ba-ic{ color: var(--brand-ink); }
.ba-txt{ display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; flex: 1; }
.ba-txt b{ font: 600 var(--fs-13)/1.3 var(--sans); color: var(--text); }
.ba-txt span{ font: 500 var(--fs-11)/1.4 var(--sans); color: var(--text-mute); }
.ba-n{ flex: none; font: 700 17px/1 var(--mono); color: var(--text);
  font-variant-numeric: tabular-nums; }