* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #fff;
  color: #fff;
  font-family: sans-serif;
  min-height: 100vh;
  /* match the visible viewport so the page doesn't scroll behind the
     mobile browser toolbar (100vh > visible area on mobile). */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overscroll-behavior: none;
}

.screen {
  display: none;
  width: 92%;
  max-width: 440px;
  text-align: center;
}

.screen.active {
  display: block;
}

h2 {
  margin-bottom: 4px;
}

.sub {
  color: #aaa;
  font-size: 13px;
  margin-bottom: 20px;
}

.card {
  background: #fff;
  /* border: 1px solid #333; */
  box-shadow: 0 0 0 3px rgb(188 189 194 / 10%);
  border-radius: 10px;
  padding: 18px 16px;
  margin-bottom: 16px;
  text-align: left;
}

.card small {
  color: #aaa;
  font-size: 14px;
  display: block;
  margin-bottom: 12px;
}

.link-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.link-row input {
  flex: 1;
  background: #fff;
  border: 1px solid #444;
  color: #6366f1;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
}

button {
  cursor: pointer;
  border: none;
  border-radius: 8px;
  font-size: 15px;
}

.btn-primary {
  background: #6366f1;
  color: #fff;
  padding: 12px;
  width: 100%;
}

.btn-primary:disabled {
  background: #555;
  cursor: not-allowed;
}

.btn-small {
  background: #333;
  color: #ddd;
  padding: 8px 12px;
  font-size: 13px;
}

.store-link {
  display: inline-block;
  background: #6366f1;
  color: #fff;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
}

.text-input {
  width: 100%;
  background: #fff;
  border: 1px solid #444;
  color: #000;
  border-radius: 8px;
  padding: 12px;
  font-size: 15px;
  margin-bottom: 12px;
  text-align: center;
}

/* ── Manager waiting queue ── */
#waiting-list {
  text-align: left;
}

.waiter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}

.waiter-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  margin-right: 12px;
}

.waiter-name {
  color: #000;
  font-weight: bold;
  font-size: 15px;
}

.waiter-id {
  color: #777;
  font-size: 11px;
}

/* Real customer id the app sends on join — shown read-only so the agent knows
   who they're accepting. */
.waiter-cust-id {
  margin-top: 4px;
  font-size: 12px;
  color: #6366f1;
  font-weight: 600;
}

.waiter-btns {
  display: flex;
  gap: 8px;
}

.accept-btn {
  background: #6366f1;
  color: #fff;
  padding: 8px 14px;
}

.reject-btn {
  background: #e53935;
  color: #fff;
  padding: 8px 14px;
}

#empty-queue {
  color: #777;
  font-size: 14px;
  padding: 24px 0;
}

/* ── Customer waiting spinner ── */
.spinner {
  width: 20px;
  height: 20px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top-color: var(--primary-color, #3b82f6);
  border-radius: 50%;
  margin: 24px auto;
  animation: spin 1s linear infinite;
}

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

#wait-status {
  font-size: 16px;
  margin-bottom: 8px;
}

#wait-status.error {
  color: #e53935;
}

.conn-pill {
  font-size: 12px;
  color: #aaa;
  margin-bottom: 18px;
}

/* ── Call screen ── */
#call-screen {
  width: 100%;
  max-width: none;
  height: 100vh;
  /* dvh = dynamic viewport height: excludes the mobile browser's bottom
     toolbar, so fixed-bottom controls aren't hidden behind it. */
  height: 100dvh;
  position: relative;
  background: #000;
}

#remote-video {
  width: 100%;
  height: 100%;
  background: radial-gradient(120% 90% at 50% 35%, rgb(20, 32, 58) 0%, rgb(10, 15, 28) 70%);
  object-fit: contain;
}

/* Traceable anti-leak watermark. Sits above the video + scan overlays (which
   top out ~300) but below global modals/toasts (9999+), so it always lands in
   a screenshot of the call yet never covers login/other screens. The tiled
   text image is injected by startWatermark() in state.js. */
#call-watermark {
  position: absolute;
  inset: 0;
  z-index: 400;
  pointer-events: none;
  display: none;
  background-repeat: repeat;
  background-position: 0 0;
}

/* During a live DOT scan the phone shares its WHOLE screen, so the manager
   would otherwise see the phone status bar / stepper across the top and the
   customer's self-view PIP / call controls / home indicator across the bottom.
   An inset clip removes those bands. inset() order is: top right bottom left.

   CRITICAL: the % must map to the PHONE SCREEN, not the letterboxed element box.
   With object-fit:contain the video letterboxes inside the element, so a fixed
   % drifts per manager-window aspect (it lands on black bars on some screens —
   e.g. Galaxy Fold — leaving the phone bands visible). fitRemoteToContent() in
   kyc.js sizes this element to the video's exact aspect ratio (no letterbox) and
   centers it, so these percentages always crop the same phone-screen bands on
   ANY manager window size. Toggled on only while a scan is live. */
