:root {
  --tik-ultra-accent: #16a34a;
  --tik-ultra-accent-2: #22c55e;
  --tik-ultra-ink: #06130c;
  --tik-ultra-soft: rgba(22, 163, 74, .10);
  --tik-ultra-line: rgba(22, 163, 74, .18);
  --tik-ultra-glow: rgba(22, 163, 74, .28);
}

.tik-icon-wrap {
  --tik-icon-size: 22px;
  --tik-icon-wrap-size: 46px;
  --tik-icon-wrap-radius: 17px;
  --tik-icon-wrap-color: var(--tik-ultra-accent);
  --tik-icon-wrap-bg: rgba(22, 163, 74, .10);
  --tik-icon-wrap-border: rgba(22, 163, 74, .16);
  --tik-icon-wrap-shadow: 0 16px 36px rgba(6, 78, 42, .10);
  position: relative;
  display: inline-grid;
  place-items: center;
  inline-size: var(--tik-icon-wrap-size);
  block-size: var(--tik-icon-wrap-size);
  border-radius: var(--tik-icon-wrap-radius);
  color: var(--tik-icon-wrap-color);
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.78), transparent 34%),
    var(--tik-icon-wrap-bg);
  border: 1px solid var(--tik-icon-wrap-border);
  box-shadow:
    var(--tik-icon-wrap-shadow),
    inset 0 1px 0 rgba(255,255,255,.72);
  isolation: isolate;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease, color .22s ease;
}

.tik-icon-wrap .tik-icon {
  --tik-icon-size: 22px;
  width: var(--tik-icon-size);
  height: var(--tik-icon-size);
  position: relative;
  z-index: 2;
}

.tik-icon-wrap::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.44), transparent);
  transform: rotate(28deg) translateX(90%);
  opacity: .75;
  transition: transform .55s ease;
  z-index: 1;
}

.tik-icon-wrap:hover {
  transform: translateY(-2px) scale(1.02);
  border-color: rgba(22, 163, 74, .32);
  box-shadow:
    0 22px 48px rgba(6, 78, 42, .18),
    0 0 0 7px rgba(34, 197, 94, .06),
    inset 0 1px 0 rgba(255,255,255,.78);
}

.tik-icon-wrap:hover::before {
  transform: rotate(28deg) translateX(-90%);
}

