@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Sora:wght@600;700;800&display=swap');

:root{
  --seon-teal:#00C1B6;
  --seon-navy:#05052A;
  --seon-navy-2:#0b0b3a;
  --risk-low:#1FC98B;
  --risk-medium:#F5A623;
  --risk-high:#F5484B;
  --panel-bg:rgba(255,255,255,0.04);
  --panel-border:rgba(255,255,255,0.10);
  font-family:'Inter',system-ui,sans-serif;
}
body{
  background:radial-gradient(1200px 700px at 15% -10%, #10104a 0%, var(--seon-navy) 55%);
  color:#eef0fb;
  min-height:100vh;
}
h1,h2,h3,.brand-font{ font-family:'Sora',system-ui,sans-serif; }

/* ── Kiosk shell ─────────────────────────────────────────────────────────── */
.kiosk-shell{ max-width:1500px; margin:0 auto; padding:28px 20px 60px; }
.kiosk-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; flex-wrap:wrap; gap:12px;}
.kiosk-header img{ height:36px; }
.kiosk-title{ font-size:1.5rem; font-weight:700; letter-spacing:.2px; }
.kiosk-sub{ color:#a9adcf; font-size:.95rem; }

.slots-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width: 980px){ .slots-grid{ grid-template-columns:1fr; } }
.slots-grid.single-mode{ grid-template-columns:minmax(0,640px); justify-content:center; max-width:640px; margin:0 auto; }

