:root {
    --bg: #05070A;
    --surface: rgba(255, 255, 255, 0.03);
    --surface-2: #0F1218;
    --stroke: rgba(255, 255, 255, 0.06);
    --divider: rgba(255, 255, 255, 0.08);
    --text: #F9FAFB;
    --muted: #8E9AAF;
    --royal: #3B82F6;
    --royal-2: #1D4ED8;
    --gold: #FACC15;
    --silver: #94A3B8;
    --bronze: #D97706;
    --accent: #10B981;
    --danger: #F43F5E;
    --tier-a-1: #6366F1;
    --tier-a-2: #A855F7;
    --tier-b-1: #0EA5E9;
    --tier-b-2: #2563EB;
    --tier-c-1: #F59E0B;
    --tier-c-2: #D97706;
    --radius-xl: 24px;
    --radius-lg: 16px;
    --radius-md: 12px;
  }

  * { box-sizing: border-box; }

  html, body { height: 100%; }

  body {
    margin: 0;
    font-family: 'Cairo', system-ui, -apple-system, sans-serif;
    color: var(--text);
    background: #111827;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  .shell {
    max-width: 1180px;
    margin-inline: auto;
    padding: clamp(14px, 2.2vw, 24px);
  }
body > section.shell.hero > div.metrics > div > div{
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 10px;
}
  .hero {padding: 10px 0 24px;/* background: #ff00; */}

  .brand-line {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--royal);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 1px;
    padding-right: 16px;
  }

  .brand-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--royal);
    box-shadow: 0 0 12px var(--royal);
  }

  .title {
    margin: -13px 0;
    font-weight: 900;
    font-size: clamp(24px, 4vw, 36px);
    background: linear-gradient(to bottom, #FFFFFF, #94A3B8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 14px;
  }

  .subtitle {
    color: var(--muted);
    font-size: 15px;
    font-weight: 500;
    padding-right: 16px;
  }

  .metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
  }

  .metric {
    font-variant: common-ligatures;
    display: flex;
    gap: 12px;
    padding: 12px 20px;
    border-radius: var(--radius-md);
    border: 1px solid var(--stroke);
    background: #2196f330;
    backdrop-filter: blur(8px);
    width: auto;
    align-items: center;
    transition: 0.3s;
    margin-right: 11px;
  }

  .metric:hover {
    border-color: rgba(59, 130, 246, 0.3);
    background: rgba(59, 130, 246, 0.05);
  }

  .metric b { font-size: 20px; color: #fff; }

  .trust {
    margin-top: 20px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.01);
    border-radius: var(--radius-lg);
    padding: 14px;
    display: flex;
    gap: 12px;
    align-items: center;
  }

  .trust .pill {
    padding: 4px 12px;
    border-radius: 8px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: var(--accent);
    font-weight: 700;
    font-size: 12px;
  }

  @media(min-width:860px) {
    .podium { grid-template-columns: repeat(3, 1fr); align-items: end; }
  }

  .rank-num {
    font-weight: 900;
    font-size: 48px;
    line-height: 1;
    margin: 10px 0;
    background: linear-gradient(180deg, #FFF, rgba(255,255,255,0.2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }


  .lux::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px; 
    background: conic-gradient(from 0deg, transparent, var(--royal), transparent 30%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: spin 4s linear infinite;
  }

  #card-1.lux {
    background: radial-gradient(circle at center, rgba(59, 130, 246, 0.1), #ff980063);
    border-color: rgba(59, 130, 246, 0.4);
  }

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


  .row:hover {
    border-color: var(--divider);
    transform: translateX(-5px); 
  }

  .rnk {
    font-weight: 900;
    background: #03A9F4;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: var(--muted);
    font-size: 14px;
  }

  .dname { font-weight: 700; color: #E5E7EB; }

  .tier-a { border-right: 4px solid var(--tier-a-1); }
  .tier-b {border-right: 4px solid #E91E63!important;}
  .tier-c {border-right: 4px solid #1dde31 !important;}

  .tools-inner {
    padding: 12px 0;
    background: rgb(255 255 255 / 0%);
    backdrop-filter: blur(20px);
  }

  .seg {
    background: #11141b00;
    border: 0;
    padding: 4px;
  }

  .row {
    border-radius: 7px!important;
    direction: rtl;
    background: linear-gradient(135deg, #607d8bb5 0%, rgb(96 125 139 / 23%) 100%);
    padding: 13px 16px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 15px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 0;
    border-right: 4px solid;
  }


  .tier-a {
    background: linear-gradient(135deg, rgb(233 39 72 / 32%) 0%, rgb(122 84 208 / 24%) 100%);
    border: 0;
    box-shadow: inset 0 0 15px rgba(244, 63, 94, 0.1);
    border-right: 4px solid #FF9800;
  }
  .tier-a .rnk {
    background: #FF9800;
    color: white;
    box-shadow: 0 0 10px rgba(244, 63, 94, 0.4);
    border: none;
  }
  .tier-a .dname { color: #fff; text-shadow: 0 0 8px rgba(244, 63, 94, 0.3); }

  .tier-b {
    background: linear-gradient(135deg, rgb(21 32 96) 0%, rgb(122 84 208 / 24%) 100%);
    border: 0;
 }
  .tier-b .rnk {
    background: #E91E63;
    color: white;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
    border: none;
  }

  .tier-c {
    background: linear-gradient(135deg, rgb(32 109 35) 0%, rgb(122 84 208 / 24%) 100%);
    border: 0;
  }
  .tier-c .rnk {
    background: #1dde31;
    color: white;
    border: none;
  }

  .dname {
    text-align: right;
    font-size: 16px;
    font-weight: 800;
  }

  .rnk {
    order: 3;
    min-width: 45px;
    height: 30px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-family: monospace; 
  }

  .stat {
    order: 2;
    text-align: left;
    margin-left: 10px;
  }

  .bar {
    position: absolute;
    right: 0;
    top: 15%;
    height: 70%;
    width: 4px;
    border-radius: 4px 0 0 4px;
  }


  .podium {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 0;
    direction: ltr;
  }

  @media(min-width:860px) {
    .podium {
      grid-template-columns: repeat(3, 1fr);
      align-items: end; 
    }
    #card-1 { order: 2; }
    #card-2 { order: 1; }
    #card-3 { order: 3; }
  }

  .card {
    position: relative;
    background: rgba(15, 18, 24, 0.7);
    backdrop-filter: blur(15px);
    border-radius: var(--radius-xl);
    padding: 15px 20px;
    text-align: center;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid var(--stroke);
  }

  @media(min-width:860px) {
    #card-1 { padding-top: 50px; padding-bottom: 50px; }
  }

  .crown {
    width: 92px;
    height: auto;
    margin-inline: auto;
    display: block;
    margin-bottom: 10px;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
  }
.card-countries,
.row-countries,
.network-flags-only{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

.card-countries{
  margin-top:14px;
  justify-content:center;
}

.row-countries{
  margin-top:8px;
}

.country-flag-pill,
.row-country-flag,
.network-country-flag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  overflow:hidden;
}

.country-flag-pill{
  padding:6px;
}

.row-country-flag{
  padding:4px;
}

.network-country-flag{
  padding:6px;
}

.country-flag-pill img,
.row-country-flag img,
.network-country-flag img{
  display:block;
  border-radius:3px;
}
  .rank-num {
    font-weight: 900;
    font-size: 54px;
    line-height: 1;
    margin: 10px 0;
    font-family: 'Poppins', sans-serif; 
  }

  .domain {
    font-weight: 800;
    font-size: 18px;
    color: #fff;
    direction: rtl;
  }

  #card-1 {
    border-color: rgba(250, 204, 21, 0.5) !important;
    animation: goldPulse 3s infinite;
  }
  #card-1 .rank-num {
    background: linear-gradient(180deg, #FFFFFF 30%, #FACC15 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  #card-2 {
    border-color: rgba(148, 163, 184, 0.4) !important;
    animation: silverPulse 3s infinite 1s;
    background: radial-gradient(circle at center, rgba(59, 130, 246, 0.1), #e91e6338);
  }
  #card-2 .rank-num {
    background: linear-gradient(180deg, #FFFFFF 30%, #94A3B8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  #card-3 {
    border-color: rgba(217, 119, 6, 0.4) !important;
    animation: bronzePulse 3s infinite 2s;
    background: radial-gradient(circle at center, rgba(59, 130, 246, 0.1), #00bcd436);
  }
  #card-3 .rank-num {
    background: linear-gradient(180deg, #FFFFFF 30%, #D97706 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  @keyframes goldPulse {
    0%, 100% { box-shadow: 0 0 15px rgba(250, 204, 21, 0.1); border-color: rgba(250, 204, 21, 0.3); }
    50% { box-shadow: 0 0 30px rgba(250, 204, 21, 0.3); border-color: rgba(250, 204, 21, 0.6); }
  }
  @keyframes silverPulse {
    0%, 100% { box-shadow: 0 0 15px rgba(148, 163, 184, 0.1); border-color: rgba(148, 163, 184, 0.2); }
    50% { box-shadow: 0 0 30px rgba(148, 163, 184, 0.25); border-color: rgba(148, 163, 184, 0.5); }
  }
  @keyframes bronzePulse {
    0%, 100% { box-shadow: 0 0 15px rgba(217, 119, 6, 0.1); border-color: rgba(217, 119, 6, 0.2); }
    50% { box-shadow: 0 0 30px rgba(217, 119, 6, 0.25); border-color: rgba(217, 119, 6, 0.5); }
  }

  .card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -150%; 
    width: 80%;
    height: 100%;
    background: linear-gradient(
      105deg,
      transparent 20%,
      rgba(255, 255, 255, 0.08) 40%,
      rgba(255, 255, 255, 0.12) 50%,
      rgba(255, 255, 255, 0.08) 60%,
      transparent 80%
    );
    transform: skewX(-20deg); 
    animation: glintSwipe 6s infinite;
    pointer-events: none; 
  }

  #card-1::before { animation-delay: 0.5s; }
  #card-2::before { animation-delay: 2.5s; }
  #card-3::before { animation-delay: 4.5s; }

  @keyframes glintSwipe {
    0% { left: -150%; }
    15% { left: 150%; }
    100% { left: 150%; }
  }

  .card::after {
    content: "";
    position: absolute;
    inset: 10px; 
    background-image: 
      radial-gradient(circle, #fff 1px, transparent 1px),
      radial-gradient(circle, #fff 1.5px, transparent 1.5px),
      radial-gradient(circle, #fff 1px, transparent 1px);
    background-size: 80px 80px, 120px 120px, 100px 100px;
    background-position: 10% 20%, 80% 90%, 50% 50%;
    animation: sparkleEffect 4s infinite;
    opacity: 0;
    pointer-events: none;
  }

  @keyframes sparkleEffect {
    0%, 100% { opacity: 0; transform: scale(0.8); }
    10% { opacity: 0.5; transform: scale(1); }
    20% { opacity: 0; transform: scale(1.1); }
    50% { opacity: 0; }
    60% { opacity: 0.3; background-position: 20% 30%, 70% 80%, 40% 60%; }
    70% { opacity: 0; }
  }

    :root {
      --bg: #0b0f1a;
      --card: #0f1724;
      --muted: #cbd7ea;
      --accent-1: #6EE7B7;
      --accent-2: #bd96ff;
      --accent-3: #FFD166;
      --glow: rgba(124, 58, 237, .14);
      --radius: 10px;
      --glass: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
      --font-sans: "Cairo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Kufi Arabic", sans-serif;
    }

    .ad-spot-wrap {
      display: flex;
      justify-content: center;
      padding: 0;
      background: linear-gradient(135deg, #2c3e5f 0%, #2b3d5e 50%, #2b3d5e 100%);
      margin-bottom: -23px;
    }

    .ad-spot {
      width: 100%;
      max-width: 340px;
      border-radius: var(--radius);
      padding: 8px;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      direction: rtl;
      font-family: var(--font-sans);
      background: radial-gradient(500px 160px at 90% 10%, rgba(124, 58, 237, 0.04), transparent 30%), var(--glass);
      box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .03);
      position: relative;
      overflow: visible;
    }

    .ad-badge-top {
      position: absolute;
      top: -8px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      font-size: 10px;
      padding: 5px 9px;
      border-radius: 999px;
      font-weight: 800;
      background: linear-gradient(90deg, var(--accent-2), var(--accent-1));
      color: #071016;
      box-shadow: 0 6px 18px -12px var(--glow);
      text-transform: uppercase;
      letter-spacing: .45px;
    }

    .ad-left {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      z-index: 1;
      min-width: 0;
      margin-top: 8px
    }

    .ad-logo {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      flex-shrink: 0;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
      box-shadow: 0 4px 12px -8px rgba(0, 0, 0, .45), inset 0 3px 8px -10px rgba(124, 58, 237, .06);
    }

    .ad-logo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block
    }

    .ad-content {
      min-width: 0;
      flex: 1;
      z-index: 1;
      padding-right: 6px
    }

    .ad-topnote {
      font-size: 9px;
      color: rgba(255, 255, 255, .88);
      font-weight: 700;
      letter-spacing: .45px;
      background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
      -webkit-background-clip: text;
      color: transparent;
      opacity: .95;
      margin-bottom: 4px
    }

    .ad-title {
      display: flex;
      align-items: baseline;
      gap: 6px;
      line-height: 1;
      z-index: 1;
      flex-wrap: wrap
    }

    .ad-title h3 {
      margin: 0;
      font-size: 14px;
      font-weight: 900;
      color: #fff
    }

    .ad-sub {
      font-size: 11px;
      color: var(--muted);
      font-weight: 700;
      margin-right: 6px;
      opacity: .95
    }

    .ad-flair {
      height: 4px;
      width: 48px;
      border-radius: 999px;
      margin-top: 6px;
      background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
      box-shadow: 0 4px 12px -8px var(--glow);
      opacity: .95
    }

    .ad-desc {
      margin-top: 6px;
      color: var(--muted);
      font-weight: 600;
      font-size: 12px;
      max-width: 100%
    }

    .ad-visit {
      display: inline-block;
      margin: 8px auto 0;
      width: max-content;
      padding: 6px 12px;
      border-radius: 8px;
      font-weight: 800;
      text-decoration: none;
      background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
      color: #071016;
      box-shadow: 0 8px 22px -8px rgba(124, 58, 237, .14);
      transition: transform .14s ease, box-shadow .14s ease;
      text-align: center;
      font-size: 12px;
    }

    .ad-visit:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 30px -8px rgba(124, 58, 237, .18)
    }

    .ad-right {
      display: none !important
    }

    @media (max-width:420px) {
      .ad-spot {
        padding: 8px;
        gap: 8px;
        max-width: 320px
      }

      .ad-logo {
        width: 38px;
        height: 38px
      }

      .ad-title h3 {
        font-size: 13px
      }

      .ad-topnote {
        font-size: 9px
      }

      .ad-badge-top {
        top: -7px;
        padding: 4px 8px;
        font-size: 9px
      }

      .ad-visit {
        padding: 6px 10px;
        font-size: 12px
      }
    }

    .network-hero {
      margin-top: 18px;
      margin-bottom: 18px;
    }

    .network-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
    }

    @media(min-width:980px) {
      .network-grid {
        grid-template-columns: 470px 1fr;
        align-items: stretch;
      }
    }

    .network-radar,
    .network-side {
      position: relative;
      border: 1px solid rgba(255, 255, 255, .10);
      border-radius: 24px;
      overflow: hidden;
      background: radial-gradient(circle at center, rgba(59, 130, 246, 0.1), #72008673);
      /* box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .04),
        0 16px 44px rgba(0, 0, 0, .22); */
    }

    .network-radar {
      min-height: 420px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .radar-shell {
      position: relative;
      width: min(88vw, 376px);
      aspect-ratio: 1 / 1;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background:
        radial-gradient(circle at center, rgba(16, 185, 129, .15) 0%, rgba(16, 185, 129, .08) 18%, rgba(255, 255, 255, .02) 36%, rgba(255, 255, 255, .01) 56%, rgba(0, 0, 0, .08) 100%);
      border: 1px solid rgba(255, 255, 255, .10);
      box-shadow:
        inset 0 0 40px rgba(16, 185, 129, .10),
        0 0 0 10px rgba(255, 255, 255, .02),
        0 0 80px rgba(59, 130, 246, .10);
      overflow: hidden;
    }

    .radar-shell::before,
    .radar-shell::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      pointer-events: none;
    }

    .radar-shell::before {
      background:
        linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
      background-size: 100% 46px, 46px 100%;
      opacity: .22;
    }

    .radar-shell::after {
      background:
        radial-gradient(circle, transparent 0 24%, rgba(255, 255, 255, .08) 24.4% 24.8%, transparent 25.2% 49%, rgba(255, 255, 255, .08) 49.4% 49.8%, transparent 50.2% 74%, rgba(255, 255, 255, .08) 74.4% 74.8%, transparent 75.2% 100%);
      opacity: .65;
    }

    .radar-ring {
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(110, 231, 183, .18);
      box-shadow: inset 0 0 20px rgba(110, 231, 183, .04);
    }

    .ring-1 {
      width: 72%;
      height: 72%;
    }

    .ring-2 {
      width: 52%;
      height: 52%;
    }

    .ring-3 {
      width: 30%;
      height: 30%;
    }

    .radar-sweep {
      position: absolute;
      width: 50%;
      height: 50%;
      inset-inline-start: 50%;
      top: 0;
      transform-origin: bottom left;
      background: linear-gradient(135deg, rgba(110, 231, 183, .24), rgba(110, 231, 183, 0) 58%);
      filter: blur(1px);
      animation: radarSweep 6s linear infinite;
    }

    @keyframes radarSweep {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    .radar-core {
      position: relative;
      z-index: 2;
      width: 58%;
      aspect-ratio: 1 / 1;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 18px;
      background:
        radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03) 44%, rgba(0, 0, 0, .12) 100%);
      border: 1px solid rgba(255, 255, 255, .12);
      box-shadow:
        inset 0 0 22px rgba(255, 255, 255, .06),
        0 10px 30px rgba(0, 0, 0, .22);
    }

    .radar-kicker {
      font-size: 13px;
      font-weight: 900;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: #93c5fd;
      margin-bottom: 8px;
    }

    .radar-total-label {
      font-size: 15px;
      color: #dbeafe;
      font-weight: 800;
      margin-bottom: 8px;
      line-height: 1.6;
    }

    .radar-total-value {
      font-size: clamp(43px, 4.3vw, 52px);
      line-height: 1;
      font-weight: 900;
      letter-spacing: -.02em;
      color: #ffffff;
      text-shadow: 0 0 18px rgba(255, 255, 255, .10), 0 0 34px rgba(59, 130, 246, .16);
    }

    .radar-total-sub {
      margin-top: 8px;
      font-size: 13px;
      color: #9fb2c9;
      font-weight: 700;
    }

    .radar-blip {
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #6EE7B7;
      box-shadow: 0 0 0 0 rgba(110, 231, 183, .55);
      animation: radarPulse 2.2s infinite;
    }

    .radar-blip::after {
      content: "";
      position: absolute;
      inset: -4px;
      border-radius: 50%;
      border: 1px solid rgba(110, 231, 183, .26);
    }

    .b1 {
      top: 18%;
      left: 26%;
      animation-delay: 0s;
    }

    .b2 {
      top: 30%;
      right: 18%;
      animation-delay: .5s;
    }

    .b3 {
      bottom: 22%;
      left: 22%;
      animation-delay: 1s;
    }

    .b4 {
      bottom: 18%;
      right: 27%;
      animation-delay: 1.5s;
    }

    @keyframes radarPulse {
      0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(110, 231, 183, .55);
        opacity: 1;
      }

      70% {
        transform: scale(1.08);
        box-shadow: 0 0 0 16px rgba(110, 231, 183, 0);
        opacity: .92;
      }

      100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(110, 231, 183, 0);
        opacity: .82;
      }
    }

    .network-side {
      padding: 22px;
    }

    .network-headline {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, .10);
      background: rgba(255, 255, 255, .04);
      color: #cfe3ff;
      font-size: 12px;
      font-weight: 900;
    }

    .network-mini-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #6EE7B7;
      box-shadow: 0 0 0 4px rgba(110, 231, 183, .12);
    }

    .network-title {
      margin: 14px 0 8px;
      font-size: clamp(24px, 3vw, 38px);
      font-weight: 900;
      line-height: 1.2;
      color: #fff;
    }

    .network-text {
      margin: 0 0 18px;
      color: #bfd0e6;
      font-size: 14px;
      line-height: 1.9;
      max-width: 760px;
    }

    .network-stats-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    @media(max-width:640px) {
      .network-stats-grid {
        grid-template-columns: 1fr;
      }
    }

    .network-stat-card {
      position: relative;
      padding: 16px;
      border-radius: 18px;
      border: 1px solid rgba(255, 255, 255, .10);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .025));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .04),
        0 8px 24px rgba(0, 0, 0, .14);
      overflow: hidden;
    }

    .network-stat-card::before {
      content: "";
      position: absolute;
      inset-inline-start: 0;
      top: 0;
      bottom: 0;
      width: 4px;
      background: linear-gradient(180deg, #6EE7B7, #3B82F6);
      opacity: .95;
    }

    .network-stat-card-accent {
      background:
        radial-gradient(500px 180px at 100% 0%, rgba(59, 130, 246, .16), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
    }

    .network-stat-label {
      color: #b9cbe1;
      font-size: 12px;
      font-weight: 800;
      margin-bottom: 8px;
    }

    .network-stat-value {
      font-size: clamp(24px, 2.8vw, 36px);
      line-height: 1;
      font-weight: 900;
      color: #fff;
      letter-spacing: -.02em;
    }

    .network-stat-foot {
      margin-top: 8px;
      color: #8ea4c0;
      font-size: 12px;
      font-weight: 700;
    }
      .topbarTools {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    background: #ff00;
    border: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    direction: rtl;
  }

  .topbarToolsRight {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    width: 100%;
  }

  .filterTabs {
    display: flex;
    align-items: center;
    gap: 13px;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .filterTabs button {
    height: 34px;
    min-width: 82px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
    color: #cbd5e1;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: .25s ease;
    font-family: 'Cairo';
    border: 0;
  }

  .filterTabs button:hover {
    color: #fff;
    border-color: rgba(96,165,250,0.35);
    background: linear-gradient(180deg, rgba(59,130,246,0.18), rgba(37,99,235,0.10));
  }

  .filterTabs button.active {
    color: #fff;
    border-color: rgba(96, 165, 250, 0.45);
    background: #c97800;
    /* box-shadow: 0 8px 20px rgba(37,99,235,0.26); */
  }

  .searchRow {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }

  .search {
    position: relative;
    width: min(100%, 320px);
    flex-shrink: 0;
  }

  .search input {
    width: 296px;
    height: 42px;
    border-radius: 999px;
    padding: 0 46px 0 16px;
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
    border: 1px solid rgba(255,255,255,0.08);
    color: #f8fafc;
    outline: none;
    font-size: 14px;
    font-weight: 700;
    transition: .25s ease;
  }

  .search input::placeholder {
    color: #64748b;
  }

  .search input:focus {
    border-color: rgba(96,165,250,0.38);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.14);
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  }

  .search svg {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #cbd5e1;
    pointer-events: none;
    opacity: .9;
  }

  .totalBox {
    min-width: 130px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #f8fafc;
    font-size: 15px;
    font-weight: 900;
    white-space: nowrap;
  }

  .totalBox span {
    color: #ffffff;
  }

  .totalBox b {
    color: #f8fafc;
    margin-right: 4px;
  }

    .topbarTools {
      flex-direction: column;
      align-items: stretch;
    }

    .topbarToolsRight {
      align-items: stretch;
    }

    .searchRow {
      flex-direction: column-reverse;
      align-items: stretch;
    }

    .search {
      width: 100%;
    }

    .totalBox {
      justify-content: flex-start;
      min-width: auto;
      background: #ff9800c4;
      padding: 5px 19px;
      width: max-content;
      border-radius: 15px;
    }

.domain {
  position: relative;
  display: inline-block;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: 0.3px;
  text-transform: lowercase;
  line-height: 1.1;
  padding-bottom: 5px;
  cursor: pointer;
  transition: transform .25s ease;
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
  font-family: monospace;
}

.domain::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  border-radius: 999px;
}

.domain::after {
  content: "";
  position: absolute;
  top: 0;
  left: -140%;
  width: 36%;
  height: 100%;
  background: linear-gradient(
    110deg,
    transparent 0%,
    rgba(255,255,255,0) 25%,
    rgba(255,255,255,.85) 50%,
    rgba(255,255,255,0) 75%,
    transparent 100%
  );
  transform: skewX(-25deg);
  pointer-events: none;
  animation: cleanSweep 3.4s ease-in-out infinite;
}

.domain:hover {
  transform: translateY(-1px);
}

#card-1 .domain {
  color: #f8fbff;
}

@keyframes cleanSweep {
  0% {
    left: -140%;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  32% {
    left: 135%;
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  100% {
    left: 135%;
    opacity: 0;
  }
}