:root{
  --brand-hero-img:url("main_welcome.png");
  --brand-premium-img:url("premium_menu.png");
  --brand-support-img:url("premium_support.png");
  --brand-language-img:url("premium_language.png");
  --brand-subscribe-img:url("subscription_gate.png");
  --brand-rgb:249,115,22;
  --brand-rgb-2:250,204,21;
  --brand-border:rgba(249,115,22,.28);
}

#app::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 24% 8%, rgba(var(--brand-rgb),.13), transparent 34%),
    radial-gradient(circle at 88% 20%, rgba(var(--brand-rgb-2),.08), transparent 30%);
}

#splash .sp-shell,
#screen-market .hero,
#screen-profile .prof-hero,
#screen-history .hist-header,
#screen-support .sup-hero,
#screen-chat .chat-embed-head,
#sig-loading .ld-shell,
.ob-sheet{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

#splash .sp-shell::after,
#screen-market .hero::after,
#screen-profile .prof-hero::after,
#screen-history .hist-header::after,
#screen-support .sup-hero::after,
#screen-chat .chat-embed-head::after,
#sig-loading .ld-shell::after,
.ob-sheet::after{
  content:"";
  position:absolute;
  right:8px;
  bottom:0;
  width:clamp(112px,32%,176px);
  height:100%;
  z-index:0;
  pointer-events:none;
  opacity:.46;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  filter:saturate(1.06) contrast(1.03);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 26%, #000 100%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 26%, #000 100%);
}

#splash .sp-shell{
  border-color:var(--brand-border);
  box-shadow:0 22px 60px rgba(var(--brand-rgb),.17), inset 0 1px 0 rgba(255,255,255,.07);
}

#splash .sp-shell::after{
  width:clamp(150px,44%,260px);
  height:82%;
  right:8px;
  bottom:0;
  z-index:0;
  opacity:.58;
  background-image:var(--brand-hero-img);
}

#splash .sp-shell > *,
#screen-market .hero > *,
#screen-profile .prof-hero > *,
#screen-history .hist-header > *,
#screen-support .sup-hero > *,
#screen-chat .chat-embed-head > *,
#sig-loading .ld-shell > *,
.ob-sheet > *{position:relative;z-index:1}

#screen-market .hero{
  border-color:var(--brand-border);
  box-shadow:0 18px 52px rgba(var(--brand-rgb),.14), inset 0 1px 0 rgba(255,255,255,.055);
}

#screen-market .hero::after{background-image:var(--brand-hero-img)}
#screen-profile .prof-hero::after{background-image:var(--brand-hero-img)}
#screen-history .hist-header::after{background-image:var(--brand-premium-img)}
#screen-support .sup-hero::after{background-image:var(--brand-support-img)}
#screen-chat .chat-embed-head::after{background-image:var(--brand-language-img)}

#screen-market .hero::after{
  width:62%;
  max-width:320px;
  height:118%;
  right:0;
  bottom:0;
  opacity:.52;
  background-size:cover;
  background-position:center right;
}

#screen-profile .prof-hero::after{
  width:56%;
  max-width:280px;
  height:112%;
  right:0;
  bottom:0;
  opacity:.46;
  background-size:cover;
  background-position:center right;
}

#screen-history .hist-header::after{
  width:50%;
  max-width:250px;
  height:118%;
  right:0;
  bottom:0;
  opacity:.40;
  background-size:cover;
  background-position:center right;
}

#screen-support .sup-hero::after{
  width:60%;
  max-width:310px;
  height:122%;
  right:0;
  bottom:0;
  opacity:.48;
  background-size:cover;
  background-position:center right;
}

#screen-chat .chat-embed-head::after{
  width:42%;
  max-width:190px;
  height:128%;
  right:0;
  bottom:0;
  opacity:.38;
  background-size:cover;
  background-position:center right;
}

#sig-loading .ld-shell::after{
  background-image:var(--brand-premium-img);
  width:34%;
  min-width:112px;
  max-width:168px;
  height:88%;
  right:10px;
  bottom:6px;
  opacity:.48;
  background-size:contain;
  background-position:center bottom;
  transform-origin:center bottom;
  transition:opacity .35s ease, transform .35s ease;
  animation:brandSignalFloat 3.8s ease-in-out infinite;
}
.ob-sheet::after{
  background-image:var(--brand-subscribe-img);
  width:48%;
  max-width:230px;
  height:122%;
  right:0;
  bottom:0;
  opacity:.34;
  background-size:cover;
  background-position:center right;
}

@keyframes brandSignalFloat{
  0%,100%{transform:translateY(0) scale(.98)}
  50%{transform:translateY(-4px) scale(1)}
}

.mkt-card,.prem-card,.deluxe-card,.tf-card,.pair-btn,.sig-card,.hist-stat,.faq-item,
#screen-profile .stat-card,#screen-profile .prof-card,#screen-chat .chat-embed-shell{
  border-color:rgba(var(--brand-rgb),.18) !important;
  box-shadow:0 12px 34px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.035);
}

body.light #app::before{
  background:
    radial-gradient(circle at 20% 7%, rgba(var(--brand-rgb),.08), transparent 32%),
    radial-gradient(circle at 90% 18%, rgba(var(--brand-rgb-2),.06), transparent 30%);
}

body.light #splash .sp-shell,
body.light #screen-market .hero,
body.light #screen-profile .prof-hero,
body.light #screen-history .hist-header,
body.light #screen-support .sup-hero,
body.light #screen-chat .chat-embed-head{
  box-shadow:0 14px 38px rgba(var(--brand-rgb),.10), inset 0 1px 0 rgba(255,255,255,.55);
}

@media(max-width:480px){
  #splash .sp-shell::after{
    width:44%;
    min-width:132px;
    height:78%;
    right:4px;
    opacity:.42;
  }

  #screen-market .hero::after,
  #screen-profile .prof-hero::after,
  #screen-history .hist-header::after,
  #screen-support .sup-hero::after,
  #screen-chat .chat-embed-head::after,
  #sig-loading .ld-shell::after,
  .ob-sheet::after{
    width:46%;
    min-width:118px;
    right:0;
    bottom:0;
    opacity:.36;
  }

  #screen-market .hero::after{width:58%;opacity:.42}
  #screen-profile .prof-hero::after{width:50%;opacity:.34}
  #screen-history .hist-header::after{width:48%;opacity:.32}
  #screen-support .sup-hero::after{width:56%;opacity:.38}
  #screen-chat .chat-embed-head::after{width:40%;min-width:96px;opacity:.28}
  #sig-loading .ld-shell::after{
    width:34%;
    min-width:98px;
    max-width:132px;
    height:84%;
    right:8px;
    bottom:8px;
    opacity:.44;
    background-size:contain;
  }
}