.slot-card{
  background:var(--panel-bg);
  border:1px solid var(--panel-border);
  border-radius:20px;
  padding:26px;
  position:relative;
  overflow:hidden;
  min-height:520px;
  display:flex; flex-direction:column;
}
.slot-card.lite{ border-top:3px solid var(--seon-teal); }
.slot-card.kyc{ border-top:3px solid #7c6dfb; }

.slot-kicker{ text-transform:uppercase; font-size:.72rem; letter-spacing:1.4px; color:#8d92c2; font-weight:600; }
.slot-heading{ font-size:1.35rem; font-weight:700; margin:4px 0 4px; }
.slot-desc{ color:#a9adcf; font-size:.9rem; margin-bottom:18px; }

.qr-frame{
  background:#fff; border-radius:16px; padding:18px;
  display:flex; align-items:center; justify-content:center;
  width:246px; height:246px; margin:6px auto 18px;
  box-shadow:0 0 0 0 rgba(0,193,182,.55);
  animation:qr-pulse 2.6s infinite;
}
.slot-card.kyc .qr-frame{ box-shadow:0 0 0 0 rgba(124,109,251,.55); animation:qr-pulse-kyc 2.6s infinite; }
@keyframes qr-pulse{ 0%{box-shadow:0 0 0 0 rgba(0,193,182,.45);} 70%{box-shadow:0 0 0 18px rgba(0,193,182,0);} 100%{box-shadow:0 0 0 0 rgba(0,193,182,0);} }
@keyframes qr-pulse-kyc{ 0%{box-shadow:0 0 0 0 rgba(124,109,251,.45);} 70%{box-shadow:0 0 0 18px rgba(124,109,251,0);} 100%{box-shadow:0 0 0 0 rgba(124,109,251,0);} }
.qr-frame.locked{ animation:none; box-shadow:none; opacity:.35; }

.qr-link{ display:block; text-align:center; font-size:.78rem; color:#8d92c2; word-break:break-all; margin-bottom:6px; }
.slot-status-row{ display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:6px; }
.status-dot{ width:9px; height:9px; border-radius:50%; background:#4b4f78; }
.status-dot.active{ background:var(--seon-teal); box-shadow:0 0 8px var(--seon-teal); }
.status-dot.busy{ background:#F5A623; box-shadow:0 0 8px #F5A623; }
.status-dot.done-low{ background:var(--risk-low); }
.status-dot.done-medium{ background:var(--risk-medium); }
.status-dot.done-high{ background:var(--risk-high); }

/* progress tracker */
.progress-track{ margin-top:8px; }
.progress-step{ display:flex; gap:10px; align-items:flex-start; padding:7px 0; font-size:.85rem; color:#c7cae6; opacity:.4; }
.progress-step.done{ opacity:1; }
.progress-step .dot{ width:8px; height:8px; border-radius:50%; background:#4b4f78; margin-top:5px; flex:0 0 auto; }
.progress-step.done .dot{ background:var(--seon-teal); }

.reset-btn{ position:absolute; top:16px; right:16px; }

/* ── Result cards (analyst detail) ─────────────────────────────────────── */
.risk-chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:100px; font-weight:600; font-size:.78rem; }
.risk-chip.low{ background:rgba(31,201,139,.15); color:var(--risk-low); }
.risk-chip.medium{ background:rgba(245,166,35,.15); color:var(--risk-medium); }
.risk-chip.high{ background:rgba(245,72,75,.15); color:var(--risk-high); }
.risk-chip.approved{ background:rgba(31,201,139,.15); color:var(--risk-low); }
.risk-chip.declined{ background:rgba(245,72,75,.15); color:var(--risk-high); }
.risk-chip.review, .risk-chip.pending{ background:rgba(245,166,35,.15); color:var(--risk-medium); }
.risk-chip.unknown, .risk-chip.expired, .risk-chip.error{ background:rgba(180,184,220,.15); color:#c7cae6; }

.result-scroll{ overflow-y:auto; max-height:400px; padding-right:4px; }

.detail-section{ border:1px solid var(--panel-border); border-radius:14px; margin-bottom:10px; background:rgba(255,255,255,.02); }
.detail-section > .sec-head{ padding:12px 16px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; }
.detail-section > .sec-head .sec-title{ font-weight:600; font-size:.92rem; }
.detail-section > .sec-body{ padding:0 16px 14px; font-size:.84rem; color:#c7cae6; }
.kv-row{ display:flex; justify-content:space-between; gap:12px; padding:5px 0; border-bottom:1px dashed #e3e5f0; }
.kv-row .k{ color:#8b90ad; flex:0 1 auto; min-width:0; font-size:.85rem; }
.kv-row .v{
  text-align:right; font-weight:600; flex:1 1 auto; min-width:0; color:#161832;
  word-break:break-all; overflow-wrap:anywhere; font-size:.85rem;
}
.profile-highlight-card{ background:#f4f5fa; border-radius:10px; padding:10px 12px; margin-bottom:8px; overflow:hidden; }
.profile-highlight-head{ margin-bottom:6px; }
.profile-photo-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:4px 0; }
.profile-photo{
  width:52px; height:52px; border-radius:8px; object-fit:cover; display:block;
  border:1px solid #e3e5f0; flex:0 0 auto;
}
.check-pill{ display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:8px; background:rgba(255,255,255,.05); font-size:.78rem; margin:3px 4px 0 0; }
.check-pill.pass{ color:var(--risk-low); } .check-pill.fail{ color:var(--risk-high); } .check-pill.na{ color:#8d92c2; }
.warn-tag{ display:inline-block; background:rgba(245,166,35,.12); color:var(--risk-medium); padding:3px 9px; border-radius:8px; font-size:.78rem; margin:3px 4px 0 0; }

/* ── Insight cards (light theme, matches SEON dashboard reference) ─────── */
.insight-card{
  background:#fff; border-radius:16px; padding:22px 24px; margin-bottom:14px;
  box-shadow:0 1px 3px rgba(0,0,0,.08); color:#1a1d3a;
  animation:cardFadeIn .45s cubic-bezier(.22,.9,.32,1) both;
}
@keyframes cardFadeIn{
  from{ opacity:0; transform:translateY(10px) scale(.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.insight-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:10px; }
.insight-kicker{ text-transform:uppercase; font-size:.68rem; letter-spacing:1.2px; color:#8b90ad; font-weight:700; }
.insight-title{ font-size:1.15rem; font-weight:700; color:#161832; margin-top:2px; }
.insight-title i{ margin-right:8px; color:#161832; }
.insight-badge{ padding:5px 14px; border-radius:100px; font-weight:700; font-size:.8rem; white-space:nowrap; }
.insight-badge.low{ background:#e3f7ee; color:#1a9a63; }
.insight-badge.medium{ background:#fdeed2; color:#b4740a; }
.insight-badge.high{ background:#fbe3e2; color:#d13b3b; }
.insight-main-value{ font-size:1.4rem; font-weight:700; color:#161832; margin:8px 0 14px; word-break:break-all; }
.insight-score-row{ display:flex; justify-content:space-between; align-items:baseline; font-size:.72rem; letter-spacing:.6px; color:#8b90ad; font-weight:700; text-transform:uppercase; }
.insight-score-num{ font-size:1rem; font-weight:800; color:#161832; }
.insight-score-bar{ height:6px; background:#eceef7; border-radius:100px; margin:6px 0 18px; overflow:hidden; }
.insight-score-bar .fill{ height:100%; border-radius:100px; background:#c7cae6; }
.insight-score-bar .fill.low{ background:#2ecc8f; }
.insight-score-bar .fill.medium{ background:#f5a623; }
.insight-score-bar .fill.high{ background:#f5484b; }
.insight-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:520px){ .insight-grid{ grid-template-columns:1fr; } }
.insight-tile{ background:#f4f5fa; border-radius:10px; padding:12px 14px; min-width:0; }
.insight-tile-label{ text-transform:uppercase; font-size:.66rem; letter-spacing:.8px; color:#8b90ad; font-weight:700; margin-bottom:4px; }
.insight-tile-value{ font-size:.95rem; font-weight:600; color:#161832; word-break:break-word; }
.insight-tile.full{ grid-column:1 / -1; }
.insight-chips-label{ text-transform:uppercase; font-size:.68rem; letter-spacing:1px; color:#8b90ad; font-weight:700; margin:16px 0 8px; }
.insight-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.insight-chip{
  display:inline-flex; align-items:center; gap:6px; background:#f4f5fa; color:#161832;
  padding:6px 12px; border-radius:100px; font-size:.82rem; font-weight:600;
}
.insight-chip i{ color:#5b5fc7; }
.insight-raw{ margin-top:14px; }
.insight-raw-head{
  display:flex; align-items:center; gap:6px; cursor:pointer; color:#8b90ad;
  font-size:.76rem; font-weight:600; text-transform:uppercase; letter-spacing:.5px;
}
.insight-raw-head i:last-child{ margin-left:auto; }
.insight-raw .raw-json{ background:#f4f5fa; color:#3a3d5c; margin-top:8px; }
.insight-empty{ color:#8b90ad; font-size:.85rem; text-align:center; padding:8px 0; }
.raw-json{
  background:rgba(0,0,0,.3); border-radius:8px; padding:10px 12px;
  font-family:'SF Mono',Consolas,Menlo,monospace; font-size:.72rem; line-height:1.45;
  color:#b9bee0; max-height:340px; overflow:auto; margin:0;
}

.idle-copy{ text-align:center; color:#8d92c2; font-size:.85rem; margin-top:auto; }
.idle-copy i{ display:block; font-size:1.3rem; margin-bottom:6px; animation:tapHint 1.6s ease-in-out infinite; color:var(--seon-teal); }
.slot-card.kyc .idle-copy i{ color:#7c6dfb; }
@keyframes tapHint{ 0%,100%{ transform:translateY(0); opacity:.6; } 50%{ transform:translateY(4px); opacity:1; } }

/* Shimmer skeleton shown while a scan is in progress but no result has
   landed yet — beats a blank void on a booth screen. */
.skeleton-card{ background:#fff; border-radius:16px; padding:22px 24px; margin-bottom:14px; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.skeleton-line{ height:14px; border-radius:6px; margin-bottom:10px; background:linear-gradient(90deg,#eceef7 25%,#f6f7fb 37%,#eceef7 63%); background-size:400% 100%; animation:shimmer 1.4s ease infinite; }
.skeleton-line.w-60{ width:60%; } .skeleton-line.w-40{ width:40%; } .skeleton-line.w-90{ width:90%; }
.skeleton-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.skeleton-tile{ height:48px; border-radius:10px; background:linear-gradient(90deg,#f4f5fa 25%,#fafbfd 37%,#f4f5fa 63%); background-size:400% 100%; animation:shimmer 1.4s ease infinite; }
@keyframes shimmer{ 0%{ background-position:100% 0; } 100%{ background-position:-100% 0; } }

/* ── Bright/light kiosk theme (daylight, expo hall) ─────────────────────── */
body.theme-light{
  background:radial-gradient(1200px 700px at 15% -10%, #f3f4fb 0%, #e7e9f5 55%);
  color:#1a1d3a;
}
body.theme-light .kiosk-title{ color:#161832; }
body.theme-light .kiosk-sub{ color:#5a5e82; }
body.theme-light .slot-card{
  background:#fff; border:1px solid #e3e5f0; box-shadow:0 2px 10px rgba(30,32,80,.06);
}
body.theme-light .slot-kicker{ color:#8b90ad; }
body.theme-light .slot-heading{ color:#161832; }
body.theme-light .slot-desc{ color:#5a5e82; }
body.theme-light .qr-frame{ border:1px solid #e3e5f0; }
body.theme-light .qr-link{ color:#8b90ad; }
body.theme-light .status-dot{ background:#c7cae6; }
body.theme-light .progress-step{ color:#5a5e82; }
body.theme-light .progress-step .dot{ background:#c7cae6; }
body.theme-light .btn-outline-light{ color:#161832; border-color:#c7cae6; }
body.theme-light .btn-outline-light:hover{ background:#161832; border-color:#161832; color:#fff; }
body.theme-light .idle-copy{ color:#8b90ad; }
body.theme-light .result-scroll{ scrollbar-color:#c7cae6 transparent; }

/* ── Mobile collector pages ────────────────────────────────────────────── */
.collection-shell{ max-width:480px; margin:0 auto; }
.collection-card{ background:var(--panel-bg); border:1px solid var(--panel-border); border-radius:20px; padding:26px; }
.hero-logo{ height:34px; }
.form-control, .form-select{ background:rgba(255,255,255,.05); border-color:var(--panel-border); color:#fff; }
.form-control:focus, .form-select:focus{ background:rgba(255,255,255,.08); border-color:var(--seon-teal); color:#fff; box-shadow:0 0 0 .2rem rgba(0,193,182,.15); }
.form-control::placeholder{ color:#7a7ea3; }
.btn-brand{ background:var(--seon-teal); border:none; color:#05052A; font-weight:700; }
.btn-brand:hover{ background:#0ad9cd; color:#05052A; }
.muted-label{ color:#8d92c2; font-size:.78rem; text-transform:uppercase; letter-spacing:1px; }

#verification-container{ width:100%; min-height:600px; border-radius:16px; overflow:hidden; }

/* Searchable country/dial-code picker (mobile collector pages) */
.country-dropdown{
  position:absolute; top:100%; left:0; right:0; z-index:30;
  background:#12123a; border:1px solid var(--panel-border); border-radius:10px;
  margin-top:4px; max-height:240px; overflow-y:auto; box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.country-option{ display:flex; justify-content:space-between; gap:8px; padding:9px 12px; cursor:pointer; font-size:.88rem; }
.country-option:hover, .country-option.active{ background:rgba(0,193,182,.14); }
.country-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.country-dial{ color:#8d92c2; flex:0 0 auto; }
.country-option-empty{ padding:12px; color:#8d92c2; font-size:.85rem; text-align:center; }

/* Full-screen takeover for the Orchestration SDK capture flow on mobile —
   document/selfie scanning needs the whole viewport, not a scrollable card. */
body.sdk-fullscreen-active{ overflow:hidden; }
.collection-card.sdk-fullscreen{
  position:fixed; inset:0; width:100vw; height:100vh;
  margin:0; border-radius:0; z-index:9999;
  padding:10px; padding-top:calc(10px + env(safe-area-inset-top));
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column;
  background:var(--seon-navy);
}
.collection-card.sdk-fullscreen #verification-container{
  flex:1 1 auto; min-height:0; height:100%; border-radius:12px;
}