:root{
      --bg:#ffffff; --text:#0f172a; --muted:#6b7280;
      --line:rgba(15,23,42,.10); --card:#ffffff;
      --shadow:0 10px 28px rgba(15,23,42,.10);
      --shadow2:0 16px 36px rgba(15,23,42,.12);
      --shadow3: 0 0 6px rgba(15,23,42,.12);
      --banner:#efefef; --chip:#f3f4f6; --chip2:#e5e7eb;
      --btn:#111827; --btnText:#ffffff;
      --green:#16a34a; --star:#FFBB00;
      --switchTrack:#f3f4f6; --switchKnob:#ffffff; --switchIcon:#111827;
      --dlBlue:#2563eb; --dlBlueS: #93c5fd; --moneyGreen:#16a34a; --iconBg:rgba(15,23,42,.06); --tab:#F2F2F2;
    }
    html[data-theme="dark"]{
      --bg:#0b0f18; --text:#e5e7eb; --muted:#9ca3af;
      --line:rgba(255,255,255,.10); --card:#0f1624;
      --shadow:0 10px 28px rgba(0,0,0,.35);
      --shadow2:0 16px 40px rgba(0,0,0,.45);
      --shadow3: 0 0 6px rgba(0,0,0,.45);
      --banner:rgba(255,255,255,.08); --chip:rgba(255,255,255,.08); --chip2:rgba(255,255,255,.12);
      --btn:#f5c633; --btnText:#0b0f18;
      --green:#22c55e; --star:#f5c633;
      --switchTrack:#0f1624; --switchKnob:#0b0f18; --switchIcon:#e5e7eb;
      --dlBlue:#60a5fa; --dlBlueS: #1e3a8a; --moneyGreen:#22c55e; --iconBg:rgba(255,255,255,.08); --tab:#36454F;
    }

    *{box-sizing:border-box}
    body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:var(--bg); color:var(--text); }
    .theme-anim *{ transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease, opacity .25s ease; }
    .wrap{ max-width:520px; margin:0 auto; }
    .secondWrap {padding:10px 10px 18px;}

    .topbar{
      display:flex; flex-direction:column; justify-content:space-between;
      position: sticky; top:0;
      background: color-mix(in srgb, var(--bg) 92%, transparent);
      backdrop-filter: blur(10px);
      z-index:50;
      border-bottom:1px solid var(--line);
    }
    .topList { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); padding:10px;}
    .title{ font-size:18px; font-weight:600; letter-spacing:-.3px; }
    
    .headTitle { display:flex; gap:5px; align-items:center; }
    
    .headImg { width:25px; aspect-ratio: 1 / 1; object-fit: cover; border-radius:50%; }
    
    .actions{ display:flex; align-items:center; gap:20px; justify-content:space-between;}
    .icon-btn{
    }
    .icon-btn:active{ transform: translateY(1px) scale(.98); }
    .icon-btn i{ font-size:20px; }

    .theme-switch{
      width:35px; height:25px; border-radius:999px; border:1px solid var(--line);
      background: var(--switchTrack); padding:2px; cursor:pointer;
      position:relative; box-shadow: 0 6px 18px rgba(0,0,0,.06);
      -webkit-tap-highlight-color:transparent; overflow:hidden;
    }
    .switch-glow{
      position:absolute; inset:-30px;
      background:
        radial-gradient(160px 80px at 30% 30%, rgba(245,198,33,.20), transparent 60%),
        radial-gradient(180px 90px at 75% 75%, rgba(59,130,246,.16), transparent 60%);
      opacity:.85;
    }
    html[data-theme="dark"] .switch-glow{ opacity:.55; }

    .knob{
  width:21px;
  height:21px;
  border-radius:999px;
  background: var(--switchKnob);
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  display:grid;
  place-items:center;
  position:relative;
  transform: translateX(0);
  transition: transform .28s cubic-bezier(.2,.85,.2,1);
  z-index:2;
}

/* Dark mode movement */
html[data-theme="dark"] .knob{
  transform: translateX(10px);
}

