/* vyron.css — VYRON FIT L154 (Brand topo + tipografia futurista) */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Rajdhani:wght@500;600;700&family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  --vy-lime:#16a34a;
  --vy-lime-soft:#E3FF3D;
  --vy-lime-deep:#15803d;
  --vy-violet:#A78BFA;
  --vy-violet-deep:#7C3AED;

  --brand:#16a34a;
  --brand-2:#15803d;
  --brand-glow:rgba(34,197,94,.35);
  --brand-glow2:rgba(34,197,94,.15);
  --accent:#16a34a;
  --accent2:#A78BFA;
  --bg:#000000;
  --surface:#0F0F10;
  --card:#15151A;
  --border:#1F1F22;
  --text:#FFFFFF;
  --muted:#A0A0A5;
  --green:#16a34a;

  --u-cyan:#16a34a;
  --u-cyan-d:#15803d;
  --u-violet:#A78BFA;
  --u-pink:#A78BFA;
  --u-emerald:#16a34a;
  --u-amber:#E3FF3D;
  --u-bg:#000000;
  --u-bg-elev:#0F0F10;
  --u-bg-card:#15151A;
  --u-bg-glass:rgba(21,21,26,.78);
  --u-text:#FFFFFF;
  --u-text-mute:#A0A0A5;
  --u-grad-main:linear-gradient(135deg,#E3FF3D 0%,#16a34a 50%,#15803d 100%);
  --u-grad-blue:linear-gradient(135deg,#16a34a,#15803d);
  --u-grad-violet:linear-gradient(135deg,#A78BFA,#7C3AED);
  --u-grad-emerald:linear-gradient(135deg,#16a34a,#15803d);
  --u-grad-amber:linear-gradient(135deg,#E3FF3D,#15803d);
  --u-shadow:0 8px 28px rgba(0,0,0,.6);
  --u-shadow-hover:0 18px 48px rgba(34,197,94,.2);
  --u-border:1px solid rgba(255,255,255,.06);
  --u-border-glow:1px solid rgba(34,197,94,.25);
}

html,body{background:#000 !important;color:#FFFFFF}
body{
  background:
    radial-gradient(1200px 600px at 85% -10%,rgba(34,197,94,.06),transparent 60%),
    radial-gradient(900px 500px at -10% 30%,rgba(167,139,250,.04),transparent 60%),
    #000 !important;
  background-attachment:fixed;
  font-family:'Inter','SF Pro Display',system-ui,sans-serif;
}

/* Scrollbar */
*::-webkit-scrollbar-thumb{background:rgba(34,197,94,.35) !important}
*::-webkit-scrollbar-thumb:hover{background:rgba(34,197,94,.55) !important}

/* ============================================================
   BRAND BAR — FUTURISTA, sempre no TOPO ABSOLUTO
   ============================================================ */
.vy-header-brand{
  position:sticky !important;
  top:0 !important;
  z-index:9999 !important;
  background:linear-gradient(180deg,rgba(0,0,0,.98),rgba(0,0,0,.85)) !important;
  backdrop-filter:blur(20px) !important;
  -webkit-backdrop-filter:blur(20px) !important;
  padding:10px 16px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:14px !important;
  border-bottom:1px solid rgba(34,197,94,.18) !important;
  box-shadow:0 4px 20px rgba(0,0,0,.6), 0 0 40px rgba(34,197,94,.08) !important;
  overflow:hidden;
  position:relative;
}
.vy-header-brand::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(34,197,94,.6) 50%,transparent 100%);
  animation:vyScan 4s ease-in-out infinite;
}
@keyframes vyScan{
  0%,100%{opacity:.4;transform:translateX(-100%)}
  50%{opacity:1;transform:translateX(0)}
}

.vy-header-brand svg{
  width:34px;height:34px;flex-shrink:0;
  filter:drop-shadow(0 0 8px rgba(34,197,94,.5));
  animation:vyLogoPulse 3s ease-in-out infinite;
}
@keyframes vyLogoPulse{
  0%,100%{filter:drop-shadow(0 0 8px rgba(34,197,94,.5))}
  50%{filter:drop-shadow(0 0 16px rgba(34,197,94,.85))}
}

.vy-header-brand .name,
.vy-header-brand > div > .name{
  font-family:'Orbitron','Rajdhani',sans-serif !important;
  font-weight:900 !important;
  font-size:22px !important;
  color:#fff !important;
  letter-spacing:.18em !important;
  text-shadow:0 0 12px rgba(34,197,94,.18);
  display:inline-block;
  vertical-align:middle;
}
.vy-header-brand .fit,
.vy-header-brand > div > .fit{
  font-family:'Rajdhani','Orbitron',sans-serif !important;
  color:#16a34a !important;
  font-style:italic !important;
  font-weight:700 !important;
  letter-spacing:.38em !important;
  font-size:14px !important;
  margin-left:10px !important;
  text-shadow:0 0 12px rgba(34,197,94,.6);
  position:relative;
  display:inline-block;
  vertical-align:middle;
}
.vy-header-brand .fit::before{
  content:"";position:absolute;left:-6px;top:50%;width:3px;height:3px;
  background:#16a34a;border-radius:50%;
  box-shadow:0 0 8px #16a34a;
}

/* Empilha top-bar abaixo do brand bar (não sobrepõe) */
.top-bar{
  position:sticky !important;
  top:54px !important;
  z-index:99 !important;
}

/* Garante que o brand bar fique acima de QUALQUER outro elemento sticky */
header.vy-header-brand,.vy-header-brand{position:sticky;top:0;z-index:9999}

/* ============================================================
   Componente .vy-brand reutilizável
   ============================================================ */
.vy-brand{
  display:inline-flex;align-items:baseline;gap:8px;
  font-family:'Orbitron','Rajdhani',sans-serif;
  line-height:1;
}
.vy-brand .vyron{font-weight:900;font-size:1em;color:#fff;letter-spacing:.18em}
.vy-brand .fit{
  color:#16a34a;font-weight:700;font-style:italic;
  letter-spacing:.38em;font-size:.6em;
  text-shadow:0 0 8px rgba(34,197,94,.5);
}

/* ============================================================
   Resto do tema (cores)
   ============================================================ */

.bnav a.active,.bottom-nav a.active,nav.bottom a.active{color:#16a34a !important}
.bnav a.active .ic{filter:drop-shadow(0 0 8px rgba(34,197,94,.55))}

.btn:not(.ghost):not(.danger):not(.warn):not(.violet):not(.q-btn),
button.primary,button[type=submit]{
  background:linear-gradient(135deg,#E3FF3D,#16a34a,#15803d) !important;
  color:#000 !important;
  box-shadow:0 8px 22px rgba(34,197,94,.3),inset 0 1px 0 rgba(255,255,255,.4);
}
.btn.ghost{background:rgba(255,255,255,.04) !important;color:#fff !important;border:1px solid rgba(255,255,255,.12) !important}

.aluno-hero,.hero-pro,.profile-hero,.u-hero,.hd{
  background:linear-gradient(135deg,rgba(34,197,94,.08),rgba(167,139,250,.05),rgba(0,0,0,0)) !important;
}

.top-bar .av,.av,.avatar,.user-av{
  background:linear-gradient(135deg,#E3FF3D,#15803d) !important;
  color:#000 !important;
  border-color:rgba(34,197,94,.35) !important;
  box-shadow:0 6px 18px rgba(34,197,94,.3) !important;
}

.gradient,.vy-gradient,.u-gradient-text,.gradient-text,
[class*="grad-main"]{
  color:#16a34a;background:linear-gradient(135deg,#E3FF3D,#16a34a,#A78BFA) !important;color:#000;-webkit-text-fill-color:#000;!important;
  background-clip:text !important;
}

/* Nome no top-bar (Boa tarde, USER) — agora limpo */
.top-bar .grt .nm{
  color:#16a34a;background:linear-gradient(135deg,#E3FF3D,#16a34a,#A78BFA) !important;color:#000;-webkit-text-fill-color:#000;!important;
  background-clip:text !important;
}

.l130-card,.card,.feat,.action,.kpi,.vy-card,.stat-card{
  background:#0F0F10;
  border:1px solid rgba(255,255,255,.05);
}
.l130-card:hover,.card:hover,.feat:hover,.action:hover{
  border-color:rgba(34,197,94,.3);
  box-shadow:0 14px 34px rgba(34,197,94,.15);
}

input:focus,select:focus,textarea:focus{
  border-color:#16a34a !important;
  box-shadow:0 0 0 3px rgba(34,197,94,.16) !important;
}

.pill,.tag,.badge{
  background:rgba(34,197,94,.12);
  color:#16a34a;
  border:1px solid rgba(34,197,94,.25);
}
.pill.violet{background:rgba(167,139,250,.12);color:#A78BFA;border-color:rgba(167,139,250,.3)}

.streak-pill{
  background:linear-gradient(135deg,#E3FF3D,#15803d) !important;
  color:#000 !important;
  box-shadow:0 8px 22px rgba(34,197,94,.35) !important;
}
.streak-pill .n,.streak-pill .l{color:#000 !important}

.tabs button.active,.range button.active,.filters button.active{
  background:linear-gradient(135deg,#16a34a,#15803d) !important;
  color:#000 !important;
}

.qbtn:hover,.q-btn:hover{background:rgba(34,197,94,.12) !important;border-color:#16a34a !important}
.qbtn.active,.q-btn.active{
  background:linear-gradient(135deg,rgba(34,197,94,.3),rgba(167,139,250,.2)) !important;
  border-color:#16a34a !important;
  color:#fff !important;
}

.tele-card{background:linear-gradient(135deg,#15803d,#0F0F10) !important;color:#fff !important}
.tele-card a{background:#16a34a !important;color:#000 !important}

.wod-banner{background:linear-gradient(135deg,#dc2626,#f59e0b,#16a34a) !important}
.banner-pro{background:linear-gradient(135deg,#A78BFA,#7C3AED,#16a34a) !important}

.step.active .step-num{border-color:#16a34a !important;color:#16a34a !important}
.step.done .step-num{background:#16a34a !important;color:#000 !important;border-color:#16a34a !important}

.fab-main,.u-fab{
  background:linear-gradient(135deg,#E3FF3D,#16a34a,#15803d) !important;
  color:#000 !important;
  box-shadow:0 12px 32px rgba(34,197,94,.5) !important;
}

.goal-card{background:linear-gradient(135deg,rgba(34,197,94,.1),rgba(34,197,94,.04)) !important;border-color:rgba(34,197,94,.25) !important}
.goal-card .info .pg .fill{background:linear-gradient(90deg,#15803d,#16a34a) !important}

.wellness{background:linear-gradient(135deg,rgba(34,197,94,.08),rgba(167,139,250,.06)) !important;border-color:rgba(34,197,94,.18) !important}

[style*="#22d3ee"]{color:#16a34a !important}
[style*="#a855f7"]{color:#A78BFA !important}
[style*="#0ea5e9"]{color:#15803d !important}
[style*="#ec4899"]{color:#A78BFA !important}

/* Glow helpers */
.vy-glow{box-shadow:0 0 0 2px rgba(34,197,94,.4),0 0 24px rgba(34,197,94,.5)}
.vy-pulse{animation:vyPulse2 2s ease-in-out infinite}
@keyframes vyPulse2{
  0%,100%{box-shadow:0 0 0 2px rgba(34,197,94,.4),0 0 16px rgba(34,197,94,.4)}
  50%{box-shadow:0 0 0 4px rgba(34,197,94,.5),0 0 32px rgba(34,197,94,.7)}
}

.vy-tagline{
  display:flex;justify-content:space-around;gap:24px;flex-wrap:wrap;
  font-family:'Orbitron','Rajdhani',sans-serif;
  font-size:11px;letter-spacing:.22em;font-weight:700;text-transform:uppercase;
  padding:14px 16px;
}
.vy-tagline span:nth-child(odd){color:#fff}
.vy-tagline span:nth-child(even){color:#16a34a}

@media print{body{background:#fff !important;color:#000 !important}}


/* =============================================================
   L155 — SCROLL UNIVERSAL FIX (override tudo que possa travar)
   ============================================================= */
html{
  height:auto !important;
  min-height:100% !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
  scroll-behavior:smooth;
}
body{
  height:auto !important;
  min-height:100vh !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
  touch-action:pan-y !important;
  overscroll-behavior-y:auto !important;
  padding-bottom:120px !important;
  position:relative !important;
}

/* Containers principais nunca travam scroll */
main,.container,.shell,.wrap,.page,.app-content,.app-wrap,
form,.profile-form,#root,article,section{
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  -webkit-overflow-scrolling:touch;
}

/* Brand bar sticky NÃO trava scroll do body */
.vy-header-brand{
  position:sticky !important;
  top:0 !important;
  z-index:9999 !important;
}

/* Top-bar sticky */
.top-bar{
  position:sticky !important;
  top:54px !important;
  z-index:99 !important;
}

/* Bottom nav fixed mas não bloqueia */
.bnav,.bottom-nav,nav.bottom{
  position:fixed !important;
  bottom:0;left:0;right:0;
  z-index:9988;
}

/* FAB sem bloquear scroll */
.fab-main,.u-fab{
  position:fixed !important;
  bottom:84px;right:14px;
  z-index:9990;
}

/* Modais quando abertos não devem permanentemente afetar scroll do body */
.modal:not(.open):not(.show),.photo-modal:not(.show){display:none !important}

/* Garante área tocável */
.app-wrap,.container,main{padding-bottom:140px}

/* iOS safe area */
@supports (padding:env(safe-area-inset-bottom)){
  body{padding-bottom:calc(120px + env(safe-area-inset-bottom)) !important}
  .bnav,.bottom-nav{padding-bottom:env(safe-area-inset-bottom) !important}
}


/* =============================================================
   L161 — FAB menor + sem sobreposição + brand FIT separador
   ============================================================= */

/* FAB menor (era 56px, agora 48px) */
.fab-main,.u-fab,.vy-fab{
  width:48px !important;height:48px !important;font-size:18px !important;
  bottom:78px !important;right:14px !important;
}

/* FAB menu aberto — em coluna empilhada sem sobrepor */
.fab-menu{
  position:fixed !important;
  bottom:138px !important;right:14px !important;
  display:none;flex-direction:column;gap:8px;align-items:flex-end;
  z-index:9989;
}
.fab-menu.open{display:flex !important}
.fab-menu a,.fab-menu button{
  background:rgba(15,15,16,.97) !important;
  backdrop-filter:blur(20px);
  color:#fff !important;text-decoration:none;font-weight:800;
  padding:8px 13px !important;border-radius:11px;font-size:11px !important;
  border:1px solid rgba(34,197,94,.25) !important;
  display:flex !important;align-items:center;gap:6px;
  box-shadow:0 6px 18px rgba(0,0,0,.5),0 0 14px rgba(34,197,94,.08);
  white-space:nowrap;transition:.15s;
  max-width:200px;
}
.fab-menu a:hover{transform:translateX(-4px);background:rgba(34,197,94,.15) !important;border-color:#16a34a !important}
.fab-menu a .ic{font-size:14px !important}

/* Brand bar VYRON FIT — separador "—FIT—" estilo */
.vy-header-brand .fit::before{content:"—"; margin-right:4px; opacity:.6}
.vy-header-brand .fit::after{content:"—"; margin-left:4px; opacity:.6}
.vy-header-brand .fit{margin-left:8px !important}

/* Responsivo mobile/PC */
@media (max-width:520px){
  .vy-header-brand{padding:8px 12px !important}
  .vy-header-brand svg{width:28px !important;height:28px !important}
  .vy-header-brand .name{font-size:18px !important;letter-spacing:.14em !important}
  .vy-header-brand .fit{font-size:11px !important;letter-spacing:.3em !important}
  .top-bar{top:46px !important}
}
@media (min-width:1200px){
  .wrap,.app-wrap{max-width:1100px !important}
}

/* Bottom nav — não sobrepor FAB */
.bnav,.bottom-nav{
  padding-right:74px !important;
}

/* PWA install button */
.pwa-install-btn{
  position:fixed;bottom:138px;left:14px;z-index:9988;
  background:linear-gradient(135deg,#16a34a,#15803d);color:#000;
  border:none;padding:9px 16px;border-radius:11px;font-weight:900;font-size:11px;
  cursor:pointer;box-shadow:0 6px 18px rgba(34,197,94,.4);
  display:none;
}

/* Universal touch-friendly tap targets */
button,a.btn,.btn,.qbtn{min-height:44px}

/* Form scroll on mobile */
input,textarea,select{font-size:16px !important}
@media(min-width:768px){input,textarea,select{font-size:14px !important}}


/* =============================================================
   L164 — Brand bar: V SVG = primeira letra de VYRON
   ============================================================= */
.vy-header-brand{
  padding:8px 14px !important;
  gap:0 !important;
  align-items:center !important;
}
.vy-header-brand svg{
  width:34px !important;height:34px !important;
  margin-right:-4px !important;
  filter:drop-shadow(0 0 8px rgba(34,197,94,.5));
}
.vy-header-brand .name{
  font-family:'Orbitron',sans-serif !important;
  font-weight:900 !important;
  font-size:24px !important;
  letter-spacing:.06em !important;
  color:#fff !important;
  text-transform:uppercase !important;
  /* "Esconde" o V inicial e mostra só YRON */
  font-size:0 !important;
}
.vy-header-brand .name::after{
  content:"YRON";
  font-size:24px;
  color:#fff;
  letter-spacing:.06em;
}
.vy-header-brand .fit{
  font-family:'Rajdhani',sans-serif !important;
  color:#16a34a !important;
  font-style:italic !important;
  font-weight:700 !important;
  font-size:15px !important;
  letter-spacing:.3em !important;
  margin-left:10px !important;
  border:none !important;
  padding:0 !important;
  text-shadow:0 0 10px rgba(34,197,94,.5);
}
.vy-header-brand .fit::before,
.vy-header-brand .fit::after{content:none !important}

/* Em mobile */
@media (max-width:520px){
  .vy-header-brand svg{width:28px !important;height:28px !important;margin-right:-2px !important}
  .vy-header-brand .name::after{font-size:20px}
  .vy-header-brand .fit{font-size:12px !important;letter-spacing:.25em !important;margin-left:7px !important}
}


/* =============================================================
   L167 — Brand: V SVG + "YRON FIT" (sem letra V no texto)
   + Limpa flutuantes extras
   ============================================================= */

/* Brand bar: V SVG é a primeira letra; texto começa em "YRON" */
.vy-header-brand .name{
  font-size:0 !important;
  letter-spacing:0 !important;
}
.vy-header-brand .name::after{
  content:"YRON" !important;
  font-family:'Orbitron',sans-serif !important;
  font-weight:900 !important;
  font-size:24px !important;
  letter-spacing:.08em !important;
  color:#fff !important;
  text-transform:uppercase !important;
}

/* Esconder duplicados de toolkit antigo */
#l120-section .l120-streak,
#l121-section .l121-water,
#l121-section .l121-mood,
#l121-section .l121-goal{
  display:none !important;
}

/* user/index.html — esconder bell antigos extras se houver */
#bell-icon-old,
.legacy-bell,
.bell-fallback{display:none !important}

/* Apenas 1 FAB ativo (esconder outros) */
.fab-main ~ .fab-main,
.u-fab ~ .u-fab{display:none !important}

/* Esconder ícones avulsos com mais de 2 por canto */
.l165-floating,
[data-l165]{display:none !important}

/* PWA install botão menor e fora do caminho */
.pwa-install-btn{
  bottom:auto !important;top:80px !important;
  left:50% !important;right:auto !important;
  transform:translateX(-50%) !important;
  font-size:10px !important;
}

/* Dashboard aluno: 1 ÚNICA Meta, 1 Hidratação, 1 Humor (CSS hard) */
.stats-row ~ .stats-row,
.goal-card ~ .goal-card,
.wellness ~ .wellness{display:none !important}

/* Topbar acima do brand-bar ao rolar — z-index lock */
.vy-topbar,.top-bar{z-index:98 !important}
.vy-header-brand{z-index:9999 !important}


/* =============================================================
   L168 — Polimento ULTRA dashboards
   ============================================================= */

/* Header sequence: brand bar (z=9999) -> greeting (z=97) -> topbar legacy (z=98 escondido em dashboards) */
.vy-header-brand{top:0 !important;z-index:9999 !important}
#l168-greeting{top:54px !important;z-index:97 !important}

/* Se tiver top-bar legacy E greeting novo, esconder topbar */
body:has(#l168-greeting) .top-bar{display:none !important}

/* KPIs / cards consistentes */
.kpi,.vy-kpi,.action,.feat,.l130-card,.card,.tile{
  background:#0F0F10 !important;
  border:1px solid rgba(255,255,255,.06) !important;
  border-radius:14px !important;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.kpi:hover,.action:hover,.feat:hover,.tile:hover{
  transform:translateY(-2px);
  border-color:rgba(34,197,94,.3) !important;
  box-shadow:0 12px 28px rgba(34,197,94,.12);
}

/* Stat values lime */
.kpi .v,.vy-kpi .val,.stat-card .number{
  color:#16a34a !important;
  font-weight:900;
}

/* Titles dashboards */
.dashboard-title,.hero-pro h1,.aluno-hero h1{
  color:#16a34a;background:linear-gradient(135deg,#E3FF3D,#16a34a,#A78BFA) !important;color:#000;-webkit-text-fill-color:#000;!important;
  background-clip:text !important;
}

/* Action grid links — corrigir cor */
.action,.feat{color:#fff !important;text-decoration:none}
.action .ttl,.feat .nm{color:#fff !important}

/* Garantir botões consistentes */
.btn,.btn-primary,.btn-main,button.primary,button[type=submit]{
  background:linear-gradient(135deg,#E3FF3D,#16a34a,#15803d) !important;
  color:#000 !important;
  border:none !important;
}

/* Estiliza primeiro h1 em dashboard como title */
.app-content > h1:first-child,
.container > h1:first-child,
main > h1:first-child{
  color:#16a34a;background:linear-gradient(135deg,#E3FF3D,#16a34a,#A78BFA);color:#000;-webkit-text-fill-color:#000;
  letter-spacing:-.5px;
}


/* =============================================================
   L169 — Brand bar PRIMEIRO ABSOLUTO. NADA ACIMA.
   ============================================================= */

/* HTML/Body sem espaço acima */
html,body{margin:0 !important;padding-top:0 !important}

/* Brand bar tem o maior z-index e top:0 */
.vy-header-brand{
  position:sticky !important;
  top:0 !important;
  z-index:99999 !important;
  margin:0 !important;
  padding:10px 14px !important;
  width:100% !important;
  box-sizing:border-box !important;
}

/* Hide any safe-area or notch fill */
.safe-area-top,.notch-fill,[data-safe-top]{display:none !important}

/* Top-bar legacy fica DEPOIS do brand (top:54px) */
.top-bar{
  position:sticky !important;
  top:54px !important;
  z-index:98 !important;
}

/* L168 greeting (em outras dashes) fica DEPOIS do brand */
#l168-greeting{
  position:sticky !important;
  top:54px !important;
  z-index:97 !important;
}

/* PWA install / banners ALERTAS escondidos da área superior */
.pwa-install-btn,.alert-banner,.cookie-banner,.update-banner{
  position:fixed !important;
  top:auto !important;
  bottom:80px !important;
  z-index:9990 !important;
}

/* SW register notification fora do topo */
.sw-update,#sw-update-banner{
  position:fixed !important;
  top:auto !important;
  bottom:60px !important;
  z-index:9989 !important;
}


/* =============================================================
   L170 — Polimento ULTRA: animações sutis + glow
   ============================================================= */

/* Hover lift suave em todos os botões */
button:not(:disabled),.btn,a.btn{
  transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s ease,filter .15s ease !important;
}
button:not(:disabled):active{transform:scale(.97)}

/* Smooth scroll */
html{scroll-behavior:smooth !important}

/* Better focus rings (acessibilidade) */
a:focus,button:focus,input:focus,select:focus,textarea:focus{
  outline:2px solid rgba(34,197,94,.5) !important;
  outline-offset:2px !important;
}

/* Loading skeleton */
.vy-skeleton{
  background:linear-gradient(90deg,#0F0F10 25%,#1a1a1b 50%,#0F0F10 75%);
  background-size:200% 100%;
  animation:vySkel 1.5s ease-in-out infinite;
  border-radius:8px;
}
@keyframes vySkel{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Fade in pages */
@keyframes vyPageFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
main,.wrap,.container,.app-wrap{animation:vyPageFade .35s cubic-bezier(.2,.7,.2,1)}

/* Toast position */
.toast,#toast-root{
  position:fixed !important;
  bottom:90px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  z-index:9995 !important;
}

/* Improve modal overlays */
.modal-backdrop,.overlay,.photo-modal{
  background:rgba(0,0,0,.92) !important;
  backdrop-filter:blur(20px) !important;
  -webkit-backdrop-filter:blur(20px) !important;
}

/* Notifications push glow */
[id*="notif"],[class*="notif"]:not([class*="notify-disabled"]){
  filter:none;
}

/* Tap highlight */
*{-webkit-tap-highlight-color:rgba(34,197,94,.15)}

/* iframe Jitsi border lime */
iframe[src*="jit.si"]{border:1px solid rgba(34,197,94,.3) !important;border-radius:14px !important}

/* Status dots animação */
@keyframes vyDot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.7}}
.status-dot,[class*="status-indicator"]{animation:vyDot 1.5s ease-in-out infinite}


/* =============================================================
   L171 — Brand bar correto: V SVG + span text "YRON" (sem hack)
   ============================================================= */
.vy-header-brand .name{
  font-family:'Orbitron',sans-serif !important;
  font-weight:900 !important;
  font-size:24px !important;
  letter-spacing:.08em !important;
  color:#fff !important;
  text-transform:uppercase !important;
}
.vy-header-brand .name::after{content:none !important}
.vy-header-brand .name::before{content:none !important}
@media (max-width:520px){
  .vy-header-brand .name{font-size:20px !important}
}


/* =============================================================
   L176 — Brand "VYRON / FIT" com logo atrás
   ============================================================= */

/* Brand bar compacto (header sticky): logo pequeno + VYRON + FIT inline */
.vy-header-brand{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:8px 14px !important;
}
.vy-header-brand svg{
  width:32px !important;
  height:32px !important;
  flex-shrink:0;
  filter:drop-shadow(0 0 8px rgba(34,197,94,.5));
}
.vy-header-brand .name{
  font-family:'Orbitron',sans-serif !important;
  font-weight:900 !important;
  font-size:22px !important;
  letter-spacing:.1em !important;
  color:#fff !important;
  text-transform:uppercase !important;
  font-size:22px !important;
}
.vy-header-brand .name::after,
.vy-header-brand .name::before{content:none !important}
.vy-header-brand .fit{
  font-family:'Rajdhani',sans-serif !important;
  font-style:italic !important;
  font-weight:700 !important;
  font-size:12px !important;
  letter-spacing:.3em !important;
  color:#16a34a !important;
  margin-left:10px !important;
  padding:0 8px !important;
  position:relative;
  border:none !important;
  text-shadow:0 0 8px rgba(34,197,94,.5);
}
.vy-header-brand .fit::before,
.vy-header-brand .fit::after{
  content:"—";
  margin:0 4px;
  color:#16a34a;
  opacity:.7;
  font-weight:700;
  font-style:normal;
  letter-spacing:0;
}

/* Brand VERTICAL grande (splash/login) — usa class .vy-brand-big */
.vy-brand-big{
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
  padding:30px 20px;
  text-align:center;
}
.vy-brand-big .logo-bg{
  width:90px;height:90px;
  display:block;
  margin-bottom:6px;
  filter:drop-shadow(0 0 30px rgba(34,197,94,.55));
}
.vy-brand-big .vyron-txt{
  font-family:'Orbitron',sans-serif;
  font-weight:900;
  font-size:54px;
  letter-spacing:.06em;
  color:#fff;
  text-transform:uppercase;
  line-height:1;
  text-shadow:0 0 16px rgba(34,197,94,.18);
}
.vy-brand-big .fit-txt{
  font-family:'Rajdhani',sans-serif;
  font-style:italic;
  font-weight:700;
  font-size:22px;
  letter-spacing:.45em;
  color:#16a34a;
  text-transform:uppercase;
  margin-top:6px;
  position:relative;
  padding:0 30px;
  display:inline-block;
  text-shadow:0 0 12px rgba(34,197,94,.6);
}
.vy-brand-big .fit-txt::before,
.vy-brand-big .fit-txt::after{
  content:"";
  position:absolute;
  top:50%;
  width:24px;
  height:2px;
  background:#16a34a;
  box-shadow:0 0 8px rgba(34,197,94,.7);
}
.vy-brand-big .fit-txt::before{left:0}
.vy-brand-big .fit-txt::after{right:0}

.vy-brand-big .tagline{
  margin-top:18px;
  font-family:'Inter',sans-serif;
  font-size:11px;
  letter-spacing:.18em;
  font-weight:700;
  color:#A0A0A5;
  text-transform:uppercase;
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}
.vy-brand-big .tagline span{display:inline-flex;align-items:center;gap:6px}
.vy-brand-big .tagline span::before{content:"•";color:#16a34a;font-size:14px}

@media (max-width:520px){
  .vy-brand-big .logo-bg{width:70px;height:70px}
  .vy-brand-big .vyron-txt{font-size:42px}
  .vy-brand-big .fit-txt{font-size:18px;letter-spacing:.4em}
  .vy-header-brand svg{width:28px !important;height:28px !important}
  .vy-header-brand .name{font-size:18px !important}
  .vy-header-brand .fit{font-size:10px !important;letter-spacing:.25em !important}
}


/* =============================================================
   L177 — Brand BIG em todas páginas (com tamanho ajustado pra header)
   ============================================================= */

/* Esconder brand compacto onde tiver o BIG */
body:has(.vy-brand-big) .vy-header-brand{display:none !important}

/* BIG ajustado pra header de página (mais compacto que login) */
.vy-brand-big{
  padding:18px 16px 14px !important;
  background:linear-gradient(180deg,rgba(0,0,0,1) 0%,rgba(0,0,0,.96) 70%,rgba(0,0,0,.85) 100%) !important;
  border-bottom:1px solid rgba(34,197,94,.15) !important;
  position:relative !important;
  overflow:hidden !important;
}
.vy-brand-big::before{
  content:"";position:absolute;top:-80px;left:50%;transform:translateX(-50%);
  width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(34,197,94,.08),transparent 65%);
  pointer-events:none;
}
.vy-brand-big > *{position:relative;z-index:1}
.vy-brand-big .logo-bg{width:64px !important;height:64px !important;margin-bottom:4px !important}
.vy-brand-big .vyron-txt{font-size:38px !important;letter-spacing:.08em !important}
.vy-brand-big .fit-txt{font-size:14px !important;letter-spacing:.4em !important;padding:0 22px !important;margin-top:4px !important}
.vy-brand-big .fit-txt::before,.vy-brand-big .fit-txt::after{width:16px;height:1.5px}
.vy-brand-big .tagline{margin-top:10px !important;font-size:9px !important;letter-spacing:.16em !important;gap:10px !important}

@media (max-width:520px){
  .vy-brand-big{padding:14px 12px 10px !important}
  .vy-brand-big .logo-bg{width:52px !important;height:52px !important}
  .vy-brand-big .vyron-txt{font-size:30px !important}
  .vy-brand-big .fit-txt{font-size:12px !important;letter-spacing:.3em !important;padding:0 18px !important}
  .vy-brand-big .tagline{gap:6px !important;font-size:8px !important;letter-spacing:.12em !important}
}

/* Versão "ULTRA-compacta" pra páginas internas — brand-big-mini */
.vy-brand-big.mini{padding:12px 16px 8px !important}
.vy-brand-big.mini .logo-bg{width:44px !important;height:44px !important}
.vy-brand-big.mini .vyron-txt{font-size:24px !important}
.vy-brand-big.mini .fit-txt{font-size:11px !important;padding:0 16px !important}
.vy-brand-big.mini .tagline{display:none !important}


/* =============================================================
   L183 — TEMA EMERALD (substitui lime cansativo)
   Primary: #16A34A (verde profissional) com lime SÓ em acentos pontuais
   ============================================================= */
:root{
  /* Override paleta */
  --vy-primary:#16A34A;
  --vy-primary-soft:#22C55E;
  --vy-primary-deep:#15803D;
  --vy-primary-glow:rgba(22,163,74,.35);
  --vy-primary-glow-soft:rgba(22,163,74,.15);

  --brand:#16A34A !important;
  --brand-2:#22C55E !important;
  --brand-glow:rgba(22,163,74,.35) !important;
  --brand-glow2:rgba(22,163,74,.15) !important;
  --accent:#16A34A !important;
  --u-cyan:#16A34A !important;
  --u-cyan-d:#15803D !important;
  --u-emerald:#16A34A !important;
  --u-grad-main:linear-gradient(135deg,#22C55E 0%,#16A34A 50%,#15803D 100%) !important;
  --u-grad-blue:linear-gradient(135deg,#22C55E,#16A34A) !important;
  --u-grad-emerald:linear-gradient(135deg,#22C55E,#16A34A) !important;
  --u-border-glow:1px solid rgba(22,163,74,.3) !important;

  --green:#16A34A !important;
}

/* Background sutil emerald em vez de lime */
body{
  background:
    radial-gradient(1200px 600px at 85% -10%,rgba(22,163,74,.06),transparent 60%),
    radial-gradient(900px 500px at -10% 30%,rgba(167,139,250,.04),transparent 60%),
    #000 !important;
}

/* Scrollbar */
*::-webkit-scrollbar-thumb{background:rgba(22,163,74,.4) !important}
*::-webkit-scrollbar-thumb:hover{background:rgba(22,163,74,.6) !important}

/* ============ BRAND BAR — VYRON FIT ============ */
/* Mantém FIT em lime (acento pontual) — só essa coisinha permanece lime */
.vy-header-brand .fit,.vy-brand-big .fit-txt{
  color:#16a34a !important;
}
.vy-header-brand .fit::before,.vy-header-brand .fit::after,
.vy-brand-big .fit-txt::before,.vy-brand-big .fit-txt::after{
  background:#16a34a !important;box-shadow:0 0 6px rgba(34,197,94,.5) !important;color:#16a34a !important;
}
.vy-brand-big::before{background:radial-gradient(circle,rgba(22,163,74,.12),transparent 65%) !important}

/* ============ BOTÕES — emerald sofisticado ============ */
.btn:not(.ghost):not(.danger):not(.warn):not(.violet):not(.q-btn),
button.primary,button[type=submit],.vy-btn{
  background:linear-gradient(135deg,#22C55E,#16A34A,#15803D) !important;
  color:#fff !important;
  box-shadow:0 6px 18px rgba(22,163,74,.32),inset 0 1px 0 rgba(255,255,255,.18) !important;
  border-radius:11px !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
  text-transform:none !important;
}
.btn:hover{
  box-shadow:0 10px 28px rgba(22,163,74,.45),inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.btn.ghost{
  background:rgba(255,255,255,.04) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:none !important;
}

/* ============ ÍCONES + ACENTOS ============ */
.bnav a.active,.bottom-nav a.active{color:#22C55E !important}
.bnav a.active .ic{filter:drop-shadow(0 0 8px rgba(34,197,94,.5)) !important}

/* KPI values verde */
.kpi .v,.vy-kpi .val,.stat-card .number,.kpi .pulse{color:#22C55E !important}

/* Streak pill emerald em vez de lime */
.streak-pill{background:linear-gradient(135deg,#22C55E,#15803D) !important;box-shadow:0 8px 22px rgba(22,163,74,.35) !important;color:#fff !important}
.streak-pill .n,.streak-pill .l{color:#fff !important}

/* Avatar background emerald */
.top-bar .av,.greet-bar .av,#g-av{
  background:linear-gradient(135deg,#22C55E,#16A34A) !important;
  color:#fff !important;
  border-color:rgba(22,163,74,.5) !important;
  box-shadow:0 6px 18px rgba(22,163,74,.3) !important;
}

/* Gradient texts: VYRON name continua branco; outros gradients viram emerald */
.gradient:not(.vyron-txt):not(.name),
[class*="grad-main"]:not(.vy-header-brand):not(.vyron-txt){
  color:#16a34a;background:linear-gradient(135deg,#22C55E,#16A34A,#A78BFA) !important;color:#000;-webkit-text-fill-color:#000;!important;
  background-clip:text !important;
}

/* Title gradients */
.s-title .accent,
.hd h1,.dashboard-title{
  color:#16a34a;background:linear-gradient(135deg,#22C55E,#16A34A,#A78BFA) !important;color:#000;-webkit-text-fill-color:#000;background-clip:text;
}

/* Cards hover emerald */
.l130-card,.card,.feat,.action,.kpi,.vy-card,.tile,.q-action{
  background:#0F0F10 !important;
  border:1px solid rgba(255,255,255,.06) !important;
}
.l130-card:hover,.card:hover,.feat:hover,.action:hover,.tile:hover,.q-action:hover{
  border-color:rgba(22,163,74,.35) !important;
  box-shadow:0 14px 32px rgba(22,163,74,.18) !important;
}

/* Inputs focus */
input:focus,select:focus,textarea:focus{
  border-color:#22C55E !important;
  box-shadow:0 0 0 3px rgba(34,197,94,.18) !important;
}

/* Pills/badges */
.pill,.tag,.badge{
  background:rgba(22,163,74,.12) !important;
  color:#22C55E !important;
  border-color:rgba(22,163,74,.3) !important;
}
.pill.violet{background:rgba(167,139,250,.12) !important;color:#A78BFA !important;border-color:rgba(167,139,250,.3) !important}

/* Tabs active */
.tabs button.active,.range button.active,.filters button.active{
  background:linear-gradient(135deg,#22C55E,#16A34A) !important;
  color:#fff !important;
}

/* Quick wellness buttons */
.qbtn:hover,.q-btn:hover,.wb button:hover{background:rgba(22,163,74,.15) !important;border-color:#22C55E !important}
.qbtn.active,.q-btn.active,.wb button.active{
  background:linear-gradient(135deg,#22C55E,#16A34A) !important;
  color:#fff !important;
  border-color:#16A34A !important;
}

/* Step indicators */
.step.active .step-num{border-color:#22C55E !important;color:#22C55E !important}
.step.done .step-num{background:#22C55E !important;color:#fff !important;border-color:#22C55E !important}

/* FAB */
.fab-main,.u-fab,.vy-fab{
  background:linear-gradient(135deg,#22C55E,#16A34A,#15803D) !important;
  color:#fff !important;
  box-shadow:0 12px 32px rgba(22,163,74,.5) !important;
}

/* Goal card */
.goal-card,.meta-block{
  background:linear-gradient(135deg,rgba(22,163,74,.1),rgba(22,163,74,.02)) !important;
  border-color:rgba(22,163,74,.25) !important;
}
.goal-card .info .pg .fill,.meta-block .info .pg .fill{background:linear-gradient(90deg,#15803D,#22C55E) !important}
.meta-block .arr{color:#22C55E !important}

/* Wellness */
.wellness{background:linear-gradient(135deg,rgba(22,163,74,.08),rgba(167,139,250,.05)) !important;border-color:rgba(22,163,74,.18) !important}

/* Recovery ring */
.recov svg .fg{stroke:#22C55E !important}
.recov .info .v{color:#22C55E !important}
.recov .arr{color:#22C55E !important}

/* Wearable card */
.wear-card{background:linear-gradient(135deg,#0F0F10,rgba(22,163,74,.04)) !important;border-color:rgba(22,163,74,.2) !important}
.wear-card h3,.wear-card .head a:hover{color:#22C55E !important}

/* Trainer card emerald (era lime) */
.trainer-card{background:linear-gradient(135deg,#0a2818,#06210f) !important;border-color:rgba(22,163,74,.3) !important}
.trainer-card .av-big{background:linear-gradient(135deg,#22C55E,#16A34A) !important;color:#fff !important;border-color:rgba(22,163,74,.6) !important;box-shadow:0 0 22px rgba(22,163,74,.45) !important}
.trainer-card .info .lbl{color:#22C55E !important}
.trainer-card .info .spec{color:#86efac !important}
.trainer-card .chamar-btn{background:linear-gradient(135deg,#22C55E,#16A34A) !important;color:#fff !important;box-shadow:0 6px 18px rgba(22,163,74,.45) !important}

/* Serviços contratados emerald */
.serv-contracted{background:linear-gradient(135deg,#0a2818,#06210f) !important;border-color:rgba(22,163,74,.3) !important}
.serv-contracted .av-mid{background:linear-gradient(135deg,#22C55E,#16A34A) !important;color:#fff !important;border-color:rgba(22,163,74,.6) !important;box-shadow:0 0 18px rgba(22,163,74,.35) !important}
.serv-contracted .info .lbl{color:#22C55E !important}
.serv-contracted .info .meta{color:#86efac !important}
.serv-contracted .acoes .mini-btn{background:rgba(22,163,74,.18) !important;color:#22C55E !important;border-color:rgba(22,163,74,.3) !important}
.serv-contracted .acoes .mini-btn:hover{background:rgba(22,163,74,.35) !important;color:#fff !important}

/* Collapsibles */
.collapsible-head{
  background:linear-gradient(135deg,#15151A,#0F0F10) !important;
  border-color:rgba(22,163,74,.12) !important;
}
.collapsible-head:hover{border-color:rgba(22,163,74,.35) !important;background:linear-gradient(135deg,rgba(22,163,74,.06),#0F0F10) !important}
.collapsible.open .collapsible-head{background:linear-gradient(135deg,rgba(22,163,74,.1),#0F0F10) !important;border-color:rgba(22,163,74,.3) !important}
.collapsible-head .chev{color:#22C55E !important;background:rgba(22,163,74,.12) !important}
.collapsible.open .collapsible-head .chev{background:rgba(22,163,74,.25) !important}
.collapsible-body{border-color:rgba(22,163,74,.12) !important}
.collapsible-body .q-action:hover{background:linear-gradient(135deg,rgba(22,163,74,.1),rgba(20,20,20,.9)) !important;border-color:#22C55E !important}

/* Bottom nav CENTER (Mapa) */
.bnav .center{
  background:linear-gradient(135deg,#22C55E,#16A34A,#15803D) !important;
  border:2px solid #22C55E !important;
  box-shadow:0 -6px 18px rgba(22,163,74,.5),0 8px 22px rgba(22,163,74,.35) !important;
  color:#fff !important;
}
.bnav .center .ic,.bnav .center .lbl{color:#fff !important}

/* Tele card */
.tele-card{background:linear-gradient(135deg,#15803D,#0F0F10) !important;color:#fff !important}
.tele-card a{background:#22C55E !important;color:#fff !important}

/* WOD banner (mantém vermelho/laranja — é fogo) */

/* Music widget mantém rosa/magenta — é distinto */

/* Banner agendamento - emerald sutil */
.banner.agd{background:linear-gradient(135deg,rgba(167,139,250,.18),rgba(124,58,237,.08)) !important;border-color:rgba(167,139,250,.3) !important}
.banner.serv{background:linear-gradient(135deg,rgba(22,163,74,.18),rgba(22,163,74,.05)) !important;border-color:rgba(22,163,74,.3) !important}
.banner.saude{background:linear-gradient(135deg,rgba(236,72,153,.15),rgba(167,139,250,.05)) !important;border-color:rgba(236,72,153,.3) !important}

/* Logout */
.logout{background:rgba(239,68,68,.08) !important;border-color:rgba(239,68,68,.25) !important;color:#fca5a5 !important}

/* Botão "Contratar" violet (mantém pra diferenciar de contratado) */

/* Glow helpers */
.vy-glow{box-shadow:0 0 0 2px rgba(22,163,74,.4),0 0 24px rgba(22,163,74,.5) !important}
@keyframes vyPulseEm{0%,100%{box-shadow:0 0 0 2px rgba(22,163,74,.4),0 0 16px rgba(22,163,74,.4)}50%{box-shadow:0 0 0 4px rgba(22,163,74,.5),0 0 32px rgba(22,163,74,.7)}}
.vy-pulse{animation:vyPulseEm 2s ease-in-out infinite !important}

/* Tile colors emerald */
.tile.new::after{background:#22C55E !important;color:#fff !important}

/* Tap highlight */
*{-webkit-tap-highlight-color:rgba(22,163,74,.15) !important}

/* iframe Jitsi */
iframe[src*="jit.si"]{border-color:rgba(22,163,74,.3) !important}

/* Botões grandes do tele "ENTRAR" */
.big-btn{
  background:linear-gradient(135deg,#22C55E,#16A34A,#15803D) !important;
  color:#fff !important;
  box-shadow:0 16px 40px rgba(22,163,74,.45),inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.status.live{background:rgba(22,163,74,.12) !important;border-color:rgba(22,163,74,.4) !important;color:#22C55E !important}

/* Force inline-style replacements */
[style*="#16a34a"]{color:#22C55E !important}
[style*="#E3FF3D"]{color:#22C55E !important}
[style*="#15803d"]{color:#22C55E !important}

/* Acessórios verdes nas marcas */
.greet-bar .grt .nm{color:#16a34a;background:linear-gradient(135deg,#22C55E,#16A34A,#A78BFA) !important;color:#000;-webkit-text-fill-color:#000;!important;background-clip:text !important}

/* Header tagline manter lime sutil (FIT acento pontual) */
.vy-brand-big .tagline span::before{color:#16a34a !important}


/* =============================================================
   L184 — Background mais suave (não puro preto)
   ============================================================= */
:root{
  --vy-bg-base:#0a0e14;
  --vy-bg-surface:#11161d;
  --vy-bg-card:#171c25;
  --vy-bg-elevated:#1e242e;
}

html,body{background:var(--vy-bg-base) !important}

body{
  background:
    /* Aurora emerald canto superior direito */
    radial-gradient(900px 500px at 90% -5%, rgba(22,163,74,.10), transparent 55%),
    /* Aurora violet canto inferior esquerdo */
    radial-gradient(700px 400px at -5% 90%, rgba(167,139,250,.08), transparent 55%),
    /* Aurora suave central inferior */
    radial-gradient(500px 280px at 50% 110%, rgba(34,197,94,.05), transparent 60%),
    /* Gradient vertical sutil pra dar profundidade */
    linear-gradient(180deg, #0d1219 0%, #0a0e14 40%, #080b11 100%) !important;
  background-attachment:fixed !important;
  background-size:cover !important;
}

/* Cards um pouco mais claros pra contrastar bem com o novo bg */
.l130-card,.card,.feat,.action,.kpi,.vy-card,.tile,.q-action,
.wear-card,.recov,.collapsible-head,.banner,.music-widget,
.serv-contracted,.contratar-btn,.trainer-card,
.greet-bar,.search-card,.section,.tpl-card,
.kpi-row .kpi,.list-item,.empty-serv,.req-card,.aluno-card,
.h-item,.history-card{
  background:var(--vy-bg-surface) !important;
  border:1px solid rgba(255,255,255,.05) !important;
}

/* Cards "elevados" (com gradient próprio) mantém estilo */
.trainer-card,.serv-contracted{
  background:linear-gradient(135deg,#0a2818,#082014) !important;
}
.wellness{background:linear-gradient(135deg,rgba(22,163,74,.08),rgba(167,139,250,.05)),var(--vy-bg-surface) !important}
.goal-card,.meta-block{background:linear-gradient(135deg,rgba(22,163,74,.1),var(--vy-bg-surface)) !important}
.wear-card{background:linear-gradient(135deg,var(--vy-bg-surface),rgba(22,163,74,.03)) !important}

/* Cards dentro de section quando aberta */
.collapsible-body{background:var(--vy-bg-base) !important;border-color:rgba(255,255,255,.05) !important}
.collapsible-body .q-action{background:var(--vy-bg-card) !important}

/* Top bar / brand bar */
.vy-brand-big{background:linear-gradient(180deg,var(--vy-bg-base) 0%,rgba(10,14,20,.94) 70%,rgba(10,14,20,.85) 100%) !important}
.vy-header-brand{background:linear-gradient(180deg,rgba(10,14,20,.98),rgba(10,14,20,.85)) !important}
.greet-bar{background:rgba(10,14,20,.95) !important}

/* Bottom nav */
.bnav,.bottom-nav{background:rgba(10,14,20,.97) !important;border-top:1px solid rgba(255,255,255,.05)}

/* Inputs */
input,select,textarea{background:#0d1219 !important}
input:focus,select:focus,textarea:focus{background:#0a0e14 !important}

/* Modals */
.modal-backdrop,.overlay,.photo-modal{background:rgba(10,14,20,.92) !important}

/* Skeleton / loading */
.vy-skeleton{
  background:linear-gradient(90deg,#11161d 25%,#1e242e 50%,#11161d 75%) !important;
  background-size:200% 100% !important;
}

/* Texturas sutis pra dar "vida" ao fundo */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:
    radial-gradient(circle at 20% 20%, rgba(22,163,74,.02), transparent 30%),
    radial-gradient(circle at 80% 80%, rgba(167,139,250,.02), transparent 30%);
  opacity:.6;
}