:root{
  --page-wallpaper-desktop:url("/assets/ncwallpaperdesktop.png");
  --page-wallpaper-mobile:url("/assets/ncwallpapermobile.png");
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  font-family:Inter,"Avenir Next","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--text);
  background:var(--bg-main);
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:var(--bg-before);
  filter:blur(10px);
  animation:slowFloat 18s ease-in-out infinite alternate;
  z-index:0;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:var(--bg-after);
  filter:blur(30px);
  z-index:0;
}

@keyframes slowFloat{
  from{transform:translateY(0) scale(1)}
  to{transform:translateY(-14px) scale(1.02)}
}

.wallpaper{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-position:center;
  background-size:cover;
  opacity:var(--wallpaper-opacity,.16);
  mix-blend-mode:screen;
}
.wallpaper-desktop{background-image:var(--page-wallpaper-desktop)}
.wallpaper-mobile{display:none;background-image:var(--page-wallpaper-mobile)}

.noise,.sparkles{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
}

.noise{
  opacity:.03;
  background-image:
    linear-gradient(rgba(255,255,255,.8) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.8) 1px, transparent 1px);
  background-size:3px 3px,3px 3px;
  mix-blend-mode:soft-light;
}

.sparkles span{
  position:absolute;
  width:3px;
  height:3px;
  border-radius:50%;
  background:var(--sparkle);
  box-shadow:0 0 8px var(--sparkle-glow);
  animation:twinkle var(--dur) ease-in-out infinite;
  opacity:.22;
}

@keyframes twinkle{
  0%,100%{transform:scale(.75);opacity:.10}
  50%{transform:scale(1.22);opacity:.68}
}

.page{
  position:relative;
  z-index:2;
  min-height:100vh;
  width:100%;
  padding:92px 20px 52px;
}

.content{
  width:min(100%,920px);
  margin:0 auto;
}

.title{
  margin:0 0 26px;
  text-align:center;
  color:var(--title-color);
  font-size:clamp(58px,12vw,148px);
  line-height:.82;
  font-weight:900;
  letter-spacing:-.095em;
  text-transform:lowercase;
  text-shadow:0 22px 60px rgba(0,0,0,.18);
}

.title small{
  display:inline-block;
  margin-left:.07em;
  color:var(--title-small-color);
  font-size:.24em;
  vertical-align:top;
  position:relative;
  top:.14em;
  letter-spacing:0;
}

.connect-top-actions{
  width:min(100%,860px);
  margin:0 auto 20px;
  display:flex;
  justify-content:flex-end;
}

.card,.info-box{
  width:min(100%,860px);
  margin:0 auto 18px;
  border:1px solid var(--line);
  border-radius:24px;
  background:var(--panel-bg);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  padding:24px;
}

.card.narrow{
  width:min(100%,480px);
}

.hero.card{
  text-align:center;
  padding:30px 28px;
}

.eyebrow{
  margin:0 0 10px;
  color:var(--section-title-color);
  font-size:11px;
  font-weight:800;
  letter-spacing:.26em;
  text-transform:uppercase;
}

h1,h2,h3,p{margin-top:0}
.card h1,.card h2{
  color:var(--info-title-color);
  letter-spacing:-.035em;
}
.card h1{
  margin-bottom:10px;
  font-size:clamp(34px,6vw,62px);
  line-height:.95;
}
.card h2{
  margin-bottom:14px;
  font-size:24px;
}
.card p{
  color:var(--muted);
  line-height:1.55;
}

.actions{
  margin-top:20px;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
}