/* icon size adjust */
.knob i{
  font-size:11px; /* small icon for small switch */
}
    .sun{ opacity:1; transform: rotate(0deg) scale(1); }
    .moon{ opacity:0; transform: rotate(-25deg) scale(.9); position:absolute; }
    html[data-theme="dark"] .sun{ opacity:0; transform: rotate(25deg) scale(.9); }
    html[data-theme="dark"] .moon{ opacity:1; transform: rotate(0deg) scale(1); }

  .banner{
    height:105px;
    border-radius:8px;
    border:1px solid var(--line);
    position:relative;
    overflow:hidden;
    background: var(--banner);
    user-select:none;
    touch-action: pan-y; /* allow vertical scroll */
  }

  /* gradient overlay same as your design */
  .banner::before{
    content:"";
    position:absolute;
    inset:-40px;
    background:
      radial-gradient(420px 220px at 35% 10%, rgba(59,130,246,.12), transparent 55%),
      radial-gradient(420px 240px at 70% 85%, rgba(245,198,33,.14), transparent 60%);
    transform: rotate(-4deg);
    pointer-events:none;
  }

  /* slides wrapper */
  .bnSlides{
    position:absolute;
    inset:0;
    display:flex;
    height:100%;
    transform: translateX(0);
    transition: transform .45s cubic-bezier(.2,.85,.2,1);
    will-change: transform;
  }

  /* each slide (now contains <img>) */
  .bnSlide{
    flex: 0 0 100%;
    height:100%;
    position: relative;
  }

  /* make image behave like background cover */
  .bnImg{
    width: 100%;
    height: 100%;
    display:block;
    object-fit: cover;
    object-position: center;
    background: var(--banner);
  }

  /* optional clickable overlay (if you want link) */
  .bnLink{
    position:absolute;
    inset:0;
    z-index: 1; /* above image & overlay */
    text-indent:-9999px;
    overflow:hidden;
  }

  /* drag time */
  .banner.dragging .bnSlides{
    transition: none;
  }

    .rankWrap{ position: relative;}
    .ranassetsow{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--bg);}
    .rankItem{ flex:1; min-width:0; text-align:center; background:var(--bg); border-radius:6px 6px 0 0; margin-top:-5px; padding-top:13px; place-items:center; transform: translateY(0px);}
    .rankItem.mid{ transform: translateY(-10px); flex:1.1; }
    
    .rankIcon { width:44px; height:40px; margin-top:-30px; }

    .appIcon{
      width: 75px; aspect-ratio: 1 / 1; border-radius: 22px;
      margin: 6px auto 2px;
      border: 1px solid var(--line);
      box-shadow: 0 6px 12px rgba(0,0,0,.10);
      overflow:hidden; background:#fff;
      display:grid; place-items:center;
    }     

    .appIcon.mid{
      width: 85px;
    }
    .appIcon img{ width:100%; height:100%; object-fit:cover; display:block; }
    .appName{ font-size:13px; font-weight:600; margin:2px 0 4px; letter-spacing:-.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    
    .stars {
  display: flex;
  gap: 2px; align-items:center; justify-content:center;
  margin-bottom:5px;
}

.stars i {
  font-size: 13px;
  color: #f5c621;
  opacity: 0.5;
  animation: fadeWave 1.5s linear infinite;
}

/* Sequential Delay */
.stars i:nth-child(1) { animation-delay: 0s; }
.stars i:nth-child(2) { animation-delay: 0.2s; }
.stars i:nth-child(3) { animation-delay: 0.4s; }
.stars i:nth-child(4) { animation-delay: 0.6s; }
.stars i:nth-child(5) { animation-delay: 0.8s; }

@keyframes fadeWave {
  0%   { opacity: 0.3; }
  50%  { opacity: 1; }
  100% { opacity: 0.3; }
}
    
    .secure{ display:flex; justify-content:center; align-items:center; gap:2px; color: var(--green); font-weight:500; margin-bottom:5px; font-size:11px; }
    .btn{
  display:flex;                 /* important for anchor */
  align-items:center;
  justify-content:center;
  gap:5px;

  width:92%;
  padding:4px 8px;

  border-radius:6px;
  border:0;

  font-weight:500;
  font-size:13px;

  background:var(--btn);
  color:var(--btnText);

  text-decoration:none;         /* remove underline */
  white-space:nowrap;
  overflow:hidden;

  box-shadow:0 3px 5px rgba(0,0,0,.18);

  cursor:pointer;
  -webkit-tap-highlight-color:transparent;

  transition:all .15s ease;
}

.btn:link,
.btn:visited{
  color:var(--btnText);
  text-decoration:none;
}

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

.btn:active{
  transform:translateY(1px) scale(.99);
}

    .tabs{
      margin-top: 10px;
      display:flex; gap:8px; padding:4px;
      border-radius:6px;
      background: color-mix(in srgb, var(--tab) 92%, transparent);
      box-shadow: 
  inset 0 1px 2px var(--shadow),
  inset 0 -1px 2px var(--shadow),
  inset 1px 0 2px var(--shadow),
  inset -1px 0 2px var(--shadow);
    }
    .tab{
      flex:1 1 0;
      border:1px solid transparent;
      background: transparent;
      border-radius: 6px;
      padding: 6px;
      font-weight: 500; font-size:13px;
      color: var(--text);
      cursor:pointer;
      -webkit-tap-highlight-color:transparent;
      white-space:nowrap; 
    }
    .tab.active{
      background: var(--card);
      border-color: var(--line);
      box-shadow: 0 10px 22px rgba(0,0,0,.10);
    }

    .tabPanel{ display:none; margin-top: 12px; }
    .tabPanel.active{ display:block; }

    .grid3{
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 in one line */
      gap: 10px; padding-top:10px;
    }

    /* compact cards so 3 fit on mobile */
    .card{
      border-radius: 8px;
      border:1px solid var(--line);
      background: var(--card);
      box-shadow: var(--shadow3);
      padding: 6px;
      overflow:hidden;
    }
    .cardTop{
      display:flex; flex-direction:column;
      align-items:center; text-align:center;
      gap:2px; margin-bottom: 8px;
    }
    .miniIcon{
      width: 70%; aspect-ratio: 1 / 1;
      border-radius: 16px;
      border:1px solid var(--line);
      overflow:hidden; background:#fff;
      box-shadow: 0 10px 22px rgba(0,0,0,.10);
    }
    .miniIcon img{ width:100%; height:100%; object-fit:cover; display:block; }

    .cardName{
      font-weight: 600;
      font-size: 13px;   
      white-space:nowrap;
    }
    .metaRow{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;

  margin-top: -5px;
  margin-bottom: 5px;

  color: var(--muted);
  font-weight: 500;
  font-size: 10px;

  flex-wrap: nowrap;    
  white-space: nowrap;  
  overflow: hidden; 
}

.fa-duotone.fa-cloud-arrow-down{ --fa-primary-color: var(--dlBlue); --fa-secondary-color: var(--dlBlueS); --fa-secondary-opacity:.35; }
    .fa-duotone.fa-wallet{ --fa-primary-color: var(--moneyGreen); --fa-secondary-color: var(--moneyGreen); --fa-secondary-opacity:.35; }
    .fa-duotone.fa-circle-check{ --fa-primary-color: var(--green); --fa-secondary-color: var(--green); --fa-secondary-opacity:.35; }

    .cardBtn{
  display:inline-flex;            /* important */
  align-items:center;
  justify-content:center;

  width:100%;
  padding:5px;
  border-radius:6px;
  border:0;

  font-weight:600;
  font-size:13px;

  background:var(--btn);
  color:var(--btnText);

  text-decoration:none;           /* underline remove */
  box-shadow:0 3px 5px rgba(0,0,0,.18);

  cursor:pointer;
  -webkit-tap-highlight-color:transparent;

  transition:all .15s ease;
}

.cardBtn:link,
.cardBtn:visited{
  color:var(--btnText);
  text-decoration:none;
}

.cardBtn:hover{
  filter:brightness(1.05);
}

.cardBtn:active{
  transform:translateY(1px) scale(.99);
}

/* =========================
   BOTTOM SHEET (with drag to close)
   Uses YOUR existing classes:
   .sheetMask  #sheetMask  .sheet  .sheetHandle  .sheetItem etc
   ========================= */

.sheetMask{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.45);
  opacity:0;
  pointer-events:none;
  transition: opacity .20s ease;
  z-index:90;
}

