:root {
  --premium-blue: #08c7ff;
  --premium-purple: #8c45ff;
  --premium-green: #00eb84;
  --premium-line: rgba(255,255,255,.16);
}

.he-icon {
  width: 22px;
  height: 22px;
  display: inline-block;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(8,199,255,.14));
}

.he-icon.sm { width: 18px; height: 18px; }
.he-icon.lg { width: 30px; height: 30px; }
.he-icon.xl { width: 38px; height: 38px; }

.icon-premium {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #fff;
  overflow: hidden;
  border: 1px solid var(--premium-line);
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,.30), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -16px 28px rgba(0,0,0,.14),
    0 18px 36px rgba(0,0,0,.22);
}

.icon-premium::before {
  content: "";
  position: absolute;
  inset: -45%;
  background: linear-gradient(120deg, transparent 34%, rgba(255,255,255,.32), transparent 58%);
  transform: translateX(-60%) rotate(10deg);
  transition: transform .45s ease;
}

.icon-premium:hover::before,
.big-action:hover .icon-premium::before,
.quick-row:hover .icon-premium::before,
.admin-card:hover .icon-premium::before {
  transform: translateX(60%) rotate(10deg);
}

.icon-premium.blue {
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,.32), transparent 34%),
    linear-gradient(135deg, rgba(8,199,255,.95), rgba(22,104,255,.72));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 0 28px rgba(8,199,255,.34),
    0 18px 36px rgba(0,0,0,.22);
}

.icon-premium.purple {
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,.34), transparent 34%),
    linear-gradient(135deg, rgba(140,69,255,.95), rgba(176,92,255,.70));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 0 28px rgba(140,69,255,.34),
    0 18px 36px rgba(0,0,0,.22);
}

.icon-premium.green {
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,.34), transparent 34%),
    linear-gradient(135deg, rgba(0,235,132,.95), rgba(0,199,139,.72));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 0 28px rgba(0,235,132,.34),
    0 18px 36px rgba(0,0,0,.22);
}

.icon-premium.dark {
  color: var(--premium-blue);
  background:
    radial-gradient(circle at 28% 20%, rgba(8,199,255,.22), transparent 34%),
    linear-gradient(135deg, rgba(8,199,255,.16), rgba(140,69,255,.08));
  border-color: rgba(8,199,255,.26);
}

.big-action .icon-premium {
  margin: 0 auto 11px;
}

.quick-icon,
.page-head-icon,
.action-icon,
.icon-btn {
  display: grid !important;
  place-items: center !important;
}

.quick-icon .he-icon,
.page-head-icon .he-icon,
.action-icon .he-icon,
.icon-btn .he-icon {
  width: 18px;
  height: 18px;
}

.page-head-icon {
  color: var(--premium-blue);
}

.bottom-nav a {
  gap: 1px;
}

.bottom-nav .he-icon {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

.bottom-nav a.active .he-icon {
  color: #fff;
  filter: drop-shadow(0 0 10px rgba(8,199,255,.55));
}

.brand-mark {
  background:
    conic-gradient(from 180deg, #08c7ff, #1668ff, #8c45ff, #00eb84, #08c7ff) !important;
  box-shadow:
    0 0 20px rgba(8,199,255,.30),
    0 10px 22px rgba(0,0,0,.24) !important;
}

.brand-mark::before,
.brand-mark::after {
  background:
    linear-gradient(90deg, transparent 45%, rgba(6,15,31,.64) 46%, rgba(6,15,31,.64) 54%, transparent 55%),
    linear-gradient(0deg, transparent 45%, rgba(6,15,31,.64) 46%, rgba(6,15,31,.64) 54%, transparent 55%) !important;
}

.hero-visual {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 82px;
  height: 82px;
  opacity: .18;
  color: var(--premium-blue);
  filter: drop-shadow(0 0 18px rgba(8,199,255,.55));
  pointer-events: none;
}

.hero-card,
.auth-card,
.section-card,
.ref-card,
.wallet-panel {
  position: relative;
}

.premium-orb {
  position: absolute;
  width: 150px;
  height: 150px;
  right: -70px;
  top: -80px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(8,199,255,.18), rgba(140,69,255,.08), transparent 70%);
  pointer-events: none;
}

.admin-card {
  position: relative;
  overflow: hidden;
}

.admin-card .icon-premium {
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
}

.admin-card::after {
  content: "";
  position: absolute;
  right: -35px;
  bottom: -35px;
  width: 100px;
  height: 100px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(8,199,255,.10), transparent 70%);
  pointer-events: none;
}

.wallet-card::before,
.plan-card::before,
.list-item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 36%, rgba(8,199,255,.04));
  opacity: .8;
}

.wallet-card,
.plan-card,
.list-item {
  position: relative;
  overflow: hidden;
}

svg.he-icon * {
  vector-effect: non-scaling-stroke;
}