/* sign.css */
:root{
  --bg:#826BEF;

  /* ORIGINAL (keep background/topbar/footer/loader/toast white-on-purple) */
  --card:rgba(255,255,255,0.10);
  --card2:rgba(0,0,0,0.15);
  --text:#fff;
  --muted:rgba(255,255,255,0.75);
  --line:rgba(255,255,255,0.25);
  --btn:#111827;
  --btnText:#fff;
  --btn2:#fff;
  --btn2Text:#111827;
  --shadow:0 10px 30px rgba(0,0,0,0.25);
  --r:16px;
  --w:22.5rem;
  --focus:2px solid rgba(255,255,255,0.9);

  /* CARD BRUSHES (white card like your avif reference) */
  --cardBg:#fff;
  --cardBorder:rgba(0,0,0,0.12);
  --cardShadow:0 14px 38px rgba(0,0,0,0.18);

  /* CARD TEXT BRUSHES (per your instruction) */
  --cardText:#123;   /* #112233 */
  --cardMuted:#456;  /* #445566 */
  --cardDim:dimgray;

  /* CARD FOCUS */
  --cardFocus:0 0 0 3px rgba(130,107,239,0.18);
}

*{box-sizing:border-box}
html,body{height:100%}

/* Background: geometric/soft like the reference image, but using your purple family */
body.nb{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  overflow:hidden;

  background:
    radial-gradient(1200px 900px at 20% 12%, rgba(255,255,255,0.22), transparent 62%),
    radial-gradient(1200px 900px at 82% 18%, rgba(0,0,0,0.18), transparent 62%),
    linear-gradient(135deg, rgba(154,134,255,0.55), rgba(130,107,239,0.92) 45%, rgba(78,54,217,0.92));
}

/* large soft "panels" (no extra DOM) */
body.nb::before,
body.nb::after{
  content:"";
  position:fixed;
  inset:auto;
  width: 540px;
  height: 540px;
  border-radius: 42px;
  transform: rotate(18deg);
  opacity: .22;
  filter: blur(0.3px);
  pointer-events:none;
  z-index:0;
}
body.nb::before{
  left:-220px;
  top: 110px;
  background: linear-gradient(135deg, rgba(255,255,255,0.35), rgba(255,255,255,0.02));
}
body.nb::after{
  right:-240px;
  bottom: 60px;
  background: linear-gradient(135deg, rgba(0,0,0,0.22), rgba(0,0,0,0.02));
}

/* Scroll container */
.wrap{
  position:relative;
  z-index:1;
  height:100%;
  overflow:auto;
  padding:5.25rem 1rem 2rem 1rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  -webkit-overflow-scrolling: touch;
}
.wrap::-webkit-scrollbar{ width: 10px }
.wrap::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.22);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,0.08);
}

.topbar{
  position:fixed;
  top:0;left:0;right:0;
  height:4.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 1rem;
  z-index:10;
  pointer-events:none;
}

.brand{
  pointer-events:auto;
  text-decoration:none;
  color:var(--text);
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.5rem .75rem;
  border-radius:999px;
  background:rgba(0,0,0,0.10);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 6px 20px rgba(0,0,0,0.15);
}

.logo{
  width:2rem;height:2rem;
  background-image:url(base.png);
  background-size:cover;
  background-position:center;
  border-radius:.6rem;
}

.word{
  font-weight:600;
  letter-spacing:.5px;
  text-transform:lowercase; /**capitalize;**/
  font-family:Roundex;
  font-size: 20px;
}

.iconbtn{
  pointer-events:auto;
  position:fixed;
  top:1rem;
  width:2.5rem;height:2.5rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(0,0,0,0.12);
  box-shadow:0 6px 20px rgba(0,0,0,0.15);
  cursor:pointer;
}
#back{
  left:1rem;
  display:none;
  background-image:url(icon/back.png);
  background-size:20px auto;
  background-repeat:no-repeat;
  background-position:center;
  filter:invert(1);
}
.iconbtn.help{
  right:1rem;
  display:inline-block;
  background-image:url(icon/bouy.png);
  background-size:22px auto;
  background-repeat:no-repeat;
  background-position:center;
  filter:invert(1);
}