#remote-video.scan-crop {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: fill;
  /* element already matches content aspect → no distortion */
  clip-path: inset(15% 0 34% 0);
}

#remote-video,
#local-video {
  cursor: pointer;
}

#local-video {
  position: absolute;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  right: 16px;
  width: 120px;
  height: 160px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid #fff;
  /* Mirror is applied via .mirrored class (front camera only) */
  z-index: 9;
}

/* Applied when the front (user-facing) camera is active */
#local-video.mirrored {
  transform: scaleX(-1);
}

/* Tap-to-swap: when #call-screen is .swapped the local feed fills the
   screen and the remote feed shows in the small picture-in-picture box. */
#call-screen.swapped #local-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: none;
  border-radius: 0;
  bottom: auto;
  right: auto;
  z-index: 0;
  /* mirroring is still controlled by the .mirrored class */
}

#call-screen.swapped #remote-video {
  position: absolute;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  right: 16px;
  width: 120px;
  height: 160px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid #fff;
  z-index: 5;
}

#controls-manager {
  position: absolute;
  bottom: calc(90px + env(safe-area-inset-bottom, 0px));
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 210;
}

#controls-main {
  position: absolute;
  /* keep the hang-up button clear of the Android nav / browser bottom bar */
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 18px;
  /* stay above the scan preview / video so the manager keeps their controls */
  z-index: 210;
}

/* Customer bar (5 buttons). Explicitly set the order so the red hang-up
   sits perfectly in the center. */
#controls-main.customer #mic-btn {
  order: 1;
}

#controls-main.customer #chat-btn {
  order: 2;
}

#controls-main.customer #hangup-btn {
  order: 3;
}

#controls-main.customer #cam-btn {
  order: 4;
}

#controls-main.customer #switch-cam-btn {
  order: 5;
}

/* Manager bar. The two action buttons (restart-facematch / result-reopen) are
   hidden by default, so the visible set is mic · chat · cam · hangup · help (5)
   — leaving hang-up 4th, not centred. Reorder so it lands 3rd (centre of five):
   mic · chat · 📵 · cam · help. (mic keeps default order 0.) When the hidden
   action buttons appear they slot in after cam, before help. */
#controls-main:not(.customer) #chat-btn {
  order: 1;
}

#controls-main:not(.customer) #hangup-btn {
  order: 2;
}

#controls-main:not(.customer) #cam-btn {
  order: 3;
}

#controls-main:not(.customer) #restart-facematch-btn {
  order: 4;
}

#controls-main:not(.customer) #result-reopen-btn {
  order: 5;
}

#controls-main:not(.customer) #help-btn {
  order: 6;
}

.ctrl-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* anchor for the chat unread dot */
}

/* Unread-chat badge: a small red dot in the corner of the chat button (like the
   Flutter app), instead of replacing the chat icon. Hidden until there's an
   unread message; the border matches the button bg so it reads as a badge. */
.unread-dot {
  display: none;
  position: absolute;
  top: 8px;
  right: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e53935;
  border: 2px solid #424242;
}

.unread-dot.show {
  display: block;
}

.ctrl-btn.red {
  background: #e53935;
  color: #fff;
}

.ctrl-btn.grey {
  color: #fff;
  background: #424242;
}

#status {
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 14px;
  color: #aaa;
}

/* ── KYC progress stepper ──────────────────────────────────────────────
   Floating pill over the top of the call screen. Each step is a dot + label;
   the connectors between dots fill in as earlier steps complete. */
#kyc-stepper {
  display: none;
  /* toggled to flex by stepper.js once the call connects */
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  align-items: flex-start;
  gap: 0;
  padding: 12px 16px 10px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 14px;
  z-index: 180;
  max-width: calc(100% - 24px);
  pointer-events: none;
}

.kyc-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 84px;
  text-align: center;
}

.kyc-step-dot {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  border: 2px solid rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 700;
  transition: background .25s, border-color .25s, color .25s;
}

.kyc-step-num {
  line-height: 1;
}

.kyc-step-check {
  display: none;
  width: 16px;
  height: 16px;
  color: #fff;
}

.kyc-step-label {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.65);
  transition: color .25s;
}

/* Connector between two steps — sits level with the dot centres (half of the
   26px dot = 13px) and grows to fill the gap. */
.kyc-step-line {
  flex: 1;
  min-width: 16px;
  height: 2px;
  margin-top: 13px;
  background: rgba(255, 255, 255, 0.25);
  transition: background .25s;
}

