/* Кабинет. Телефон первый: крупные строки, нижняя полоса разделов под большой палец. */
:root {
  --фон: #0f1724;
  --карта: #182234;
  --текст: #e8eef7;
  --тише: #9fb0c8;
  --синий: #4a8fe7;
  --рамка: rgba(255,255,255,.07);
}
* { box-sizing: border-box; }
/* display:flex у .вход перебивает атрибут hidden — без этого экран входа висит поверх */
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--фон); color: var(--текст);
  font: 16px/1.45 -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}
h1 { font-size: 20px; margin: 0; }
.тише { color: var(--тише); font-size: 13px; }

/* --- вход --- */
.вход { position: fixed; inset: 0; display: flex; align-items: center;
        justify-content: center; padding: 24px; }
.вход-окно { width: 100%; max-width: 340px; text-align: center; }
.вход-окно input { width: 100%; margin: 18px 0 12px; padding: 14px 16px; font-size: 18px;
                   text-align: center; letter-spacing: 3px; border-radius: 12px;
                   border: 1px solid var(--рамка); background: var(--карта); color: var(--текст); }
.ошибка { color: #ff8a8a; font-size: 14px; min-height: 20px; margin-top: 10px; }

/* --- каркас --- */
.шапка { position: sticky; top: 0; z-index: 5; display: flex; align-items: center;
         justify-content: space-between; gap: 12px; padding: 14px 16px;
         background: var(--фон); border-bottom: 1px solid var(--рамка); }
.экран { display: none; padding: 14px 16px 96px; }
.экран.on { display: block; }

/* --- плитки главной --- */
.плитки { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.плитка { display: flex; align-items: center; justify-content: space-between; gap: 10px;
          padding: 18px 16px; border-radius: 14px; cursor: pointer; text-align: left;
          background: var(--карта); border: 1px solid var(--рамка);
          color: inherit; font: inherit; }
.плитка.новое { border-color: rgba(74,143,231,.55); }
.счёт { min-width: 26px; height: 26px; padding: 0 8px; border-radius: 13px; background: var(--синий);
        color: #fff; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }

/* --- списки --- */
.группа { margin: 18px 0 8px; font-size: 13px; color: var(--тише); text-transform: uppercase;
          letter-spacing: .06em; }
.строка { display: block; padding: 14px; margin-bottom: 10px; border-radius: 12px;
          background: var(--карта); border: 1px solid var(--рамка);
          color: inherit; text-decoration: none; }
.строка-верх { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.строка.закрыт { opacity: .55; }
.ярлык { font-size: 12px; color: var(--тише); border: 1px solid var(--рамка);
         border-radius: 20px; padding: 1px 10px; white-space: nowrap; }
.разбор { margin-top: 8px; }
.ответ { margin-top: 10px; font-size: 14px; color: var(--тише); }
.ответ-поле { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.ответ-поле textarea { width: 100%; padding: 10px 12px; border-radius: 10px; resize: vertical;
                       border: 1px solid var(--рамка); background: #101a2a; color: var(--текст);
                       font: inherit; }
.пусто { padding: 24px 4px; color: var(--тише); }

/* --- кнопки --- */
.кнопка { padding: 12px 16px; border-radius: 12px; border: 1px solid var(--рамка);
          background: var(--синий); color: #fff; font: inherit; cursor: pointer; }
.кнопка.тонкая { background: transparent; color: var(--тише); padding: 8px 12px; font-size: 14px; }
.главная-кнопка { width: 100%; }

/* --- нижняя полоса разделов --- */
.низ { position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: 2px;
       padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
       background: rgba(15,23,36,.96); border-top: 1px solid var(--рамка);
       backdrop-filter: blur(8px); }
.низ-пункт { position: relative; flex: 1; padding: 10px 4px; border: 0; border-radius: 10px;
             background: transparent; color: var(--тише); font: inherit; font-size: 13px;
             cursor: pointer; }
.низ-пункт.on { color: var(--текст); background: rgba(74,143,231,.16); }
.точка { position: absolute; top: 2px; right: 8px; min-width: 16px; height: 16px; padding: 0 4px;
         border-radius: 8px; background: var(--синий); color: #fff; font-size: 11px;
         line-height: 16px; }

/* Счётчик у заголовка раздела: видно, сколько уведомлений висит, пока не нажал «Прочитано» */
h1 { display: flex; align-items: center; gap: 8px; }
.загл-счёт { min-width: 24px; height: 24px; padding: 0 8px; border-radius: 12px;
             background: var(--синий); color: #fff; font-size: 13px; font-weight: 600;
             display: inline-flex; align-items: center; justify-content: center; }
.шапка-кнопки { display: flex; gap: 6px; }