@font-face {
  font-family: "e-Ukraine";
  src: url("fonts/e-Ukraine-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* iPhone 15 Pro logical points */
  --frame-w: 393;
  --frame-h: 852;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  background: #000;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  position: fixed;
  inset: 0;
  overflow: hidden;
}

html:has(body.locked),
body.locked {
  background-color: #E0FFD6;
  background-image: linear-gradient(
    180deg,
    #B3D1EB 0%,
    #B3D1EB 45%,
    #E0FFD6 78%,
    #E0FFD6 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: top center;
}
body.locked:has(#gate.blank),
html:has(body.locked):has(#gate.blank) {
  background: #fff;
  background-image: none;
}
body.locked #viewport-wrap,
body.locked #tabbar { display: none !important; }

#gate {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: block;
  padding: 0;
  overflow: hidden;
  background: transparent;
}
body.unlocked #gate { display: none; }
#gate.blank { background: #fff; background-image: none; }
#gate-stage {
  position: absolute;
  left: 50%;
  top: 0;
  width: 393px;
  height: 853px;
  margin-left: -196.5px;
  transform-origin: top center;
  z-index: 1;
}
#gate-stage svg {
  display: block;
  width: 393px;
  height: 853px;
}
.pin-hit {
  position: absolute;
  width: 77px;
  height: 77px;
  border-radius: 38.5px;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}
.pin-hit:active { background: rgba(0,0,0,.06); }
.pin-hit[data-n="1"] { left: 50px; top: 343px; }
.pin-hit[data-n="2"] { left: 158px; top: 343px; }
.pin-hit[data-n="3"] { left: 266px; top: 343px; }
.pin-hit[data-n="4"] { left: 50px; top: 436px; }
.pin-hit[data-n="5"] { left: 158px; top: 436px; }
.pin-hit[data-n="6"] { left: 266px; top: 436px; }
.pin-hit[data-n="7"] { left: 50px; top: 529px; }
.pin-hit[data-n="8"] { left: 158px; top: 529px; }
.pin-hit[data-n="9"] { left: 266px; top: 529px; }
.pin-hit[data-n="0"] { left: 158px; top: 621px; }
.pin-hit[data-n="b"] { left: 266px; top: 621px; }

#viewport-wrap {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
}

#app-frame {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 50px;
  width: 100%;
  margin: 0;
  background: transparent;
  overflow: hidden;
  transform: none;
}
#app-frame[data-tab="feed"] {
  background: #D7E8F5;
}
body.tabbar-off #app-frame {
  bottom: 0 !important;
}

#content-area {
  position: absolute;
  top: 0;
  left: 50%;
  width: 393px;
  margin-left: -196.5px;
  bottom: 0;
  height: auto;
  overflow: hidden;
  background: transparent;
  z-index: 1;
}
#app-frame[data-tab="feed"] #content-area {
  background: #D7E8F5;
}

#overlay-area {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  z-index: 30000 !important;
  display: none;
  background: transparent;
  overflow: hidden;
}
#overlay-area.active { display: block; }
#overlay-area .subpage {
  left: 50%;
  width: 393px;
  margin-left: -196.5px;
  right: auto;
}
#overlay-area [data-view^="info-"] .page-img {
  width: 393px;
  height: 100%;
  object-fit: fill;
}

.tab-screen {
  position: absolute;
  inset: 0;
  display: none;
}
.tab-screen.active { display: block; }

.scroll-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
.scroll-wrap::-webkit-scrollbar { display: none; }

.person-photo {
  position: absolute;
  left: 48px;
  top: 235px;
  width: 139px;
  height: 182px;
  border-radius: 13px;
  object-fit: cover;
  object-position: center 18%;
  z-index: 4;
  pointer-events: none;
}

