/* FIX347 — HUAYHENG customer graphic theme
 * Visual-only customer layer: blue/white glass, lottery balls, crowns,
 * sparkles, light beams and soft icy waves. No business logic changes.
 */
:root{
  --hh345-blue:#087cf2;
  --hh345-cyan:#30c8ff;
  --hh345-deep:#0753aa;
  --hh345-ice:#eaf8ff;
  --hh345-glow:rgba(38,174,255,.42);
  --hh345-line:rgba(91,183,240,.54);
}

/* Stronger branded canvas, still light enough for forms and betting data. */
body.hh-customer-body{
  position:relative;
  isolation:isolate;
  min-height:100vh;
  background:
    radial-gradient(circle at 50% -8%,rgba(73,196,255,.40),transparent 30%),
    radial-gradient(circle at -8% 30%,rgba(12,128,245,.16),transparent 25%),
    radial-gradient(circle at 108% 56%,rgba(43,190,255,.18),transparent 27%),
    linear-gradient(180deg,#dff3ff 0%,#eaf8ff 24%,#d9efff 58%,#d2ebff 100%) !important;
  background-attachment:fixed!important;
}

body.hh-customer-body .fixed-bg{
  /* FIX347 stacking order: background (-2) < graphics (-1) < normal UI (auto/0+). */
  position:fixed!important;
  inset:0!important;
  z-index:-2!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 50% 0%,rgba(94,204,255,.24),transparent 31%),
    linear-gradient(180deg,rgba(225,246,255,.90),rgba(213,237,255,.92))!important;
}

/* Decorative layer is injected once by huayheng-graphic-fx-v345.js. */
.hh345-fx-layer{
  position:fixed;
  inset:0;
  z-index:-1!important;
  overflow:hidden;
  pointer-events:none!important;
  contain:layout paint style;
}
/* FIX346/FIX347: decorative graphics stay behind every customer UI layer without
 * forcing z-index/position on arbitrary body children. This protects modals,
 * loading overlays, sticky bars and dynamically injected popups. */

.hh345-fx-beam{
  position:absolute;
  left:50%;top:-17vh;
  width:min(980px,145vw);height:48vh;
  transform:translateX(-50%);
  background:
    radial-gradient(ellipse at center,rgba(255,255,255,.86) 0%,rgba(106,213,255,.32) 34%,rgba(24,137,245,.12) 58%,transparent 73%);
  filter:blur(4px);
  opacity:.90;
}
.hh345-fx-beam:after{
  content:"";
  position:absolute;inset:12% 6% 0;
  background:conic-gradient(from 198deg at 50% 0%,transparent 0 14%,rgba(255,255,255,.20) 17%,transparent 21% 40%,rgba(85,194,255,.16) 44%,transparent 48% 68%,rgba(255,255,255,.18) 72%,transparent 77%);
  filter:blur(10px);
}

