@font-face {
  font-family: "TT Bluescreens Pro Normal";
  src: url("../assets/fonts/TT_Bluescreens_Pro_Normal_Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: optional;
}

@font-face {
  font-family: "TT Bluescreens Pro Normal";
  src: url("../assets/fonts/TT_Bluescreens_Pro_Normal_Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: optional;
}

@font-face {
  font-family: "TT Bluescreens Pro Normal";
  src: url("../assets/fonts/TT_Bluescreens_Pro_Normal_Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: optional;
}

@font-face {
  font-family: "TT Bluescreens Pro Expanded";
  src: url("../assets/fonts/TT_Bluescreens_Pro_Expanded_Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: optional;
}

@font-face {
  font-family: "TT Bluescreens Pro Expanded";
  src: url("../assets/fonts/TT_Bluescreens_Pro_Expanded_Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: optional;
}

@font-face {
  font-family: "TT Bluescreens Pro Expanded";
  src: url("../assets/fonts/TT_Bluescreens_Pro_Expanded_Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: optional;
}

:root {
  --font-body: "TT Bluescreens Pro Expanded", Arial, sans-serif;
  --font-heading: "TT Bluescreens Pro Normal", Arial, sans-serif;
  --border: #d8e2eb;
  --info-bg: #e8f2ff;
  --green-dark: #0a8f2d;
  --bg: #f2f5f7;
  --card: #ffffff;
  --text: #162d50;
  --muted: #60718b;
  --blue: #0078af;
  --blue-dark: #00326e;
  --green: #4baf46;
  --green-bg: #ebf0d7;
  --sky: #0078af;
  --sky-bg: #e8f2ff;
  --purple: #0078af;
  --purple-bg: #e8f2ff;
  --red: #f04f4f;
  --red-bg: #fff0f0;
  --yellow: #d89b26;
  --yellow-bg: #fff7e6;
  --shadow: 0 6px 18px rgba(23, 54, 79, .07);
  --radius: 12px;
  --radius-small: 8px;
  --surface-border: 1px solid rgba(0, 50, 110, .06);
  --app-width: 460px;
  --sheet-top-gap: calc(16px + env(safe-area-inset-top));
  --sheet-max-height: calc(100dvh - var(--sheet-top-gap));
  --sheet-radius: 24px;
  --sheet-shadow: 0 -12px 36px rgba(8, 30, 48, .18);
  --page-gutter: 16px;
  --motion-fast: 160ms;
  --motion-base: 340ms;
  --motion-slow: 560ms;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }

html.auth-pending body { visibility: hidden; }

/* Keep the app viewport fixed while retaining touch scrolling. */
html, body { touch-action: pan-x pan-y; }
@supports (-webkit-touch-callout: none) {
  /* iPhone otherwise zooms the page when focusing smaller form controls. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea, select { font-size: max(16px, 1em) !important; }
}

html,
body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "TT Bluescreens Pro Expanded", Arial, sans-serif;
}

button,
a,
input,
textarea { font: inherit; }

button { -webkit-tap-highlight-color: transparent; }

input[type="search"] { min-width: 0; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
body .search-clear { display: grid; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; place-items: center; border: 0; border-radius: var(--radius-small); background: transparent; color: var(--blue); cursor: pointer; }
body .search-clear[hidden] { display: none; }
body .search-clear svg.zn-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; }
body .search-clear:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

body {
  display: flex;
  justify-content: center;
}

.app {
  position: relative;
  width: min(100%, var(--app-width));
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: calc(94px + env(safe-area-inset-bottom));
  background: var(--bg);
}

.top-wrap {
  padding: calc(12px + env(safe-area-inset-top)) var(--page-gutter) 10px;
}

.topbar {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 64px;
  padding: 0 14px;
  border: 1px solid rgba(0, 50, 110, .07);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}

.top-click {
  position: relative;
  display: grid;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: var(--radius-small);
  background: transparent;
  color: var(--blue-dark);
  cursor: pointer;
  text-decoration: none;
}

.top-click:active,
.nav-item:active {
  transform: scale(.96);
  background: #eef5f8;
}

.top-click,
.nav-item {
  transition: transform var(--motion-fast) var(--motion-ease),
    background-color var(--motion-fast) ease,
    color var(--motion-fast) ease;
}

.top-click:focus-visible,
.nav-item:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.top-click.logo {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  padding: 0 12px 0 0;
  overflow: hidden;
}

/* The SVG has 100 units of transparent left margin in a 1491.97-unit viewBox. */
.top-click.logo .brand-logo { transform: translateX(-6.70255%); }

.brand-logo {
  display: block;
  width: min(192px, 100%);
  height: 34px;
  object-fit: contain;
  object-position: left center;
}

.top-click.bell {
  flex: 0 0 44px;
  margin-left: auto;
}

.top-click.bell svg {
  width: 23px;
  height: 23px;
}

.notification-badge {
  position: absolute;
  top: 3px;
  right: 1px;
  min-width: 19px;
  height: 19px;
  padding: 0 4px;
  border: 2px solid #fff;
  border-radius: var(--radius-small);
  background: #e84949;
  color: #fff;
  font-family: "TT Bluescreens Pro Expanded", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 15px;
}

.top-click.avatar { flex: 0 0 50px; justify-items: end; }

.avatar-circle {
  display: block;
  width: 40px;
  height: 40px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #edf1f5;
  box-shadow: 0 0 0 1px rgba(0, 50, 110, .12);
  overflow: hidden;
  clip-path: circle(50% at 50% 50%);
}

.avatar-circle img {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  object-fit: cover;
  object-position: 50% 50%;
  transition: opacity .38s ease;
}

.avatar-circle img.is-loaded { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .avatar-circle img { transition: none; }
}

main { padding: 6px var(--page-gutter) 22px; }

.page-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  margin: 2px 0 18px;
  gap: 10px;
}

.page-head h1 {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  color: var(--blue-dark);
  font-size: 26px;
  line-height: 1.05;
  text-align: left;
}

.page-head > h1 ~ :last-child:not(.page-head-spacer) { grid-column: 2; grid-row: 1; justify-self: end; }

.round-control {
  position: relative;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow);
  color: var(--blue-dark);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--motion-base) var(--motion-ease), box-shadow var(--motion-base) ease;
}

.round-control:active { transform: scale(.94); box-shadow: 0 4px 12px rgba(0, 25, 70, .09); }
.round-control svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.page-head-spacer { display: none; }

.floating-back {
  font-size: 24px;
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  left: max(var(--page-gutter), calc(50% - 230px + var(--page-gutter)));
  z-index: 55;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-10px) scale(.92);
  box-shadow: 0 8px 24px rgba(18, 46, 70, .16);
  transition: opacity var(--motion-fast) ease, transform var(--motion-base) var(--motion-ease);
}
.floating-back.is-visible { opacity: 1; pointer-events: auto; transform: translateX(0) scale(1); }

.card {
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: min(100%, var(--app-width));
  min-height: 78px;
  padding: 7px 8px max(10px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  border-top: 1px solid rgba(0, 50, 110, .10);
  border-radius: 18px 18px 0 0;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 -7px 22px rgba(0, 25, 70, .08);
  backdrop-filter: blur(16px);
}
body.embedded-page > .bottom-nav { display: none !important; }
.bottom-nav:has(> .nav-item.problem[hidden]) { grid-template-columns: repeat(4, 1fr); }
.nav-item[hidden] { display: none; }
#accountTitle { -webkit-tap-highlight-color: transparent; user-select: none; }

.bottom-nav::after {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: 40px;
  background: #fff;
  content: "";
}

.nav-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 50px;
  padding: 4px 2px 2px;
  gap: 3px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  text-decoration: none;
}

.nav-item svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--motion-base) var(--motion-ease);
}

.nav-item span {
  font-size: 13px;
  white-space: nowrap;
}

.nav-item.active {
  color: var(--blue-dark);
  font-weight: 700;
}

.nav-item.active svg { transform: translateY(-1px) scale(1.06); }

.nav-item.active::before {
  position: absolute;
  top: -7px;
  width: 30px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--green);
  content: "";
}