/* ✅ NOTE:
   bottom always 0, hide/show via transform (drag also uses transform)
*/
.sheet{
  position:fixed;
  left:0; right:0; bottom:0;
  max-width:520px;
  margin:0 auto;

  background: var(--card);
  border-radius: 22px 22px 0 0;
  border:1px solid var(--line);
  box-shadow: 0 -20px 60px rgba(0,0,0,.30);

  padding: 12px 12px 16px;
  z-index:100;

  /* hidden by default */
  transform: translateY(110%);
  transition: transform .28s cubic-bezier(.2,.9,.2,1);

  will-change: transform;
  touch-action: none; /* important for drag */
}

/* handle */
.sheetHandle{
  width:44px;
  height:5px;
  background: var(--chip2);
  border-radius:999px;
  margin: 4px auto 10px;
  flex-shrink:0;

  cursor: grab;
  -webkit-tap-highlight-color: transparent;
  user-select:none;
  -webkit-user-select:none;
}
.sheetHandle:active{ cursor: grabbing; }

.sheetHandle.modal { margin-top:10px; margin-bottom:0; flex-shrink: 0 }

.sheetTitle{
  font-weight: 600;
  font-size: 16px;
  margin: 0 4px 10px;
  color: var(--muted);
}

.sheetList{ display:grid; gap:10px; }

.sheetItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  padding: 0 12px 12px 12px;
  border-bottom:1px solid var(--line);
  background: color-mix(in srgb, var(--card) 92%, transparent);

  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.sheetItem:last-child{ border-bottom:none; padding-bottom:0; }

.sheetItemLeft{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:600;
}

.sheetItemLeft .miniI{
  width:36px; height:36px;
  border-radius:12px;
  border:1px solid var(--line);
  background: var(--iconBg);
  display:grid;
  place-items:center;
}

/* OPEN state */
body.sheet-open .sheetMask{
  opacity:1;
  pointer-events:auto;
}
body.sheet-open .sheet{
  transform: translateY(0);
}

/* While dragging */
.sheet.assetsSheetDragging{
  transition:none !important;
}
    
    /* Wrapper */
.assetsSearch{
  display:flex;
  align-items:center;
  width:100%;
  padding: 4px 10px;
z-index:2; gap:10px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 92%, rgba(59,130,246,.06));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--line) 45%, transparent);
  margin-top:5px;
}

/* Dark tweak */
html[data-theme="dark"] .assetsSearch{
  background: color-mix(in srgb, var(--card) 92%, rgba(96,165,250,.08));
}

/* Icon (no bg, no animation) */
.assetsSearchIcon{
  font-size: 16px;
  opacity: .85;

  --fa-primary-color: var(--muted);
  --fa-secondary-color: var(--dlBlue);
  --fa-secondary-opacity: .28;
}

/* Input */
.assetsSearchInput{
  margin-right:auto;
  min-width: 0;  
  width:100%;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font-weight: 500;
  padding: 6px 0;
}

/* Placeholder */
.assetsSearchInput::placeholder{
  color: color-mix(in srgb, var(--muted) 88%, transparent);
  font-weight: 500;
}

/* Focus (light premium, not too strong) */
.assetsSearch:focus-within{
  border-color: color-mix(in srgb, var(--dlBlue) 55%, var(--line));
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--dlBlue) 22%, transparent);
}

/* Clear button (always present but hidden when empty via CSS) */
.assetsSearchClear{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  background: color-mix(in srgb, var(--card) 86%, transparent);
  display:grid;
  place-items:center;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}

.assetsSearchClear:active{
  transform: scale(.96);
}

/* Clear icon colors */
.assetsSearchClear i{
  font-size: 16px;
  --fa-primary-color: #ef4444;
  --fa-secondary-color: #ef4444;
  --fa-secondary-opacity: .28;
}

.assetsSearchInput:placeholder-shown ~ .assetsSearchClear{
  display:none;
}

input:hover{
  background: transparent !important;
}

