/* Measurements use the supplied 1320 × 2868 reference, including safe areas.
   Position against the full app height: subtracting the iPhone bottom inset
   from main previously pulled the camera, logo, and version upward. */
:root {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "PingFang TC", sans-serif;
  --prohibition-red: #e60011;
}
@supports (color: color(display-p3 1 0 0)) {
  :root { --prohibition-red: color(display-p3 0.827451 0.176471 0.145098); }
}
.app { container-type: size; }
main { inset: 0; }
.page { bottom: 9%; }
.gate-page { inset: 0; }
.brand {
  top: 12.133891%;
  left: 12.954545%;
  width: 74.090909%;
}
.brand svg { display: block; width: 100%; height: auto; }
.approval {
  top: 29.87%;
  left: .5%;
  font-size: 10.716cqw;
  line-height: 1.12;
  transform: scaleX(.99);
}
.employee-number, .date, .time {
  font-family: inherit;
  font-weight: 400;
  line-height: 1.1;
  color: #ebebeb;
}
.employee-number { top: 38.84%; font-size: 9.84cqw; }
.date { top: 44.775%; left: 3.886%; font-size: 13cqw; transform: scaleX(.93); }
.time { top: 52.2%; font-size: 15.92cqw; font-variant-numeric: normal; font-feature-settings: normal; }
.camera-button {
  top: 66.073919%;
  bottom: auto;
  left: 20%;
  width: 60%;
  height: 19.177127%;
  aspect-ratio: auto;
  overflow: visible;
}
.camera { width: 100%; height: 100%; overflow: visible; }
.version {
  top: 89.27%;
  bottom: auto;
  right: 4.4%;
  font-family: inherit;
  font-size: 3.9cqw;
  line-height: 1.2;
  color: #d1d1d1;
  white-space: nowrap;
}
.tab-bar {
  top: 91.283124%;
  bottom: auto;
  left: 4.772727%;
  right: 4.772727%;
  height: 6.555091%;
  border-radius: 8cqw;
  padding: 0 1.36cqw;
  border: 1px solid #414141;
  background:
    radial-gradient(ellipse 35% 45% at 50% 0%, #8c2c3124, transparent 80%),
    linear-gradient(180deg, #272727 0%, #202020 21%, #202020 84%, #292929 100%);
  box-shadow: inset 0 1px 1px #ffffff16, inset 0 -1px 1px #ffffff4d, 0 0 0 1px #ffffff0a;
}
.tab {
  position: relative;
  isolation: isolate;
  padding: 0;
  gap: 0;
  background: transparent;
  color: #f8f8f8;
}
.tab.active { background: transparent; color: #009aff; }
@supports (color: color(display-p3 1 0 0)) {
  .tab.active { color: color(display-p3 .262745 .580392 .972549); }
}
.tab.active::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: .75cqw;
  bottom: .75cqw;
  left: -.8cqw;
  right: -.8cqw;
  border-radius: 999px;
  background: linear-gradient(180deg, #090909, #0b0b0b);
  box-shadow: inset 0 1px 1px #0006, 0 0 2px #0005;
}
.tab svg, .tab:first-child svg {
  position: absolute;
  top: 1.44cqw;
  left: 50%;
  width: 9.090909cqw;
  height: 7.575758cqw;
  transform: translateX(-50%);
  overflow: visible;
}
.tab span {
  position: absolute;
  top: 8.68cqw;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2.24cqw;
  font-weight: 400;
  line-height: 1.2;
}
.spinner { top: 47.1%; }

/* Camera confirmation measured from IMG_5353, relative to the phone width. */
#camera-dialog {
  --camera-unit: min(1vw, 4.8px);
  position: fixed;
  inset: 41.503906dvh auto auto 50%;
  transform: translateX(-50%);
  width: calc(72.53 * var(--camera-unit));
  max-width: none;
  max-height: 56dvh;
  margin: 0;
  padding: calc(5.2 * var(--camera-unit)) calc(3.5 * var(--camera-unit)) calc(3.6 * var(--camera-unit));
  border: 1px solid #383737;
  border-radius: calc(8.9 * var(--camera-unit));
  background: linear-gradient(155deg, rgba(38, 38, 38, .90), rgba(39, 37, 37, .92));
  box-shadow: inset 0 1px 1px #ffffff0b, inset 0 -1px 1px #ffffff09, 0 8px 30px #0004;
  backdrop-filter: blur(calc(5.5 * var(--camera-unit))) saturate(.55);
  -webkit-backdrop-filter: blur(calc(5.5 * var(--camera-unit))) saturate(.55);
  overflow: auto;
  outline: none;
}
#camera-dialog::backdrop { background: rgba(0, 0, 0, .482); }
#camera-dialog h2, #camera-dialog p { margin-left: calc(3.2 * var(--camera-unit)); margin-right: calc(3.2 * var(--camera-unit)); }
#camera-dialog h2 { margin-bottom: calc(1.5 * var(--camera-unit)); font-size: calc(3.8 * var(--camera-unit)); line-height: 1.3; color: #f4f4f4; }
#camera-dialog p { font-size: calc(3.4 * var(--camera-unit)); line-height: 1.37; color: #8e8d8d; }
#camera-dialog .dialog-actions { gap: calc(1.8 * var(--camera-unit)); margin-top: calc(3 * var(--camera-unit)); }
#camera-dialog .dialog-actions button {
  height: calc(10.9 * var(--camera-unit));
  font-size: calc(4.5 * var(--camera-unit));
  border-radius: 999px;
  background: rgba(106, 106, 106, .56);
  color: #f7f7f7;
}
@media (min-aspect-ratio: 1/1.85) {
  .app { width: min(100%, 46.025105dvh, 480px); }
  #camera-dialog { --camera-unit: min(1vw, .46025105dvh, 4.8px); }
}