.nav-item.problem { color: var(--red); }
.nav-item.problem.active { color: #d92f2f; }

.toast {
  position: fixed;
  bottom: 105px;
  left: 50%;
  z-index: 70;
  max-width: calc(100% - 40px);
  padding: 11px 15px;
  transform: translate(-50%, 20px);
  border-radius: var(--radius-small);
  background: var(--blue-dark);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
  color: #fff;
  font-size: 13px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: .22s ease;
}

.toast.show {
  transform: translate(-50%, 0);
  opacity: 1;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(25, 40, 54, calc(.36 - var(--swipe-fade, 0)));
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--motion-base) ease, visibility 0s linear var(--motion-base);
}

.modal.open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.sheet {
  width: min(100%, var(--app-width));
  padding: 12px 16px calc(18px + env(safe-area-inset-bottom));
  border-radius: 24px 24px 0 0;
  background: #fff;
  box-shadow: 0 -20px 45px rgba(0, 0, 0, .18);
  transform: translateY(28px);
  transition: transform 300ms var(--motion-ease);
}

.modal.open .sheet { transform: translateY(0); }

.account-modal {
  position: fixed;
  inset: 0;
  z-index: 88;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(15, 31, 46, calc(.42 - var(--swipe-fade, 0)));
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--motion-base) ease, visibility 0s linear var(--motion-base);
}

.account-modal.open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* ---------- Sheet ---------- */

