/* Общий стиль кабинета. Минимализм и мобильный сначала.
   Правила, которых держимся:
   — один акцентный цвет и только на главном действии;
   — пояснения короткие; длинное прячется в «зачем это»;
   — ничего не уезжает вбок, широкое прокручивается внутри себя;
   — кнопки и поля не ниже 46 пикселей, иначе в них не попасть пальцем;
   — шрифт в полях ровно 16px, иначе Safari на iPhone зумит страницу. */

:root {
  --фон: #101216;
  --карточка: #171a20;
  --рамка: #262b34;
  --текст: #e7eaf0;
  --тихий: #8d95a3;
  --акцент: #ff4d6d;
  --ок: #35c48c;
  --поле: #0d0f13;
  --радиус: 12px;
}

* { box-sizing: border-box; }
/* Скрытое скрыто всегда. Без этого любой display в своём правиле перебивает
   hidden — так чёрное окно просмотра картинки висело поверх переписки. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 28px 18px calc(48px + env(safe-area-inset-bottom));
  background: var(--фон);
  color: var(--текст);
  font: 15px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif;
}

.обёртка { max-width: 640px; margin: 0 auto; }
.узко { max-width: 340px; }

h1 { font-size: 19px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
h2 {
  font-size: 11px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--тихий);
  margin: 28px 0 10px;
}

a { color: inherit; text-decoration-color: var(--рамка); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--тихий); }

p { margin: 8px 0; }
.тихо { color: var(--тихий); font-size: 13px; }
.ошибка { color: var(--акцент); font-size: 14px; }
.удача { color: var(--ок); font-size: 14px; }

/* ── шапка ─────────────────────────────────────────────────────────────── */
.шапка {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; padding-bottom: 14px;
  border-bottom: 1px solid var(--рамка); margin-bottom: 6px;
}
.меню { display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
        font-size: 13px; color: var(--тихий); }
/* Пункты меню — ссылки, и это должно быть видно без наведения */
.меню a { white-space: nowrap; text-decoration: none; color: #7db3ff; }
.меню a:hover { color: #a5cbff; text-decoration: underline; }

/* Ник и поддержка — то, куда ходят чаще всего: кнопками, а не текстом */
.меню a.ник, .меню a.важная {
  padding: 6px 12px; border-radius: 8px; font-weight: 600; font-size: 14px;
}
.меню a.ник {
  color: #fff; background: var(--акцент); border: 1px solid var(--акцент);
}
.меню a.ник:hover { background: #ff6b85; color: #fff; text-decoration: none; }
.меню a.важная {
  color: var(--акцент); border: 1px solid var(--акцент);
  background: rgba(255, 77, 109, .1);
}
.меню a.важная:hover { background: rgba(255, 77, 109, .2); color: var(--акцент);
                       text-decoration: none; }
/* Часы в шапке */
.часы { font-variant-numeric: tabular-nums; color: var(--тихий); }

/* Сколько непрочитанного — цифра рядом с пунктом меню */
.метка {
  display: inline-block; min-width: 18px; padding: 1px 5px; margin-left: 4px;
  border-radius: 9px; background: var(--акцент); color: #fff;
  font-size: 11px; font-weight: 600; text-align: center;
}
.меню form.встроенная button { min-height: 0; padding: 0; background: none;
  color: var(--тихий); font-size: 13px; }
.меню form.встроенная button:hover { color: var(--текст); }

/* ── карточки и строки ─────────────────────────────────────────────────── */
.карточка {
  background: var(--карточка); border: 1px solid var(--рамка);
  border-radius: var(--радиус); padding: 16px;
}
.карточка + .карточка { margin-top: 10px; }

/* Список одинаковых пунктов: разделители вместо отдельных карточек —
   семь карточек подряд читаются как свалка. */
.список { background: var(--карточка); border: 1px solid var(--рамка);
          border-radius: var(--радиус); }
.пункт { padding: 14px 16px; }
.пункт + .пункт { border-top: 1px solid var(--рамка); }
.пункт b { font-weight: 500; }

/* ── поля ──────────────────────────────────────────────────────────────── */
label { display: block; margin: 16px 0 6px; font-size: 13px; color: var(--тихий); }
label:first-child { margin-top: 0; }

input[type=text], input[type=email], input[type=password], select, textarea {
  width: 100%; padding: 11px 12px; border-radius: 10px;
  border: 1px solid var(--рамка); background: var(--поле); color: var(--текст);
  font-size: 16px; min-height: 46px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: #46506a; }
input[readonly] { color: var(--тихий); }

label.галочка {
  display: flex; align-items: center; gap: 12px;
  margin: 0; padding: 13px 0; min-height: 46px; font-size: 15px;
  color: var(--текст); cursor: pointer;
}
label.галочка + label.галочка { border-top: 1px solid var(--рамка); }
label.галочка input { width: 19px; height: 19px; flex: none; accent-color: var(--акцент); }

button, .кнопка {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 11px 16px; border: 1px solid var(--рамка);
  border-radius: 10px; background: transparent; color: var(--текст);
  font-size: 14px; cursor: pointer; text-decoration: none;
}
button:hover, .кнопка:hover { border-color: var(--тихий); }
/* Акцент — только на главном действии страницы */
button.главная, .кнопка.главная {
  background: var(--акцент); border-color: var(--акцент); color: #fff;
}
button:active, .кнопка:active { transform: translateY(1px); }
form > button { margin-top: 18px; }
button.во-всю-ширину { width: 100%; }

.строка { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.между { justify-content: space-between; }
form.встроенная { display: inline; margin: 0; }
form.встроенная button { min-height: 38px; padding: 8px 12px; font-size: 13px; }

/* ── адреса оверлеев ───────────────────────────────────────────────────── */
.адрес {
  flex: 1 1 240px; min-width: 0;
  font-family: Consolas, ui-monospace, monospace; font-size: 12px;
  color: var(--тихий); word-break: break-all;
}

/* «Зачем это» — длинное объяснение, свёрнутое до одной строки */
details { margin-top: 10px; }
summary { color: var(--тихий); font-size: 13px; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "﹀ "; }
details[open] summary::before { content: "﹀ "; opacity: .5; }
details p { color: var(--тихий); font-size: 13px; }

/* ── таблицы ───────────────────────────────────────────────────────────── */
.прокрутка { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 9px 6px; border-bottom: 1px solid var(--рамка);
         vertical-align: top; }
th { color: var(--тихий); font-weight: 500; font-size: 12px; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }

/* ── телефон ───────────────────────────────────────────────────────────── */
@media (max-width: 540px) {
  body { padding: 20px 14px calc(36px + env(safe-area-inset-bottom)); }
  .строка > button, .строка > form.встроенная, .строка > form.встроенная button,
  .строка > a.кнопка { width: 100%; }
  .меню form.встроенная button, .меню form.встроенная { width: auto; }
  .строка { gap: 10px; }
  .адрес { flex: 1 1 100%; }
}