.kyc-step-line.filled {
  background: var(--primary-color, #3b82f6);
}

/* Active: the step currently in progress — highlighted ring, brighter label. */
.kyc-step.active .kyc-step-dot {
  border-color: var(--primary-color, #3b82f6);
  color: #fff;
  background: color-mix(in srgb, var(--primary-color, #3b82f6) 30%, transparent);
}

.kyc-step.active .kyc-step-label {
  color: #fff;
}

/* Brief zoom pulse the moment a step becomes active, cueing the manager that
   the flow advanced (mirrors the customer's stepper animation). */
@keyframes kyc-step-pop {
  0% {
    transform: scale(1.3);
  }

  100% {
    transform: scale(1);
  }
}

.kyc-step.active {
  animation: kyc-step-pop 600ms ease-out;
}

/* Done: solid blue dot with a white check, matching the customer checklist. */
.kyc-step.done .kyc-step-dot {
  background: var(--primary-color, #3b82f6);
  border-color: var(--primary-color, #3b82f6);
  color: #fff;
}

.kyc-step.done .kyc-step-num {
  display: none;
}

.kyc-step.done .kyc-step-check {
  display: block;
}

.kyc-step.done .kyc-step-label {
  color: #fff;
}

/* ── Face verification status panel ──────────────────────────────────────
   Centered card over the (often black) customer video that tells the manager
   exactly what's happening during the face match step and what to do. */
#face-status-panel {
  display: none;
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: min(86%, 320px);
  padding: 10px 22px;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  color: #fff;
  text-align: center;
  z-index: 240;
}

#face-status-panel.show {
  display: flex;
}

#face-status-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  color: #aaa;
  font-size: 16px;
  line-height: 1;
  padding: 4px;
  cursor: pointer;
}

.fs-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

#face-status-icon {
  font-size: 40px;
  line-height: 1;
}

#face-status-title {
  font-size: 17px;
  font-weight: 700;
}

#face-status-msg {
  font-size: 13px;
  color: #cfcfcf;
  line-height: 1.4;
}

#face-status-action {
  margin-top: 4px;
  background: #6366f1;
  color: #fff;
  padding: 11px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}

/* Secondary action — go back to step 2 and re-scan the document. */
#face-status-rescan {
  background: transparent;
  color: #cfcfcf;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
}

/* ── No-share scan placeholder (shown when the phone isn't screen-sharing) ──
   Covers the paused remote video with a polished animated "scanning…" card.
   Above the video, below the controls/stepper. The .variant-document /
   .variant-face class picks which illustration shows. */
#scan-placeholder {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 8;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 24px;
  text-align: center;
  background: radial-gradient(120% 90% at 50% 35%, #14203a 0%, #0a0f1c 70%);
  color: #fff;
}

#scan-placeholder.show {
  display: flex;
}

/* The framed "scanner" stage with corner brackets + sweeping beam. */
.scan-ph-stage {
  position: relative;
  width: 200px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.scan-ph-corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 3px solid #6366f1;
}

.scan-ph-corner.tl {
  top: 8px;
  left: 8px;
  border-right: 0;
  border-bottom: 0;
  border-top-left-radius: 8px;
}

.scan-ph-corner.tr {
  top: 8px;
  right: 8px;
  border-left: 0;
  border-bottom: 0;
  border-top-right-radius: 8px;
}

.scan-ph-corner.bl {
  bottom: 8px;
  left: 8px;
  border-right: 0;
  border-top: 0;
  border-bottom-left-radius: 8px;
}

.scan-ph-corner.br {
  bottom: 8px;
  right: 8px;
  border-left: 0;
  border-top: 0;
  border-bottom-right-radius: 8px;
}

/* Sweeping scan beam. */
.scan-ph-beam {
  position: absolute;
  left: 14px;
  right: 14px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #4f8bff, transparent);
  box-shadow: 0 0 12px 2px rgba(79, 139, 255, 0.7);
  animation: scanBeam 2s ease-in-out infinite;
}

@keyframes scanBeam {
  0% {
    top: 22px;
    opacity: 0.2;
  }

  50% {
    top: calc(100% - 24px);
    opacity: 1;
  }

  100% {
    top: 22px;
    opacity: 0.2;
  }
}

/* Document illustration. */
.scan-ph-doc {
  width: 116px;
  height: 78px;
  border-radius: 8px;
  background: #eef2fb;
  display: flex;
  gap: 9px;
  padding: 12px;
  align-items: center;
}

.scan-ph-doc .doc-photo {
  width: 34px;
  height: 42px;
  border-radius: 4px;
  background: #c3cfe6;
  flex: none;
}

.scan-ph-doc .doc-lines {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}

.scan-ph-doc .doc-lines span {
  height: 6px;
  border-radius: 3px;
  background: #c3cfe6;
}

.scan-ph-doc .doc-lines span:nth-child(2) {
  width: 85%;
}

.scan-ph-doc .doc-lines span:nth-child(3) {
  width: 70%;
}

.scan-ph-doc .doc-lines span:nth-child(4) {
  width: 55%;
}

/* Face illustration (smile/liveness Lottie). */
.scan-ph-face {
  width: 110px;
  height: 110px;
  color: #cdd9f2;
}

.scan-ph-face svg,
.scan-ph-face #scan-ph-face-lottie {
  width: 100%;
  height: 100%;
}

