/* ============================================================
   LVMH Tax-Free ID Verification — Scandit demo
   Tokens are the Scandit UI Kit semantic tokens (see scandit-design).
   The maroon NFC screen replicates the ReadID/InverID SDK UI — that is a
   THIRD-PARTY SDK brand, deliberately matched for fidelity, not a Scandit token.
   ============================================================ */
@import url('https://rsms.me/inter/inter.css');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Cormorant+Garamond:wght@500;600;700&display=swap');

:root {
  /* backgrounds & chrome */
  --bg-primary:#FFFFFF; --bg-secondary:#F7F7F7; --bg-brand:#141F2E;
  /* surfaces */
  --surface-default:#FFFFFF; --surface-hover:#F3F5F8; --surface-pressed:#E1E7ED;
  --surface-selected:#EFF5FA; --surface-formcomp:#F3F5F8; --surface-neutral-softer:#F3F5F8;
  --surface-interactive:#1047A1; --surface-interactive-hover:#1660D9; --surface-interactive-pressed:#063073;
  --surface-success-full:#0D853D; --surface-success-soft:#CEF2DC; --surface-success-softer:#E6F9EE;
  --surface-danger-full:#D92121; --surface-danger-soft:#FFD9D9; --surface-danger-softer:#FFE8E8;
  --surface-warning-full:#F0BD30; --surface-warning-soft:#FFF1CC; --surface-warning-softer:#FFF8E5;
  --surface-info-full:#1660D9; --surface-info-soft:#D9E7FF; --surface-info-softer:#ECF3FF;
  --surface-neutral-soft:#E1E7ED;
  /* text */
  --text-primary:#16191C; --text-secondary:#525A61; --text-disabled:#ACB6BF; --text-inverted:#FFFFFF;
  --text-positive:#0D853D; --text-danger:#D92121; --text-warning:#F0BD30; --text-info:#1660D9;
  --text-on-green:#05612A; --text-on-red:#AD1111; --text-on-yellow:#4D3800; --text-on-blue:#1047A1;
  --text-new:#8E22E0;
  /* borders */
  --border-primary:#525A61; --border-secondary:#C7CFD6; --border-tertiary:#E1E7ED; --border-interactive:#16191C;
  /* sidebar */
  --sidebar-hover:rgba(255,255,255,.10); --sidebar-pressed:#25364D; --sidebar-selected:#374E6D;
  /* icons */
  --icon-primary:#16191C; --icon-secondary:#525A61; --icon-positive:#0D853D; --icon-danger:#D92121;
  --icon-warning:#F0BD30; --icon-on-color:#FFFFFF; --icon-inverted:#FFFFFF;
  /* elevation */
  --shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.05);
  --shadow-md:0 4px 8px rgba(0,0,0,.06),0 2px 4px rgba(0,0,0,.05);
  --shadow-lg:0 12px 24px rgba(0,0,0,.10),0 4px 8px rgba(0,0,0,.06);
  --shadow-phone:0 40px 80px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.25);
  /* ReadID / InverID third-party SDK brand (NFC screen only) */
  --readid-maroon:#8A2B54; --readid-maroon-dark:#6E2143; --readid-soft:#F5E9EF;
  --radius-input:4px; --radius-btn:8px; --radius-badge:6px; --radius-panel:16px;
  /* LVMH brand identity (phone app) — subdued black/white, serif + geometric sans */
  --lv-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --lv-sans:'Montserrat','Inter',system-ui,sans-serif;
  --lv-ink:#111111; --lv-ink-soft:#6b6b6b; --lv-line:#E6E4E0; --lv-paper:#FFFFFF; --lv-noir:#0E0E0E;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-feature-settings:'cv11','ss01';
  color:var(--text-primary);
  background:var(--bg-secondary);
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
img{max-width:100%;display:block;}

/* icon helper: monochrome SVG colored via mask */
.ic{display:inline-block;width:24px;height:24px;flex:none;background-color:currentColor;
  -webkit-mask:var(--u) center/contain no-repeat;mask:var(--u) center/contain no-repeat;}
.ic.sm{width:18px;height:18px;} .ic.xs{width:16px;height:16px;} .ic.lg{width:28px;height:28px;}

/* ============================================================ LAYOUT ============================================================ */
/* full-viewport blurred boutique backdrop */
.scene{min-height:100vh;width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;
  background:linear-gradient(rgba(20,31,46,.28),rgba(20,31,46,.42)),url('assets/img/boutique-bg.jpg') center/cover no-repeat fixed;}
.composition{position:absolute;inset:0;}
/* dashboard frame (16:10) — anchored top-left, inset from the edges */
.dash-frame{position:absolute;top:7%;left:5%;width:var(--dashW,900px);height:var(--dashH,563px);
  background:var(--bg-primary);border-radius:16px;overflow:hidden;z-index:1;
  box-shadow:0 26px 64px rgba(0,0,0,.32),0 6px 16px rgba(0,0,0,.22);}
/* dashboard rendered at a fixed design size, then scaled to fit the frame width (no h-scroll) */
#stage{display:flex;width:1500px;height:938.3px;transform:scale(var(--dscale,1));transform-origin:top left;}

