:root{
  --bg:#f7f8fb;
  --text:#0b1220;
  --muted:#e5e7eb;

  --card:rgba(255,255,255,.16);
  --stroke:rgba(255,255,255,.22);

  --accent:#7f0038;
  --accent2:#4b1d9b;
  --accent3:#b41f7a;

  --radius:18px;
  --radius-sm:12px;

  --shadow:0 12px 35px rgba(0,0,0,.28);
  --shadow-press:0 8px 20px rgba(0,0,0,.22);

  --ring:0 0 0 3px rgba(255,255,255,.18);

  --shimmer1:#00ffbf;
  --shimmer2:#ff4d6d;
  --shimmer3:#6c41ff;

  --danger:#b91c1c;
  --danger-bg:#fdecec;
  --danger-br:#f9c9cb;

  --info-bg:rgba(59,130,246,.18);
  --info-br:rgba(191,219,254,.35);

  --ok-bg:rgba(16,185,129,.18);
  --ok-br:rgba(110,231,183,.35);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  height:100vh;

  color:#fff;
  font-family:"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
}

    a{color:inherit;text-decoration:none}
    input,button,select,textarea{font-family:inherit}

    .wrap{
      max-width:540px;
      margin:32px auto;
      padding:0 16px 32px;
      position:relative;
    }

    .card{
      position:relative;
      background:rgb(4 0 3 / 60%);
      border:1px solid rgba(255,255,255,.18);
      border-radius:var(--radius);
      overflow:hidden;
      box-shadow:var(--shadow);
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
    }

    .card::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(rgba(255,255,255,.08), rgba(255,255,255,.08));
      opacity:.24;
      z-index:0;
      pointer-events:none;
    }

    .card > *{
      position:relative;
      z-index:1;
    }

    .head{
      padding:20px 18px;
      display:flex;
      align-items:center;
      gap:12px;
      background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
      border-bottom:1px solid rgba(255,255,255,.14);
    }

    .logo{
      width:54px;height:54px;border-radius:14px;
      position:relative; flex:0 0 auto;
      background:rgba(255,255,255,.18);
      display:flex;align-items:center;justify-content:center;
      box-shadow:var(--shadow);
      border:1px solid rgba(255,255,255,.18);
      overflow:hidden;
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
    }

    .logo::before{
      content:"";
      position:absolute;
      inset:-3px;
      border-radius:16px;
      padding:3px;
      pointer-events:none;
      background: linear-gradient(
        90deg,
        transparent 0%,
        var(--shimmer1) 18%,
        var(--shimmer2) 50%,
        var(--shimmer3) 82%,
        transparent 100%
      );
      background-size:300% 100%;
      animation:borderFlow 6s ease-in-out infinite;
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
              mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite:xor;
      mask-composite:exclude;
      box-shadow:0 0 14px rgba(108,65,255,.10), 0 0 12px rgba(255,77,109,.08);
    }

    .logo::after{
      content:"";
      position:absolute;
      inset:2px;
      border-radius:12px;
      pointer-events:none;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.20);
    }

    @keyframes borderFlow{
      0%{background-position:0% 50%}
      50%{background-position:100% 50%}
      100%{background-position:0% 50%}
    }

    .loader{
      position:absolute;
      width:2.5em;
      height:2.5em;
      transform: rotate(165deg) scale(.38);
    }

    .loader:before,
    .loader:after{
      content:"";
      position:absolute;
      top:50%;
      left:50%;
      display:block;
      width:.5em;
      height:.5em;
      border-radius:.25em;
      transform:translate(-50%,-50%);
    }

    .loader:before{ animation: before8 2s infinite; }
    .loader:after{ animation: after6 2s infinite; }

    @keyframes before8{
      0%{ width:.5em; box-shadow: 1em -.5em rgba(225,20,98,.75), -1em .5em rgba(111,202,220,.75) }
      35%{ width:2.5em; box-shadow: 0 -.5em rgba(225,20,98,.75), 0 .5em rgba(111,202,220,.75) }
      70%{ width:.5em; box-shadow: -1em -.5em rgba(225,20,98,.75), 1em .5em rgba(111,202,220,.75) }
      100%{ box-shadow: 1em -.5em rgba(225,20,98,.75), -1em .5em rgba(111,202,220,.75) }
    }

    @keyframes after6{
      0%{ height:.5em; box-shadow: .5em 1em rgba(61,184,143,.75), -.5em -1em rgba(233,169,32,.75) }
      35%{ height:2.5em; box-shadow: .5em 0 rgba(61,184,143,.75), -.5em 0 rgba(233,169,32,.75) }
      70%{ height:.5em; box-shadow: .5em -1em rgba(61,184,143,.75), -.5em 1em rgba(233,169,32,.75) }
      100%{ box-shadow: .5em 1em rgba(61,184,143,.75), -.5em -1em rgba(233,169,32,.75) }
    }

    h1{
      margin:0 0 4px;
      color:#fff;
    }

    .brand-title{
      display:flex;
      align-items:center;
      justify-content:flex-start;
      gap:8px;
      line-height:1.18;
      white-space:nowrap;
      max-width:100%;
      overflow:hidden;
    }

    .brand-title-ar{
      font-size:clamp(17px, 4vw, 20px);
      font-weight:900;
      letter-spacing:.01em;
      white-space:nowrap;
      flex:0 1 auto;
      min-width:0;
    }

    .brand-title-en{
      direction:ltr;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:max-content;
      padding:2px 9px 3px;
      border-radius:999px;
      background:rgba(255,255,255,.12);
      border:1px solid rgba(255,255,255,.16);
      color:#f5d0fe;
      font-size:clamp(10px, 2.4vw, 12px);
      font-weight:900;
      letter-spacing:.08em;
      white-space:nowrap;
      flex:0 0 auto;
      transform:translateY(1px);
    }

    .head > div:last-child{
      min-width:0;
      flex:1;
    }

    @media (max-width:380px){
      .brand-title{ gap:6px; }
      .brand-title-ar{ font-size:16px; }
      .brand-title-en{ font-size:9.5px; padding:2px 7px 3px; letter-spacing:.06em; }
      .sub{ font-size:12px; }
    }

    .sub{
      color:rgba(255,255,255,.82);
      font-size:13px;
    }

    .network-badge{
      margin:14px 16px 0;
      padding:15px 16px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.16);
      background:linear-gradient(135deg, rgba(59,130,246,.18), rgba(99,102,241,.16));
      color:#fff;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      box-shadow:0 10px 24px rgba(0,0,0,.16);
      backdrop-filter:blur(12px);
      -webkit-backdrop-filter:blur(12px);
      position:relative;
      overflow:hidden;
    }

    .network-badge::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
      transform:translateX(-100%);
      animation:networkShine 3.2s linear infinite;
      pointer-events:none;
    }

    .network-badge.ok{
      background:linear-gradient(135deg, rgba(16,185,129,.20), rgba(5,150,105,.16));
      border-color:rgba(110,231,183,.30);
    }

    .network-badge.warn{
      background:linear-gradient(135deg, rgba(245,158,11,.18), rgba(234,88,12,.16));
      border-color:rgba(253,186,116,.28);
    }

    @keyframes networkShine{
      100%{ transform:translateX(100%); }
    }

    .network-badge-main{
      display:flex;
      align-items:flex-start;
      gap:12px;
      min-width:0;
      flex:1;
      width:100%;
    }

    .network-badge-icon{
      width:46px;
      height:46px;
      border-radius:14px;
      display:flex;
      align-items:center;
      justify-content:center;
      flex:0 0 auto;
      font-size:21px;
      background:rgba(255,255,255,.14);
      border:1px solid rgba(255,255,255,.18);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
    }

    .network-badge-text{
      min-width:0;
      flex:1;
    }

    .network-badge-label{
      font-size:12px;
      font-weight:700;
      color:rgba(255,255,255,.78);
      margin-bottom:4px;
    }

    .network-badge-name{
      font-size:18px;
      font-weight:900;
      color:#fff;
      line-height:1.4;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .network-badge-id{
      direction:rtl;
      text-align:right;
      display:inline-flex;
      flex-direction:row;
      align-items:center;
      justify-content:flex-start;
      gap:7px;
      width:min(100%, 290px);
      max-width:100%;
      margin-top:10px;
      padding:9px 15px;
      border-radius:14px;
      background:linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.09));
      border:1px solid rgba(255,255,255,.24);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.12);
      white-space:nowrap;
    }

    .network-badge-id-label{
      font-size:11px;
      letter-spacing:0;
      opacity:.84;
      font-weight:800;
      flex:0 0 auto;
    }

    .network-badge-id-value{
      direction:ltr;
      unicode-bidi:embed;
      font-size:15px;
      line-height:1;
      font-weight:900;
      flex:0 0 auto;
    }

    .network-meta{
      display:none;
      margin:10px 16px 0;
      padding:14px 16px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(255,255,255,.08);
      color:#fff;
      line-height:1.8;
      box-shadow:0 8px 20px rgba(0,0,0,.12);
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
    }

    .network-meta .network-name{
      font-weight:900;
      font-size:16px;
      margin-bottom:6px;
      color:#ffffff;
      display:flex;
      align-items:center;
      gap:8px;
    }

    .network-meta .network-name::before{
      content:"🏷️";
      font-size:15px;
    }

    .network-meta .network-desc{
      color:rgba(255,255,255,.86);
      font-size:13px;
    }

    .network-action-wrap{
      display:none;
      margin:10px 16px 0;
    }

    .network-action-wrap .btn{
      width:100%;
    }

    .tabs{
      display:flex;
      gap:8px;
      padding:12px 12px;
      background:rgba(255,255,255,.05);
      border-bottom:1px solid rgba(255,255,255,.12);
      margin-top:12px;
    }

    .tabs button{
      flex:1;
      padding:10px 12px;
      border-radius:999px;
      cursor:pointer;
      border:1px solid rgba(255,255,255,.16);
      background:rgba(255,255,255,.08);
      color:#ffffff;
      font-size:13px;
      font-weight:700;
      transition:background .12s, color .12s, border-color .12s, transform .06s, box-shadow .16s;
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
    }

    .tabs button[aria-selected="true"]{
      background:linear-gradient(135deg, rgba(75,29,155,.92), rgba(180,31,122,.92));
      color:#fff;
      border-color:transparent;
      box-shadow:0 8px 18px rgba(75,29,155,.28);
      transform:translateY(-1px);
    }

    .body{
      padding:16px 16px 18px;
      background:rgba(255,255,255,.04);
    }

    .row{
      display:flex;
      gap:10px;
      margin-bottom:10px;
      align-items:center;
    }

    .field{
      position:relative;
      flex:1;
    }

    .field input{
      width:100%;
      padding:13px 42px 13px 12px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.16);
      background:rgba(255,255,255,.12);
      color:#ffffff;
      font-size:14px;
      outline:none;
      transition:border-color .12s, box-shadow .12s, background .12s, transform .12s;
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
    }

    .field input::placeholder{
      color:rgba(255,255,255,.72);
    }

    .field input:focus{
      border-color:rgba(255,255,255,.35);
      box-shadow:var(--ring);
      background:rgba(255,255,255,.16);
      transform:translateY(-1px);
    }

    .field .icon{
      position:absolute;
      inset-inline-end:10px;
      top:50%;
      transform:translateY(-50%);
      font-size:16px;
      color:rgba(255,255,255,.8);
      pointer-events:none;
    }

    .field .toggle{
      position:absolute;
      inset-inline-end:6px;
      top:50%;
      transform:translateY(-50%);
      font-size:12px;
      border:0;
      background:transparent;
      color:#ffffff;
      cursor:pointer;
      padding:6px 8px;
      border-radius:8px;
    }

    .field .toggle:hover{
      background:rgba(255,255,255,.12);
    }

    .btn{
      width:100%;
      padding:13px 14px;
      border-radius:999px;
      border:0;
      cursor:pointer;
      background:linear-gradient(135deg, var(--accent2), var(--accent3));
      color:#fff;
      font-weight:800;
      font-size:14px;
      box-shadow:0 12px 28px rgba(75,29,155,.28);
      transition:transform .06s, box-shadow .12s, opacity .12s, filter .12s;
    }

    .btn:hover{ filter:brightness(1.05) }

    .btn:active{
      transform:translateY(1px) scale(.99);
      box-shadow:0 8px 18px rgba(75,29,155,.28);
    }

    .btn:disabled{
      opacity:.65;
      cursor:not-allowed;
      box-shadow:none;
    }

    .note{
      margin-top:6px;
      color:rgba(255,255,255,.82);
      font-size:13px;
      min-height:1.5em;
    }

    .note.error{ color:#fecaca }
    .note.ok{ color:#bbf7d0 }

    .forgot-wrap{
      display:flex;
      justify-content:flex-start;
      margin-top:8px;
      margin-bottom:8px;
    }

    .forgot-link{
      color:#e9d5ff;
      font-size:13px;
      font-weight:700;
      padding:6px 2px;
      border-radius:8px;
      transition:color .12s, background .12s;
    }

    .forgot-link:hover{
      color:#ffffff;
      background:rgba(255,255,255,.08);
    }

    .foot{
      padding:12px 16px 16px;
      border-top:1px solid rgba(255,255,255,.12);
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:8px;
      background:rgba(255,255,255,.05);
    }

    .link{
      color:#ffffff;
      text-decoration:none;
      border:1px solid rgba(255,255,255,.16);
      padding:8px 12px;
      border-radius:999px;
      font-size:13px;
      display:inline-flex;
      align-items:center;
      gap:6px;
      background:rgba(255,255,255,.08);
      transition:border-color .12s, background .12s, color .12s, transform .06s, box-shadow .12s;
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
    }

    .link:hover{
      border-color:rgba(255,255,255,.28);
      background:rgba(255,255,255,.14);
      box-shadow:0 4px 10px rgba(0,0,0,.12);
    }

    .link:active{ transform:translateY(1px) }

    .field.invalid input{
      border-color:#fca5a5;
      box-shadow:0 0 0 3px rgba(252,165,165,.22);
    }

    /* ========== نافذة اختيار الشبكة - بتصميم زجاجي شفاف ========== */
    .dialog-backdrop{
      position:fixed;
      inset:0;
      background: rgba(0, 0, 0, 0.3);  /* شفاف وزجاجي بدلاً من الأسود الثقيل */
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      display:none;
      align-items:center;
      justify-content:center;
      padding:16px;
      z-index:1000;
      transition:all 0.25s ease;
    }

    .dialog-backdrop.show{
      display:flex;
      animation:fadeInScale 0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    }

    @keyframes fadeInScale{
      0%{ opacity:0; backdrop-filter:blur(0px); }
      100%{ opacity:1; backdrop-filter:blur(12px); }
    }

    /* نافذة الشبكات الجديدة - تصميم أنيق وقصير في البداية */
    .network-picker-dialog{
      width:min(560px, 92vw);
      border-radius:48px 48px 44px 44px;
      overflow:hidden;
      background:rgba(12, 10, 28, 0.92);
      backdrop-filter:blur(24px);
      -webkit-backdrop-filter:blur(24px);
      border:1px solid rgba(255,255,255,0.18);
      box-shadow:0 32px 70px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05) inset;
      transition:transform 0.2s ease;
    }

    .network-picker-hero{
      position:relative;
      padding:22px 24px 16px;
      background:linear-gradient(135deg, rgba(75,29,155,0.7) 0%, rgba(180,31,122,0.5) 100%);
      border-bottom:1px solid rgba(255,255,255,0.12);
    }

    .network-picker-top{
      display:flex;
      align-items:center;
      gap:14px;
      position:relative;
      z-index:1;
    }

    .network-picker-icon{
      width:58px;
      height:58px;
      border-radius:28px;
      display:flex;
      align-items:center;
      justify-content:center;
      background:linear-gradient(145deg, rgba(255,255,255,0.2), rgba(255,255,255,0.05));
      border:1px solid rgba(255,255,255,0.25);
      font-size:28px;
    }


    .network-picker-logo{
      width:58px;
      height:58px;
      border-radius:16px;
      flex:0 0 auto;
    }

    .network-picker-logo::before{
      border-radius:18px;
    }

    .network-picker-logo::after{
      border-radius:14px;
    }

    .network-picker-title{
      margin:0;
      font-size:24px;
      font-weight:900;
      background:linear-gradient(135deg, #FFF, #E2D4FF);
      background-clip:text;
      -webkit-background-clip:text;
      color:transparent;
    }

    .network-picker-subtitle{
      margin:4px 0 0;
      color:rgba(255,255,255,0.8);
      font-size:12.5px;
      line-height:1.4;
    }

    .network-picker-body{
      margin:12px 16px 16px;
      padding:0;
    }

    /* زر عرض القائمة */
    .toggle-list-btn{
      width:100%;
      background:linear-gradient(135deg, rgba(75,29,155,0.5), rgba(180,31,122,0.4));
      border:1px solid rgba(255,255,255,0.2);
      padding:14px 16px;
      border-radius:40px;
      color:white;
      font-weight:800;
      font-size:15px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      cursor:pointer;
      transition:all 0.2s;
      backdrop-filter:blur(10px);
    }

    .toggle-list-btn:hover{
      background:linear-gradient(135deg, #5a2a9f, #9b2f73);
      border-color:#ffb7e0;
      transform:scale(1.02);
    }

    .toggle-list-btn .arrow{
      transition:transform 0.25s;
      font-size:18px;
    }

    .toggle-list-btn.open .arrow{
      transform:rotate(180deg);
    }

    /* القسم القابل للطي */
    .collapsible-section{
      max-height:0;
      opacity:0;
      overflow:hidden;
      transition:max-height 0.35s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.25s ease, margin 0.2s;
      margin-top:0;
    }

    .collapsible-section.open{
      max-height:480px;
      opacity:1;
      margin-top:14px;
    }

    .network-picker-search-wrap{
      display:flex;
      align-items:center;
      gap:12px;
      background:rgba(0,0,0,0.5);
      border-radius:60px;
      border:1px solid rgba(255,255,255,0.15);
      padding:6px 12px 6px 6px;
      margin-bottom:14px;
      transition:all 0.2s;
    }

    .network-picker-search-wrap:focus-within{
      border-color:#b41f7a;
      box-shadow:0 0 0 3px rgba(180,31,122,0.3);
    }

    .network-picker-search-icon{
      width:40px;
      height:40px;
      border-radius:40px;
      background:linear-gradient(145deg, #2a1e4a, #1a122f);
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:16px;
    }

    .network-picker-search-input{
      flex:1;
      background:transparent;
      border:none;
      outline:none;
      color:#fff;
      font-size:14px;
      font-weight:600;
      padding:10px 0;
    }

    .network-picker-search-input::placeholder{
      color:rgba(255,255,255,0.5);
    }

    .network-picker-results{
      background:rgba(0,0,0,0.3);
      border-radius:28px;
      overflow:hidden;
    }

    .network-picker-results-head{
      padding:12px 18px;
      background:rgba(255,255,255,0.05);
      border-bottom:1px solid rgba(255,255,255,0.08);
      color:#cdc7ff;
      font-size:12px;
      font-weight:800;
    }

    .network-picker-results-list{
      max-height:280px;
      overflow-y:auto;
      padding:6px;
      display:flex;
      flex-direction:column;
      gap:10px;
    }

    .network-picker-results-list::-webkit-scrollbar{
      width:4px;
    }
    .network-picker-results-list::-webkit-scrollbar-track{
      background:rgba(255,255,255,0.05);
      border-radius:10px;
    }
    .network-picker-results-list::-webkit-scrollbar-thumb{
      background:#b41f7a;
      border-radius:10px;
    }

    .network-picker-item{
      width:100%;
      border:0;
      background:rgba(20, 18, 34, 0.7);
      backdrop-filter:blur(4px);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      text-align:right;
      padding:12px 16px;
      cursor:pointer;
      border-radius:28px;
      border:1px solid rgba(255,255,255,0.06);
      transition:all 0.2s;
    }

    .network-picker-item:hover{
      background:linear-gradient(135deg, rgba(75,29,155,0.6), rgba(180,31,122,0.5));
      transform:translateX(-3px);
    }

    .network-picker-item.is-active{
      background:linear-gradient(135deg, #5a2a9f, #9b2f73);
      border-left:4px solid #ffd966;
    }

    .network-picker-item-name{
      color:#f0eaff;
      font-size:15px;
      font-weight:900;
      margin-bottom:4px;
    }

    .network-picker-item-desc{
      color:#b9b3e6;
      font-size:11px;
    }

    .network-picker-item-id{
      direction:ltr;
      background:rgba(0,0,0,0.5);
      border-radius:40px;
      padding:6px 12px;
      font-size:12px;
      font-weight:900;
      color:#c4b5fd;
      font-family:monospace;
    }

    .network-picker-empty{
      padding:28px;
      text-align:center;
      color:#b9b3e6;
    }

    .network-picker-note{
      margin:12px 0 0;
      padding:8px 12px;
      background:rgba(0,0,0,0.4);
      border-radius:28px;
      font-size:12px;
      text-align:center;
      color:#cbd5ff;
    }

    .network-picker-note.error{
      background:rgba(185,28,28,0.2);
      color:#ffb4a2;
    }

    .dialog-actions.network-picker-actions{
      display:flex;
      justify-content:space-between;
      gap:14px;
      padding:12px 20px 20px;
      background:transparent;
      border-top:1px solid rgba(255,255,255,0.1);
    }

    .dialog-actions .btn-ghost{
      background:rgba(255,255,255,0.08);
      border:1px solid rgba(255,255,255,0.2);
      color:#f0eaff;
      padding:10px 18px;
      border-radius:40px;
      font-weight:800;
      cursor:pointer;
      transition:0.2s;
    }

    .dialog-actions .btn-ghost:hover{
      background:rgba(255,255,255,0.2);
    }

    .dialog-actions .btn{
      background:linear-gradient(135deg, #b41f7a, #7c2d9b);
      border:none;
      box-shadow:0 8px 18px rgba(180,31,122,0.4);
      border-radius:40px;
      padding:10px 18px;
    }

    /* باقي الحوارات */
    .dialog{
      width:min(520px, 96vw);
      background:#fff;
      border-radius:16px;
      overflow:hidden;
    }
    .dialog-head{
      display:flex;
      align-items:center;
      gap:10px;
      padding:14px 16px;
      background:#fff7f7;
      border-bottom:1px solid #f9c9cb;
    }
    .dialog-head .badge{
      background:#fdecec;
      color:#b91c1c;
      padding:6px 10px;
      border-radius:999px;
      font-weight:800;
    }
    .dialog-title{
      margin:0;
      font-size:1rem;
      font-weight:900;
    }
    .dialog-body{
      padding:14px 16px;
      color:#334155;
    }
    .dialog-actions{
      display:flex;
      justify-content:flex-end;
      gap:8px;
      padding:12px 16px;
      border-top:1px solid #e5e7eb;
      background:#fff;
    }
    .btn-ghost{
      background:#fff;
      border:1px solid #e5e7eb;
      padding:8px 12px;
      border-radius:10px;
      font-weight:800;
      cursor:pointer;
    }
    .dev-credit{
      text-align:center;
      padding:16px;
      color:rgba(255,255,255,.78);
      font-size:11px;
      margin-top:24px;
      border-top:1px dashed rgba(255,255,255,0.18);
    }
    .loading-backdrop{
      position:fixed;
      inset:0;
      display:none;
      align-items:center;
      justify-content:center;
      background:rgba(0,0,0,.55);
      backdrop-filter:blur(5px);
      z-index:2000;
    }
    .loading-backdrop.show{ display:flex; }
    .loading-dialog{
      background:rgba(17,24,39,.96);
      border-radius:20px;
      padding:22px;
      text-align:center;
      color:#fff;
    }
    .loading-spinner{
      width:50px;
      height:50px;
      margin:0 auto 14px;
      border-radius:50%;
      border:3px solid rgba(255,255,255,.2);
      border-top-color:#fff;
      animation:spinLoader 1s linear infinite;
    }
    @keyframes spinLoader{ to{ transform:rotate(360deg); } }
    .network-badge-desc{ font-size:12px; opacity:0.9; }
    @media (max-width:480px){
      .network-picker-hero{ padding:18px; }
      .network-picker-title{ font-size:20px; }
      .toggle-list-btn{ padding:12px; }
      .network-picker-item{ flex-wrap:wrap; }
      .dialog-actions.network-picker-actions{ flex-direction:column-reverse; }
    }

    /* ========== تحسينات تصميم LS Wallet بدون تغيير الهوية ========== */
    :root{
      --ls-glass-dark:rgba(13, 8, 27, .78);
      --ls-glass-soft:rgba(255,255,255,.105);
      --ls-line:rgba(255,255,255,.16);
      --ls-pink:#d83a9d;
      --ls-purple:#6d3cff;
      --ls-gold:#ffd166;
    }

    body::before,
    body::after{
      content:"";
      position:fixed;
      pointer-events:none;
      z-index:-1;
      border-radius:999px;
      filter:blur(26px);
      opacity:.38;
    }

    body::before{
      width:260px;
      height:260px;
      inset:6% auto auto -110px;
      background:radial-gradient(circle, rgba(180,31,122,.58), transparent 68%);
    }

    body::after{
      width:320px;
      height:320px;
      inset:auto -150px 9% auto;
      background:radial-gradient(circle, rgba(75,29,155,.62), transparent 70%);
    }

    .wrap{
      animation:pageIn .42s ease both;
    }

    @keyframes pageIn{
      from{opacity:0; transform:translateY(10px)}
      to{opacity:1; transform:translateY(0)}
    }

    .card{
      border-color:rgba(255,255,255,.20);
      background:linear-gradient(180deg, rgba(18,9,35,.72), rgba(8,3,18,.67));
      box-shadow:0 24px 70px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.04) inset;
    }

    .card::after{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      z-index:0;
      background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.16), transparent 30%),
        radial-gradient(circle at 88% 0%, rgba(180,31,122,.20), transparent 36%),
        linear-gradient(120deg, transparent 0%, rgba(255,255,255,.055) 46%, transparent 72%);
      opacity:.72;
    }

    .head{
      padding:22px 18px 18px;
      background:linear-gradient(135deg, rgba(75,29,155,.36), rgba(180,31,122,.22));
    }

    .sub{
      line-height:1.7;
    }

    .network-badge{
      background:linear-gradient(135deg, rgba(75,29,155,.26), rgba(180,31,122,.20));
      border-color:rgba(255,255,255,.18);
    }

    .network-badge.ok{
      background:
        linear-gradient(135deg, rgba(16,185,129,.18), rgba(75,29,155,.22)),
        linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
    }

    .network-badge-name{
      letter-spacing:.01em;
      text-shadow:0 2px 16px rgba(0,0,0,.18);
    }

    .network-badge-id{
      border-color:rgba(255,255,255,.28);
      background:rgba(255,255,255,.13);
    }

    .tabs{
      padding:12px;
      gap:10px;
      background:rgba(0,0,0,.08);
    }

    .tabs button{
      position:relative;
      overflow:hidden;
      min-height:42px;
      background:rgba(255,255,255,.075);
    }

    .tabs button[aria-selected="true"]::after{
      content:"";
      position:absolute;
      left:22%;
      right:22%;
      bottom:5px;
      height:3px;
      border-radius:999px;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
      opacity:.72;
    }

    .body{
      padding:18px 16px 20px;
    }

    #paneLogin,
    #paneSignup{
      animation:panelIn .22s ease both;
    }

    @keyframes panelIn{
      from{opacity:.2; transform:translateY(6px)}
      to{opacity:1; transform:translateY(0)}
    }

    .row{
      margin-bottom:12px;
    }

    .field input{
      min-height:48px;
      border-color:rgba(255,255,255,.32);
      background:linear-gradient(180deg, rgba(18,12,34,.88), rgba(9,7,22,.82));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 10px 24px rgba(0,0,0,.18);
      color:#ffffff;
      text-shadow:0 1px 1px rgba(0,0,0,.28);
      backdrop-filter:none;
      -webkit-backdrop-filter:none;
    }

    .field input::placeholder{
      color:rgba(255,255,255,.86);
      font-weight:700;
    }

    .field input:focus{
      border-color:rgba(236,72,153,.82);
      background:linear-gradient(180deg, rgba(31,19,52,.94), rgba(14,10,30,.90));
      box-shadow:
        0 0 0 3px rgba(216,58,157,.22),
        0 14px 30px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.16);
    }

    #paneLogin .field input{
      background:linear-gradient(180deg, rgba(23,15,43,.94), rgba(10,7,24,.90));
      border-color:rgba(255,255,255,.38);
    }

    #paneLogin .field input:focus{
      background:linear-gradient(180deg, rgba(36,22,62,.98), rgba(14,9,32,.94));
      border-color:rgba(255,105,180,.86);
    }

    .field .icon{
      width:25px;
      height:25px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:999px;
      background:rgba(255,255,255,.09);
      font-size:13px;
    }

    .field.invalid{
      animation:shakeField .26s ease;
    }

    @keyframes shakeField{
      0%,100%{transform:translateX(0)}
      25%{transform:translateX(4px)}
      50%{transform:translateX(-4px)}
      75%{transform:translateX(3px)}
    }

    .field.invalid input{
      border-color:rgba(248,113,113,.95);
      box-shadow:0 0 0 3px rgba(248,113,113,.18), inset 0 1px 0 rgba(255,255,255,.10);
      background:linear-gradient(180deg, rgba(127,29,29,.26), rgba(255,255,255,.08));
    }

    .btn{
      position:relative;
      overflow:hidden;
      min-height:48px;
      letter-spacing:.01em;
      box-shadow:0 16px 32px rgba(75,29,155,.30), 0 0 0 1px rgba(255,255,255,.08) inset;
    }

    .btn::after{
      content:"";
      position:absolute;
      inset:-2px auto -2px -55%;
      width:44%;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
      transform:skewX(-18deg);
      opacity:.0;
      transition:opacity .18s;
    }

    .btn:hover::after{
      opacity:.8;
      animation:btnShine .85s ease;
    }

    @keyframes btnShine{
      to{left:112%}
    }

    .btn-spin{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:18px;
      height:18px;
      border-radius:50%;
      border:2px solid rgba(255,255,255,.35);
      border-top-color:#fff;
      font-size:0;
      animation:spinLoader .75s linear infinite;
      vertical-align:middle;
    }

    .forgot-link{
      color:#f0d6ff;
      border-bottom:1px dashed rgba(255,255,255,.20);
    }

    .note{
      line-height:1.75;
    }

    /* نوافذ منبثقة مطابقة لهوية LS Wallet */
    .dialog{
      width:min(500px, 94vw);
      border-radius:28px;
      overflow:hidden;
      background:linear-gradient(180deg, rgba(20,12,41,.96), rgba(9,5,20,.96));
      color:#fff;
      border:1px solid rgba(255,255,255,.18);
      box-shadow:0 26px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.05) inset;
      backdrop-filter:blur(22px);
      -webkit-backdrop-filter:blur(22px);
      animation:dialogIn .20s cubic-bezier(.2,.9,.3,1.18) both;
    }

    @keyframes dialogIn{
      from{opacity:0; transform:translateY(12px) scale(.96)}
      to{opacity:1; transform:translateY(0) scale(1)}
    }

    .dialog-head{
      background:linear-gradient(135deg, rgba(75,29,155,.72), rgba(180,31,122,.48));
      border-bottom:1px solid rgba(255,255,255,.13);
      padding:16px 18px;
    }

    .dialog-head .badge{
      min-width:44px;
      height:34px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:rgba(255,255,255,.13);
      color:#fff;
      border:1px solid rgba(255,255,255,.20);
      box-shadow:0 8px 18px rgba(0,0,0,.18);
    }

    .dialog-title{
      color:#fff;
      font-size:1.06rem;
    }

    .dialog-body{
      color:rgba(255,255,255,.90);
      padding:18px;
      line-height:1.9;
      font-weight:700;
      background:
        radial-gradient(circle at 12% 0%, rgba(255,255,255,.08), transparent 34%),
        rgba(255,255,255,.025);
    }

    .dialog-body .hint{
      margin-top:8px;
      color:rgba(255,255,255,.68);
      font-size:13px;
      font-weight:600;
    }

    .dialog-actions{
      background:rgba(0,0,0,.12);
      border-top:1px solid rgba(255,255,255,.12);
      padding:14px 16px 16px;
      gap:10px;
    }

    .btn-ghost,
    .dialog-actions .btn-ghost{
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.18);
      color:#fff;
      border-radius:999px;
      padding:10px 16px;
    }

    .btn-ghost:hover,
    .dialog-actions .btn-ghost:hover{
      background:rgba(255,255,255,.15);
    }

    .dialog-actions .btn{
      width:auto;
      min-width:118px;
      min-height:42px;
      padding:10px 18px;
    }

    #successSignupDialog .dialog-head{
      background:linear-gradient(135deg, rgba(5,150,105,.68), rgba(75,29,155,.46));
    }

    #pwHintDialog .dialog-head{
      background:linear-gradient(135deg, rgba(245,158,11,.40), rgba(180,31,122,.46));
    }

    .loading-dialog{
      border:1px solid rgba(255,255,255,.16);
      background:linear-gradient(180deg, rgba(20,12,41,.96), rgba(9,5,20,.96));
      box-shadow:0 26px 80px rgba(0,0,0,.55);
    }

    .loading-title{
      margin:0 0 6px;
      font-size:18px;
    }

    .loading-text{
      margin:0;
      color:rgba(255,255,255,.74);
    }

    .network-picker-dialog{
      box-shadow:0 32px 80px rgba(0,0,0,.56), 0 0 0 1px rgba(255,255,255,.06) inset;
    }

    .network-picker-item{
      box-shadow:0 8px 20px rgba(0,0,0,.14);
    }

    .foot{
      justify-content:center;
    }

    .link{
      min-height:40px;
    }

    @media (max-width:480px){
      .wrap{
        margin:18px auto;
        padding:0 12px 20px;
      }
      .head{
        padding:18px 14px 15px;
      }
      .network-badge{
        margin:12px 12px 0;
        padding:13px;
      }
      .body{
        padding:15px 12px 17px;
      }
      .dialog{
        border-radius:24px;
      }
      .dialog-actions{
        flex-direction:column-reverse;
      }
      .dialog-actions .btn,
      .dialog-actions .btn-ghost{
        width:100%;
      }
    }