* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
html { overflow-x: clip; } /* не даём компенсаторному сдвигу создавать горизонтальный скролл */
body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  background: #e9edf4;
  color: #1c2333;
  -webkit-font-smoothing: antialiased;
  display: flex;
  justify-content: center; /* белое окно всегда точно по центру экрана */
}

/* Контейнер под мобильное приложение.
   На телефоне — весь экран; на ПК (широкий и высокий экран) —
   прямоугольное «окно телефона» по центру, скролл внутри окна */
.page {
  position: relative;
  width: min(430px, 100vw);
  height: 100dvh;
  overflow-y: auto;
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 30px rgba(10, 20, 40, .08);
}
@media (min-width: 560px) and (min-height: 700px) {
  body { padding: 24px 0; box-sizing: border-box; }
  .page {
    height: min(calc(100vh - 48px), 860px);
    border-radius: 28px;
    box-shadow: 0 18px 60px rgba(10, 20, 40, .20);
  }
}

.topbar { display: flex; align-items: center; gap: 12px; padding: 14px 16px; flex: none; }
.topbar h1 { font-size: 19px; font-weight: 700; }
.back {
  width: 38px; height: 38px; flex: none;
  border: none; background: #f2f4f8; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #1c2333;
}
.back:hover { background: #e7ebf2; }

.content { padding: 8px 20px 28px; flex: 1; }
.muted { color: #5b667a; font-size: 15px; line-height: 1.5; }

/* Кнопки */
.btn {
  display: block; width: 100%;
  border: none; border-radius: 12px;
  padding: 15px 16px;
  font-size: 16px; font-weight: 600;
  cursor: pointer; transition: filter .15s, transform .05s;
  font-family: inherit;
}
.btn:active { transform: scale(.99); }
.btn:hover { filter: brightness(1.05); }
.btn-red { background: #ee3a24; color: #fff; }
.btn-blue { background: #187be2; color: #fff; }
.btn-outline { background: #fff; color: #1c2333; border: 1.5px solid #d8dee9; }
.btn-ghost { background: none; color: #5b667a; font-weight: 500; }
.hidden { display: none; }

/* Поле ввода */
.field {
  display: flex; align-items: center; gap: 6px;
  border: 1.5px solid #d8dee9; border-radius: 12px;
  padding: 0 14px; margin: 10px 0 14px;
  transition: border-color .15s;
}
.field:focus-within { border-color: #187be2; }
.field .prefix { font-size: 16px; color: #5b667a; }
.field input {
  border: none; outline: none; flex: 1;
  padding: 14px 0; font-size: 16px; font-family: inherit;
}
label.lbl { font-size: 14px; color: #5b667a; margin-top: 18px; display: block; }

.error { color: #d22b2b; font-size: 14px; min-height: 20px; margin-top: 10px; }
.link {
  display: inline-block; margin-top: 18px;
  background: none; border: none; cursor: pointer;
  color: #187be2; font-size: 15px; font-family: inherit; padding: 0;
}

/* Личный кабинет: главная, заявка, документы */
.greet { font-size: 21px; font-weight: 700; margin: 4px 0 18px; }
.menu-item {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid #e3e7ee; border-radius: 14px;
  padding: 16px; margin-bottom: 12px;
  background: #fff; cursor: pointer; width: 100%;
  text-align: left; font-family: inherit; transition: border-color .15s;
}
.menu-item:hover { border-color: #187be2; }
.mi-icon {
  width: 40px; height: 40px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.mi-red { background: #fdecea; }
.mi-blue { background: #e8f0fe; }
.mi-green { background: #e6f4ec; }
.menu-item b { display: block; font-size: 15.5px; }
.menu-item small { display: block; color: #5b667a; font-size: 13.5px; margin-top: 3px; }
.chev { margin-left: auto; color: #b7bfcd; flex: none; }
.badge-blue {
  margin-left: auto;
  background: #187be2; color: #fff;
  font-size: 12px; font-weight: 700;
  min-width: 20px; height: 20px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 6px; flex: none;
}

.bottom-nav {
  flex: none; display: flex; justify-content: space-around;
  border-top: 1px solid #e3e7ee; background: #fff;
  padding: 8px 0 max(10px, env(safe-area-inset-bottom));
}
.bn-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: none; cursor: pointer; text-decoration: none;
  font-size: 12px; color: #8a93a6; font-family: inherit; padding: 2px 10px;
}
.bn-item.active { color: #187be2; }

.badge-green {
  display: inline-flex; align-items: center; gap: 8px;
  background: #e6f4ec; color: #1e7a48; font-size: 14px; font-weight: 600;
  border-radius: 10px; padding: 8px 14px; margin: 4px 0 8px;
}
.app-row {
  display: flex; gap: 12px; padding: 13px 0;
  border-bottom: 1px solid #eef1f6; font-size: 15px; line-height: 1.4;
}
.app-row span { color: #5b667a; flex: none; width: 112px; }
.app-row b { font-weight: 600; }

.tabs { display: flex; gap: 14px; border-bottom: 1.5px solid #e3e7ee; margin-bottom: 4px; }
.tab {
  background: none; border: none; font-family: inherit; font-size: 15px;
  color: #5b667a; padding: 10px 2px; cursor: pointer;
  border-bottom: 2.5px solid transparent; margin-bottom: -1.5px;
}
.tab.active { color: #187be2; font-weight: 600; border-bottom-color: #187be2; }
.doc-num { color: #8a93a6; font-size: 13px; margin-top: 2px; display: block; }

/* Экран входа (лендинг) */
.landing { padding: 28px 24px 0; display: flex; flex-direction: column; flex: 1; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-shield { width: 44px; height: 44px; flex: none; }
.brand-text b { font-size: 19px; display: block; }
.brand-text small { font-size: 11.5px; color: #8a93a6; display: block; line-height: 1.3; }
.landing h1 { font-size: 26px; line-height: 1.25; margin-top: 34px; font-weight: 700; }
.lead { color: #5b667a; font-size: 15px; margin: 12px 0 22px; line-height: 1.5; }
.landing .btn { width: 100%; }
.building { margin-top: auto; padding: 20px 0 0; display: flex; justify-content: center; }
.building svg { width: 88%; max-width: 330px; }

/* Код: 6 ячеек */
.timer { color: #5b667a; font-size: 14px; margin: 14px 0 18px; }
.timer b { color: #1c2333; font-variant-numeric: tabular-nums; }
.boxes { display: flex; gap: 8px; justify-content: center; margin-bottom: 20px; }
.boxes input {
  width: 44px; height: 54px;
  text-align: center; font-size: 22px; font-weight: 700;
  border: 1.5px solid #d8dee9; border-radius: 10px;
  outline: none; font-family: inherit;
}
.boxes input:focus { border-color: #187be2; }
.boxes input.filled { border-color: #187be2; background: #f3f8ff; }

/* Toast «SMS» (привязан к окну приложения, а не к краям экрана) */
.toast {
  position: absolute; top: 12px; right: 12px;
  width: min(330px, calc(100% - 24px));
  background: #fff; border-radius: 16px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .22);
  padding: 12px 14px; z-index: 50;
  transform: translateY(-160%);
  transition: transform .45s cubic-bezier(.2, .9, .3, 1.15);
}
/* контент на странице кода сдвигается вниз, чтобы тост не перекрывал текст */
.content.toast-space { transition: padding-top .45s ease; padding-top: 128px !important; }
.toast.show { transform: translateY(0); }
.toast-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sms-ic {
  width: 34px; height: 34px; border-radius: 50%;
  background: #e8f0fe; color: #187be2;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.toast-head b { font-size: 14px; display: block; }
.toast-head small { font-size: 12px; color: #8a93a6; }
.toast-body { font-size: 14px; line-height: 1.45; }
.toast-body .code { font-size: 18px; letter-spacing: 2px; color: #187be2; }

/* Выгрузка документов */
.progress { height: 8px; background: #eef1f6; border-radius: 6px; overflow: hidden; margin: 18px 0 8px; }
.progress .bar { height: 100%; width: 0; background: #187be2; border-radius: 6px; transition: width .6s ease; }
.pct { text-align: right; font-size: 13px; color: #5b667a; font-variant-numeric: tabular-nums; }
.docs { list-style: none; margin-top: 10px; }
.doc {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 2px; border-bottom: 1px solid #eef1f6;
  font-size: 15px;
}
.doc .st { width: 26px; height: 26px; flex: none; display: flex; align-items: center; justify-content: center; }
.spin {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid #d8dee9; border-top-color: #187be2;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.ok {
  width: 20px; height: 20px; border-radius: 50%;
  background: #1e9e5a; color: #fff;
  font-size: 12px; font-weight: 700;
}
.doc.done { color: #5b667a; }
.done-msg { margin-top: 22px; font-size: 15px; color: #1e9e5a; font-weight: 600; text-align: center; }

/* Финальная страница ГосУслуг */
.card { padding: 22px 22px 30px; flex: 1; }
/* Шапка ГосУслуг: логотип + словотип */
.gos { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 6px 0 2px; }
.gos-ic {
  width: 46px; height: 46px; flex: none;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.gos-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gos-word { font-size: 25px; font-weight: 800; color: #187be2; letter-spacing: .3px; }
.card h1 {
  display: flex; align-items: center; gap: 8px;
  font-size: 19px; margin: 20px 0 14px; line-height: 1.35;
}
.card h1 svg { flex: none; color: #e0a800; }
hr.div { border: none; border-top: 1px solid #e3e7ee; margin: 0 0 18px; }
.alert { border-radius: 12px; padding: 14px 16px; font-size: 14.5px; line-height: 1.5; margin-bottom: 16px; }
.alert-danger { background: #fdecea; color: #7a2620; }
.alert-info { background: #eef3fc; color: #2a3b5c; }
.info-title { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 10px; color: #1c2333; }
.detail { font-size: 14.5px; line-height: 1.9; }
.detail b { color: #1c2333; }
.hotline { margin-top: 22px; }
.hotline h2 { font-size: 16px; margin-bottom: 14px; }
/* Две входящие линии: друг под другом, как на оригинале */
.line-grid { display: flex; flex-direction: column; gap: 12px; }
.call-card {
  display: flex; align-items: center; gap: 14px;
  border: 1.5px solid #d8dee9; border-radius: 14px;
  padding: 16px; cursor: pointer; transition: border-color .15s;
  text-decoration: none; color: inherit;
}
.call-card:hover { border-color: #187be2; }
.call-ic {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: #187be2; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.call-card b { font-size: 17px; display: block; color: #187be2; line-height: 1.3; }
.call-card span { font-size: 13px; color: #5b667a; }

/* Уведомления */
.notif {
  border: 1px solid #e3e7ee; border-radius: 14px;
  padding: 16px; margin-bottom: 14px;
}
.notif-head { display: flex; align-items: center; gap: 10px; }
.notif-dot { width: 10px; height: 10px; border-radius: 50%; background: #187be2; flex: none; }
.notif b { font-size: 15.5px; display: block; }
.notif .muted { font-size: 13.5px; margin-top: 6px; }
.notif .btn { margin-top: 14px; padding: 12px; }

/* Админка */
.admin-card { margin-top: 8px; }
.admin-card .field { margin: 8px 0 14px; }
.admin-note { font-size: 13px; color: #8a93a6; margin-top: 14px; line-height: 1.5; }
.saved-msg { color: #1e9e5a; font-size: 14px; font-weight: 600; min-height: 22px; margin-top: 10px; }