.person-name,
.person-date {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  color: #000;
  font-family: "e-Ukraine", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.person-name.caps {
  left: 50px;
  top: 546px;
  width: 168px;
  font-size: 19px;
  line-height: 20.5px;
  font-weight: 400;
  letter-spacing: -0.2px;
  text-transform: uppercase;
}
.person-name.plain {
  left: 50px;
  top: 278px;
  width: 150px;
  font-size: 17px;
  line-height: 18.5px;
  font-weight: 400;
}
.person-date {
  left: 208px;
  top: 277px;
  font-size: 15px;
  line-height: 16px;
  font-weight: 400;
}
.person-date.karta {
  left: 50px;
  top: 379px;
  font-size: 16px;
}
.person-photo.full-id {
  left: 41px;
  top: 324px;
  width: 145px;
  height: 194px;
  border-radius: 13px;
}
[data-view="full-passport"] .person-photo.full-id {
  top: 403px;
}
.person-name.full-id {
  left: 40px;
  top: 228px;
  width: 300px;
  font-size: 16px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: -0.2px;
  text-transform: uppercase;
}
[data-view="full-passport"] .person-name.full-id {
  top: 307px;
}
.person-date.full-id {
  left: 207px;
  top: 388px;
  font-size: 14px;
}
[data-view="full-passport"] .person-date.full-id {
  top: 467px;
}
.person-latin {
  position: absolute;
  left: 42px;
  top: 370px;
  z-index: 5;
  pointer-events: none;
  color: #000;
  font-family: "e-Ukraine", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  background: #fff;
  padding: 0 4px 2px 0;
  min-width: 220px;
}
[data-view="full-edoc"] .person-latin {
  top: 291px;
}
.person-sex {
  position: absolute;
  left: 0;
  top: 0;
  width: 393px;
  height: auto;
  z-index: 5;
  pointer-events: none;
  overflow: visible;
}
[data-view="full-passport"] .person-sex {
  top: 0;
}
.feed-hello {
  position: absolute;
  left: 28px;
  top: 93px;
  z-index: 4;
  pointer-events: none;
  color: #000;
  font-family: "e-Ukraine", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 26px;
  line-height: 26px;
  font-weight: 400;
  letter-spacing: 0;
}

.page-img {
  display: block;
  width: 393px;
  height: auto;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* ---- Documents carousel ---- */
#carousel-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
}
#carousel-track {
  display: flex;
  width: calc(393px * 4);
  height: 100%;
  will-change: transform;
}
.doc-slide {
  position: relative;
  width: 393px;
  height: 100%;
  flex-shrink: 0;
}

/* ---- generic invisible hit zones ---- */
.hit {
  position: absolute;
  /* background: rgba(255,0,0,.25); */ /* uncomment for debugging */
}

.dots-btn {
  left: 310px; top: 576px; width: 42px; height: 42px;
  border-radius: 50%;
  z-index: 5;
}
.card-tap {
  inset: 0;
  z-index: 1;
}

.back-zone {
  left: 0; top: 0; width: 393px; height: 110px;
  z-index: 20;
  touch-action: none;
}

.subpage[data-view="full-passport"],
.subpage[data-view="full-edoc"] {
  will-change: transform;
}

.drag-peek-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 393px;
  height: auto;
  pointer-events: none;
  opacity: 0;
}

.code-toggle {
  top: 518px; width: 58px; height: 58px; border-radius: 50%;
  z-index: 5;
}
.code-toggle[data-mode="qr"] { left: 98px; }
.code-toggle[data-mode="barcode"] { left: 235px; }

.full-info-btn {
  left: 16px; top: 320px; width: 361px; height: 56px;
  z-index: 5;
}
[data-view="info-edoc"] .full-info-btn {
  top: 452px; height: 58px;
}
.code-shortcut {
  top: 632px; width: 58px; height: 58px; border-radius: 50%;
  z-index: 5;
}
.code-shortcut[data-target="qr-passport"] { left: 80px; }
.code-shortcut[data-target="barcode-passport"] { left: 258px; }

.close-btn {
  left: 16px;
  top: 87.57%;
  width: 361px;
  height: 6.56%;
  z-index: 10;
}

.subpage {
  position: absolute;
  inset: 0;
  display: none;
}
.subpage.active { display: block; }

/* ---- Tabbar: 50px strip, 60px artwork at 1:1 (icons keep original size) ---- */
#tabbar {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: 100% !important;
  height: 50px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background: #000 !important;
  overflow: hidden !important;
  z-index: 10000 !important;
  transform: none !important;
}
#tabbar.hidden { display: none !important; }
#tabbar-inner {
  position: absolute;
  left: 50%;
  top: -5px;
  width: 393px;
  height: 60px;
  margin-left: -196.5px;
}
#tabbar-img {
  display: block;
  width: 393px;
  height: 60px;
  object-fit: none;
  object-position: center center;
  pointer-events: none;
}
.tabbar-hit {
  position: absolute;
  top: 5px;
  height: 50px;
  width: 78.6px;
}
.tabbar-hit[data-tab="feed"] { left: 0; }
.tabbar-hit[data-tab="documents"] { left: 78.6px; }
.tabbar-hit[data-tab="diia-ai"] { left: 157.2px; }
.tabbar-hit[data-tab="services"] { left: 235.8px; }
.tabbar-hit[data-tab="menu"] { left: 314.4px; }

