.main{
  position:relative;z-index:1;flex:1;
  max-width:560px;width:100%;margin:0 auto;padding:3rem 2rem 4rem;
}
.page-title{
  font-size:2rem;font-weight:700;letter-spacing:-.03em;
  background:linear-gradient(135deg,#e0e7ff 0%,#a78bfa 50%,#7c3aed 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.page-sub{
  margin-top:.5rem;font-size:.95rem;color:rgba(255,255,255,.4);font-weight:300;
}
.divider{
  width:100%;height:1px;margin:2rem 0;
  background:linear-gradient(90deg,transparent,rgba(124,58,237,.4),transparent);
}

/* ── back link ── */
.back-link{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.85rem;color:rgba(255,255,255,.4);text-decoration:none;
  transition:color .2s;margin-bottom:1.25rem;
}
.back-link:hover{color:rgba(255,255,255,.8)}
.back-link svg{width:16px;height:16px}

/* ── mode tabs ── */
.tabs{display:flex;gap:.5rem;margin-bottom:1.5rem;flex-wrap:wrap}
.tab{
  padding:.45rem 1rem;border-radius:8px;font-size:.82rem;font-weight:500;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.45);cursor:pointer;transition:all .2s;
  letter-spacing:.02em;
}
.tab:hover{border-color:rgba(124,58,237,.3);color:rgba(255,255,255,.7)}
.tab.active{
  background:rgba(124,58,237,.15);border-color:rgba(124,58,237,.4);color:#a78bfa;
}

/* ── form ── */
.form-card{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  border-radius:12px;padding:1.75rem;
}
.field{margin-bottom:1rem}
.field:last-of-type{margin-bottom:1.25rem}
.field label{
  display:block;font-size:.75rem;font-weight:500;
  color:rgba(255,255,255,.35);letter-spacing:.06em;text-transform:uppercase;
  margin-bottom:.4rem;
}
.field input,.field select{
  width:100%;padding:.6rem .85rem;border-radius:8px;
  background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);
  color:#fff;font-size:.88rem;font-family:inherit;
  outline:none;transition:border-color .2s;
}
.field input::placeholder{color:rgba(255,255,255,.2)}
.field input:focus,.field select:focus{border-color:rgba(124,58,237,.5)}
.field select{cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;
}
.field select option{background:#1a1a1a;color:#fff}

.btn{
  width:100%;padding:.7rem;border:none;border-radius:8px;
  font-size:.9rem;font-weight:600;cursor:pointer;
  background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;
  transition:opacity .2s;letter-spacing:.02em;
}
.btn:hover{opacity:.85}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* ── result ── */
.result{
  margin-top:1.25rem;border-radius:10px;padding:1.25rem;
  font-family:'SF Mono','Fira Code',monospace;font-size:.85rem;
  line-height:1.7;display:none;
}
.result.ok{
  background:rgba(74,222,128,.06);border:1px solid rgba(74,222,128,.15);
  color:rgba(74,222,128,.85);
}
.result.err{
  background:rgba(248,113,113,.06);border:1px solid rgba(248,113,113,.15);
  color:rgba(248,113,113,.85);
}
.result .code-value{
  font-size:2rem;font-weight:700;letter-spacing:.15em;
  color:#fff;display:block;margin:.4rem 0;
}
.result .meta{font-size:.78rem;color:rgba(255,255,255,.35)}