/* -------- Sidebar (dashboard chrome) -------- */
.sidebar{
  width:248px;flex:none;background:var(--bg-brand);color:var(--text-inverted);
  display:flex;flex-direction:column;padding:24px 0 16px;height:100%;
}
.sidebar .logo{padding:4px 24px 30px;color:var(--text-inverted);}
.sidebar .logo svg{height:30px;width:auto;display:block;}
.sidebar .logo svg path{fill:#fff;} /* logo svg has a hardcoded dark fill — force white on the dark sidebar */
.nav{display:flex;flex-direction:column;gap:2px;padding:0 12px;}
.nav-item{display:flex;align-items:center;gap:12px;height:44px;padding:0 12px;border-radius:var(--radius-btn);
  color:rgba(255,255,255,.72);font-size:14px;font-weight:500;letter-spacing:.1px;width:100%;text-align:left;}
.nav-item .ic{color:rgba(255,255,255,.72);}
.nav-item:hover{background:var(--sidebar-hover);color:#fff;}
.nav-item:hover .ic{color:#fff;}
.nav-item.active{background:var(--sidebar-selected);color:#fff;}
.nav-item.active .ic{color:#fff;}
.nav-spacer{flex:1;}
.nav-divider{height:1px;background:rgba(255,255,255,.12);margin:12px 24px;}
.trydemo{display:flex;align-items:center;justify-content:space-between;padding:8px 24px 0;color:#fff;font-weight:600;font-size:14px;}
.trydemo .js{width:26px;height:26px;border-radius:6px;background:#000;color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;}

/* -------- Main content -------- */
.main{flex:1;min-width:0;height:100%;background:var(--bg-primary);padding:30px 26px;overflow:hidden auto;}
.main-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:24px;}
.page-title{font-size:30px;font-weight:700;letter-spacing:-.4px;margin:0;}
.daterange{display:flex;align-items:center;gap:10px;height:44px;padding:0 16px;border:1px solid var(--border-secondary);
  border-radius:var(--radius-btn);background:var(--surface-default);color:var(--text-primary);font-size:14px;font-weight:500;box-shadow:var(--shadow);}
.daterange .ic{color:var(--icon-secondary);}

.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.search{flex:1;position:relative;display:flex;align-items:center;}
.search input{width:100%;height:44px;border:none;border-bottom:1px solid var(--border-secondary);background:transparent;
  padding:0 40px 0 4px;font-size:15px;color:var(--text-primary);outline:none;}
.search input::placeholder{color:var(--text-disabled);}
.search input:focus{border-bottom:2px solid var(--border-interactive);}
.search .ic{position:absolute;right:6px;color:var(--icon-secondary);}
.btn-filter{display:flex;align-items:center;gap:8px;height:44px;padding:0 18px;border:1px solid var(--border-secondary);
  border-radius:var(--radius-btn);background:var(--surface-default);color:var(--text-primary);font-size:14px;font-weight:500;}
.btn-filter .ic{color:var(--icon-secondary);}

.results-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.results-count{font-size:14px;color:var(--text-secondary);font-weight:500;}
.btn-csv{display:flex;align-items:center;gap:8px;height:40px;padding:0 16px;border:1px solid var(--border-secondary);
  border-radius:var(--radius-btn);background:var(--surface-default);color:var(--text-primary);font-size:14px;font-weight:500;}
.btn-csv .ic{color:var(--icon-secondary);}

/* -------- Transactions table -------- */
.tx-table{width:100%;border-collapse:collapse;font-size:14px;}
.tx-table thead th{text-align:left;padding:13px 10px;background:var(--surface-neutral-softer);color:var(--text-primary);
  font-weight:600;white-space:nowrap;border-bottom:1px solid var(--border-tertiary);}
.tx-table thead th:first-child{border-top-left-radius:10px;}
.tx-table thead th:last-child{border-top-right-radius:10px;}
.tx-table thead th .th-sort{display:inline-flex;align-items:center;gap:4px;}
.tx-table thead th .ic{color:var(--icon-secondary);}
.tx-row{border-bottom:1px solid var(--border-tertiary);cursor:pointer;transition:background .12s;}
.tx-row:hover{background:var(--surface-hover);}
.tx-row.open{background:var(--surface-selected);}
.tx-row td{padding:14px 10px;white-space:nowrap;color:var(--text-primary);vertical-align:middle;}
.tx-row td.mono{font-variant-numeric:tabular-nums;}
.tx-row .txid{font-weight:500;letter-spacing:.3px;}
.tx-new{animation:rowIn 2.4s ease;}
@keyframes rowIn{0%{background:var(--surface-info-soft);}60%{background:var(--surface-info-softer);}100%{background:transparent;}}
.chev-cell{width:36px;text-align:center!important;color:var(--icon-secondary);}
.chev-cell .ic{transition:transform .18s;}
.tx-row.open .chev-cell .ic{transform:rotate(180deg);}

.badge{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:var(--radius-badge);
  font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;}
.badge.pass{background:var(--surface-success-soft);color:var(--text-on-green);}
.badge.fail{background:var(--surface-danger-soft);color:var(--text-on-red);}
.badge.age{background:#EAD9F7;color:#6A1B9A;}
.badge.expired{background:var(--surface-danger-soft);color:var(--text-on-red);}
.badge.plain{background:var(--surface-neutral-soft);color:var(--text-secondary);}
.badge-group{display:flex;gap:6px;}

/* expanded detail row */
.tx-detail-row td{padding:0;background:var(--bg-secondary);}
.tx-detail{padding:24px 28px;display:none;position:sticky;left:0;box-sizing:border-box;}
.tx-detail-row.open .tx-detail{display:block;animation:fadein .25s ease;}
@keyframes fadein{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
.detail-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;}
.detail-panel{background:var(--surface-default);border:1px solid var(--border-tertiary);border-radius:var(--radius-panel);padding:20px 22px;box-shadow:var(--shadow);}
.detail-panel h4{margin:0 0 14px;font-size:13px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-secondary);}
.detail-panel.secondary{margin-top:16px;border-left:3px solid var(--surface-warning-full);}
.detail-panel.secondary h4{display:flex;align-items:center;gap:6px;color:var(--text-primary);}
.detail-panel.secondary h4 .ic{color:var(--surface-warning-full);}
.sec-sub{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-secondary);margin:0 0 8px;}
.dcheck{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid var(--border-tertiary);}
.dcheck:last-child{border-bottom:none;}
.dcheck .ic{margin-top:1px;}
.dcheck .lab{font-size:14px;font-weight:500;}
.dcheck .sub{font-size:12.5px;color:var(--text-secondary);margin-top:1px;}
.dcheck.ok .ic{color:var(--icon-positive);}
.dcheck.warn .ic{color:var(--icon-warning);}
.dcheck.bad .ic{color:var(--icon-danger);}
.dcheck.info .ic{color:var(--text-info);}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:2px 24px;}
.field{padding:8px 0;border-bottom:1px solid var(--border-tertiary);}
.field .k{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--text-secondary);font-weight:600;}
.field .v{font-size:14px;font-weight:500;margin-top:2px;}
.detail-noimg{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-secondary);margin-top:14px;padding-top:12px;border-top:1px dashed var(--border-secondary);}
.detail-noimg .ic{color:var(--icon-secondary);}

/* pagination */
.pager{display:flex;justify-content:center;gap:10px;margin:24px 0 8px;}
.pager button{min-width:40px;height:40px;padding:0 14px;border:1px solid var(--border-tertiary);border-radius:var(--radius-btn);
  background:var(--surface-default);font-size:14px;font-weight:500;color:var(--text-primary);display:flex;align-items:center;gap:6px;}
.pager button.active{background:var(--text-primary);color:#fff;border-color:var(--text-primary);}
.pager button:disabled{color:var(--text-disabled);cursor:default;}

/* toast */
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(120px);z-index:60;
  display:flex;align-items:center;gap:12px;background:var(--bg-brand);color:#fff;padding:14px 20px;border-radius:12px;
  box-shadow:var(--shadow-lg);font-size:14px;font-weight:500;opacity:0;transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .4s;}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1;}
.toast .dot{width:8px;height:8px;border-radius:50%;background:#3FD07E;box-shadow:0 0 0 4px rgba(63,208,126,.25);}

/* ============================================================ PHONE ============================================================ */
/* phone — vertically centered on the right, inset from the edge */
.phone-dock{position:absolute;top:50%;right:6%;z-index:3;transform:translateY(-50%) scale(var(--pscale,1));transform-origin:right center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;}
.phone-caption{background:var(--bg-brand);color:#fff;font-size:12px;font-weight:600;letter-spacing:.2px;
  padding:7px 14px;border-radius:999px;display:flex;align-items:center;gap:8px;box-shadow:var(--shadow-md);}
.phone-caption .pulse{width:7px;height:7px;border-radius:50%;background:#3FD07E;animation:pulse 1.6s infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(63,208,126,.5);}50%{box-shadow:0 0 0 6px rgba(63,208,126,0);}}
.phone{width:322px;height:658px;background:#0b0d10;border-radius:52px;padding:13px;box-shadow:var(--shadow-phone);position:relative;z-index:2;}
/* physical passport revealed behind the phone during the NFC tap */
/* physical passport peeking from the phone's top-left (phone covers the chip);
   layered above the dashboard, behind the phone */
.phone-dock .booklet{position:absolute;width:220px;border-radius:11px;box-shadow:0 22px 48px rgba(0,0,0,.5);z-index:1;
  top:50%;left:50%;opacity:0;pointer-events:none;transform:translate(-150%,-66%) rotate(-11deg) scale(.85);
  transition:opacity .6s ease,transform 1.25s cubic-bezier(.2,.8,.2,1);}
.phone-dock.reading .booklet{opacity:1;transform:translate(-116%,-60%) rotate(-11deg) scale(1);}
body.is-mobile .booklet{display:none;}
.phone .notch{position:absolute;top:17px;left:50%;transform:translateX(-50%);width:78px;height:25px;background:#000;border-radius:14px;z-index:20;}
.screen{width:100%;height:100%;border-radius:40px;overflow:hidden;background:#fff;position:relative;}

/* mobile: no dashboard, phone full bleed */
body.is-mobile{background:#000;}
body.is-mobile .scene{display:block;min-height:0;overflow:visible;background:#000;}
body.is-mobile .composition{display:block;transform:none;gap:0;}
body.is-mobile .dash-frame{display:none;}
body.is-mobile .sidebar,body.is-mobile .main,body.is-mobile .phone-dock .phone-caption{display:none;}
body.is-mobile #stage{display:block;}
body.is-mobile .phone-dock{position:static;transform:none;margin:0;}
body.is-mobile .phone{width:100vw;height:100vh;height:100dvh;border-radius:0;padding:0;box-shadow:none;background:#000;}
body.is-mobile .phone .notch{display:none;}
body.is-mobile .screen{border-radius:0;}

/* ============================================================ APP SCREENS (inside phone) ============================================================ */
.app{position:absolute;inset:0;display:flex;flex-direction:column;background:#fff;overflow:hidden;}
.statusbar{height:46px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 26px 0 24px;
  font-size:14px;font-weight:600;color:#0b0d10;position:relative;z-index:15;}
.statusbar.on-dark{color:#fff;}
.statusbar .sb-right{display:flex;align-items:center;gap:6px;font-size:12px;}
.statusbar .sb-bat{width:22px;height:11px;border:1.4px solid currentColor;border-radius:3px;position:relative;opacity:.9;}
.statusbar .sb-bat::after{content:"";position:absolute;right:-3px;top:3px;width:2px;height:5px;background:currentColor;border-radius:1px;}
.statusbar .sb-bat i{position:absolute;inset:1.3px;width:70%;background:currentColor;border-radius:1px;display:block;}
body.is-mobile .statusbar{height:54px;padding-top:8px;}

.appbar{height:52px;flex:none;display:flex;align-items:center;padding:0 8px;position:relative;z-index:15;}
.appbar .back{width:44px;height:44px;display:grid;place-items:center;color:var(--icon-primary);border-radius:50%;}
.appbar .back:hover{background:var(--surface-hover);}
.appbar .title{position:absolute;left:0;right:0;text-align:center;font-size:17px;font-weight:600;pointer-events:none;}
.app-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.app-body::-webkit-scrollbar{width:0;}

.view{display:none;flex-direction:column;}
.view.active{display:flex;flex:1 1 auto;min-height:0;}

/* --- intro --- */
.intro{background:var(--bg-brand);color:#fff;align-items:center;justify-content:center;text-align:center;padding:0 34px;position:relative;}
.intro .logo{margin-bottom:36px;color:#fff;opacity:.96;}
.intro .logo svg{height:22px;}
.intro h1{font-size:20px;font-weight:600;line-height:1.4;margin:0 0 12px;letter-spacing:-.2px;}
.intro p{font-size:14px;line-height:1.55;color:rgba(255,255,255,.66);margin:0 0 40px;max-width:250px;}
.intro .start{background:#fff;color:var(--bg-brand);height:52px;border-radius:14px;font-size:16px;font-weight:600;padding:0 40px;display:flex;align-items:center;gap:10px;}
.intro .conf{position:absolute;bottom:26px;left:0;right:0;text-align:center;color:#2EC1CE;font-size:12px;font-weight:700;letter-spacing:.3px;}
.intro .bracket{position:absolute;width:26px;height:26px;border:2px solid rgba(46,193,206,.5);}
.intro .bracket.tl{top:70px;left:34px;border-right:none;border-bottom:none;}
.intro .bracket.br{bottom:80px;right:34px;border-left:none;border-top:none;}

/* --- Scan: plays the real Scandit recording full-bleed (video has its own chrome) --- */
.app.scanning .statusbar{display:none;}
.view.scan{background:#000;}
.scan-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;z-index:2;}
/* transparent hotspot over the video's "back" chevron (top-left) → return to start */
.scan-back-hit{position:absolute;top:38px;left:0;width:130px;height:50px;z-index:6;background:transparent;cursor:pointer;}
body.is-mobile .scan-back-hit{top:52px;height:56px;}
#scanContainer{position:absolute;inset:0;overflow:hidden;background:#111;z-index:1;}
.passport-doc{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) rotate(-1.6deg);
  width:272px;height:188px;border-radius:7px;box-shadow:0 16px 40px rgba(0,0,0,.5);overflow:hidden;
  background:linear-gradient(155deg,#fdeef0 0%,#f9dfe4 45%,#f4ccd3 100%);padding:9px 10px;
  animation:docFloat 5s ease-in-out infinite;}
@keyframes docFloat{0%,100%{transform:translate(-50%,-50%) rotate(-1.6deg);}50%{transform:translate(-50%,-51%) rotate(-.7deg);}}
.passport-doc .pd-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;}
.passport-doc .pd-head b{font-size:7px;letter-spacing:.5px;color:#8a1428;font-weight:700;text-transform:uppercase;}
.passport-doc .pd-cross{width:13px;height:13px;background:#c81f34;border-radius:2px;position:relative;}
.passport-doc .pd-cross::before,.passport-doc .pd-cross::after{content:"";position:absolute;background:#fff;}
.passport-doc .pd-cross::before{left:5.2px;top:2.5px;width:2.6px;height:8px;}
.passport-doc .pd-cross::after{top:5.2px;left:2.5px;width:8px;height:2.6px;}
.passport-doc .pd-body{display:flex;gap:9px;}
.passport-doc .pd-photo{width:54px;height:70px;border-radius:2px;object-fit:cover;filter:grayscale(1) contrast(1.05);border:1px solid rgba(0,0,0,.12);}
.passport-doc .pd-lines{flex:1;display:flex;flex-direction:column;gap:5px;padding-top:3px;}
.passport-doc .pd-lines i{display:block;height:4px;border-radius:2px;background:rgba(137,20,40,.4);}
.passport-doc .pd-lines i:nth-child(1){width:55%;} .passport-doc .pd-lines i:nth-child(2){width:80%;}
.passport-doc .pd-lines i:nth-child(3){width:65%;} .passport-doc .pd-lines i:nth-child(4){width:78%;}
.passport-doc .pd-lines i:nth-child(5){width:45%;}
.passport-doc .pd-mrz{position:absolute;left:10px;right:10px;bottom:9px;font-family:'Courier New',monospace;font-size:7px;
  color:rgba(80,15,30,.85);line-height:1.55;letter-spacing:1px;white-space:nowrap;overflow:hidden;}
.scan-overlay{position:absolute;inset:0;z-index:6;pointer-events:none;}
.scan-frame{position:absolute;left:26px;right:26px;top:34%;height:180px;}
.scan-frame .corner{position:absolute;width:30px;height:30px;border:3px solid #fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));}
.scan-frame .corner.tl{top:0;left:0;border-right:none;border-bottom:none;border-radius:6px 0 0 0;}
.scan-frame .corner.tr{top:0;right:0;border-left:none;border-bottom:none;border-radius:0 6px 0 0;}
.scan-frame .corner.bl{bottom:0;left:0;border-right:none;border-top:none;border-radius:0 0 0 6px;}
.scan-frame .corner.br{bottom:0;right:0;border-left:none;border-top:none;border-radius:0 0 6px 0;}
.scan-line{position:absolute;left:8px;right:8px;height:2px;background:linear-gradient(90deg,transparent,#2EC1CE,transparent);
  box-shadow:0 0 12px 2px rgba(46,193,206,.6);top:8px;animation:scanline 2.1s ease-in-out infinite;}
@keyframes scanline{0%{top:8px;}50%{top:164px;}100%{top:8px;}}
.show-doc-pill{position:absolute;top:calc(34% + 46px);left:50%;transform:translateX(-50%);
  background:rgba(255,255,255,.92);color:#16191C;font-size:13px;font-weight:600;padding:8px 16px;border-radius:999px;box-shadow:var(--shadow-md);}
.scan-hint{position:absolute;left:0;right:0;bottom:120px;text-align:center;color:#fff;font-size:14px;font-weight:500;text-shadow:0 1px 3px rgba(0,0,0,.6);}
.scan-watermark{position:absolute;bottom:20px;right:22px;color:rgba(255,255,255,.55);font-size:12px;letter-spacing:2px;font-weight:600;}
.mrz-strip{position:absolute;left:16px;right:16px;bottom:150px;font-family:'Courier New',monospace;font-size:11px;color:#eafcff;
  background:rgba(0,0,0,.45);border-radius:6px;padding:8px 10px;line-height:1.5;letter-spacing:1px;opacity:0;transition:opacity .4s;}
.mrz-strip.show{opacity:1;}
.mrz-strip .hl{background:rgba(46,193,206,.35);}
.live-tag{position:absolute;top:56px;left:20px;z-index:9;display:flex;align-items:center;gap:6px;background:rgba(215,33,33,.92);
  color:#fff;font-size:11px;font-weight:700;letter-spacing:.5px;padding:5px 10px;border-radius:999px;}
.live-tag .dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:pulse2 1.2s infinite;}
@keyframes pulse2{50%{opacity:.3;}}

/* --- NFC (ReadID third-party SDK styling) --- */
.nfc{background:#fff;padding:0 22px 22px;}
.nfc h2{font-size:22px;font-weight:700;margin:6px 0 12px;}
.nfc p{font-size:15px;line-height:1.5;color:var(--text-secondary);margin:0 0 8px;}
.nfc-illus{flex:1;display:flex;align-items:center;justify-content:center;position:relative;min-height:220px;}
.nfc-passport{width:118px;height:150px;border-radius:12px;background:linear-gradient(160deg,#1a3050 0%,var(--bg-brand) 100%);position:relative;box-shadow:0 12px 24px rgba(20,31,46,.32);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;}
.nfc-passport .ic{color:#8FB4E8;width:48px;height:48px;}
.nfc-passport .chip{width:34px;height:26px;border-radius:5px;border:2px solid #8FB4E8;position:relative;}
.nfc-phone{position:absolute;right:44px;bottom:6px;width:66px;height:120px;border:3px solid #C7CFD6;border-radius:14px;background:#fff;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:14px;animation:tap 2.4s ease-in-out infinite;}
.nfc-phone .knob{width:30px;height:30px;border-radius:50%;background:#C7CFD6;}
@keyframes tap{0%,100%{transform:translateY(0);}50%{transform:translateY(-16px);}}
/* NFC screen slides up (like a sheet) after the scan video freezes */
@keyframes lvSlideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
.view.nfc.active{animation:lvSlideUp .46s cubic-bezier(.2,.85,.25,1);}
.nfc.reading .nfc-illus{opacity:.35;transition:opacity .3s;}
.nfc.reading .nfc-actions{visibility:hidden;}
.nfc-actions{flex:none;display:flex;flex-direction:column;gap:12px;padding-top:10px;}
.btn-readid{height:52px;border-radius:14px;font-size:16px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;}
.btn-readid.primary{background:var(--surface-interactive);color:#fff;}
.btn-readid.primary:hover{background:var(--surface-interactive-hover);}
.btn-readid.primary .ic{color:#fff;}
.btn-readid.ghost{background:#fff;color:var(--surface-interactive);border:1.5px solid var(--border-secondary);}
.btn-readid.ghost:hover{background:var(--surface-hover);}

/* iOS Core NFC system sheet (native OS prompt — NOT a Scandit surface; iOS system colors) */
:root{--ios-blue:#007AFF;--ios-blue-soft:#E8F1FF;--ios-dot-off:#D1D1D6;}
.nfc-sheet-scrim{position:absolute;inset:0;background:rgba(0,0,0,.28);z-index:30;opacity:0;pointer-events:none;transition:opacity .3s;}
.nfc-sheet-scrim.show{opacity:1;pointer-events:auto;}
.nfc-sheet{position:absolute;left:14px;right:14px;bottom:18px;background:#fff;border-radius:26px;
  padding:22px 22px 18px;z-index:31;text-align:center;box-shadow:0 20px 48px rgba(0,0,0,.28);
  opacity:0;pointer-events:none;transform:translateY(30px);transition:opacity .32s cubic-bezier(.2,.8,.2,1),transform .32s cubic-bezier(.2,.8,.2,1);}
body.is-mobile .nfc-sheet{left:16px;right:16px;bottom:26px;}
.nfc-sheet.show{opacity:1;pointer-events:auto;transform:none;}
.nfc-sheet .close-x{position:absolute;top:18px;right:18px;color:#8A8A8E;width:22px;height:22px;}
.nfc-sheet h3{font-size:20px;font-weight:700;letter-spacing:-.2px;margin:2px 0 16px;color:#1c1c1e;}
.ios-dots{display:flex;justify-content:center;gap:7px;margin-bottom:26px;}
.ios-dots i{width:9px;height:9px;border-radius:50%;background:var(--ios-dot-off);transition:background .2s;}
.ios-dots i.on{background:var(--ios-blue);}
.ios-glyph{width:112px;height:112px;margin:0 auto 26px;display:grid;place-items:center;}
.ios-glyph svg{width:100%;height:100%;}
.ios-cancel{width:100%;height:50px;border-radius:14px;background:var(--ios-blue-soft);color:var(--ios-blue);
  font-size:17px;font-weight:600;display:flex;align-items:center;justify-content:center;}
.ios-cancel:active{background:#d8e7ff;}

/* --- Result --- */
.result{background:var(--bg-secondary);}
.result-hero{background:#fff;padding:16px 18px 20px;}
.docpair{display:flex;gap:12px;}
.doccard{flex:1;border-radius:12px;overflow:hidden;border:1px solid var(--border-tertiary);background:#fff;box-shadow:var(--shadow);position:relative;}
.doccard .cap{position:absolute;top:8px;left:8px;background:rgba(11,13,16,.72);color:#fff;font-size:10px;font-weight:600;
  letter-spacing:.4px;text-transform:uppercase;padding:3px 8px;border-radius:6px;}
/* passport data page (front) */
.pp-data{aspect-ratio:3/4;background:linear-gradient(160deg,#fdeef0 0%,#fbe0e4 40%,#f7d0d6 100%);padding:9px;position:relative;}
.pp-data .redbar{height:14px;background:var(--surface-danger-full);border-radius:2px;margin-bottom:6px;opacity:.85;}
.pp-data .row2{display:flex;gap:7px;}
.pp-data .photo{width:44px;height:56px;border-radius:3px;object-fit:cover;filter:grayscale(1) contrast(1.05);border:1px solid rgba(0,0,0,.1);}
.pp-data .lines{flex:1;display:flex;flex-direction:column;gap:4px;padding-top:2px;}
.pp-data .lines i{display:block;height:4px;border-radius:2px;background:rgba(137,20,40,.35);}
.pp-data .lines i:nth-child(2){width:70%;} .pp-data .lines i:nth-child(3){width:85%;} .pp-data .lines i:nth-child(4){width:55%;}
.pp-data .mrzz{position:absolute;left:9px;right:9px;bottom:8px;font-family:'Courier New',monospace;font-size:5.4px;
  color:rgba(90,20,35,.8);line-height:1.5;letter-spacing:.4px;background:rgba(255,255,255,.5);padding:3px 4px;border-radius:2px;overflow:hidden;}
.pp-data .cross{position:absolute;top:9px;right:9px;width:16px;height:16px;background:var(--surface-danger-full);border-radius:2px;}
.pp-data .cross::before,.pp-data .cross::after{content:"";position:absolute;background:#fff;}
.pp-data .cross::before{left:6.5px;top:3px;width:3px;height:10px;} .pp-data .cross::after{top:6.5px;left:3px;width:10px;height:3px;}
/* passport cover (back) */
.pp-cover{aspect-ratio:3/4;background:linear-gradient(160deg,#9c1b2e 0%,#7d1424 100%);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:11px;color:#f4d9c7;padding:30px 14px 14px;}
.pp-cover .cross{width:26px;height:26px;background:#f4d9c7;border-radius:3px;position:relative;}
.pp-cover .cross::before,.pp-cover .cross::after{content:"";position:absolute;background:#9c1b2e;}
.pp-cover .cross::before{left:10.5px;top:5px;width:5px;height:16px;} .pp-cover .cross::after{top:10.5px;left:5px;width:16px;height:5px;}
.pp-cover .t{font-size:9px;letter-spacing:.6px;text-align:center;line-height:1.6;opacity:.92;font-weight:500;}
.pp-cover .globe{width:30px;height:30px;color:#f4d9c7;opacity:.8;}

.biopage{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--border-tertiary);box-shadow:var(--shadow);background:#fff;}
.biopage img{width:100%;display:block;}
.biopage .cap{position:absolute;top:8px;left:8px;background:rgba(11,13,16,.74);color:#fff;font-size:10px;font-weight:600;
  letter-spacing:.4px;text-transform:uppercase;padding:4px 9px;border-radius:6px;}

.holder{display:flex;align-items:center;gap:14px;margin-top:18px;}
.holder .avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:center 30%;border:2px solid #fff;box-shadow:var(--shadow);}
.holder .h-name{font-size:20px;font-weight:700;letter-spacing:-.2px;}
.holder .h-sub{font-size:13px;color:var(--text-secondary);margin-top:2px;display:flex;align-items:center;gap:6px;}
.verdict{margin-top:16px;display:flex;align-items:center;gap:10px;background:var(--surface-success-softer);border:1px solid var(--surface-success-soft);
  border-radius:12px;padding:12px 14px;}
.verdict .ic{color:var(--icon-positive);}
.verdict .v-t{font-size:15px;font-weight:700;color:var(--text-on-green);}
.verdict .v-s{font-size:12.5px;color:var(--text-secondary);margin-top:1px;}

.sec{padding:18px;}
.sec-title{font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-secondary);margin:0 0 10px;padding-left:2px;}
.checks{background:#fff;border-radius:14px;border:1px solid var(--border-tertiary);overflow:hidden;box-shadow:var(--shadow);}
.check{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border-tertiary);}
.check:last-child{border-bottom:none;}
.check .cbody{flex:1;min-width:0;}
.check .clab{font-size:14.5px;font-weight:600;}
.check .csub{font-size:12.5px;color:var(--text-secondary);margin-top:1px;}
.check .ic.state{width:22px;height:22px;flex:none;}
.check.ok .ic.state{color:var(--icon-positive);} .check.warn .ic.state{color:var(--icon-warning);}
.check.bad .ic.state{color:var(--icon-danger);} .check.info .ic.state{color:var(--text-info);}
.check.expandable{cursor:pointer;} .check .chev{color:var(--icon-secondary);transition:transform .18s;}
.check.expandable.open .chev{transform:rotate(180deg);}
.subchecks{display:none;background:var(--bg-secondary);border-bottom:1px solid var(--border-tertiary);padding:4px 16px 8px 46px;}
.subchecks.open{display:block;}
.subcheck{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border-tertiary);}
.subcheck:last-child{border-bottom:none;}
.subcheck .ic{color:var(--icon-positive);width:18px;height:18px;}
.subcheck .sl{font-size:13px;font-weight:500;flex:1;}
.subcheck .sv{font-size:12px;font-weight:600;color:var(--text-on-green);}

.accordion{background:#fff;border-radius:14px;border:1px solid var(--border-tertiary);overflow:hidden;box-shadow:var(--shadow);}
.acc-head{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;}
.acc-head .ic{color:var(--icon-secondary);}
.acc-head .at{font-size:14.5px;font-weight:600;flex:1;}
.acc-head .chev{transition:transform .18s;}
.accordion.open .acc-head .chev{transform:rotate(180deg);}
.acc-body{display:none;padding:2px 16px 14px;}
.accordion.open .acc-body{display:block;}
.acc-src{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-secondary);margin:14px 0 6px;}
.acc-src:first-child{margin-top:4px;}
.frow{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--border-tertiary);}
.frow:last-child{border-bottom:none;}
.frow .fk{font-size:13px;color:var(--text-secondary);}
.frow .fv{font-size:13px;font-weight:600;text-align:right;}
.frow .fv.mono{font-family:'Courier New',monospace;font-size:11px;word-break:break-all;letter-spacing:.3px;}

/* scrollable-content hint — bouncing down chevron above the submit button */
.scroll-hint{position:absolute;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));width:36px;height:36px;border-radius:50%;
  background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.18);display:grid;place-items:center;z-index:14;pointer-events:none;
  opacity:0;transition:opacity .35s ease;animation:hintBounce 1.5s ease-in-out infinite;}
.scroll-hint.show{opacity:1;}
.scroll-hint .ic{color:var(--lv-ink);}
@keyframes hintBounce{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,5px);}}

.result-foot{flex:none;padding:14px 18px calc(14px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--border-tertiary);}
.btn-primary{width:100%;height:52px;border-radius:14px;background:var(--surface-interactive);color:#fff;font-size:16px;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:10px;}
.btn-primary:hover{background:var(--surface-interactive-hover);}
.btn-primary .ic{color:#fff;}

/* --- Upload --- */
.upload{background:#fff;align-items:center;justify-content:center;text-align:center;padding:0 40px;}
.up-ring{width:120px;height:120px;position:relative;display:grid;place-items:center;margin-bottom:30px;}
.up-ring svg{position:absolute;inset:0;transform:rotate(-90deg);}
.up-ring .track{stroke:var(--surface-neutral-soft);} .up-ring .prog{stroke:var(--surface-interactive);stroke-linecap:round;transition:stroke-dashoffset .2s linear;}
.up-ring.done .prog{stroke:var(--surface-success-full);}
.up-ring .pct{font-size:24px;font-weight:700;}
.up-ring .ic{color:var(--icon-positive);width:52px;height:52px;}
.upload h2{font-size:19px;font-weight:700;margin:0 0 8px;}
.upload p{font-size:14px;color:var(--text-secondary);line-height:1.5;margin:0;max-width:250px;}
.up-tags{margin-top:24px;width:100%;max-width:280px;display:flex;flex-direction:column;gap:8px;}
.up-tag{display:flex;align-items:center;justify-content:space-between;background:var(--bg-secondary);border-radius:10px;padding:11px 14px;
  font-size:13px;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s;}
.up-tag.show{opacity:1;transform:none;}
.up-tag .k{color:var(--text-secondary);} .up-tag .v{font-weight:600;}
.up-tag .v.mono{font-family:'Courier New',monospace;}
.upload .done-actions{margin-top:30px;width:100%;max-width:280px;display:none;flex-direction:column;gap:10px;}
.upload.complete .done-actions{display:flex;}
.mobile-hint{font-size:12.5px;color:var(--text-secondary);display:flex;align-items:center;gap:8px;justify-content:center;margin-top:8px;}
.mobile-hint .ic{color:var(--icon-secondary);}
.btn-ghost{height:48px;border-radius:12px;border:1.5px solid var(--border-secondary);background:#fff;color:var(--text-primary);
  font-size:15px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;}

/* small responsive dashboard */
@media (max-width:1180px){.main{padding:32px 28px;}.sidebar{width:230px;}}
@media (min-width:1024px){.tx-table thead th:first-child,.tx-table td:first-child{padding-left:18px;}}

/* ============================================================
   LVMH BRAND OVERRIDES — phone app only (.app). Subdued black/white,
   Cormorant serif for brand/hero, Montserrat sans for UI.
   The Scandit dashboard (outside .app) keeps its own product branding.
   ============================================================ */
.app{font-family:var(--lv-sans);color:var(--lv-ink);}
.app .statusbar{font-family:var(--lv-sans);}
.appbar .title{font-family:var(--lv-sans);font-weight:600;}

/* Intro — editorial LVMH splash */
.intro{background:var(--lv-paper);color:var(--lv-ink);}
.intro .lv-word{font-family:var(--lv-serif);font-weight:600;font-size:56px;letter-spacing:9px;line-height:1;padding-left:9px;}
.intro .lv-rule{width:46px;height:1px;background:var(--lv-ink);opacity:.35;margin:22px 0;}
.intro .lv-kicker{font-size:11px;letter-spacing:3px;font-weight:600;color:var(--lv-ink-soft);margin-bottom:36px;}
.intro h1{font-family:var(--lv-serif);font-weight:600;font-size:31px;line-height:1.22;margin:0 0 16px;letter-spacing:.2px;color:var(--lv-ink);}
.intro p{font-family:var(--lv-sans);font-size:14px;line-height:1.65;color:var(--lv-ink-soft);margin:0 0 40px;max-width:262px;font-weight:400;}
.intro .conf{color:var(--lv-ink-soft);font-size:10.5px;letter-spacing:1.4px;font-weight:500;text-transform:uppercase;}

/* Luxury CTA — square black button, uppercase, spaced */
.intro .start,.app .btn-primary,.btn-readid.primary{background:var(--lv-noir);color:#fff;border-radius:2px;
  font-family:var(--lv-sans);font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase;height:54px;}
.intro .start:hover,.app .btn-primary:hover,.btn-readid.primary:hover{background:#000;}
.app .btn-primary .ic,.btn-readid.primary .ic{display:none;}
.btn-readid.ghost{background:#fff;color:var(--lv-ink);border:1px solid var(--lv-ink);border-radius:2px;
  font-family:var(--lv-sans);font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase;height:54px;}
.btn-readid.ghost:hover{background:#F5F4F2;}

/* NFC prompt — mono charcoal illustration */
.nfc h2{font-family:var(--lv-serif);font-weight:600;font-size:26px;letter-spacing:.2px;}
.nfc p{font-family:var(--lv-sans);}
.nfc-passport{background:linear-gradient(160deg,#2a2a2a 0%,var(--lv-noir) 100%);box-shadow:0 12px 26px rgba(0,0,0,.28);}
.nfc-passport .ic{color:#cfcfcf;} .nfc-passport .chip{border-color:#cfcfcf;}
.nfc-phone{border-color:#bdbdbd;} .nfc-phone .knob{background:#bdbdbd;}

/* Result — serif holder name, subdued verdict */
.result{background:#FAF9F7;}
.result-hero{background:#fff;}
.holder .h-name{font-family:var(--lv-serif);font-weight:600;font-size:24px;letter-spacing:.2px;}
.holder .h-sub{font-family:var(--lv-sans);}
.sec-title{font-family:var(--lv-sans);}
.clab,.acc-head .at,.frow .fk,.frow .fv,.field .k,.field .v,.dcheck .lab{font-family:var(--lv-sans);}
.verdict{background:#F6F5F2;border:1px solid var(--lv-line);}
.verdict .v-t{font-family:var(--lv-sans);color:var(--lv-ink);}
.biopage .cap{font-family:var(--lv-sans);}

/* Upload — black progress ring, luxury type */
.upload h2{font-family:var(--lv-serif);font-weight:600;font-size:24px;}
.upload p,.up-tag{font-family:var(--lv-sans);}
.up-ring .prog{stroke:var(--lv-noir);}
.up-ring .pct{font-family:var(--lv-sans);}
.btn-ghost{font-family:var(--lv-sans);border-radius:2px;text-transform:uppercase;letter-spacing:1.5px;font-size:12px;font-weight:600;}
.phone-caption{font-family:var(--lv-sans);}