@keyframes living-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ---- Ticker (running text "Документ оновлено...") ---- */
.ticker-overlay {
  position: absolute;
  left: 32px; top: 503px;
  width: 329px; height: 24px;
  overflow: hidden;
  padding: 0 12px;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 3;
  display: flex;
  align-items: center;
  background: transparent;
}
.ticker-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  width: max-content;
  animation: ticker-scroll 16s linear infinite;
}
.ticker-text {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 400;
  color: #000;
  font-family: "e-Ukraine", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.ticker-text .ball {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #000;
  margin: 0 10px;
  flex-shrink: 0;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- QR / Barcode countdown timer ---- */
.qr-timer {
  position: absolute;
  left: 32px; top: 168px;
  width: 329px; height: 20px;
  background: transparent;
  text-align: center;
  font-size: 13px;
  font-weight: 400;
  color: #6b7280;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  pointer-events: none;
  z-index: 3;
  line-height: 20px;
}
[data-view="qr-edoc"] .qr-timer {
  top: 220px;
}

/* ---- QR/Barcode: tap only on the white card (not the background) to go back ---- */
.qr-back-tap {
  left: 32px; top: 144px;
  width: 329px; height: 495px;
  border-radius: 23px;
  z-index: 1;
}

/* full-passport ticker is at a different position/width than card tickers */
.ticker-full-passport {
  left: 0px !important; top: 244px !important;
  width: 393px !important;
}

/* full-edoc has two ribbons: top (unique edoc text, y=165) and bottom (standard, y=503) */
.ticker-full-edoc-top {
  left: 0px !important; top: 165px !important;
  width: 393px !important;
}
.ticker-full-edoc-bottom {
  left: 32px !important; top: 503px !important;
  width: 329px !important;
}

/* karta ticker is offset by 5px (x=37 not 32) in the original SVG */
[data-doc="karta"] .ticker-overlay,
[data-view="info-karta"] .ticker-overlay {
  left: 37px !important;
}

/* full-passport has its own QR timer near y=1489 */
.full-passport-timer {
  left: 49px !important; top: 1458px !important;
  width: 295px !important; height: 22px !important;
  background: transparent !important;
}

/* Дія.AI ticker - "Працюю в тестовому режимі" */
.ticker-diia-ai {
  left: 0px !important; top: 134px !important;
  width: 393px !important; height: 31px !important;
  background: #E2F2FE;
}



/* ---- Feed: looping news carousel (Що нового?) ---- */
#news-carousel {
  position: absolute;
  left: 0;
  top: 706px;
  width: 393px;
  height: 200px;
  z-index: 2;
  touch-action: pan-y;
}
#news-track {
  display: flex;
  height: 200px;
  padding-left: 24px;
  will-change: transform;
}
.news-card {
  flex: 0 0 345px;
  width: 345px;
  height: 200px;
  margin-right: 10px;
  border-radius: 16px;
  overflow: hidden;
}
.news-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}
#news-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.news-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  transition: background .2s ease, width .2s ease, height .2s ease, margin-right .2s ease;
}
.news-dot.active {
  background: #000;
}
.news-dot.shrunk {
  width: 5px;
  height: 5px;
  margin-right: 2px;
}
.news-dot--tail {
  width: 5px;
  height: 5px;
  margin-left: 2px;
  transition: width .2s ease, height .2s ease, margin-left .2s ease;
}
.news-dot--tail.grown {
  width: 9px;
  height: 9px;
  margin-left: -1px;
}

/* ---- Feed: auto-hiding scroll indicator strip (right edge) ----
   Fixed geometry per spec: x=390, min top=147, height=337,
   travels down to content-area bottom (749) without overlapping the tabbar. */
.feed-scrollbar {
  position: absolute;
  left: 390px;
  top: 0;
  width: 3px;
  height: 337px;
  border-radius: 2px;
  background: rgba(0,0,0,.22);
  opacity: 0;
  transform: translateY(147px);
  transition: opacity .25s ease;
  pointer-events: none;
  z-index: 50;
}
.feed-scrollbar.visible {
  opacity: 1;
}

/* ---- Living gradient: only on Documents, two color fields that cross-fade ---- */
#living-mesh {
  display: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  background: #E8F0FF;
}
#app-frame[data-tab="documents"] #living-mesh { display: block; }
#mesh-a, #mesh-b {
  position: absolute;
  width: 220%;
  height: 220%;
  left: -60%;
  top: -60%;
  will-change: transform, opacity;
}
#mesh-a {
  background:
    radial-gradient(ellipse 80% 60% at 28% 30%, #9CEBFF 0%, rgba(156,235,255,0) 55%),
    radial-gradient(ellipse 70% 55% at 78% 18%, #C4B5FF 0%, rgba(196,181,255,0) 52%),
    radial-gradient(ellipse 85% 65% at 70% 78%, #FFF36A 0%, rgba(255,243,106,0) 55%),
    radial-gradient(ellipse 70% 55% at 16% 80%, #BDC6FF 0%, rgba(189,198,255,0) 52%);
}
#mesh-b {
  background:
    radial-gradient(ellipse 80% 60% at 72% 28%, #FDE0B4 0%, rgba(253,224,180,0) 55%),
    radial-gradient(ellipse 70% 55% at 22% 22%, #DBB0C1 0%, rgba(219,176,193,0) 52%),
    radial-gradient(ellipse 85% 65% at 30% 78%, #C7FFFD 0%, rgba(199,255,253,0) 55%),
    radial-gradient(ellipse 70% 55% at 84% 76%, #C4B5FF 0%, rgba(196,181,255,0) 52%);
}