@thenamespace/ens-components 0.5.0 → 0.6.0

package/dist/index.css

@@ -912,7 +912,6 @@ html{
   line-height:1.5;
 }
 
-
 .ns-text{
   font-family:var(--ns-font-family);
   line-height:1.5;
@@ -2523,6 +2522,1798 @@ html{
   background:rgba(59,130,246,.1);
 }
 
+.ns-onchain-register-container{
+  align-items:center;
+  backdrop-filter:blur(4px);
+  background:rgba(0,0,0,.5);
+  bottom:0;
+  display:flex;
+  justify-content:center;
+  left:0;
+  padding:20px;
+  position:fixed;
+  right:0;
+  top:0;
+  z-index:1000;
+}
+.ns-onchain-register-card{
+  animation:fadeIn .4s ease;
+  background:#f9f8f9;
+  border-radius:20px;
+  box-shadow:0 4px 16px rgba(0,0,0,.1);
+  max-width:420px;
+  min-width:420px;
+  padding:20px;
+  position:relative;
+  text-align:center;
+  width:420px;
+}
+.ns-onchain-register-card .ns-onchain-register-duration-section,.ns-onchain-register-card .ns-onchain-register-owner-section,.ns-onchain-register-card .ns-onchain-register-profile-card,.ns-onchain-register-card .ns-onchain-register-toggle{
+  text-align:left;
+}
+.ns-onchain-register-banner{
+  border-radius:16px;
+  height:auto;
+  margin-bottom:12px;
+  overflow:hidden;
+  width:100%;
+}
+.ns-onchain-register-banner img{
+  display:block;
+  height:auto;
+  -o-object-fit:contain;
+     object-fit:contain;
+  width:100%;
+}
+.ns-onchain-register-header{
+  margin-bottom:12px;
+}
+.ns-onchain-register-header .ns-text,.ns-onchain-register-header h3{
+  margin:0;
+}
+.ns-onchain-register-header p,.ns-onchain-register-subtitle{
+  color:#666;
+  font-size:14px;
+  margin-top:6px;
+}
+.ns-onchain-register-input-row{
+  align-items:center;
+  background-color:#fff;
+  border:1px solid #e5e7eb;
+  border-radius:12px;
+  display:flex;
+  gap:8px;
+  margin-bottom:12px;
+  padding:12px;
+}
+.ns-onchain-register-search-icon{
+  color:#9ca3af;
+  flex-shrink:0;
+}
+.ns-onchain-register-input{
+  flex:1;
+  padding:0 !important;
+}
+.ns-onchain-register-input,.ns-onchain-register-input input{
+  background:transparent;
+  border:none !important;
+  box-shadow:none !important;
+  outline:none !important;
+}
+.ns-onchain-register-checkmark{
+  align-items:center;
+  animation:scaleIn .2s ease;
+  display:flex;
+  flex-shrink:0;
+  justify-content:center;
+  pointer-events:none;
+}
+.ns-onchain-register-checkmark.available{
+  background:transparent;
+}
+@keyframes scaleIn{
+  0%{
+    opacity:0;
+    transform:scale(0);
+  }
+  to{
+    opacity:1;
+    transform:scale(1);
+  }
+}
+.ns-onchain-register-checkmark .ns-icon{
+  height:16px;
+  width:16px;
+}
+.ns-onchain-register-clear-btn{
+  align-items:center;
+  animation:scaleIn .2s ease;
+  background:#000;
+  border:none;
+  border-radius:50%;
+  cursor:pointer;
+  display:flex;
+  flex-shrink:0;
+  height:22px;
+  justify-content:center;
+  padding:0;
+  transition:all .2s ease;
+  width:22px;
+}
+.ns-onchain-register-clear-btn:hover{
+  background:#333;
+  transform:scale(1.1);
+}
+.ns-onchain-register-clear-btn:active{
+  transform:scale(.95);
+}
+.ns-onchain-register-clear-btn .ns-icon{
+  height:12px;
+  width:12px;
+}
+.ns-onchain-register-unavailable-message{
+  align-items:center;
+  animation:slideDown .2s ease;
+  border-radius:10px;
+  display:flex;
+  gap:10px;
+  margin-bottom:4px;
+  margin-top:-16px;
+  padding:8px 4px;
+}
+.ns-onchain-register-warning-icon{
+  color:#dc2626;
+  flex-shrink:0;
+}
+.ns-onchain-register-domain-suffix{
+  border-left:1px solid #e5e7eb;
+  color:#374151;
+  font-size:16px;
+  font-weight:800;
+  margin-left:8px;
+  padding-left:8px;
+  white-space:nowrap;
+}
+.ns-onchain-register-actions{
+  display:flex;
+  gap:12px;
+  margin-top:16px;
+  width:100%;
+}
+.ns-onchain-register-actions .cancel,.ns-onchain-register-actions .primary{
+  border:none;
+  border-radius:8px;
+  cursor:pointer;
+  flex:1;
+  font-size:14px;
+  font-weight:500;
+  padding:12px 0;
+  transition:all .2s ease-in-out;
+}
+.ns-onchain-register-actions .cancel{
+  background:#f4f4f4;
+  color:#333;
+}
+.ns-onchain-register-actions .cancel:hover{
+  background:#e8e8e8;
+}
+.ns-onchain-register-actions .primary{
+  background:#000;
+  color:#fff;
+}
+.ns-onchain-register-actions .primary:hover{
+  background:#111;
+}
+.ns-onchain-register-actions button:disabled{
+  cursor:not-allowed;
+  opacity:.5;
+}
+.ns-onchain-register-close-btn{
+  align-items:center;
+  background-color:#fff;
+  border:none;
+  border-radius:50%;
+  box-shadow:0 2px 4px rgba(0,0,0,.1);
+  cursor:pointer;
+  display:flex;
+  height:32px;
+  justify-content:center;
+  position:absolute;
+  right:16px;
+  top:16px;
+  transition:all .2s ease;
+  width:32px;
+  z-index:10;
+}
+.ns-onchain-register-close-btn:hover{
+  background-color:#f0f0f0;
+  transform:scale(1.05);
+}
+.ns-onchain-register-footer{
+  margin-top:16px;
+  padding-top:12px;
+  text-align:center;
+}
+@keyframes fadeIn{
+  0%{
+    opacity:0;
+    transform:translateY(10px);
+  }
+
+  to{
+    opacity:1;
+    transform:translateY(0);
+  }
+}
+.ns-onchain-register-mint-title{
+  margin-bottom:6px;
+  text-align:center;
+}
+.ns-onchain-register-name-display{
+  margin-bottom:16px;
+  text-align:center;
+}
+.ns-onchain-register-owner-section{
+  background:#f4f4f4;
+  border-radius:10px;
+  margin-bottom:16px;
+  overflow:hidden;
+}
+.ns-onchain-register-owner-header{
+  align-items:center;
+  cursor:pointer;
+  display:flex;
+  justify-content:space-between;
+  padding:12px 16px;
+  transition:background .2s ease;
+}
+.ns-onchain-register-owner-header:hover{
+  background:#e8e8e8;
+}
+.ns-onchain-register-owner-left{
+  align-items:center;
+  display:flex;
+  gap:8px;
+}
+.ns-onchain-register-owner-chevron{
+  align-items:center;
+  color:#333;
+  display:flex;
+  transition:transform .2s ease;
+}
+.ns-onchain-register-owner-content{
+  animation:slideDown .2s ease;
+  padding:0 16px 16px;
+}
+.ns-onchain-register-owner-input{
+  background:#fff;
+  border:1px solid #e5e7eb;
+  border-radius:8px;
+  width:100%;
+}
+@keyframes slideDown{
+  0%{
+    opacity:0;
+    transform:translateY(-10px);
+  }
+  to{
+    opacity:1;
+    transform:translateY(0);
+  }
+}
+.ns-onchain-register-duration-section{
+  background:#fff;
+  border-radius:12px;
+  margin-bottom:16px;
+  padding:14px;
+}
+.ns-onchain-register-duration-controls{
+  align-items:center;
+  display:flex;
+  justify-content:space-between;
+  margin-bottom:16px;
+  padding:2px;
+  width:100% !important;
+}
+.ns-onchain-register-card .ns-onchain-register-duration-controls:has(>:only-child){
+  justify-content:center;
+}
+.ns-onchain-register-duration-btn{
+  align-items:center;
+  background:#000;
+  border:none;
+  border-radius:15%;
+  color:#fff;
+  cursor:pointer;
+  display:flex;
+  height:25px;
+  justify-content:center;
+  transition:all .2s ease;
+  width:25px;
+}
+.ns-onchain-register-duration-btn:hover:not(:disabled){
+  background:#333;
+}
+.ns-onchain-register-duration-btn:disabled{
+  cursor:not-allowed;
+  opacity:.5;
+}
+.ns-onchain-register-cost-breakdown{
+  border-top:1px solid #e5e7eb;
+  padding-top:14px;
+}
+.ns-onchain-register-cost-row{
+  align-items:center;
+  display:flex;
+  justify-content:space-between;
+  margin-bottom:10px;
+}
+.ns-onchain-register-cost-row.total{
+  border-top:1px solid #e5e7eb;
+  margin-bottom:0;
+  margin-top:10px;
+  padding-top:10px;
+}
+.ns-onchain-register-total-cost{
+  align-items:center;
+  display:flex;
+  gap:6px;
+}
+.ns-onchain-register-profile-card{
+  align-items:center;
+  background:#fff;
+  border:2px dashed #d3d3d3;
+  border-radius:12px;
+  cursor:pointer;
+  display:flex;
+  justify-content:space-between;
+  margin-bottom:16px;
+  padding:14px;
+  transition:all .2s ease;
+}
+.ns-onchain-register-profile-card:hover{
+  background:#fafafa;
+  border-color:#000;
+}
+.ns-onchain-register-profile-icon{
+  align-items:center;
+  background:#f5f5f5;
+  border-radius:8px;
+  display:flex;
+  flex-shrink:0;
+  height:40px;
+  justify-content:center;
+  margin-right:12px;
+  width:40px;
+}
+.ns-onchain-register-profile-icon img{
+  height:24px;
+  -o-object-fit:contain;
+     object-fit:contain;
+  width:24px;
+}
+.ns-onchain-register-profile-text{
+  flex:1;
+  text-align:left;
+}
+.ns-onchain-register-profile-text .ns-text:first-child{
+  margin-bottom:4px;
+}
+.ns-onchain-register-profile-arrow{
+  align-items:center;
+  background-color:#333;
+  border:none;
+  border-radius:50%;
+  color:#fff;
+  cursor:pointer;
+  display:flex;
+  flex-shrink:0;
+  height:28px;
+  justify-content:center;
+  padding:0;
+  transition:background .2s ease;
+  width:28px;
+}
+.ns-onchain-register-profile-arrow:hover{
+  background-color:#000;
+}
+.ns-onchain-register-profile-completed{
+  align-items:center;
+  background:#fff;
+  border-radius:12px;
+  box-shadow:0 1px 3px rgba(0,0,0,.1);
+  display:flex;
+  gap:12px;
+  justify-content:space-between;
+  margin-bottom:16px;
+  padding:14px;
+}
+.ns-onchain-register-profile-completed-avatar{
+  align-items:center;
+  background:#f5f5f5;
+  border-radius:8px;
+  display:flex;
+  flex-shrink:0;
+  height:40px;
+  justify-content:center;
+  overflow:hidden;
+  width:40px;
+}
+.ns-onchain-register-profile-completed-avatar img{
+  height:100%;
+  -o-object-fit:cover;
+     object-fit:cover;
+  width:100%;
+}
+.ns-onchain-register-profile-completed-text{
+  flex:1;
+  text-align:left;
+}
+.ns-onchain-register-profile-completed-text .ns-text:first-child{
+  margin-bottom:4px;
+}
+.ns-onchain-register-profile-completed-checkmark{
+  align-items:center;
+  background-color:#333;
+  border-radius:8px;
+  display:flex;
+  flex-shrink:0;
+  height:36px;
+  justify-content:center;
+  width:36px;
+}
+.ns-onchain-register-toggle{
+  align-items:flex-start;
+  background:#fff;
+  border-radius:12px;
+  display:flex;
+  gap:14px;
+  justify-content:space-between;
+  margin-bottom:16px;
+  padding:14px;
+}
+.ns-onchain-register-toggle-text{
+  flex:1;
+  text-align:left;
+}
+.ns-onchain-register-toggle-text .ns-text:first-child{
+  margin-bottom:8px;
+}
+.ns-onchain-register-toggle-text strong{
+  font-weight:600;
+}
+.toggle-switch{
+  flex-shrink:0;
+  height:22px;
+  position:relative;
+  width:40px;
+}
+.toggle-switch input{
+  display:none;
+}
+.toggle-switch label{
+  background:#ccc;
+  border-radius:22px;
+  bottom:0;
+  cursor:pointer;
+  left:0;
+  position:absolute;
+  right:0;
+  top:0;
+  transition:background .3s;
+}
+.toggle-switch label:after{
+  background:#fff;
+  border-radius:50%;
+  content:"";
+  height:18px;
+  left:2px;
+  position:absolute;
+  top:2px;
+  transition:all .3s;
+  width:18px;
+}
+.toggle-switch input:checked+label{
+  background:#000;
+}
+.toggle-switch input:checked+label:after{
+  transform:translateX(18px);
+}
+.ns-onchain-register-success{
+  text-align:center;
+}
+.ns-onchain-register-success-title-section{
+  margin-bottom:20px;
+  text-align:center;
+}
+.ns-onchain-register-success-message{
+  color:#333;
+  display:block;
+  margin-bottom:8px;
+}
+.ns-onchain-register-success-subtitle{
+  color:#666;
+  display:block;
+}
+.ns-onchain-register-finish-banner{
+  align-items:center;
+  display:flex;
+  justify-content:center;
+  margin-bottom:20px;
+}
+.ns-onchain-register-finish-banner img{
+  height:auto;
+  max-width:200px;
+  -o-object-fit:contain;
+     object-fit:contain;
+  width:100%;
+}
+.ns-onchain-register-actions .finish-btn{
+  background-color:#333 !important;
+  border:none;
+  border-radius:12px;
+  color:#fff !important;
+  cursor:pointer;
+  font-size:16px;
+  font-weight:600;
+  padding:14px 0;
+  transition:all .2s ease;
+  width:100%;
+}
+.ns-onchain-register-actions .finish-btn:hover{
+  background-color:#000 !important;
+}
+
+.ns-offchain-register-container{
+  align-items:center;
+  backdrop-filter:blur(4px);
+  background:rgba(0,0,0,.5);
+  bottom:0;
+  display:flex;
+  justify-content:center;
+  left:0;
+  padding:20px;
+  position:fixed;
+  right:0;
+  top:0;
+  z-index:1000;
+}
+.ns-offchain-register-card{
+  animation:fadeIn .4s ease;
+  background:#f9f8f9;
+  border-radius:20px;
+  box-shadow:0 4px 16px rgba(0,0,0,.1);
+  max-width:380px;
+  padding:20px;
+  position:relative;
+  text-align:center;
+  width:100%;
+}
+.ns-offchain-register-banner{
+  border-radius:16px;
+  height:auto;
+  margin-bottom:12px;
+  overflow:hidden;
+  width:100%;
+}
+.ns-offchain-register-banner img{
+  display:block;
+  height:auto;
+  -o-object-fit:contain;
+     object-fit:contain;
+  width:100%;
+}
+.ns-offchain-register-header{
+  margin-bottom:12px;
+}
+.ns-offchain-register-header .ns-text,.ns-offchain-register-header h3{
+  margin:0;
+}
+.ns-offchain-register-header p,.ns-offchain-register-subtitle{
+  color:#666;
+  font-size:14px;
+  margin-top:6px;
+}
+.ns-offchain-register-input-row{
+  align-items:center;
+  background-color:#fff;
+  border:1px solid #e5e7eb;
+  border-radius:12px;
+  display:flex;
+  gap:8px;
+  margin-bottom:12px;
+  padding:12px;
+}
+.ns-offchain-register-search-icon{
+  color:#9ca3af;
+  flex-shrink:0;
+}
+.ns-offchain-register-input{
+  flex:1;
+  padding:0 !important;
+}
+.ns-offchain-register-input,.ns-offchain-register-input input{
+  background:transparent;
+  border:none !important;
+  box-shadow:none !important;
+  outline:none !important;
+}
+.ns-offchain-register-checkmark{
+  align-items:center;
+  animation:scaleIn .2s ease;
+  display:flex;
+  flex-shrink:0;
+  justify-content:center;
+  pointer-events:none;
+}
+.ns-offchain-register-checkmark.available{
+  background:transparent;
+}
+@keyframes scaleIn{
+  0%{
+    opacity:0;
+    transform:scale(0);
+  }
+  to{
+    opacity:1;
+    transform:scale(1);
+  }
+}
+.ns-offchain-register-checkmark .ns-icon{
+  height:16px;
+  width:16px;
+}
+.ns-offchain-register-clear-btn{
+  align-items:center;
+  animation:scaleIn .2s ease;
+  background:#000;
+  border:none;
+  border-radius:50%;
+  cursor:pointer;
+  display:flex;
+  flex-shrink:0;
+  height:22px;
+  justify-content:center;
+  padding:0;
+  transition:all .2s ease;
+  width:22px;
+}
+.ns-offchain-register-clear-btn:hover{
+  background:#333;
+  transform:scale(1.1);
+}
+.ns-offchain-register-clear-btn:active{
+  transform:scale(.95);
+}
+.ns-offchain-register-clear-btn .ns-icon{
+  height:12px;
+  width:12px;
+}
+.ns-offchain-register-unavailable-message{
+  align-items:center;
+  animation:slideDown .2s ease;
+  border-radius:10px;
+  display:flex;
+  gap:10px;
+  margin-bottom:4px;
+  margin-top:-16px;
+  padding:8px 4px;
+}
+@keyframes slideDown{
+  0%{
+    opacity:0;
+    transform:translateY(-5px);
+  }
+  to{
+    opacity:1;
+    transform:translateY(0);
+  }
+}
+.ns-offchain-register-warning-icon{
+  color:#dc2626;
+  flex-shrink:0;
+}
+.ns-offchain-register-domain-suffix{
+  border-left:1px solid #e5e7eb;
+  color:#374151;
+  font-size:16px;
+  font-weight:800;
+  margin-left:8px;
+  padding-left:8px;
+  white-space:nowrap;
+}
+.ns-offchain-register-name-exist{
+  background:#fff;
+  border:1px solid #e4e4e4;
+  border-radius:16px;
+  max-height:250px;
+  overflow-y:auto;
+  padding:8px;
+}
+.ns-offchain-register-name-item{
+  align-items:center;
+  border-radius:10px;
+  cursor:pointer;
+  display:flex;
+  justify-content:space-between;
+  padding:10px 12px;
+  transition:background .2s ease;
+}
+.ns-offchain-register-name-item:hover{
+  background:#f8f8f8;
+}
+.ns-offchain-register-name-item.selected{
+  background:#111;
+  color:#fff;
+}
+.ns-offchain-register-name-left{
+  align-items:center;
+  display:flex;
+  gap:10px;
+}
+.ns-offchain-register-name-avatar{
+  align-items:center;
+  border-radius:50%;
+  color:#fff;
+  display:flex;
+  font-weight:700;
+  height:32px;
+  justify-content:center;
+  width:32px;
+}
+.ns-offchain-register-name-avatar.blue{
+  background:#5b74f6;
+}
+.ns-offchain-register-name-avatar.purple{
+  background:#8b5cf6;
+}
+.ns-offchain-register-name-avatar.gold{
+  background:#fbbf24;
+}
+.ns-offchain-register-name-text{
+  color:inherit;
+  font-size:14px;
+  font-weight:500;
+}
+.status-unavailable{
+  background:#ffecec;
+  color:#e43c3c;
+}
+.status-price,.status-unavailable{
+  border-radius:8px;
+  font-size:12px;
+  padding:4px 8px;
+}
+.status-price{
+  background:#333;
+  color:#fff;
+}
+.status-free{
+  background:#f4f4f4;
+  border-radius:8px;
+  color:#333;
+  font-size:12px;
+  padding:4px 8px;
+}
+.ns-offchain-register-name-exist::-webkit-scrollbar{
+  width:4px;
+}
+.ns-offchain-register-name-exist::-webkit-scrollbar-thumb{
+  background:#000;
+  border-radius:15px;
+}
+.ns-offchain-register-actions{
+  display:flex;
+  gap:12px;
+  margin-top:16px;
+  width:100%;
+}
+.ns-offchain-register-actions .cancel,.ns-offchain-register-actions .primary{
+  border:none;
+  border-radius:8px;
+  cursor:pointer;
+  flex:1;
+  font-size:14px;
+  font-weight:500;
+  padding:12px 0;
+  transition:all .2s ease-in-out;
+}
+.ns-offchain-register-actions .cancel{
+  background:#f4f4f4;
+  color:#333;
+}
+.ns-offchain-register-actions .cancel:hover{
+  background:#e8e8e8;
+}
+.ns-offchain-register-actions .primary{
+  background:#000;
+  color:#fff;
+}
+.ns-offchain-register-actions .primary:hover{
+  background:#111;
+}
+.ns-offchain-register-actions button:disabled{
+  cursor:not-allowed;
+  opacity:.5;
+}
+.ns-offchain-register-section{
+  border-radius:10px;
+  margin:10px 0;
+}
+.ns-offchain-register-duration-section{
+  display:flex;
+  flex-direction:column;
+  padding:10px;
+  text-align:left;
+  width:100%;
+}
+.ns-offchain-register-select select{
+  background:#fff;
+  border:1px solid #fff;
+  border-radius:10px;
+  font-size:14px;
+  padding:18px 12px;
+  width:100%;
+}
+.ns-offchain-register-container-inner{
+  background:#fff;
+  border-radius:10px;
+  display:flex;
+  flex-direction:column;
+  gap:20px;
+}
+.ns-offchain-register-section>div,.ns-offchain-register-section>p,.ns-offchain-register-section>span{
+  color:#333;
+  font-size:14px;
+  font-weight:500;
+  margin-bottom:10px;
+}
+.ns-offchain-register-duration{
+  align-items:center;
+  background:#fff;
+  border:1px solid #ddd;
+  border-radius:8px;
+  display:flex;
+  justify-content:space-between;
+  padding:10px 14px;
+  width:370px;
+}
+.ns-offchain-register-duration button{
+  background-color:#000;
+  border:none;
+  border-radius:6px;
+  color:#fff;
+  cursor:pointer;
+  font-size:16px;
+  font-weight:600;
+  height:28px;
+  transition:all .2s ease-in-out;
+  width:28px;
+}
+.ns-offchain-register-duration button:hover{
+  background-color:#dcdcdc;
+}
+.ns-offchain-register-duration span{
+  color:#222;
+  font-size:14px;
+  font-weight:500;
+}
+.ns-offchain-register-summary{
+  border-radius:10px;
+  flex:1;
+  padding:30px;
+}
+.ns-offchain-register-summary .row{
+  align-items:center;
+  color:#444;
+  display:flex;
+  gap:40px;
+  justify-content:space-between;
+  margin-bottom:4px;
+}
+.ns-offchain-register-summary .row>:first-child{
+  flex:1;
+  text-align:left;
+}
+.ns-offchain-register-summary .row>:last-child{
+  flex:1;
+  text-align:right;
+}
+.ns-offchain-register-summary .row.total{
+  border-top:1px solid #ddd;
+  font-weight:600;
+  padding-top:10px;
+}
+.ns-offchain-register-section span,.ns-offchain-register-summary .row span{
+  font-size:14px;
+}
+.ns-offchain-register-profile-card{
+  border:1.9px dashed #d3d3d3;
+  box-sizing:border-box;
+  margin:12px 0;
+  padding:10px 14px;
+  transition:all .2s ease-in-out;
+  width:100%;
+}
+.ns-offchain-register-profile-icon{
+  height:40px;
+  width:40px;
+}
+.ns-offchain-register-profile-icon img{
+  height:20px;
+  width:20px;
+}
+.ns-offchain-register-profile-text{
+  margin:0 12px;
+}
+.ns-offchain-register-profile-text strong{
+  color:#111;
+  display:block;
+  font-size:10px;
+  font-weight:600;
+}
+.ns-offchain-register-profile-text p{
+  color:#666;
+  font-size:6px;
+  margin-top:2px;
+}
+.ns-offchain-register-profile-action{
+  color:#333;
+  font-size:20px;
+}
+.ns-offchain-register-toggle{
+  align-items:flex-start;
+  background:#fff;
+  border-radius:12px;
+  display:flex;
+  justify-content:space-between;
+  margin-bottom:20px;
+  padding:12px;
+}
+.ns-offchain-register-toggle .toggle-text{
+  max-width:70%;
+  text-align:left;
+}
+.ns-offchain-register-toggle strong{
+  font-size:14px;
+}
+.ns-offchain-register-toggle p{
+  color:#666;
+  font-size:12px;
+  margin-top:4px;
+}
+.toggle-switch{
+  height:22px;
+  position:relative;
+  width:40px;
+}
+.toggle-switch input{
+  display:none;
+}
+.toggle-switch label{
+  background:#ccc;
+  border-radius:22px;
+  bottom:0;
+  cursor:pointer;
+  left:0;
+  position:absolute;
+  right:0;
+  top:0;
+}
+.toggle-switch label:after{
+  background:#fff;
+  border-radius:50%;
+  content:"";
+  height:18px;
+  left:2px;
+  position:absolute;
+  top:2px;
+  transition:all .3s;
+  width:18px;
+}
+.toggle-switch input:checked+label{
+  background:#000;
+}
+.toggle-switch input:checked+label:after{
+  transform:translateX(18px);
+}
+.ns-offchain-register-success .ns-offchain-register-icon{
+  font-size:40px;
+  margin-bottom:12px;
+}
+.ns-offchain-register-success h3{
+  margin-bottom:8px;
+}
+.ns-offchain-register-success p{
+  color:#666;
+  font-size:14px;
+}
+@keyframes fadeIn{
+  0%{
+    opacity:0;
+    transform:translateY(10px);
+  }
+
+  to{
+    opacity:1;
+    transform:translateY(0);
+  }
+}
+.ns-offchain-register-screen-label{
+  color:#666;
+  font-size:12px;
+  font-weight:500;
+  left:0;
+  position:absolute;
+  top:-30px;
+}
+.ns-offchain-register-close-btn{
+  align-items:center;
+  background-color:#fff;
+  border:none;
+  border-radius:50%;
+  box-shadow:0 2px 4px rgba(0,0,0,.1);
+  cursor:pointer;
+  display:flex;
+  height:32px;
+  justify-content:center;
+  position:absolute;
+  right:16px;
+  top:16px;
+  transition:all .2s ease;
+  width:32px;
+  z-index:10;
+}
+.ns-offchain-register-close-btn:hover{
+  background-color:#f0f0f0;
+  transform:scale(1.05);
+}
+.ns-offchain-register-footer{
+  margin-top:16px;
+  padding-top:12px;
+  text-align:center;
+}
+.ns-offchain-register-title-section{
+  margin-bottom:24px;
+  text-align:center;
+}
+.ns-offchain-register-title{
+  color:#333;
+  display:block;
+  margin-bottom:8px;
+}
+.ns-offchain-register-subtitle{
+  color:#666;
+  display:block;
+}
+.ns-offchain-register-step-content-title{
+  color:#333;
+  display:block;
+  margin-bottom:8px;
+}
+.ns-offchain-register-step-content-description{
+  color:#666;
+  display:block;
+  line-height:1.5;
+  margin-bottom:20px;
+}
+.ns-offchain-register-open-wallet-btn{
+  background-color:#000 !important;
+  border:none;
+  border-radius:12px;
+  color:#fff !important;
+  cursor:pointer;
+  font-size:16px;
+  font-weight:600;
+  padding:14px 0;
+  transition:all .2s ease;
+  width:100%;
+}
+.ns-offchain-register-open-wallet-btn:hover{
+  background-color:#333 !important;
+}
+.ns-offchain-register-complete-btn{
+  background-color:#000 !important;
+  border:none;
+  border-radius:12px;
+  color:#fff !important;
+  cursor:pointer;
+  font-size:16px;
+  font-weight:600;
+  margin-top:20px;
+  padding:14px 0;
+  transition:all .2s ease;
+  width:100%;
+}
+.ns-offchain-register-complete-btn:hover{
+  background-color:#333 !important;
+}
+.ns-offchain-register-footer-link{
+  cursor:pointer;
+  margin-top:24px;
+  text-align:center;
+  transition:color .2s ease;
+}
+.ns-offchain-register-footer-link:hover{
+  color:#000 !important;
+}
+.ns-offchain-register-footer-link .ns-text{
+  text-decoration:underline;
+}
+.ns-offchain-register-success{
+  text-align:center;
+}
+.ns-offchain-register-success-title-section{
+  margin-bottom:24px;
+  text-align:center;
+}
+.ns-offchain-register-success-message{
+  color:#333;
+  display:block;
+  margin-bottom:8px;
+}
+.ns-offchain-register-success-subtitle{
+  color:#666;
+  display:block;
+}
+.ns-offchain-register-finish-banner{
+  align-items:center;
+  display:flex;
+  justify-content:center;
+  margin-bottom:24px;
+}
+.ns-offchain-register-finish-banner img{
+  height:auto;
+  max-width:200px;
+  -o-object-fit:contain;
+     object-fit:contain;
+  width:100%;
+}
+.ns-offchain-register-profile-card{
+  align-items:center;
+  background:#fff;
+  border:2px dashed #d3d3d3;
+  border-radius:12px;
+  cursor:pointer;
+  display:flex;
+  justify-content:space-between;
+  margin-bottom:20px;
+  padding:16px;
+  transition:all .2s ease;
+}
+.ns-offchain-register-profile-card:hover{
+  background:#fafafa;
+  border-color:#000;
+}
+.ns-offchain-register-profile-icon{
+  align-items:center;
+  background:#f5f5f5;
+  border-radius:8px;
+  display:flex;
+  flex-shrink:0;
+  height:48px;
+  justify-content:center;
+  margin-right:12px;
+  width:48px;
+}
+.ns-offchain-register-profile-icon img{
+  height:32px;
+  -o-object-fit:cover;
+     object-fit:cover;
+  width:32px;
+}
+.ns-offchain-register-profile-text{
+  flex:1;
+  text-align:left;
+}
+.ns-offchain-register-profile-text .ns-text{
+  display:block;
+}
+.ns-offchain-register-profile-text .ns-text:first-child{
+  margin-bottom:4px;
+}
+.ns-offchain-register-profile-arrow{
+  align-items:center;
+  background-color:#333;
+  border:none;
+  border-radius:50%;
+  color:#fff;
+  cursor:pointer;
+  display:flex;
+  flex-shrink:0;
+  height:32px;
+  justify-content:center;
+  transition:background .2s ease;
+  width:32px;
+}
+.ns-offchain-register-profile-arrow:hover{
+  background-color:#000;
+}
+.ns-offchain-register-actions .finish-btn{
+  background-color:#333 !important;
+  border:none;
+  border-radius:12px;
+  color:#fff !important;
+  cursor:pointer;
+  font-size:16px;
+  font-weight:600;
+  padding:14px 0;
+  transition:all .2s ease;
+  width:100%;
+}
+.ns-offchain-register-actions .finish-btn:hover{
+  background-color:#000 !important;
+}
+
+.ens-names-register-container{
+  background-color:#f7f7f7;
+  min-height:100vh;
+}
+.ens-names-register-container,.ens-names-register-modal-wrapper{
+  align-items:center;
+  display:flex;
+  justify-content:center;
+  padding:20px;
+}
+.ens-names-register-modal-wrapper{
+  backdrop-filter:blur(4px);
+  background:rgba(0,0,0,.5);
+  bottom:0;
+  left:0;
+  position:fixed;
+  right:0;
+  top:0;
+  z-index:1000;
+}
+.ens-names-register-modal-wrapper .ens-names-register-container{
+  background:transparent;
+  min-height:auto;
+  padding:0;
+  position:relative;
+}
+.ens-names-register-card{
+  background:#f7f7f7;
+  border-radius:20px;
+  box-shadow:0 4px 16px rgba(0,0,0,.1);
+  max-width:420px;
+  min-width:420px;
+  padding:24px;
+  position:relative;
+  width:420px;
+}
+.ens-names-register-header{
+  align-items:center;
+  display:flex;
+  justify-content:space-between;
+  margin-bottom:16px;
+}
+.ens-names-register-back-btn,.ens-names-register-close-btn{
+  align-items:center;
+  background-color:#fff;
+  border:none;
+  border-radius:50%;
+  box-shadow:0 2px 4px rgba(0,0,0,.1);
+  cursor:pointer;
+  display:flex;
+  height:32px;
+  justify-content:center;
+  transition:all .2s ease;
+  width:32px;
+}
+.ens-names-register-back-btn:hover,.ens-names-register-close-btn:hover{
+  background-color:#f0f0f0;
+  transform:scale(1.05);
+}
+.ens-names-register-banner{
+  margin-bottom:20px;
+}
+.ens-names-register-banner img{
+  border-radius:16px;
+  height:auto;
+  -o-object-fit:cover;
+     object-fit:cover;
+  width:100%;
+}
+.ens-names-register-title-section{
+  margin-bottom:24px;
+  text-align:center;
+}
+.ens-names-register-title{
+  color:#333;
+  display:block;
+  margin-bottom:8px;
+}
+.ens-names-register-subtitle{
+  color:#666;
+  display:block;
+}
+.ens-names-register-input-row{
+  align-items:center;
+  background-color:#fff;
+  border:1px solid #e5e7eb;
+  border-radius:12px;
+  display:flex;
+  gap:8px;
+  margin-bottom:20px;
+  padding:12px;
+}
+.ens-names-register-search-icon{
+  color:#9ca3af;
+  flex-shrink:0;
+}
+.ens-names-register-input{
+  flex:1;
+  padding:0 !important;
+}
+.ens-names-register-input,.ens-names-register-input input{
+  background:transparent;
+  border:none !important;
+  box-shadow:none !important;
+  outline:none !important;
+}
+.ens-names-register-domain-suffix{
+  border-left:1px solid #e5e7eb;
+  color:#374151;
+  font-size:16px;
+  font-weight:800;
+  margin-left:8px;
+  padding-left:8px;
+  white-space:nowrap;
+}
+.ens-names-register-cost-section{
+  background:#fff;
+  border-radius:12px;
+  margin-bottom:20px;
+  padding:20px;
+}
+.ens-names-register-duration{
+  align-items:center;
+  background:#fff;
+  border:1px solid #ddd;
+  border-radius:8px;
+  display:flex;
+  justify-content:space-between;
+  margin-bottom:20px;
+  padding:12px 16px;
+}
+.ens-names-register-duration-btn{
+  align-items:center;
+  background-color:#000;
+  border:none;
+  border-radius:50%;
+  color:#fff;
+  cursor:pointer;
+  display:flex;
+  font-size:18px;
+  font-weight:700;
+  height:32px;
+  justify-content:center;
+  transition:all .2s ease;
+  width:32px;
+}
+.ens-names-register-duration-btn:hover{
+  background-color:#333;
+}
+.ens-names-register-duration-text{
+  color:#222;
+  flex:1;
+  text-align:center;
+}
+.ens-names-register-summary{
+  display:flex;
+  flex-direction:column;
+  gap:12px;
+}
+.ens-names-register-summary-row{
+  align-items:center;
+  display:flex;
+  justify-content:space-between;
+}
+.ens-names-register-summary-total{
+  border-top:1px solid #ddd;
+  margin-top:4px;
+  padding-top:12px;
+}
+.ens-names-register-total-amount{
+  align-items:center;
+  display:flex;
+  gap:6px;
+}
+.ens-names-register-eth-logo{
+  color:#627eea;
+  font-size:18px;
+  font-weight:700;
+}
+.ens-names-register-profile-card{
+  align-items:center;
+  background:#fff;
+  border:2px dashed #d3d3d3;
+  border-radius:12px;
+  cursor:pointer;
+  display:flex;
+  justify-content:space-between;
+  margin-bottom:20px;
+  padding:16px;
+  transition:all .2s ease;
+}
+.ens-names-register-profile-card:hover{
+  background:#fafafa;
+  border-color:#000;
+}
+.ens-names-register-profile-icon{
+  align-items:center;
+  background:#f5f5f5;
+  border-radius:8px;
+  display:flex;
+  flex-shrink:0;
+  height:48px;
+  justify-content:center;
+  margin-right:12px;
+  width:48px;
+}
+.ens-names-register-profile-icon img{
+  height:32px;
+  -o-object-fit:cover;
+     object-fit:cover;
+  width:32px;
+}
+.ens-names-register-profile-text{
+  flex:1;
+  text-align:left;
+}
+.ens-names-register-profile-text .ns-text{
+  display:block;
+}
+.ens-names-register-profile-text .ns-text:first-child{
+  margin-bottom:4px;
+}
+.ens-names-register-profile-arrow{
+  align-items:center;
+  background-color:transparent;
+  border:none;
+  border-radius:50%;
+  color:#333;
+  cursor:pointer;
+  display:flex;
+  flex-shrink:0;
+  height:32px;
+  justify-content:center;
+  width:32px;
+}
+.ens-names-register-profile-arrow:hover{
+  background-color:#f0f0f0;
+}
+.ens-names-register-next-btn{
+  background-color:#000 !important;
+  border:none;
+  border-radius:12px;
+  color:#fff !important;
+  cursor:pointer;
+  font-size:16px;
+  font-weight:600;
+  padding:14px 0;
+  transition:all .2s ease;
+  width:100%;
+}
+.ens-names-register-next-btn:hover{
+  background-color:#333 !important;
+}
+.ens-names-register-next-btn:active{
+  transform:scale(.98);
+}
+.ens-names-register-step{
+  background:#fff;
+  border-radius:12px;
+  margin-bottom:12px;
+  overflow:hidden;
+  transition:all .3s ease;
+}
+.ens-names-register-step.expanded{
+  box-shadow:0 2px 8px rgba(0,0,0,.1);
+}
+.ens-names-register-step-header{
+  align-items:center;
+  cursor:pointer;
+  display:flex;
+  padding:16px;
+  transition:background .2s ease;
+}
+.ens-names-register-step-header:hover{
+  background:#f8f8f8;
+}
+.ens-names-register-step-number{
+  align-items:center;
+  background:#e5e7eb;
+  border-radius:50%;
+  display:flex;
+  height:32px;
+  justify-content:center;
+  margin-right:12px;
+  transition:all .2s ease;
+  width:32px;
+}
+.ens-names-register-step-number span{
+  color:#666;
+  font-size:14px;
+  font-weight:600;
+}
+.ens-names-register-step-number span.active{
+  color:#fff;
+}
+.ens-names-register-step.expanded .ens-names-register-step-number{
+  background:#000;
+}
+.ens-names-register-step-title{
+  color:#333;
+  flex:1;
+  text-align:left;
+}
+.ens-names-register-step-chevron{
+  align-items:center;
+  color:#666;
+  display:flex;
+  justify-content:center;
+}
+.ens-names-register-step-content{
+  animation:slideDown .3s ease;
+  padding:0 16px 16px 60px;
+}
+@keyframes slideDown{
+  0%{
+    opacity:0;
+    transform:translateY(-10px);
+  }
+  to{
+    opacity:1;
+    transform:translateY(0);
+  }
+}
+.ens-names-register-step-content-title{
+  color:#333;
+  display:block;
+  margin-bottom:8px;
+}
+.ens-names-register-step-content-description{
+  color:#666;
+  display:block;
+  line-height:1.5;
+  margin-bottom:20px;
+}
+.ens-names-register-open-wallet-btn{
+  background-color:#000 !important;
+  border:none;
+  border-radius:12px;
+  color:#fff !important;
+  cursor:pointer;
+  font-size:16px;
+  font-weight:600;
+  padding:14px 0;
+  transition:all .2s ease;
+  width:100%;
+}
+.ens-names-register-open-wallet-btn:hover{
+  background-color:#333 !important;
+}
+.ens-names-register-footer-link{
+  cursor:pointer;
+  margin-top:24px;
+  text-align:center;
+  transition:color .2s ease;
+}
+.ens-names-register-footer-link:hover{
+  color:#000 !important;
+}
+.ens-names-register-footer-link .ns-text{
+  text-decoration:underline;
+}
+.ens-names-register-progress-container{
+  margin-top:20px;
+}
+.ens-names-register-progress-bar{
+  background-color:#e5e7eb;
+  border:1px solid #d1d5db;
+  border-radius:10px;
+  height:25px;
+  overflow:hidden;
+  position:relative;
+  width:100%;
+}
+.ens-names-register-progress-fill{
+  align-items:center;
+  background-color:#000;
+  border-radius:4px;
+  display:flex;
+  height:100%;
+  justify-content:flex-end;
+  padding-right:4px;
+  position:relative;
+  transition:width .1s linear;
+}
+.ens-names-register-progress-sparkle{
+  animation:sparkle 1.5s ease-in-out infinite;
+  color:#fff;
+}
+@keyframes sparkle{
+  0%,to{
+    opacity:1;
+    transform:scale(1);
+  }
+  50%{
+    opacity:.7;
+    transform:scale(1.1);
+  }
+}
+.ens-names-register-timer-container{
+  align-items:center;
+  display:flex;
+  justify-content:center;
+  margin-bottom:8px;
+  margin-top:24px;
+}
+.ens-names-register-timer-circle{
+  align-items:center;
+  display:flex;
+  height:200px;
+  justify-content:center;
+  position:relative;
+  width:200px;
+}
+.ens-names-register-timer-svg{
+  height:100%;
+  transform:rotate(-90deg);
+  width:100%;
+}
+.ens-names-register-timer-progress{
+  transition:stroke-dashoffset .5s linear;
+}
+.ens-names-register-timer-text{
+  color:#000;
+  left:50%;
+  position:absolute;
+  text-align:center;
+  top:50%;
+  transform:translate(-50%, -50%);
+}
+.ens-names-register-timer-text .ns-text{
+  font-size:32px;
+  font-weight:700;
+  line-height:1;
+}
+.ens-names-register-step-number.completed{
+  background:#fff !important;
+  border:2px solid #000;
+}
+.ens-names-register-step-number.completed .ens-names-register-step-check{
+  color:#000;
+  stroke-width:3;
+}
+.ens-names-register-step.expanded .ens-names-register-step-number.completed{
+  background:#fff !important;
+  border:2px solid #000;
+}
+.ens-names-register-complete-btn{
+  background-color:#000 !important;
+  border:none;
+  border-radius:12px;
+  color:#fff !important;
+  cursor:pointer;
+  font-size:16px;
+  font-weight:600;
+  margin-top:20px;
+  padding:14px 0;
+  transition:all .2s ease;
+  width:100%;
+}
+.ens-names-register-complete-btn:hover{
+  background-color:#333 !important;
+}
+.ens-names-register-complete-btn:active{
+  transform:scale(.98);
+}
+.ens-names-register-success-card{
+  max-width:420px;
+  min-width:420px;
+  text-align:center;
+  width:420px;
+}
+.ens-names-register-success-header{
+  align-items:center;
+  display:flex;
+  justify-content:flex-end;
+  margin-bottom:16px;
+}
+.ens-names-register-success-illustration{
+  align-items:center;
+  display:flex;
+  justify-content:center;
+  margin-bottom:24px;
+}
+.ens-names-register-success-illustration img{
+  height:auto;
+  max-width:200px;
+  -o-object-fit:contain;
+     object-fit:contain;
+  width:100%;
+}
+.ens-names-register-success-title-section{
+  margin-bottom:24px;
+}
+.ens-names-register-success-message{
+  color:#333;
+  display:block;
+  margin-bottom:8px;
+}
+.ens-names-register-success-name{
+  color:#000;
+  display:block;
+  font-size:28px;
+}
+.ens-names-register-success-summary{
+  background:#fff;
+  border-radius:12px;
+  margin-bottom:24px;
+  padding:20px;
+  text-align:left;
+}
+.ens-names-register-success-summary-row{
+  align-items:center;
+  display:flex;
+  justify-content:space-between;
+  margin-bottom:12px;
+}
+.ens-names-register-success-summary-row:last-child{
+  margin-bottom:0;
+}
+.ens-names-register-success-total{
+  margin-bottom:12px;
+}
+.ens-names-register-success-expiry,.ens-names-register-success-total{
+  border-top:1px solid #ddd;
+  margin-top:8px;
+  padding-top:12px;
+}
+.ens-names-register-success-total-amount{
+  align-items:center;
+  display:flex;
+  gap:6px;
+}
+.ens-names-register-success-actions{
+  display:flex;
+  gap:12px;
+  width:100%;
+}
+.ens-names-register-register-another-btn{
+  background-color:#f4f4f4 !important;
+  border:1px solid #d1d5db !important;
+  border-radius:12px;
+  color:#333 !important;
+  cursor:pointer;
+  flex:1;
+  font-size:16px;
+  font-weight:600;
+  padding:14px 0;
+  transition:all .2s ease;
+}
+.ens-names-register-register-another-btn:hover{
+  background-color:#e8e8e8 !important;
+  border-color:#9ca3af !important;
+}
+.ens-names-register-view-name-btn{
+  background-color:#000 !important;
+  border:none;
+  border-radius:12px;
+  color:#fff !important;
+  cursor:pointer;
+  flex:1;
+  font-size:16px;
+  font-weight:600;
+  padding:14px 0;
+  transition:all .2s ease;
+}
+.ens-names-register-view-name-btn:hover{
+  background-color:#333 !important;
+}
+
 :root{
   --ns-font-family:"Satoshi", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
   --ns-radius-sm:4px;