/* ===== CARD (white like your avif reference) ===== */
.card{
  width:min(var(--w), calc(100% - 0rem));
  border-radius:var(--r);
  border:1px solid var(--cardBorder);
  background:var(--cardBg);
  box-shadow:var(--cardShadow);
  padding:1.1rem 1rem 1rem 1rem;
}

.view{display:none}
.view.active{display:block}

/* ===== CARD TYPOGRAPHY (use #123/#456 + dimgray) ===== */
.title{
  margin:.25rem 0 .5rem 0;
  font-size:1.35rem;
  line-height:1.2;
  color:var(--cardText);
}
.title2{
  margin:.25rem 0 .25rem 0;
  font-size:1.2rem;
  color:var(--cardText);
}
.sub{
  margin:.15rem 0 1rem 0;
  color:var(--cardMuted);
  line-height:1.35;
}

.stack{display:flex;flex-direction:column;gap:.65rem;margin-top:.5rem}

.lbl{display:block;margin:.65rem 0}
.lbl span{display:block;font-size:.85rem;color:var(--cardDim);margin:0 0 .35rem .1rem}

/* ===== CARD FIELDS (white) ===== */
.field{
  width:100%;
  height:2.65rem;
  padding:0 .9rem;
  border-radius:.85rem;
  border:1px solid rgba(0,0,0,0.16);
  background:#fff;
  color:var(--cardText);
  outline:none;
}
.field::placeholder{ color: rgba(68,85,102,0.70); } /* #456-ish */
.field:focus{
  border-color:rgba(130,107,239,0.70);
  box-shadow:var(--cardFocus);
  outline:none;
}
.field.invalid{border-color:rgba(255,80,80,0.9)!important}

/* Buttons (unchanged) */
.btn{
  width:100%;
  height:2.75rem;
  border-radius:.9rem;
  border:1px solid rgba(255,255,255,0.18);
  cursor:pointer;
  font-weight:650;
  letter-spacing:.2px;
}
.btn.primary{
  background:rgba(10,20,30,1);
  color:var(--btnText);
  box-shadow:inset 0 0 18px rgba(0,0,0,0.35);
}
.btn.ghost{
  background:rgba(255,255,255,0.92);
  color:rgba(10,20,30,1);
  box-shadow:inset 0 0 18px rgba(0,0,0,0.10);
}

/* ===== CARD LINKS (purple + dimgray) ===== */
.linkbtn{
  background:transparent;
  border:0;
  padding:0;
  color:var(--bg);
  text-decoration:underline;
  cursor:pointer;
  font-size:.75rem;
}

.fine{
  margin-top:.85rem;
  display:flex;
  justify-content:center;
  gap:.6rem;
  color:var(--cardDim);
  font-size:.9rem;
}
.fine a{color:var(--cardMuted);text-decoration:none}
.fine a:hover{text-decoration:underline}

/* Footer (unchanged; stays white on purple) */
.footer{
  width:min(var(--w), calc(100% - 0rem));
  text-align:center;
  color:rgba(255,255,255,0.80);
  font-size:.9rem;
  padding:.25rem 0 0 0;
}
.footer a{color:rgba(255,255,255,0.92);text-decoration:none}
.footer a:hover{text-decoration:underline}
.footnote{margin-top:.6rem;font-size:.75rem;color:rgba(255,255,255,0.75)}
.fbrand{font-weight:700}

#loader{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.25);
  display:none;
  z-index:20;
}
#loader .mbrand{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:4rem;height:4rem;
  border-radius:1.25rem;
  background-image:url(favicon.png);
  background-size:auto 90%;
  background-repeat:no-repeat;
  background-position:center;
  background-color:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.20);
  box-shadow:0 10px 30px rgba(0,0,0,0.25);
}

#toast{
  position:fixed;
  left:50%;
  bottom:1.25rem;
  transform:translateX(-50%);
  z-index:30;
  width:min(22rem, calc(100% - 2rem));
  padding:.75rem .9rem;
  border-radius:1rem;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(0,0,0,0.55);
  color:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,0.25);
  display:none;
  text-align:center;
  cursor:default;
}