:root {
  --cc-icon-accent: #8b3dd6;
  --cc-icon-size: 38px;
}

.cc-icon-shell {
  position: relative;
  isolation: isolate;
  display: grid !important;
  width: var(--cc-icon-size);
  min-width: var(--cc-icon-size);
  height: var(--cc-icon-size);
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent) !important;
  border-radius: 11px;
  color: var(--cc-icon-accent);
  background:
    radial-gradient(circle at 28% 18%, color-mix(in srgb, currentColor 34%, white 5%), transparent 43%),
    linear-gradient(145deg, color-mix(in srgb, currentColor 17%, transparent), color-mix(in srgb, currentColor 6%, transparent)) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 52%, transparent),
    inset 0 -10px 18px color-mix(in srgb, currentColor 8%, transparent),
    0 7px 18px color-mix(in srgb, currentColor 18%, transparent);
  font-size: 0 !important;
  line-height: 0;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.cc-icon-shell::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 14%, transparent);
  filter: blur(7px);
}

.cc-power-icon {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 auto;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.75 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: drop-shadow(0 2px 4px color-mix(in srgb, currentColor 38%, transparent));
  transition: transform .2s ease, filter .2s ease, stroke-width .2s ease;
}

.cc-icon-button > .cc-power-icon {
  width: 19px !important;
  height: 19px !important;
}

.voice-mode-icon.cc-icon-shell {
  --cc-icon-size: 28px;
  border-radius: 9px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 42%, transparent), 0 4px 12px color-mix(in srgb, currentColor 18%, transparent);
}

.voice-mode-icon.cc-icon-shell .cc-power-icon {
  width: 16px !important;
  height: 16px !important;
}

:is(button,a,[role="button"]):hover :is(.cc-icon-shell,.cc-power-direct),
:is(button,a,[role="button"]):focus-visible :is(.cc-icon-shell,.cc-power-direct),
:is(.card,.section-card,article):hover > .cc-icon-shell {
  transform: translateY(-1px) scale(1.045);
  border-color: color-mix(in srgb, currentColor 54%, transparent) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 70%, transparent),
    0 0 0 3px color-mix(in srgb, currentColor 8%, transparent),
    0 10px 24px color-mix(in srgb, currentColor 28%, transparent);
}

:is(button,a,[role="button"]):hover .cc-power-icon,
:is(button,a,[role="button"]):focus-visible .cc-power-icon {
  transform: scale(1.08);
  stroke-width: 1.95 !important;
  filter: drop-shadow(0 0 7px color-mix(in srgb, currentColor 60%, transparent));
}

:is(.metric-icon,.kpi-icon).red,
:is(.metric-icon,.kpi-icon).danger { color: #fb7185 !important; }
:is(.metric-icon,.kpi-icon).green,
:is(.metric-icon,.kpi-icon).positive { color: #34d399 !important; }
:is(.metric-icon,.kpi-icon).yellow,
:is(.metric-icon,.kpi-icon).amber,
:is(.metric-icon,.kpi-icon).warning { color: #fbbf24 !important; }
:is(.metric-icon,.kpi-icon).blue,
:is(.metric-icon,.kpi-icon).cyan { color: #38bdf8 !important; }
:is(.metric-icon,.kpi-icon).violet,
:is(.metric-icon,.kpi-icon).purple { color: #a78bfa !important; }

:is(.nav-item,.sidebar nav button) > svg.cc-power-direct {
  width: var(--cc-icon-size) !important;
  height: var(--cc-icon-size) !important;
  padding: 9px;
  overflow: visible;
  border: 1px solid color-mix(in srgb, currentColor 26%, transparent);
  border-radius: 11px;
  background:
    radial-gradient(circle at 28% 18%, color-mix(in srgb, currentColor 28%, transparent), transparent 46%),
    linear-gradient(145deg, color-mix(in srgb, currentColor 15%, transparent), color-mix(in srgb, currentColor 5%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 42%, transparent), 0 7px 18px color-mix(in srgb, currentColor 15%, transparent);
}

:is(.mobile-nav-item,.cc-mobile-nav-item) .cc-icon-shell,
.cc-mobile-preview .cc-icon-shell {
  --cc-icon-size: 30px;
  border-radius: 9px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 42%, transparent), 0 4px 10px color-mix(in srgb, currentColor 14%, transparent);
}

:is(.mobile-nav-item,.cc-mobile-nav-item) .cc-power-icon,
.cc-mobile-preview .cc-power-icon {
  width: 18px !important;
  height: 18px !important;
}

@media (max-width: 720px) {
  :root { --cc-icon-size: 40px; }
  :is(.mobile-nav-item,.cc-mobile-nav-item) .cc-icon-shell { --cc-icon-size: 31px; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-icon-shell,
  .cc-power-icon { transition: none !important; }
}