/* B — Leque de vidro: transient actions anchored to the existing +. */
:root { --fan-glass: rgba(37,50,71,.79); --fan-label: #202a3b; --fan-text: #f4f6fa; --fan-line: rgba(255,255,255,.22); --fan-veil: rgba(6,13,27,.21); --fan-shine: rgba(255,255,255,.25); }
html[data-theme="light"] { --fan-glass: rgba(255,255,255,.72); --fan-label: #fff; --fan-text: #202648; --fan-line: rgba(32,38,72,.17); --fan-veil: rgba(232,235,240,.20); --fan-shine: rgba(255,255,255,.87); }
html body #mobileCreateOverlayM.mobile-create-fan { z-index: 10050; display: block; background: var(--fan-veil); font-family: 'Manrope', system-ui, sans-serif; font-weight: 600; }
#mobileCreateOverlayM.mobile-create-fan[hidden] { display: none !important; }
html body #mobileCreateOverlayM.mobile-create-fan .mobile-create-panel { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; padding: 0; margin: 0; background: transparent; border: 0; border-radius: 0; overflow: visible; pointer-events: none; color: var(--fan-text); }
.mobile-create-fan .mobile-create-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }
.mobile-create-fan .mobile-create-actions { position: absolute; left: var(--fan-left); top: var(--fan-top); width: 252px; height: 244px; pointer-events: none; }
.mobile-create-fan .mobile-create-action { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 116px; min-height: 108px; padding: 0; border: 0; background: transparent; color: var(--fan-text); font: inherit; font-size: .875rem; line-height: 1.45; text-align: center; cursor: pointer; pointer-events: auto; transform-origin: center bottom; }
.mobile-create-fan .mobile-create-action[hidden] { display: none !important; }
.mobile-create-fan #mobileCreateChecklistM { top: 0; right: 0; width: 108px; animation: fan-appear-up 240ms cubic-bezier(.2,.75,.2,1) backwards; }
.mobile-create-fan #mobileCreateOrderM { top: 104px; left: 0; animation: fan-appear-left 240ms cubic-bezier(.2,.75,.2,1) backwards; }
.mobile-create-fan .mobile-create-orb { width: 72px; height: 72px; flex: 0 0 72px; display: grid; place-items: center; border: 1px solid var(--fan-line); border-radius: 50%; background: var(--fan-glass); backdrop-filter: blur(36px) saturate(1.25); -webkit-backdrop-filter: blur(36px) saturate(1.25); box-shadow: inset 0 1px 0 var(--fan-shine),0 3px 10px rgba(0,0,0,.09); color: var(--hub-nav-accent); }
.mobile-create-fan .mobile-create-orb svg { width: 28px; height: 28px; }
.mobile-create-fan .mobile-create-label { padding: 7px 10px; border: 1px solid var(--fan-line); border-radius: 10px; background: var(--fan-label); color: var(--fan-text); font-size: .875rem; line-height: 1.45; overflow-wrap: anywhere; }
html body #mobileCreateOverlayM #mobileCreateCloseM { position: absolute; left: var(--fan-x); top: var(--fan-y); width: var(--fan-size,58px); height: var(--fan-size,58px); min-width: 48px; min-height: 48px; display: grid; place-items: center; padding: 0; border: 1px solid var(--fan-line); border-radius: 50%; background: var(--fan-glass); backdrop-filter: blur(56px) saturate(1.35); -webkit-backdrop-filter: blur(56px) saturate(1.35); box-shadow: inset 0 1px 0 var(--fan-shine),0 3px 10px rgba(0,0,0,.12); color: var(--hub-nav-accent); pointer-events: auto; cursor: pointer; }
#mobileCreateCloseM svg { width: 28px; height: 28px; transform: rotate(45deg); animation: fan-close-symbol 210ms ease-out backwards; }
html body #globalBnav.create-fan-open #nb-center-action { opacity: 0; }
html body #globalBnav.create-fan-open .hub-nav-destinations { opacity: .5; }
.mobile-create-fan .mobile-create-action:active .mobile-create-orb { background: var(--fan-label); }
#mobileCreateOverlayM.mobile-create-fan :focus-visible { outline: 3px solid var(--hub-nav-accent); outline-offset: 3px; border-radius: 16px; }
/* Large text, short screens and a centered + use a scrollable column. */
.mobile-create-fan.create-fan-stacked .mobile-create-actions { top: 12px; bottom: var(--fan-bottom); left: auto; right: 12px; width: min(360px,calc(100% - 24px)); height: auto; display: flex; flex-direction: column; justify-content: safe flex-end; gap: 16px; overflow-y: auto; overscroll-behavior: contain; padding: 5px; pointer-events: auto; }
.mobile-create-fan.create-fan-stacked #mobileCreateChecklistM,
.mobile-create-fan.create-fan-stacked #mobileCreateOrderM { position: static; width: 100%; min-height: 76px; flex-shrink: 0; flex-direction: row-reverse; align-items: center; gap: 12px; animation: fan-column-in 180ms ease-out backwards; }
html body #mobileCreateOverlayM.mobile-create-fan.create-fan-stacked .mobile-create-label { flex: 0 1 auto; min-width: 0; max-width: calc(100% - 74px); text-align: right; }
.mobile-create-fan.create-fan-stacked .mobile-create-orb { width: 62px; height: 62px; flex-basis: 62px; }
@keyframes fan-appear-up { from { opacity: 0; transform: translate(16px,144px) scale(.55); } to { opacity: 1; transform: none; } }
@keyframes fan-appear-left { from { opacity: 0; transform: translate(115px,55px) scale(.55); } to { opacity: 1; transform: none; } }
@keyframes fan-close-symbol { from { transform: rotate(0); } to { transform: rotate(45deg); } }
@keyframes fan-column-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
html[data-hub-transparency="reduced"] .mobile-create-fan .mobile-create-orb,
html[data-hub-transparency="reduced"] body #mobileCreateOverlayM #mobileCreateCloseM { background: var(--fan-label); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .mobile-create-fan .mobile-create-orb, html body #mobileCreateOverlayM #mobileCreateCloseM { background: var(--fan-label); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
}
@media (prefers-contrast: more) { #mobileCreateOverlayM { --fan-line: var(--fan-text); } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mobile-create-fan .mobile-create-orb, html body #mobileCreateOverlayM #mobileCreateCloseM { background: var(--fan-label); }
}
@media (prefers-reduced-motion: reduce) {
  #mobileCreateOverlayM.mobile-create-fan *, #mobileCreateOverlayM.mobile-create-fan *::before { animation: none !important; transition: none !important; }
}