@thenamespace/ens-components 0.0.8-alpha → 0.2.0

package/dist/index.css

@@ -266,26 +266,26 @@
   --ns-color-primary-contrast:#fff;
   --ns-color-border:#e5e7eb;
   --ns-shadow:0 1px 2px rgba(0,0,0,.04), 0 1px 1px rgba(0,0,0,.02);
-   --ns-alert-error-bg:#fef2f2;
-   --ns-alert-error-border:#fecaca;
-   --ns-alert-error-text:#dc2626;
-   --ns-alert-error-icon:#dc2626;
-   --ns-alert-error-close-hover:rgba(220,38,38,.1);
-   --ns-alert-warning-bg:#fffbeb;
-   --ns-alert-warning-border:#fed7aa;
-   --ns-alert-warning-text:#d97706;
-   --ns-alert-warning-icon:#d97706;
-   --ns-alert-warning-close-hover:rgba(217,119,6,.1);
-   --ns-alert-info-bg:#eff6ff;
-   --ns-alert-info-border:#bfdbfe;
-   --ns-alert-info-text:#257eeb;
-   --ns-alert-info-icon:#25a2eb;
-   --ns-alert-info-close-hover:rgba(37,99,235,.1);
-   --ns-alert-success-bg:#f0fdf4;
-   --ns-alert-success-border:#bbf7d0;
-   --ns-alert-success-text:#16a34a;
-   --ns-alert-success-icon:#16a34a;
-   --ns-alert-success-close-hover:rgba(22,163,74,.1);
+  --ns-alert-error-bg:#fef2f2;
+  --ns-alert-error-border:#fecaca;
+  --ns-alert-error-text:#dc2626;
+  --ns-alert-error-icon:#dc2626;
+  --ns-alert-error-close-hover:rgba(220,38,38,.1);
+  --ns-alert-warning-bg:#fffbeb;
+  --ns-alert-warning-border:#fed7aa;
+  --ns-alert-warning-text:#d97706;
+  --ns-alert-warning-icon:#d97706;
+  --ns-alert-warning-close-hover:rgba(217,119,6,.1);
+  --ns-alert-info-bg:#eff6ff;
+  --ns-alert-info-border:#bfdbfe;
+  --ns-alert-info-text:#257eeb;
+  --ns-alert-info-icon:#25a2eb;
+  --ns-alert-info-close-hover:rgba(37,99,235,.1);
+  --ns-alert-success-bg:#f0fdf4;
+  --ns-alert-success-border:#bbf7d0;
+  --ns-alert-success-text:#16a34a;
+  --ns-alert-success-icon:#16a34a;
+  --ns-alert-success-close-hover:rgba(22,163,74,.1);
 }
 [data-theme=dark]{
   --ns-color-bg:#0b0f19;
@@ -316,6 +316,9 @@
   --ns-alert-success-icon:#86efac;
   --ns-alert-success-close-hover:rgba(134,239,172,.1);
 }
+html{
+  background-color:#f5f4f5 !important;
+}
 .ns-reset{
   color:var(--ns-color-fg);
   font-family:var(--ns-font-family);
@@ -329,6 +332,250 @@
   background-color:var(--ns-color-fg);
   border-radius:4px;
 }