.tik-icon-mode-plain {
  display: inline-grid;
  place-items: center;
  inline-size: auto;
  block-size: auto;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

.tik-icon-mode-plain::before { display: none; }

.tik-icon-mode-badge { --tik-icon-wrap-size: 46px; --tik-icon-wrap-radius: 17px; }
.tik-icon-mode-orb { --tik-icon-wrap-size: 54px; --tik-icon-wrap-radius: 999px; }
.tik-icon-mode-button { --tik-icon-wrap-size: 44px; --tik-icon-wrap-radius: 15px; }
.tik-icon-mode-card { --tik-icon-wrap-size: 68px; --tik-icon-wrap-radius: 24px; }
.tik-icon-mode-pill {
  inline-size: auto;
  block-size: 42px;
  min-inline-size: 42px;
  padding-inline: 13px;
  grid-auto-flow: column;
  gap: 8px;
  border-radius: 999px;
}

.tik-icon-size-xs { --tik-icon-size: 14px; --tik-icon-wrap-size: 32px; }
.tik-icon-size-sm { --tik-icon-size: 18px; --tik-icon-wrap-size: 40px; }
.tik-icon-size-md { --tik-icon-size: 22px; --tik-icon-wrap-size: 46px; }
.tik-icon-size-lg { --tik-icon-size: 28px; --tik-icon-wrap-size: 58px; }
.tik-icon-size-xl { --tik-icon-size: 36px; --tik-icon-wrap-size: 74px; }

.tik-icon-skin-soft {
  --tik-icon-wrap-color: #087d3d;
  --tik-icon-wrap-bg: rgba(34, 197, 94, .11);
  --tik-icon-wrap-border: rgba(34, 197, 94, .18);
}

.tik-icon-skin-glass {
  --tik-icon-wrap-color: #087d3d;
  --tik-icon-wrap-bg: rgba(255, 255, 255, .66);
  --tik-icon-wrap-border: rgba(34, 197, 94, .18);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.tik-icon-skin-glow {
  --tik-icon-wrap-color: #fff;
  --tik-icon-wrap-bg: linear-gradient(135deg, #22c55e, #059669 55%, #065f46);
  --tik-icon-wrap-border: rgba(255, 255, 255, .28);
  --tik-icon-wrap-shadow: 0 22px 46px rgba(22, 163, 74, .32);
}

.tik-icon-skin-dark {
  --tik-icon-wrap-color: #bbf7d0;
  --tik-icon-wrap-bg: linear-gradient(135deg, #052e16, #021f10);
  --tik-icon-wrap-border: rgba(187, 247, 208, .18);
  --tik-icon-wrap-shadow: 0 22px 44px rgba(0, 0, 0, .28);
}

.tik-icon-skin-lime {
  --tik-icon-wrap-color: #365314;
  --tik-icon-wrap-bg: linear-gradient(135deg, #bef264, #4ade80);
  --tik-icon-wrap-border: rgba(255, 255, 255, .34);
  --tik-icon-wrap-shadow: 0 22px 46px rgba(132, 204, 22, .28);
}

.tik-icon-skin-sky {
  --tik-icon-wrap-color: #075985;
  --tik-icon-wrap-bg: rgba(14, 165, 233, .12);
  --tik-icon-wrap-border: rgba(14, 165, 233, .20);
  --tik-icon-wrap-shadow: 0 20px 42px rgba(14, 165, 233, .16);
}

.tik-icon-skin-violet {
  --tik-icon-wrap-color: #5b21b6;
  --tik-icon-wrap-bg: rgba(139, 92, 246, .12);
  --tik-icon-wrap-border: rgba(139, 92, 246, .20);
  --tik-icon-wrap-shadow: 0 20px 42px rgba(139, 92, 246, .16);
}

.tik-icon-skin-gold {
  --tik-icon-wrap-color: #713f12;
  --tik-icon-wrap-bg: linear-gradient(135deg, #fde68a, #fbbf24);
  --tik-icon-wrap-border: rgba(255, 255, 255, .34);
  --tik-icon-wrap-shadow: 0 22px 46px rgba(245, 158, 11, .25);
}

.tik-icon-skin-rose {
  --tik-icon-wrap-color: #9f1239;
  --tik-icon-wrap-bg: rgba(244, 63, 94, .12);
  --tik-icon-wrap-border: rgba(244, 63, 94, .20);
  --tik-icon-wrap-shadow: 0 20px 42px rgba(244, 63, 94, .16);
}

.tik-icon-pulse::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: inherit;
  border: 1px solid currentColor;
  opacity: .18;
  animation: tikIconPulse 1.8s ease-in-out infinite;
}

@keyframes tikIconPulse {
  0%, 100% { transform: scale(.92); opacity: .05; }
  45% { transform: scale(1.08); opacity: .20; }
}

.tik-icon-float {
  animation: tikIconFloat 3.5s ease-in-out infinite;
}

@keyframes tikIconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.tik-icon-label {
  position: relative;
  z-index: 2;
  color: currentColor;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

/* Header/menu ready helpers */
.tik-menu-icon {
  inline-size: 46px;
  block-size: 46px;
  border-radius: 17px;
}

.tik-mega-icon-ultra {
  inline-size: 48px;
  block-size: 48px;
  border-radius: 18px;
}

.tik-result-icon-ultra {
  inline-size: 46px;
  block-size: 46px;
  border-radius: 16px;
}

/* TikLine Ultra V3 — brand/course icon upgrades */
.tik-icon-wrap .tik-icon [fill]:not([fill="none"]) {
  stroke: initial;
}

.tik-icon-wrap.tik-icon-mode-brand {
  --tik-icon-wrap-size: 58px;
  --tik-icon-wrap-radius: 22px;
  --tik-icon-size: 32px;
}

.tik-icon-wrap.tik-v3-premium {
  background:
    radial-gradient(circle at 25% 18%, rgba(255,255,255,.86), transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,.84), rgba(240,253,244,.72));
  border-color: rgba(22, 163, 74, .18);
  box-shadow:
    0 20px 46px rgba(5, 20, 10, .12),
    inset 0 1px 0 rgba(255,255,255,.88);
}

.tik-icon-wrap.tik-v3-premium:hover {
  box-shadow:
    0 28px 64px rgba(5, 20, 10, .18),
    0 0 0 8px rgba(34, 197, 94, .06),
    inset 0 1px 0 rgba(255,255,255,.92);
}

.tik-icon-v3-card {
  display:inline-grid;
  place-items:center;
  inline-size:86px;
  block-size:86px;
  border-radius:28px;
  color:#087d3d;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.90), transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,.86), rgba(240,253,244,.72));
  border:1px solid rgba(22,163,74,.16);
  box-shadow:0 22px 50px rgba(5,20,10,.12), inset 0 1px 0 rgba(255,255,255,.9);
}
.tik-icon-v3-card .tik-icon {
  width:46px;
  height:46px;
}