/* Sanyo Trading — login & register */
html:has(body.sanyo-auth){background:#071428}
body.sanyo-auth.sea-trade-ui{
  margin:0;
  min-height:100vh;
  color:#f5f8ff;
  font-family:Outfit,Manrope,sans-serif;
  background:#071428 url("../images/page-wave-bg.svg?v=2") center / cover no-repeat!important;
  overflow-x:hidden;
}
body.sanyo-auth.sea-trade-ui:after{display:none!important}
body.sanyo-auth main{
  display:block;margin:0;padding:0!important;min-height:100vh;
  width:100%;max-width:100%;overflow-x:hidden;
}
body.sanyo-auth .nav-shell,
body.sanyo-auth .luxury-footer,
body.sanyo-auth .back-to-top,
body.sanyo-auth .hub-scene{display:none!important}

.sx-scene{
  position:relative;
  box-sizing:border-box;
  width:min(400px, calc(100% - 28px));
  max-width:calc(100% - 28px);
  min-width:0;
  min-height:100vh;
  margin:0 auto;
  padding:16px 14px 40px;
  overflow:hidden;
}
.sx-sky{position:absolute;inset:0;pointer-events:none;z-index:0}
.sx-globe{
  position:absolute;top:-30px;right:-48px;width:230px;height:230px;border-radius:50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.7), transparent 12%),
    radial-gradient(circle at 62% 58%, rgba(255,190,70,.55), transparent 18%),
    radial-gradient(circle at 40% 42%, #9fd0ff 0%, #1d4eab 36%, #0a1d4a 70%);
  box-shadow:0 0 50px rgba(80,150,255,.55), inset -16px -10px 28px rgba(0,0,0,.35);
}
.sx-globe:before{
  content:"";position:absolute;inset:0;border-radius:50%;opacity:.75;
  background:
    repeating-linear-gradient(180deg, transparent 0 16px, rgba(255,214,120,.45) 16px 17px),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(170,210,255,.4) 18px 19px);
  -webkit-mask:radial-gradient(circle, #000 62%, transparent 64%);
  mask:radial-gradient(circle, #000 62%, transparent 64%);
}
.sx-city{
  position:absolute;top:54px;left:0;right:0;height:120px;opacity:.9;
  background:
    linear-gradient(#ffe08a,#c9842a) 8% 100%/7px 36px no-repeat,
    linear-gradient(#ffd56a,#e39b32) 14% 100%/5px 58px no-repeat,
    linear-gradient(#fff1c2,#d9a441) 19% 100%/8px 26px no-repeat,
    linear-gradient(#f6c15a,#b87420) 27% 100%/6px 70px no-repeat,
    linear-gradient(#ffe7a8,#e2aa45) 34% 100%/9px 40px no-repeat,
    linear-gradient(#ffd36a,#c98a2e) 72% 100%/6px 64px no-repeat,
    linear-gradient(#fff0c4,#e0a43a) 80% 100%/8px 34px no-repeat,
    linear-gradient(#f0b429,#a86b16) 88% 100%/5px 52px no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 10%, transparent 92%);
  mask-image:linear-gradient(180deg,#000 10%, transparent 92%);
}
.sx-ribbon{
  position:absolute;height:18px;border-radius:999px;filter:blur(.2px);
  background:linear-gradient(90deg, transparent, #7ec8ff, #f6c15a, #fff 70%, transparent);
  opacity:.85;
}
.sx-ribbon-a{width:78%;top:92px;left:-8%;transform:rotate(-8deg)}
.sx-ribbon-b{width:70%;top:128px;right:-20%;transform:rotate(11deg);opacity:.55}
.sx-mounts{
  position:absolute;left:-10%;right:-10%;bottom:-8px;height:150px;
  background:
    linear-gradient(160deg, transparent 40%, #07101f 41%) left bottom / 55% 100% no-repeat,
    linear-gradient(200deg, transparent 42%, #0a1830 43%) right bottom / 60% 100% no-repeat,
    linear-gradient(180deg, transparent 30%, rgba(240,180,50,.55) 31% 33%, transparent 34%);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 28%);
  mask-image:linear-gradient(180deg, transparent, #000 28%);
}
.sx-mounts:before,
.sx-mounts:after{
  content:"";position:absolute;bottom:0;width:58%;height:110px;
  background:linear-gradient(180deg,#12305f,#070e1e);
  clip-path:polygon(8% 100%, 42% 18%, 70% 72%, 100% 30%, 100% 100%);
}
.sx-mounts:before{left:-4%}
.sx-mounts:after{right:-6%;width:62%;background:linear-gradient(180deg,#1a3f78,#081226);clip-path:polygon(0 46%, 28% 8%, 54% 58%, 78% 22%, 100% 70%, 100% 100%, 0 100%)}

.sx-back,.sx-logo,.sx-card{position:relative;z-index:1}
.sx-back{
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  color:#fff;text-decoration:none;
  background:rgba(8,18,48,.55);
  border:1px solid rgba(180,210,255,.28);
  box-shadow:0 8px 24px rgba(0,0,0,.28), inset 0 0 12px rgba(120,170,255,.12);
  backdrop-filter:blur(8px);
}
.sx-back:hover{color:#fff;border-color:rgba(255,210,120,.7)}
.sx-logo{display:flex;justify-content:center;margin:-6px 0 8px}
.sx-brand-img{
  width:min(196px,54%);max-width:100%;height:auto;display:block;
  filter:drop-shadow(0 14px 24px rgba(40,120,255,.35));
  pointer-events:none;user-select:none;
}

.sx-card{
  margin:2px 10px 0;
  padding:22px 16px 18px;
  border-radius:32px;
  background:
    linear-gradient(180deg, rgba(12,28,72,.72), rgba(5,12,32,.9));
  border:1px solid rgba(150,190,255,.28);
  box-shadow:
    0 0 0 1px rgba(240,190,80,.18),
    0 0 28px rgba(60,120,255,.18),
    0 24px 50px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(18px);
}
.sx-card h1{
  margin:0;
  text-align:center;
  font-size:1.85rem;
  font-weight:800;
  letter-spacing:-.03em;
  color:#fff;
}
.sx-card h1 em{
  font-style:normal;
  background:linear-gradient(90deg,#7eb6ff,#3d7dff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sx-lead{
  margin:8px auto 16px;
  max-width:280px;
  text-align:center;
  color:#c5d4f5;
  font-size:.92rem;
  line-height:1.45;
}
.sx-note{
  margin:-6px 0 12px;
  text-align:center;
  color:#f6d78a;
  font-size:.82rem;
}
.sx-error{
  margin:0 0 12px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(180,40,40,.22);
  border:1px solid rgba(255,140,140,.4);
  color:#ffd7d7;
  font-size:.86rem;
  text-align:center;
}

.sx-ql{margin-bottom:10px}
.sx-field{
  display:flex;align-items:center;gap:10px;
  min-height:58px;
  margin:0 0 12px;
  padding:6px 8px 6px 6px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(12,28,68,.95), rgba(8,20,52,.95));
  border:1px solid rgba(90,140,220,.35);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03), 0 8px 18px rgba(0,0,0,.18);
}
.sx-field:focus-within{border-color:rgba(120,180,255,.8);box-shadow:0 0 0 3px rgba(60,120,255,.18)}
.sx-ico{
  width:44px;height:44px;flex:0 0 44px;border-radius:13px;
  display:grid;place-items:center;color:#fff;font-size:1.02rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 8px 14px rgba(0,0,0,.22);
  position:relative;
}
.sx-field .sx-ico:after{
  content:"";
  position:absolute;right:-8px;top:8px;bottom:8px;width:1px;
  background:rgba(190,210,255,.28);
}
.sx-ico-blue{background:linear-gradient(180deg,#5aa7ff,#2463e8)}
.sx-ico-gold{background:linear-gradient(180deg,#ffe08a,#e39a22);color:#5a3a08}
.sx-ico-violet{background:linear-gradient(180deg,#c084fc,#7c3aed)}
.sx-field input,
.sx-field select{
  flex:1;min-width:0;height:44px;
  border:0;outline:none;background:transparent;color:#fff;
  font:600 .98rem/1 Outfit,Manrope,sans-serif;
  box-shadow:none;
}
.sx-field input::placeholder{color:#8ea2cc}
.sx-field select{
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#9db4e4 50%),linear-gradient(135deg,#9db4e4 50%,transparent 50%);
  background-position:calc(100% - 14px) 50%, calc(100% - 8px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
  padding-right:22px;
}
.sx-field select option{color:#102048}
.sx-pass{
  position:relative;
  padding-right:8px;
}
.sx-pass input{padding-right:36px}
.sx-eye{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:32px;height:32px;margin:0;padding:0;
  border:0;outline:0;box-shadow:none;border-radius:0;
  background:transparent;color:#d5e2ff;
  display:grid;place-items:center;cursor:pointer;z-index:3;
  font-size:1rem;line-height:1;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  -webkit-appearance:none;appearance:none;
}
.sx-eye i{display:block;font-size:1em;line-height:1;pointer-events:none}
.sx-eye:hover,.sx-eye:focus{color:#fff;background:transparent;border:0;outline:0;box-shadow:none}
@media (max-width:520px){
  .sx-card{margin:2px 0 0;padding:18px 12px 16px}
  .sx-field{gap:8px;min-height:54px;padding:4px 4px 4px 4px}
  .sx-ico{width:38px;height:38px;flex-basis:38px;border-radius:12px;font-size:.92rem}
  .sx-field input{font-size:16px}
  .sx-pass{padding-right:6px}
  .sx-pass input{padding-right:32px}
  .sx-eye{right:8px;width:30px;height:30px}
}
@media (max-width:360px){
  .sx-scene{width:calc(100% - 12px);padding-left:6px;padding-right:6px}
  .sx-ico{width:34px;height:34px;flex-basis:34px}
  .sx-eye{right:6px;width:28px;height:28px;font-size:.95rem}
}
.sx-forgot-row{display:flex;justify-content:flex-end;margin:-2px 4px 12px}
.sx-forgot{
  border:0;background:transparent;color:#f0c14b;font-weight:700;font-size:.84rem;cursor:pointer;padding:0;
}
.sx-forgot-note{margin:-4px 4px 12px;color:#d7e4ff;font-size:.8rem;text-align:right}

body.sanyo-auth button.sx-btn,
a.sx-btn{
  width:100%;height:58px;border:0;border-radius:999px;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 12px 7px 8px;margin-top:6px;box-sizing:border-box;max-width:100%;
  color:#fff;font:800 1.05rem/1 Outfit,Manrope,sans-serif;text-decoration:none;
  background:linear-gradient(90deg,#2f6bff 0%,#3b82f6 46%,#f2c14b 100%);
  box-shadow:0 10px 24px rgba(40,100,255,.32), inset 0 1px 0 rgba(255,255,255,.35);
}
.sx-btn-label{flex:1 1 auto;text-align:center;min-width:0}
.sx-btn i.sx-go{
  width:34px;height:34px;flex:0 0 34px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.18);font-size:.8rem;
}
.sx-btn .sx-ico{width:42px;height:42px;flex:0 0 42px;border-radius:14px;font-size:.95rem}
.sx-btn .sx-ico:after{display:none}
.sx-or{
  display:flex;align-items:center;gap:10px;
  margin:16px 4px 0;color:#9eb0d6;font-size:.8rem;font-weight:600;
}
.sx-or:before,.sx-or:after{content:"";flex:1;height:1px;background:rgba(160,180,220,.35)}
a.sx-btn.sx-btn-ghost,
button.sx-btn.sx-btn-ghost{
  margin-top:12px;
  background:rgba(6,14,36,.72);
  border:1.5px solid rgba(240,180,60,.8);
  box-shadow:0 8px 18px rgba(0,0,0,.28), inset 0 0 16px rgba(240,180,60,.06);
  color:#fff;
}
.sx-btn-ghost .sx-ico{background:rgba(255,255,255,.06);box-shadow:none;border:1px solid rgba(255,255,255,.14);color:#e8eefc}

.acct-lock{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(4,8,20,.82)}
.acct-lock-card{width:min(92vw,360px);padding:26px 20px 18px;border-radius:22px;text-align:center;color:#fff;background:linear-gradient(180deg,#10244f,#081226);border:1px solid rgba(120,170,255,.45)}
.acct-lock-ico{width:60px;height:60px;margin:0 auto 10px;display:grid;place-items:center;border-radius:50%;background:#fff;color:#1d4eab;font-size:1.4rem}
.acct-lock-hi{margin:0;font-weight:700;color:#d5e4ff}
.acct-lock-card h2{margin:6px 0 8px;font-size:1.3rem}
.acct-lock-card p{margin:0 0 14px;color:#d5e2ff;font-size:.92rem}
.acct-lock-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:46px;border-radius:12px;background:linear-gradient(90deg,#2f7bff,#f0b429);color:#fff;font-weight:800;text-decoration:none}
.acct-lock-close{display:block;width:100%;margin-top:8px;border:0;background:transparent;color:#f0c14b;font-weight:700;cursor:pointer}

@media (min-width:900px){
  body.sanyo-auth.sea-trade-ui{
    background-image:
      radial-gradient(circle at 50% 0%, rgba(70,140,255,.28), transparent 36%),
      linear-gradient(180deg,#07183f,#050c22)!important;
  }
  .sx-scene{padding-top:28px}
}