@layer components{.fx-gradient-border{--fx-c:var(--fx-tone,var(--primary));--fx-c2:var(--fx-tone-2,var(--accent,var(--chart-2)));--fx-border-w:1px;--fx-gap-w:3px;--fx-radius-val:var(--radius,.75rem);--fx-spotlight-size:180px;--fx-cursor-x:50%;--fx-cursor-y:50%;--fx-cursor-opacity:0;--fx-period:1;--fx-border-glow:0 0 transparent;--fx-content-inset:var(--fx-border-w);isolation:isolate;padding:var(--fx-content-inset);border-radius:var(--fx-radius-val);background:var(--card);color:var(--card-foreground);position:relative;overflow:hidden}.dark .fx-gradient-border{--fx-border-glow-mult:1.25}.fx-gradient-border[data-fx-radius=none]{--fx-radius-val:0px}.fx-gradient-border[data-fx-radius=sm]{--fx-radius-val:calc(var(--radius,.75rem) - 4px)}.fx-gradient-border[data-fx-radius=md]{--fx-radius-val:var(--radius,.75rem)}.fx-gradient-border[data-fx-radius=lg]{--fx-radius-val:calc(var(--radius,.75rem) + 4px)}.fx-gradient-border[data-fx-radius=xl]{--fx-radius-val:calc(var(--radius,.75rem) + 8px)}.fx-gradient-border[data-fx-radius="2xl"]{--fx-radius-val:calc(var(--radius,.75rem) + 16px)}.fx-gradient-border[data-fx-radius=full]{--fx-radius-val:9999px}.fx-gradient-border[data-fx-glow=sm]{--fx-border-glow:0 0 12px -2px color-mix(in oklch, var(--fx-c) 30%, transparent)}.fx-gradient-border[data-fx-glow=md]{--fx-border-glow:0 0 24px -4px color-mix(in oklch, var(--fx-c) 40%, transparent)}.fx-gradient-border[data-fx-glow=lg]{--fx-border-glow:0 0 40px -6px color-mix(in oklch, var(--fx-c) 50%, transparent)}.fx-gradient-border[data-fx-glow=xl]{--fx-border-glow:0 0 64px -8px color-mix(in oklch, var(--fx-c) 60%, transparent)}.fx-gradient-border__layer{border-radius:inherit;pointer-events:none;position:absolute;inset:0}.fx-gradient-border__glow{z-index:0;box-shadow:var(--fx-border-glow);opacity:.8;transition:opacity .25s}.fx-gradient-border:hover .fx-gradient-border__glow{opacity:1}.fx-gradient-border__ring{z-index:4;padding:var(--fx-border-w);-webkit-mask-composite:xor;overflow:hidden;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor,source-over;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);container-type:size}.fx-gradient-border[data-fx-style=linear] .fx-gradient-border__outer-ring{background:linear-gradient(135deg, var(--fx-c), color-mix(in oklch, var(--fx-c2) 80%, transparent), var(--fx-c))}.fx-gradient-border[data-fx-style=conic] .fx-gradient-border__outer-ring{background:conic-gradient(from 180deg at 50% 50%, var(--fx-c), var(--fx-c2), var(--fx-c))}.fx-gradient-border[data-fx-style=subtle] .fx-gradient-border__outer-ring{background:linear-gradient(135deg, color-mix(in oklch, var(--fx-c) 65%, var(--border)), var(--border) 40%, var(--border) 60%, color-mix(in oklch, var(--fx-c2) 60%, var(--border)))}.fx-gradient-border[data-fx-style=flow] .fx-gradient-border__outer-ring{background:linear-gradient(90deg, var(--fx-c), var(--fx-c2))}.fx-gradient-border__flow{background:linear-gradient(90deg, var(--fx-c), var(--fx-c2), var(--fx-c));width:200%;height:100%;position:absolute;top:0;left:0}.fx-gradient-border__beam{background:conic-gradient(from 0deg, transparent 0 60%, color-mix(in oklch, var(--fx-c2) 75%, transparent) 76%, var(--fx-c) 88%, transparent 96%);width:160cqmax;height:160cqmax;position:absolute;top:50%;left:50%;transform:rotate(45deg)}.fx-gradient-border[data-fx-running=true] .fx-gradient-border__beam,.fx-gradient-border[data-fx-running=true] .fx-gradient-border__flow{will-change:transform}.fx-gradient-border[data-fx-variant=animated] .fx-gradient-border__outer-ring{background:color-mix(in oklch, var(--fx-c) 15%, var(--border))}@keyframes fx-gradient-border-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes fx-gradient-border-flow{0%{transform:translate(0)}to{transform:translate(-50%)}}@keyframes fx-gradient-border-pulse{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}.fx-gradient-border[data-fx-motion=expressive] .fx-gradient-border__beam{animation:fx-gradient-border-spin calc(5s * var(--fx-period)) linear infinite}.fx-gradient-border[data-fx-motion=subtle] .fx-gradient-border__beam{animation:fx-gradient-border-spin calc(8.5s * var(--fx-period)) linear infinite;opacity:.75}.fx-gradient-border[data-fx-motion=expressive] .fx-gradient-border__flow{animation:fx-gradient-border-flow calc(2s * var(--fx-period)) ease-in-out infinite alternate}.fx-gradient-border[data-fx-motion=subtle] .fx-gradient-border__flow{animation:fx-gradient-border-flow calc(3.5s * var(--fx-period)) ease-in-out infinite alternate;opacity:.8}.fx-gradient-border[data-fx-running=false] .fx-gradient-border__beam,.fx-gradient-border[data-fx-running=false] .fx-gradient-border__flow{animation-play-state:paused}.fx-gradient-border[data-fx-motion=none] .fx-gradient-border__beam,.fx-gradient-border[data-fx-motion=none] .fx-gradient-border__flow{animation:none}@media (prefers-reduced-motion:reduce){.fx-gradient-border .fx-gradient-border__beam,.fx-gradient-border .fx-gradient-border__flow{animation:none}}.fx-gradient-border__hover-spotlight{opacity:var(--fx-cursor-opacity,0);background:radial-gradient(var(--fx-spotlight-size) circle at var(--fx-cursor-x,50%) var(--fx-cursor-y,50%), var(--fx-c) 0%, color-mix(in oklch, var(--fx-c2) 65%, transparent) 40%, transparent 100%);pointer-events:none;transition:opacity .25s;position:absolute;inset:0}.fx-gradient-border[data-fx-variant=hover-glow] .fx-gradient-border__outer-ring{background:color-mix(in oklch, var(--fx-c) 12%, var(--border))}.fx-gradient-border[data-fx-variant=hover-glow][data-fx-hover=true] .fx-gradient-border__outer-ring{background:color-mix(in oklch, var(--fx-c) 25%, var(--border))}.fx-gradient-border[data-fx-variant=double]{--fx-content-inset:calc(var(--fx-border-w) + var(--fx-gap-w) + 1px)}.fx-gradient-border__inner-ring{z-index:4;inset:calc(var(--fx-border-w) + var(--fx-gap-w));border-radius:calc(var(--fx-radius-val) - var(--fx-border-w) - var(--fx-gap-w));background:color-mix(in oklch, var(--border) 80%, var(--fx-c));-webkit-mask-composite:xor;padding:1px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor,source-over;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}.fx-gradient-border[data-fx-variant=double] .fx-gradient-border__outer-ring{background:linear-gradient(135deg, var(--fx-c), color-mix(in oklch, var(--fx-c2) 75%, transparent), var(--fx-c))}.dark .fx-gradient-border[data-fx-variant=double] .fx-gradient-border__inner-ring{background:color-mix(in oklch, var(--border) 60%, var(--fx-c))}.fx-gradient-border__content{z-index:3;border-radius:max(0px, calc(var(--fx-radius-val) - var(--fx-content-inset)));background:var(--card);min-width:0;color:var(--card-foreground);flex:auto;position:relative;overflow:clip}.fx-gradient-border>.fx-gradient-border__content{--muted-foreground:color-mix(in oklch, var(--muted-foreground) 80%, var(--foreground))}.fx-gradient-border-card{flex-direction:column;display:flex}.fx-gradient-border-card__header{justify-content:space-between;align-items:flex-start;gap:1rem;padding:1.5rem 1.5rem .75rem;display:flex}.fx-gradient-border-card__heading{flex-direction:column;gap:.25rem;display:flex}.fx-gradient-border-card__title{color:var(--card-foreground);font-size:1.125rem;font-weight:600;line-height:1.4}.fx-gradient-border-card__description{color:var(--muted-foreground);font-size:.875rem;line-height:1.5}.fx-gradient-border-card__badge{flex-shrink:0}.fx-gradient-border-card__body{flex:auto;padding:.75rem 1.5rem 1.5rem}.fx-gradient-border-card__footer{border-top:1px solid var(--border);justify-content:space-between;align-items:center;gap:1rem;padding:.75rem 1.5rem 1.25rem;display:flex}.fx-gradient-border-panel{flex-direction:column;width:100%;display:flex}.fx-gradient-border-panel__header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:1rem;padding:1.25rem 1.5rem;display:flex}.fx-gradient-border-panel__heading{flex-direction:column;gap:.125rem;display:flex}.fx-gradient-border-panel__title{color:var(--card-foreground);font-size:1.25rem;font-weight:600}.fx-gradient-border-panel__subtitle{color:var(--muted-foreground);font-size:.875rem}.fx-gradient-border-panel__action{align-items:center;gap:.5rem;display:flex}.fx-gradient-border-panel__body{padding:1.5rem}}
