:root{
      --bg:#060812;
      --card:#0b1020;
      --card2:#0a0f1d;
      --stroke:rgba(255,255,255,.08);
      --text:rgba(255,255,255,.92);
      --muted:rgba(255,255,255,.62);
      --accent:#d4af37; /* gold */      
      --accent2:#f6d365; /* light gold */
      --warn:#f59e0b;
      --danger:#ef4444;
      --shadow: 0 20px 60px rgba(0,0,0,.55);
      --radius:18px;
    }

    *{box-sizing:border-box}
    html{-webkit-text-size-adjust:100%;}
    body{
      margin:0;
      font-family:"Vazirmatn", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color:var(--text);
      background:
radial-gradient(1000px 700px at 80% -10%, rgba(212,175,55,.30), transparent 60%),        radial-gradient(1000px 700px at 10% 110%, rgba(34,197,94,.18), transparent 55%),
        linear-gradient(180deg, #050713 0%, #04060f 30%, #02030a 100%);
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:28px 14px;
      position:relative;
    }

    .shell{
      width:min(1040px, 100%);
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap:18px;
      align-items:stretch;
      position:relative;
      padding-top:165px;
    }

    @media (max-width: 960px){
      .shell{grid-template-columns:1fr;}
    }

    .panel{
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      border:1px solid var(--stroke);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      overflow:hidden;
      position:relative;
      min-width:0;
    }

    .panel::before{
      content:"";
      position:absolute;
      inset:-2px;
      background:
radial-gradient(600px 240px at 20% 0%, rgba(212,175,55,.20), transparent 60%),        radial-gradient(600px 240px at 85% 100%, rgba(34,197,94,.12), transparent 60%);
      pointer-events:none;
      z-index:0;
    }

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

    .left{
      padding:22px 22px 18px;
    }

    .right{
      padding:22px;
      background:linear-gradient(180deg, rgba(11,16,32,.9), rgba(10,15,29,.92));
    }

    .brandText{
      display:flex;
      align-items:center;
      gap:12px;
      padding-bottom:14px;
      border-bottom:1px solid var(--stroke);
      margin-bottom:18px;
    }

    .brandText .title{
      display:flex;
      flex-direction:column;
      gap:6px;
    }

    .brandText .title b{
      display:block;
      font-size:18px;
      letter-spacing:.2px;
      line-height:1.35;
      margin:0;
    }

    .brandText .title span{
      display:block;
      font-size:13px;
      color:var(--muted);
      line-height:1.8;
      white-space:normal;
      word-break:break-word;
      overflow-wrap:anywhere;
    }
    .topLogo{
     
  position:absolute;
  top:28px;
  left:50%;
  transform:translateX(-50%);
  width:auto;
  display:flex;
  justify-content:center;
  padding:0;
  pointer-events:none;
  z-index:999;
}

    .topLogo img{
      width:154px;
      height:154px;
      object-fit:contain;
      border-radius:0;
      background:transparent;
      border:none;
      padding:0;
      box-shadow:none;
      filter: drop-shadow(0 18px 45px rgba(0,0,0,.55));
    }

    @media (max-width: 960px){
     .shell{padding-top:190px;}
.topLogo{top:22px;}
.topLogo img{width:146px;height:146px;}
    }
    @media (max-width: 720px){
      body{padding:20px 10px;}
      .shell{padding-top:160px;}
      .left,.right{padding:18px;}
      .topLogo img{width:128px;height:128px;}
      .brandText{gap:10px; margin-bottom:14px;}
      .brandText .title b{font-size:16px;}
      .brandText .title span{font-size:12px;}
      .h1{font-size:16px;}
      .p{font-size:12px;}
      .stepbar{gap:8px; padding:8px 10px;}
      .chip{font-size:11px;}
    }
    @media (max-width: 520px){
      .shell{padding-top:140px;}
      .topLogo img{width:110px;height:110px;}
      .left,.right{padding:16px;}
      .btnrow{gap:8px;}
      .card{padding:12px;}
    }
    @media (max-width: 380px){
      .shell{padding-top:120px;}
      .topLogo img{width:96px;height:96px;}
      .left,.right{padding:14px;}
      button{padding:11px 12px; font-size:12px;}
    }

    .stepbar{
      display:flex;
      gap:10px;
      align-items:center;
      padding:10px 12px;
      background:rgba(255,255,255,.03);
      border:1px solid var(--stroke);
      border-radius:14px;
      margin:14px 0 18px;
      overflow:auto;
      flex-wrap:wrap;
    }

    .chip{
      display:flex;
      align-items:center;
      gap:8px;
      padding:8px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.03);
      white-space:nowrap;
      font-size:12px;
      color:var(--muted);
    }

    .chip .dot{
      width:10px;height:10px;border-radius:999px;
      background:rgba(255,255,255,.16);
      border:1px solid rgba(255,255,255,.22);
    }

  .chip.active{color:var(--text); border-color:rgba(212,175,55,.55); background:rgba(212,175,55,.12)}
