/* Relay Crystal Icons v1 — drop-in */
@property --ci-sweep{syntax:'<percentage>';inherits:false;initial-value:140%}
.ci{--s:56px;--a:#93C5FD;--b:#3B82F6;--c:#1D4ED8;--glow:rgba(37,99,235,.55);
  position:relative;flex:none;width:var(--s);height:var(--s);border-radius:31%;display:grid;place-items:center;isolation:isolate;
  color:#fff;overflow:hidden;
  background:
    radial-gradient(120% 95% at 28% 12%,var(--a) 0%,var(--b) 46%,var(--c) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 0 0 1px rgba(255,255,255,.16),
    inset 0 -8px 14px -6px rgba(1,22,67,.35),
    0 14px 26px -12px var(--glow),
    0 2px 5px rgba(1,22,67,.10);
  transform:translateZ(0);
  transition:transform .55s cubic-bezier(.2,.9,.25,1.15),box-shadow .45s ease}
/* glass gloss (top half) */
.ci::before{content:"";position:absolute;inset:2px 2px 48% 2px;border-radius:28% 28% 46% 46%/34% 34% 66% 66%;
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.06));opacity:.55;z-index:0;pointer-events:none}
/* light sweep */
.ci::after{content:"";position:absolute;inset:-20%;z-index:1;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.75) 50%,transparent 62%);
  transform:translateX(var(--ci-sweep));transition:--ci-sweep 0s}
.ci svg{position:relative;z-index:2;width:54%;height:54%;overflow:visible;
  filter:drop-shadow(0 1.5px 1.5px rgba(1,22,67,.35)) drop-shadow(0 0 6px rgba(255,255,255,.25))}
.ci svg *{stroke-dasharray:1.02;stroke-dashoffset:0}
.ci .d{fill:currentColor;fill-opacity:.24}
.ci .f{fill:currentColor;stroke:none}
.ci .b{fill:var(--c)}
/* sizes */
.ci.sm{--s:44px}.ci.lg{--s:72px;border-radius:30%}.ci.xl{--s:92px}
/* glass variant for coloured surfaces */
.ci.glass{background:linear-gradient(160deg,rgba(255,255,255,.34),rgba(255,255,255,.08));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1px rgba(255,255,255,.28),0 14px 28px -12px rgba(1,22,67,.55)}
.ci.glass .b{fill:rgba(11,62,170,.9)}
/* hover: lift, tilt, glow, sweep */
.ci-host:hover .ci,.ci-host:focus-visible .ci,.ci:hover{transform:translateY(-4px) rotate(-6deg) scale(1.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1px rgba(255,255,255,.2),inset 0 -8px 14px -6px rgba(1,22,67,.35),
  0 22px 34px -12px var(--glow),0 0 0 6px color-mix(in srgb,var(--b) 14%,transparent)}
.ci-host:hover .ci::after,.ci:hover::after{--ci-sweep:-140%;transition:--ci-sweep .9s cubic-bezier(.3,.7,.2,1)}
/* draw-in */
.ci.draw svg *{animation:ci-draw .95s cubic-bezier(.45,.05,.2,1) both}
.ci.draw .d{animation:ci-draw .95s cubic-bezier(.45,.05,.2,1) both,ci-fill .6s .45s ease both}
.ci.draw .f{animation:ci-pop .5s .55s cubic-bezier(.3,1.6,.5,1) both;transform-box:fill-box;transform-origin:center}
@keyframes ci-draw{from{stroke-dashoffset:1.02}to{stroke-dashoffset:0}}
@keyframes ci-fill{from{fill-opacity:0}to{fill-opacity:.24}}
@keyframes ci-pop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
/* entrance */
.ci-reveal .ci{opacity:0;transform:translateY(14px) scale(.7) rotate(-14deg)}
.ci-reveal .ci.in{opacity:1;transform:none;transition:opacity .5s ease,transform .8s cubic-bezier(.2,1.5,.35,1);transition-delay:var(--d,0ms)}
.ci-reveal .ci-host:hover .ci.in{transform:translateY(-4px) rotate(-6deg) scale(1.06);transition-delay:0ms}
/* idle shimmer */
.ci.idle::after{animation:ci-idle 7s ease-in-out infinite;animation-delay:var(--d,0ms)}
@keyframes ci-idle{0%,82%{--ci-sweep:140%}100%{--ci-sweep:-140%}}
[dir=rtl] .ci-host:hover .ci,[dir=rtl] .ci:hover{transform:translateY(-4px) rotate(6deg) scale(1.06)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .ci{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.14),inset 0 -8px 14px -6px rgba(0,0,0,.4),0 14px 30px -10px var(--glow),0 0 0 1px rgba(255,255,255,.06)}}
:root[data-theme=dark] .ci{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.14),inset 0 -8px 14px -6px rgba(0,0,0,.4),0 14px 30px -10px var(--glow),0 0 0 1px rgba(255,255,255,.06)}
@media (prefers-reduced-motion:reduce){.ci,.ci::after,.ci svg *{transition:none!important;animation:none!important}.ci-reveal .ci{opacity:1;transform:none}}
.t-blue{--a:#93C5FD;--b:#3B82F6;--c:#1D4ED8;--glow:rgba(37,99,235,.55)}
.t-cyan{--a:#A5F3FC;--b:#22D3EE;--c:#0891B2;--glow:rgba(8,145,178,.5)}
.t-navy{--a:#7AA2F7;--b:#1E40AF;--c:#0B1E5B;--glow:rgba(30,58,138,.55)}
.t-violet{--a:#C4B5FD;--b:#8B5CF6;--c:#5B21B6;--glow:rgba(124,58,237,.5)}
.t-gold{--a:#FDE68A;--b:#F59E0B;--c:#B45309;--glow:rgba(217,119,6,.5)}
.t-wa{--a:#86EFAC;--b:#22C55E;--c:#15803D;--glow:rgba(22,163,74,.5)}
.t-ms{--a:#A5B4FC;--b:#3B82F6;--c:#7C3AED;--glow:rgba(79,70,229,.5)}
.t-ig{--a:#FDBA74;--b:#EC4899;--c:#7C3AED;--glow:rgba(219,39,119,.45)}
.t-web{--a:#67E8F9;--b:#0B5BD3;--c:#011643;--glow:rgba(11,91,211,.5)}