input:focus{
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

.xmb-btn{
  border:0;
  background:#eef2ff;
  color:#0f172a;
  padding:10px 12px;
  border-radius:12px;
  font-weight:800;
  cursor:pointer;
}
.xmb-btn:active{ transform:scale(.99); }

/* Overlay */
.xmb-overlay{
  position:fixed;
  inset:0;
  background: rgba(2, 6, 23, .55);
  backdrop-filter: blur(2px);
  z-index: 99990;
  opacity:0;
  transition: opacity .22s ease;
}
.xmb-overlay.xmb-active{ opacity:1; }

/* Modal wrapper */
.xmb-modal{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index: 99999;

  pointer-events:none;
  opacity:0;
  transform: translateY(26px);
  transition: opacity .18s ease, transform .26s cubic-bezier(.2,.8,.2,1);
}
.xmb-modal.xmb-active{
  pointer-events:auto;
  opacity:1;
  transform: translateY(0);
}

/* Panel (bottom sheet) */
.xmb-panel{
  width: min(500px, 100%);
  margin: 0 auto;

  height: 75vh;
  max-height: 75vh;

  background: var(--card);
  color: var(--text);
  border-radius: 22px 22px 0 0;
      border:1px solid var(--line);
      box-shadow: 0 -20px 60px rgba(0,0,0,.30);


  display:flex;
  flex-direction:column;
  overflow:hidden; /* only content scroll */
  
  transition: transform .26s cubic-bezier(.2,.8,.2,1);
  transform: translate3d(0,0,0);
  will-change: transform;
  
}

/* Header */
.xmb-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  padding: 7px 16px;
  border-bottom: 1px solid var(--line);

  background: var(--card);
  flex: 0 0 auto;

  position: sticky;
  top: 0;
  z-index: 2;
}
.xmb-title{
  margin:0;
  font-size:16px;
  font-weight:900;
  color: var(--text);
}

/* Close */
.xmb-close{
  width:38px;
  height:38px;
  border:0;
  border-radius:12px;
  cursor:pointer;

  background: rgba(15,23,42,.06);
  color: var(--text);

  display:grid;
  place-items:center;
}
.xmb-close:active{ transform: scale(.96); }

/* Scrollable content */
.xmb-content{
  flex:1 1 auto;
  min-height:0;              /* CRITICAL for flex scrolling */
  overflow-y:auto;
  overflow-x:hidden;
  padding: 16px;

  -webkit-overflow-scrolling: touch;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .xmb-overlay, .xmb-modal{ transition:none !important; }
}

.xmb-panel{
  touch-action: none; /* IMPORTANT (but we’ll allow inner content scroll separately) */
  will-change: transform;
}
.xmb-content{
  touch-action: pan-y; /* content scroll allowed */
}

.assetsp-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  margin: 8px 0;
  box-shadow: var(--shadow3);
  position: relative;
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease;
}

/* subtle premium sheen */
.assetsp-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(600px 220px at 20% -20%, rgba(245,198,51,.18), transparent 60%),
    radial-gradient(520px 240px at 110% 10%, rgba(37,99,235,.16), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 55%);
  pointer-events:none;
  opacity:.9;
}

html[data-theme="dark"] .assetsp-card::before{
  background:
    radial-gradient(600px 220px at 20% -20%, rgba(245,198,51,.14), transparent 60%),
    radial-gradient(520px 240px at 110% 10%, rgba(96,165,250,.14), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 55%);
  opacity:1;
}