+.ns-body{
+  background:var(--bg);
+  display:flex;
+  flex:1;
+  min-height:calc(100vh - 60px);
+}
+.ns-main{
+  flex:1;
+  padding:1px 20px;
+}
+.ns-page{
+  display:grid;
+  gap:24px;
+  grid-template-columns:400px 1fr;
+}
+.ns-left{
+  align-self:start;
+  margin-top:20px;
+}
+.ns-right{
+  background-color:#fff;
+  border-radius:12px;
+  box-shadow:0 4px 12px rgba(0,0,0,.08);
+  display:flex;
+  flex:1;
+  flex-direction:column;
+  height:100%;
+  margin:16px;
+  padding:20px;
+}
+.ns-header{
+  align-items:center;
+  border-bottom:1px solid var(--border);
+  display:flex;
+  justify-content:space-between;
+  margin-bottom:16px;
+  padding-bottom:12px;
+}
+.ns-tabs{
+  display:flex;
+  font-weight:500;
+  gap:16px;
+}
+.ns-actions-buttons{
+  display:flex;
+  gap:12px;
+  padding:0 18px;
+  width:-moz-fit-content;
+  width:fit-content;
+}
+.ns-tabs span{
+  border-radius:6px;
+  color:var(--muted);
+  cursor:pointer;
+  display:flex;
+  gap:6px;
+  padding:6px 10px;
+  transition:all .2s ease;
+}
+.ns-tabs span.active{
+  background:#f8f8f9;
+  border-radius:8px;
+  color:#fff;
+  padding:4px 12px;
+  transition:background .2s,color .2s;
+}
+.ns-tabs span:hover{
+  background:var(--bg);
+  color:var(--primary);
+}
+.ns-tabs .count{
+  background:#f0f0f0;
+  border-radius:10px;
+  font-size:12px;
+  margin-left:6px;
+  padding:2px 6px;
+}
+.ns-search button{
+  background:var(--bg);
+  border:none;
+  border-radius:6px;
+  box-shadow:0 2px 6px rgba(0,0,0,.08);
+  cursor:pointer;
+  font-size:14px;
+  padding:6px 10px;
+  transition:transform .2s ease,box-shadow .2s ease;
+}
+.ns-search button:hover{
+  box-shadow:0 4px 12px rgba(0,0,0,.12);
+  transform:translateY(-2px);
+}
+.ns-right-column{
+  display:flex;
+  flex:1;
+  flex-direction:column;
+  gap:16px;
+  min-width:0;
+}
+.ns-ens-grid{
+  display:grid;
+  gap:16px;
+  grid-template-columns:repeat(auto-fill, minmax(170px, 1fr));
+}
+.ns-searchbar{
+  border-radius:8px;
+  padding:6px 10px;
+}
+.ns-sidebar{
+  align-items:center;
+  background-color:#fff;
+  border-radius:10px;
+  border-right:1px solid var(--border);
+  box-shadow:0 2px 8px rgba(0,0,0,.08);
+
+  display:flex;
+  flex-direction:column;
+  height:70vh;
+
+  overflow-y:auto;
+  padding:12px 8px;
+  position:sticky;
+  scrollbar-width:thin;
+  top:0;
+  width:60px;
+}
+.ns-sidebar::-webkit-scrollbar{
+  width:4px;
+}
+.ns-sidebar::-webkit-scrollbar-thumb{
+  background:rgba(0,0,0,.2);
+  border-radius:4px;
+}
+.ns-menu{
+  display:flex;
+  flex-direction:column;
+  gap:16px;
+  margin-top:20px;
+}
+.ns-menu span{
+  align-items:center;
+  border-radius:10px;
+  color:var(--muted);
+  cursor:pointer;
+  display:flex;
+  font-size:22px;
+  justify-content:center;
+  padding:10px;
+  transition:all .25s ease-in-out;
+}
+.ns-menu span:hover{
+  background:rgba(37,99,235,.08);
+  box-shadow:0 2px 6px rgba(0,0,0,.1);
+  transform:translateY(-2px);
+}
+.ns-menu .active{
+  background:rgba(37,99,235,.12);
+  box-shadow:0 2px 8px rgba(37,99,235,.2);
+  color:var(--primary);
+  font-weight:600;
+}
+.ns-navbar{
+  background-color:#fff;
+  border-bottom:1px solid var(--border);
+  border-radius:var(--ns-radius-md);
+  box-shadow:0 2px 6px rgba(0,0,0,.05);
+  justify-content:space-between;
+  margin-left:20px;
+  padding:12px 20px;
+  position:sticky;
+  top:0;
+  width:calc(100% - 100px);
+  z-index:50;
+}
+.ns-navbar,.ns-navbar-left{
+  align-items:center;
+  display:flex;
+}
+.ns-navbar-left{
+  gap:16px;
+  width:30%;
+}
+.ns-logo{
+  background:#000;
+  border-radius:20%;
+  box-shadow:0 2px 6px rgba(0,0,0,.15);
+  color:#fff;
+  font-size:20px;
+  font-weight:700;
+  padding:8px 14px;
+}
+.ns-searchbar{
+  border:1px solid var(--border);
+  border-radius:10px;
+  font-size:14px;
+  padding:6px 12px;
+  transition:all .2s ease-in-out;
+  width:220px;
+}
+.ns-searchbar:focus{
+  border-color:#2563eb;
+  box-shadow:0 0 0 3px rgba(37,99,235,.15);
+  outline:none;
+}
+.ns-navbar-right{
+  align-items:center;
+  display:flex;
+  gap:16px;
+}
+.ns-network{
+  background:var(--bg);
+  border-radius:10px;
+  cursor:pointer;
+  font-weight:600;
+  padding:6px 12px;
+  transition:all .2s ease-in-out;
+}
+.ns-network:hover{
+  background:rgba(37,99,235,.08);
+  box-shadow:0 2px 6px rgba(37,99,235,.1);
+  color:#2563eb;
+}
+.ns-profile{
+  align-items:center;
+  border-radius:10px;
+  cursor:pointer;
+  display:flex;
+  font-weight:500;
+  gap:8px;
+  padding:6px 10px;
+  transition:all .2s ease-in-out;
+}
+.ns-profile:hover{
+  background:rgba(0,0,0,.05);
+  box-shadow:0 2px 6px rgba(0,0,0,.08);
+}
+.ns-navbar-profile-avatar{
+  border-radius:50%;
+  box-shadow:0 2px 6px rgba(0,0,0,.15);
+  height:32px;
+  -o-object-fit:cover;
+     object-fit:cover;
+  width:32px;
+}
+
 .ns-btn{
   --btn-bg:var(--ns-color-primary);
   --btn-fg:var(--ns-color-primary-contrast);
@@ -903,306 +1150,110 @@
     max-width:250px;
     padding:6px 10px;
   }
-  
+
   .ns-tooltip__arrow{
     border-width:5px;
   }
 }
 
