:root {
  --bg: #ecf3f8;
  --card: #ffffff;
  --primary: #0f4c81;
  --primary-2: #117a8b;
  --accent: #23a36a;
  --danger: #ce4b4b;
  --muted: #637488;
  --text: #14212f;
  --border: #d5e0eb;
  --top-icon-size: 54px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  background: linear-gradient(170deg, #f6fbff 0%, #e9f1f8 55%, #dbe9f4 100%);
  color: var(--text);
}
.mobile-wrap {
  max-width: 540px;
  margin: 0 auto;
  min-height: 100dvh;
  padding: 14px 14px 28px;
  display: grid;
  gap: 12px;
}
.brand-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  background: linear-gradient(118deg, #e8f2fb 0%, #dcebf8 42%, #d7eef0 100%);
  border: 2px solid #98b7d4;
  border-radius: 14px;
  padding: 6px 10px;
  box-shadow: 0 10px 18px rgba(18, 62, 108, .16), inset 0 1px 0 rgba(255,255,255,.62);
}
.brand-title {
  flex: 1;
  text-align: center;
  font-weight: 700;
  color: #2b4d6f;
  font-size: 1.28rem;
  letter-spacing: .02em;
  line-height: 1.05;
}
.header-clock {
  width: fit-content;
  margin: 4px auto 0;
  padding: 10px 20px;
  border-radius: 999px;
  text-align: center;
  color: #124f86;
  font-weight: 800;
  letter-spacing: 0.07em;
  font-size: 2.2rem;
  line-height: 1;
  background: linear-gradient(130deg, rgba(255,255,255,.96), rgba(232,244,255,.94));
  border: 1px solid rgba(157, 190, 221, .7);
  box-shadow: 0 8px 20px rgba(24, 74, 121, .16), inset 0 1px 0 rgba(255,255,255,.8);
}
.company-logo {
  width: calc(var(--top-icon-size) + 10px);
  height: calc(var(--top-icon-size) + 10px);
  max-height: calc(var(--top-icon-size) + 10px);
  object-fit: contain;
  border-radius: 999px;
  background: rgba(255,255,255,0.8);
  padding: 3px;
  box-shadow: 0 6px 14px rgba(20, 62, 108, .22), inset 0 1px 0 rgba(255,255,255,.72);
}
.company-avatar {
  width: var(--top-icon-size);
  height: var(--top-icon-size);
  border-radius: 999px;
  background: linear-gradient(160deg, #0f4c81, #117a8b);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.35rem;
  text-transform: uppercase;
}
.pau-pill {
  border: 0;
  width: var(--top-icon-size);
  height: var(--top-icon-size);
  border-radius: 999px;
  background: linear-gradient(160deg, #0f4c81, #117a8b);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 8px 16px rgba(20, 67, 111, .28);
  position: relative;
  transition: transform .2s ease, box-shadow .25s ease;
}
.pau-pill:hover,
.pau-pill:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 11px 18px rgba(20, 67, 111, .34);
}
.pau-pill-icon {
  width: 38px;
  height: 38px;
  object-fit: contain;
  display: block;
}
.pau-pill-fallback {
  display: none;
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.pau-pill-menu-lines {
  position: absolute;
  right: 3px;
  bottom: 4px;
  width: 16px;
  height: 12px;
  border-radius: 8px;
  background: rgba(255,255,255,.22);
  backdrop-filter: blur(3px);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  padding: 2px 3px;
}
.pau-pill-menu-lines i {
  display: block;
  width: 8px;
  height: 1.8px;
  border-radius: 2px;
  background: rgba(255,255,255,.96);
}
.app-menu-wrap {
  position: relative;
}
.app-menu {
  position: absolute;
  right: 0;
  left: auto;
  top: calc(100% + 8px);
  min-width: 220px;
  background: rgba(255,255,255,.92);
  border: 1px solid #bcd3e8;
  border-radius: 14px;
  box-shadow: 0 16px 36px rgba(15, 46, 84, 0.24);
  padding: 9px;
  z-index: 30;
  backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(-10px) scale(0.96);
  transform-origin: top right;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .28s cubic-bezier(.2,.75,.15,1), transform .32s cubic-bezier(.2,.75,.15,1), visibility .32s ease;
}
.app-menu.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  visibility: visible;
}
.app-menu-item {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  border-radius: 10px;
  padding: 12px 12px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: background .18s ease, transform .16s ease;
}
.app-menu-item:hover,
.app-menu-item:focus-visible {
  background: #e8f2fb;
  transform: translateX(1px);
  outline: none;
}
.app-menu-item.danger {
  color: #b72c2c;
}
.app-menu-item[disabled] {
  color: #9ca8b6;
  cursor: not-allowed;
}
.card {
  background: var(--card);
  border-radius: 18px;
  padding: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 10px 24px rgba(15, 46, 84, 0.12);
}
#punchCard {
  padding: 10px 12px 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: clamp(380px, calc(100dvh - 230px), 520px);
}
h1 {
  margin: 4px 0 10px;
  font-size: 1.3rem;
}
h2 {
  margin: 0;
  font-size: 1.1rem;
}
label {
  font-size: .88rem;
  color: var(--muted);
  margin-top: 9px;
  display: block;
}
input, select {
  width: 100%;
  margin-top: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  font-size: 1rem;
  background: #fdfefe;
}
.btn {
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 12px;
  margin-top: 10px;
  font-weight: 600;
}
.btn.primary {
  background: linear-gradient(140deg, var(--primary), var(--primary-2));
  color: #fff;
}
.btn.secondary {
  background: #e9f2f8;
  color: var(--primary);
}
.btn.ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  width: auto;
  margin: 0;
  padding: 8px 12px;
}
.btn.ghost.mini {
  width: auto;
  margin-top: 8px;
  padding: 6px 10px;
  font-size: 0.84rem;
}
.msg {
  min-height: 20px;
  margin: 8px 0 0;
  font-size: 0.9rem;
}
#punchMsg,
#faceMsg,
#qrMsg,
#pinMsg {
  text-align: center;
  font-size: 1.03rem;
  font-weight: 700;
  border-radius: 12px;
  padding: 8px 10px;
  margin-top: 10px;
}
#punchMsg.msg-ok,
#faceMsg.msg-ok,
#qrMsg.msg-ok,
#pinMsg.msg-ok {
  color: #0f6a40;
  background: linear-gradient(140deg, #eefbf4, #dff6e9);
  border: 1px solid #a8d8bf;
}
#punchMsg.msg-error,
#faceMsg.msg-error,
#qrMsg.msg-error,
#pinMsg.msg-error {
  color: #9a2222;
  background: linear-gradient(140deg, #fff2f2, #ffe5e5);
  border: 1px solid #efb0b0;
  box-shadow: 0 6px 16px rgba(171, 40, 40, .18);
}
#punchMsg.msg-pop,
#faceMsg.msg-pop,
#qrMsg.msg-pop,
#pinMsg.msg-pop {
  animation: noticePulse .42s ease-out;
}
@keyframes noticePulse {
  0% { transform: scale(.985); }
  55% { transform: scale(1.012); }
  100% { transform: scale(1); }
}
.muted {
  color: var(--muted);
  margin: 0;
  font-size: .88rem;
}
.who-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  text-align: center;
  margin-top: 2.2rem;
}
.who-row > div {
  width: 100%;
}
.action-hub {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-content: center;
}
.action-orb {
  border: 0;
  border-radius: 999px;
  aspect-ratio: 1 / 1;
  width: 100%;
  min-height: 150px;
  display: grid;
  place-content: center;
  gap: 4px;
  text-align: center;
  color: #fff;
  box-shadow: 0 14px 30px rgba(13,50,84,.28), inset 0 -8px 16px rgba(0,0,0,.16);
}
.action-orb .orb-title {
  font-size: 1.2rem;
  font-weight: 800;
}
.action-orb .orb-sub {
  font-size: .82rem;
  opacity: .95;
}
.action-orb.in {
  background: linear-gradient(145deg, #28b174, #1a8f59);
}
.action-orb.out {
  background: linear-gradient(145deg, #2d6ab4, #225590);
}
.capture-stage {
  margin-top: 12px;
}
.capture-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.capture-head strong {
  color: #214160;
  font-size: .98rem;
}
.gps-box {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary-2);
  border-radius: 10px;
  padding: 10px;
  background: #f7fbff;
  font-size: 0.9rem;
}
.method-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.method {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  background: #f6fafc;
  font-weight: 600;
}
.method.active {
  background: #def2ff;
  border-color: #9cc6e6;
}
.panel {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  background: #fbfeff;
}
#faceVideo {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: #0e1013;
  object-fit: cover;
  display: block;
  transform: scaleX(-1);
}
.face-orb-wrap {
  position: relative;
  width: min(88vw, 360px);
  aspect-ratio: 1 / 1;
  margin: 6px auto 12px;
  border-radius: 999px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 32%, #101820 0%, #070b12 72%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 14px 28px rgba(13,36,63,.28);
  transition: box-shadow .24s ease, transform .24s ease;
}
.face-orb-ring {
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  pointer-events: none;
}
.face-orb-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 3px;
  background: var(--ring-color, conic-gradient(from 220deg, rgba(255,255,255,.05), rgba(95,232,255,.95), rgba(35,163,106,.85), rgba(255,255,255,.08)));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: faceRingSpin 3.5s linear infinite;
}
.face-orb-ring::after {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: inherit;
  background: radial-gradient(circle at 25% 18%, rgba(255,255,255,.35), rgba(255,255,255,0) 46%);
}
.face-orb-wrap.punch-in {
  --ring-color: conic-gradient(from 220deg, rgba(255,255,255,.05), rgba(96,255,174,.95), rgba(35,163,106,.92), rgba(255,255,255,.08));
}
.face-orb-wrap.punch-out {
  --ring-color: conic-gradient(from 220deg, rgba(255,255,255,.05), rgba(117,181,255,.96), rgba(38,106,197,.9), rgba(255,255,255,.08));
}
.face-orb-wrap.stage-sending {
  --ring-color: conic-gradient(from 220deg, rgba(255,255,255,.06), rgba(255,99,99,.95), rgba(201,35,35,.92), rgba(255,255,255,.08));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 0 0 3px rgba(229,46,46,.18), 0 16px 36px rgba(148,22,22,.36);
}
.face-orb-wrap.stage-sending .face-orb-ring::before {
  animation-duration: 1.3s;
}
.face-orb-wrap.stage-validating {
  --ring-color: conic-gradient(from 220deg, rgba(255,255,255,.06), rgba(255,225,116,.98), rgba(228,171,22,.92), rgba(255,255,255,.08));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 0 0 3px rgba(243,189,26,.2), 0 16px 36px rgba(162,122,17,.33);
}
.face-orb-wrap.stage-validating .face-orb-ring::before {
  animation-duration: .95s;
}
.face-orb-wrap.stage-success {
  --ring-color: conic-gradient(from 220deg, rgba(255,255,255,.06), rgba(128,255,178,.98), rgba(32,171,93,.94), rgba(255,255,255,.08));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 0 0 3px rgba(42,176,101,.2), 0 16px 36px rgba(20,108,61,.32);
  transform: scale(1.01);
}
.face-process-hint {
  margin: 0 auto 10px;
  width: fit-content;
  min-height: 30px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: .02em;
  background: #eaf3fb;
  color: #1c456f;
  border: 1px solid #cfe0f1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.face-process-hint::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 0 rgba(39,96,146,.35);
  animation: processDotPulse 1.3s ease-in-out infinite;
}
.face-process-hint.sending {
  color: #9d2424;
  background: #fff1f1;
  border-color: #f1caca;
}
.face-process-hint.validating {
  color: #8d6208;
  background: #fff8e6;
  border-color: #efddad;
}
.face-process-hint.success {
  color: #196842;
  background: #e9faef;
  border-color: #b8e3ca;
}
@keyframes processDotPulse {
  0% { box-shadow: 0 0 0 0 rgba(39,96,146,.35); }
  70% { box-shadow: 0 0 0 8px rgba(39,96,146,0); }
  100% { box-shadow: 0 0 0 0 rgba(39,96,146,0); }
}
.face-success-notice {
  margin: 2px 0 10px;
  border-radius: 12px;
  border: 1px solid #8ad0ab;
  background: linear-gradient(140deg, #effcf4, #dff6e9);
  color: #196842;
  font-weight: 700;
  padding: 11px 12px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.face-success-notice::before {
  content: "✓";
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(145deg, #24aa6f, #198756);
  box-shadow: 0 4px 10px rgba(26, 135, 86, .35);
}
@keyframes faceRingSpin {
  to { transform: rotate(360deg); }
}
#qrReader {
  min-height: 180px;
}
.row-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.row-actions.triple {
  grid-template-columns: 1fr 1fr;
}
.row-full {
  grid-column: 1 / -1;
}
.face-actions {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-top: 6px;
}
.face-actions .btn {
  width: min(84%, 320px);
  margin-top: 0;
}
.face-actions .btn.secondary {
  margin-top: 6px;
}
.face-actions .btn.ghost.mini {
  margin-top: 2px;
}
.cta-register {
  position: relative;
  box-shadow: 0 8px 20px rgba(14, 89, 167, .28);
}
.cta-register.cta-live {
  animation: ctaPulse 1.8s ease-in-out infinite;
}
.cta-register.is-loading {
  position: relative;
  padding-left: 44px;
}
.cta-register.is-loading::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.45);
  border-top-color: #fff;
  animation: spin .8s linear infinite;
}
.btn:disabled {
  opacity: .68;
  cursor: not-allowed;
  filter: saturate(.9);
}
.cta-register:focus-visible {
  outline: 3px solid rgba(69, 142, 236, .45);
  outline-offset: 2px;
}
@keyframes ctaPulse {
  0% { transform: scale(1); box-shadow: 0 8px 20px rgba(14, 89, 167, .20); }
  50% { transform: scale(1.02); box-shadow: 0 10px 26px rgba(14, 89, 167, .34); }
  100% { transform: scale(1); box-shadow: 0 8px 20px rgba(14, 89, 167, .20); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.footer-label {
  text-align: center;
  color: var(--primary);
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: .35px;
  background: linear-gradient(140deg, var(--primary), var(--primary-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
.hidden { display: none !important; }
@media (max-width: 370px) {
  .method-grid { grid-template-columns: 1fr; }
  .row-actions { grid-template-columns: 1fr; }
  .action-hub { grid-template-columns: 1fr; }
  .brand-title { font-size: 1.02rem; }
  .header-clock {
    font-size: 1.65rem;
    padding: 7px 13px;
  }
  :root { --top-icon-size: 46px; }
  .pau-pill-icon {
    width: 32px;
    height: 32px;
  }
  .pau-pill-menu-lines {
    right: 2px;
    bottom: 3px;
    width: 14px;
    height: 10px;
  }
  .pau-pill-menu-lines i {
    width: 7px;
    height: 1.6px;
  }
  .company-logo {
    width: calc(var(--top-icon-size) + 7px);
    height: calc(var(--top-icon-size) + 7px);
    max-height: calc(var(--top-icon-size) + 7px);
  }
}