.assetsp-card:hover{
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.assetsp-row{
  display:flex;
  align-items:center;
  gap: 12px; /* tight + premium */
  position: relative;
  z-index: 1;
}

/* Left image */
.assetsp-left{
  flex: 0 0 auto;
}
.assetsp-logo{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  object-fit: cover;
  display:block;
  border: 1px solid var(--line);
  box-shadow: 0 10px 20px rgba(15,23,42,.10);
}
html[data-theme="dark"] .assetsp-logo{
  box-shadow: 0 12px 26px rgba(0,0,0,.45);
}

/* Middle content */
.assetsp-mid{
  flex: 1 1 auto;
  min-width: 0;
}
.assetsp-title{
  margin: 0 0 6px 0;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.assetsp-sub{
  margin: 0;
  display:flex;
  align-items:center;
  flex-wrap: nowrap; white-space: nowrap; overflow: hidden;
  gap: 6px;
  font-size: 11px;
  line-height: 1.2;
  color: var(--muted);
  font-weight: 500;
}

.assetsp-ico{
  font-size: 11px;
  color: var(--dlBlue);
  margin-right: 2px;
}
.assetsp-dl{
  color: var(--dlBlue);
  font-weight: 500;
}

.assetsp-dot{
  color: color-mix(in srgb, var(--muted) 65%, transparent);
  font-weight: 900;
  margin: 0 2px;
}

.assetsp-bonus{
  color: var(--moneyGreen);
  font-weight: 500;
}

/* Min redeem */
.assetsp-min{
  margin-top: 7px;
  display:flex;
  align-items:center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  flex-wrap: nowrap; white-space: nowrap; overflow: hidden;
}
.assetsp-ico2{
  font-size: 12px;
  color: var(--moneyGreen);
  opacity: .95;
}
.assetsp-minv{
  color: var(--text);
}

/* Right button (premium, same look in dark/light; no weird swap) */
.assetsp-right{
  flex: 1;
  display:flex;
  align-items:center;
}

/* fixed premium button style - uses vars but keeps elegant contrast */
.assetsp-btn{
  border: 0;
  cursor: pointer;
  user-select: none;
  white-space: nowrap; width:100%; text-align:center;
  padding: 6px 10px;
  border-radius: 5px;

  background: var(--btn) !important;
  color: var(--btnText);

  font-size: 13px;
  font-weight: 500;
  letter-spacing: .2px;

  box-shadow:
    0 5px 10px rgba(15,23,42,.18),
    0 2px 0 rgba(0,0,0,.10) inset;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}

html[data-theme="dark"] .assetsp-btn{
  /* dark mode me bhi premium contrast, but not "wrong" */
  box-shadow:
    0 6px 12px rgba(0,0,0,.55),
    0 2px 0 rgba(255,255,255,.08) inset;
}

.assetsp-btn:hover{
  filter: brightness(1.05);
  box-shadow:
    var(--shadow2),
    0 2px 0 rgba(255,255,255,.08) inset;
}
.assetsp-btn:active{
  transform: translateY(1px) scale(.99);
}
.assetsp-btn i{
  font-size: 13px;
}

a{ -webkit-tap-highlight-color: transparent;
  user-select: none; }
  
/* =========================
   ICON DUOTONE COLORS (LIGHT MODE IMPROVED)
   ========================= */

.icon-sky{
  --fa-primary-color:#2563eb;     /* stronger blue */
  --fa-secondary-color:#1e40af;
}

.icon-emerald{
  --fa-primary-color:#059669;
  --fa-secondary-color:#065f46;
}

.icon-amber{
  --fa-primary-color:#d97706;
  --fa-secondary-color:#92400e;
}

.icon-rose{
  --fa-primary-color:#e11d48;
  --fa-secondary-color:#9f1239;
}

.icon-purple{
  --fa-primary-color:#7c3aed;
  --fa-secondary-color:#5b21b6;
}

.icon-teal{
  --fa-primary-color:#0d9488;
  --fa-secondary-color:#115e59;
}

/* =========================
   TEXT PRIMARY
   ========================= */

.text-sky{ color:#2563eb; }
.text-emerald{ color:#059669; }
.text-amber{ color:#d97706; }
.text-rose{ color:#e11d48; }
.text-purple{ color:#7c3aed; }
.text-teal{ color:#0d9488; }

/* =========================
   TEXT SECONDARY
   ========================= */

.fadeText { opacity:.8; }

.fade-sky{ color:#1e40af; }
.fade-emerald{ color:#065f46; }
.fade-amber{ color:#92400e; }
.fade-rose{ color:#9f1239; }
.fade-purple{ color:#5b21b6; }
.fade-teal{ color:#115e59; }

/* =========================
   DARK THEME OVERRIDES
   (secondary ko lighter kar diya)
   ========================= */
html[data-theme="dark"] .fa-duotone{
  --fa-secondary-opacity: .60; /* thoda readable depth */
}

html[data-theme="dark"] .fadeText{
  opacity:.85; /* pure white nahi, but readable */
}

/* ✅ Dark mode me secondary colors (lighter same-hue shades) */
html[data-theme="dark"] .icon-sky{ --fa-secondary-color:#93c5fd; }      /* lighter blue */
html[data-theme="dark"] .icon-emerald{ --fa-secondary-color:#6ee7b7; }  /* lighter emerald */
html[data-theme="dark"] .icon-amber{ --fa-secondary-color:#fde68a; }    /* lighter amber */
html[data-theme="dark"] .icon-rose{ --fa-secondary-color:#fda4af; }     /* lighter rose */
html[data-theme="dark"] .icon-purple{ --fa-secondary-color:#c4b5fd; }   /* lighter purple */
html[data-theme="dark"] .icon-teal{ --fa-secondary-color:#99f6e4; }     /* lighter teal */

/* ✅ Dark mode me fade text colors bhi lighter */
html[data-theme="dark"] .fade-sky{ color:#bfdbfe; }
html[data-theme="dark"] .fade-emerald{ color:#a7f3d0; }
html[data-theme="dark"] .fade-amber{ color:#fef3c7; }
html[data-theme="dark"] .fade-rose{ color:#fecdd3; }
html[data-theme="dark"] .fade-purple{ color:#ddd6fe; }
html[data-theme="dark"] .fade-teal{ color:#ccfbf1; }  

/* wrapper */

.arlxWrap{
display:flex;
flex-direction:column;
gap:16px;
}


/* card */

.arlxCard{
background:var(--card);
border:1px solid var(--line);
border-radius:14px;
padding:16px;
box-shadow:var(--shadow3);
}


/* title */

.arlxTitle{
font-size:15px;
font-weight:600;
margin-bottom:8px;
}


/* trust grid */

.arlxTrustGrid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px 16px;
}

.arlxTrustItem{
font-size:15px;
color:var(--text);
position:relative;
padding-left:22px;
}

.arlxTrustItem:before{
content:"✔";
position:absolute;
left:0;
top:0;
color:var(--green);
font-size:14px;
}



/* SEO text */

.arlxSeoBox{
margin-top:10px;
position:relative;
}

.arlxSeoText{
font-size:14px;
line-height:1.5;
color:var(--muted);
overflow:hidden;
max-height:6.2em; /* 3 lines approx */
position:relative;
transition:max-height .45s ease;
}

.arlxSeoText p{
margin-bottom:12px;
}

.arlxSeoText p:last-child{
margin-bottom:0;
}

.arlxToggle{
display:none;
}

/* bottom fade effect when collapsed */
.arlxSeoText:after{
content:"";
position:absolute;
left:0;
right:0;
bottom:0;
height:28px;
background:linear-gradient(to bottom, rgba(255,255,255,0), var(--card));
pointer-events:none;
transition:opacity .25s ease;
}

html[data-theme="dark"] .arlxSeoText:after{
background:linear-gradient(to bottom, rgba(15,22,36,0), var(--card));
}

/* expanded */
#arlxSeoToggle:checked ~ .arlxSeoText{
max-height:10000px;
}

/* hide fade when expanded */
#arlxSeoToggle:checked ~ .arlxSeoText:after{
opacity:0;
}

/* read more */
.arlxReadBtn{
display:inline-block;
margin-top:8px;
color:var(--dlBlue);
font-size:14px;
font-weight:500;
cursor:pointer;
-webkit-tap-highlight-color:transparent;
}

.arlxLess{
display:none;
}

#arlxSeoToggle:checked ~ .arlxReadBtn .arlxMore{
display:none;
}

#arlxSeoToggle:checked ~ .arlxReadBtn .arlxLess{
display:inline;
}



/* FAQ TITLE */

.arlxFaqTitle{
border-radius:10px;
font-weight:500;
font-size:14px;
margin-bottom:10px;
}



/* faq list */

.arlxFaqList{
display:flex;
flex-direction:column;
gap:8px;
}


/* faq item */

.arlxFaqItem{
background:var(--card);
border:1px solid var(--line);
border-radius:10px;
overflow:hidden;
}


/* question */

.arlxFaqQ{
background:var(--chip);
display:flex;
justify-content:space-between;
align-items:center;
padding:9px 10px;
font-size:15px;
font-weight:500;
cursor:pointer;
-webkit-tap-highlight-color:transparent;
}



/* arrow */

.arlxFaqArrow{
width:8px;
height:8px;
border-right:2px solid var(--muted);
border-bottom:2px solid var(--muted);
transform:rotate(45deg);
transition:.25s;
}



/* answer */

.arlxFaqA{
max-height:0;
overflow:hidden;
padding:0;
font-size:14px;
line-height:1.3;
color:var(--muted);
transition:.3s;
}


/* open */

.arlxToggle:checked + .arlxFaqQ + .arlxFaqA{
max-height:200px;
padding:6px;
}

.arlxToggle:checked + .arlxFaqQ .arlxFaqArrow{
transform:rotate(225deg);
}



/* responsive */

@media(max-width:600px){

.arlxTrustGrid{
grid-template-columns:1fr;
}

.arlxTitle{
font-size:19px;
}

}

.arlx-subTitle{
  margin:0 0 12px;
  font-size:14px;
  line-height:1.25;
  font-weight:500;
  color:var(--text);
}

.arlx-grid2{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px 18px;
}

.arlx-point{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:14px;
  line-height:1.3;
  color:var(--text);
}

.arlx-ic{
  flex:0 0 auto;
  width:18px;
  min-width:18px;
  text-align:center;
  font-size:14px;
  line-height:1.4;
  font-weight:700;
  color:var(--green);
  margin-top:1px;
}

.arlx-pointX .arlx-ic{
  color:#dc2626;
}

html[data-theme="dark"] .arlx-pointX .arlx-ic{
  color:#f87171;
}

.arlx-prosCons{
  display:grid;
  grid-template-columns:1fr 1px 1fr;
  gap:20px;
  align-items:start;
  border-top:1px dashed var(--line);
  padding-top:10px;
}

.arlx-divider{
  width:1px;
  min-height:100%;
  background:var(--line);
}

.arlx-col{
  min-width:0;
}

.bottWrap { padding:10px; }

.cuFlexRowX9{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:7px;
  border-radius:18px;
  background:
    linear-gradient(180deg, var(--chip), transparent);
  border:1px solid var(--line);
  box-sizing:border-box;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.cuFlexRowX9:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow3);
}

.cuFlexLeftX9{
  min-width:0;
  flex:1;
  display:flex;
  align-items:center;
  gap:12px;
}

.cuFlexIconX9{
  width:44px;
  height:44px;
  min-width:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--iconBg);
  color:var(--text);
  font-size:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

.cuFlexMetaX9{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.cuFlexTitleX9{
  font-size:15px;
  font-weight:800;
  color:var(--text);
  line-height:1.2;
}

.cuFlexSubX9{
  font-size:12px;
  color:var(--muted);
  line-height:1.3;
}

.cuFlexBtnX9{
  max-width:62%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  text-decoration:none;
  padding:7px 8px;
  border-radius:14px;
  font-size:13px;
  font-weight:600;
  word-break:break-word;
  border:1px solid var(--line);
  background:var(--bg);
  box-shadow:var(--shadow3);
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.cuFlexBtnX9:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow);
}

.cuFlexBtnMailX9{
  color:var(--green);
}

.cuFlexBtnTgX9{
  color:var(--dlBlue);
}

@media (max-width:700px){

  .cuFlexRowX9{
    flex-direction:column;
    align-items:stretch;
    padding:7px;
    gap:12px;
    border-radius:16px;
  }

  .cuFlexLeftX9{
    width:100%;
  }

  .cuFlexBtnX9{
    width:100%;
    max-width:100%;
    justify-content:flex-start;
    text-align:left;
    padding:7px 8px;
    border-radius:12px;
  }
}

.cuFlexArrowWrapX9{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.cuFlexArrowX9{
  width:28px;
  height:28px;
  min-width:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--iconBg);
  font-size:14px;
  transition:transform .18s ease, background .18s ease;
}

.cuFlexBtnX9:hover .cuFlexArrowX9{
  transform:translateX(3px);
  background:var(--chip2);
}