/* Lock entry: one flow prevents clock, card and footer collisions. */
#loginback {
  position: fixed; inset: 0; z-index: 101; display: none;
  box-sizing: border-box; width: 100%; height: 100%; height: 100dvh;
  flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 24px; overflow: auto; overscroll-behavior: contain;
  padding: max(24px, env(safe-area-inset-top)) 24px max(20px, env(safe-area-inset-bottom));
  color: #fff; background: rgba(0,0,0,.34);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  font-family: var(--pk-font-body, "Onest", sans-serif);
  opacity: 0; transition: opacity 250ms ease;
}
#loginback [hidden] { display: none !important; }
#loginback::before, #loginback::after { display: none; }
#loginback > .lock-clock {
  display: block !important; position: static; inset: auto; transform: none;
  flex: none; margin: auto 0 0; text-align: center; color: #fff;
  text-shadow: 0 2px 16px #000;
}
#loginback .lock-time { margin: 0; font: 400 clamp(44px,6vw,76px)/1.05 var(--pk-font-body,"Onest",sans-serif); color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.035em; }
#loginback .lock-date { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: #fff; }
#loginback > .lock-core.pk-spatial-glass {
  position: relative; display: flex; flex-direction: column; align-items: stretch;
  flex: none; box-sizing: border-box; width: min(430px,100%); max-width: 100%;
  padding: 24px; margin: 0; text-align: left; overflow: visible;
  color: #000; background: linear-gradient(rgba(131,138,255,.05),rgba(131,138,255,.05)),rgba(255,255,255,.94);
  border: 1px solid rgba(255,255,255,.85); border-radius: 20px;
  box-shadow: 0 24px 70px rgba(0,0,0,.24),inset 0 1px 0 #fff;
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  transform: none; animation: none;
}
#loginback > .lock-core::before, #loginback > .lock-core::after { pointer-events: none; }
#loginback > .lock-core > .lock-head { display:flex; align-items:center; gap:8px; padding:0; margin:0 0 16px; }
#loginback > .lock-core > .lock-head .ico { width:24px; height:24px; background:none; border:0; box-shadow:none; }
#loginback > .lock-core > .lock-head .ico img { width:24px; height:24px; }
#loginback .lock-head button { margin-left:auto; min-width:44px; min-height:44px; color:#000 !important; background:transparent; border:0; }
#loginback .lock-head button svg { stroke:currentColor; }
#loginback > .lock-core > .lock-head .app { font-size:13px; text-transform:none; color:#000; }
#loginback > .lock-core > .name { font:600 26px/1.2 var(--pk-font-body,"Onest",sans-serif); padding:0; margin:0; color:#000; text-shadow:none; letter-spacing:-.02em; }
#loginback #os-lock-funnel { margin:10px 0 20px; padding:0; color:#000; font-size:14px; line-height:1.5; font-weight:400; font-style:normal; max-width:none; }
#loginback button, #loginback a { font-family:inherit; touch-action:manipulation; }
#loginback #os-lock-guest, #loginback #os-lock-contact, #loginback #os-lock-back, #loginback #login {
  display:flex; align-items:center; justify-content:center; flex:none; gap:10px;
  width:100%; height:auto; min-height:48px; padding:11px 14px; margin:0;
  border:1px solid transparent; border-radius:10px; font:600 15px/1.4 var(--pk-font-body,"Onest",sans-serif);
  cursor:pointer; text-decoration:none; white-space:normal; box-shadow:none;
}
#loginback #os-lock-guest { color:#fff; background:#5956E9; }
#loginback #os-lock-contact, #loginback #os-lock-back { color:#000; background:transparent; margin-top:8px; }
#loginback #login { color:#000; background:#fff; border-color:#000; }
#loginback #os-lock-guest:hover { background:#423EF3; }
#loginback #os-lock-contact:hover, #loginback #os-lock-back:hover { background:rgba(131,138,255,.06); }
#loginback :is(button,a,input) { scroll-margin-block:16px; }
#loginback :is(button,a,input):focus-visible { outline:3px solid #423EF3 !important; outline-offset:3px; }
#loginback #os-lock-secondary { width:100%; margin-top:20px; border-top:1px solid rgba(0,0,0,.16); padding-top:16px; }
#loginback #login-form { display:flex; flex-direction:column; align-items:stretch; gap:12px; width:100%; max-width:none; margin:0; padding:0; }
#loginback #os-lock-phone-label { color:#000; font-size:14px; font-weight:600; }
#loginback .pk-phone { display:flex; align-items:center; gap:8px; width:100%; min-height:48px; padding:0 10px; box-sizing:border-box; border:1px solid #000; border-radius:10px; background:#fff; }
#loginback .pk-phone-flag, #loginback .pk-phone-cc { flex:none; color:#000; font-size:14px; }
#loginback #login-phone { flex:1 1 auto; width:100%; min-width:0; height:48px; min-height:48px; margin:0; padding:0 4px; border:0; border-radius:0; background:transparent; color:#000; font-size:16px; font-family:inherit; }
#loginback .pk-phone:focus-within { outline:3px solid #423EF3; outline-offset:3px; box-shadow:none; }
#loginback #login-phone:focus, #loginback #login-phone:focus-visible { outline:none !important; box-shadow:none; }
#loginback #login-phone::placeholder { color:#000; opacity:1; }
#loginback .pk-phone-ok { display:none; }
#loginback #login-website-url { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); opacity:0; pointer-events:none; }
#loginback #login-form .lock-consent { display:flex; align-items:flex-start; gap:12px; padding:8px 0; margin:0; width:100%; max-width:none; color:#000; font:400 13px/1.55 var(--pk-font-body,"Onest",sans-serif); cursor:pointer; text-align:left; }
#loginback #os-lock-consent-box { appearance:auto; flex:none; width:22px; height:22px; margin:0; accent-color:#5956E9; }
#loginback #os-lock-consent span { color:#000; }
#loginback #os-lock-phone-err { margin:0; padding:0; min-height:0; color:#000; font-size:13px; line-height:1.45; }
#loginback #os-lock-phone-err:not(:empty) { border-left:3px solid #000; padding-left:10px; }
#loginback .pk-cap { margin:0; padding:0; width:100%; }
#loginback .pk-cap-local, #loginback .pk-cap-unavailable { margin:0; padding:0; color:#000; font-size:12px; line-height:1.5; background:none; border:0; box-shadow:none; }
#loginback > .langselect.new { position:static; inset:auto; transform:none; display:flex; flex:none; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; width:min(430px,100%); box-sizing:border-box; margin:0 0 auto; padding:0; border-radius:0; background:transparent; border:0; box-shadow:none; }
#loginback > .langselect.new > .a { display:flex; align-items:center; justify-content:center; width:44px; min-width:44px; height:44px; padding:0 10px; border:0; border-radius:8px !important; background:none; color:#fff; font-size:13px; cursor:pointer; }
#loginback > .langselect.new > .a.selected { background:#fff; color:#000; }
#loginback > .langselect.new > .a .pk-action-icon { display:none; }
#loginback .langselect .lock-site { position:static; inset:auto; transform:none; display:flex; align-items:center; gap:8px; width:auto; height:auto; min-height:44px; padding:0 8px; margin:0 0 0 auto; background:none; border:0; border-radius:8px; box-shadow:none; color:#fff; font-size:12px; text-decoration:none; }
#login-welc { display:none; position:fixed; inset:0; z-index:2; background:#000; color:#fff; align-items:center; justify-content:center; flex-direction:column; }
#login-welc.show { display:flex; }
#loginback.is-launching > :not(#login-welc) { opacity:0; }
#loginback.close { filter:brightness(0); }
@media(max-width:620px) {
  #loginback { gap:20px; padding: max(20px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom)); }
  #loginback > .lock-core.pk-spatial-glass { padding:22px; }
  #loginback > .lock-core > .name { font-size:24px; }
  #loginback.lock-contact-open { gap:16px; }
  #loginback.lock-contact-open > .lock-clock { display:none !important; }
  #loginback #login-form .lock-consent { font-size:13px; }
}
@media(max-height:560px) {
  #loginback > .lock-clock { display:none !important; }
  #loginback > .lock-core.pk-spatial-glass { margin-top:0; }
}
@media(prefers-reduced-motion:reduce) {
  #loginback, #loginback * { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* Client preview: phone-first access and a three-stage system response. */
#loginback > .lock-core.pk-spatial-glass { width:min(440px,100%); padding:28px; }
#loginback .lock-preview-badge { position:absolute; top:28px; right:28px; padding:5px 8px; border:1px solid rgba(75,71,134,.16); border-radius:6px; color:#50466f; background:rgba(93,78,220,.045); font-size:10px; font-weight:600; letter-spacing:.06em; line-height:1.2; text-transform:uppercase; }
#loginback > .lock-core > .lock-head { padding-right:105px; margin-bottom:24px; }
#loginback > .lock-core > .name { font-size:28px; line-height:1.16; max-width:340px; letter-spacing:-.035em; }
#loginback #os-lock-funnel { color:#514d61; font-size:13px; line-height:1.65; margin:12px 0 22px; }
#loginback #os-lock-secondary { margin-top:0; padding-top:0; border-top:0; }
#loginback #login { background:#5956e9; color:#fff; border-color:#5956e9; box-shadow:0 4px 12px rgba(61,46,146,.14); }
#loginback #login:hover { background:#4743cd; border-color:#4743cd; }
#loginback #login:disabled { cursor:wait; opacity:.75; }
#loginback #os-lock-guest { margin-top:8px; color:#514d61; background:transparent; font-size:12px; min-height:44px; }
#loginback #os-lock-guest:hover { background:rgba(89,86,233,.065); color:#31237d; }
#loginback .pk-phone { border-color:#c3bed6; border-radius:10px; min-height:54px; gap:6px; padding:0 12px; box-shadow:0 1px 4px rgba(30,20,55,.03); }
#loginback #login-phone { height:52px; letter-spacing:.045em; }
#loginback #login-phone::placeholder { color:#8b859c; }
#loginback .pk-phone-cc { border-right:1px solid #ddd8e8; padding-right:8px; margin-right:4px; color:#655e77; }
#loginback .lock-demo-note { margin:0; color:#797186; font-size:10px; line-height:1.5; text-align:center; }
#loginback .lock-progress { display:flex; flex-direction:column; align-items:center; min-height:220px; justify-content:center; text-align:center; gap:10px; padding:5px 0; }
#loginback .lock-verify-mark { width:64px; height:64px; padding:8px; box-sizing:border-box; background:#eceafb; border-radius:50%; margin-bottom:10px; }
#loginback .lock-verify-mark svg { width:100%; height:100%; fill:none; stroke:#6254d8; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
#loginback .lock-verify-mark circle { stroke-dasharray:78 42; transform-origin:center; animation:pk-access-spin 1.4s linear infinite; }
#loginback .lock-verify-mark path { opacity:0; stroke-dasharray:30; stroke-dashoffset:30; transition:stroke-dashoffset .35s ease,opacity .2s; }
#loginback.lock-approved .lock-verify-mark { background:#e4f3e9; }
#loginback.lock-approved .lock-verify-mark svg { stroke:#278454; }
#loginback.lock-approved .lock-verify-mark circle { animation:none; stroke-dasharray:none; }
#loginback.lock-approved .lock-verify-mark path { opacity:1; stroke-dashoffset:0; }
#loginback #os-lock-status { margin:0; color:#241c36; font-size:20px; line-height:1.35; font-weight:600; }
#loginback #os-lock-status-note { margin:0; color:#6c627c; font-size:12px; line-height:1.6; }
#loginback .lock-stage-track { display:flex; gap:6px; margin-top:20px; width:120px; }
#loginback .lock-stage-track i { flex:1; height:3px; background:#e2deef; border-radius:6px; transition:background .25s; }
#loginback [data-stage="1"] .lock-stage-track i:first-child,#loginback [data-stage="2"] .lock-stage-track i:nth-child(-n+2),#loginback [data-stage="3"] .lock-stage-track i { background:#6254d8; }
#loginback.lock-verifying #os-lock-funnel { margin-bottom:5px; }
@keyframes pk-access-spin { to { transform:rotate(360deg); } }
@media(max-width:620px) {
  #loginback { gap:18px; }
  #loginback > .lock-core.pk-spatial-glass { padding:24px; }
  #loginback .lock-preview-badge { top:24px; right:24px; font-size:9px; }
  #loginback > .lock-clock { margin-top:auto; }
  #loginback .lock-time { font-size:48px; }
  #loginback .lock-date { font-size:12px; margin-top:6px; }
  #loginback > .lock-core > .name { font-size:26px; }
  #loginback > .lock-core > .lock-head { margin-bottom:20px; }
  #loginback.lock-typing > .lock-clock { display:none !important; }
  #loginback.lock-typing > .lock-core { margin-top:0; }
}
@media(max-width:360px) {
  #loginback { padding-left:12px; padding-right:12px; gap:14px; }
  #loginback > .lock-core.pk-spatial-glass { padding:20px; }
  #loginback .lock-preview-badge { top:20px; right:20px; }
  #loginback > .lock-core > .name { font-size:24px; }
}
@media(prefers-reduced-motion:reduce) { #loginback .lock-verify-mark circle { animation:none; stroke-dasharray:none; } }

/* Keep the preview label in normal flow beside the actual audio button. */
#loginback .lock-head .lock-preview-badge { position:static; margin-left:auto; padding:5px 6px; font-size:9px; white-space:nowrap; }
#loginback > .lock-core > .lock-head { padding-right:0; gap:8px; }
#loginback > .lock-core > .lock-head .app { white-space:nowrap; }
#loginback .lock-head button { margin-left:0; flex:none; }
#loginback > .lock-core > .name { max-width:none; text-align:left; }
@media(max-width:360px) { #loginback > .lock-core > .lock-head { gap:6px; } #loginback .lock-head .lock-preview-badge { padding:5px; font-size:8px; letter-spacing:.04em; } }
@media(max-width:620px) and (max-height:680px) { #loginback > .lock-clock { display:none !important; } #loginback > .lock-core.pk-spatial-glass { margin-top:auto; } }
/* Pearl relief remains visible through the lock; graphite keeps dark chrome. */
body.pekan-relief[data-relief-tone="pearl"] #loginback { background:rgba(247,247,245,.12); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
body.pekan-relief[data-relief-tone="pearl"] #loginback > .lock-clock { text-shadow:0 1px 0 rgba(255,255,255,.6); }
body.pekan-relief[data-relief-tone="pearl"] #loginback :is(.lock-time,.lock-date) { color:#292d2c; }
body.pekan-relief[data-relief-tone="pearl"] #loginback > .langselect.new { background:rgba(248,248,246,.48); border-radius:10px; padding:2px 4px; }
body.pekan-relief[data-relief-tone="pearl"] #loginback > .langselect.new > .a,
body.pekan-relief[data-relief-tone="pearl"] #loginback .langselect .lock-site { color:#292d2c; }