.account-sheet {
  position: relative;
  width: min(100%, var(--app-width));
  max-width: 100%;
  max-height: calc(100dvh - env(safe-area-inset-top));
  padding: 12px 24px calc(24px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 24px 24px 0 0;
  outline: none;
  background: #fff;
  box-shadow: 0 -20px 45px rgba(0, 0, 0, .18);
  color: var(--text, #16232f);
  font-family: var(--font-body, inherit);
  font-size: 16px;
  line-height: 1.45;
  text-align: center;
  transform: translateY(28px);
  transition: transform 300ms var(--motion-ease);
}

.account-modal.open .account-sheet { transform: translateY(0); }

/* ---------- Close ---------- */

.account-close {
  position: absolute;
  top: 14px;
  right: 16px;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #eef3f6;
  color: var(--blue-dark, #1c3d5a);
  cursor: pointer;
  transition: background var(--motion-base) ease;
}

.account-close:hover { background: #e2ebf1; }

.account-close svg,
.account-logout svg,
.account-delete svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Шапка профиля ---------- */

.account-sheet > img {
  display: block;
  width: 80px;
  height: 80px;
  margin: 16px auto 0;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 4px #eef3f6;
}

.account-sheet h2 {
  margin: 14px 0 4px;
  color: var(--text, #16232f);
  font-family: var(--font-heading, inherit);
  font-size: 20px;
  line-height: 1.25;
}

#accountJob,
.account-sheet p {
  margin: 0;
  color: var(--muted, #7e8793);
  font-family: var(--font-body, inherit);
  font-size: 15px;
  line-height: 1.4;
}

/* ---------- Секции данных ---------- */

.account-data {
  margin: 20px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--border, #e3e9ef);
  border-radius: 16px;
  background: #f7fafc;
  text-align: left;
}

.account-data + .account-data { margin-top: 12px; }

 .account-data h3 {
  margin: 0 0 6px;
  color: var(--blue-dark, #1c3d5a);
  font-family: var(--font-heading, inherit);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .015em;
}

.account-data dl { margin: 0; }

/* label над value, без двух колонок */

.account-data dl div { padding: 8px 0 0; }
.account-data dl div:not([hidden]) ~ div:not([hidden]) {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.account-data dt,
.account-data dd {
  margin: 0;
  font-family: var(--font-body, inherit);
}

.account-push-enable {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-top: 14px;
  padding: 11px 16px;
  border: 1px solid var(--blue);
  border-radius: var(--radius-small);
  background: var(--blue);
  color: #fff;
  font-family: var(--font-body, inherit);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast);
}

.account-push-enable:hover { border-color: var(--blue-dark); background: var(--blue-dark); }
.account-push-enable:active { transform: scale(.98); }
.account-push-enable:focus-visible { outline: 2px solid var(--blue-dark); outline-offset: 3px; }
.account-push-enable:disabled { opacity: .6; cursor: wait; }

dialog.pwa-push-welcome {
  box-sizing: border-box;
  width: min(360px, calc(100vw - 32px));
  margin: auto;
  padding: 26px 22px 22px;
  border: 1px solid var(--border, #e3e9ef);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(15, 31, 46, .28);
  background: #fff;
  color: var(--text, #16232f);
}

dialog.pwa-push-welcome::backdrop { background: rgba(15, 31, 46, .45); }
dialog.pwa-push-welcome h2 { margin: 0 0 8px; font-family: var(--font-heading, inherit); font-size: 20px; line-height: 1.25; }
dialog.pwa-push-welcome p { margin: 0; color: var(--muted, #7e8793); font-family: var(--font-body, inherit); font-size: 15px; line-height: 1.45; }
.pwa-push-welcome-actions { display: flex; gap: 10px; margin-top: 20px; }
.pwa-push-welcome-actions button { flex: 1; min-height: 46px; padding: 0 14px; border: 1px solid var(--border, #e3e9ef); border-radius: var(--radius-small); background: #fff; color: var(--blue-dark, #1c3d5a); font: 700 15px/1.2 var(--font-body, inherit); cursor: pointer; }
.pwa-push-welcome-actions button:last-child { border-color: var(--blue); background: var(--blue); color: #fff; }
.pwa-push-welcome-actions button:focus-visible { outline: 2px solid var(--blue-dark); outline-offset: 3px; }

.account-data dt {
  margin-bottom: 3px;
  color: var(--muted, #7e8793);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .02em;
}

.account-data dd {
  color: var(--text, #16232f);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* ---------- Действия ---------- */

.account-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-top: 20px;
  gap: 8px;
  border: 1px solid #e5b8b8;
  border-radius: var(--radius-small, 12px);
  background: #fff4f4;
  color: #bd3535;
  font-family: var(--font-body, inherit);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--motion-base) ease;
}

.account-logout:hover { background: #ffecec; }

.account-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 6px auto 0;
  padding: 0 16px;
  gap: 6px;
  border: 0;
  border-radius: var(--radius-small, 12px);
  background: transparent;
  color: #bd3535;
  font-family: var(--font-body, inherit);
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(189, 53, 53, .35);
  text-underline-offset: 3px;
  cursor: pointer;
  transition: background var(--motion-base) ease, text-decoration-color var(--motion-base) ease;
}

.account-delete:hover {
  background: #fff4f4;
  text-decoration-color: currentColor;
}

/* ---------- Диалог удаления (native dialog) ---------- */

.account-delete-dialog {
  width: min(340px, calc(100vw - 32px));
  padding: 22px 20px 18px;
  border: 0;
  border-radius: 20px;
  background: #fff;
  color: var(--text, #16232f);
  font-family: var(--font-body, inherit);
  font-size: 15px;
  text-align: left;
  box-shadow: 0 24px 60px rgba(15, 31, 46, .28);
}

.account-delete-dialog::backdrop {
  background: rgba(15, 31, 46, .45);
}

.account-delete-dialog[open] {
  animation: account-dialog-in 220ms var(--motion-ease, ease);
}

@keyframes account-dialog-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.account-delete-dialog h2 {
  margin: 0 0 8px;
  font-family: var(--font-heading, inherit);
  font-size: 18px;
  line-height: 1.3;
}

.account-delete-dialog p {
  margin: 0;
  color: var(--muted, #7e8793);
  line-height: 1.5;
}

.account-delete-dialog form,
.account-delete-dialog .account-delete-actions {
  display: flex;
  margin-top: 18px;
  gap: 10px;
}

.account-delete-dialog button {
  flex: 1;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--border, #e3e9ef);
  border-radius: var(--radius-small, 12px);
  background: #f1f5f8;
  color: var(--blue-dark, #1c3d5a);
  font-family: var(--font-body, inherit);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--motion-base) ease, border-color var(--motion-base) ease;
}

.account-delete-dialog button:hover { background: #e6edf3; }

.account-delete-dialog button:last-child {
  border-color: #e5b8b8;
  background: #fff4f4;
  color: #bd3535;
}

.account-delete-dialog button:last-child:hover { background: #ffecec; }

/* ---------- Доступность ---------- */

.account-close:focus-visible,
.account-logout:focus-visible,
.account-delete:focus-visible,
.account-delete-dialog button:focus-visible {
  outline: 2px solid var(--blue-dark, #1c3d5a);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .account-delete-dialog[open] { animation: none; }
}

.account-delete-dialog button:disabled { opacity: .55; cursor: wait; }
#accountDeleteError { margin-top: 12px; color: #bd3535; }

.account-endpoint {
  display: flex;
  align-items: flex-start;
  padding: 12px 14px;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: #f7fafc;
  cursor: pointer;
}

.account-endpoint:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 120, 175, .13);
}

.account-endpoint-icon {
  display: grid;
  flex: none;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: var(--radius-small);
  background: #e6f2f8;
  color: var(--blue);
}

.account-endpoint-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.account-endpoint-body {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 2px;
  font-family: "TT Bluescreens Pro Expanded", Arial, sans-serif;
}

.account-endpoint-title {
  color: var(--blue-dark);
  font-size: 13px;
  font-weight: 700;
}

.account-endpoint select {
  width: 100%;
  min-height: 28px;
  padding: 0 24px 0 0;
  border: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300326e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right center / 18px no-repeat;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  outline: none;
  appearance: none;
  cursor: pointer;
}

.account-endpoint small {
  color: #7e8793;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.account-sheet .account-endpoint-hint {
  margin: 8px 2px 0;
  font-size: 12px;
  text-align: left;
}

.account-data + .account-logout { margin-top: 20px; }
.account-data + .account-data + .account-logout { margin-top: 4px; }

.profile-open { overflow: hidden; }

.employee-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: calc(88px + env(safe-area-inset-top)) var(--page-gutter) 20px;
  overflow-y: auto;
  background: rgba(15, 31, 46, calc(.44 - var(--swipe-fade, 0)));
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--motion-base) ease, visibility 0s linear var(--motion-base);
}

.employee-modal.open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.employee-card {
  position: relative;
  width: min(100%, 420px);
  padding: 24px 20px 20px;
  border: var(--surface-border);
  border-radius: var(--radius);
  outline: none;
  background: #fff;
  box-shadow: 0 24px 70px rgba(8, 30, 48, .26);
  text-align: center;
  transform: translateY(-22px) scale(.97);
  transition: transform 480ms var(--motion-ease);
}
.swipe-dismiss-surface.is-swipe-dragging { transition: none !important; user-select: none; }
.swipe-dismiss-surface.is-swipe-returning { transition: transform 240ms var(--motion-ease) !important; }

.employee-modal.open .employee-card { transform: translateY(0) scale(1); }

.employee-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #f0f3f5;
  color: #536476;
  cursor: pointer;
}

.employee-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.employee-card [hidden] { display: none; }
.employee-identity { padding: 2px 28px 20px; }
.employee-photo-wrap { display: block; width: 88px; height: 88px; margin-inline: auto; border: 4px solid #eef6f1; border-radius: 50%; background: #edf1f5; overflow: hidden; }
.employee-photo-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.employee-card h2 { margin: 13px 0 4px; color: var(--blue-dark); font-size: 23px; font-weight: 500; line-height: 1.25; }
.employee-identity > p { margin: 0 auto; max-width: 310px; color: var(--muted); font-family: "TT Bluescreens Pro Expanded", Arial, sans-serif; font-size: 15px; line-height: 1.35; }
.employee-data-section { margin: 0; padding: 15px 0 0; border-top: 1px solid var(--border); text-align: left; }
.employee-data-section + .employee-data-section { margin-top: 12px; }
.employee-data-section h3 { margin: 0 0 9px; color: var(--green); font-family: var(--font-heading); font-size: 13px; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; }
.employee-status-section { margin-top: 12px; text-align: center; }
.employee-status { --employee-status-color: #5b6e82; --employee-status-bg: #f1f4f7; --employee-status-border: #d6dfe6; margin: 0; font-size: 14px; line-height: 1.3; }
.employee-status-title { display: inline-block; max-width: 100%; box-sizing: border-box; padding: 3px 8px; border: 1px solid var(--employee-status-border); border-radius: 6px; background: var(--employee-status-bg); color: var(--employee-status-color); font-size: 15px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.employee-status-meta { display: block; margin-top: 3px; color: #718094; font-family: "TT Bluescreens Pro Expanded", Arial, sans-serif; font-size: 12px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.employee-status-meta[hidden] { display: none; }
.employee-status--present { --employee-status-color: #147b3e; --employee-status-bg: #edf8ef; --employee-status-border: #bfe3c5; }
.employee-status--remote { --employee-status-color: #176e49; --employee-status-bg: #edf8f1; --employee-status-border: #c2e2ce; }
.employee-status--vacation, .employee-status--absence, .employee-status--sick { --employee-status-color: #ba3546; --employee-status-bg: #fdf0f2; --employee-status-border: #efc8cf; }
.employee-status--trip { --employee-status-color: #c96c16; --employee-status-bg: #fff5e9; --employee-status-border: #f3d5b7; }
.employee-status--loading { --employee-status-color: #5d748a; }
.employee-status--unavailable { --employee-status-color: #69788a; }
.employee-status--loading .employee-status-title::before { content: ""; display: inline-block; margin: 0 7px 1px 0; width: 9px; height: 9px; box-sizing: border-box; background: transparent; border: 1.5px solid #c3d0da; border-top-color: currentColor; animation: employee-status-loader 1100ms linear infinite; }
@keyframes employee-status-loader { to { transform: rotate(360deg); } }
.employee-card dl { margin: 0; }
.employee-card dl div { display: grid; grid-template-columns: 120px minmax(0, 1fr); padding: 7px 0; gap: 8px; }
.employee-card dt { color: var(--muted); font-family: "TT Bluescreens Pro Expanded", Arial, sans-serif; font-size: 13px; }
.employee-card dd { min-width: 0; margin: 0; color: #33455a; font-family: "TT Bluescreens Pro Expanded", Arial, sans-serif; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.employee-card dd a { color: var(--blue-dark); text-decoration: none; }
.employee-action { display: grid; width: 100%; min-height: 46px; margin-top: 16px; place-items: center; border: 0; border-radius: var(--radius-small); background: var(--blue); color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; }
.employee-action[hidden] { display: none; }
.employee-birthday-action { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: center; width: 100%; min-height: 64px; margin-top: 20px; padding: 0 0 6px; gap: 12px; border: 0; border-radius: 32px; background: transparent; color: var(--green-dark); text-align: center; cursor: pointer; transition: color var(--motion-fast) ease, transform var(--motion-fast) var(--motion-ease); isolation: isolate; }
.employee-birthday-action[hidden] { display: none; }
.employee-birthday-action .employee-birthday-icon { position: relative; display: grid; width: 60px; height: 60px; place-items: center; border: 0; border-radius: 50%; background: #e8f1ec; color: #7c8c84; font-size: 26px; filter: grayscale(1); transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, filter var(--motion-fast) ease, transform var(--motion-fast) var(--motion-ease); }
.employee-birthday-action strong, .employee-birthday-action small { display: block; }
.employee-birthday-action strong { color: var(--green-dark); font-size: 16px; font-weight: 500; line-height: 1.25; }
.employee-birthday-action small { margin-top: 8px; color: #758496; font-family: "TT Bluescreens Pro Expanded", Arial, sans-serif; font-size: 12px; }
.employee-birthday-action.active { color: var(--green-dark); }
.employee-birthday-action.active .employee-birthday-icon { background: var(--blue); color: #fff; filter: none; transform: scale(1.03); }
.employee-birthday-action:active { transform: scale(.985); }
.employee-close:focus-visible, .employee-action:focus-visible { outline: 2px solid var(--blue-dark); outline-offset: 2px; }

.app main > * {
  animation: page-reveal var(--motion-slow) var(--motion-ease) both;
}

.app main > *:nth-child(2) { animation-delay: 55ms; }
.app main > *:nth-child(3) { animation-delay: 100ms; }
.app main > *:nth-child(4) { animation-delay: 145ms; }
.app main > *:nth-child(5) { animation-delay: 190ms; }
.app main > *:nth-child(n+6) { animation-delay: 220ms; }

@keyframes page-reveal {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.grab {
  width: 44px;
  height: 5px;
  margin: 0 auto 14px;
  border-radius: 99px;
  background: #d9e0e6;
}

.diagnostic-sheet {
  display: flex;
  max-height: min(82dvh, 760px);
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
  flex-direction: column;
  outline: none;
}

.diagnostic-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.diagnostic-head h2 {
  margin: 0 0 3px;
  font-size: 22px;
  line-height: 1.1;
}

.diagnostic-head p {
  margin: 0;
  color: var(--muted);
  font-family: "TT Bluescreens Pro Expanded", Arial, sans-serif;
  font-size: 13px;
}

.diagnostic-close {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  flex: 0 0 44px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #eef3f6;
  color: var(--text);
  cursor: pointer;
}

.diagnostic-close svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.diagnostic-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  margin: 12px 0 8px;
  gap: 8px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.diagnostic-toolbar > span {
  color: var(--muted);
  font-family: "TT Bluescreens Pro Expanded", Arial, sans-serif;
  font-size: 13px;
}

.diagnostic-toolbar > div {
  display: flex;
  gap: 4px;
}

.diagnostic-toolbar button {
  min-height: 36px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-small);
  background: transparent;
  color: var(--blue-dark);
  font-family: "TT Bluescreens Pro Expanded", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.diagnostic-toolbar button:last-child { color: #bd3535; }

.diagnostic-list {
  min-height: 150px;
  padding: 0 2px 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.diagnostic-item {
  margin-bottom: 8px;
  border: 1px solid #dfe7ed;
  border-radius: var(--radius-small);
  background: #fff;
  overflow: hidden;
}

.diagnostic-item summary {
  position: relative;
  display: grid;
  padding: 12px 36px 12px 12px;
  gap: 6px;
  cursor: pointer;
  list-style: none;
}

.diagnostic-item summary::-webkit-details-marker { display: none; }

.diagnostic-item summary::after {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 8px;
  height: 8px;
  border-right: 2px solid #8493a2;
  border-bottom: 2px solid #8493a2;
  content: "";
  transform: translateY(-65%) rotate(45deg);
  transition: transform var(--motion-fast) ease;
}

.diagnostic-item[open] summary::after { transform: translateY(-30%) rotate(225deg); }

.diagnostic-summary-top {
  display: flex;
  align-items: center;
  gap: 7px;
}

.diagnostic-summary-top time {
  margin-left: auto;
  color: var(--muted);
  font-family: "TT Bluescreens Pro Expanded", Arial, sans-serif;
  font-size: 12px;
}

.diagnostic-method,
.diagnostic-status {
  padding: 3px 7px;
  border-radius: 7px;
  font-family: "TT Bluescreens Pro Expanded", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.2;
}

.diagnostic-method {
  background: var(--sky-bg);
  color: var(--blue-dark);
}

.diagnostic-status {
  background: var(--red-bg);
  color: #b72e2e;
}

.diagnostic-item.is-success .diagnostic-status {
  background: var(--green-bg);
  color: var(--green-dark);
}

.diagnostic-endpoint {
  color: var(--blue-dark);
  font-family: "TT Bluescreens Pro Expanded", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.diagnostic-item summary > small {
  color: var(--muted);
  font-family: "TT Bluescreens Pro Expanded", Arial, sans-serif;
  font-size: 13px;
}

.diagnostic-body {
  padding: 0 12px 12px;
  border-top: 1px solid #edf1f4;
}

.diagnostic-payload h4 {
  margin: 12px 0 6px;
  color: var(--blue-dark);
  font-family: var(--font-heading);
  font-size: 13px;
}

.diagnostic-payload pre {
  max-height: 340px;
  margin: 0;
  padding: 10px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: #f6f8fa;
  color: var(--blue-dark);
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.diagnostic-empty {
  display: grid;
  min-height: 180px;
  padding: 24px;
  place-content: center;
  gap: 6px;
  color: var(--muted);
  font-family: "TT Bluescreens Pro Expanded", Arial, sans-serif;
  text-align: center;
}

.diagnostic-empty strong {
  color: var(--text);
  font-size: 16px;
}

.diagnostic-empty span {
  max-width: 280px;
  font-size: 13px;
  line-height: 1.45;
}

.diagnostic-close:focus-visible,
.diagnostic-toolbar button:focus-visible,
.diagnostic-item summary:focus-visible {
  outline: 2px solid var(--blue-dark);
  outline-offset: 2px;
}

.image-reveal {
  opacity: 0;
  transition: opacity 420ms ease;
}
.image-reveal.is-loaded { opacity: 1; }

body.is-page-transitioning { cursor: wait; }

.page-transition-loader {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  padding: 24px;
  place-items: center;
  background: rgba(236, 243, 246, .76);
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 160ms ease;
}

.page-transition-loader[hidden] { display: none; }

.page-transition-loader.show {
  opacity: 1;
  pointer-events: all;
}

.page-transition-box {
  display: grid;
  width: min(100%, 250px);
  padding: 26px 24px 22px;
  place-items: center;
  border: 1px solid rgba(0, 50, 110, .08);
  border-radius: 22px;
  background: rgba(255, 255, 255, .96);
  color: var(--text);
  box-shadow: 0 20px 54px rgba(18, 50, 75, .18);
  transform: translateY(8px) scale(.97);
  transition: transform 220ms var(--motion-ease);
}

.page-transition-loader.show .page-transition-box { transform: translateY(0) scale(1); }

.page-transition-spinner {
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border: 4px solid #dcebf0;
  border-top-color: var(--blue);
  border-right-color: #4baf46;
  border-radius: 50%;
  animation: page-transition-spin .75s linear infinite;
}

.page-transition-box strong {
  font-size: 21px;
  line-height: 1.15;
}

.page-transition-box small {
  max-width: 200px;
  margin-top: 5px;
  overflow: hidden;
  color: #64778a;
  font-size: 15px;
  line-height: 1.3;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes page-transition-spin { to { transform: rotate(360deg); } }

@media (max-width: 360px) {
  :root { --page-gutter: 12px; }
  .bottom-nav { padding-inline: 4px; }
  .nav-item span { font-size: 13px; }
}

@media (min-width: 700px) {
  .app {
    min-height: 100vh;
    min-height: 100dvh;
    box-shadow: 0 24px 70px rgba(26, 55, 79, .18);
  }

  .bottom-nav {
    bottom: 0;
    border-radius: 18px 18px 0 0;
  }

  .bottom-nav::after { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.account-personnel-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; color: var(--blue); font-size: 19px; text-decoration: none; border-bottom: 1px solid var(--border); }
.account-personnel-link:last-child { border-bottom: 0; }

.password-expiry { box-sizing: border-box; width: min(390px, calc(100% - 32px)); max-height: calc(100dvh - 48px); margin: auto; padding: 26px 22px 22px; border: 1px solid var(--border); border-radius: 24px; background: var(--card); color: var(--text); box-shadow: 0 24px 80px #00326e30; overflow-y: auto; text-align: center; }
.password-expiry::backdrop { background: rgba(16, 35, 57, .48); backdrop-filter: blur(3px); }
.password-expiry-icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 16px; background: #fff1e5; color: #d66b20; }
.password-expiry-icon svg { width: 28px; height: 28px; }
.password-expiry h2 { color: var(--blue-dark); font-size: 26px; font-weight: 500; line-height: 1.12; margin: 0 0 12px; }
.password-expiry p { font-size: 18px; line-height: 1.4; margin: 0 0 22px; }
.password-expiry > div { display: flex; align-items: stretch; gap: 12px; }
.password-expiry a, .password-expiry button { box-sizing: border-box; flex: 1; display: grid; place-items: center; min-height: 48px; padding: 12px 8px; border: 0; border-radius: 14px; font: inherit; font-size: 19px; font-weight: 500; text-decoration: none; cursor: pointer; }
.password-expiry a { background: var(--blue); color: white; }
.password-expiry button { background: var(--info-bg); color: var(--blue-dark); }
.password-expiry :is(a, button):focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
html:has(.password-expiry[open]) { overflow: hidden; }
.account-password-expiry { color: #815315; font-size: 17px; line-height: 1.4; margin: 0 0 10px; }

/* ZN brand roles, shared by all mobile screens. */
body, button, input, select, textarea { font-family: var(--font-body); }
h1, h2, h3, h4, .app :is(h1,h2,h3,h4), .login-card :is(h1,h2,h3,h4) { font-family: var(--font-heading); }
h1, h2, h3, h4 { overflow-wrap: anywhere; }
button, input, select, textarea { min-width: 0; }
button, .personnel-primary, .cert-primary { overflow-wrap: anywhere; }
.nav-item span { font-size: 13px; line-height: 1.2; white-space: normal; text-align: center; }
@media (max-width: 370px) { .nav-item span { font-size: 13px; } }
.brand-logo { width: min(212px, 100%); height: auto; max-height: 57px; }
.employee-data-section h3, .account-data h3 { color: var(--blue-dark); font-family: var(--font-heading); }
html body select:not([multiple]):not([size]) { appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2300326e' stroke-width='1.7'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 20px; background-position: right 12px center; }

.employee-photo-wrap { padding: 0; cursor: zoom-in; }
.employee-photo-wrap:disabled { cursor: default; }
.employee-photo-wrap:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.employee-workplace + .employee-workplace { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.employee-workplace h4 { margin: 0 0 5px; font-size: 15px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.employee-workplace { min-width: 0; }
.employee-photo-dialog { box-sizing: border-box; width: min(960px, 100%); height: 100dvh; max-width: 100%; max-height: 100dvh; margin: auto; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); border: 0; border-radius: 0; background: #101c2a; color: white; }
.employee-photo-dialog::backdrop { background: rgba(0,0,0,.85); }
.employee-photo-dialog[open] { display: flex; flex-direction: column; gap: 12px; }
.employee-photo-dialog [hidden] { display: none; }
.employee-photo-toolbar { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.employee-photo-toolbar h2 { flex: 1; min-width: 0; margin: 0; font-size: 20px; line-height: 1.25; overflow-wrap: anywhere; }
.employee-photo-toolbar button { flex: 0 0 44px; width: 44px; min-height: 44px; border: 0; border-radius: 8px; background: #fff; color: #101c2a; font-size: 28px; cursor: pointer; }
.employee-photo-toolbar button:focus-visible { outline: 3px solid #9bd24a; outline-offset: 3px; }
.employee-photo-dialog > img { display: block; flex: 1; min-height: 0; width: 100%; object-fit: contain; }
.employee-photo-dialog > p { margin: 0; font-size: 15px; }

/* Immediate cake response, quiet request progress and a confirmed celebration. */
.cake-button.congrat-pending > span,
.employee-birthday-action.congrat-pending .employee-birthday-icon {
  filter: none;
  animation: congrat-wiggle 900ms ease-in-out infinite;
}
.cake-button.congrat-pending::after,
.employee-birthday-action.congrat-pending .employee-birthday-icon::after {
  content: ""; position: absolute; width: 58px; height: 58px;
  left: -3px; top: -3px; border: 2px solid transparent;
  border-top-color: var(--blue); border-right-color: #a9cdb9;
  border-radius: 50%; pointer-events: none;
  animation: congrat-orbit 1s linear infinite;
}
.employee-birthday-action.congrat-pending .employee-birthday-icon::after { left: 1px; top: 1px; }
.congrat-pending { cursor: wait; }
.cake-button.congrat-success::after,
.employee-birthday-action.congrat-success .employee-birthday-icon::after {
  content: ""; position: absolute; left: 26px; top: 26px;
  width: 5px; height: 5px; border-radius: 50%; pointer-events: none;
  box-shadow: 0 -30px #e9ae37, 22px -22px #0078af, 30px 0 #78bb91,
    22px 22px #e9ae37, 0 30px #0078af, -22px 22px #78bb91,
    -30px 0 #e9ae37, -22px -22px #0078af;
  animation: congrat-spark 750ms ease-out both;
}
.cake-button.congrat-success > span,
.employee-birthday-action.congrat-success .employee-birthday-icon { animation: congrat-pop 500ms ease-out; }
@keyframes congrat-wiggle { 0%, 100% { transform: rotate(-9deg) scale(1.08); } 50% { transform: rotate(9deg) scale(1.16); } }
@keyframes congrat-orbit { to { transform: rotate(360deg); } }
@keyframes congrat-pop { 0% { transform: scale(.85); } 45% { transform: scale(1.22) rotate(-8deg); } 100% { transform: scale(1.03); } }
@keyframes congrat-spark { from { opacity: 1; transform: scale(.35) rotate(-12deg); } to { opacity: 0; transform: scale(1.35) rotate(12deg); } }
@media (prefers-reduced-motion: reduce) {
  .cake-button.congrat-pending > span, .employee-birthday-action.congrat-pending .employee-birthday-icon,
  .cake-button.congrat-pending::after, .employee-birthday-action.congrat-pending .employee-birthday-icon::after,
  .cake-button.congrat-success::after, .employee-birthday-action.congrat-success .employee-birthday-icon::after,
  .cake-button.congrat-success > span, .employee-birthday-action.congrat-success .employee-birthday-icon { animation: none; }
  .congrat-success::after { display: none; }
}

/* Shared bottom-sheet frame. Keep rounded corners below the safe area,
   with enough backdrop above them, including in standalone iOS PWA. */
body :is(.modal, .account-modal, .employee-modal, .thanks-modal,
    .home-thanks-modal, .contacts-info-modal, .contacts-auth-modal, .month-modal) {
  align-items: flex-end;
  justify-content: center;
  padding: var(--sheet-top-gap) 0 0;
  overflow: hidden;
  background: rgba(15, 31, 46, calc(.42 - var(--swipe-fade, 0)));
}
body .month-modal { display: flex; }

body :is(.modal, .account-modal, .employee-modal, .thanks-modal,
    .home-thanks-modal, .contacts-info-modal, .contacts-auth-modal, .month-modal)
    > :is(.sheet, .account-sheet, .employee-card, .thanks-sheet,
      .home-thanks-sheet, .contacts-info-sheet, .contacts-auth-sheet, .month-dialog) {
  width: min(100%, var(--app-width));
  max-width: 100%;
  max-height: var(--sheet-max-height);
  min-height: 0;
  flex-shrink: 1;
  border: 0;
  border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
  box-shadow: var(--sheet-shadow);
  overscroll-behavior: contain;
}
body :is(.modal, .account-modal, .employee-modal, .thanks-modal,
    .contacts-info-modal, .contacts-auth-modal, .month-modal)
    > :is(.sheet, .account-sheet, .employee-card, .thanks-sheet,
      .contacts-info-sheet, .contacts-auth-sheet, .month-dialog):not(.diagnostic-sheet) {
  overflow-y: auto;
}
body :is(.thanks-sheet, .account-sheet, .sheet) > .grab,
body .home-thanks-grab,
body .month-dialog-grab {
  width: 44px;
  height: 5px;
  border-radius: 99px;
  background: #d9e0e6;
}
body .employee-modal > .employee-card.swipe-dismiss-surface {
  display: flex;
  flex-direction: column;
  height: var(--sheet-max-height);
  padding: 0;
  transform: translateY(28px);
  transition: transform 300ms var(--motion-ease);
  overflow: hidden;
  overflow-anchor: none;
}
body .employee-modal.open > .employee-card { transform: translateY(0); }
.employee-card::before {
  content: "";
  display: block;
  width: 44px;
  height: 5px;
  margin: -12px auto 14px;
  border-radius: 99px;
  background: #d9e0e6;
}
.employee-card-content { flex: 1 1 auto; min-height: 0; padding: 0 20px calc(92px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; touch-action: pan-y; }
.employee-card-footer { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; padding: 12px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: #fff; box-shadow: 0 -8px 16px rgba(255,255,255,.96); }
.employee-card-footer .employee-action { margin-top: 0; }
.account-sheet [hidden] { display: none; }

/* Section navigation: one row, one back target size on every screen. */
body .page-head { grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; }
body .page-head h1 { min-width: 0; grid-column: 2; grid-row: 1; overflow-wrap: anywhere; }
body .page-head > :nth-child(2):not(h1) { min-width: 0; grid-column: 2; grid-row: 1; justify-self: stretch; }
body .page-head > h1 ~ :last-child:not(.page-head-spacer),
body .page-head > .contacts-head-actions { grid-column: 3; grid-row: 1; justify-self: end; }
body :is(.personnel-heading, .cert-heading, .sports-heading) { flex-direction: row; align-items: center; }
body :is(.round-control, .personnel-back, .cert-back, .sports-back, .registration-back) { width: 44px; height: 44px; min-width: 44px; flex: 0 0 44px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--blue-dark); box-shadow: var(--shadow); }
body :is(.round-control, .personnel-back, .cert-back, .sports-back, .registration-back) svg, body .registration-back svg.zn-icon { width: 22px; height: 22px; }
body :is(.personnel-heading, .cert-heading, .sports-heading) h1 { min-width: 0; }
body :is(.personnel-back, .cert-back, .sports-back, .registration-back):active { transform: scale(.94); }
body .page-head.support-head > button { grid-column: 3; grid-row: 1; }

/* All content popups share the same bottom-sheet frame and motion. */
body.portal-sheet-open { overflow: hidden; }
body .portal-overlay { align-items: flex-end; justify-content: center; padding: var(--sheet-top-gap) 0 0; background: rgba(15,31,46,calc(.42 - var(--swipe-fade,0))); transition: opacity 280ms ease, visibility 0s linear 280ms; }
body .portal-overlay.open { transition-delay: 0s; }
body .portal-overlay > .portal-sheet { width: min(100%,var(--app-width)); max-height: var(--sheet-max-height); border-radius: var(--sheet-radius) var(--sheet-radius) 0 0; box-shadow: var(--sheet-shadow); transform: translateY(100%); transition: transform 280ms var(--motion-ease); overflow-y: auto; overscroll-behavior: contain; }
body .portal-overlay.open > .portal-sheet { transform: translateY(0); }
body dialog.portal-dialog-sheet { position: fixed; inset: auto 0 0; width: min(100%,var(--app-width)); max-width: 100%; max-height: var(--sheet-max-height); margin: 0 auto; padding: 12px 20px calc(24px + env(safe-area-inset-bottom)); border: 0; border-radius: var(--sheet-radius) var(--sheet-radius) 0 0; box-shadow: var(--sheet-shadow); background: #fff; overflow-y: auto; overscroll-behavior: contain; color: var(--text); }
body dialog.portal-dialog-sheet[open] { animation: portal-sheet-enter 280ms var(--motion-ease); }
body dialog.portal-dialog-sheet::backdrop { background: rgba(15,31,46,.42); animation: portal-backdrop-enter 280ms ease; }
.portal-sheet > .grab, .portal-dialog-sheet > .grab { width: 44px; height: 5px; margin: 0 auto 16px; border-radius: 99px; background: #d9e0e6; }
body .portal-sheet.is-swipe-dragging, body .portal-dialog-sheet.is-swipe-dragging { transition: none; animation: none; }
@keyframes portal-sheet-enter { from { transform: translateY(100%); opacity: .6; } to { transform: translateY(0); opacity: 1; } }
@keyframes portal-backdrop-enter { from { background: transparent; } }
@media (prefers-reduced-motion: reduce) {
  body .portal-overlay, body .portal-overlay > .portal-sheet { transition-duration: 0s; }
  body dialog.portal-dialog-sheet[open], body dialog.portal-dialog-sheet::backdrop { animation: none; }
}



body :is(.portal-sheet-heading, .thanks-sheet > header) { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
body :is(.portal-sheet-heading, .thanks-sheet > header) h2 { margin: 0; color: var(--blue-dark); font-size: 22px; }
body :is(.portal-sheet-heading, .thanks-sheet > header) button { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%; background: #eef3fa; color: var(--muted); }

/* Back swipe moves the live page and its fixed navigation together. */
html.back-swipe-active { overflow-x: hidden; overscroll-behavior-x: none; }
body.back-swipe-active { overflow-x: clip; overscroll-behavior-x: none; }
body .back-swipe-surface { translate: var(--back-swipe-offset, 0px) 0; will-change: translate; transition: none; }
body .app.back-swipe-surface { z-index: 61; box-shadow: -10px 0 30px rgba(0, 50, 110, .14); }
body > .bottom-nav.back-swipe-surface, body > .floating-back.back-swipe-surface { z-index: 62; }
body .back-swipe-surface.back-swipe-settling { transition: translate var(--back-swipe-duration, 200ms) cubic-bezier(.2,.7,.2,1); }
.back-swipe-backdrop { position: fixed; top: 0; bottom: 0; z-index: 60; display: flex; align-items: center; padding-left: 18px; pointer-events: none; background: var(--bg); color: var(--blue-dark); }
.back-swipe-backdrop > span { display: grid; justify-items: center; gap: 8px; }
.back-swipe-backdrop svg { padding: 10px; box-sizing: content-box; border-radius: 50%; background: #fff; box-shadow: var(--shadow); }
.back-swipe-backdrop small { font-size: 13px; }
@media (prefers-reduced-motion: reduce) { body .back-swipe-surface.back-swipe-settling { transition: none; } }


.employee-birthday-action.congrat-success .employee-birthday-icon::after { left: calc(50% - 2.5px); top: calc(50% - 2.5px); }

.employee-modal.open .employee-birthday-action:not(:is([hidden], .active, .congrat-pending, .congrat-success)) .employee-birthday-icon { filter: none; }
.employee-modal.open .employee-birthday-action:not(:is([hidden], .active, .congrat-pending, .congrat-success)) .employee-birthday-icon::before,
.employee-modal.open .employee-birthday-action:not(:is([hidden], .active, .congrat-pending, .congrat-success)) .employee-birthday-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(75, 175, 70, .45);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  animation: employee-cake-wave 2800ms ease-out infinite;
}
.employee-modal.open .employee-birthday-action:not(:is([hidden], .active, .congrat-pending, .congrat-success)) .employee-birthday-icon::after { animation-delay: 1400ms; }
@keyframes employee-cake-wave {
  0% { transform: scale(.98); opacity: 0; }
  12% { opacity: .8; }
  85%, 100% { transform: scale(1.65); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .employee-modal.open .employee-birthday-action .employee-birthday-icon { animation: none !important; }
  .employee-modal.open .employee-birthday-action .employee-birthday-icon::before,
  .employee-modal.open .employee-birthday-action .employee-birthday-icon::after { animation: none !important; opacity: 0; }
  .employee-status--loading .employee-status-title::before { animation: none; }
}

/* Password prompts stay centered above the home screen. */
body dialog.password-expiry.portal-dialog-sheet { inset: 0; width: min(390px, calc(100% - 32px)); max-height: calc(100dvh - 48px); margin: auto; padding: 26px 22px 22px; border: 1px solid var(--border); border-radius: 24px; }
body dialog.password-expiry > .grab { display: none; }

/* Диагностика: вкладки «Запросы» / «Пуши» */
.diagnostic-tabs {
  display: flex;
  gap: 4px;
  margin-top: 12px;
  border-bottom: 1px solid var(--border);
}

.diagnostic-tab {
  flex: 1 1 0;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font-family: "TT Bluescreens Pro Expanded", Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.diagnostic-tab[aria-selected="true"] {
  border-bottom-color: var(--blue);
  color: var(--blue-dark);
}

.diagnostic-tab:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

.diagnostic-panel {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}

.diagnostic-panel:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

/* Атрибут hidden обязан скрывать панель, несмотря на display: flex. */
.diagnostic-panel[hidden] {
  display: none;
}

.diagnostic-panel--requests {
  overflow: hidden;
}

.diagnostic-panel--pushes {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.diagnostic-panel .diagnostic-toolbar {
  margin-top: 0;
  margin-bottom: 8px;
  border-top: 0;
}

.diagnostic-panel .diagnostic-toolbar button {
  min-height: 44px;
}

.diagnostic-panel .diagnostic-list {
  flex: 1 1 auto;
  min-height: 120px;
  margin-bottom: 4px;
}

.diagnostic-panel .account-data {
  margin: 12px 0 0;
}

.diagnostic-panel .account-data p {
  margin: 10px 0 0;
  color: var(--muted);
  font-family: "TT Bluescreens Pro Expanded", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.45;
}

.useful-bot-icon { display:block; width:100%; height:100%; border-radius:50%; background-image:url("../assets/images/useful-links-reference.png"); background-repeat:no-repeat; background-size:1230% 1605%; }
.useful-bot-icon-1, .useful-bot-icon-2 { background-size:contain; background-position:center; }
.useful-bot-icon-1 { background-image:url("../assets/images/useful-bots/zn-ai.svg"); }
.useful-bot-icon-2 { background-image:url("../assets/images/useful-bots/neo.svg"); }
.useful-bot-icon-3 { background-position:4.87% 67.94%; }
.useful-bot-icon-4 { background-position:4.87% 96.84%; }

.diagnostic-hide { display: block; margin: 8px 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-small); background: transparent; color: var(--blue-dark); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }

.useful-bot-icon-5 { background-image:url("../assets/images/useful-bots/site-brand.svg"); background-size:contain; background-position:center; }