.button,
button.button,
a.button{
  min-height:46px;
  padding:0 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border-radius:15px;
  border:1px solid var(--line);
  background:var(--button-bg);
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  color:var(--text);
  font:inherit;
  font-size:14px;
  font-weight:750;
  text-decoration:none;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.button:hover,
button.button:hover,
a.button:hover{
  transform:translateY(-1px);
  background:var(--button-hover);
  border-color:var(--line-strong);
  text-decoration:none;
}

.button.ghost{opacity:.88}
.button.full{width:100%}
.account-chip{min-height:40px;font-size:12px;padding:0 14px}

.stack{
  display:grid;
  gap:14px;
}

label{
  display:grid;
  gap:7px;
  color:var(--text);
  font-size:13px;
  font-weight:700;
}

input{
  width:100%;
  min-height:46px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.18);
  color:var(--text);
  font:inherit;
  padding:0 14px;
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

input:focus{
  border-color:var(--line-strong);
  background:rgba(0,0,0,.24);
}

.divider{
  margin:18px 0;
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.16em;
}
.divider::before,.divider::after{
  content:"";
  height:1px;
  flex:1;
  background:var(--line);
}

.small,.muted{color:var(--muted)}
.small{font-size:13px;line-height:1.45;margin:14px 0 0}
.status{min-height:18px;color:var(--muted);font-size:13px;margin:14px 0 0}
.status.error{color:var(--danger,#ff9a9a)}

.grid-two{
  width:min(100%,860px);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.grid-two .card{width:100%;margin:0}

.list{
  list-style:none;
  margin:16px 0 0;
  padding:0;
  display:grid;
  gap:10px;
}
.list li{
  border:1px solid var(--line);
  border-radius:16px;
  padding:13px;
  background:rgba(255,255,255,.045);
  color:var(--text);
}

.authorize-app{
  text-align:center;
}
.authorize-app .app-badge{
  width:64px;
  height:64px;
  margin:0 auto 16px;
  border-radius:20px;
  border:1px solid var(--line);
  background:var(--button-bg);
  display:grid;
  place-items:center;
  font-size:30px;
  box-shadow:var(--shadow);
}

/* Keep the exact TeaSpilt assets-driven controls, only fixing placement for this app. */
.site-back{
  position:fixed!important;
  top:14px!important;
  left:14px!important;
  z-index:30!important;
}
.theme-wrap{
  position:fixed!important;
  top:14px!important;
  right:14px!important;
  z-index:30!important;
}

html[data-theme="corporo"] .wallpaper,
html[data-theme="corporo"] .noise,
html[data-theme="corporo"] .sparkles{display:none}
html[data-theme="corporo"] .card,
html[data-theme="corporo"] .info-box{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

@media (max-width:760px){
  .wallpaper-desktop{display:none}
  .wallpaper-mobile{display:block}
  .page{padding:86px 14px 38px}
  .content{width:100%}
  .connect-top-actions{margin-bottom:14px}
  .title{font-size:clamp(54px,20vw,94px);margin-bottom:20px}
  .card,.info-box{border-radius:20px;padding:20px}
  .grid-two{grid-template-columns:1fr}
  .actions{display:grid}
  .actions .button{width:100%}
  .theme-wrap{right:10px!important;top:10px!important}
  .site-back{left:10px!important;top:10px!important}
}


/* Footer and Connect shell refinement */
.page{
  min-height:calc(100vh - 92px);
  padding-bottom:46px;
}

.connect-top-actions{
  display:none !important;
}

.site-footer{
  position:relative;
  z-index:2;
  margin-top:18px;
  width:100%;
  background:var(--footer-bg, linear-gradient(to top, rgba(9,11,18,0.92), rgba(9,11,18,0.62)));
  border-top:1px solid var(--footer-border, rgba(255,255,255,0.08));
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.site-footer-inner{
  width:min(1180px, calc(100% - 32px));
  margin:0 auto;
  min-height:52px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  color:var(--muted, #bcc3da);
  font-size:13px;
  padding:14px 0;
}

.footer-left{justify-self:start;}
.footer-center{
  justify-self:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  line-height:1.25;
  text-align:center;
}
.footer-division{font-weight:700;color:var(--text, #fff);}
.footer-right{justify-self:end;}
.footer-right-stack{display:flex;align-items:center;gap:10px;}
.footer-heart{display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;}
.footer-right-text{display:flex;flex-direction:column;line-height:1.25;text-align:left;}

@media (max-width:640px){
  .site-footer-inner{
    grid-template-columns:1fr;
    text-align:center;
    justify-items:center;
    gap:8px;
    padding:16px;
  }
  .footer-left,.footer-center,.footer-right{justify-self:center;}
  .footer-right-text{text-align:center;}
}