.hh345-ball{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  width:82px;height:82px;
  border-radius:50%;
  font:900 31px/1 Arial,sans-serif;
  color:#0750a1;
  border:2px solid rgba(255,255,255,.92);
  background:
    radial-gradient(circle at 32% 23%,#fff 0 8%,rgba(255,255,255,.95) 9%,rgba(232,250,255,.93) 27%,rgba(107,211,255,.80) 58%,rgba(15,125,232,.72) 100%);
  box-shadow:
    inset -10px -13px 23px rgba(3,77,170,.20),
    inset 8px 8px 18px rgba(255,255,255,.90),
    0 0 0 5px rgba(100,206,255,.11),
    0 0 29px rgba(23,151,249,.32),
    0 13px 31px rgba(7,80,151,.14);
  text-shadow:0 1px 0 #fff,0 0 7px rgba(255,255,255,.8);
  opacity:.52;
  will-change:transform;
  animation:hh345Float 7s ease-in-out infinite;
}
.hh345-ball:before{
  content:"";
  position:absolute;
  left:16%;top:11%;
  width:31%;height:20%;
  border-radius:50%;
  background:rgba(255,255,255,.78);
  transform:rotate(-25deg);
  filter:blur(1px);
}
.hh345-ball.b1{left:-28px;top:8vh;transform:rotate(-14deg);animation-delay:-1s}
.hh345-ball.b2{right:-35px;top:15vh;width:96px;height:96px;font-size:35px;animation-delay:-3.1s}
.hh345-ball.b3{left:-45px;top:49vh;width:108px;height:108px;font-size:39px;opacity:.28;animation-delay:-5.2s}
.hh345-ball.b4{right:-43px;top:67vh;width:91px;height:91px;font-size:33px;opacity:.34;animation-delay:-2.4s}
.hh345-ball.b5{left:5%;bottom:-35px;width:88px;height:88px;font-size:31px;opacity:.26;animation-delay:-4.4s}
.hh345-ball.b6{right:8%;bottom:8vh;width:72px;height:72px;font-size:27px;opacity:.25;animation-delay:-.7s}

.hh345-crown{
  position:absolute;
  color:#0a7ae8;
  font-family:Georgia,serif;
  font-size:93px;
  line-height:1;
  opacity:.14;
  text-shadow:0 0 18px rgba(34,171,255,.42),0 5px 10px rgba(8,73,149,.12);
  filter:drop-shadow(0 0 8px rgba(255,255,255,.70));
  animation:hh345Crown 8s ease-in-out infinite;
}
.hh345-crown.c1{right:4%;top:26vh;transform:rotate(10deg)}
.hh345-crown.c2{left:4%;top:72vh;font-size:66px;transform:rotate(-11deg);opacity:.09;animation-delay:-4s}

.hh345-spark{
  position:absolute;
  color:#fff;
  font:700 20px/1 serif;
  text-shadow:0 0 7px #fff,0 0 15px rgba(33,169,255,.90);
  opacity:.56;
  animation:hh345Twinkle 2.8s ease-in-out infinite;
}
.hh345-spark.s1{left:12%;top:16vh}
.hh345-spark.s2{right:17%;top:34vh;font-size:13px;animation-delay:-1.1s}
.hh345-spark.s3{left:8%;top:61vh;font-size:15px;animation-delay:-2.2s}
.hh345-spark.s4{right:9%;top:79vh;font-size:24px;animation-delay:-.5s}
.hh345-spark.s5{left:39%;top:9vh;font-size:12px;animation-delay:-1.8s}
.hh345-spark.s6{right:35%;bottom:12vh;font-size:16px;animation-delay:-2.5s}

.hh345-fx-wave{
  position:absolute;
  left:-12vw;right:-12vw;
  bottom:-12vh;
  height:35vh;
  opacity:.63;
  background:
    radial-gradient(70% 120% at 15% 100%,rgba(44,178,255,.45) 0 28%,transparent 29%),
    radial-gradient(72% 125% at 51% 106%,rgba(255,255,255,.65) 0 24%,rgba(86,199,255,.25) 25% 33%,transparent 34%),
    radial-gradient(72% 125% at 89% 100%,rgba(21,133,244,.34) 0 27%,transparent 28%);
  filter:blur(2px);
  transform:rotate(-2deg);
}
.hh345-fx-wave:after{
  content:"";
  position:absolute;left:5%;right:5%;top:24%;height:55%;
  border-radius:50%;
  border-top:2px solid rgba(255,255,255,.72);
  box-shadow:0 -11px 27px rgba(43,183,255,.24);
}

/* Stronger premium glass treatment on known customer surfaces. */
body.hh-customer-body .hh316-member-summary,
body.hh-customer-body .hh317-lottery-card,
body.hh-customer-body .hh337-ticket,
body.hh-customer-body .hh337-detail-hero,
body.hh-customer-body .hh-wallet-page .hhw-card,
body.hh-customer-body .hh-wallet-page .hhw-info-card,
body.hh-customer-body .hh-wallet-page .hhw-bank-card,
body.hh-customer-body .hh-wallet-page .hhw-form-card,
body.hh-customer-body .hh315-login-card,
body.hh-customer-body .form-bottom,
body.hh-customer-body .form-top,
body.hh-customer-body .card,
body.hh-customer-body .modal-content{
  border-color:rgba(100,190,240,.68)!important;
  box-shadow:0 11px 28px rgba(17,99,164,.15),inset 0 1px 0 rgba(255,255,255,.78)!important;
  -webkit-backdrop-filter:blur(8px) saturate(112%);
  backdrop-filter:blur(8px) saturate(112%);
}

/* Bright line/glow around the top header without creating a white logo tile. */
body.hh-customer-body .sticky-top .topnavbar{
  background:linear-gradient(180deg,rgba(226,246,255,.97),rgba(208,235,255,.96))!important;
  box-shadow:0 7px 24px rgba(5,93,171,.17),inset 0 -1px 0 rgba(255,255,255,.86)!important;
}
body.hh-customer-body .topnavbar:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(38,171,255,.78),rgba(255,255,255,.95),rgba(38,171,255,.78),transparent);
  pointer-events:none;
}

