/* A closed color cycle: the first and last stops match at every frame. */
@property --pay-border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes pay-border-orbit {
  from { --pay-border-angle: 0deg; }
  to { --pay-border-angle: 360deg; }
}
.fenixpay-workspace .pay-outline-flow {
  background: conic-gradient(from var(--pay-border-angle), #ff4237 0deg, #ffcc33 60deg, #36e884 120deg, #20c8ee 180deg, #9054ff 240deg, #eb43b7 300deg, #ff4237 360deg);
  animation: pay-border-orbit 8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .fenixpay-workspace .pay-outline-flow { animation: none; }
}

/* Compact, readable shortcuts keep the initial dashboard within the HUD. */
nav[aria-label="Ecossistema do hub"] > span { grid-column: 1 / -1; margin: 0 0 4px 8px; }
nav[aria-label="Ecossistema do hub"] button span { min-width: 0; white-space: normal; text-align: center; letter-spacing: .035em; line-height: 1.15; }
nav[aria-label="Ecossistema do hub"] button > div > div { display: flex; justify-content: center; }
nav[aria-label="Ecossistema do hub"] button svg { width: 18px; height: 18px; }


/* Nearby outlines fade at their tips; the fill and text remain untouched. */
.proximity-outline{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:var(--proximity-opacity,0);transition:opacity 160ms ease;-webkit-mask-image:radial-gradient(64px circle at var(--mouse-x,-300px) var(--mouse-y,-300px),#000,transparent);mask-image:radial-gradient(64px circle at var(--mouse-x,-300px) var(--mouse-y,-300px),#000,transparent);}
.proximity-outline>span{position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:linear-gradient(115deg,#ef4444,#f97316,#eab308,#22c55e,#38bdf8,#8b5cf6,#ec4899);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;}
[data-proximity-tile]:hover>.proximity-outline{opacity:1;}
[data-proximity-tile]:focus-visible>.proximity-outline,[data-proximity-tile][aria-current="page"]>.proximity-outline,[data-proximity-tile][aria-selected="true"]>.proximity-outline{opacity:.85;}
nav[aria-label="Ecossistema do hub"] button{border-radius:0!important;min-height:68px;}

/* Compact wallet lock in the HUD only; regular mobile access stays unchanged. */
.pay-lock--embedded{display:flex;align-items:center;justify-content:center;}
.pay-lock--embedded>div{max-width:300px;padding:10px 16px;}
.pay-lock--embedded>div>div:first-of-type{margin-bottom:8px;gap:8px;}
.pay-lock--embedded>div>div:first-of-type img,.pay-lock--embedded>div>div:first-of-type>span:first-child{width:30px;height:30px;}
.pay-lock--embedded>div>svg{width:30px;height:30px;margin-bottom:8px;}
.pay-lock--embedded h2{font-size:17px;line-height:23px;}
.pay-lock--embedded p{font-size:12px;line-height:17px;margin-top:6px;}
.pay-lock--embedded .mt-5{margin-top:10px;}
.pay-lock--embedded [aria-label="Teclado numérico com posições aleatórias"]{max-width:240px;}
.pay-lock--embedded [aria-label="Teclado numérico com posições aleatórias"]>div:first-child{margin-bottom:8px;}
.pay-lock--embedded [aria-label="Teclado numérico com posições aleatórias"] .grid{row-gap:2px;}
.pay-lock--embedded [aria-label="Teclado numérico com posições aleatórias"] button{width:40px;height:40px;font-size:21px;}
.pay-lock--embedded [aria-label="Desbloquear com digital"]{width:44px;height:44px;margin-top:10px;margin-bottom:6px;}
.pay-lock--embedded [aria-label="Desbloquear com digital"] svg{width:27px;height:27px;}
.pay-lock--embedded [role="status"]{font-size:11px;line-height:15px;}

/* Shared grid seams occupy one pixel, never two parallel outlines. */
nav[aria-label="Ecossistema do hub"]{column-gap:0;row-gap:0;}
nav[aria-label="Ecossistema do hub"] button{margin:0;}
nav[aria-label="Ecossistema do hub"] .proximity-outline>span{padding:0;background:none;-webkit-mask:none;mask:none;}
nav[aria-label="Ecossistema do hub"] .proximity-outline>span::after{content:'';position:absolute;inset:0;border:0;border-top:1px solid;border-right:1px solid;border-image:linear-gradient(115deg,#ef4444,#f97316,#eab308,#22c55e,#38bdf8,#8b5cf6,#ec4899) 1;}
nav[aria-label="Ecossistema do hub"] button:nth-of-type(3n+1) .proximity-outline>span::after{border-left:1px solid;}
nav[aria-label="Ecossistema do hub"] button:nth-last-of-type(-n+3) .proximity-outline>span::after{border-bottom:1px solid;}

.pay-circle-outline{border:1px solid transparent;background:linear-gradient(#09090b,#09090b) padding-box,conic-gradient(#ef4444,#f97316,#eab308,#22c55e,#06b6d4,#6366f1,#a855f7,#ec4899,#ef4444) border-box}.pay-qr-guide,.pay-qr-actions{position:relative}.pay-qr-guide::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:conic-gradient(#ef4444,#f97316,#eab308,#22c55e,#06b6d4,#6366f1,#a855f7,#ec4899,#ef4444);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.pay-qr-actions:has(textarea){border-radius:32px}.pay-qr-actions:not(:has(textarea)){border-radius:999px}

/* In the compact HUD, show the local back action on inner pages and keep the exit on home. */
.fenixpay-workspace.h-full header button[aria-label="Voltar à área anterior"]:has(+button[aria-label="Voltar no FenixPay"]){display:none}.fenixpay-workspace.h-full header h1{font-size:15px}

/* A narrow light grazing the edges, with a soft falloff rather than lit rectangles. */
.proximity-outline{
 -webkit-mask-image:radial-gradient(ellipse 96px 72px at var(--mouse-x,50%) var(--mouse-y,50%),#000 0%,rgba(0,0,0,.8) 18%,rgba(0,0,0,.28) 48%,transparent 78%);
 mask-image:radial-gradient(ellipse 96px 72px at var(--mouse-x,50%) var(--mouse-y,50%),#000 0%,rgba(0,0,0,.8) 18%,rgba(0,0,0,.28) 48%,transparent 78%);
 transition:opacity 280ms ease;
}
[data-proximity-tile]:hover>.proximity-outline{opacity:.95}
nav[aria-label="Ecossistema do hub"] .proximity-outline>span::after{filter:drop-shadow(0 0 2px rgba(110,150,255,.5));}
nav[aria-label="Ecossistema do hub"] button{transition:color 220ms ease,background-color 220ms ease,transform 150ms ease;}
nav[aria-label="Ecossistema do hub"] button:hover{background-color:rgba(255,255,255,.025);}
/* The camera tray has a feathered neutral edge; only its controls keep their rings. */
.pay-qr-actions{border:0;background:rgba(8,8,10,.72);box-shadow:0 0 14px 8px rgba(8,8,10,.6),0 0 32px 12px rgba(0,0,0,.32);}
.pay-qr-actions::before{content:none;}
@media (prefers-reduced-motion:reduce){.proximity-outline{transition:none;}}

/* Delayed, fading edge-only light for cursor and native touch scrolling. */
.proximity-outline{
 --edge-mask:radial-gradient(ellipse 96px 72px at var(--mouse-x,50%) var(--mouse-y,50%),#000 0%,#000b 20%,transparent 78%),radial-gradient(ellipse 82px 60px at var(--trail-1-x,-200px) var(--trail-1-y,-200px),rgba(0,0,0,calc(var(--trail-strength,0)*.48)),transparent 78%),radial-gradient(ellipse 72px 52px at var(--trail-2-x,-200px) var(--trail-2-y,-200px),rgba(0,0,0,calc(var(--trail-strength,0)*.25)),transparent 78%),radial-gradient(ellipse 60px 44px at var(--trail-3-x,-200px) var(--trail-3-y,-200px),rgba(0,0,0,calc(var(--trail-strength,0)*.12)),transparent 78%);
 -webkit-mask-image:var(--edge-mask);mask-image:var(--edge-mask);transition:opacity 220ms ease;filter:saturate(1.25);
}
[data-proximity-tile]:hover>.proximity-outline{opacity:1;filter:saturate(1.5) brightness(1.35)}
[data-proximity-tile]:focus-visible>.proximity-outline,[data-proximity-tile][aria-current="page"]>.proximity-outline,[data-proximity-tile][aria-selected="true"]>.proximity-outline,[data-proximity-tile]:active>.proximity-outline{opacity:1;-webkit-mask-image:none;mask-image:none;filter:saturate(1.5) brightness(1.4) drop-shadow(0 0 3px #8b5cf688)}
[data-proximity-tile][aria-current="page"]{color:#fff}
[data-proximity-tile][aria-current="page"]>div>div{color:#fff}
@media(prefers-reduced-motion:reduce){.fenix-global-qr-slide{transition:none!important}.proximity-outline{--edge-mask:radial-gradient(96px circle at var(--mouse-x,50%) var(--mouse-y,50%),#000,transparent);transition:none}}

/* Touch browsers can retain :hover after a tap; the trail must still fade. */
@media(hover:none){
 [data-proximity-tile]:hover>.proximity-outline{opacity:var(--proximity-opacity,0);filter:saturate(1.25)}
 [data-proximity-tile]:active>.proximity-outline,[data-proximity-tile]:focus-visible>.proximity-outline,[data-proximity-tile][aria-current="page"]>.proximity-outline,[data-proximity-tile][aria-selected="true"]>.proximity-outline{opacity:1;filter:saturate(1.5) brightness(1.4)}
}