:root {
  --bg:#0f1420;
  --panel:#1b2133;
  --panel2:#232a40;
  --text:#e6e9f2;
  --muted:#aab0c5;
  --accent:#6c7cff;
  --radius:22px;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  padding-top:120px;
  display:flex;
  flex-direction:column;
}

.flex-center {
  display:flex;
  justify-content:center;
}

.header-center {
  align-items:center;
  flex-direction:column;
  margin-top:60px;
}

.left-margin {
  margin:0 16px;
}

.logo {
  height:180px;
}

.logo-wrapper h1 {
  margin-top:14px;
  letter-spacing:6px;
  font-size:2.4rem;
}

.desc p {
  max-width:560px;
  margin:auto;
  color:var(--muted);
  text-align:center;
}

#sj-form {
  margin-top:30px;
}

#sj-address {
  width:100%;
  max-width:520px;
  padding:16px;
  border-radius:14px;
  border:none;
  outline:none;
  background:var(--panel2);
  color:var(--text);
  font-size:1rem;
  transition:.15s;
}

#sj-address:focus {
  box-shadow:0 0 0 2px var(--accent);
}

#sj-frame {
  border:none;
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  background:var(--bg);
}

#sj-error {
  color:#ff6b6b;
  white-space:pre-wrap;
  text-align:center;
}

#sj-error-code {
  font-size:12px;
  font-family:monospace;
  color:var(--muted);
  text-align:center;
}

footer {
  margin-top:auto;
  padding:40px 16px;
  text-align:center;
  color:var(--muted);
}

footer a {
  color:var(--text);
  text-decoration:none;
  margin:0 12px;
  font-weight:600;
}

footer a:hover {
  color:var(--accent);
}

/* Top Address Bar */

.topbar {
  position:fixed;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  width:calc(100% - 32px);
  max-width:900px;
  background:var(--panel);
  border-radius:999px;
  padding:10px 16px;
  display:flex;
  align-items:center;
  gap:10px;
  z-index:100;
  box-shadow:0 14px 35px rgba(0,0,0,.45);
}

.topbar button {
  background:var(--panel2);
  border:none;
  color:var(--text);
  width:40px;
  height:40px;
  border-radius:50%;
  cursor:pointer;
  font-size:1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.15s;
}

.topbar button:hover {
  background:var(--accent);
  color:white;
}

#nav-address {
  flex:1;
  height:42px;
  background:var(--panel2);
  border:none;
  outline:none;
  color:var(--text);
  padding:0 18px;
  border-radius:999px;
  font-size:0.95rem;
}

#nav-address:focus {
  box-shadow:0 0 0 2px var(--accent);
}

@media(max-width:720px){
  body{
    padding-top:110px;
  }

  .logo{
    height:80px;
  }

  .logo-wrapper h1{
    font-size:1.8rem;
    letter-spacing:4px;
  }

  #sj-address{
    font-size:1rem;
  }
}