-.ns-pending-tx{
-  align-items:center;
-  box-shadow:var(--ns-shadow);
-  display:flex;
-  flex-direction:column;
-  margin:0 auto;
-  max-width:400px;
+.card{
+  background:#fff;
+  border:1px solid #e5e7eb;
+  border-radius:16px;
+  box-shadow:0 2px 6px rgba(0,0,0,.08);
   overflow:hidden;
-  padding:24px;
-  position:relative;
-  text-align:center;
 }
 
-.ns-pending-tx:before{
-  background:linear-gradient(90deg, var(--ns-color-primary), var(--ns-color-muted));
-  border-radius:var(--ns-radius-lg) var(--ns-radius-lg) 0 0;
-  content:"";
-  height:4px;
-  left:0;
-  position:absolute;
-  right:0;
-  top:0;
+.ns-card{
+  background:var(--ns-color-bg);
+  border:1px solid var(--ns-color-border);
+  border-radius:var(--ns-radius-md);
+  box-shadow:var(--ns-shadow);
+  transition:background .2s ease,border .2s ease;
 }
 
-.ns-pending-tx--in-progress:before{
-  animation:progress-shimmer 2s ease-in-out infinite;
-  background:linear-gradient(90deg, #3b82f6, #1d4ed8);
+.ns-dropdown{
+  display:inline-block;
+  position:relative;
 }
 
-.ns-pending-tx--completed:before{
-  background:linear-gradient(90deg, var(--ns-alert-success-text), #16a34a);
+.ns-dropdown__trigger{
+  cursor:pointer;
+  -webkit-user-select:none;
+     -moz-user-select:none;
+          user-select:none;
 }
 
-.ns-pending-tx--failed:before{
-  background:linear-gradient(90deg, var(--ns-alert-error-text), #dc2626);
+.ns-dropdown__trigger:focus-visible{
+  outline:2px solid var(--ns-color-primary);
+  outline-offset:2px;
 }
 
-@keyframes progress-shimmer{
-  0%{
-    background-position:-200% 0;
-  }
-  to{
-    background-position:200% 0;
-  }
+.ns-dropdown__menu{
+  animation:ns-dropdown-fade-in .2s cubic-bezier(.4, 0, .2, 1);
+
+  background:var(--ns-color-bg);
+  border:1px solid var(--ns-color-border);
+  border-radius:var(--ns-radius-md);
+  box-shadow:var(--ns-shadow);
+  box-sizing:border-box;
+  position:absolute;
+  transform-origin:top center;
+
+  width:-moz-max-content;
+
+  width:max-content;
+  z-index:1000;
 }
 
-.ns-pending-tx__content{
-  align-items:center;
-  display:flex;
-  flex-direction:column;
-  gap:16px;
-  width:100%;
+.ns-dropdown--align-start{
+  left:0;
+  right:auto;
 }
 
-.ns-pending-tx__status{
-  align-items:center;
-  display:flex;
-  font-size:16px;
-  font-weight:500;
-  gap:12px;
+.ns-dropdown--align-center{
+  left:50%;
+  right:auto;
+  transform:translateX(-50%);
 }
 
-.ns-pending-tx__icon{
-  align-items:center;
-  border-radius:50%;
-  display:flex;
-  height:48px;
-  justify-content:center;
-  position:relative;
-  width:48px;
+.ns-dropdown--align-end{
+  left:auto;
+  right:0;
 }
 
-.ns-pending-tx__icon--in-progress{
-  animation:pulse 2s ease-in-out infinite;
-  background:rgba(59,130,246,.1);
-  color:#3b82f6;
+.ns-dropdown--bottom{
+  margin-top:.25rem;
+  top:100%;
+  transform-origin:top center;
 }
 
-.ns-pending-tx__icon--completed{
-  animation:success-bounce .6s ease-out;
-  background:rgba(22,163,74,.1);
-  color:var(--ns-alert-success-text);
+.ns-dropdown--top{
+  bottom:100%;
+  margin-bottom:.25rem;
+  transform-origin:bottom center;
 }
 
-.ns-pending-tx__icon--failed{
-  animation:error-shake .5s ease-in-out;
-  background:rgba(220,38,38,.1);
-  color:var(--ns-alert-error-text);
+.ns-dropdown--left{
+  margin-right:.25rem;
+  right:100%;
+  transform-origin:right center;
 }
 
-@keyframes pulse{
-  0%,to{
-    opacity:1;
-    transform:scale(1);
-  }
-  50%{
-    opacity:.8;
-    transform:scale(1.05);
-  }
+.ns-dropdown--right{
+  left:100%;
+  margin-left:.25rem;
+  transform-origin:left center;
 }
 
-@keyframes success-bounce{
+@keyframes ns-dropdown-fade-in{
   0%{
-    transform:scale(.3);
-  }
-  50%{
-    transform:scale(1.1);
+    opacity:0;
+    transform:scale(.95) translateY(-8px);
   }
   to{
-    transform:scale(1);
-  }
-}
-
-@keyframes error-shake{
-  0%,to{
-    transform:translateX(0);
-  }
-  25%{
-    transform:translateX(-5px);
-  }
-  75%{
-    transform:translateX(5px);
-  }
-}
-
-.ns-pending-tx__spinner{
-  animation:spin 1s linear infinite;
-  border:2px solid rgba(59,130,246,.2);
-  border-radius:50%;
-  border-top-color:#3b82f6;
-  height:24px;
-  width:24px;
-}
-
-@keyframes spin{
-  0%{
-    transform:rotate(0deg);
-  }
-  to{
-    transform:rotate(1turn);
-  }
-}
-
-.ns-pending-tx__message{
-  color:var(--ns-color-muted);
-  font-size:14px;
-  margin:0;
-}
-
-.ns-pending-tx__link{
-  align-items:center;
-  background:var(--ns-color-bg-accent);
-  border:1px solid var(--ns-color-border);
-  border-radius:var(--ns-radius-md);
-  color:var(--ns-color-fg);
-  display:inline-flex;
-  font-size:14px;
-  font-weight:500;
-  gap:8px;
-  padding:12px 20px;
-  text-decoration:none;
-  transition:all .2s ease;
-}
-
-.ns-pending-tx__link:hover{
-  background:var(--ns-color-bg-accent-hover);
-  box-shadow:0 4px 12px rgba(0,0,0,.1);
-  transform:translateY(-1px);
-}
-
-.ns-pending-tx__link:active{
-  transform:translateY(0);
-}
-
-.ns-pending-tx__link-icon{
-  transition:transform .2s ease;
-}
-
-.ns-pending-tx__link:hover .ns-pending-tx__link-icon{
-  transform:translateX(2px);
-}
-
-[data-theme=dark] .ns-pending-tx{
-  background:var(--ns-color-bg);
-  border-color:var(--ns-color-border);
-}
-
-[data-theme=dark] .ns-pending-tx__link{
-  background:var(--ns-color-bg-accent);
-  border-color:var(--ns-color-border);
-}
-
-[data-theme=dark] .ns-pending-tx__link:hover{
-  background:var(--ns-color-bg-accent-hover);
-}
-
-@media (max-width:480px){
-  .ns-pending-tx{
-    margin:0 16px;
-    padding:20px;
-  }
-  
-  .ns-pending-tx__status{
-    font-size:14px;
-  }
-  
-  .ns-pending-tx__icon{
-    height:40px;
-    width:40px;
-  }
-}
-
-.ns-dropdown{
-  display:inline-block;
-  position:relative;
-}
-
-.ns-dropdown__trigger{
-  cursor:pointer;
-  -webkit-user-select:none;
-     -moz-user-select:none;
-          user-select:none;
-}
-
-.ns-dropdown__trigger:focus-visible{
-  outline:2px solid var(--ns-color-primary);
-  outline-offset:2px;
-}
-
-.ns-dropdown__menu{
-  animation:ns-dropdown-fade-in .2s cubic-bezier(.4, 0, .2, 1);
-
-  background:var(--ns-color-bg);
-  border:1px solid var(--ns-color-border);
-  border-radius:var(--ns-radius-md);
-  box-shadow:var(--ns-shadow);
-  box-sizing:border-box;
-  position:absolute;
-  transform-origin:top center;
-
-  width:-moz-max-content;
-
-  width:max-content;
-  z-index:1000;
-}
-
-.ns-dropdown--align-start{
-  left:0;
-  right:auto;
-}
-
-.ns-dropdown--align-center{
-  left:50%;
-  right:auto;
-  transform:translateX(-50%);
-}
-
-.ns-dropdown--align-end{
-  left:auto;
-  right:0;
-}
-
-.ns-dropdown--bottom{
-  margin-top:.25rem;
-  top:100%;
-  transform-origin:top center;
-}
-
-.ns-dropdown--top{
-  bottom:100%;
-  margin-bottom:.25rem;
-  transform-origin:bottom center;
-}
-
-.ns-dropdown--left{
-  margin-right:.25rem;
-  right:100%;
-  transform-origin:right center;
-}
-
-.ns-dropdown--right{
-  left:100%;
-  margin-left:.25rem;
-  transform-origin:left center;
-}
-
-@keyframes ns-dropdown-fade-in{
-  0%{
-    opacity:0;
-    transform:scale(.95) translateY(-8px);
-  }
-  to{
-    opacity:1;
-    transform:scale(1) translateY(0);
+    opacity:1;
+    transform:scale(1) translateY(0);
   }
 }
 
@@ -1325,11 +1376,11 @@
     font-size:13px;
     padding:10px 12px;
   }
-  
+
   .ns-alert-content{
     gap:10px;
   }
-  
+
   .ns-alert-icon{
     margin-top:1px;
   }
@@ -1355,11 +1406,17 @@
   width:100%;
 }
 
-.ns-modal--sm{ max-width:420px; }
+.ns-modal--sm{
+  max-width:420px;
+}
 
-.ns-modal--md{ max-width:640px; }
+.ns-modal--md{
+  max-width:640px;
+}
 
-.ns-modal--lg{ max-width:920px; }
+.ns-modal--lg{
+  max-width:920px;
+}
 
 .ns-modal__header{
   align-items:center;
@@ -1369,7 +1426,9 @@
   padding:16px 20px;
 }
 
-.ns-modal__title{ margin-right:12px; }
+.ns-modal__title{
+  margin-right:12px;
+}
 
 .ns-modal__close{
   -webkit-appearance:none;
@@ -1383,7 +1442,9 @@
   opacity:.7;
 }
 
-.ns-modal__close:hover{ opacity:1; }
+.ns-modal__close:hover{
+  opacity:1;
+}
 
 .ns-modal__body{
   overflow:auto;
@@ -1399,7 +1460,116 @@
   padding:14px 20px;
 }
 
+.ns-profile-header{
+  align-items:center;
+  background:var(--ns-color-bg);
+  border:1px solid var(--ns-color-border);
+  border-radius:var(--ns-radius-lg);
+  box-shadow:var(--ns-shadow);
+  display:flex;
+  flex-direction:column;
+  overflow:hidden;
+  text-align:center;
+}
+
+.ns-profile-header__banner{
+  height:140px;
+  overflow:hidden;
+  width:100%;
+}
+
+.ns-profile-header__banner img{
+  height:100%;
+  -o-object-fit:cover;
+     object-fit:cover;
+  width:100%;
+}
+
+.ns-profile-header__avatar{
+  margin-top:-50px;
+  position:relative;
+}
+
+.ns-avatar-img{
+  border:4px solid var(--ns-color-bg);
+  border-radius:50%;
+  height:100px;
+  -o-object-fit:cover;
+     object-fit:cover;
+  width:100px;
+}
+
+.ns-profile-header__chain{
+  background:var(--ns-color-bg);
+  border-radius:50%;
+  bottom:0;
+  box-shadow:var(--ns-shadow);
+  padding:4px;
+  position:absolute;
+  right:0;
+}
+
+.ns-profile-header__chain img{
+  height:20px;
+  width:20px;
+}
+
+.ns-profile-header__info{
+  padding:12px;
+}
+
+.ns-profile-header__username{
+  color:var(--ns-color-muted);
+  font-size:.85rem;
+  margin-bottom:4px;
+}
+
+.ns-profile-header__name{
+  color:var(--ns-color-fg);
+  font-size:1.4rem;
+  font-weight:600;
+  margin:0;
+}
+
+.ns-profile-header__primary{
+  background:var(--ns-color-bg-accent);
+  border-radius:var(--ns-radius-sm);
+  color:var(--ns-color-fg);
+  display:inline-block;
+  font-size:.75rem;
+  margin-top:6px;
+  padding:2px 8px;
+}
+
+.ns-profile-header__bio{
+  color:var(--ns-color-muted);
+  font-size:.9rem;
+  margin:8px 0;
+}
+
+.ns-profile-header__stats{
+  align-items:center;
+  color:var(--ns-color-fg);
+  display:flex;
+  font-size:.85rem;
+  gap:6px;
+  margin-top:10px;
+}
+
+.ns-profile-header__follow{
+  background:var(--ns-color-primary);
+  border:none;
+  border-radius:var(--ns-radius-md);
+  color:var(--ns-color-primary-contrast);
+  cursor:pointer;
+  font-size:.85rem;
+  margin-left:8px;
+  padding:4px 12px;
+}
 
+.ns-profile-header__follow:hover{
+  background:var(--ns-color-fg);
+}
 
 .ns-select-records-form{
   background-color:var(--ns-color-bg-accent);
@@ -1528,6 +1698,7 @@
     width:100%;
   }
 }
+
 .ns-image-records{
   position:relative;
   z-index:15;
@@ -1627,16 +1798,610 @@
   opacity:1;
 }
 
-.ns-edit-records-form{
-  background-color:var(--ns-color-bg-accent);
-  width:500px;
-}
+.ns-pending-tx{
+  align-items:center;
+  box-shadow:var(--ns-shadow);
+  display:flex;
+  flex-direction:column;
+  margin:0 auto;
+  max-width:400px;
+  overflow:hidden;
+  padding:24px;
+  position:relative;
+  text-align:center;
+}
+
+.ns-pending-tx:before{
+  background:linear-gradient(
+    90deg,
+    var(--ns-color-primary),
+    var(--ns-color-muted)
+  );
+  border-radius:var(--ns-radius-lg) var(--ns-radius-lg) 0 0;
+  content:"";
+  height:4px;
+  left:0;
+  position:absolute;
+  right:0;
+  top:0;
+}
+
+.ns-pending-tx--in-progress:before{
+  animation:progress-shimmer 2s ease-in-out infinite;
+  background:linear-gradient(90deg, #3b82f6, #1d4ed8);
+}
+
+.ns-pending-tx--completed:before{
+  background:linear-gradient(90deg, var(--ns-alert-success-text), #16a34a);
+}
+
+.ns-pending-tx--failed:before{
+  background:linear-gradient(90deg, var(--ns-alert-error-text), #dc2626);
+}
+
+@keyframes progress-shimmer{
+  0%{
+    background-position:-200% 0;
+  }
+  to{
+    background-position:200% 0;
+  }
+}
+
+.ns-pending-tx__content{
+  align-items:center;
+  display:flex;
+  flex-direction:column;
+  gap:16px;
+  width:100%;
+}
+
+.ns-pending-tx__status{
+  align-items:center;
+  display:flex;
+  font-size:16px;
+  font-weight:500;
+  gap:12px;
+}
+
+.ns-pending-tx__icon{
+  align-items:center;
+  border-radius:50%;
+  display:flex;
+  height:48px;
+  justify-content:center;
+  position:relative;
+  width:48px;
+}
+
+.ns-pending-tx__icon--in-progress{
+  animation:pulse 2s ease-in-out infinite;
+  background:rgba(59,130,246,.1);
+  color:#3b82f6;
+}
+
+.ns-pending-tx__icon--completed{
+  animation:success-bounce .6s ease-out;
+  background:rgba(22,163,74,.1);
+  color:var(--ns-alert-success-text);
+}
+
+.ns-pending-tx__icon--failed{
+  animation:error-shake .5s ease-in-out;
+  background:rgba(220,38,38,.1);
+  color:var(--ns-alert-error-text);
+}
+
+@keyframes pulse{
+  0%,to{
+    opacity:1;
+    transform:scale(1);
+  }
+  50%{
+    opacity:.8;
+    transform:scale(1.05);
+  }
+}
+
+@keyframes success-bounce{
+  0%{
+    transform:scale(.3);
+  }
+  50%{
+    transform:scale(1.1);
+  }
+  to{
+    transform:scale(1);
+  }
+}
+
+@keyframes error-shake{
+  0%,to{
+    transform:translateX(0);
+  }
+  25%{
+    transform:translateX(-5px);
+  }
+  75%{
+    transform:translateX(5px);
+  }
+}
+
+.ns-pending-tx__spinner{
+  animation:spin 1s linear infinite;
+  border:2px solid rgba(59,130,246,.2);
+  border-radius:50%;
+  border-top-color:#3b82f6;
+  height:24px;
+  width:24px;
+}
+
+@keyframes spin{
+  0%{
+    transform:rotate(0deg);
+  }
+  to{
+    transform:rotate(1turn);
+  }
+}
+
+.ns-pending-tx__message{
+  color:var(--ns-color-muted);
+  font-size:14px;
+  margin:0;
+}
+
+.ns-pending-tx__link{
+  align-items:center;
+  background:var(--ns-color-bg-accent);
+  border:1px solid var(--ns-color-border);
+  border-radius:var(--ns-radius-md);
+  color:var(--ns-color-fg);
+  display:inline-flex;
+  font-size:14px;
+  font-weight:500;
+  gap:8px;
+  padding:12px 20px;
+  text-decoration:none;
+  transition:all .2s ease;
+}
+
+.ns-pending-tx__link:hover{
+  background:var(--ns-color-bg-accent-hover);
+  box-shadow:0 4px 12px rgba(0,0,0,.1);
+  transform:translateY(-1px);
+}
+
+.ns-pending-tx__link:active{
+  transform:translateY(0);
+}
+
+.ns-pending-tx__link-icon{
+  transition:transform .2s ease;
+}
+
+.ns-pending-tx__link:hover .ns-pending-tx__link-icon{
+  transform:translateX(2px);
+}
+
+[data-theme=dark] .ns-pending-tx{
+  background:var(--ns-color-bg);
+  border-color:var(--ns-color-border);
+}
+
+[data-theme=dark] .ns-pending-tx__link{
+  background:var(--ns-color-bg-accent);
+  border-color:var(--ns-color-border);
+}
+
+[data-theme=dark] .ns-pending-tx__link:hover{
+  background:var(--ns-color-bg-accent-hover);
+}
+
+@media (max-width:480px){
+  .ns-pending-tx{
+    margin:0 16px;
+    padding:20px;
+  }
+
+  .ns-pending-tx__status{
+    font-size:14px;
+  }
+
+  .ns-pending-tx__icon{
+    height:40px;
+    width:40px;
+  }
+}
+
+.ens-name-card{
+  background:var(--ns-color-bg);
+  border:1px solid var(--ns-color-border);
+  border-radius:var(--ns-radius-md);
+  box-shadow:var(--ns-shadow);
+  cursor:pointer;
+  display:flex;
+  flex-direction:column;
+  overflow:hidden;
+  transition:transform .2s ease,box-shadow .2s ease;
+}
+
+.ens-name-card:hover{
+  box-shadow:0 4px 12px rgba(0,0,0,.08);
+  transform:translateY(-3px);
+}
+
+.ens-card-image-container{
+  height:180px;
+  overflow:hidden;
+  position:relative;
+  width:100%;
+}
+
+.ens-card-image{
+  background:var(--ns-color-bg-accent);
+  height:100%;
+  -o-object-fit:cover;
+     object-fit:cover;
+  width:100%;
+}
+
+.ens-card-badge{
+  border-radius:50%;
+  box-shadow:var(--ns-shadow);
+  padding:1px;
+  position:absolute;
+  right:8px;
+  top:8px;
+}
+
+.ens-card-badge-icon{
+  height:18px;
+  width:18px;
+}
+
+.ens-card-body{
+  display:flex;
+  flex-direction:column;
+  gap:6px;
+  padding:10px 12px;
+}
+
+.ens-card-title{
+  color:var(--ns-color-fg);
+  font-size:1.2rem;
+  font-weight:700;
+}
+
+.ens-card-expiry{
+  align-items:center;
+  color:var(--ns-color-muted);
+  display:flex;
+  font-size:.9rem;
+  gap:4px;
+}
+
+.ens-expiry-icon{
+  stroke-width:1.8;
+}
+
+.ens-expiry-text{
+  line-height:1;
+}
+
+.ns-profile-card{
+  display:flex;
+  flex-direction:column;
+  gap:16px;
+}
+
+.ns-profile-info,.ns-profile-section{
+  background:#fff;
+  border-radius:12px;
+  box-shadow:0 1px 4px rgba(0,0,0,.05);
+  padding:16px;
+}
+
+.ns-profile-section{
+  display:flex;
+  flex-wrap:wrap;
+  gap:8px;
+}
+
+.ns-address-box{
+  align-items:center;
+  background:#f9f9f9;
+  border:1px solid #ddd;
+  border-radius:8px;
+  display:flex;
+  padding:6px 10px;
+}
+
+.ns-address-text{
+  color:#333;
+  font-size:14px;
+  margin-right:8px;
+}
+
+.ns-profile-banner{
+  background:#eaeaea;
+  height:150px;
+  position:relative;
+}
+
+.ns-profile-banner img{
+  height:100%;
+  -o-object-fit:cover;
+     object-fit:cover;
+  width:100%;
+}
+
+.ns-profile-avatar{
+  bottom:-40px;
+  left:50%;
+  position:absolute;
+  transform:translateX(-50%);
+}
+
+.ns-profile-avatar img{
+  border:6px solid #fff;
+  border-radius:20%;
+  box-shadow:0 2px 8px rgba(0,0,0,.2);
+  height:100px;
+  width:100px;
+}
+
+.ns-avatar-badge{
+  align-items:center;
+  background:#fff;
+  border-radius:50%;
+  box-shadow:0 1px 3px rgba(0,0,0,.1);
+  display:flex;
+  justify-content:center;
+  overflow:hidden;
+  position:absolute;
+  right:-10px;
+  top:-10px;
+}
+
+.ns-avatar-badge,.ns-avatar-badge-icon{
+  height:10px;
+  width:10px;
+}
+
+.ns-profile-body{
+  padding:60px 16px 20px;
+  text-align:center;
+}
+
+.ns-profile-tag{
+  background:#f3f3f3;
+  border-radius:12px;
+  font-size:12px;
+  font-weight:500;
+  padding:4px 10px;
+}
+
+.ns-username-container{
+  align-items:center;
+  display:flex;
+  gap:8px;
+  justify-content:center;
+  margin:8px 0 4px;
+}
+
+.ns-profile-username{
+  font-size:20px;
+  font-weight:600;
+  margin:0;
+}
+
+.ns-edit-btn{
+  background:none;
+  border:none;
+  color:#555;
+  cursor:pointer;
+}
 
-@media screen and (max-width:600px){
-  .ns-edit-records-form{
-    width:100%;
-  }
+.ns-profile-bio{
+  margin-bottom:12px;
+}
+
+.ns-profile-socials{
+  display:flex;
+  gap:10px;
+  justify-content:center;
+  margin-bottom:12px;
+}
+
+.ns-profile-socials button{
+  background:#fff;
+  border:1px solid #ccc;
+  border-radius:8px;
+  box-shadow:0 1px 3px rgba(0,0,0,.05);
+  height:36px;
+  width:36px;
+}
+
+.ns-copy-btn,.ns-profile-socials button,.ns-social-btn{
+  align-items:center;
+  color:#555;
+  cursor:pointer;
+  display:flex;
+  justify-content:center;
+  padding:6px;
+}
+
+.ns-copy-btn,.ns-social-btn{
+  background:#f3f3f3;
+  border:none;
+  border-radius:8px;
+  box-shadow:none;
+}
+
+.ns-profile-stats{
+  flex-direction:column;
+  gap:10px;
+  margin:14px 0;
+}
+
+.ns-profile-stats,.ns-stats-row{
+  align-items:center;
+  display:flex;
+}
+
+.ns-stats-row{
+  color:#374151;
+  gap:6px;
+  justify-items:center;
+}
+
+.ns-stats-row span{
+  color:#111827;
+  font-size:small;
+  font-weight:600;
+}
+
+.ns-follow-btn{
+  background:#2563eb;
+  border:none;
+  border-radius:8px;
+  color:#fff;
+  cursor:pointer;
+  font-size:10px;
+  font-weight:500;
+  padding:7px 18px;
+  transition:background .2s;
+}
+
+.ns-follow-btn:hover{
+  background:#1d4ed8;
+}
+
+.ns-profile-extra{
+  background:transparent;
+  border-radius:12px;
+  display:flex;
+  flex-wrap:wrap;
+  gap:8px;
+  padding:2px;
+}
+
+.ns-extra-item{
+  background:#eef2ff;
+  border-radius:8px;
+  color:#2563eb;
+  font-size:13px;
+  font-weight:500;
+  gap:6px;
+  padding:8px 14px;
+}
+
+.ns-extra-item,.ns-extra-text{
+  align-items:center;
+  display:flex;
+}
+
+.ns-extra-text{
+  font-weight:400;
+  gap:4px;
+}
+
+.ns-extra-btn{
+  background:transparent;
+  border:none;
+  color:#2563eb;
+  cursor:pointer;
+}
+
+.ns-extra-btn,.ns-extra-item span{
+  align-items:center;
+  display:flex;
+}
+
+.ns-extra-item span{
+  gap:4px;
+}
+
+.ns-profile-extra a{
+  color:#2563eb;
+  text-decoration:none;
+}
+
+.ns-profile-footer{
+  align-items:center;
+  background:#fff;
+  border-radius:12px;
+  box-shadow:0 1px 4px rgba(0,0,0,.05);
+  padding:16px;
+}
+
+.ns-footer-item,.ns-profile-footer{
+  display:flex;
+  gap:8px;
+  justify-content:center;
+}
+
+.ns-footer-item{
+  text-align:center;
+  width:100%;
+}
+
+.ns-footer-label{
+  color:#111827;
+  font-size:18px;
+  font-weight:600;
+}
+
+.ns-footer-text{
+  color:#6b7280;
+  font-size:16px;
+}
+
+.ns-navbar-profile{
+  align-items:center;
+  background:#f8f9fa;
+  border-radius:12px;
+  box-shadow:0 2px 6px rgba(0,0,0,.06);
+  display:flex;
+  gap:10px;
+  padding:8px 12px;
+  transition:all .2s ease-in-out;
+}
+
+.ns-navbar-profile:hover{
+  box-shadow:0 4px 10px rgba(0,0,0,.08);
+}
+
+.ns-navbar-profile-avatar{
+  border-radius:10%;
+  height:36px;
+  -o-object-fit:cover;
+     object-fit:cover;
+  width:36px;
+}
+
+.ns-navbar-profile-info{
+  display:flex;
+  flex:1;
+  flex-direction:column;
+  min-width:0;
+}
+
+.ns-navbar-profile-action{
+  background:transparent;
+  border:none;
+  border-radius:8px;
+  color:#3b82f6;
+  cursor:pointer;
+  padding:6px;
+  transition:background .2s ease-in-out;
+}
+
+.ns-navbar-profile-action:hover{
+  background:rgba(59,130,246,.1);
 }
+
 :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;
@@ -1653,26 +2418,26 @@
   --ns-color-primary-contrast:#fff;
   --ns-color-border:#e5e7eb;
   --ns-shadow:0 1px 2px rgba(0,0,0,.04), 0 1px 1px rgba(0,0,0,.02);
-   --ns-alert-error-bg:#fef2f2;
-   --ns-alert-error-border:#fecaca;
-   --ns-alert-error-text:#dc2626;
-   --ns-alert-error-icon:#dc2626;
-   --ns-alert-error-close-hover:rgba(220,38,38,.1);
-   --ns-alert-warning-bg:#fffbeb;
-   --ns-alert-warning-border:#fed7aa;
-   --ns-alert-warning-text:#d97706;
-   --ns-alert-warning-icon:#d97706;
-   --ns-alert-warning-close-hover:rgba(217,119,6,.1);
-   --ns-alert-info-bg:#eff6ff;
-   --ns-alert-info-border:#bfdbfe;
-   --ns-alert-info-text:#257eeb;
-   --ns-alert-info-icon:#25a2eb;
-   --ns-alert-info-close-hover:rgba(37,99,235,.1);
-   --ns-alert-success-bg:#f0fdf4;
-   --ns-alert-success-border:#bbf7d0;
-   --ns-alert-success-text:#16a34a;
-   --ns-alert-success-icon:#16a34a;
-   --ns-alert-success-close-hover:rgba(22,163,74,.1);
+  --ns-alert-error-bg:#fef2f2;
+  --ns-alert-error-border:#fecaca;
+  --ns-alert-error-text:#dc2626;
+  --ns-alert-error-icon:#dc2626;
+  --ns-alert-error-close-hover:rgba(220,38,38,.1);
+  --ns-alert-warning-bg:#fffbeb;
+  --ns-alert-warning-border:#fed7aa;
+  --ns-alert-warning-text:#d97706;
+  --ns-alert-warning-icon:#d97706;
+  --ns-alert-warning-close-hover:rgba(217,119,6,.1);
+  --ns-alert-info-bg:#eff6ff;
+  --ns-alert-info-border:#bfdbfe;
+  --ns-alert-info-text:#257eeb;
+  --ns-alert-info-icon:#25a2eb;
+  --ns-alert-info-close-hover:rgba(37,99,235,.1);
+  --ns-alert-success-bg:#f0fdf4;
+  --ns-alert-success-border:#bbf7d0;
+  --ns-alert-success-text:#16a34a;
+  --ns-alert-success-icon:#16a34a;
+  --ns-alert-success-close-hover:rgba(22,163,74,.1);
 }
 
 [data-theme=dark]{
@@ -1705,6 +2470,10 @@
   --ns-alert-success-close-hover:rgba(134,239,172,.1);
 }
 
+html{
+  background-color:#f5f4f5 !important;
+}
+
 .ns-reset{
   color:var(--ns-color-fg);
   font-family:var(--ns-font-family);
@@ -1721,5 +2490,283 @@
   border-radius:4px;
 }
 
+.ns-body{
+  background:var(--bg);
+  display:flex;
+  flex:1;
+  min-height:calc(100vh - 60px);
+}
+
+.ns-main{
+  flex:1;
+  padding:1px 20px;
+}
+
+.ns-page{
+  display:grid;
+  gap:24px;
+  grid-template-columns:400px 1fr;
+}
+
+.ns-left{
+  align-self:start;
+  margin-top:20px;
+}
+
+.ns-right{
+  background-color:#fff;
+  border-radius:12px;
+  box-shadow:0 4px 12px rgba(0,0,0,.08);
+  display:flex;
+  flex:1;
+  flex-direction:column;
+  height:100%;
+  margin:16px;
+  padding:20px;
+}
+
+.ns-header{
+  align-items:center;
+  border-bottom:1px solid var(--border);
+  display:flex;
+  justify-content:space-between;
+  margin-bottom:16px;
+  padding-bottom:12px;
+}
+
+.ns-tabs{
+  display:flex;
+  font-weight:500;
+  gap:16px;
+}
+
+.ns-actions-buttons{
+  display:flex;
+  gap:12px;
+  padding:0 18px;
+  width:-moz-fit-content;
+  width:fit-content;
+}
+
+.ns-tabs span{
+  border-radius:6px;
+  color:var(--muted);
+  cursor:pointer;
+  display:flex;
+  gap:6px;
+  padding:6px 10px;
+  transition:all .2s ease;
+}
+
+.ns-tabs span.active{
+  background:#f8f8f9;
+  border-radius:8px;
+  color:#fff;
+  padding:4px 12px;
+  transition:background .2s,color .2s;
+}
+
+.ns-tabs span:hover{
+  background:var(--bg);
+  color:var(--primary);
+}
+
+.ns-tabs .count{
+  background:#f0f0f0;
+  border-radius:10px;
+  font-size:12px;
+  margin-left:6px;
+  padding:2px 6px;
+}
+
+.ns-search button{
+  background:var(--bg);
+  border:none;
+  border-radius:6px;
+  box-shadow:0 2px 6px rgba(0,0,0,.08);
+  cursor:pointer;
+  font-size:14px;
+  padding:6px 10px;
+  transition:transform .2s ease,box-shadow .2s ease;
+}
+
+.ns-search button:hover{
+  box-shadow:0 4px 12px rgba(0,0,0,.12);
+  transform:translateY(-2px);
+}
+
+.ns-right-column{
+  display:flex;
+  flex:1;
+  flex-direction:column;
+  gap:16px;
+  min-width:0;
+}
+
+.ns-ens-grid{
+  display:grid;
+  gap:16px;
+  grid-template-columns:repeat(auto-fill, minmax(170px, 1fr));
+}
+
+.ns-searchbar{
+  border-radius:8px;
+  padding:6px 10px;
+}
+
+.ns-sidebar{
+  align-items:center;
+  background-color:#fff;
+  border-radius:10px;
+  border-right:1px solid var(--border);
+  box-shadow:0 2px 8px rgba(0,0,0,.08);
+
+  display:flex;
+  flex-direction:column;
+  height:70vh;
+
+  overflow-y:auto;
+  padding:12px 8px;
+  position:sticky;
+  scrollbar-width:thin;
+  top:0;
+  width:60px;
+}
+
+.ns-sidebar::-webkit-scrollbar{
+  width:4px;
+}
+
+.ns-sidebar::-webkit-scrollbar-thumb{
+  background:rgba(0,0,0,.2);
+  border-radius:4px;
+}
+
+.ns-menu{
+  display:flex;
+  flex-direction:column;
+  gap:16px;
+  margin-top:20px;
+}
+
+.ns-menu span{
+  align-items:center;
+  border-radius:10px;
+  color:var(--muted);
+  cursor:pointer;
+  display:flex;
+  font-size:22px;
+  justify-content:center;
+  padding:10px;
+  transition:all .25s ease-in-out;
+}
+
+.ns-menu span:hover{
+  background:rgba(37,99,235,.08);
+  box-shadow:0 2px 6px rgba(0,0,0,.1);
+  transform:translateY(-2px);
+}
+
+.ns-menu .active{
+  background:rgba(37,99,235,.12);
+  box-shadow:0 2px 8px rgba(37,99,235,.2);
+  color:var(--primary);
+  font-weight:600;
+}
+
+.ns-navbar{
+  background-color:#fff;
+  border-bottom:1px solid var(--border);
+  border-radius:var(--ns-radius-md);
+  box-shadow:0 2px 6px rgba(0,0,0,.05);
+  justify-content:space-between;
+  margin-left:20px;
+  padding:12px 20px;
+  position:sticky;
+  top:0;
+  width:calc(100% - 100px);
+  z-index:50;
+}
+
+.ns-navbar,.ns-navbar-left{
+  align-items:center;
+  display:flex;
+}
+
+.ns-navbar-left{
+  gap:16px;
+  width:30%;
+}
+
+.ns-logo{
+  background:#000;
+  border-radius:20%;
+  box-shadow:0 2px 6px rgba(0,0,0,.15);
+  color:#fff;
+  font-size:20px;
+  font-weight:700;
+  padding:8px 14px;
+}
+
+.ns-searchbar{
+  border:1px solid var(--border);
+  border-radius:10px;
+  font-size:14px;
+  padding:6px 12px;
+  transition:all .2s ease-in-out;
+  width:220px;
+}
+
+.ns-searchbar:focus{
+  border-color:#2563eb;
+  box-shadow:0 0 0 3px rgba(37,99,235,.15);
+  outline:none;
+}
+
+.ns-navbar-right{
+  align-items:center;
+  display:flex;
+  gap:16px;
+}
+
+.ns-network{
+  background:var(--bg);
+  border-radius:10px;
+  cursor:pointer;
+  font-weight:600;
+  padding:6px 12px;
+  transition:all .2s ease-in-out;
+}
+
+.ns-network:hover{
+  background:rgba(37,99,235,.08);
+  box-shadow:0 2px 6px rgba(37,99,235,.1);
+  color:#2563eb;
+}
+
+.ns-profile{
+  align-items:center;
+  border-radius:10px;
+  cursor:pointer;
+  display:flex;
+  font-weight:500;
+  gap:8px;
+  padding:6px 10px;
+  transition:all .2s ease-in-out;
+}
+
+.ns-profile:hover{
+  background:rgba(0,0,0,.05);
+  box-shadow:0 2px 6px rgba(0,0,0,.08);
+}
+
+.ns-navbar-profile-avatar{
+  border-radius:50%;
+  box-shadow:0 2px 6px rgba(0,0,0,.15);
+  height:32px;
+  -o-object-fit:cover;
+     object-fit:cover;
+  width:32px;
+}
 
 /*# sourceMappingURL=index.css.map */