/* More visible section separation and active navigation glow. */
body.hh-customer-body .heng-bottom-nav{
  background:linear-gradient(180deg,rgba(235,249,255,.98),rgba(208,235,255,.98))!important;
  box-shadow:0 -10px 31px rgba(6,86,160,.18),inset 0 1px 0 rgba(255,255,255,.92)!important;
}
body.hh-customer-body .heng-bottom-nav__item.active{
  box-shadow:0 0 0 1px rgba(63,175,241,.28),0 0 20px rgba(26,150,246,.22),inset 0 0 0 1px rgba(255,255,255,.62)!important;
}

/* Betting / financial forms: retain atmosphere but reduce decoration intensity. */
body.hh-buy-lottery-v325 .hh345-ball,
body.hh-buy-lottery-v326 .hh345-ball{opacity:.17}
body.hh-buy-lottery-v325 .hh345-crown,
body.hh-buy-lottery-v326 .hh345-crown{opacity:.055}
body.hh-buy-lottery-v325 .hh345-fx-wave,
body.hh-buy-lottery-v326 .hh345-fx-wave{opacity:.25}
body.hh-buy-lottery-v325 .hh345-spark,
body.hh-buy-lottery-v326 .hh345-spark{opacity:.24}

@keyframes hh345Float{
  0%,100%{margin-top:0;margin-left:0}
  50%{margin-top:-11px;margin-left:5px}
}
@keyframes hh345Crown{
  0%,100%{margin-top:0;filter:drop-shadow(0 0 8px rgba(255,255,255,.70))}
  50%{margin-top:-8px;filter:drop-shadow(0 0 14px rgba(48,188,255,.54))}
}
@keyframes hh345Twinkle{
  0%,100%{opacity:.18;transform:scale(.72) rotate(0)}
  50%{opacity:.86;transform:scale(1.15) rotate(18deg)}
}

@media(max-width:767px){
  body.hh-customer-body{
    background-attachment:scroll!important;
    background:
      radial-gradient(circle at 50% -4%,rgba(73,196,255,.43),transparent 26%),
      radial-gradient(circle at -10% 35%,rgba(12,128,245,.14),transparent 24%),
      radial-gradient(circle at 110% 62%,rgba(43,190,255,.17),transparent 25%),
      linear-gradient(180deg,#dff4ff 0%,#e9f8ff 24%,#daefff 58%,#d1eaff 100%)!important;
  }
  .hh345-ball.b1{left:-43px;top:9vh;width:75px;height:75px;font-size:28px}
  .hh345-ball.b2{right:-52px;top:20vh;width:93px;height:93px;font-size:34px}
  .hh345-ball.b3{left:-67px;top:53vh;width:108px;height:108px}
  .hh345-ball.b4{right:-54px;top:71vh;width:91px;height:91px}
  .hh345-ball.b5{left:-20px;bottom:-35px}
  .hh345-ball.b6{right:-19px;bottom:11vh}
  .hh345-crown.c1{right:-12px;top:31vh;font-size:75px;opacity:.10}
  .hh345-crown.c2{left:-6px;top:78vh;font-size:55px;opacity:.065}
  .hh345-fx-wave{bottom:-15vh;height:32vh;opacity:.48}
  .hh345-spark.s2{right:8%}
  .hh345-spark.s3{left:4%}
}

@media(prefers-reduced-motion:reduce){
  .hh345-ball,.hh345-crown,.hh345-spark{animation:none!important}
}