/* Variant switch. */
#scan-placeholder.variant-document .scan-ph-face,
#scan-placeholder.variant-face .scan-ph-doc {
  display: none;
}

.scan-ph-title {
  font-size: 17px;
  font-weight: 600;
  max-width: 320px;
}

.scan-ph-sub {
  font-size: 13px;
  color: #9fb0cc;
  max-width: 300px;
}

.scan-ph-dots i {
  animation: scanDots 1.4s infinite;
  font-style: normal;
}

.scan-ph-dots i:nth-child(2) {
  animation-delay: 0.2s;
}

.scan-ph-dots i:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes scanDots {

  0%,
  100% {
    opacity: 0.2;
  }

  50% {
    opacity: 1;
  }
}

/* ── Live document-scan preview (manager sees the customer's DOT scan) ───── */
/* Opaque cover over the remote video while a scan first mounts, hiding the DOT
   camera's landscape first-frame flash. Above the video, below the controls. */
#scan-cover {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 7;
  background: #000;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #fff;
  font-size: 15px;
}

#scan-cover.show {
  display: flex;
}

#scan-preview {
  display: none;
  position: absolute;
  inset: 0;
  /* The scan now arrives as live screen-share on the remote video underneath,
     so this layer is transparent and click-through — it only carries the badge.
     Below the controls (210), cards and stepper. */
  z-index: 6;
  background: transparent;
  pointer-events: none;
  align-items: center;
  justify-content: center;
}

#scan-preview.show {
  display: flex;
}

#scan-preview-label {
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 10px;
  /* background: black; */
  -webkit-backdrop-filter: blur(4px);
  /* backdrop-filter: blur(4px); */
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

/* ── Automated verification result overlay ──────────────────────────────── */
#result-panel {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 300;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8, 15, 30, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

#result-panel.show {
  display: flex;
}

.result-card {
  position: relative;
  width: 100%;
  max-width: 540px;
  max-height: 90%;
  overflow-y: auto;
  background: #fff;
  color: #0f172a;
  border-radius: 22px;
  padding: 28px 26px 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  animation: result-in .42s cubic-bezier(.2, .8, .25, 1) both;
}

@keyframes result-in {
  from {
    opacity: 0;
    transform: translateY(24px) scale(.94);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

#result-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 18px;
  cursor: pointer;
}

.result-title {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 20px;
}

.result-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f1f5fb;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
  /* staggered entrance */
  animation: result-row-in .4s cubic-bezier(.2, .8, .25, 1) both;
  animation-delay: calc(var(--i) * 80ms + 120ms);
}

@keyframes result-row-in {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.result-row-ic {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #dbe7fb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.result-row-label {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
}

.result-pill {
  font-size: 13px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 999px;
  color: #fff;
}

.result-pill.pass {
  background: linear-gradient(135deg, rgb(122 219 126), #4CAF50);
}

.result-pill.fail {
  background: #e53935;
}

.result-pill.na {
  background: #94a3b8;
}

.result-verdict {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 20px auto 4px;
  padding: 14px 22px;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  width: fit-content;
  animation: result-in .5s cubic-bezier(.2, .8, .25, 1) both;
  animation-delay: .45s;
}

.result-verdict.ok {
  background: linear-gradient(135deg, #6aa0f5, #6366f1);
}

.result-verdict.review {
  background: linear-gradient(135deg, #f4a23c, #ef6c00);
}

/* Success verdict + the "Mark as Approve" call-to-action, stacked. */
.result-cta {
  margin: 20px auto 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  animation: result-in .5s cubic-bezier(.2, .8, .25, 1) both;
  animation-delay: .45s;
}

.result-cta-ok {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #6aa0f5, #6366f1);
}

.approve-cta {
  max-width: 250px;
  width: 100%;
  padding: 14px 0;
  border: none;
  border-radius: 14px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(135deg, #43a047, #2e7d32);
  box-shadow: 0 6px 16px rgba(46, 125, 50, .35);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

.approve-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(46, 125, 50, .45);
}

.approve-cta:active {
  transform: translateY(0);
}

.approve-cta:disabled {
  opacity: .6;
  cursor: default;
  box-shadow: none;
  transform: none;
  background: linear-gradient(135deg, #66bb6a, #43a047);
}

.result-actions {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}

.result-action {
  flex: 1;
  padding: 12px 0;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.result-action.approve {
  background: #2e7d32;
}

.result-action.reverify {
  background: #ef6c00;
}

.result-action.reject {
  background: #c62828;
}

#result-status {
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  min-height: 16px;
}

/* ── Chat panel ── */
#chat-panel {
  display: none;
  position: absolute;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  left: 0;
  /* right: 0; */
  height: 300px;
  background: rgba(0, 0, 0, 0.88);
  flex-direction: column;
  border-top: 1px solid #333;
  z-index: 150;
}

#chat-panel.open {
  display: flex;
}

#chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chat-msg {
  max-width: 75%;
  padding: 7px 12px;
  border-radius: 12px;
  font-size: 13px;
  word-break: break-word;
  line-height: 1.4;
}

.chat-msg.mine {
  align-self: flex-end;
  background: #2e7d32;
  color: #fff;
}

.chat-msg.theirs {
  align-self: flex-start;
  background: #424242;
  color: #fff;
}

.chat-empty {
  color: #555;
  font-size: 13px;
  text-align: center;
  margin-top: 20px;
}

#chat-input-row {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid #333;
}

#chat-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 14px;
  outline: none;
}

#chat-input::placeholder {
  color: #666;
}

