/* 192 — Access Codes · personal profile photo. Pairs with js/193-otac-photo.js. Remove the <link> + <script> to roll back. */
:root{--bhp-gold:#E8B64A;--bhp-navy:#16294A;--bhp-ok:#1FA463;--bhp-bad:#D93A3A}
@keyframes bhpSpin{to{transform:rotate(360deg)}}
@keyframes bhpShim{to{background-position:-200% 0}}
@keyframes bhpPop{0%{opacity:0;transform:scale(.4) rotate(-25deg)}60%{opacity:1;transform:scale(1.12) rotate(4deg)}100%{opacity:1;transform:none}}
@keyframes bhpBadge{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@keyframes bhpPing{0%{box-shadow:0 0 0 0 rgba(232,182,74,.7)}100%{box-shadow:0 0 0 16px rgba(232,182,74,0)}}
@keyframes bhpFade{from{opacity:0}to{opacity:1}}
@keyframes bhpFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes bhpWelIn{0%{opacity:0;transform:translate(-50%,-22px) scale(.88)}100%{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes bhpWelOut{to{opacity:0;transform:translate(-50%,-10px) scale(.96)}}
@keyframes bhpCardIn{0%{opacity:0;transform:translateY(18px) scale(.94)}100%{opacity:1;transform:none}}
@keyframes bhpShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes bhpDot{0%,80%,100%{transform:scale(.5);opacity:.4}40%{transform:scale(1);opacity:1}}
@keyframes bhpSweep{to{background-position:200% 0}}

/* ---- shared building blocks ---- */
.bhp-ring{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,#E8B64A,#fff2c2 18%,#E8B64A 36%,#b4842a 60%,#E8B64A 82%,#fff2c2);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));
  animation:bhpSpin 7s linear infinite}
.bhp-ph{display:block;position:relative;overflow:hidden;border-radius:50%;background:linear-gradient(110deg,#1b3560 30%,#2d4f8a 50%,#1b3560 70%);background-size:200% 100%;animation:bhpShim 1.3s linear infinite}
.bhp-ph.is-in,.is-in>.bhp-ph{background:var(--bhp-navy);animation:none}
.bhp-ph img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.25);filter:blur(8px);transition:opacity .5s ease,transform .8s cubic-bezier(.2,.8,.2,1),filter .5s ease}
.is-in .bhp-ph img,.bhp-ph.is-in img{opacity:1;transform:none;filter:none}
.no-anim .bhp-ph img,.bhp-ph.no-anim img{transition:none}
.bhp-ok{position:absolute;right:-2px;bottom:-2px;width:15px;height:15px;border-radius:50%;background:var(--bhp-ok);border:2px solid #fff;display:grid;place-items:center;box-shadow:0 1px 3px rgba(0,0,0,.25);animation:bhpBadge .5s .55s cubic-bezier(.2,.9,.25,1.7) both}
.bhp-ok svg{width:8px;height:8px;display:block}
.no-anim .bhp-ok{animation:none}
.bhp-av{display:block;position:relative}

/* ---- header account button ---- */
#profileIconBtn.has-photo{position:relative;padding:0;overflow:visible;border-color:transparent;background:transparent}
#profileIconBtn .bhp-av{position:absolute;inset:0}
#profileIconBtn .bhp-av:not(.no-anim){animation:bhpPop .75s cubic-bezier(.2,.9,.25,1.25) both}
#profileIconBtn .bhp-ph{position:absolute;inset:3px}
#profileIconBtn .bhp-ring{transition:filter .2s}
#profileIconBtn:hover .bhp-ring{animation-duration:2.2s;filter:drop-shadow(0 0 4px rgba(232,182,74,.7))}
#profileIconBtn:hover .bhp-ph{transform:scale(1.05)}
#profileIconBtn .bhp-ph{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
#profileIconBtn.bhp-wait .bhp-av,#profileIconBtn.bhp-wait .acct-dot{visibility:hidden}
#profileIconBtn.bhp-pulse .bhp-av{border-radius:50%;animation:bhpPing 1s ease-out}

/* ---- welcome card ---- */
.bhp-welcome{position:fixed;top:78px;left:50%;z-index:2147482000;display:flex;align-items:center;gap:13px;padding:10px 20px 10px 11px;max-width:calc(100vw - 24px);border-radius:24px;cursor:pointer;
  background:linear-gradient(135deg,rgba(16,31,58,.97),rgba(34,62,110,.97));color:#fff;border:1px solid rgba(232,182,74,.5);
  box-shadow:0 18px 50px -12px rgba(8,20,40,.65),0 0 0 6px rgba(232,182,74,.08);backdrop-filter:blur(10px);animation:bhpWelIn .7s cubic-bezier(.2,.9,.25,1.15) both}
.bhp-welcome.is-out{animation:bhpWelOut .38s ease-in both;pointer-events:none}
.bhp-av.is-lg{width:54px;height:54px;flex:none}
.bhp-av.is-lg .bhp-ph{position:absolute;inset:4px}
.bhp-av.is-lg .bhp-ok{width:18px;height:18px;border-color:#13264a}.bhp-av.is-lg .bhp-ok svg{width:10px;height:10px}
.bhp-wt{display:flex;flex-direction:column;gap:3px;min-width:0}
.bhp-wt b{font-size:15px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:linear-gradient(100deg,#fff 20%,#f6d98c 45%,#fff 70%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:bhpSweep 2.4s .5s ease-in-out 1 both}
.bhp-wt span{display:flex;align-items:center;gap:6px;font-size:11.5px;color:#f1d28d;letter-spacing:.2px}
.bhp-wt svg{width:13px;height:13px;color:#E8B64A;flex:none}
.bhp-fly{position:fixed;z-index:2147482100;margin:0;border-radius:50%;overflow:hidden;pointer-events:none;background:var(--bhp-navy);animation:none!important;will-change:transform}
.bhp-fly img{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}

/* ---- account menu hero ---- */
.bhp-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 14px;margin:8px 8px 2px;padding:14px;border-radius:16px;color:#fff;
  background:linear-gradient(135deg,#13264a,#24467d);animation:bhpFadeUp .5s cubic-bezier(.2,.8,.2,1) both}
.bhp-hero::before{content:"";position:absolute;right:-30px;top:-40px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(232,182,74,.38),transparent 68%);pointer-events:none}
.bhp-av.is-xl{width:68px;height:68px;flex:none}
.bhp-av.is-xl .bhp-ph{position:absolute;inset:4px}
.bhp-av.is-xl .bhp-ok{width:22px;height:22px;border-color:#17305a}.bhp-av.is-xl .bhp-ok svg{width:12px;height:12px}
.bhp-hero-tx{display:flex;flex-direction:column;gap:3px;min-width:0;position:relative}
.bhp-hero-tx b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:bhpFadeUp .5s .12s both}
.bhp-hero-tx em{font-style:normal;font-size:11.5px;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:bhpFadeUp .5s .18s both}
.bhp-chip{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;margin-top:3px;padding:3px 9px;border-radius:99px;background:rgba(232,182,74,.18);border:1px solid rgba(232,182,74,.55);color:#f6d98c;font-size:10.5px;font-weight:700;letter-spacing:.3px;animation:bhpFadeUp .5s .26s both}
.bhp-chip svg{width:11px;height:11px}
.bhp-hero p{grid-column:1/-1;margin:8px 0 0;font-size:11.5px;line-height:1.45;opacity:.82;position:relative;animation:bhpFadeUp .5s .32s both}

/* ---- Admin: avatar in Access Codes ---- */
.ocx-av{position:relative;cursor:pointer;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.ocx-av:hover{transform:scale(1.07)}
.ocx-av:focus-visible{outline:2px solid var(--bhp-gold);outline-offset:2px}
.ocx-av.has-photo{color:transparent;box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--bhp-gold)}
.ocx-av .bhp-ph{position:absolute;inset:0;border-radius:50%}
.ocx-av .bhp-cam{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;background:rgba(14,26,48,.66);color:#fff;opacity:0;transform:scale(.7);transition:opacity .18s,transform .22s cubic-bezier(.2,.8,.2,1)}
.ocx-av .bhp-cam svg{width:16px;height:16px}
.ocx-av:hover .bhp-cam,.ocx-av:focus-visible .bhp-cam{opacity:1;transform:none}
.ocx-av:not(.has-photo)::after{content:"+";position:absolute;right:-3px;bottom:-3px;width:14px;height:14px;border-radius:50%;background:var(--bhp-gold);color:var(--bhp-navy);font-size:11px;font-weight:800;line-height:14px;text-align:center;border:2px solid #fff;box-sizing:content-box;opacity:.0;transition:opacity .2s}
.ocx:hover .ocx-av:not(.has-photo)::after{opacity:.9}

/* ---- Admin: photo editor ---- */
.bhp-modal{position:fixed;inset:0;z-index:2147483200;background:rgba(10,22,40,.58);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:18px;animation:bhpFade .2s ease-out}
.bhp-modal.is-out{opacity:0;transition:opacity .2s}
.bhp-card{width:min(440px,100%);max-height:100%;overflow:auto;background:#fff;color:#162D4C;border-radius:22px;box-shadow:0 34px 90px -20px rgba(8,20,40,.6);animation:bhpCardIn .45s cubic-bezier(.2,.9,.25,1.1) both}
.bhp-card *{box-sizing:border-box}
.bhp-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:16px 18px;background:linear-gradient(135deg,#16294A,#24467d);color:#fff}
.bhp-hd b{display:block;font-size:16px}.bhp-hd small{display:block;margin-top:2px;opacity:.82;font-size:12px}
.bhp-x{width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;font-size:20px;line-height:1;cursor:pointer;transition:background .15s,transform .2s}
.bhp-x:hover{background:rgba(255,255,255,.3);transform:rotate(90deg)}
.bhp-body{padding:18px}
.bhp-stage{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:16px}
.bhp-big{position:relative;width:128px;height:128px}
.bhp-big .bhp-ph{position:absolute;inset:7px;display:grid;place-items:center}
.bhp-big .bhp-ph img{position:absolute;inset:0}
.bhp-ini{font-size:38px;font-weight:800;color:rgba(255,255,255,.9);letter-spacing:1px;transition:opacity .3s}
.bhp-ph.is-in .bhp-ini{opacity:0}
.bhp-big .bhp-ok{width:30px;height:30px;right:4px;bottom:4px;border-width:3px;animation:none;opacity:0;transform:scale(0)}
.bhp-big .bhp-ok svg{width:16px;height:16px}
.bhp-big.is-ok .bhp-ok{animation:bhpBadge .45s cubic-bezier(.2,.9,.25,1.7) both}
.bhp-big.is-load .bhp-ring{animation-duration:1.1s}
.bhp-big.is-ok .bhp-ring{background:conic-gradient(from 0deg,#1FA463,#a6f0c6 20%,#1FA463 45%,#0f7a47 70%,#1FA463);animation-duration:12s}
.bhp-big.is-bad .bhp-ring{background:conic-gradient(#D93A3A,#ff9d9d,#D93A3A);animation:none}
.bhp-big.is-bad{animation:bhpShake .4s}
.bhp-why{margin:0;text-align:center;font-size:12px;color:#5b6b82;line-height:1.5;max-width:320px}
.bhp-lb{display:block;font-size:12px;font-weight:700;margin:0 0 6px}
.bhp-in{width:100%;height:42px;border-radius:11px;border:1.5px solid #D5DBE3;padding:0 12px;font:inherit;font-size:13px;color:#162D4C;background:#F8FAFC;outline:0;transition:border-color .15s,box-shadow .15s,background .15s}
.bhp-in:focus{border-color:var(--bhp-gold);box-shadow:0 0 0 4px rgba(232,182,74,.22);background:#fff}
.bhp-status{min-height:22px;margin:8px 0 2px;font-size:12px;color:#5b6b82;display:flex;align-items:center;gap:7px;animation:bhpFade .2s}
.bhp-status.is-ok{color:var(--bhp-ok);font-weight:600}.bhp-status.is-bad{color:var(--bhp-bad)}
.bhp-status i{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--bhp-ok);flex:none;font-style:normal}
.bhp-status i svg{width:10px;height:10px}
.bhp-status i.bhp-dots{background:none;width:auto;gap:3px;display:inline-flex}
.bhp-dots u{width:6px;height:6px;border-radius:50%;background:var(--bhp-navy);text-decoration:none;animation:bhpDot 1s infinite}
.bhp-dots u:nth-child(2){animation-delay:.15s}.bhp-dots u:nth-child(3){animation-delay:.3s}
.bhp-steps{margin:10px 0 0;padding:10px 12px 10px 30px;border-radius:12px;background:#F3F6FA;font-size:11.5px;color:#5b6b82;line-height:1.7}
.bhp-acts{display:flex;align-items:center;gap:8px;margin-top:16px}.bhp-sp{flex:1}
.bhp-b{height:38px;padding:0 16px;border-radius:11px;border:1px solid #D5DBE3;background:#fff;color:#16294A;font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:transform .15s,background .15s,box-shadow .15s}
.bhp-b:hover:not(:disabled){background:#F2F5F9;transform:translateY(-1px)}
.bhp-b.is-pri{background:var(--bhp-navy);border-color:var(--bhp-navy);color:#fff}.bhp-b.is-pri:hover:not(:disabled){background:#1d3a66;box-shadow:0 8px 18px -8px rgba(22,41,74,.7)}
.bhp-b.is-del{color:var(--bhp-bad);border-color:#F2B8B8}.bhp-b.is-del:hover:not(:disabled){background:#FDECEC}
.bhp-b:disabled{opacity:.45;cursor:default}
.bhp-card.is-done .bhp-acts,.bhp-card.is-done .bhp-in{opacity:.4;pointer-events:none}
.bhp-card.is-done .bhp-big{animation:bhpPop .6s cubic-bezier(.2,.9,.25,1.25)}
@media(max-width:700px){#profileIconBtn:hover .bhp-ph{transform:none}.bhp-welcome{top:70px}}
@media(prefers-reduced-motion:reduce){.bhp-ring,.bhp-ph,.bhp-av,.bhp-ok,.bhp-welcome,.bhp-hero,.bhp-hero *,.bhp-card,.bhp-big,.bhp-wt b{animation:none!important}.bhp-ph img{transition:none!important}}