body[data-app="player"].registration-page{background:#090a0b;color:#e7e3da;min-height:100dvh;background-image:linear-gradient(145deg,transparent 60%,#b9a17b15 60.1%,transparent 60.4%),linear-gradient(28deg,transparent 75%,#b9a17b25 75.1%,transparent 75.4%)}
body[data-app="player"].registration-page>header,body[data-app="player"].registration-page>footer{display:none}body[data-app="player"].registration-page #app{padding:0;max-width:none}.onboarding-shell{max-width:460px;margin:auto;padding:28px 24px 36px;text-align:center;min-height:100dvh;display:flex;flex-direction:column;box-sizing:border-box}.registration-brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:26px;color:#b9a17b}.registration-brand strong{font-size:28px}.registration-brand small{display:block;font-size:10px;letter-spacing:4px}.niu-reference-bull{display:inline-block;width:50px;height:52px;background:url('./brand/website-reference.png') -114px -13px/1672px 941px no-repeat;flex:none}.registration-emblem{display:grid;place-items:center;min-height:150px;margin:8px auto 22px}.registration-emblem .niu-reference-bull{transform:scale(2)}.onboarding-shell h1{font-size:29px;line-height:1.3;margin:12px 0 20px;color:#e7e3da}.onboarding-shell p{font-size:15px;line-height:1.7;color:#d2cec7}.registration-progress{font-size:13px;letter-spacing:2px;color:#b9a17b;font-weight:700}.registration-languages{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:32px}.registration-languages button{display:flex;align-items:center;gap:12px;min-height:76px;text-align:left;padding:12px;font-size:16px;background:#b9a17b16;color:#e7e3da;border:1px solid #b9a17b;border-radius:14px}.registration-languages span{font-size:26px}.device-explanation{border:1px solid #b9a17b77;background:#b9a17b12;border-radius:14px;padding:22px;text-align:left;line-height:1.8;font-size:15px;margin:36px 0}.onboarding-shell .primary{background:#b9a17b;color:#090a0b;border:1px solid #b9a17b;border-radius:12px;width:100%;min-height:56px;box-shadow:none;font-size:17px}.registration-continue{margin-top:30px}.pin-circles{display:flex;justify-content:center;gap:18px;margin:32px 0 70px}.pin-circles span{border:2px solid #b9a17b;width:16px;height:16px;border-radius:50%}.pin-circles .filled{background:#b9a17b}.pin-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 30px;justify-items:center;margin-top:20px}.pin-keypad button{width:72px;height:72px;border:1px solid #b9a17b;border-radius:50%;background:#b9a17b20;color:#e7e3da;font-size:30px;font-weight:600;padding:0;box-shadow:none}.onboarding-shell .pin-footnote{margin-top:50px;font-size:12px}.registration-name{margin-top:45px}.registration-name input{background:transparent;border:0;border-bottom:2px solid #b9a17b;border-radius:0;color:#e7e3da;font-size:23px;text-align:center;width:100%;padding:16px 0;box-sizing:border-box}.registration-name button{margin-top:40px}.onboarding-shell button:focus-visible,.onboarding-shell input:focus-visible{outline:2px solid #e7e3da;outline-offset:4px}.onboarding-shell button:disabled{opacity:.5}.onboarding-shell .error{color:#e7e3da}@media(max-width:350px){.onboarding-shell{padding:22px 16px}.pin-keypad{gap:16px}.pin-keypad button{width:64px;height:64px}.registration-languages button{font-size:14px}}

body[data-app="player"].registration-page{background-color:#090a0b!important;background-image:linear-gradient(145deg,transparent 60%,#b9a17b15 60.1%,transparent 60.4%),linear-gradient(28deg,transparent 75%,#b9a17b25 75.1%,transparent 75.4%)!important;font-family:system-ui,sans-serif}body[data-app="player"].registration-page>header,body[data-app="player"].registration-page>footer{display:none!important}

.identity-page{max-width:560px;margin:auto;padding:20px 20px calc(110px + env(safe-area-inset-bottom));color:#f7edce}.identity-page h1{font-size:2rem}.identity-form{display:grid;gap:24px}.identity-form label{display:grid;gap:12px;color:#e2bf73}.identity-form input{width:100%;box-sizing:border-box;padding:18px;border:1px solid #655434;border-radius:18px;background:#151410;color:#fff;font-size:18px}.identity-page .card{margin:20px 0;padding:24px;border:1px solid #655434;border-radius:22px;background:#1a1711}.identity-success{color:#57d597}.identity-progress{line-height:2.5}.profile-security article>button{display:grid;justify-items:center;gap:10px;width:100%;background:none;border:0;color:inherit}.profile-security article>button span svg{width:36px;height:36px}

/* Owner-approved Set PIN visual; isolated to the existing PIN step. */
body[data-app="player"].pin-registration-layout{--bg:#090a0b;--text:#e7e3da;--muted:#d2cec7;--gold:#b9a17b}
.pin-registration-layout *{box-sizing:border-box}
body[data-app="player"].pin-registration-layout{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100svh;background-image:linear-gradient(145deg,transparent 60%,#b9a17b15 60.1%,transparent 60.4%),linear-gradient(28deg,transparent 75%,#b9a17b25 75.1%,transparent 75.4%)}
body[data-app="player"].pin-registration-layout::before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(134deg,transparent 15%,#b9a17b0d 15.3%,#b9a17b30 15.5%,transparent 16%,transparent 67%,#b9a17b12 67.5%,transparent 69%);z-index:-1}
.pin-registration-layout .onboarding-shell{width:min(100%,460px);min-height:100svh;margin:auto;display:flex;flex-direction:column;align-items:center;padding:calc(22px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));}
.pin-registration-layout .registration-brand{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--gold);margin:0 0 18px}
.pin-registration-layout .registration-brand strong{font-size:28px;line-height:1.15}
.pin-registration-layout .registration-brand small{display:block;font-size:10px;letter-spacing:4px;margin-top:4px}
.pin-registration-layout .niu-reference-bull{width:50px;height:52px;background:url('./brand/website-reference.png') -114px -13px/1672px 941px no-repeat;flex:none}
.pin-registration-layout .pin-card{position:relative;width:100%;padding:22px 20px 18px;border:1px solid #b9a17b50;border-radius:24px;background:linear-gradient(145deg,#ffffff09,#ffffff02 50%,#b9a17b08);box-shadow:0 20px 70px #0007,inset 0 1px #ffffff10;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);text-align:center;overflow:hidden}
.pin-registration-layout .pin-card::before{content:"";position:absolute;width:120%;height:1px;top:20px;left:-10%;background:linear-gradient(90deg,transparent,#b9a17b40,transparent);transform:rotate(-18deg);pointer-events:none}
.pin-registration-layout .step{color:var(--gold);font-size:11px;font-weight:700;letter-spacing:2px;margin-bottom:14px}
.pin-registration-layout .symbol{width:42px;height:42px;margin:0 auto 10px;border:1px solid #b9a17b65;border-radius:14px;display:grid;place-items:center;color:var(--gold);background:#b9a17b0c}
.pin-registration-layout .symbol svg{width:22px;height:22px}
.pin-registration-layout .pin-card h1{font-size:26px;line-height:1.3;margin:0 0 8px;font-weight:650}
.pin-registration-layout .hint{font-size:14px;line-height:1.7;color:var(--muted);margin:0}
.pin-registration-layout .pin-circles{display:flex;justify-content:center;gap:18px;margin:26px 0 28px;min-height:20px}
.pin-registration-layout .pin-circles span{border:2px solid var(--gold);width:16px;height:16px;border-radius:50%;transition:background .16s,box-shadow .16s,transform .16s}
.pin-registration-layout .pin-circles .filled{background:var(--gold);box-shadow:0 0 16px #b9a17b30;transform:scale(1.06)}
.pin-registration-layout .pin-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 30px;justify-items:center;margin:0 auto;max-width:320px}
.pin-registration-layout .pin-keypad button{width:72px;height:72px;border:1px solid var(--gold);border-radius:50%;background:#b9a17b20;color:var(--text);font-size:30px;font-weight:600;padding:0;box-shadow:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;font-family:inherit;transition:background .15s,transform .15s}
.pin-registration-layout .pin-keypad button:active{transform:scale(.94);background:#b9a17b40}
.pin-registration-layout .pin-keypad button:focus-visible{outline:2px solid var(--text);outline-offset:4px}
.pin-registration-layout .pin-keypad button:disabled{opacity:.45;cursor:default}
.pin-registration-layout .pin-status{font-size:12px;line-height:1.6;min-height:38px;margin:18px 0 0;color:var(--muted)}
.pin-registration-layout .pin-status.error{color:var(--text)}
.pin-registration-layout .pin-footnote{font-size:12px;color:var(--muted);line-height:1.6;margin:18px 0 0}
.pin-registration-layout .preview-note{color:#a8a39a;font-size:11px;line-height:1.7;text-align:center;max-width:350px;margin:16px 0 0}
.pin-registration-layout .preview-note strong{color:var(--gold);font-weight:500}
.pin-registration-layout .pin-success{display:none;min-height:400px;place-content:center;justify-items:center;gap:18px}
.pin-registration-layout .success-mark{width:90px;height:90px;display:grid;place-items:center;color:var(--gold);border:1px solid #b9a17b85;border-radius:50%;box-shadow:0 0 40px #b9a17b20;animation:arrive .45s ease-out}
.pin-registration-layout .success-mark svg{width:38px;height:38px}
.pin-registration-layout .pin-success h2{font-size:23px;margin:0}
.pin-registration-layout .pin-success p{max-width:260px;font-size:14px;line-height:1.8;color:var(--muted);margin:0}
.pin-registration-layout .pin-card.complete .pin-entry{display:none}
.pin-registration-layout .pin-card.complete .pin-success{display:grid}
.pin-registration-layout .pin-card.complete .step{margin-bottom:0}
.pin-registration-layout .change{animation:arrive .25s ease-out}
.pin-registration-layout .shake{animation:shake .3s ease-in-out}
@keyframes arrive{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}@keyframes shake{25%,75%{transform:translateX(-4px)}50%{transform:translateX(4px)}}
@media(max-width:350px){
.pin-registration-layout .onboarding-shell{padding-left:14px;padding-right:14px}
.pin-registration-layout .pin-card{padding:18px 14px 14px}
.pin-registration-layout .pin-keypad{gap:16px}
.pin-registration-layout .pin-keypad button{width:64px;height:64px}
.pin-registration-layout .pin-card h1{font-size:24px}
.pin-registration-layout .pin-circles{margin:22px 0 24px}
.pin-registration-layout .registration-brand{margin-bottom:14px}}
@media(max-height:650px){
.pin-registration-layout .onboarding-shell{padding-top:12px;padding-bottom:12px}
.pin-registration-layout .registration-brand{margin-bottom:10px}
.pin-registration-layout .pin-card{padding-top:14px}
.pin-registration-layout .step{margin-bottom:8px}
.pin-registration-layout .symbol{width:34px;height:34px;margin-bottom:8px}
.pin-registration-layout .pin-card h1{font-size:23px}
.pin-registration-layout .pin-circles{margin:18px 0}
.pin-registration-layout .pin-keypad{gap:12px 24px}
.pin-registration-layout .pin-keypad button{width:60px;height:60px}
.pin-registration-layout .pin-status{margin-top:12px;min-height:32px}
.pin-registration-layout .pin-footnote,.pin-registration-layout .preview-note{margin-top:10px}
.pin-registration-layout .pin-success{min-height:350px}}
@media(prefers-reduced-motion:reduce){
.pin-registration-layout *,.pin-registration-layout *::before{animation:none!important;transition:none!important}}

/* Reference recording: smoky glass, diagonal metallic light, floating OTP tiles.
   NIU6NIU keeps its own colors, six-digit PIN and existing circular keypad. */
body[data-app="player"].pin-registration-layout{background-image:linear-gradient(139deg,transparent 9%,#b9a17b10 9.2%,#b9a17b50 9.8%,#171715 10.5%,transparent 12%),linear-gradient(139deg,transparent 28%,#b9a17b09 29%,#b9a17b40 30%,transparent 31%),linear-gradient(139deg,transparent 72%,#b9a17b45 73%,#121312 74%,transparent 76%);background-attachment:fixed}
body[data-app="player"].pin-registration-layout::before{background:linear-gradient(135deg,transparent 46%,#b9a17b08 47%,#b9a17b44 47.5%,#ffffff16 47.7%,transparent 48.2%)}
.pin-registration-layout .onboarding-shell{width:min(100%,480px)}
.pin-registration-layout .registration-brand{margin-bottom:22px}
.pin-registration-layout .pin-card{border-radius:18px;padding-top:26px;background:linear-gradient(125deg,#d2cec714,#131414a6 45%,#090a0bd9);border-color:#b9a17b58;box-shadow:0 24px 65px #0008,inset 0 1px #e7e3da30;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.pin-registration-layout .pin-card::before{top:0;left:0;width:76px;height:76px;transform:none;clip-path:polygon(0 0,100% 0,0 100%);background:linear-gradient(135deg,#e7e3da24,#b9a17b15);border-radius:17px;opacity:.75}
.pin-registration-layout .pin-card::after{content:"";position:absolute;right:0;bottom:0;width:58px;height:58px;background:linear-gradient(135deg,transparent 49%,#b9a17b16 50%);pointer-events:none}
.pin-registration-layout .step{font-size:10px;opacity:.8}
.pin-registration-layout .symbol{color:var(--gold);box-shadow:0 0 24px #b9a17b16;background:#b9a17b12}
.pin-registration-layout .pin-circles{position:relative;display:block;width:218px;height:168px;margin:12px auto 20px;}
.pin-registration-layout .pin-circles span{position:absolute;left:50%;top:50%;width:44px;height:44px;border-radius:12px;border:1px solid #b9a17b85;background:linear-gradient(145deg,#ffffff0c,#090a0bd9);box-shadow:inset 1px 1px #e7e3da12,0 0 13px #b9a17b0c;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y)));transition:background .18s,box-shadow .18s,transform .6s cubic-bezier(.4,0,.2,1),opacity .6s}
.pin-registration-layout .pin-circles span:nth-child(1){--x:0px;--y:-56px}
.pin-registration-layout .pin-circles span:nth-child(2){--x:64px;--y:-28px}
.pin-registration-layout .pin-circles span:nth-child(3){--x:64px;--y:28px}
.pin-registration-layout .pin-circles span:nth-child(4){--x:0px;--y:56px}
.pin-registration-layout .pin-circles span:nth-child(5){--x:-64px;--y:28px}
.pin-registration-layout .pin-circles span:nth-child(6){--x:-64px;--y:-28px}
.pin-registration-layout .pin-circles span::before{content:"";position:absolute;inset:-1px;border-radius:12px;background:conic-gradient(from 15deg,transparent 10%,#e7e3da80 15%,#b9a17b90 19%,transparent 24%,transparent 64%,#b9a17b77 72%,transparent 80%);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;-webkit-mask-composite:xor;padding:1px;pointer-events:none}
.pin-registration-layout .pin-circles span::after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:#b9a17b40;left:50%;top:50%;transform:translate(-50%,-50%);transition:background .18s,box-shadow .18s}
.pin-registration-layout .pin-circles .filled{background:linear-gradient(145deg,#b9a17b22,#090a0bf2);box-shadow:0 0 20px #b9a17b17;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y)))}
.pin-registration-layout .pin-circles .filled::after{width:9px;height:9px;background:var(--text);box-shadow:0 0 12px #b9a17b80}
.pin-registration-layout .pin-card.verifying .pin-circles{animation:orbit 1.2s ease-in-out forwards}
.pin-registration-layout .pin-card.verifying .pin-keypad{opacity:.38;pointer-events:none;transition:opacity .25s}
.pin-registration-layout .pin-card.collapsing .pin-circles span{transform:translate(-50%,-50%) scale(.9);opacity:.5}
.pin-registration-layout .pin-card.collapsing .pin-circles span:first-child{opacity:1}
/* Match the reference's in-place success transition: one center tile,
   expanding halo, then title and gold confirmation strip. */
.pin-registration-layout .pin-success{min-height:540px;position:relative;gap:0;padding-top:8px;align-content:start;justify-items:center;}
.pin-registration-layout .success-symbol{width:42px;height:42px;border:1px solid #b9a17b65;border-radius:14px;display:grid;place-items:center;color:var(--gold);background:#b9a17b12;margin-bottom:12px;animation:success-fade .35s ease-out both}
.pin-registration-layout .success-symbol svg{width:22px;height:22px}
.pin-registration-layout .pin-success h2{font-size:26px;line-height:1.3;color:var(--gold);margin:0 0 8px;animation:success-fade .45s .15s ease-out both}
.pin-registration-layout .pin-success .success-subtitle{font-size:13px;line-height:1.7;max-width:290px;margin:0;color:var(--muted);animation:success-fade .45s .25s ease-out both}
.pin-registration-layout .success-animation{position:relative;width:218px;height:188px;display:grid;place-items:center;margin:14px 0 10px}
.pin-registration-layout .success-mark{position:relative;width:46px;height:46px;border-radius:12px;border:1px solid var(--gold);background:linear-gradient(145deg,#b9a17b12,#090a0bda);box-shadow:0 0 20px #b9a17b18;display:grid;place-items:center;z-index:1;animation:center-tile .4s ease-out both}
.pin-registration-layout .success-mark svg{width:23px;height:23px;stroke-dasharray:26;stroke-dashoffset:26;animation:draw-check .4s .35s ease-out forwards}
.pin-registration-layout .success-mark::before{content:none}
.pin-registration-layout .success-halo{position:absolute;width:46px;height:46px;border:1px solid #b9a17b85;border-radius:50%;box-shadow:0 0 15px #b9a17b25,inset 0 0 18px #b9a17b10;animation:expand-halo .8s .1s cubic-bezier(.15,.7,.25,1) both}
.pin-registration-layout .success-halo::after{content:"";position:absolute;inset:5px;border-radius:50%;border:1px solid #b9a17b16}
.pin-registration-layout .success-caption{font-size:12px;line-height:1.8;max-width:270px;color:var(--muted);margin:0 0 30px;animation:success-fade .4s .55s ease-out both}
.pin-registration-layout .success-strip{width:100%;min-height:48px;padding:12px 16px;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid #b9a17b90;border-radius:10px;background:var(--gold);color:var(--bg);font-size:14px;font-weight:650;box-shadow:0 0 22px #b9a17b25;animation:success-fade .4s .7s ease-out both}
.pin-registration-layout .success-strip svg{width:18px;height:18px}
@keyframes orbit{from{transform:rotate(0)}to{transform:rotate(180deg)}}
@keyframes center-tile{from{opacity:.5;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
@keyframes expand-halo{from{transform:scale(.8);opacity:0}20%{opacity:1}to{transform:scale(3.55);opacity:.85}}
@keyframes draw-check{to{stroke-dashoffset:0}}
@keyframes success-fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:350px){
.pin-registration-layout .pin-card{padding-left:14px;padding-right:14px}
.pin-registration-layout .pin-circles{height:156px;margin-top:8px;margin-bottom:16px}
.pin-registration-layout .registration-brand{margin-bottom:14px}}
@media(max-height:650px){
.pin-registration-layout .pin-circles{height:156px;margin:8px auto 16px}
.pin-registration-layout .pin-card{padding-top:18px}
.pin-registration-layout .pin-success{min-height:460px}}
@media(prefers-reduced-motion:reduce){
.pin-registration-layout .success-mark svg{stroke-dashoffset:0}
.pin-registration-layout .success-halo{transform:scale(3.55)}
.pin-registration-layout .pin-card.verifying .pin-circles{animation:none}
.pin-registration-layout .pin-circles span{transition:none}}
.pin-registration-layout .registration-brand{margin-bottom:20px}
.pin-registration-layout .registration-progress{margin-bottom:14px}
.pin-registration-layout .pin-footnote{margin-top:18px}
.pin-registration-layout #error{display:none}
.pin-registration-layout .pin-card .pin-status{min-height:38px}
.pin-registration-layout .pin-card.collapsing .pin-keypad{opacity:.38;pointer-events:none}
.pin-registration-layout .pin-card.collapsing .pin-circles span{transform:translate(-50%,-50%) scale(.9);opacity:.5}
.pin-registration-layout .pin-card.collapsing .pin-circles span:first-child{opacity:1}
.pin-registration-layout .pin-card.complete .pin-entry{display:none}
.pin-registration-layout .pin-card.complete .pin-success{display:grid}
.pin-registration-layout .pin-card .success-mark svg{animation-delay:.05s}
.pin-registration-layout .pin-card .success-halo{animation-delay:.5s}
.pin-registration-layout .pin-card .success-symbol,.pin-registration-layout .pin-card .pin-success h2,.pin-registration-layout .pin-card .success-subtitle{animation-delay:1.1s}
.pin-registration-layout .pin-card .success-caption,.pin-registration-layout .pin-card .success-strip{animation-delay:1.3s}
.pin-registration-layout #registration-body{width:100%}
.pin-registration-layout .pin-keypad button{font-size:30px;font-weight:600}

/* Account PIN UI alignment only. No API allowlist or credential changes. */
/* Owner-approved Set PIN visual; isolated to the existing PIN step. */
.identity-page.account-pin-page{--bg:#090a0b;--text:#e7e3da;--muted:#d2cec7;--gold:#b9a17b}
.account-pin-page *{box-sizing:border-box}
.identity-page.account-pin-page{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100svh;background-image:linear-gradient(145deg,transparent 60%,#b9a17b15 60.1%,transparent 60.4%),linear-gradient(28deg,transparent 75%,#b9a17b25 75.1%,transparent 75.4%)}
.identity-page.account-pin-page::before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(134deg,transparent 15%,#b9a17b0d 15.3%,#b9a17b30 15.5%,transparent 16%,transparent 67%,#b9a17b12 67.5%,transparent 69%);z-index:-1}
.account-pin-page .onboarding-shell{width:min(100%,460px);min-height:100svh;margin:auto;display:flex;flex-direction:column;align-items:center;padding:calc(22px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));}
.account-pin-page .registration-brand{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--gold);margin:0 0 18px}
.account-pin-page .registration-brand strong{font-size:28px;line-height:1.15}
.account-pin-page .registration-brand small{display:block;font-size:10px;letter-spacing:4px;margin-top:4px}
.account-pin-page .niu-reference-bull{width:50px;height:52px;background:url('./brand/website-reference.png') -114px -13px/1672px 941px no-repeat;flex:none}
.account-pin-page .pin-card{position:relative;width:100%;padding:22px 20px 18px;border:1px solid #b9a17b50;border-radius:24px;background:linear-gradient(145deg,#ffffff09,#ffffff02 50%,#b9a17b08);box-shadow:0 20px 70px #0007,inset 0 1px #ffffff10;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);text-align:center;overflow:hidden}
.account-pin-page .pin-card::before{content:"";position:absolute;width:120%;height:1px;top:20px;left:-10%;background:linear-gradient(90deg,transparent,#b9a17b40,transparent);transform:rotate(-18deg);pointer-events:none}
.account-pin-page .step{color:var(--gold);font-size:11px;font-weight:700;letter-spacing:2px;margin-bottom:14px}
.account-pin-page .symbol{width:42px;height:42px;margin:0 auto 10px;border:1px solid #b9a17b65;border-radius:14px;display:grid;place-items:center;color:var(--gold);background:#b9a17b0c}
.account-pin-page .symbol svg{width:22px;height:22px}
.account-pin-page .pin-card h1{font-size:26px;line-height:1.3;margin:0 0 8px;font-weight:650}
.account-pin-page .hint{font-size:14px;line-height:1.7;color:var(--muted);margin:0}
.account-pin-page .pin-circles{display:flex;justify-content:center;gap:18px;margin:26px 0 28px;min-height:20px}
.account-pin-page .pin-circles span{border:2px solid var(--gold);width:16px;height:16px;border-radius:50%;transition:background .16s,box-shadow .16s,transform .16s}
.account-pin-page .pin-circles .filled{background:var(--gold);box-shadow:0 0 16px #b9a17b30;transform:scale(1.06)}
.account-pin-page .pin-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 30px;justify-items:center;margin:0 auto;max-width:320px}
.account-pin-page .pin-keypad button{width:72px;height:72px;border:1px solid var(--gold);border-radius:50%;background:#b9a17b20;color:var(--text);font-size:30px;font-weight:600;padding:0;box-shadow:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;font-family:inherit;transition:background .15s,transform .15s}
.account-pin-page .pin-keypad button:active{transform:scale(.94);background:#b9a17b40}
.account-pin-page .pin-keypad button:focus-visible{outline:2px solid var(--text);outline-offset:4px}
.account-pin-page .pin-keypad button:disabled{opacity:.45;cursor:default}
.account-pin-page .pin-status{font-size:12px;line-height:1.6;min-height:38px;margin:18px 0 0;color:var(--muted)}
.account-pin-page .pin-status.error{color:var(--text)}
.account-pin-page .pin-footnote{font-size:12px;color:var(--muted);line-height:1.6;margin:18px 0 0}
.account-pin-page .preview-note{color:#a8a39a;font-size:11px;line-height:1.7;text-align:center;max-width:350px;margin:16px 0 0}
.account-pin-page .preview-note strong{color:var(--gold);font-weight:500}
.account-pin-page .pin-success{display:none;min-height:400px;place-content:center;justify-items:center;gap:18px}
.account-pin-page .success-mark{width:90px;height:90px;display:grid;place-items:center;color:var(--gold);border:1px solid #b9a17b85;border-radius:50%;box-shadow:0 0 40px #b9a17b20;animation:arrive .45s ease-out}
.account-pin-page .success-mark svg{width:38px;height:38px}
.account-pin-page .pin-success h2{font-size:23px;margin:0}
.account-pin-page .pin-success p{max-width:260px;font-size:14px;line-height:1.8;color:var(--muted);margin:0}
.account-pin-page .pin-card.complete .pin-entry{display:none}
.account-pin-page .pin-card.complete .pin-success{display:grid}
.account-pin-page .pin-card.complete .step{margin-bottom:0}
.account-pin-page .change{animation:arrive .25s ease-out}
.account-pin-page .shake{animation:shake .3s ease-in-out}

@media(max-width:350px){
.account-pin-page .onboarding-shell{padding-left:14px;padding-right:14px}
.account-pin-page .pin-card{padding:18px 14px 14px}
.account-pin-page .pin-keypad{gap:16px}
.account-pin-page .pin-keypad button{width:64px;height:64px}
.account-pin-page .pin-card h1{font-size:24px}
.account-pin-page .pin-circles{margin:22px 0 24px}
.account-pin-page .registration-brand{margin-bottom:14px}}
@media(max-height:650px){
.account-pin-page .onboarding-shell{padding-top:12px;padding-bottom:12px}
.account-pin-page .registration-brand{margin-bottom:10px}
.account-pin-page .pin-card{padding-top:14px}
.account-pin-page .step{margin-bottom:8px}
.account-pin-page .symbol{width:34px;height:34px;margin-bottom:8px}
.account-pin-page .pin-card h1{font-size:23px}
.account-pin-page .pin-circles{margin:18px 0}
.account-pin-page .pin-keypad{gap:12px 24px}
.account-pin-page .pin-keypad button{width:60px;height:60px}
.account-pin-page .pin-status{margin-top:12px;min-height:32px}
.account-pin-page .pin-footnote,.account-pin-page .preview-note{margin-top:10px}
.account-pin-page .pin-success{min-height:350px}}
@media(prefers-reduced-motion:reduce){
.account-pin-page *,.account-pin-page *::before{animation:none!important;transition:none!important}}

/* Reference recording: smoky glass, diagonal metallic light, floating OTP tiles.
   NIU6NIU keeps its own colors, six-digit PIN and existing circular keypad. */
.identity-page.account-pin-page{background-image:linear-gradient(139deg,transparent 9%,#b9a17b10 9.2%,#b9a17b50 9.8%,#171715 10.5%,transparent 12%),linear-gradient(139deg,transparent 28%,#b9a17b09 29%,#b9a17b40 30%,transparent 31%),linear-gradient(139deg,transparent 72%,#b9a17b45 73%,#121312 74%,transparent 76%);background-attachment:fixed}
.identity-page.account-pin-page::before{background:linear-gradient(135deg,transparent 46%,#b9a17b08 47%,#b9a17b44 47.5%,#ffffff16 47.7%,transparent 48.2%)}
.account-pin-page .onboarding-shell{width:min(100%,480px)}
.account-pin-page .registration-brand{margin-bottom:22px}
.account-pin-page .pin-card{border-radius:18px;padding-top:26px;background:linear-gradient(125deg,#d2cec714,#131414a6 45%,#090a0bd9);border-color:#b9a17b58;box-shadow:0 24px 65px #0008,inset 0 1px #e7e3da30;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.account-pin-page .pin-card::before{top:0;left:0;width:76px;height:76px;transform:none;clip-path:polygon(0 0,100% 0,0 100%);background:linear-gradient(135deg,#e7e3da24,#b9a17b15);border-radius:17px;opacity:.75}
.account-pin-page .pin-card::after{content:"";position:absolute;right:0;bottom:0;width:58px;height:58px;background:linear-gradient(135deg,transparent 49%,#b9a17b16 50%);pointer-events:none}
.account-pin-page .step{font-size:10px;opacity:.8}
.account-pin-page .symbol{color:var(--gold);box-shadow:0 0 24px #b9a17b16;background:#b9a17b12}
.account-pin-page .pin-circles{position:relative;display:block;width:218px;height:168px;margin:12px auto 20px;}
.account-pin-page .pin-circles span{position:absolute;left:50%;top:50%;width:44px;height:44px;border-radius:12px;border:1px solid #b9a17b85;background:linear-gradient(145deg,#ffffff0c,#090a0bd9);box-shadow:inset 1px 1px #e7e3da12,0 0 13px #b9a17b0c;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y)));transition:background .18s,box-shadow .18s,transform .6s cubic-bezier(.4,0,.2,1),opacity .6s}
.account-pin-page .pin-circles span:nth-child(1){--x:0px;--y:-56px}
.account-pin-page .pin-circles span:nth-child(2){--x:64px;--y:-28px}
.account-pin-page .pin-circles span:nth-child(3){--x:64px;--y:28px}
.account-pin-page .pin-circles span:nth-child(4){--x:0px;--y:56px}
.account-pin-page .pin-circles span:nth-child(5){--x:-64px;--y:28px}
.account-pin-page .pin-circles span:nth-child(6){--x:-64px;--y:-28px}
.account-pin-page .pin-circles span::before{content:"";position:absolute;inset:-1px;border-radius:12px;background:conic-gradient(from 15deg,transparent 10%,#e7e3da80 15%,#b9a17b90 19%,transparent 24%,transparent 64%,#b9a17b77 72%,transparent 80%);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;-webkit-mask-composite:xor;padding:1px;pointer-events:none}
.account-pin-page .pin-circles span::after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:#b9a17b40;left:50%;top:50%;transform:translate(-50%,-50%);transition:background .18s,box-shadow .18s}
.account-pin-page .pin-circles .filled{background:linear-gradient(145deg,#b9a17b22,#090a0bf2);box-shadow:0 0 20px #b9a17b17;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y)))}
.account-pin-page .pin-circles .filled::after{width:9px;height:9px;background:var(--text);box-shadow:0 0 12px #b9a17b80}
.account-pin-page .pin-card.verifying .pin-circles{animation:orbit 1.2s ease-in-out forwards}
.account-pin-page .pin-card.verifying .pin-keypad{opacity:.38;pointer-events:none;transition:opacity .25s}
.account-pin-page .pin-card.collapsing .pin-circles span{transform:translate(-50%,-50%) scale(.9);opacity:.5}
.account-pin-page .pin-card.collapsing .pin-circles span:first-child{opacity:1}
/* Match the reference's in-place success transition: one center tile,
   expanding halo, then title and gold confirmation strip. */
.account-pin-page .pin-success{min-height:540px;position:relative;gap:0;padding-top:8px;align-content:start;justify-items:center;}
.account-pin-page .success-symbol{width:42px;height:42px;border:1px solid #b9a17b65;border-radius:14px;display:grid;place-items:center;color:var(--gold);background:#b9a17b12;margin-bottom:12px;animation:success-fade .35s ease-out both}
.account-pin-page .success-symbol svg{width:22px;height:22px}
.account-pin-page .pin-success h2{font-size:26px;line-height:1.3;color:var(--gold);margin:0 0 8px;animation:success-fade .45s .15s ease-out both}
.account-pin-page .pin-success .success-subtitle{font-size:13px;line-height:1.7;max-width:290px;margin:0;color:var(--muted);animation:success-fade .45s .25s ease-out both}
.account-pin-page .success-animation{position:relative;width:218px;height:188px;display:grid;place-items:center;margin:14px 0 10px}
.account-pin-page .success-mark{position:relative;width:46px;height:46px;border-radius:12px;border:1px solid var(--gold);background:linear-gradient(145deg,#b9a17b12,#090a0bda);box-shadow:0 0 20px #b9a17b18;display:grid;place-items:center;z-index:1;animation:center-tile .4s ease-out both}
.account-pin-page .success-mark svg{width:23px;height:23px;stroke-dasharray:26;stroke-dashoffset:26;animation:draw-check .4s .35s ease-out forwards}
.account-pin-page .success-mark::before{content:none}
.account-pin-page .success-halo{position:absolute;width:46px;height:46px;border:1px solid #b9a17b85;border-radius:50%;box-shadow:0 0 15px #b9a17b25,inset 0 0 18px #b9a17b10;animation:expand-halo .8s .1s cubic-bezier(.15,.7,.25,1) both}
.account-pin-page .success-halo::after{content:"";position:absolute;inset:5px;border-radius:50%;border:1px solid #b9a17b16}
.account-pin-page .success-caption{font-size:12px;line-height:1.8;max-width:270px;color:var(--muted);margin:0 0 30px;animation:success-fade .4s .55s ease-out both}
.account-pin-page .success-strip{width:100%;min-height:48px;padding:12px 16px;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid #b9a17b90;border-radius:10px;background:var(--gold);color:var(--bg);font-size:14px;font-weight:650;box-shadow:0 0 22px #b9a17b25;animation:success-fade .4s .7s ease-out both}
.account-pin-page .success-strip svg{width:18px;height:18px}





@media(max-width:350px){
.account-pin-page .pin-card{padding-left:14px;padding-right:14px}
.account-pin-page .pin-circles{height:156px;margin-top:8px;margin-bottom:16px}
.account-pin-page .registration-brand{margin-bottom:14px}}
@media(max-height:650px){
.account-pin-page .pin-circles{height:156px;margin:8px auto 16px}
.account-pin-page .pin-card{padding-top:18px}
.account-pin-page .pin-success{min-height:460px}}
@media(prefers-reduced-motion:reduce){
.account-pin-page .success-mark svg{stroke-dashoffset:0}
.account-pin-page .success-halo{transform:scale(3.55)}
.account-pin-page .pin-card.verifying .pin-circles{animation:none}
.account-pin-page .pin-circles span{transition:none}}
.account-pin-page .registration-brand{margin-bottom:20px}
.account-pin-page .registration-progress{margin-bottom:14px}
.account-pin-page .pin-footnote{margin-top:18px}
.account-pin-page #error{display:none}
.account-pin-page .pin-card .pin-status{min-height:38px}
.account-pin-page .pin-card.collapsing .pin-keypad{opacity:.38;pointer-events:none}
.account-pin-page .pin-card.collapsing .pin-circles span{transform:translate(-50%,-50%) scale(.9);opacity:.5}
.account-pin-page .pin-card.collapsing .pin-circles span:first-child{opacity:1}
.account-pin-page .pin-card.complete .pin-entry{display:none}
.account-pin-page .pin-card.complete .pin-success{display:grid}
.account-pin-page .pin-card .success-mark svg{animation-delay:.05s}
.account-pin-page .pin-card .success-halo{animation-delay:.5s}
.account-pin-page .pin-card .success-symbol,.account-pin-page .pin-card .pin-success h2,.account-pin-page .pin-card .success-subtitle{animation-delay:1.1s}
.account-pin-page .pin-card .success-caption,.account-pin-page .pin-card .success-strip{animation-delay:1.3s}
.account-pin-page #registration-body{width:100%}
.account-pin-page .pin-keypad button{font-size:30px;font-weight:600}

.identity-page.account-pin-page{position:relative;isolation:isolate;width:100%;max-width:460px;--bg:#090a0b;--text:#e7e3da;--muted:#d2cec7;--gold:#b9a17b;box-sizing:border-box;padding:20px 16px calc(110px + env(safe-area-inset-bottom));font-family:system-ui,sans-serif}.account-pin-page [data-body]{width:100%}.account-pin-page [data-back]{min-width:44px;min-height:44px;font-size:15px;margin:0 0 18px}.account-pin-page .registration-brand{margin:0 0 22px}.account-pin-page [data-error]{font-size:14px;line-height:1.7;overflow-wrap:anywhere;margin:16px 0;color:#e7e3da}.account-pin-page [data-body]~button,.account-pin-page [data-body]~a{margin:18px 0 0}.account-pin-page .pin-keypad button{font-size:30px;font-weight:600}.account-pin-page .pin-footnote{font-size:12px;line-height:1.7;text-align:center}