#chat-send-btn {
  background: #2e7d32;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Document scan card ── */
#doc-card {
  display: none;
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(0, 0, 0, 0.88);
  border: 1.5px solid #6366f1;
  border-radius: 10px;
  padding: 14px 16px;
  color: #fff;
  min-width: 270px;
  max-width: 340px;
  z-index: 200;
  font-size: 13px;
}

#doc-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

#doc-card-title {
  color: #6366f1;
  font-weight: bold;
  font-size: 14px;
}

#doc-card-close {
  background: none;
  color: #aaa;
  font-size: 18px;
  line-height: 1;
}

.doc-row {
  display: flex;
  gap: 6px;
  margin-bottom: 5px;
}

.doc-label {
  color: #aaa;
  min-width: 110px;
  flex-shrink: 0;
}

.doc-value {
  font-weight: 600;
  word-break: break-all;
}

/* ── First-run coach tour ── */
#tour-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
}

/* The spotlight is a transparent box; its huge box-shadow dims everything
   around it, creating a cut-out highlight over the targeted button. */
#tour-spotlight {
  position: fixed;
  border-radius: 14px;
  border: 2px solid #6366f1;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.72);
  transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease;
  pointer-events: none;
}

#tour-tooltip {
  position: fixed;
  width: 270px;
  background: #1e1e1e;
  border: 1px solid #6366f1;
  border-radius: 10px;
  padding: 14px 16px;
  z-index: 10000;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}

.tour-title {
  color: #6366f1;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 6px;
}

.tour-text {
  color: #ddd;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 12px;
}

.tour-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tour-counter {
  color: #888;
  font-size: 12px;
}

.tour-skip {
  background: #333;
  color: #bbb;
  padding: 7px 12px;
  font-size: 13px;
}

.tour-next {
  background: #6366f1;
  color: #fff;
  padding: 7px 14px;
  font-size: 13px;
}

/* ════════════ Light "Establishing Secure Connection" host screen ════════════
   The manager's copy-link screen is redesigned as a light card (matching the
   provided screenshot) while the rest of the app stays dark. All rules are
   scoped under #host-screen / .host-light so no other screen is affected. */
#host-screen.host-light {
  max-width: 520px;
}

.connect-card {
  margin: 30px 0px;
  position: relative;
  background: #ffffff;
  border-radius: 22px;
  padding: 34px 26px 28px;
  box-shadow: 0 24px 60px rgba(10, 22, 51, 0.45);
  overflow: hidden;
  animation: card-in .5s cubic-bezier(.2, .8, .25, 1) both;
  /* subtle dotted pattern like the screenshot */
  background-image: radial-gradient(rgba(60, 110, 245, 0.07) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
  background-position: -8px -8px;
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* gradient ring spinner (conic gradient + ring mask) */
.grad-spinner {
  width: 78px;
  height: 78px;
  margin: 6px auto 22px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
      var(--primary-color, #3b82f6) 0deg,
      rgba(255, 255, 255, 0.4) 140deg,
      rgba(255, 255, 255, 0) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 8px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 8px));
  animation: grad-spin 1s linear infinite;
}

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

.connect-title {
  color: #16213a;
  font-size: 21px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 6px;
}

.connect-sub {
  color: #8a93a5;
  font-size: 13px;
  text-align: center;
  margin-bottom: 22px;
}

.connect-name {
  text-align: center;
  margin: -14px 0 18px;
}

.connect-name:empty {
  display: none;
}

.connect-name span {
  display: inline-block;
  background: #eef3ff;
  color: #6366f1;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
}

/* prep tips — animated staggered entrance */
.tips {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 22px;
}

.tip-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #ffffff;
  border: 1px solid #eceff5;
  border-radius: 14px;
  padding: 13px 15px;
  text-align: left;
  color: #2c3550;
  font-size: 15px;
  box-shadow: 0 2px 10px rgba(20, 33, 61, 0.04);
  opacity: 0;
  animation: tip-in .5s cubic-bezier(.2, .8, .25, 1) both;
  animation-delay: calc(var(--i) * 130ms + 180ms);
}

@keyframes tip-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tip-ic {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #e9f0ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6366f1;
}

.tip-ic svg {
  width: 20px;
  height: 20px;
}