.chip.active .dot{background:rgba(212,175,55,.95); border-color:rgba(212,175,55,1)}

    .chip.done{color:rgba(255,255,255,.85); border-color:rgba(34,197,94,.55); background:rgba(34,197,94,.10)}
    .chip.done .dot{background:rgba(34,197,94,.95); border-color:rgba(34,197,94,1)}

    .h1{
      font-size:18px;
      margin:0 0 6px;
    }
    .p{
      margin:0;
      color:var(--muted);
      font-size:13px;
      line-height:1.9;
    }

    form{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:12px;
      margin-top:12px;
    }

    @media (max-width: 720px){
      form{grid-template-columns:1fr;}
      .btnrow{flex-direction:column;}
      .btnrow button{width:100%;}
      .kv{grid-template-columns: 110px 1fr;}
      input, textarea, select{font-size:16px;}
    }

    @media (max-width: 520px){
      .kv{grid-template-columns: 1fr;}
    }

    .field{
      display:flex;
      flex-direction:column;
      gap:7px;
    }

    label{
      font-size:12px;
      color:rgba(255,255,255,.78);
    }

    input{
      width:100%;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.10);
      color:var(--text);
      border-radius:14px;
      padding:12px 12px;
      outline:none;
      font-size:16px;
    }

    input, textarea, select, button{
      font-family: inherit;
    }

    input::placeholder, textarea::placeholder{
      font-family: inherit;
    }

    input:focus{
     border-color:rgba(212,175,55,.70);
box-shadow: 0 0 0 4px rgba(212,175,55,.14);
    }

    .full{grid-column:1 / -1;}

    .btnrow{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:14px;
    }

    button{
      border:none;
      cursor:pointer;
      border-radius:14px;
      padding:12px 14px;
      font-family:inherit;
      font-weight:700;
      font-size:13px;
      letter-spacing:.2px;
    }

    .btn-primary{
      background:linear-gradient(90deg, rgba(212,175,55,1), rgba(246,211,101,1));
      color:white;
    }

    .btn-primary:disabled{opacity:.55; cursor:not-allowed}

    .btn-ghost{
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.10);
      color:rgba(255,255,255,.88);
    }

    .btn-product.is-selected{
  border-color:rgba(212,175,55,.55);
  background:rgba(212,175,55,.12);
  color:rgba(255,255,255,.95);
}

    .btn-green{
      background:linear-gradient(90deg, rgba(34,197,94,1), rgba(16,185,129,1));
      color:#04110a;
    }

    .btn-warn{
      background:linear-gradient(90deg, rgba(245,158,11,1), rgba(249,115,22,1));
      color:#140a02;
    }

    .small{
      font-size:12px;
      color:var(--muted);
      margin-top:10px;
      line-height:1.9;
    }

    .divider{
      height:1px;
      background:var(--stroke);
      margin:18px 0;
    }

    .card{
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.10);
      border-radius:16px;
      padding:14px;
    }

    .card h3{margin:0 0 6px; font-size:14px;}
    .kv{display:grid; grid-template-columns: 140px 1fr; gap:8px; font-size:12.5px;}
    .kv div{padding:6px 0; color:rgba(255,255,255,.86); min-width:0}
    .kv div:nth-child(odd){color:var(--muted)}

    .mono{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      word-break:break-all;
      overflow-wrap:anywhere;
    }

.walletWrap{
  display:block;
  margin-top:12px;
}

    .notice{
      padding:10px 12px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.03);
      color:rgba(255,255,255,.85);
      font-size:12px;
      line-height:1.9;
    }

    /* spacing for inline feedback messages under button rows */
    #infoNotice,
    #txNotice{
      margin-top:12px;
    }

    .notice.ok{border-color:rgba(34,197,94,.35); background:rgba(34,197,94,.08)}
    .notice.bad{border-color:rgba(239,68,68,.35); background:rgba(239,68,68,.08)}

    .hidden{display:none !important;}

    .topRightBadge{
      display:inline-flex;
      gap:8px;
      align-items:center;
      padding:8px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.04);
      color:rgba(255,255,255,.86);
      font-size:12px;
      margin-top:10px;
      width:max-content;
      max-width:100%;
      white-space:normal;
    }

    .topRightBadge b{color:white}

    .footer{
      margin-top:14px;
      padding-top:12px;
      border-top:1px solid var(--stroke);
      color:rgba(255,255,255,.55);
      font-size:11.5px;
      line-height:1.9;
    }

    a{color:rgba(212,175,55,.95); text-decoration:none}
    a:hover{text-decoration:underline}