/* share link box */
.share-box {
  background: #f7f9fc;
  border: 1px solid #eceff5;
  border-radius: 14px;
  padding: 14px 15px;
  text-align: left;
  margin-bottom: 18px;
  opacity: 0;
  animation: tip-in .5s cubic-bezier(.2, .8, .25, 1) both;
  animation-delay: calc(3 * 130ms + 180ms);
}

.share-box small {
  display: block;
  color: #6b7384;
  font-size: 12px;
  margin-bottom: 8px;
}

#host-screen .link-row input {
  background: #ffffff;
  border: 1px solid #d8deea;
  color: var(--primary-color, #3b82f6);
  font-weight: 600;
}

.btn-copy {
  background: var(--primary-color, #3b82f6);
  color: #fff;
  padding: 9px 16px;
  font-weight: 600;
  font-size: 13px;
  transition: background .15s, transform .1s;
}

.btn-copy:hover {
  background: #2f5fe0;
}

.btn-copy:active {
  transform: scale(.95);
}

.btn-copy.copied {
  background: #1faa5d;
}

.share-note {
  color: #9aa2b1;
  font-size: 11px;
  margin-top: 9px;
}

/* waiting customers section (light) */
.waiting-section {
  text-align: left;
  opacity: 0;
  animation: tip-in .5s cubic-bezier(.2, .8, .25, 1) both;
  animation-delay: calc(4 * 130ms + 180ms);
}

.waiting-title {
  color: #16213a;
  font-size: 15px;
  margin-bottom: 10px;
}

#host-screen .waiter {
  background: #f7f9fc;
  border: 1px solid #eceff5;
  border-radius: 12px;
  animation: tip-in .35s ease both;
}

#host-screen .waiter-name {
  color: #16213a;
}

#host-screen .waiter-id {
  color: #9aa2b1;
}

#host-screen #empty-queue {
  color: #9aa2b1;
  text-align: center;
}

#host-screen .accept-btn {
  background: #1faa5d;
}

#host-screen .reject-btn {
  background: #e5484d;
}

/* ── KYC records viewer (manager) ── */
.btn-records {
  margin-top: 18px;
  width: 100%;
  padding: 12px;
  background: #0f172a;
  color: #fff;
  border-radius: 10px;
  font-weight: 600;
}

/* Full-screen records view (opens over the whole screen, like the other
   screens — not a small centered card). */
.records-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 300;
  overflow-y: auto;
}

.records-modal.show {
  display: block;
}

.records-card {
  position: relative;
  background: #fff;
  color: #0f172a;
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  margin: 0 auto;
  padding: 0 18px 28px;
  text-align: left;
}

/* Title + refresh (stacked, left) and the close button (right), in one row
   pinned to the top while the list scrolls. */
.records-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0 12px;
  background: #fff;
  border-bottom: 1px solid #eef2f7;
  margin-bottom: 14px;
}

.records-header-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.records-title {
  margin: 0;
}

/* Fixed so it stays reachable while the list scrolls full-screen. */
.records-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #334155;
  font-size: 15px;
}

.btn-records-refresh {
  background: #eef2ff;
  color: #6366f1;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
}

.records-empty {
  color: #64748b;
  font-size: 14px;
  padding: 24px 0;
  text-align: center;
}

.record-item {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
  /* Soft gradient background; alternates per card (see nth-child below). */
  background: linear-gradient(135deg, #eef4ff, #f8fafc);
}

/* Alternate the gradient tint between consecutive cards. */
.record-item:nth-child(odd) {
  background: linear-gradient(135deg, #d3e7f0, #f8fafc);
}

.record-item:nth-child(even) {
  background: linear-gradient(135deg, #d0e2f0, #f8fafc);
}

.record-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.record-name {
  font-weight: 700;
  font-size: 25px;
  color: #000;
}

.record-id {
  color: #94a3b8;
  font-weight: 400;
  font-size: 12px;
}

.record-date {
  color: #64748b;
  font-size: 12px;
  white-space: nowrap;
}

/* Small grey meta line under the record header (room / customer ids). */
.rk-meta {
  font-size: 11px;
  color: #94a3b8;
  margin: 2px 0 10px;
}

/* A labelled section (Presence / Document / Face). */
/* The three sections (Presence / Document / Face) sit side by side as columns,
   separated by vertical dividers. */
.rk-sections {
  display: flex;
  align-items: stretch;
  margin-top: 12px;
}

.rk-section {
  min-width: 0;
  padding: 0 14px;
}

.rk-section:nth-child(1) {
  flex: 1 1 22%;
}

.rk-section:nth-child(2) {
  flex: 2.5 1 56%;
}

.rk-section:nth-child(3) {
  flex: 0.8 1 22%;
}

.rk-section:first-child {
  padding-left: 0;
}

.rk-section:last-child {
  padding-right: 0;
}

/* Vertical divider between columns. */
.rk-section+.rk-section {
  border-left: 1px solid #e0dada;
}

/* On narrow screens, stack the columns and switch to horizontal dividers. */
@media (max-width: 540px) {
  .rk-sections {
    flex-direction: column;
  }

  .rk-section {
    padding: 12px 0 0;
  }

  .rk-section:first-child {
    padding-top: 0;
  }

  .rk-section+.rk-section {
    border-left: none;
    border-top: 1px solid #eef2f7;
  }
}

.rk-section-head {
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  gap: 8px;
  margin-bottom: 6px;
}

.rk-title {
  font-weight: 700;
  font-size: 13px;
  color: #0f172a;
}

.rk-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.rk-fields {
  flex: 1 1 0;
  min-width: 0;
}

.rk-field {
  display: flex;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.8;
  margin-bottom: 5px;
}

.rk-label {
  color: #64748b;
  width: 120px;
  line-height: 1.4;
}

.rk-val {
  color: #0f172a;
  font-weight: 600;
  word-break: break-word;
  flex: 1;
  min-width: 0;
  text-align: left;
}

.record-imgs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.record-imgs img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.record-pill {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.record-pill.pass {
  background: #dcfce7;
  color: #166534;
}

.record-pill.fail {
  background: #fee2e2;
  color: #991b1b;
}

/* ════════════ IN-CALL "new customer waiting" toasts ════════════
   Shown at the top of the call screen when someone joins the waiting room while
   the manager is already on a call (they can't see the waiting list then). */
#call-waiting-toasts {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
  width: max-content;
  max-width: 92%;
}

.call-waiting-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(20, 24, 38, 0.94);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  font-size: 13px;
  backdrop-filter: blur(6px);
  animation: call-toast-in 0.25s ease both;
}

.call-waiting-toast.leaving {
  animation: call-toast-out 0.25s ease both;
}

.call-waiting-toast .ct-ic {
  font-size: 20px;
  line-height: 1;
}

.call-waiting-toast .ct-info {
  margin-right: 4px;
}

.call-waiting-toast .ct-name {
  font-weight: 700;
}

.call-waiting-toast .ct-id {
  color: #9fd0ff;
  font-size: 12px;
  margin-top: 2px;
}

/* Action area: Accept/Reject (reusing the waiting-list button styles) and the
   "disconnect & switch" confirmation that replaces them on Accept. */
.call-waiting-toast .ct-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}

.call-waiting-toast .ct-actions .accept-btn,
.call-waiting-toast .ct-actions .reject-btn {
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 7px 12px;
}

.call-waiting-toast .ct-actions>.accept-btn,
.call-waiting-toast .ct-actions>.reject-btn {
  display: inline-flex;
  justify-content: center;
}

.call-waiting-toast .ct-confirm {
  font-size: 12px;
  color: #ffd9a8;
  max-width: 220px;
}

.call-waiting-toast .ct-confirm-btns {
  display: flex;
  gap: 6px;
}

.call-waiting-toast .ct-confirm-btns .accept-btn,
.call-waiting-toast .ct-confirm-btns .reject-btn {
  flex: 1;
}

@keyframes call-toast-in {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes call-toast-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-12px);
  }
}

/* ═══════════════════════════════════════════════════════
   INNOVATRICS FULLSCREEN CAPTURE — RESPONSIVE LAYOUT FIX
   Force the web-component internals to fill the viewport
   at every screen size and device orientation.
   ═══════════════════════════════════════════════════════ */
#manual-pan-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
}

/* The inner wrapper and both injection containers */
#manual-pan-overlay>div,
#innovatrics-container,
#innovatrics-selfie-container {
  width: 100% !important;
  height: 100% !important;
}

/* The web-components themselves */
x-dot-document-auto-capture,
x-dot-document-auto-capture-ui,
x-dot-face-auto-capture,
x-dot-face-auto-capture-ui {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

/* The internal div the SDK renders (contains the <video>) */
x-dot-document-auto-capture>div,
x-dot-face-auto-capture>div {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
}

/* The actual <video> element — cover + fill */
#dot-auto-capture-video,
x-dot-document-auto-capture video,
x-dot-face-auto-capture video {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* The UI overlay wrapper — must exactly match the video layer */
x-dot-document-auto-capture-ui>div,
x-dot-face-auto-capture-ui>div {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Ensure SVG placeholder/mask scales to fit the overlay */
x-dot-document-auto-capture-ui svg,
x-dot-face-auto-capture-ui svg {
  width: 100% !important;
  height: 100% !important;
}

/* --- Split Screen Manager Login (Light Theme Right) --- */
#login-screen.active {
  display: flex !important;
  width: 100vw;
  height: 100vh;
  max-width: none;
  background: #f8fafc;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
}

.login-split-left {
  flex: 1;
  background-color: #1d3f76;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.login-split-right {
  flex: 1;
  background-color: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Left Panel Decor */
.circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.02);
}

.c1 {
  width: 400px;
  height: 400px;
  top: -100px;
  right: -100px;
}

.c2 {
  width: 300px;
  height: 300px;
  bottom: -50px;
  left: -50px;
}

.c3 {
  width: 150px;
  height: 150px;
  top: 20%;
  left: 10%;
}

.login-left-content {
  text-align: center;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.shield-container {
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.login-left-content h2 {
  font-size: 32px;
  color: #fff;
  line-height: 1.3;
  font-weight: 700;
  margin-bottom: 16px;
}

.login-left-content p {
  color: #94a3b8;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 40px;
}

.pill-container {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.pill {
  background: rgba(255, 255, 255, 0.08);
  padding: 8px 16px;
  border-radius: 20px;
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Right Panel Login Card (Light Theme) */
.login-card-modern {
  width: 100%;
  max-width: 440px;
  background: #ffffff;
  border-radius: 24px;
  padding: 48px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.brand-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
}

.brand-logo {
  height: auto;
  filter: invert(1);
}

.brand-text {
  color: #0f172a;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 2px;
}

.login-header-icon {
  width: 56px;
  height: 56px;
  background: var(--primary-color, #3b82f6);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px auto;
  transition: background 0.2s ease;
}

.login-header-icon svg {
  stroke: #ffffff;
}

.login-card-modern h3 {
  color: #0f172a;
  font-size: 24px;
  text-align: center;
  margin-bottom: 8px;
  font-weight: 600;
}

.login-card-modern .sub-text {
  color: #64748b;
  font-size: 14px;
  text-align: center;
  margin-bottom: 32px;
}

.input-group {
  margin-bottom: 24px;
  text-align: left;
}

.input-group label {
  display: block;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 16px;
  color: var(--primary-color, #3b82f6);
  display: flex;
  align-items: center;
}

.input-suffix {
  position: absolute;
  right: 16px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: color 0.2s;
}

.input-suffix:hover {
  color: #64748b;
}

.input-wrapper input {
  width: 100%;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 14px 44px;
  color: #0f172a;
  font-size: 15px;
  outline: none;
  transition: all 0.2s;
  box-sizing: border-box;
}

.input-wrapper input:focus {
  border-color: var(--primary-color, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.input-wrapper input::placeholder {
  color: #94a3b8;
}

.btn-signin-modern {
  width: 100%;
  background: var(--primary-color, #3b82f6);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 16px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.2s;
}

.btn-signin-modern:hover {
  background: var(--primary-color, #3b82f6);
}

@media (max-width: 900px) {
  .login-split-left {
    display: none;
  }

  .login-split-right {
    padding: 20px;
  }

  .login-card-modern {
    padding: 30px 20px;
  }
}

/* ════════════ MANAGER ADMIN-STYLE DASHBOARD SPLIT LAYOUT ════════════ */
#create-room-screen.manager-dashboard-layout.active {
  display: flex !important;
  flex-direction: row !important;
  width: 100vw !important;
  min-height: 100vh !important;
  height: 100vh !important;
  background: #f8fafc !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  max-width: 100% !important;
  text-align: left !important;
}

body:has(#create-room-screen.active) {
  justify-content: flex-start !important;
  align-items: flex-start !important;
  overflow: hidden !important;
}

.manager-sidebar {
  width: 270px;
  min-width: 270px;
  background: #0f172a;
  color: #f8fafc;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #1e293b;
  flex-shrink: 0;
  height: 100vh;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
}

.manager-sidebar-brand {
  padding: 24px 20px;
  border-bottom: 1px solid #1e293b;
}

.brand-logo-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-title {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.5px;
}

.brand-subtitle {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-top: 4px;
}

.manager-sidebar-nav {
  padding: 20px 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
}

.nav-section-title {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 1px;
  margin-bottom: 8px;
  padding-left: 8px;
}

.manager-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: #94a3b8;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  width: 100%;
}

.manager-nav-item:hover {
  background: #1e293b;
  color: #ffffff;
}

.manager-nav-item.active {
  background: #2563eb;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.nav-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  background: #1e293b;
  color: #94a3b8;
  margin-left: auto;
}

.manager-nav-item.active .nav-badge {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.manager-sidebar-footer {
  padding: 16px 14px 24px 14px;
  border-top: 1px solid #1e293b;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.manager-footer-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  border: none;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
}

.btn-kyc-records {
  background: #1e293b;
  color: #e2e8f0;
  border: 1px solid #334155;
}

.btn-kyc-records:hover {
  background: #334155;
  color: #ffffff;
}

.btn-manager-logout {
  background: #ef4444;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
}

.btn-manager-logout:hover {
  background: #dc2626;
}

.manager-main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: #f8fafc;
}

.manager-top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 28px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.header-title {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.5px;
}

.header-sub {
  font-size: 13px;
  color: #64748b;
  margin: 2px 0 0 0;
}

.manager-profile-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}

.user-status-dot {
  color: #10b981;
  font-size: 12px;
}

.btn-refresh-dashboard {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #2563eb;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-refresh-dashboard:hover {
  background: #eff6ff;
  border-color: #93c5fd;
}

.manager-cards-scroll-container {
  flex: 1;
  padding: 28px;
  overflow-y: auto;
}