/* [VLFRONT] Mu Vinland — site principal. Estilo: template NexusAI (tokens, Space Grotesk, cards, degradê violeta→azul).
   Formato: site de servidor de MU (topo com arte, números, conteúdo + coluna lateral). Carregado por último; prefixo vl-. */
@font-face { font-family: "Space Grotesk"; src: url("/php-assets/webfonts/space-grotesk-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --vl-bg: #08080f;
  --vl-bg2: #0d0d1a;
  --vl-bg3: #12121f;
  --vl-sf: #16162a;
  --vl-bd: rgba(255,255,255,.07);
  --vl-bd2: rgba(255,255,255,.13);
  --vl-tx: #f0f0ff;
  --vl-tx2: #a8a8c8;
  --vl-tx3: #6b6b8a;
  --vl-pur: #8b5cf6;
  --vl-pur-l: #a78bfa;
  --vl-blu: #3b82f6;
  --vl-grad: linear-gradient(135deg, #8b5cf6, #3b82f6);
  --vl-ok: #22c55e;
  --vl-bad: #ef4444;
  --vl-gold: #f2b33d;
  --vl-font: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* variáveis do CSS antigo: o miolo das páginas internas herda a paleta nova */
  --bg: #08080f; --panel: #16162a; --panel-2: #12121f; --steel: rgba(255,255,255,.09); --edge: rgba(255,255,255,.09);
  --silver: #a8a8c8; --text: #f0f0ff; --muted: #6b6b8a; --cobalt: #8b5cf6; --cobalt-2: #a78bfa; --indigo: #3b82f6;
  --violet: #8b5cf6; --magenta: #a78bfa; --success: #22c55e; --danger: #ef4444;
  --display: "Space Grotesk", system-ui, sans-serif; --texture: none; --flourish: none;
  --bs-body-font-family: var(--vl-font); --bs-body-bg: #08080f; --bs-body-color: #f0f0ff; --bs-border-color: rgba(255,255,255,.09);
  --bs-primary: #8b5cf6; --bs-primary-rgb: 139,92,246; --bs-link-color: #a78bfa; --bs-link-hover-color: #c4b5fd;
}

html, body { background: var(--vl-bg) !important; }
body { color: var(--vl-tx); font-family: var(--vl-font) !important; padding-top: 0 !important; overflow-x: hidden; }
body::before { content: none; }
h1, h2, h3, h4, h5, h6 { font-family: var(--vl-font) !important; }
::selection { background: rgba(139,92,246,.4); }
.vl-wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 16px; }
.vl-muted { color: var(--vl-tx3); }
.vl-gt { background: var(--vl-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* layout antigo: menu fixo removido, miolo em largura total */
.preview-note { display: none !important; }
.shell.mv-home { width: 100% !important; max-width: none !important; border: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; background: transparent !important; }
body:not(.vl-is-home) .shell.mv-home > main { max-width: 1240px; margin: 0 auto; padding: 24px 16px 0; }
body:not(.vl-is-home) .mmo-page-hero { max-width: 1208px; margin: 24px auto 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--vl-bd); }

/* ---------- auroras ---------- */
.vl-aur { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 1; }
.vl-aur-a { width: 600px; height: 600px; left: -180px; top: -120px; background: radial-gradient(circle, rgba(139,92,246,.30), transparent 70%); }
.vl-aur-b { width: 520px; height: 520px; right: -160px; top: 80px; background: radial-gradient(circle, rgba(59,130,246,.24), transparent 70%); }

/* ---------- botões ---------- */
.vl-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .62rem 1.15rem; border-radius: 12px; border: 0;
  background: var(--vl-grad); color: #fff !important; font-family: var(--vl-font); font-weight: 600; font-size: .9rem; text-decoration: none !important;
  transition: transform .25s, box-shadow .25s, background .25s, border-color .25s; cursor: pointer; }
.vl-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(139,92,246,.4); }
.vl-btn-ghost { background: transparent; border: 1px solid var(--vl-bd2); color: var(--vl-tx) !important; font-weight: 500; }
.vl-btn-ghost:hover { border-color: var(--vl-pur); background: rgba(139,92,246,.08); box-shadow: none; }
.vl-btn-danger { background: transparent; border: 1px solid rgba(239,68,68,.45); color: var(--vl-bad) !important; }
.vl-btn-lg { padding: .9rem 1.6rem; font-size: 1rem; }
.vl-btn + .vl-btn { margin-top: 0; }

/* ---------- menu ---------- */
.vl-nav { position: sticky; top: 0; z-index: 1050; height: 68px; display: flex; align-items: center; background: rgba(8,8,15,.78); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--vl-bd); }
.vl-nav-in { display: flex; align-items: center; gap: 1rem; }
.vl-brand { display: flex; align-items: center; gap: .6rem; color: var(--vl-tx) !important; text-decoration: none !important; flex: none; }
.vl-brand img { width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(139,92,246,.55)); }
.vl-brand span { font-weight: 700; font-size: 1.05rem; letter-spacing: .02em; }
.vl-burger { display: none; margin-left: auto; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--vl-bd2); background: transparent; color: var(--vl-tx); }
.vl-offcanvas { flex: 1; }
.vl-nav-body { display: flex; align-items: center; gap: 1rem; width: 100%; }
.vl-links { display: flex; align-items: center; gap: .15rem; flex: 1; justify-content: center; }
.vl-links > a, .vl-links .dropdown > button { display: inline-flex; align-items: center; gap: .4rem; padding: 6px 13px; border-radius: 8px; border: 0; background: none;
  color: var(--vl-tx2) !important; font-family: var(--vl-font); font-size: .9rem; font-weight: 500; text-decoration: none !important; transition: .2s; }
.vl-links > a i, .vl-links .dropdown > button > i:first-child { display: none; }
.vl-links > a:hover, .vl-links .dropdown > button:hover { color: var(--vl-tx) !important; background: rgba(255,255,255,.06); }
.vl-links > a[aria-current="page"], .vl-links .dropdown > button[aria-current="page"] { color: var(--vl-tx) !important; background: rgba(139,92,246,.12); }
.vl-caret { font-size: .65rem; color: var(--vl-tx3) !important; }
.vl-menu { --bs-dropdown-bg: var(--vl-sf); --bs-dropdown-border-color: var(--vl-bd2); --bs-dropdown-link-color: var(--vl-tx2); --bs-dropdown-link-hover-bg: rgba(139,92,246,.10);
  --bs-dropdown-link-hover-color: var(--vl-tx); --bs-dropdown-link-active-bg: var(--vl-pur); --bs-dropdown-divider-bg: var(--vl-bd); border-radius: 14px; padding: 6px; box-shadow: 0 16px 50px rgba(0,0,0,.45); font-size: .88rem; }
.vl-menu .dropdown-item { display: flex; gap: .6rem; align-items: center; padding: .5rem .8rem; border-radius: 8px; }
.vl-menu .dropdown-item i { width: 16px; color: var(--vl-pur-l); }
.vl-nav-right { display: flex; align-items: center; gap: .6rem; flex: none; }
.vl-guest { display: inline-flex; gap: .5rem; }
.vl-guest[hidden] { display: none !important; }
.vl-online { display: inline-flex; align-items: center; gap: .45rem; padding: 5px 12px 5px 9px; border-radius: 100px; background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.3);
  color: var(--vl-pur-l) !important; font-size: .78rem; font-weight: 600; text-decoration: none !important; }
.vl-online b { color: var(--vl-tx); font-variant-numeric: tabular-nums; }
.vl-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--vl-tx3); display: inline-block; }
.vl-dot.on { background: var(--vl-ok); box-shadow: 0 0 8px var(--vl-ok); animation: vl-pulse 2s infinite; }
.vl-dot.off { background: var(--vl-bad); }
@keyframes vl-pulse { 50% { opacity: .35; } }

/* ---------- topo ---------- */
.vl-hero { position: relative; min-height: 700px; display: flex; align-items: center; overflow: hidden; background: var(--vl-bg); }
.vl-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; z-index: 0; opacity: .55; }
.vl-hero::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(8,8,15,.55) 0%, rgba(8,8,15,.35) 40%, rgba(8,8,15,.85) 82%, var(--vl-bg) 100%); }
.vl-hero-in { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: 60px 90px; }
.vl-badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 9px; border-radius: 100px; background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.3);
  font-size: .78rem; font-weight: 600; color: var(--vl-pur-l); backdrop-filter: blur(6px); }
.vl-bdot { width: 7px; height: 7px; border-radius: 50%; background: var(--vl-pur); animation: vl-pulse 2s infinite; }
.vl-hero-logo { width: min(320px, 62vw); height: auto; margin-top: 14px; filter: drop-shadow(0 0 34px rgba(139,92,246,.55)) drop-shadow(0 0 12px rgba(59,130,246,.4)); animation: vl-float 4s ease-in-out infinite alternate; }
@keyframes vl-float { from { transform: translateY(-5px); } to { transform: translateY(5px); } }
.vl-h1 { font-size: clamp(2.2rem, 5.4vw, 4.2rem); font-weight: 700; line-height: 1.09; letter-spacing: -.03em; margin: 6px 0 14px; color: var(--vl-tx); }
.vl-hero-sub { max-width: 600px; margin: 0 auto; color: var(--vl-tx2); font-size: 1.05rem; }
.vl-hero-cta { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center; margin-top: 1.8rem; }
.vl-countdown { display: flex; gap: .6rem; margin-top: 1.4rem; }
.vl-countdown div { min-width: 74px; padding: .6rem .4rem; border-radius: 12px; background: rgba(18,18,31,.85); border: 1px solid var(--vl-bd); text-align: center; position: relative; overflow: hidden; }
.vl-countdown div::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--vl-grad); }
.vl-countdown b { display: block; font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.vl-countdown small { color: var(--vl-tx3); font-size: .65rem; text-transform: uppercase; letter-spacing: .1em; }

/* ---------- números ---------- */
.vl-stats { position: relative; z-index: 3; margin-top: -60px; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; }
.vl-stat { background: rgba(18,18,31,.92); backdrop-filter: blur(12px); border: 1px solid var(--vl-bd); border-radius: 14px; padding: 16px 18px; position: relative; overflow: hidden; }
.vl-stat::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--vl-grad); opacity: .7; }
.vl-stat small { display: block; color: var(--vl-tx3); font-size: .72rem; margin-bottom: .25rem; }
.vl-stat small i { color: var(--vl-pur-l); margin-right: .3rem; }
.vl-stat b { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.vl-status.on { color: var(--vl-ok); -webkit-text-fill-color: var(--vl-ok); }
.vl-status.off { color: var(--vl-bad); -webkit-text-fill-color: var(--vl-bad); }

/* ---------- cards ---------- */
.vl-card { background: var(--vl-sf); border: 1px solid var(--vl-bd); border-radius: 18px; transition: .3s; }
.vl-quick { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin-top: 18px; }
.vl-quick-card { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.2rem; color: var(--vl-tx) !important; text-decoration: none !important; }
.vl-quick-card:hover { border-color: rgba(139,92,246,.3); transform: translateY(-3px); box-shadow: 0 16px 50px rgba(0,0,0,.25); }
.vl-ico { width: 46px; height: 46px; border-radius: 12px; background: var(--vl-grad); display: grid; place-items: center; color: #fff; font-size: 1rem; flex: none; }
.vl-quick-card b { display: block; font-size: 1rem; }
.vl-quick-card small { color: var(--vl-tx2); font-size: .82rem; }
.vl-go { margin-left: auto; color: var(--vl-tx3); font-size: .85rem; transition: .2s; }
.vl-quick-card:hover .vl-go { color: var(--vl-pur-l); transform: translateX(3px); }

.vl-grid { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 20px; margin: 20px 0 50px; align-items: start; }
.vl-main, .vl-side { display: grid; gap: 20px; min-width: 0; }
.vl-block { padding: 1.4rem 1.5rem; }
.vl-block-head { display: flex; align-items: flex-end; justify-content: space-between; gap: .6rem; margin-bottom: 1.1rem; }
.vl-label { display: inline-flex; align-items: center; gap: 6px; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--vl-pur); margin-bottom: 4px; }
.vl-label::before { content: ""; width: 18px; height: 1.5px; background: var(--vl-grad); }
.vl-block-head h2 { margin: 0; font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; color: var(--vl-tx); }
.vl-block-head a { color: var(--vl-tx2) !important; font-size: .85rem; text-decoration: none !important; display: inline-flex; gap: .35rem; align-items: center; white-space: nowrap; }
.vl-block-head a:hover { color: var(--vl-pur-l) !important; }

/* notícias */
.vl-news { display: flex; gap: 1rem; padding: .85rem 0; border-top: 1px solid var(--vl-bd); color: var(--vl-tx) !important; text-decoration: none !important; }
.vl-block-head + .vl-news { border-top: 0; padding-top: 0; }
.vl-news h3 { margin: .35rem 0 0; font-size: 1rem; font-weight: 600; }
.vl-news:hover h3 { color: var(--vl-pur-l); }
.vl-news p { margin: .35rem 0 0; color: var(--vl-tx2); font-size: .9rem; }
img.vl-news-img { width: 230px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; border: 1px solid var(--vl-bd); flex: none; }
.vl-news-main h3 { font-size: 1.2rem; }
.vl-tag { display: inline-block; padding: 2px 10px; border-radius: 100px; font-size: .68rem; font-weight: 600; color: var(--vl-pur-l); background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.3); }
.vl-empty { display: flex; gap: 1rem; align-items: center; color: var(--vl-tx2); }
.vl-empty p { margin: 0; }
.vl-empty a { color: var(--vl-pur-l); }

/* ranking */
.vl-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: .8rem; background: var(--vl-bg3); border: 1px solid var(--vl-bd); border-radius: 12px; }
.vl-tabs button { border: 0; background: transparent; color: var(--vl-tx2); padding: 6px 16px; border-radius: 9px; font-family: var(--vl-font); font-size: .85rem; font-weight: 600; transition: .2s; }
.vl-tabs button.on { background: var(--vl-grad); color: #fff; }
.vl-rank { list-style: none; margin: 0; padding: 0; }
.vl-rank li { display: grid; grid-template-columns: 32px 38px minmax(0,1fr) auto; gap: .8rem; align-items: center; padding: .6rem .5rem; border-radius: 12px; font-size: .92rem; transition: .2s; }
.vl-rank li:hover { background: rgba(255,255,255,.03); }
.vl-rank li + li { border-top: 1px solid var(--vl-bd); }
.vl-rank .vl-pos { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--vl-bg3); color: var(--vl-tx3); font-size: .82rem; font-weight: 700; }
.vl-rank li:nth-child(1) .vl-pos { background: var(--vl-grad); color: #fff; }
.vl-rank li:nth-child(2) .vl-pos { background: rgba(167,139,250,.18); color: var(--vl-pur-l); }
.vl-rank li:nth-child(3) .vl-pos { background: rgba(59,130,246,.16); color: #93c5fd; }
.vl-rank .vl-cls { width: 38px; height: 38px; border-radius: 10px; background: center / cover no-repeat; border: 1px solid var(--vl-bd2); }
.vl-rank .vl-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vl-rank .vl-nm b { font-weight: 600; }
.vl-rank .vl-nm small { display: block; color: var(--vl-tx3); font-size: .76rem; }
.vl-rank .vl-val { text-align: right; font-variant-numeric: tabular-nums; }
.vl-rank .vl-val b { font-size: 1.05rem; }
.vl-rank .vl-val small { display: block; color: var(--vl-tx3); font-size: .7rem; }

/* classes */
.vl-classes { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 10px; }
.vl-class { position: relative; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; border: 1px solid var(--vl-bd); text-decoration: none !important; transition: .3s; }
.vl-class > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform .4s; }
.vl-class::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 40%, rgba(8,8,15,.95)); }
.vl-class span { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; color: #fff; }
.vl-class b { display: block; font-size: .85rem; font-weight: 700; line-height: 1.15; }
.vl-class small { color: var(--vl-tx2); font-size: .7rem; }
.vl-class:hover { border-color: rgba(139,92,246,.5); transform: translateY(-3px); box-shadow: 0 16px 40px rgba(139,92,246,.18); }
.vl-class:hover > img { transform: scale(1.06); }

/* perguntas (accordion do NexusAI) */
.vl-faq { background: var(--vl-bg3); border: 1px solid var(--vl-bd); border-radius: 14px; margin-bottom: 10px; overflow: hidden; }
.vl-faq:last-child { margin-bottom: 0; }
.vl-faq summary { cursor: pointer; padding: 14px 18px; font-weight: 600; font-size: .94rem; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.vl-faq summary::-webkit-details-marker { display: none; }
.vl-faq summary::after { content: "+"; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: rgba(139,92,246,.12); color: var(--vl-pur-l); font-weight: 700; }
.vl-faq[open] { border-color: rgba(139,92,246,.3); background: rgba(139,92,246,.06); }
.vl-faq[open] summary { color: var(--vl-pur-l); }
.vl-faq[open] summary::after { content: "–"; }
.vl-faq p { margin: 0; padding: 0 18px 16px; color: var(--vl-tx2); }

/* lateral */
.vl-account { text-align: center; display: grid; gap: .6rem; justify-items: center; }
.vl-account > img { filter: drop-shadow(0 0 14px rgba(139,92,246,.55)); }
.vl-account h2 { font-size: 1.25rem; font-weight: 700; margin: 0; }
.vl-account > div { display: grid; gap: .55rem; width: 100%; }
.vl-account p { margin: 0 0 .3rem; font-size: .88rem; }
.vl-small-link { color: var(--vl-tx3) !important; font-size: .82rem; }
.vl-small-link:hover { color: var(--vl-pur-l) !important; }
.vl-kv { margin: 0 0 1rem; }
.vl-kv > div { display: flex; justify-content: space-between; gap: .5rem; padding: .55rem 0; border-bottom: 1px solid var(--vl-bd); font-size: .9rem; }
.vl-kv dt { color: var(--vl-tx2); font-weight: 400; }
.vl-kv dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.vl-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vl-events li { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .6rem .8rem; border-radius: 12px; background: var(--vl-bg3); border: 1px solid var(--vl-bd); font-size: .9rem; }
.vl-events b { font-weight: 600; }
.vl-events span { color: var(--vl-pur-l); font-variant-numeric: tabular-nums; font-weight: 600; font-size: .85rem; }
.vl-events li.soon { border-color: rgba(34,197,94,.35); }
.vl-events li.soon span { color: var(--vl-ok); }
.vl-note { margin: .7rem 0 0; color: var(--vl-tx3); font-size: .76rem; }
.vl-siege p { margin: 0 0 .3rem; color: var(--vl-tx2); }
.vl-siege p b { color: var(--vl-tx); }
.vl-siege-time { display: block; margin-top: .5rem; font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.vl-menu-list { display: grid; gap: 4px; }
.vl-menu-list a { display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border-radius: 10px; color: var(--vl-tx2) !important; text-decoration: none !important; font-size: .9rem; transition: .2s; }
.vl-menu-list a i { width: 18px; color: var(--vl-pur-l); }
.vl-menu-list a:hover { color: var(--vl-tx) !important; background: rgba(139,92,246,.08); }

/* ---------- rodapé ---------- */
.vl-footer { margin-top: 50px; border-top: 1px solid var(--vl-bd); background: var(--vl-bg2); position: relative; overflow: hidden; }
.vl-footer .vl-wrap { display: block !important; }
.vl-footer-grid { display: grid !important; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 24px; padding-block: 44px 28px; }
.vl-footer-grid > div { display: block !important; }
.vl-footer-brand { display: flex !important; gap: .8rem; align-items: center; }
.vl-footer-brand b { display: block; font-size: 1.15rem; font-weight: 700; }
.vl-footer-brand small { color: var(--vl-tx3); }
.vl-footer h3 { font-size: .77rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--vl-tx3); margin: 0 0 .9rem; }
.vl-footer-grid a { display: block !important; color: var(--vl-tx2) !important; text-decoration: none !important; font-size: .875rem; padding: 3px 0; transition: .2s; }
.vl-footer-grid a:hover { color: var(--vl-pur-l) !important; }
.vl-footer-bottom { display: flex !important; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: 16px 24px; border-top: 1px solid var(--vl-bd); color: var(--vl-tx3); }

/* ---------- páginas internas (componentes antigos com a cara nova) ---------- */
body:not(.vl-is-home) .card, body:not(.vl-is-home) .post { background: var(--vl-sf) !important; border: 1px solid var(--vl-bd) !important; border-radius: 18px !important; box-shadow: none !important; }
body:not(.vl-is-home) .card:hover { border-color: rgba(139,92,246,.3) !important; }
body:not(.vl-is-home) .button { background: var(--vl-grad) !important; border: 0 !important; border-radius: 12px !important; color: #fff !important; font-family: var(--vl-font) !important; font-weight: 600 !important; }
body:not(.vl-is-home) .button.secondary { background: transparent !important; border: 1px solid var(--vl-bd2) !important; color: var(--vl-tx) !important; }
body:not(.vl-is-home) .eyebrow { color: var(--vl-pur) !important; letter-spacing: .12em; }
body:not(.vl-is-home) main h1 { letter-spacing: -.03em !important; font-weight: 700 !important; text-transform: none !important; }
body:not(.vl-is-home) .chip { background: rgba(139,92,246,.12) !important; border: 1px solid rgba(139,92,246,.3) !important; color: var(--vl-pur-l) !important; border-radius: 100px !important; }
body:not(.vl-is-home) input:not([type=checkbox]):not([type=radio]), body:not(.vl-is-home) select, body:not(.vl-is-home) textarea { background: var(--vl-bg3) !important; border: 1px solid var(--vl-bd2) !important; border-radius: 12px !important; color: var(--vl-tx) !important; }
body:not(.vl-is-home) input:focus, body:not(.vl-is-home) select:focus, body:not(.vl-is-home) textarea:focus { border-color: var(--vl-pur) !important; box-shadow: 0 0 0 3px rgba(139,92,246,.18) !important; }
body:not(.vl-is-home) table { --bs-table-bg: transparent; }

/* ---------- celular / tablet ---------- */
@media (max-width: 1100px) { .vl-classes { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 991.98px) {
  .vl-burger { display: inline-grid; place-items: center; }
  .vl-offcanvas { --bs-offcanvas-bg: var(--vl-bg2); --bs-offcanvas-color: var(--vl-tx); --bs-offcanvas-width: 300px; }
  .vl-nav-body { flex-direction: column; align-items: stretch; }
  .vl-links { flex-direction: column; align-items: stretch; }
  .vl-links > a, .vl-links .dropdown > button { width: 100%; justify-content: flex-start; padding: .75rem .6rem; }
  .vl-nav-right { flex-direction: column; align-items: stretch; margin-top: 1rem; }
  .vl-guest { flex-direction: column; }
  .vl-grid { grid-template-columns: 1fr; }
  .vl-stats { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .vl-quick { grid-template-columns: 1fr; }
  .vl-hero { min-height: 600px; }
}
@media (max-width: 600px) {
  .vl-stats { grid-template-columns: repeat(2, minmax(0,1fr)); margin-top: -40px; }
  .vl-classes { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .vl-news-main { flex-direction: column; }
  img.vl-news-img { width: 100%; }
  .vl-footer-grid { grid-template-columns: 1fr 1fr; }
  .vl-footer-brand { grid-column: 1 / -1; }
  .vl-hero-cta .vl-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .vl-hero-logo, .vl-bdot, .vl-dot.on { animation: none; } }

/* ===================== [VLFRONT] tema geral nas páginas internas ===================== */
/* títulos: caixa normal e espaçamento do NexusAI (o tema antigo forçava caixa alta e letras espaçadas) */
body h1, body h2, body h3, body h4, body .section > h1, body .section > h2, body .card h2, body .card h3 { text-transform: none !important; letter-spacing: -.02em !important; font-family: var(--vl-font) !important; text-shadow: none !important; }
body .eyebrow { font-size: .7rem !important; font-weight: 600 !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--vl-pur) !important; display: inline-flex; align-items: center; gap: 6px; }
body .eyebrow::before { content: ""; width: 18px; height: 1.5px; background: var(--vl-grad); }
body:not(.vl-is-home) main h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem) !important; font-weight: 700 !important; }
body:not(.vl-is-home) main h2 { font-weight: 700 !important; }
body:not(.vl-is-home) main p, body:not(.vl-is-home) main li { color: var(--vl-tx2); }
body:not(.vl-is-home) main a:not(.button):not(.card):not(.vl-btn) { color: var(--vl-pur-l); }

/* cabeçalho das páginas internas */
body .mmo-page-hero { position: relative; overflow: hidden; display: flex !important; align-items: center; gap: 22px !important; min-height: 230px !important; padding: 40px 48px !important;
  background: linear-gradient(90deg, rgba(8,8,15,.94) 0%, rgba(8,8,15,.70) 55%, rgba(8,8,15,.45) 100%), url('/site-assets/images/vl-hero.jpg') center 35% / cover !important;
  border: 1px solid var(--vl-bd) !important; border-radius: 18px !important; }
body .mmo-page-hero::before { content: ""; position: absolute; width: 520px; height: 520px; left: -160px; top: -200px; border-radius: 50%; filter: blur(80px); background: radial-gradient(circle, rgba(139,92,246,.32), transparent 70%); pointer-events: none; }
body .mmo-page-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--vl-grad); opacity: .8; }
body .mmo-page-hero > * { position: relative; z-index: 1; }
body .mmo-page-hero img { width: 84px !important; height: 84px !important; filter: drop-shadow(0 0 16px rgba(139,92,246,.6)) !important; }
body .mmo-page-hero h1 { font-size: clamp(2rem, 4vw, 3rem) !important; font-weight: 700 !important; margin: 0 0 .3rem !important; color: var(--vl-tx) !important; }
body .mmo-page-hero nav { color: var(--vl-tx3) !important; font-size: .85rem !important; }
body .mmo-page-hero nav a { color: var(--vl-pur-l) !important; }

/* blocos e avisos */
body:not(.vl-is-home) .section { padding-top: 28px; }
body:not(.vl-is-home) .notice, body:not(.vl-is-home) aside.notice, body:not(.vl-is-home) .alert { background: rgba(139,92,246,.07) !important; border: 1px solid rgba(139,92,246,.25) !important; border-radius: 14px !important; color: var(--vl-tx2) !important; }
body:not(.vl-is-home) details.card summary { cursor: pointer; font-weight: 600; }
body:not(.vl-is-home) .card { padding: 22px 24px; }
body:not(.vl-is-home) .grid { gap: 16px !important; }
body:not(.vl-is-home) .card .download-icon, body:not(.vl-is-home) .card [class*="icon"]:not(i):not(img) { background: var(--vl-grad) !important; color: #fff !important; border-radius: 12px !important; }

/* cards de classe com arte grande */
body .class-card img, body .character-cover img { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; object-fit: cover !important; object-position: center 20%; border-radius: 14px !important; background: var(--vl-bg3); }
body .class-card { overflow: hidden; }
body .class-card:hover img { transform: scale(1.03); transition: transform .4s; }

/* tabelas */
body:not(.vl-is-home) table { width: 100%; border-collapse: separate !important; border-spacing: 0; border: 1px solid var(--vl-bd); border-radius: 14px; overflow: hidden; }
body:not(.vl-is-home) table th { background: var(--vl-bg3) !important; color: var(--vl-tx3) !important; font-size: .75rem !important; font-weight: 600 !important; letter-spacing: .06em; text-transform: uppercase; border-color: var(--vl-bd) !important; }
body:not(.vl-is-home) table td { background: transparent !important; color: var(--vl-tx2) !important; border-color: var(--vl-bd) !important; }
body:not(.vl-is-home) table tr:hover td { background: rgba(139,92,246,.05) !important; }

/* abas, paginação e botões menores dos serviços */
body:not(.vl-is-home) .nav-tabs { border: 0 !important; gap: 4px; padding: 4px; background: var(--vl-bg3); border: 1px solid var(--vl-bd) !important; border-radius: 12px; display: inline-flex; }
body:not(.vl-is-home) .nav-tabs .nav-link { border: 0 !important; border-radius: 9px !important; color: var(--vl-tx2) !important; }
body:not(.vl-is-home) .nav-tabs .nav-link.active { background: var(--vl-grad) !important; color: #fff !important; }
body:not(.vl-is-home) main button:not(.vl-btn):not(.nav-link):not(.btn-close):not([data-bs-toggle]) { background: var(--vl-grad); border: 0; border-radius: 12px; color: #fff; font-family: var(--vl-font); font-weight: 600; padding: .55rem 1.1rem; }
body:not(.vl-is-home) main button.secondary { background: transparent !important; border: 1px solid var(--vl-bd2) !important; color: var(--vl-tx) !important; }
body:not(.vl-is-home) label { color: var(--vl-tx2); font-size: .88rem; }

/* telas de login / cadastro / recuperar */
body.auth-screen { background: var(--vl-bg) !important; }
body.auth-screen main .section { max-width: 460px; margin: 40px auto; padding: 32px 30px !important; background: var(--vl-sf); border: 1px solid var(--vl-bd); border-radius: 18px; position: relative; overflow: hidden; }
body.auth-screen main .section::before { content: ""; position: absolute; width: 380px; height: 380px; right: -160px; top: -180px; border-radius: 50%; filter: blur(70px); background: radial-gradient(circle, rgba(139,92,246,.28), transparent 70%); pointer-events: none; }
body.auth-screen main .section > * { position: relative; }
body.auth-screen .auth-logo { display: block; width: 110px; margin: 0 auto 6px; filter: drop-shadow(0 0 18px rgba(139,92,246,.55)); }
body.auth-screen main h1 { text-align: center; font-size: 1.9rem !important; }
body.auth-screen #app-content form { display: grid; gap: 12px; }
body.auth-screen #app-content label { display: grid; gap: 6px; }

/* retoques: rótulos do rodapé em caixa alta (como no NexusAI) e formulários compactos */
body .vl-footer h3 { text-transform: uppercase !important; letter-spacing: .1em !important; font-size: .77rem !important; color: var(--vl-tx3) !important; }
body:not(.vl-is-home) #app-content form > *, body:not(.vl-is-home) #app-content form label, body:not(.vl-is-home) #app-content form p { margin-top: 0 !important; margin-bottom: 0 !important; }
body:not(.vl-is-home) #app-content form { display: grid; gap: 14px; border: 0 !important; background: transparent !important; padding: 0 !important; }
body:not(.vl-is-home) #app-content form label { display: grid; gap: 6px; }
body:not(.vl-is-home) #app-content input[type=checkbox] { accent-color: var(--vl-pur); width: 18px; height: 18px; }
body:not(.vl-is-home) td, body:not(.vl-is-home) th { text-align: left; }

/* ===================== [VLFRONT] páginas internas reorganizadas ===================== */
/* cabeçalho de página */
.vl-pagehead { position: relative; overflow: hidden; margin: 24px auto 0; max-width: 1208px; border-radius: 18px; border: 1px solid var(--vl-bd); padding: 44px 48px; min-height: 210px; display: flex; align-items: center;
  background: linear-gradient(90deg, rgba(8,8,15,.95) 0%, rgba(8,8,15,.78) 50%, rgba(8,8,15,.42) 100%), url('/site-assets/images/vl-hero.jpg') center 32% / cover; }
.vl-pagehead::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--vl-grad); }
.vl-pagehead .vl-aur { position: absolute; width: 520px; height: 520px; left: -170px; top: -230px; border-radius: 50%; filter: blur(80px); background: radial-gradient(circle, rgba(139,92,246,.35), transparent 70%); pointer-events: none; }
.vl-pagehead-in { position: relative; z-index: 1; display: flex; align-items: center; gap: 24px; }
.vl-ico-lg { width: 72px; height: 72px; border-radius: 18px; font-size: 1.7rem; box-shadow: 0 10px 40px rgba(139,92,246,.45); }
.vl-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .8rem; color: var(--vl-tx3); margin-bottom: 10px; }
.vl-crumb a { color: var(--vl-tx2) !important; text-decoration: none !important; }
.vl-crumb a:hover { color: var(--vl-pur-l) !important; }
.vl-crumb i { font-size: .6rem; opacity: .6; }
.vl-crumb span { color: var(--vl-pur-l); }
.vl-pagehead h1 { font-size: clamp(2rem, 4.2vw, 3.1rem) !important; font-weight: 700 !important; line-height: 1.08; letter-spacing: -.03em !important; margin: 2px 0 8px !important; color: var(--vl-tx) !important; }
.vl-pagehead p { margin: 0; max-width: 620px; color: var(--vl-tx2) !important; font-size: 1.02rem; }
.vl-label::before { content: ""; width: 18px; height: 1.5px; background: var(--vl-grad); }

/* base das páginas */
.vl-page { margin: 22px 0 0; display: grid; gap: 20px; }
main > .vl-page:last-child { margin-bottom: 50px; }
.vl-page > .vl-grid { margin: 0; }
.vl-page .vl-main, .vl-page .vl-side { display: grid; gap: 20px; align-content: start; }
.vl-page .vl-side { position: sticky; top: 90px; }
.vl-page .vl-block-head { align-items: center; }
.vl-page p { line-height: 1.65; }
.vl-note { color: var(--vl-tx3); font-size: .84rem; margin: .8rem 0 0; }
.vl-link { display: inline-flex; align-items: center; gap: .4rem; color: var(--vl-pur-l) !important; font-weight: 600; font-size: .88rem; text-decoration: none !important; }
.vl-back { display: inline-flex; gap: .5rem; align-items: center; color: var(--vl-tx2) !important; text-decoration: none !important; font-size: .9rem; }
.w-100 { width: 100%; }
.vl-alert { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: 14px; background: rgba(139,92,246,.07); border: 1px solid rgba(139,92,246,.25); color: var(--vl-tx2); font-size: .9rem; margin: 0 0 1rem; }
.vl-alert > i { color: var(--vl-pur-l); margin-top: 3px; }
.vl-alert-lg { padding: 16px 20px; margin: 0; align-items: center; }
.vl-alert-lg > i { width: 38px; height: 38px; border-radius: 10px; background: var(--vl-grad); color: #fff; display: grid; place-items: center; margin: 0; flex: none; }
.vl-alert-lg b { display: block; color: var(--vl-tx); margin-bottom: 2px; }
.vl-alert-lg span { display: block; }
.vl-stats-flat { margin-top: 0; }
.vl-stat small i { color: var(--vl-pur-l); margin-right: 4px; }

/* pílulas e barra de ferramentas */
.vl-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.vl-pills button, .vl-pills > span { border: 1px solid var(--vl-bd2) !important; background: var(--vl-bg3) !important; color: var(--vl-tx2) !important; padding: 7px 15px !important; border-radius: 100px !important; font-family: var(--vl-font); font-size: .84rem; font-weight: 600; transition: .2s; }
.vl-pills button:hover { border-color: rgba(139,92,246,.5) !important; color: var(--vl-tx) !important; }
.vl-pills button.on { background: var(--vl-grad) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 6px 22px rgba(139,92,246,.35); }
.vl-pills-static > span { background: rgba(139,92,246,.1) !important; border-color: rgba(139,92,246,.3) !important; color: var(--vl-pur-l) !important; }
.vl-rank-groups { display: grid; gap: 14px; }
.vl-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.vl-search { position: relative; flex: 1 1 260px; margin: 0; }
.vl-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--vl-tx3); font-size: .85rem; }
.vl-search input, .vl-toolbar select { width: 100%; background: var(--vl-bg3) !important; border: 1px solid var(--vl-bd2) !important; border-radius: 12px !important; color: var(--vl-tx) !important; padding: 10px 14px 10px 38px !important; font-family: var(--vl-font); font-size: .9rem; outline: none; }
.vl-toolbar select { width: auto; padding-left: 14px !important; min-width: 200px; }
.vl-search input:focus, .vl-toolbar select:focus { border-color: var(--vl-pur) !important; box-shadow: 0 0 0 3px rgba(139,92,246,.2); }
.vl-toolbar > small { flex-basis: 100%; }

/* pódio */
.vl-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 16px; align-items: end; }
.vl-podium:empty { display: none; }
.vl-pod { position: relative; display: block; border-radius: 18px; overflow: hidden; border: 1px solid var(--vl-bd); background: var(--vl-sf); text-decoration: none !important; transition: .3s; aspect-ratio: 4 / 4.4; }
.vl-pod-1 { aspect-ratio: 4 / 5; border-color: rgba(242,179,61,.5); box-shadow: 0 20px 60px rgba(242,179,61,.15); }
.vl-pod:hover { transform: translateY(-4px); border-color: rgba(139,92,246,.5); }
.vl-pod img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.vl-pod::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(8,8,15,.96) 85%); }
.vl-pod-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 18px; display: grid; gap: 2px; }
.vl-pod-info b { color: var(--vl-tx); font-size: 1.25rem; }
.vl-pod-info small { color: var(--vl-tx2); }
.vl-pod-info strong { font-size: 1.15rem; margin-top: 4px; }
.vl-pod-pos { justify-self: start; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; padding: 3px 10px; border-radius: 100px; background: rgba(255,255,255,.1); color: var(--vl-tx); margin-bottom: 6px; }
.vl-pod-1 .vl-pod-pos { background: linear-gradient(135deg,#f2b33d,#e0892a); color: #1a1205; }
.vl-pod-2 .vl-pod-pos { background: linear-gradient(135deg,#d7dbe6,#9aa3b8); color: #111; }
.vl-pod-3 .vl-pod-pos { background: linear-gradient(135deg,#d08a52,#9b5a2c); color: #fff; }

/* tabela de ranking */
.vl-table-wrap { overflow-x: auto; border: 1px solid var(--vl-bd); border-radius: 14px; }
body .vl-table { border: 0 !important; border-radius: 0 !important; margin: 0; }
body .vl-table th, body .vl-table td { padding: 11px 16px; vertical-align: middle; border-bottom: 1px solid var(--vl-bd) !important; }
body .vl-table tr:last-child td { border-bottom: 0 !important; }
body .vl-table td.vl-num, body .vl-table th.vl-num { text-align: right; font-variant-numeric: tabular-nums; color: var(--vl-tx) !important; font-weight: 700; }
.vl-pos { display: inline-grid; place-items: center; min-width: 30px; height: 30px; border-radius: 9px; background: var(--vl-bg3); border: 1px solid var(--vl-bd); font-weight: 700; font-size: .82rem; color: var(--vl-tx2); }
.vl-pos-1 { background: linear-gradient(135deg,#f2b33d,#e0892a); color: #1a1205; border: 0; }
.vl-pos-2 { background: linear-gradient(135deg,#d7dbe6,#9aa3b8); color: #111; border: 0; }
.vl-pos-3 { background: linear-gradient(135deg,#d08a52,#9b5a2c); color: #fff; border: 0; }
.vl-char { display: inline-flex; align-items: center; gap: 10px; color: var(--vl-tx) !important; font-weight: 600; text-decoration: none !important; }
.vl-char:hover span { color: var(--vl-pur-l); }
.vl-char-av { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; object-position: center 15%; border: 1px solid var(--vl-bd2); }
.vl-castle-row { display: flex; align-items: center; gap: 18px; }
.vl-castle-row h2 { margin: 0; font-size: 1.2rem; }
.vl-castle-row p { margin: 2px 0 0; }
.vl-castle-row .vl-siege-time { margin-left: auto; font-size: 1.4rem; white-space: nowrap; }

/* downloads */
.vl-mirrors { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 4px; }
.vl-mirror { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 14px; background: var(--vl-bg3); border: 1px solid var(--vl-bd); color: var(--vl-tx) !important; text-decoration: none !important; transition: .25s; }
a.vl-mirror:hover { border-color: rgba(139,92,246,.5); transform: translateY(-3px); box-shadow: 0 14px 40px rgba(139,92,246,.18); }
.vl-mirror > span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
.vl-mirror small { color: var(--vl-tx3); }
.vl-mirror .vl-go { color: var(--vl-tx3); }
.vl-mirror-off { opacity: .75; }
.vl-dl-main { position: relative; overflow: hidden; }
.vl-dl-main::before { content: ""; position: absolute; width: 420px; height: 420px; right: -160px; top: -200px; border-radius: 50%; filter: blur(80px); background: radial-gradient(circle, rgba(59,130,246,.22), transparent 70%); pointer-events: none; }
.vl-dl-main > * { position: relative; }

/* passos */
.vl-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; position: relative; }
.vl-steps li { display: flex; gap: 16px; padding: 12px 0; position: relative; }
.vl-steps li:not(:last-child)::before { content: ""; position: absolute; left: 21px; top: 56px; bottom: -6px; width: 2px; background: linear-gradient(180deg, rgba(139,92,246,.5), rgba(59,130,246,.1)); }
.vl-step-n { width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--vl-grad); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: .95rem; box-shadow: 0 8px 24px rgba(139,92,246,.35); }
.vl-steps b { color: var(--vl-tx); font-size: 1.02rem; }
.vl-steps p { margin: 3px 0 4px; }
.vl-steps a { font-size: .86rem; font-weight: 600; text-decoration: none !important; }

/* jornada do iniciante */
.vl-journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; }
.vl-journey li { background: var(--vl-bg3); border: 1px solid var(--vl-bd); border-radius: 14px; padding: 18px 16px; display: grid; gap: 4px; align-content: start; position: relative; overflow: hidden; transition: .3s; }
.vl-journey li:hover { border-color: rgba(139,92,246,.45); transform: translateY(-3px); }
.vl-journey li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--vl-grad); opacity: .7; }
.vl-journey .vl-ico { margin-bottom: 8px; }
.vl-journey small { color: var(--vl-pur); font-weight: 700; font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; }
.vl-journey b { color: var(--vl-tx); }
.vl-journey p { font-size: .86rem; margin: 0 0 4px; line-height: 1.5; }
.vl-journey a { font-size: .84rem; font-weight: 600; text-decoration: none !important; }

/* manual */
.vl-manual { display: grid; grid-template-columns: 270px minmax(0,1fr); gap: 20px; align-items: start; }
.vl-manual-nav { position: sticky; top: 90px; }
.vl-manual-nav .vl-block { padding: 1.1rem; max-height: calc(100vh - 110px); overflow-y: auto; scrollbar-width: thin; }
.vl-manual-nav nav { display: grid; gap: 2px; margin: 6px 0 14px; }
.vl-manual-nav nav:last-child { margin-bottom: 0; }
.vl-manual-nav nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--vl-tx2) !important; text-decoration: none !important; font-size: .87rem; transition: .2s; }
.vl-manual-nav nav a i { width: 16px; text-align: center; color: var(--vl-pur-l); font-size: .82rem; }
.vl-manual-nav nav a:hover, .vl-manual-nav nav a.on { background: rgba(139,92,246,.1); color: var(--vl-tx) !important; }
.vl-doc-tabs a.on { background: var(--vl-grad) !important; color: #fff !important; }
.vl-doc-tabs a.on i { color: #fff; }
.vl-num-dot { width: 20px; height: 20px; flex: none; border-radius: 6px; display: grid; place-items: center; font-size: .7rem; font-weight: 700; background: rgba(139,92,246,.15); color: var(--vl-pur-l); }
.vl-manual-body { display: grid; gap: 18px; min-width: 0; }
.vl-topic { scroll-margin-top: 90px; }
.vl-topic-head { display: flex; align-items: center; gap: 14px; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--vl-bd); }
.vl-topic-head h2 { margin: 0; font-size: 1.4rem; color: var(--vl-tx); }
.vl-topic-head .vl-label { margin-bottom: 2px; }
.vl-ico-num { font-weight: 700; font-size: 1.05rem; }
.vl-top { margin-left: auto; width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; border: 1px solid var(--vl-bd2); color: var(--vl-tx3) !important; text-decoration: none !important; transition: .2s; }
.vl-top:hover { color: #fff !important; background: var(--vl-grad); border-color: transparent; }
.vl-anchor { position: relative; top: -90px; display: block; }
.vl-prose { color: var(--vl-tx2); font-size: .95rem; }
.vl-prose > :last-child { margin-bottom: 0; }
.vl-prose h2, .vl-prose h3, .vl-prose h4 { color: var(--vl-tx) !important; font-size: 1.08rem !important; margin: 1.4rem 0 .6rem; display: flex; align-items: center; gap: 8px; }
.vl-prose h3::before, .vl-prose h4::before { content: ""; width: 4px; height: 16px; border-radius: 4px; background: var(--vl-grad); }
.vl-prose ul, .vl-prose ol { padding-left: 1.2rem; }
.vl-prose li { margin: .25rem 0; }
.vl-prose li::marker { color: var(--vl-pur-l); }
.vl-prose strong, .vl-prose b { color: var(--vl-tx); }
.vl-prose code { background: rgba(139,92,246,.12); color: var(--vl-pur-l); padding: 1px 7px; border-radius: 6px; font-size: .86em; }
.vl-prose table { margin: .8rem 0 1.2rem; font-size: .88rem; display: block; overflow-x: auto; }
.vl-prose th, .vl-prose td { padding: 9px 14px !important; }
.vl-prose blockquote { margin: 1rem 0; padding: 12px 16px; border-left: 3px solid var(--vl-pur); background: rgba(139,92,246,.06); border-radius: 0 12px 12px 0; }
.vl-prose hr { border-color: var(--vl-bd); }

/* classes */
.vl-class-cards { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.vl-class-card { position: relative; display: block; border-radius: 18px; overflow: hidden; border: 1px solid var(--vl-bd); background: var(--vl-sf); aspect-ratio: 3 / 4.1; text-decoration: none !important; transition: .35s; }
.vl-class-card:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.vl-class-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; transition: transform .6s; }
.vl-class-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,15,0) 35%, rgba(8,8,15,.97) 88%); }
.vl-class-card > div { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 20px; display: grid; gap: 4px; }
.vl-class-card h2 { margin: 4px 0 0 !important; color: var(--vl-tx) !important; font-size: 1.35rem !important; }
.vl-class-card:first-child h2 { font-size: 2rem !important; }
.vl-class-card p { margin: 0; font-size: .86rem; color: var(--vl-tx2); line-height: 1.45; }
.vl-class-card small { color: var(--vl-tx3); font-size: .78rem; }
.vl-class-card .vl-tag { justify-self: start; }
.vl-class-card .vl-link { margin-top: 6px; opacity: 0; transform: translateY(6px); transition: .3s; }
.vl-class-card:hover { border-color: rgba(139,92,246,.55); box-shadow: 0 20px 60px rgba(139,92,246,.2); }
.vl-class-card:hover img { transform: scale(1.06); }
.vl-class-card:hover .vl-link { opacity: 1; transform: none; }
.vl-class-hero { display: grid; grid-template-columns: 380px minmax(0,1fr); overflow: hidden; position: relative; }
.vl-class-hero > img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; object-position: center 15%; }
.vl-class-hero-info { padding: 36px 40px; display: grid; gap: 12px; align-content: center; justify-items: start; position: relative; }
.vl-class-hero-info::before { content: ""; position: absolute; width: 460px; height: 460px; right: -180px; top: -200px; border-radius: 50%; filter: blur(80px); background: radial-gradient(circle, rgba(139,92,246,.25), transparent 70%); pointer-events: none; }
.vl-class-hero-info > * { position: relative; }
.vl-h1-sm { font-size: clamp(2rem, 4vw, 3rem); margin: 0; }
.vl-class-hero .vl-hero-sub { margin: 0; color: var(--vl-tx2); max-width: 560px; }
.vl-attr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 1rem; }
.vl-attr-grid .vl-stat { background: var(--vl-bg3); backdrop-filter: none; }
.vl-attr-grid .vl-stat b { display: block; font-size: 1.6rem; margin-top: 4px; }
.vl-class-mini { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.vl-class-mini a { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 1; border: 1px solid var(--vl-bd); text-decoration: none !important; }
.vl-class-mini img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; transition: transform .4s; }
.vl-class-mini a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(8,8,15,.92)); }
.vl-class-mini span { position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 1; font-size: .7rem; font-weight: 600; color: var(--vl-tx); line-height: 1.2; }
.vl-class-mini a:hover img { transform: scale(1.08); }
.vl-class-mini a:hover { border-color: rgba(139,92,246,.5); }

/* biblioteca / segurança */
.vl-lib-search { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.vl-lib-search h2 { margin: 0; font-size: 1.35rem; color: var(--vl-tx); }
.vl-lib-search .vl-toolbar { margin: 0; flex: 1 1 380px; max-width: 520px; flex-wrap: nowrap; }
.vl-lib-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.vl-lib-card { display: grid; gap: 6px; align-content: start; padding: 22px; text-decoration: none !important; position: relative; overflow: hidden; }
.vl-lib-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--vl-grad); transform: scaleX(0); transform-origin: left; transition: transform .35s; }
.vl-lib-card:hover { border-color: rgba(139,92,246,.45); transform: translateY(-4px); }
.vl-lib-card:hover::after { transform: scaleX(1); }
.vl-lib-card .vl-ico { margin-bottom: 8px; }
.vl-lib-card h3 { margin: 0 !important; color: var(--vl-tx) !important; font-size: 1.12rem !important; }
.vl-lib-card p { margin: 0 0 6px; font-size: .88rem; }
.vl-post-wrap .card { background: var(--vl-sf) !important; border: 1px solid var(--vl-bd) !important; border-radius: 18px !important; }

/* painel do jogador e páginas montadas pelo application.js */
body .section.vl-app { padding: 0 !important; margin-top: 22px; display: block; }
body .vl-app #app-content > section, body .vl-app #app-content > .card { background: var(--vl-sf) !important; border: 1px solid var(--vl-bd) !important; border-radius: 18px !important; padding: 1.4rem 1.5rem !important; margin-bottom: 18px; }
body .vl-app #app-content h2 { font-size: 1.3rem !important; color: var(--vl-tx) !important; margin-top: 0; }
body .vl-app #app-content input:not([type=checkbox]):not([type=radio]), body .vl-app #app-content select, body .vl-app #app-content textarea { background: var(--vl-bg3) !important; border: 1px solid var(--vl-bd2) !important; border-radius: 12px !important; color: var(--vl-tx) !important; padding: 10px 14px !important; font-family: var(--vl-font); }
body .vl-app #app-content input:focus, body .vl-app #app-content select:focus, body .vl-app #app-content textarea:focus { border-color: var(--vl-pur) !important; box-shadow: 0 0 0 3px rgba(139,92,246,.2) !important; outline: none; }
body .vl-app .card { background: var(--vl-bg3) !important; border: 1px solid var(--vl-bd) !important; border-radius: 14px !important; }

@media (max-width: 1100px) {
  .vl-class-cards { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .vl-class-card:first-child { grid-column: span 3; grid-row: auto; aspect-ratio: 16 / 8; }
  .vl-journey { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 991.98px) {
  .vl-pagehead { padding: 30px 24px; min-height: 0; margin-inline: 16px; }
  .vl-manual { grid-template-columns: 1fr; }
  .vl-manual-nav { position: static; }
  .vl-manual-nav .vl-block { max-height: none; }
  .vl-manual-nav nav:not(.vl-doc-tabs) { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .vl-page .vl-side { position: static; }
  .vl-mirrors, .vl-lib-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .vl-class-hero { grid-template-columns: 1fr; }
  .vl-class-hero > img { min-height: 0; max-height: 340px; }
  .vl-class-hero-info { padding: 26px 24px; }
}
@media (max-width: 600px) {
  .vl-pagehead-in { flex-direction: column; align-items: flex-start; gap: 14px; }
  .vl-ico-lg { width: 56px; height: 56px; font-size: 1.3rem; }
  .vl-podium { grid-template-columns: 1fr; }
  .vl-podium .vl-pod { aspect-ratio: 16 / 9; }
  .vl-podium .vl-pod-1 { order: -1; }
  .vl-hide-sm { display: none; }
  .vl-toolbar select { width: 100%; }
  .vl-mirrors, .vl-lib-grid, .vl-journey, .vl-manual-nav nav:not(.vl-doc-tabs) { grid-template-columns: 1fr; }
  .vl-class-cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .vl-class-card:first-child { grid-column: span 2; }
  .vl-castle-row { flex-wrap: wrap; }
  .vl-castle-row .vl-siege-time { margin-left: 0; }
  .vl-lib-search .vl-toolbar { flex-wrap: wrap; }
  .vl-block { padding: 1.1rem 1.1rem; }
}

/* ---- [VLFRONT] ajustes da revisão das páginas ---- */
.vl-podium { display: flex; justify-content: center; }
.vl-podium .vl-pod { flex: 0 1 calc(33.333% - 11px); }
.vl-podium .vl-pod-1 { flex-basis: calc(36% - 11px); }
.vl-class-cards { display: flex; flex-wrap: wrap; justify-content: center; }
.vl-class-cards .vl-class-card, .vl-class-cards .vl-class-card:first-child { flex: 0 1 calc(25% - 12px); aspect-ratio: 3 / 4.1; grid-column: auto; grid-row: auto; }
.vl-class-card:first-child h2 { font-size: 1.35rem !important; }
.vl-class-card .vl-tag { background: rgba(8,8,15,.75); backdrop-filter: blur(6px); }
.vl-prose table { display: table; width: 100%; }
.vl-stats-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.vl-stat b.on { color: var(--vl-ok); }
.vl-stat b.off { color: var(--vl-bad); }
.vl-online-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.vl-online-card { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 14px; background: var(--vl-bg3); border: 1px solid var(--vl-bd); text-decoration: none !important; transition: .25s; }
.vl-online-card:hover { border-color: rgba(139,92,246,.5); transform: translateY(-2px); }
.vl-online-card img { width: 44px; height: 44px; border-radius: 11px; object-fit: cover; object-position: center 15%; }
.vl-online-card > span { display: grid; flex: 1; min-width: 0; }
.vl-online-card b { color: var(--vl-tx); overflow: hidden; text-overflow: ellipsis; }
.vl-online-card small { color: var(--vl-tx3); font-size: .78rem; }
.vl-empty-state { grid-column: 1 / -1; display: grid; justify-items: center; text-align: center; gap: 6px; padding: 34px 16px; border: 1px dashed var(--vl-bd2); border-radius: 14px; }
.vl-empty-state .vl-ico { margin-bottom: 6px; }
.vl-empty-state b { color: var(--vl-tx); font-size: 1.1rem; }
.vl-empty-state p { max-width: 460px; margin: 0 0 8px; }
.vl-profile-stats { width: 100%; max-width: 520px; margin: 4px 0; }
.vl-profile-hero .vl-hero-cta { display: flex; flex-wrap: wrap; gap: 10px; }
img.vl-dim { filter: grayscale(1) brightness(.4); }
@media (max-width: 991.98px) { .vl-stats-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .vl-class-cards .vl-class-card, .vl-class-cards .vl-class-card:first-child { flex-basis: calc(33.333% - 11px); } }
@media (max-width: 600px) {
  .vl-podium { flex-direction: column; }
  .vl-podium .vl-pod, .vl-podium .vl-pod-1 { flex-basis: auto; aspect-ratio: 16 / 10; }
  .vl-class-cards .vl-class-card, .vl-class-cards .vl-class-card:first-child { flex-basis: calc(50% - 8px); }
  .vl-prose table { display: block; }
}

/* ---- [VLFRONT] login / cadastro / recuperar em duas colunas ---- */
body.auth-screen main { min-height: 0 !important; display: block !important; padding: 28px 16px 56px !important; max-width: 1240px; margin: 0 auto; }
.vl-auth { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); border: 1px solid var(--vl-bd); border-radius: 22px; overflow: hidden; background: var(--vl-sf); min-height: 640px; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.vl-auth-art { position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 44px; }
.vl-auth-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; }
.vl-auth-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,15,.25) 0%, rgba(8,8,15,.6) 45%, rgba(8,8,15,.96) 100%); }
.vl-auth-art .vl-aur { position: absolute; z-index: 1; width: 480px; height: 480px; left: -160px; bottom: -200px; border-radius: 50%; filter: blur(80px); background: radial-gradient(circle, rgba(139,92,246,.4), transparent 70%); pointer-events: none; }
.vl-auth-art-in { position: relative; z-index: 2; display: grid; gap: 14px; justify-items: start; }
.vl-auth-logo { width: 150px; filter: drop-shadow(0 0 22px rgba(139,92,246,.6)); }
.vl-auth-art h2 { margin: 0 !important; font-size: clamp(1.8rem, 3vw, 2.5rem) !important; font-weight: 700 !important; line-height: 1.1; color: var(--vl-tx) !important; }
.vl-auth-perks { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 10px; }
.vl-auth-perks li { display: flex; align-items: center; gap: 12px; color: var(--vl-tx2); font-size: .93rem; }
.vl-auth-perks i { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: rgba(139,92,246,.18); border: 1px solid rgba(139,92,246,.35); color: var(--vl-pur-l); font-size: .8rem; flex: none; }
.vl-auth-form { padding: 48px 52px; display: flex; flex-direction: column; justify-content: center; position: relative; }
.vl-auth-form::before { content: ""; position: absolute; width: 380px; height: 380px; right: -170px; top: -190px; border-radius: 50%; filter: blur(80px); background: radial-gradient(circle, rgba(59,130,246,.18), transparent 70%); pointer-events: none; }
.vl-auth-form > * { position: relative; }
.vl-auth-form h1 { font-size: 2rem !important; margin: 0 0 4px !important; color: var(--vl-tx) !important; text-align: left !important; }
.vl-auth-form > .vl-muted { margin: 0 0 22px; }
.vl-auth-form #app-message:empty, .vl-auth-form #app-message[hidden] { display: none; }
.vl-auth-form #app-message { margin-bottom: 14px; }
.vl-auth-form #app-content > section { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; }
.vl-auth-form #app-content form { display: grid; gap: 14px; }
.vl-auth-form #app-content label { display: grid; gap: 6px; color: var(--vl-tx2); font-size: .86rem; font-weight: 500; }
.vl-auth-form #app-content label:has(input[type=checkbox]) { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 10px; }
.vl-auth-form #app-content input:not([type=checkbox]):not([type=radio]) { width: 100%; background: var(--vl-bg3) !important; border: 1px solid var(--vl-bd2) !important; border-radius: 12px !important; color: var(--vl-tx) !important; padding: 12px 14px !important; margin: 0 !important; font-family: var(--vl-font); }
.vl-auth-form #app-content input:focus { border-color: var(--vl-pur) !important; box-shadow: 0 0 0 3px rgba(139,92,246,.2) !important; outline: none; }
.vl-auth-form #app-content button[type=submit], .vl-auth-form #app-content form button { width: 100%; padding: .8rem 1rem !important; margin-top: 4px; box-shadow: 0 10px 30px rgba(139,92,246,.35); }
.vl-auth-form #app-content > a.button, .vl-auth-form #app-content .button.secondary { display: inline-flex; width: auto !important; margin-top: 12px; background: transparent !important; border: 0 !important; color: var(--vl-pur-l) !important; padding: 0 !important; font-weight: 600; }
.vl-auth-switch { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--vl-bd); color: var(--vl-tx3); font-size: .9rem; }
.vl-auth-switch a { color: var(--vl-pur-l) !important; font-weight: 600; text-decoration: none !important; }

/* aviso de área restrita (painel sem login) */
.vl-gate { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 48px 24px; background: var(--vl-sf); border: 1px solid var(--vl-bd); border-radius: 18px; position: relative; overflow: hidden; }
.vl-gate::before { content: ""; position: absolute; width: 460px; height: 460px; left: 50%; top: -300px; transform: translateX(-50%); border-radius: 50%; filter: blur(80px); background: radial-gradient(circle, rgba(139,92,246,.3), transparent 70%); pointer-events: none; }
.vl-gate > * { position: relative; }
.vl-gate .vl-ico-lg { margin-bottom: 8px; }
.vl-gate h2 { margin: 0 !important; font-size: 1.6rem !important; color: var(--vl-tx) !important; }
.vl-gate p { margin: 0; max-width: 460px; }
.vl-gate-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; }
.vl-gate-cta .vl-btn { min-width: 150px; }
body .vl-app .market-categories { margin-bottom: 8px; }
body .vl-app .market-categories .card h3 { font-size: .92rem !important; margin: 10px 0 0 !important; }
body .vl-app .market-categories .card:hover { border-color: rgba(139,92,246,.45) !important; transform: translateY(-3px); transition: .25s; }

@media (max-width: 991.98px) {
  .vl-auth { grid-template-columns: 1fr; min-height: 0; }
  .vl-auth-art { min-height: 300px; padding: 28px; }
  .vl-auth-perks { display: none; }
  .vl-auth-form { padding: 32px 24px; }
}

/* ---- [VLFRONT] linha do tempo das novidades + rodapé nas telas de login ---- */
.vl-timeline ul { list-style: none; padding: 0 0 0 26px; margin: 0; position: relative; }
.vl-timeline ul::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, rgba(139,92,246,.6), rgba(59,130,246,.15)); }
.vl-timeline li { position: relative; margin: 0 0 14px; padding: 12px 16px; background: var(--vl-bg3); border: 1px solid var(--vl-bd); border-radius: 12px; }
.vl-timeline li:last-child { margin-bottom: 0; border-color: rgba(139,92,246,.4); }
.vl-timeline li::before { content: ""; position: absolute; left: -25px; top: 17px; width: 12px; height: 12px; border-radius: 50%; background: var(--vl-grad); box-shadow: 0 0 0 4px var(--vl-sf), 0 0 14px rgba(139,92,246,.6); }
.vl-timeline li > strong:first-child { display: inline-block; padding: 1px 9px; margin-right: 4px; border-radius: 100px; background: rgba(139,92,246,.15); color: var(--vl-pur-l); font-size: .82rem; }
body.auth-screen .vl-footer, body.auth-screen .vl-footer * { text-align: left; }
body.auth-screen .vl-footer-grid > div { justify-self: stretch; }
@media (max-width: 600px) { .vl-podium { align-items: stretch; } .vl-podium .vl-pod { width: 100%; } }

/* ---- [VLFRONT] painel da conta (/account) ---- */
body .vl-app-account #app-content, body .vl-app-services #app-content { display: grid; gap: 18px; }
.vl-acc-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 20px; padding: 22px 24px; border-radius: 18px; border: 1px solid var(--vl-bd); background: linear-gradient(120deg, rgba(139,92,246,.18), rgba(59,130,246,.08) 55%, var(--vl-sf)); }
.vl-acc-hero::before { content: ""; position: absolute; width: 420px; height: 420px; left: -150px; top: -220px; border-radius: 50%; filter: blur(80px); background: radial-gradient(circle, rgba(139,92,246,.45), transparent 70%); pointer-events: none; }
.vl-acc-hero > * { position: relative; }
.vl-acc-av { width: 78px; height: 78px; border-radius: 18px; object-fit: cover; object-position: center 15%; border: 2px solid rgba(139,92,246,.6); box-shadow: 0 0 0 4px rgba(139,92,246,.15), 0 12px 30px rgba(139,92,246,.35); flex: none; }
.vl-acc-hi { flex: 1; min-width: 0; }
.vl-acc-hi h2 { margin: 0 0 8px !important; font-size: 1.7rem !important; color: var(--vl-tx) !important; }
.vl-acc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.vl-acc-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 100px; font-size: .78rem; font-weight: 600; color: var(--vl-tx2); background: rgba(255,255,255,.06); border: 1px solid var(--vl-bd2); }
.vl-acc-tag i { color: var(--vl-pur-l); }
.vl-acc-vip.on { background: linear-gradient(135deg,#f2b33d,#e0892a); color: #1a1205; border-color: transparent; }
.vl-acc-vip.on i { color: #1a1205; }
.vl-acc-on { color: #86efac; border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.1); }
.vl-acc-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.vl-acc-act { display: grid; justify-items: center; gap: 5px; min-width: 70px; padding: 10px 8px; border-radius: 14px; background: rgba(8,8,15,.45); border: 1px solid var(--vl-bd2); color: var(--vl-tx2) !important; text-decoration: none !important; font-size: .75rem; font-weight: 600; transition: .2s; }
.vl-acc-act i { font-size: 1.05rem; color: var(--vl-pur-l); }
.vl-acc-act:hover { color: #fff !important; border-color: rgba(139,92,246,.6); background: rgba(139,92,246,.18); transform: translateY(-2px); }
.vl-acc-out i { color: #f87171; }
.vl-acc-out:hover { border-color: rgba(239,68,68,.5); background: rgba(239,68,68,.12); }

.vl-acc-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.vl-acc-stat { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--vl-sf); border: 1px solid var(--vl-bd); position: relative; overflow: hidden; }
.vl-acc-stat::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--vl-grad); opacity: .7; }
.vl-acc-sico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--vl-grad); color: #fff; flex: none; box-shadow: 0 8px 22px rgba(139,92,246,.35); }
.vl-acc-stat small { display: block; color: var(--vl-tx3); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.vl-acc-stat b { display: block; color: var(--vl-tx); font-size: 1.3rem; line-height: 1.2; }
.vl-acc-stat em { display: block; font-style: normal; color: var(--vl-tx3); font-size: .74rem; }

.vl-acc-quick { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 10px; }
.vl-acc-quick a { display: grid; justify-items: center; gap: 8px; padding: 14px 8px; border-radius: 14px; background: var(--vl-sf); border: 1px solid var(--vl-bd); text-decoration: none !important; transition: .25s; }
.vl-acc-quick a span { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(139,92,246,.14); border: 1px solid rgba(139,92,246,.3); color: var(--vl-pur-l); transition: .25s; }
.vl-acc-quick a b { color: var(--vl-tx2); font-size: .8rem; font-weight: 600; text-align: center; }
.vl-acc-quick a:hover { border-color: rgba(139,92,246,.5); transform: translateY(-3px); }
.vl-acc-quick a:hover span { background: var(--vl-grad); color: #fff; border-color: transparent; }
.vl-acc-quick a:hover b { color: var(--vl-tx); }

.vl-acc-roster { padding: 20px 22px; border-radius: 18px; background: var(--vl-sf); border: 1px solid var(--vl-bd); }
.vl-acc-rhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.vl-acc-rhead h2 { margin: 0 !important; font-size: 1.3rem !important; color: var(--vl-tx) !important; }
.vl-acc-warn { font-size: .78rem; font-weight: 600; color: #fbbf24; background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.3); padding: 4px 10px; border-radius: 100px; }
.vl-acc-chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.vl-acc-char { display: grid; gap: 12px; padding: 14px; border-radius: 14px; background: var(--vl-bg3); border: 1px solid var(--vl-bd); transition: .25s; }
.vl-acc-char:hover { border-color: rgba(139,92,246,.4); }
.vl-acc-char.last { border-color: rgba(139,92,246,.45); box-shadow: inset 0 0 0 1px rgba(139,92,246,.15); }
.vl-acc-ctop { display: flex; align-items: center; gap: 12px; }
.vl-acc-ctop img { width: 54px; height: 54px; border-radius: 13px; object-fit: cover; object-position: center 15%; border: 1px solid var(--vl-bd2); flex: none; }
.vl-acc-ctitle { display: grid; min-width: 0; flex: 1; }
.vl-acc-ctitle a { color: var(--vl-tx) !important; font-weight: 700; font-size: 1.05rem; text-decoration: none !important; }
.vl-acc-ctitle a:hover { color: var(--vl-pur-l) !important; }
.vl-acc-ctitle small { color: var(--vl-tx2); font-size: .8rem; }
.vl-acc-map { color: var(--vl-tx3); font-size: .74rem; }
.vl-acc-map i { color: var(--vl-pur-l); }
.vl-acc-pts { align-self: flex-start; font-size: .72rem; font-weight: 700; color: #1a1205; background: linear-gradient(135deg,#f2b33d,#e0892a); padding: 3px 9px; border-radius: 100px; white-space: nowrap; }
.vl-acc-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.vl-acc-nums div { text-align: center; padding: 8px 4px; border-radius: 10px; background: rgba(139,92,246,.08); border: 1px solid rgba(139,92,246,.18); }
.vl-acc-nums b { display: block; color: var(--vl-tx); font-size: 1.1rem; }
.vl-acc-nums small { color: var(--vl-tx3); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }
.vl-acc-attrs { display: flex; flex-wrap: wrap; gap: 6px; }
.vl-acc-attrs span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 9px; background: rgba(255,255,255,.04); border: 1px solid var(--vl-bd); font-size: .8rem; color: var(--vl-tx2); }
.vl-acc-attrs i { color: var(--vl-pur-l); font-size: .72rem; }
.vl-acc-attrs b { color: var(--vl-tx); font-weight: 600; }
.vl-acc-tools { display: grid; gap: 6px; }
.vl-acc-det { border-radius: 10px; border: 1px solid var(--vl-bd); background: rgba(8,8,15,.35); }
.vl-acc-det > summary { cursor: pointer; list-style: none; padding: 8px 12px; font-size: .84rem; font-weight: 600; color: var(--vl-tx2); display: flex; align-items: center; gap: 8px; }
.vl-acc-det > summary::-webkit-details-marker { display: none; }
.vl-acc-det > summary::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-left: auto; font-size: .7rem; transition: .2s; }
.vl-acc-det[open] > summary::after { transform: rotate(180deg); }
.vl-acc-det > summary i { color: var(--vl-pur-l); }
.vl-acc-det[open] { border-color: rgba(139,92,246,.35); }
.vl-acc-det > section, .vl-acc-sec > section { background: transparent !important; border: 0 !important; padding: 4px 12px 12px !important; margin: 0 !important; }
.vl-acc-det > section > h2, .vl-acc-sec > section > h2 { display: none; }
body .vl-acc-det form { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px !important; }
body .vl-acc-det form label { font-size: .78rem; }
body .vl-acc-det form label:has(input[type=password]), body .vl-acc-det form > :last-child { grid-column: 1 / -1; }
body .vl-acc-det input { padding: 8px 10px !important; }
.vl-acc-sec { border-radius: 16px; border: 1px solid var(--vl-bd); background: var(--vl-sf); }
.vl-acc-sec > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
.vl-acc-sec > summary::-webkit-details-marker { display: none; }
.vl-acc-sec > summary b { display: block; color: var(--vl-tx); }
.vl-acc-sec > summary small { color: var(--vl-tx3); font-size: .8rem; }
.vl-acc-sec > summary::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-left: auto; color: var(--vl-tx3); font-size: .8rem; transition: .2s; }
.vl-acc-sec[open] > summary::after { transform: rotate(180deg); }
.vl-acc-sec[open] { border-color: rgba(139,92,246,.35); }
body .vl-acc-sec form { max-width: 520px; padding: 0 6px 6px; }
.vl-acc-empty { display: grid; justify-items: center; gap: 6px; padding: 30px; text-align: center; border: 1px dashed var(--vl-bd2); border-radius: 14px; }
.vl-acc-empty b { color: var(--vl-tx); }

@media (max-width: 991.98px) {
  .vl-acc-hero { flex-wrap: wrap; }
  .vl-acc-acts { width: 100%; }
  .vl-acc-act { flex: 1; }
  .vl-acc-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .vl-acc-quick { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .vl-acc-av { width: 60px; height: 60px; }
  .vl-acc-hi h2 { font-size: 1.35rem !important; }
  .vl-acc-chars { grid-template-columns: 1fr; }
}
/* cabeçalho compacto nas páginas do painel */
.vl-pagehead-account, .vl-pagehead-services, .vl-pagehead-credits, .vl-pagehead-support { min-height: 0; padding: 26px 40px; }
.vl-pagehead-account .vl-ico-lg, .vl-pagehead-services .vl-ico-lg, .vl-pagehead-credits .vl-ico-lg, .vl-pagehead-support .vl-ico-lg { width: 56px; height: 56px; font-size: 1.3rem; }
.vl-pagehead-account h1, .vl-pagehead-services h1, .vl-pagehead-credits h1, .vl-pagehead-support h1 { font-size: clamp(1.6rem, 3vw, 2.2rem) !important; }
.vl-pagehead-account .vl-crumb, .vl-pagehead-services .vl-crumb, .vl-pagehead-credits .vl-crumb, .vl-pagehead-support .vl-crumb { margin-bottom: 4px; }

/* ---- [VLFRONT] serviços, créditos, suporte e recuperar ---- */
body .vl-app-credits #app-content, body .vl-app-support #app-content { display: grid; gap: 18px; }
.vl-svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.vl-svc { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 14px; background: var(--vl-sf); border: 1px solid var(--vl-bd); text-decoration: none !important; transition: .25s; }
a.vl-svc:hover { border-color: rgba(139,92,246,.5); transform: translateY(-3px); box-shadow: 0 14px 36px rgba(139,92,246,.15); }
.vl-svc > div { flex: 1; min-width: 0; padding-right: 64px; }
.vl-svc b { display: block; color: var(--vl-tx); font-size: .98rem; margin-bottom: 2px; }
.vl-svc small { color: var(--vl-tx3); font-size: .82rem; line-height: 1.45; display: block; }
.vl-svc.off { opacity: .6; }
.vl-svc.off .vl-acc-sico { background: rgba(255,255,255,.08); box-shadow: none; color: var(--vl-tx3); }
.vl-svc-badge { position: absolute; top: 12px; right: 12px; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 3px 8px; border-radius: 100px; background: rgba(255,255,255,.06); color: var(--vl-tx3); border: 1px solid var(--vl-bd2); }
.vl-svc-badge.on { background: rgba(34,197,94,.12); color: #86efac; border-color: rgba(34,197,94,.35); }
.vl-acc-roster .vl-svc { background: var(--vl-bg3); }

.vl-cred-hero .vl-acc-hi h2 { font-size: 2rem !important; }
.vl-cred-coin { width: 78px; height: 78px; border-radius: 20px; display: grid; place-items: center; flex: none; font-size: 2rem; color: #1a1205; background: linear-gradient(135deg,#f2b33d,#e0892a); box-shadow: 0 0 0 4px rgba(242,179,61,.15), 0 12px 30px rgba(242,179,61,.35); }
.vl-cred-plans { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.vl-cred-plan { position: relative; padding: 18px; border-radius: 14px; background: var(--vl-bg3); border: 1px solid var(--vl-bd); }
.vl-cred-plan.cur { border-color: rgba(139,92,246,.55); box-shadow: inset 0 0 0 1px rgba(139,92,246,.2), 0 14px 36px rgba(139,92,246,.15); }
.vl-cred-ph { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.vl-cred-ph i { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--vl-grad); color: #fff; }
.vl-cred-plan:nth-child(1) .vl-cred-ph i { background: rgba(255,255,255,.1); color: var(--vl-tx2); }
.vl-cred-plan:nth-child(3) .vl-cred-ph i { background: linear-gradient(135deg,#f2b33d,#e0892a); color: #1a1205; }
.vl-cred-ph b { color: var(--vl-tx); font-size: 1.1rem; }
.vl-cred-plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.vl-cred-plan li { color: var(--vl-tx2); font-size: .88rem; }
.vl-cred-plan li i { color: #86efac; font-size: .75rem; margin-right: 4px; }

.vl-sup { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap: 18px; align-items: start; }
.vl-sup-new > section, .vl-sup-conv > section { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; }
.vl-sup-new > section > h2, .vl-sup-conv > section > h2 { display: none; }
body .vl-sup-new form, body .vl-sup-conv form { display: grid !important; gap: 12px !important; }
body .vl-sup textarea, body .vl-sup-conv textarea { min-height: 120px; }
.vl-sup-rows { display: grid; gap: 8px; }
.vl-sup-row { display: flex !important; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px !important; border-radius: 12px !important; background: var(--vl-bg3) !important; border: 1px solid var(--vl-bd) !important; color: var(--vl-tx) !important; box-shadow: none !important; transition: .2s; }
.vl-sup-row:hover { border-color: rgba(139,92,246,.45) !important; transform: translateX(3px); }
.vl-sup-row .vl-acc-sico { width: 36px; height: 36px; border-radius: 10px; box-shadow: none; }
.vl-sup-row > span:nth-child(2) { flex: 1; min-width: 0; display: grid; }
.vl-sup-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.vl-sup-row small { color: var(--vl-tx3); font-size: .76rem; font-weight: 400; }
.vl-sup-st { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 3px 9px; border-radius: 100px; white-space: nowrap; background: rgba(255,255,255,.06); color: var(--vl-tx3); border: 1px solid var(--vl-bd2); }
.vl-sup-st.st-open { background: rgba(59,130,246,.14); color: #93c5fd; border-color: rgba(59,130,246,.35); }
.vl-sup-st.st-answered { background: rgba(34,197,94,.12); color: #86efac; border-color: rgba(34,197,94,.35); }
.vl-sup-pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; color: var(--vl-tx3); font-size: .85rem; }
.vl-sup-pager:empty { display: none; }
.vl-sup-msgs { display: grid; gap: 10px; margin-bottom: 14px; }
.vl-sup-msg { max-width: 85%; padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: var(--vl-bg3); border: 1px solid var(--vl-bd); }
.vl-sup-msg.staff { justify-self: end; border-radius: 14px 14px 4px 14px; background: rgba(139,92,246,.12); border-color: rgba(139,92,246,.35); }
.vl-sup-msg small { color: var(--vl-tx3); font-size: .74rem; }
.vl-sup-msg small i { color: var(--vl-pur-l); }
.vl-sup-msg p { margin: 4px 0 0; color: var(--vl-tx); white-space: pre-wrap; }
.vl-sup-conv > button, .vl-sup-conv > .button { margin-top: 10px; }
.vl-gate-flat { margin-top: 4px; }

@media (max-width: 991.98px) {
  .vl-svc-grid, .vl-cred-plans { grid-template-columns: 1fr 1fr; }
  .vl-sup { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .vl-svc-grid, .vl-cred-plans { grid-template-columns: 1fr; }
  .vl-sup-msg { max-width: 100%; }
}
body .vl-sup form, body .vl-acc-det form, body .vl-acc-sec form, body .vl-sup-conv form { border: 0 !important; background: transparent !important; padding: 0 !important; box-shadow: none !important; }
body .vl-app select option { background: #12121f; color: #f0f0ff; }
body .vl-sup-new form > label, body .vl-sup-conv form > label { display: grid; gap: 6px; }
/* mercado */
body .vl-app-marketplace #app-content { display: grid; gap: 16px; }
.vl-mk-bar { display: flex; gap: 10px; align-items: center; padding: 14px; border-radius: 16px; background: var(--vl-sf); border: 1px solid var(--vl-bd); }
.vl-mk-bar .vl-search { flex: 1; }
.vl-mk-bar .vl-search input { width: 100%; background: var(--vl-bg3) !important; border: 1px solid var(--vl-bd2) !important; border-radius: 12px !important; color: var(--vl-tx) !important; padding: 10px 14px 10px 38px !important; }
.vl-mk-bar .vl-btn { white-space: nowrap; }
body .vl-app .market-categories { grid-template-columns: repeat(6, minmax(0,1fr)) !important; }
body .vl-app .market-categories .card { padding: 14px 8px !important; }
body .vl-app .market-categories img { width: 56px; height: 56px; }
@media (max-width: 991.98px) { body .vl-app .market-categories { grid-template-columns: repeat(3, minmax(0,1fr)) !important; } }
@media (max-width: 600px) { .vl-mk-bar { flex-wrap: wrap; } .vl-mk-bar .vl-search { flex-basis: 100%; } .vl-mk-bar .vl-btn { flex: 1; } }
body .vl-app #app-content form.vl-mk-bar { display: flex !important; flex-wrap: nowrap; gap: 10px !important; align-items: center; padding: 14px !important; background: var(--vl-sf) !important; border: 1px solid var(--vl-bd) !important; border-radius: 16px !important; }
body .vl-app #app-content form.vl-mk-bar .vl-search { display: block !important; position: relative; flex: 1 1 auto; margin: 0 !important; }
body .vl-app #app-content form.vl-mk-bar .vl-btn { width: auto !important; margin: 0 !important; flex: none; }
body .vl-app .market-categories { gap: 12px !important; }
@media (max-width: 600px) { body .vl-app #app-content form.vl-mk-bar { flex-wrap: wrap; } body .vl-app #app-content form.vl-mk-bar .vl-search { flex-basis: 100%; } body .vl-app #app-content form.vl-mk-bar .vl-btn { flex: 1; } }
body .vl-app #app-content form.vl-mk-bar .vl-search input { padding-left: 40px !important; }
body .vl-app #app-content form.vl-mk-bar .vl-search i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); z-index: 1; color: var(--vl-tx3); }
body .vl-app .market-categories .card { margin: 0 !important; }

/* ---- [VLFRONT] modais Entrar / Criar conta / Downloads ---- */
.vl-modal .modal-dialog { max-width: 980px; }
.vl-modal.vl-modal-sm .modal-dialog { max-width: 480px; }
.vl-modal .modal-content { position: relative; background: var(--vl-sf) !important; border: 1px solid rgba(139,92,246,.35) !important; border-radius: 22px !important; overflow: hidden; box-shadow: 0 40px 120px rgba(0,0,0,.6), 0 0 0 1px rgba(139,92,246,.15), 0 0 80px rgba(139,92,246,.18); }
.vl-modal-close { position: absolute; top: 16px; right: 16px; z-index: 5; width: 36px; height: 36px; border-radius: 10px; background-color: rgba(8,8,15,.55) !important; opacity: .8; border: 1px solid var(--vl-bd2) !important; background-size: 12px; }
.vl-modal-close:hover { opacity: 1; background-color: rgba(139,92,246,.35) !important; }
.vl-modal-body { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); min-height: 600px; }
.vl-modal-art { position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 36px; }
.vl-modal-art .vl-auth-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; transform: scale(1.04); animation: vlKen 18s ease-in-out infinite alternate; }
@keyframes vlKen { to { transform: scale(1.12) translate(-1.5%, -1%); } }
.vl-modal-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,15,.15) 0%, rgba(8,8,15,.55) 40%, rgba(8,8,15,.97) 100%), linear-gradient(90deg, transparent 70%, rgba(22,22,42,.9)); }
.vl-modal-art .vl-aur { position: absolute; z-index: 1; width: 460px; height: 460px; left: -170px; bottom: -200px; border-radius: 50%; filter: blur(80px); background: radial-gradient(circle, rgba(139,92,246,.5), transparent 70%); pointer-events: none; }
.vl-modal-art-in { position: relative; z-index: 2; display: grid; gap: 12px; justify-items: start; }
.vl-modal-logo { width: 140px; filter: drop-shadow(0 0 26px rgba(139,92,246,.7)); animation: vlFloat 5s ease-in-out infinite; }
@keyframes vlFloat { 50% { transform: translateY(-6px); } }
.vl-modal-art h3 { margin: 0 !important; font-size: clamp(1.6rem, 2.6vw, 2.2rem) !important; font-weight: 700 !important; line-height: 1.1; color: var(--vl-tx) !important; }
.vl-modal-perks { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 9px; }
.vl-modal-perks li { display: flex; align-items: center; gap: 11px; color: var(--vl-tx2); font-size: .9rem; }
.vl-modal-perks li b { color: var(--vl-tx); font-weight: 600; }
.vl-modal-perks i { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: rgba(139,92,246,.2); border: 1px solid rgba(139,92,246,.4); color: var(--vl-pur-l); font-size: .8rem; flex: none; }
.vl-modal-form { position: relative; padding: 44px 46px 34px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.vl-modal-form::before { content: ""; position: absolute; width: 400px; height: 400px; right: -180px; top: -200px; border-radius: 50%; filter: blur(80px); background: radial-gradient(circle, rgba(59,130,246,.22), transparent 70%); pointer-events: none; }
.vl-modal-form > * { position: relative; }
.vl-modal-form h2 { margin: 2px 0 6px !important; font-size: 1.8rem !important; font-weight: 700 !important; color: var(--vl-tx) !important; line-height: 1.15; }
.vl-modal-form > .vl-muted { margin: 0 0 20px; }

/* formulario montado pelo application.js (pagina e modal) */
:is(.vl-modal-form, .vl-auth-form) [data-app-message]:empty, :is(.vl-modal-form, .vl-auth-form) [data-app-message][hidden] { display: none; }
:is(.vl-modal-form, .vl-auth-form) :is([data-app-content], #app-content) > section { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; }
:is(.vl-modal-form, .vl-auth-form) :is([data-app-content], #app-content) > section > h2 { display: none !important; }
:is(.vl-modal-form, .vl-auth-form) form { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px 12px !important; border: 0 !important; background: transparent !important; padding: 0 !important; box-shadow: none !important; }
:is(.vl-modal-form, .vl-auth-form) form > label { grid-column: 1 / -1; display: grid !important; gap: 6px; margin: 0 !important; color: var(--vl-tx2) !important; font-size: .82rem !important; font-weight: 600; }
:is(.vl-modal-form, .vl-auth-form) form > label:has(input[name=password]), :is(.vl-modal-form, .vl-auth-form) form > label:has(input[name=password_confirmation]) { grid-column: auto; }
[data-page=auth] form > label:has(input[name=password]) { grid-column: 1 / -1 !important; }
:is(.vl-modal-form, .vl-auth-form) form input:not([type=checkbox]), :is(.vl-modal-form, .vl-auth-form) form select { width: 100%; background: rgba(8,8,15,.55) !important; border: 1px solid var(--vl-bd2) !important; border-radius: 12px !important; color: var(--vl-tx) !important; padding: 12px 14px !important; margin: 0 !important; font-family: var(--vl-font); font-size: .95rem; transition: .2s; }
:is(.vl-modal-form, .vl-auth-form) form input:focus { border-color: var(--vl-pur) !important; box-shadow: 0 0 0 3px rgba(139,92,246,.22) !important; background: rgba(8,8,15,.75) !important; outline: none; }
:is(.vl-modal-form, .vl-auth-form) form > label:has(input[type=checkbox]) { display: flex !important; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(139,92,246,.08); border: 1px solid rgba(139,92,246,.22); font-weight: 500; }
:is(.vl-modal-form, .vl-auth-form) form input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--vl-pur); flex: none; }
:is(.vl-modal-form, .vl-auth-form) meter.password-strength { width: 100%; height: 6px; border-radius: 6px; overflow: hidden; background: rgba(255,255,255,.08); border: 0; -webkit-appearance: none; appearance: none; }
:is(.vl-modal-form, .vl-auth-form) meter::-webkit-meter-bar { background: rgba(255,255,255,.08); border: 0; border-radius: 6px; height: 6px; }
:is(.vl-modal-form, .vl-auth-form) meter::-webkit-meter-optimum-value, :is(.vl-modal-form, .vl-auth-form) meter::-webkit-meter-suboptimum-value, :is(.vl-modal-form, .vl-auth-form) meter::-webkit-meter-even-less-good-value { background: var(--vl-grad); border-radius: 6px; }
:is(.vl-modal-form, .vl-auth-form) label small { color: var(--vl-tx3); font-weight: 400; font-size: .74rem; }
:is(.vl-modal-form, .vl-auth-form) form button[type=submit], :is(.vl-modal-form, .vl-auth-form) form > button { grid-column: 1 / -1; width: 100%; padding: .9rem 1rem !important; margin-top: 4px !important; border: 0 !important; border-radius: 12px !important; background: var(--vl-grad) !important; color: #fff !important; font-weight: 700 !important; font-size: 1rem !important; letter-spacing: .01em; box-shadow: 0 12px 34px rgba(139,92,246,.45) !important; transition: .25s; }
:is(.vl-modal-form, .vl-auth-form) form button[type=submit]:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(139,92,246,.6) !important; }
/* links extras que o application.js poe abaixo do formulario: o rodape "Ja tem conta?" ja cobre */
:is(.vl-modal-form, .vl-auth-form) :is([data-app-content], #app-content) > a.button { display: inline-flex !important; width: auto !important; margin: 14px 14px 0 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--vl-pur-l) !important; font-weight: 600; font-size: .86rem; }
.vl-modal-form [data-page=auth] [data-app-content] > a.button[href="/register"], .vl-modal-form [data-page=auth] [data-app-content] > a.button[href="/recover"] { display: none !important; }
.vl-modal-form .vl-auth-switch { margin-top: 20px; }
.vl-gate-in .vl-ico { background: linear-gradient(135deg, #22c55e, #16a34a); }

.vl-modal-dl { padding: 40px 32px 30px; display: grid; justify-items: center; text-align: center; gap: 8px; }
.vl-modal-dl h2 { margin: 8px 0 0 !important; font-size: 1.5rem !important; color: var(--vl-tx) !important; }
.vl-mirrors-1 { grid-template-columns: 1fr !important; width: 100%; margin: 10px 0; text-align: left; }

@media (max-width: 991.98px) {
  .vl-modal-body { grid-template-columns: 1fr; min-height: 0; }
  .vl-modal-art { min-height: 230px; padding: 24px; }
  .vl-modal-perks, .vl-modal-art h3 { display: none; }
  .vl-modal-logo { width: 110px; }
  .vl-modal-form { padding: 28px 22px; }
}
@media (max-width: 600px) {
  :is(.vl-modal-form, .vl-auth-form) form { grid-template-columns: 1fr; }
  :is(.vl-modal-form, .vl-auth-form) form > label { grid-column: 1 / -1 !important; }
}
@media (prefers-reduced-motion: reduce) { .vl-modal-art .vl-auth-bg, .vl-modal-logo { animation: none; } }
.vl-modal-form [data-page=auth] :is([data-app-content], #app-content) > a.button[href="/register"], .vl-modal-form [data-page=auth] :is([data-app-content], #app-content) > a.button[href="/recover"] { display: none !important; }
:is(.vl-modal-form, .vl-auth-form) form { align-items: start; }
:is(.vl-modal-form, .vl-auth-form) form > label { align-content: start; }

/* ---- [VLFRONT] painel do jogador (home) e menu da conta (topo) ---- */
.vl-pp { padding: 0 !important; overflow: hidden; position: relative; border-color: rgba(139,92,246,.3) !important; }
.vl-pp-art { position: relative; height: 112px; }
.vl-pp-art > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; }
.vl-pp-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,22,42,.1), rgba(22,22,42,1)), radial-gradient(circle at 50% 120%, rgba(139,92,246,.45), transparent 60%); }
.vl-pp-crest { position: absolute; z-index: 2; left: 50%; bottom: -30px; transform: translateX(-50%); width: 76px; height: 76px; padding: 6px; border-radius: 22px; background: var(--vl-sf); border: 1px solid rgba(139,92,246,.45); box-shadow: 0 10px 30px rgba(139,92,246,.45); object-fit: contain; animation: vlFloat 5s ease-in-out infinite; }
.vl-pp-crest.vl-pp-avimg { object-fit: cover; object-position: center 15%; padding: 0; }
.vl-pp-body { display: grid; gap: .55rem; justify-items: center; text-align: center; padding: 42px 20px 20px; }
.vl-pp-body[hidden] { display: none; }
.vl-pp-body .vl-label { margin: 0; }
.vl-pp-body h2 { margin: 0 !important; font-size: 1.4rem !important; font-weight: 700 !important; color: var(--vl-tx) !important; }
.vl-pp-body > p { margin: 0 0 .2rem; font-size: .86rem; }
.vl-pp-perks { list-style: none; margin: .1rem 0 .4rem; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.vl-pp-perks li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 100px; font-size: .74rem; font-weight: 600; color: var(--vl-tx2); background: rgba(139,92,246,.1); border: 1px solid rgba(139,92,246,.28); }
.vl-pp-perks i { color: var(--vl-pur-l); }
.vl-pp-body .vl-btn-lg { padding: .8rem 1rem; box-shadow: 0 10px 30px rgba(139,92,246,.4); }
.vl-pp-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.vl-pp-vip, .vl-pp-coins { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 100px; font-size: .76rem; font-weight: 700; background: rgba(255,255,255,.06); border: 1px solid var(--vl-bd2); color: var(--vl-tx2); white-space: nowrap; }
.vl-pp-vip i { color: var(--vl-pur-l); }
.vl-pp-vip.on { background: linear-gradient(135deg,#f2b33d,#e0892a); color: #1a1205; border-color: transparent; }
.vl-pp-vip.on i { color: #1a1205; }
.vl-pp-coins i { color: #f2b33d; }
.vl-pp-coins b { color: var(--vl-tx); }
.vl-pp-grid, .vl-accmenu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; margin-top: .3rem; }
.vl-pp-grid a, .vl-accmenu-grid a { display: grid; justify-items: center; gap: 6px; padding: 10px 4px; border-radius: 12px; background: var(--vl-bg3); border: 1px solid var(--vl-bd); color: var(--vl-tx2) !important; text-decoration: none !important; font-size: .72rem; font-weight: 600; transition: .2s; }
.vl-pp-grid a i, .vl-accmenu-grid a i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(139,92,246,.14); color: var(--vl-pur-l); font-size: .9rem; transition: .2s; }
.vl-pp-grid a:hover, .vl-accmenu-grid a:hover { border-color: rgba(139,92,246,.5); color: var(--vl-tx) !important; transform: translateY(-2px); }
.vl-pp-grid a:hover i, .vl-accmenu-grid a:hover i { background: var(--vl-grad); color: #fff; }
.vl-pp-chars { margin: .2rem 0 0; font-size: .78rem; color: var(--vl-tx3); }

.vl-accmenu { min-width: 300px !important; padding: 10px !important; border-radius: 16px !important; background: var(--vl-sf) !important; border: 1px solid rgba(139,92,246,.3) !important; box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 40px rgba(139,92,246,.15) !important; }
.vl-accmenu-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 12px; margin-bottom: 8px; border-bottom: 1px solid var(--vl-bd); }
.vl-accmenu-head img { width: 44px; height: 44px; border-radius: 12px; object-fit: contain; background: var(--vl-bg3); border: 1px solid rgba(139,92,246,.4); }
.vl-accmenu-head img.vl-pp-avimg { object-fit: cover; object-position: center 15%; }
.vl-accmenu-head > div { display: grid; gap: 3px; flex: 1; min-width: 0; justify-items: start; }
.vl-accmenu-head b { color: var(--vl-tx); font-size: .98rem; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.vl-accmenu-head .vl-pp-vip, .vl-accmenu-head .vl-pp-coins { font-size: .68rem; padding: 2px 8px; }
.vl-accmenu .vl-accmenu-grid { margin: 0 0 8px; }
.vl-accmenu .dropdown-item { border-radius: 10px; }

/* ---- [LOGOFX] logo da home com o efeito do launcher ---- */
.vl-logofx { position: relative; width: min(440px, 82vw); aspect-ratio: 1; display: grid; place-items: center; margin: -10px 0 -18px; }
.vl-logofx > * { grid-area: 1 / 1; }
.vl-logofx-glow { width: 80%; height: 80%; border-radius: 50%; background: radial-gradient(circle, rgba(47,111,224,.44) 0%, rgba(47,111,224,.19) 45%, rgba(47,111,224,0) 72%); animation: vlRunePulse 3s ease-in-out infinite alternate; }
.vl-rune { width: 100%; height: 100%; opacity: .6; animation: vlRunePulse 3s ease-in-out infinite alternate; overflow: visible; }
.vl-rune g { transform-origin: 260px 260px; transform-box: view-box; }
.vl-rune-outer { animation: vlSpin 90s linear infinite; }
.vl-rune-inner { animation: vlSpin 60s linear infinite reverse; }
.vl-rune-star { animation: vlSpin 150s linear infinite; }
@keyframes vlSpin { to { transform: rotate(360deg); } }
@keyframes vlRunePulse { from { opacity: .45; } to { opacity: .85; } }
.vl-logofx .vl-hero-logo { width: 73%; margin: 0; position: relative; z-index: 2; animation: vlLogoFloat 3.5s ease-in-out infinite alternate, vlLogoGlow 2.5s ease-in-out infinite alternate; }
@keyframes vlLogoFloat { from { translate: 0 -6px; } to { translate: 0 6px; } }
@keyframes vlLogoGlow {
  from { filter: drop-shadow(0 0 12px rgba(63,134,255,.85)) drop-shadow(0 0 26px rgba(63,134,255,.45)); }
  to   { filter: drop-shadow(0 0 22px rgba(63,134,255,.95)) drop-shadow(0 0 52px rgba(63,134,255,.55)); }
}
.vl-spark { position: absolute; left: 0; top: 0; z-index: 3; border-radius: 50%; pointer-events: none; will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) { .vl-logofx *, .vl-logofx-glow { animation: none !important; } .vl-spark { display: none; } }

/* ---- [VLFRONT] roadmap ---- */
.vl-rm-now { padding: 24px 26px; position: relative; overflow: hidden; border-color: rgba(139,92,246,.35) !important; }
.vl-rm-now::before { content: ""; position: absolute; width: 520px; height: 520px; left: -200px; top: -300px; border-radius: 50%; filter: blur(80px); background: radial-gradient(circle, rgba(34,197,94,.22), transparent 70%); pointer-events: none; }
.vl-rm-now > * { position: relative; }
.vl-rm-now-head { display: flex; gap: 18px; align-items: center; margin-bottom: 20px; }
.vl-rm-now-head .vl-ico-lg { background: linear-gradient(135deg, #22c55e, #16a34a); box-shadow: 0 10px 34px rgba(34,197,94,.35); }
.vl-rm-now-head h2 { margin: 0 0 4px !important; font-size: 1.6rem !important; color: var(--vl-tx) !important; }
.vl-rm-now-head p { margin: 0; max-width: 760px; }
.vl-rm-track { list-style: none; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 8px; position: relative; }
.vl-rm-track li { position: relative; display: grid; gap: 2px; padding: 14px 12px 12px; border-radius: 14px; background: var(--vl-bg3); border: 1px solid var(--vl-bd); }
.vl-rm-track li span { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-weight: 700; font-size: .85rem; background: rgba(255,255,255,.06); color: var(--vl-tx3); margin-bottom: 6px; }
.vl-rm-track li b { color: var(--vl-tx2); font-size: .9rem; }
.vl-rm-track li small { color: var(--vl-tx3); font-size: .72rem; }
.vl-rm-track li.agora { border-color: rgba(34,197,94,.55); background: rgba(34,197,94,.08); box-shadow: 0 0 0 1px rgba(34,197,94,.15), 0 14px 34px rgba(34,197,94,.12); }
.vl-rm-track li.agora span { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; }
.vl-rm-track li.agora b { color: var(--vl-tx); }
.vl-rm-track li.proxima { border-color: rgba(139,92,246,.45); }
.vl-rm-track li.proxima span { background: var(--vl-grad); color: #fff; }
.vl-rm-track li.proxima b { color: var(--vl-tx); }
.vl-rm-track li::after { content: ""; position: absolute; top: 28px; right: -9px; width: 10px; height: 2px; background: var(--vl-bd2); }
.vl-rm-track li:last-child::after { display: none; }
.vl-rm-now .vl-alert { margin: 0; }

.vl-rm-phases { list-style: none; margin: 0; padding: 0 0 0 4px; position: relative; display: grid; gap: 16px; }
.vl-rm-phases::before { content: ""; position: absolute; left: 25px; top: 20px; bottom: 20px; width: 2px; background: linear-gradient(180deg, #22c55e, rgba(139,92,246,.6) 30%, rgba(59,130,246,.15)); }
.vl-rm-phase { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 16px; position: relative; }
.vl-rm-dot { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--vl-bg3); border: 1px solid var(--vl-bd2); color: var(--vl-tx3); position: relative; z-index: 1; }
.vl-rm-phase.agora .vl-rm-dot { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; border-color: transparent; box-shadow: 0 0 0 5px rgba(34,197,94,.15); }
.vl-rm-phase.proxima .vl-rm-dot { background: var(--vl-grad); color: #fff; border-color: transparent; box-shadow: 0 0 0 5px rgba(139,92,246,.15); }
.vl-rm-card { padding: 16px 18px; border-radius: 14px; background: var(--vl-bg3); border: 1px solid var(--vl-bd); transition: .25s; }
.vl-rm-card:hover { border-color: rgba(139,92,246,.4); }
.vl-rm-phase.agora .vl-rm-card { border-color: rgba(34,197,94,.4); background: linear-gradient(135deg, rgba(34,197,94,.07), var(--vl-bg3) 60%); }
.vl-rm-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.vl-rm-card header small { color: var(--vl-pur); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.vl-rm-card h3 { margin: 2px 0 0 !important; font-size: 1.2rem !important; color: var(--vl-tx) !important; }
.vl-rm-badge { flex: none; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 4px 10px; border-radius: 100px; background: rgba(255,255,255,.06); color: var(--vl-tx3); border: 1px solid var(--vl-bd2); }
.vl-rm-badge.on { background: rgba(34,197,94,.14); color: #86efac; border-color: rgba(34,197,94,.4); }
.vl-rm-badge.next { background: rgba(139,92,246,.16); color: var(--vl-pur-l); border-color: rgba(139,92,246,.45); }
.vl-rm-when { margin: 6px 0 10px; font-size: .84rem; color: var(--vl-tx3); }
.vl-rm-when i { color: var(--vl-pur-l); margin-right: 4px; }
.vl-rm-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.vl-rm-card li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 10px; font-size: .82rem; color: var(--vl-tx2); background: rgba(255,255,255,.04); border: 1px solid var(--vl-bd); }
.vl-rm-card li i { color: var(--vl-pur-l); font-size: .78rem; }
.vl-rm-phase.agora .vl-rm-card li i { color: #86efac; }

.vl-rm-table th, .vl-rm-table td { text-align: center !important; white-space: nowrap; }
.vl-rm-table th:first-child, .vl-rm-table td:first-child { text-align: left !important; color: var(--vl-tx) !important; font-weight: 600; }
.vl-rm-table td:first-child i { width: 18px; color: var(--vl-pur-l); margin-right: 6px; }
.vl-rm-table th.agora { color: #86efac !important; }
.vl-rm-table td.agora { background: rgba(34,197,94,.07) !important; color: var(--vl-tx) !important; font-weight: 600; }

.vl-rm-done, .vl-rm-next { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.vl-rm-done li { display: flex; gap: 12px; align-items: flex-start; }
.vl-rm-done .vl-ico { width: 38px; height: 38px; border-radius: 11px; font-size: .85rem; background: linear-gradient(135deg, #22c55e, #16a34a); }
.vl-rm-done b { display: block; color: var(--vl-tx); font-size: .92rem; }
.vl-rm-done small { color: var(--vl-tx3); font-size: .8rem; line-height: 1.4; display: block; }
.vl-rm-next li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--vl-bg3); border: 1px dashed var(--vl-bd2); color: var(--vl-tx2); font-size: .88rem; }
.vl-rm-next i { color: var(--vl-pur-l); width: 18px; text-align: center; }

@media (max-width: 991.98px) { .vl-rm-track { grid-template-columns: repeat(3, minmax(0,1fr)); } .vl-rm-track li::after { display: none; } }
@media (max-width: 600px) {
  .vl-rm-track { grid-template-columns: 1fr 1fr; }
  .vl-rm-now-head { flex-direction: column; align-items: flex-start; }
  .vl-rm-phase { grid-template-columns: 36px minmax(0,1fr); gap: 10px; }
  .vl-rm-dot { width: 36px; height: 36px; }
  .vl-rm-phases::before { left: 21px; }
}
.vl-page .vl-main, .vl-page .vl-side { grid-template-columns: minmax(0, 1fr); min-width: 0; }
/* aviso no topo (configurado no painel) */
.vl-aviso { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 9px 16px; background: var(--vl-grad); color: #fff; font-size: .88rem; font-weight: 600; text-align: center; }
.vl-aviso a { color: #fff !important; text-decoration: underline !important; text-underline-offset: 3px; }

/* ---- [VLMP] loja de moedas (Créditos) ---- */
.vl-mp-pay { display: flex; gap: 8px; flex-wrap: wrap; }
.vl-mp-pay span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 100px; font-size: .74rem; font-weight: 600; color: var(--vl-tx2); background: rgba(255,255,255,.05); border: 1px solid var(--vl-bd2); }
.vl-mp-pay i { color: #32bcad; }
.vl-mp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.vl-mp-card { position: relative; display: grid; justify-items: center; gap: 4px; text-align: center; padding: 22px 16px 16px; border-radius: 16px; background: var(--vl-bg3); border: 1px solid var(--vl-bd); transition: .25s; overflow: hidden; }
.vl-mp-card::before { content: ""; position: absolute; width: 240px; height: 240px; top: -150px; left: 50%; transform: translateX(-50%); border-radius: 50%; filter: blur(60px); background: radial-gradient(circle, rgba(242,179,61,.25), transparent 70%); pointer-events: none; }
.vl-mp-card > * { position: relative; }
.vl-mp-card:hover { border-color: rgba(242,179,61,.5); transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.vl-mp-card.top { border-color: rgba(242,179,61,.6); box-shadow: 0 0 0 1px rgba(242,179,61,.25), 0 18px 44px rgba(242,179,61,.12); }
.vl-mp-flag { position: absolute !important; top: 12px; right: -34px; transform: rotate(35deg); width: 140px; padding: 3px 0; font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #1a1205; background: linear-gradient(135deg,#f2b33d,#e0892a); }
.vl-mp-coin { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; font-size: 1.5rem; color: #1a1205; background: linear-gradient(135deg,#f2b33d,#e0892a); box-shadow: 0 10px 26px rgba(242,179,61,.35); margin-bottom: 6px; }
.vl-mp-qtd { font-size: 1.9rem; font-weight: 800; color: var(--vl-tx); line-height: 1; letter-spacing: -.02em; }
.vl-mp-moeda { color: var(--vl-tx3); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; }
.vl-mp-bonus { margin-top: 2px; padding: 2px 10px; border-radius: 100px; font-size: .72rem; font-weight: 700; color: #86efac; background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.35); }
.vl-mp-title { color: var(--vl-tx2); font-size: .82rem; margin-top: 4px; }
.vl-mp-preco { font-size: 1.3rem; font-weight: 800; color: var(--vl-tx); margin: 6px 0 10px; }
.vl-mp-status { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 16px; background: var(--vl-sf); border: 1px solid rgba(139,92,246,.35); }
.vl-mp-status b { display: block; color: var(--vl-tx); font-size: 1.05rem; }
.vl-mp-status small { color: var(--vl-tx2); }
.vl-mp-status.ok { border-color: rgba(34,197,94,.5); background: linear-gradient(135deg, rgba(34,197,94,.1), var(--vl-sf) 60%); }
.vl-mp-status.ok .vl-ico { background: linear-gradient(135deg,#22c55e,#16a34a); }
.vl-mp-status.err { border-color: rgba(239,68,68,.5); }
.vl-mp-status.err .vl-ico { background: linear-gradient(135deg,#ef4444,#b91c1c); }
.vl-mp-status.warn { border-color: rgba(242,179,61,.5); }
.vl-mp-status.warn .vl-ico { background: linear-gradient(135deg,#f2b33d,#e0892a); color: #1a1205; }

/* ---- [VLPLUG] plugins do jogador ---- */
.vl-mp-card.vip .vl-mp-coin { background: linear-gradient(135deg,#a78bfa,#6d28d9); color: #fff; box-shadow: 0 10px 26px rgba(139,92,246,.4); }
.vl-mp-card.vip::before { background: radial-gradient(circle, rgba(139,92,246,.35), transparent 70%); }
.vl-mp-card.vip .vl-mp-qtd { font-size: 1.45rem; background: linear-gradient(135deg,#f0f0ff,#c4b5fd); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vl-mp-preco { display: grid; justify-items: center; gap: 0; }
.vl-mp-preco s { color: var(--vl-tx3); font-size: .8rem; font-weight: 500; min-height: 1em; }
.vl-mp-preco strong { font-size: 1.3rem; font-weight: 800; color: var(--vl-tx); }
.vl-mp-card.cupom { border-color: rgba(34,197,94,.5); }
.vl-mp-card.cupom .vl-mp-preco strong { color: #86efac; }
.vl-mp-card.sem-cupom .vl-mp-preco s { display: none; }
.vl-cupom { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 14px; border-radius: 14px; background: var(--vl-bg3); border: 1px dashed rgba(242,179,61,.45); }
.vl-cupom-ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: #1a1205; background: linear-gradient(135deg,#f2b33d,#e0892a); flex: none; }
.vl-cupom input { flex: 1 1 180px; min-width: 0; text-transform: uppercase; letter-spacing: .06em; }
.vl-cupom-out { flex-basis: 100%; font-size: .8rem; color: var(--vl-tx3); }
.vl-cupom-out:empty { display: none; }
.vl-cupom-out.ok { color: #86efac; }
.vl-cupom-out.err { color: #fca5a5; }
.vl-plug h2 i { color: var(--vl-pur-l, #a78bfa); margin-right: 2px; font-size: .9em; }
.vl-troca-saldo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.vl-troca-saldo > div { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--vl-bg3); border: 1px solid var(--vl-bd); }
.vl-troca-saldo > div > i { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #1a1205; background: linear-gradient(135deg,#f2b33d,#e0892a); }
.vl-troca-saldo > div:nth-child(2) > i { color: #fff; background: linear-gradient(135deg,#cbd5e1,#64748b); }
.vl-troca-saldo > div:nth-child(3) > i { color: #fff; background: linear-gradient(135deg,#a78bfa,#6d28d9); }
.vl-troca-saldo small { display: block; color: var(--vl-tx3); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.vl-troca-saldo b { font-size: 1.15rem; color: var(--vl-tx); }
.vl-troca { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) auto; gap: 10px; align-items: center; }
.vl-troca-prev { grid-column: 1 / -1; order: 3; color: var(--vl-tx2); font-size: .86rem; }
.vl-troca-prev b { color: #86efac; }
@media (max-width: 640px) { .vl-troca { grid-template-columns: 1fr; } }
.vl-indica-hero { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 18px; align-items: center; padding: 16px 18px; border-radius: 16px; background: linear-gradient(135deg, rgba(139,92,246,.14), rgba(59,130,246,.06)); border: 1px solid rgba(139,92,246,.3); }
.vl-indica-hero p { margin: 0 0 10px; color: var(--vl-tx2); }
.vl-indica-link { display: flex; gap: 8px; }
.vl-indica-link input { flex: 1; min-width: 0; font-family: Consolas, monospace; font-size: .84rem; }
.vl-indica-nums { display: flex; gap: 8px; }
.vl-indica-nums div { display: grid; justify-items: center; min-width: 74px; padding: 10px 8px; border-radius: 12px; background: var(--vl-bg3); border: 1px solid var(--vl-bd); }
.vl-indica-nums b { font-size: 1.3rem; color: var(--vl-tx); }
.vl-indica-nums small { color: var(--vl-tx3); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 720px) { .vl-indica-hero { grid-template-columns: 1fr; } .vl-indica-nums div { flex: 1; } }
.vl-indica-lista { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 8px; }
.vl-indica-lista li { display: grid; grid-template-columns: auto minmax(0,1fr) minmax(90px, 160px); align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--vl-bg3); border: 1px solid var(--vl-bd); }
.vl-indica-lista li b { display: block; color: var(--vl-tx); }
.vl-indica-lista li small { color: var(--vl-tx3); font-size: .78rem; }
.vl-indica-lista li.pronto { border-color: rgba(242,179,61,.5); }
.vl-indica-lista li.pago { opacity: .75; }
.vl-plug progress { width: 100%; height: 8px; border: 0; border-radius: 100px; overflow: hidden; background: rgba(255,255,255,.07); appearance: none; }
.vl-plug progress::-webkit-progress-bar { background: rgba(255,255,255,.07); border-radius: 100px; }
.vl-plug progress::-webkit-progress-value { background: var(--vl-grad); border-radius: 100px; }
.vl-plug progress::-moz-progress-bar { background: var(--vl-grad); border-radius: 100px; }
.vl-poll { padding: 16px; border-radius: 16px; background: var(--vl-bg3); border: 1px solid var(--vl-bd); display: grid; gap: 10px; }
.vl-poll + .vl-poll { margin-top: 12px; }
.vl-poll-q { font-size: 1.02rem; color: var(--vl-tx); }
.vl-poll-ops { display: flex; flex-wrap: wrap; gap: 8px; }
.vl-poll-op { padding: 9px 16px; border-radius: 100px; border: 1px solid var(--vl-bd2); background: rgba(255,255,255,.03); color: var(--vl-tx); font-weight: 600; cursor: pointer; transition: .2s; }
.vl-poll-op:hover { border-color: var(--vl-pur, #8b5cf6); background: rgba(139,92,246,.14); transform: translateY(-1px); }
.vl-poll-r { display: grid; grid-template-columns: minmax(100px, 1fr) 2fr 46px; gap: 10px; align-items: center; color: var(--vl-tx2); font-size: .9rem; }
.vl-poll-r.meu span { color: var(--vl-tx); font-weight: 700; }
.vl-poll-r.meu span::after { content: " \2713"; color: #86efac; }
.vl-poll-r b { text-align: right; color: var(--vl-tx); }
.vl-poll .vl-note { margin: 0; }

/* ---- [VLPLUG] lotes 2 a 4: páginas dos plugins ---- */
.vl-plug-page { display: grid; gap: 18px; }
.vl-plug-page > [data-vl-plugin] { display: grid; gap: 18px; min-width: 0; }
.vl-plug-loading { display: flex; align-items: center; gap: 12px; color: var(--vl-tx2); padding: 30px 0; }
.vl-plug-warn { margin: 0; padding: 10px 14px; border-radius: 12px; background: rgba(242,179,61,.1); border: 1px solid rgba(242,179,61,.4); color: #fde68a; font-size: .88rem; }
.vl-row-end { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.vl-plug-hero { display: flex; align-items: center; gap: 18px; padding: 20px 22px; border-radius: 18px; background: linear-gradient(135deg, rgba(139,92,246,.18), rgba(59,130,246,.06) 70%); border: 1px solid rgba(139,92,246,.35); }
.vl-plug-hero h2 { margin: 0 0 4px; font-size: 1.25rem; }
.vl-plug-hero p { margin: 0; color: var(--vl-tx2); }
.vl-plug-hero > div { flex: 1; min-width: 0; }
.vl-plug-hero-ico { flex: none; width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; font-size: 1.5rem; color: #fff; background: var(--vl-grad); box-shadow: 0 12px 30px rgba(139,92,246,.4); }
.vl-plug-hero-num { display: grid; justify-items: center; padding: 10px 16px; border-radius: 14px; background: var(--vl-bg3); border: 1px solid var(--vl-bd); }
.vl-plug-hero-num b { font-size: 1.5rem; }
.vl-plug-hero-num small { color: var(--vl-tx3); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.vl-plug-page progress, .vl-plug-extra progress { width: 100%; height: 8px; border: 0; border-radius: 100px; overflow: hidden; background: rgba(255,255,255,.07); appearance: none; }
.vl-plug-page progress::-webkit-progress-bar { background: rgba(255,255,255,.07); border-radius: 100px; }
.vl-plug-page progress::-webkit-progress-value { background: var(--vl-grad); border-radius: 100px; }
.vl-plug-page progress::-moz-progress-bar { background: var(--vl-grad); border-radius: 100px; }
.vl-btn.carregando { opacity: .7; pointer-events: none; }
.vl-btn.carregando::after { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: vlgira .7s linear infinite; }
@keyframes vlgira { to { transform: rotate(360deg); } }
/* avisos flutuantes */
.vl-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 2000; display: grid; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.vl-toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: 14px; background: var(--vl-sf); border: 1px solid rgba(34,197,94,.45); color: var(--vl-tx); box-shadow: 0 16px 40px rgba(0,0,0,.45); animation: vlentra .3s ease; }
.vl-toast i { color: #86efac; margin-top: 3px; }
.vl-toast.err { border-color: rgba(239,68,68,.5); }
.vl-toast.err i { color: #fca5a5; }
.vl-toast.sai { opacity: 0; transform: translateY(8px); transition: .35s; }
@keyframes vlentra { from { opacity: 0; transform: translateY(10px); } }
/* janela (montar item, prêmio de caixa) */
.vl-sheet { position: fixed; inset: 0; z-index: 1900; display: grid; place-items: center; padding: 16px; background: rgba(4,4,10,.72); backdrop-filter: blur(6px); }
.vl-sheet-in { position: relative; width: min(520px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 24px; display: grid; gap: 12px; animation: vlentra .25s ease; }
.vl-sheet-in h2 { margin: 0; font-size: 1.3rem; }
.vl-sheet-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--vl-bd2); background: var(--vl-bg3); color: var(--vl-tx); }
/* item */
.vl-item { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.vl-item-ico { flex: none; width: 52px; height: 52px; padding: 6px; border-radius: 14px; object-fit: contain; background: radial-gradient(circle at 50% 35%, rgba(139,92,246,.28), var(--vl-bg3) 70%); border: 1px solid var(--vl-bd2); }
.vl-item.exc .vl-item-ico { border-color: rgba(34,197,94,.5); background: radial-gradient(circle at 50% 35%, rgba(34,197,94,.3), var(--vl-bg3) 70%); }
.vl-item.anc .vl-item-ico { border-color: rgba(59,130,246,.55); background: radial-gradient(circle at 50% 35%, rgba(59,130,246,.3), var(--vl-bg3) 70%); }
.vl-item-txt { min-width: 0; }
.vl-item-txt b { display: block; color: var(--vl-tx); line-height: 1.25; }
.vl-item.exc .vl-item-txt b { color: #86efac; }
.vl-item.anc .vl-item-txt b { color: #93c5fd; }
.vl-item-txt ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 1px; }
.vl-item-txt li { font-size: .76rem; color: #93c5fd; }
.vl-item.mini .vl-item-ico { width: 40px; height: 40px; }
.vl-item.mini .vl-item-txt b { font-size: .84rem; }
.vl-item.mini li { font-size: .7rem; }
/* categorias e grades */
.vl-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.vl-cats button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 100px; border: 1px solid var(--vl-bd2); background: var(--vl-bg3); color: var(--vl-tx2); font-weight: 600; font-size: .86rem; cursor: pointer; transition: .2s; }
.vl-cats button:hover { color: var(--vl-tx); border-color: rgba(139,92,246,.5); }
.vl-cats button.on { background: var(--vl-grad); border-color: transparent; color: #fff; box-shadow: 0 8px 22px rgba(139,92,246,.3); }
.vl-cats.sm button { padding: 7px 11px; }
.vl-ws-grid, .vl-mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.vl-ws, .vl-mk { display: flex; flex-direction: column; gap: 10px; padding: 16px; transition: .2s; }
.vl-ws:hover, .vl-mk:hover { transform: translateY(-3px); border-color: rgba(139,92,246,.45); }
.vl-ws .vl-btn, .vl-mk .vl-btn, .vl-mk form { margin-top: auto; }
.vl-ws-t { color: var(--vl-tx2); font-size: .86rem; }
.vl-ws-preco { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.vl-ws-preco strong { font-size: 1.35rem; font-weight: 800; color: var(--vl-tx); }
.vl-ws-preco small { color: var(--vl-tx3); font-size: .78rem; }
.vl-ws-form { display: grid; gap: 10px; }
.vl-ws-form label { display: grid; gap: 4px; color: var(--vl-tx2); font-size: .84rem; font-weight: 600; }
.vl-ws-form label.vl-chk, .vl-ws-exc label { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.vl-ws-exc { border: 1px solid var(--vl-bd2); border-radius: 12px; padding: 10px 12px; display: grid; gap: 6px; }
.vl-ws-exc legend { float: none; width: auto; font-size: .8rem; color: var(--vl-tx3); padding: 0 6px; margin: 0; }
.vl-ws-total { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 14px; border-radius: 12px; background: var(--vl-bg3); border: 1px solid var(--vl-bd); }
.vl-ws-total strong { font-size: 1.3rem; color: #86efac; }
.vl-mk-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.vl-mk-bar input { flex: 1 1 200px; min-width: 0; }
.vl-mk-sell { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; align-items: center; margin: 10px 0; }
.vl-lei.ganhando { border-color: rgba(34,197,94,.5); }
/* baú: escolha de item */
.vl-bau-pick { display: grid; gap: 10px; }
.vl-bau-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.vl-bau-slot { text-align: left; padding: 10px; border-radius: 14px; border: 1px solid var(--vl-bd); background: var(--vl-bg3); color: inherit; cursor: pointer; transition: .2s; }
.vl-bau-slot:hover { border-color: rgba(139,92,246,.5); }
.vl-bau-slot.on { border-color: var(--vl-pur); box-shadow: 0 0 0 2px rgba(139,92,246,.35); }
.vl-cofre-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.vl-cofre-it { position: relative; display: grid; gap: 6px; padding: 14px 14px 12px 44px; border-radius: 16px; border: 1px solid var(--vl-bd); background: var(--vl-sf); cursor: pointer; }
.vl-cofre-it input { position: absolute; left: 16px; top: 18px; width: 18px; height: 18px; accent-color: var(--vl-pur); }
.vl-cofre-it:has(input:checked) { border-color: var(--vl-pur); box-shadow: 0 0 0 2px rgba(139,92,246,.3); }
/* agenda */
.vl-ag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.vl-ag { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.vl-ag-img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.vl-ag-body { padding: 16px 18px; display: grid; gap: 8px; }
.vl-ag-body h3 { margin: 0; font-size: 1.08rem; }
.vl-ag-body p { margin: 0; color: var(--vl-tx2); font-size: .9rem; white-space: pre-line; }
.vl-ag-when { color: var(--vl-pur-l); font-size: .84rem; font-weight: 600; }
.vl-ag-cd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; background: var(--vl-bg3); border: 1px solid var(--vl-bd); }
.vl-ag-cd i { color: #fcd34d; }
.vl-ag-cd b { font-variant-numeric: tabular-nums; font-size: 1.05rem; color: var(--vl-tx); }
.vl-ag-cd small { flex-basis: 100%; color: var(--vl-tx3); font-size: .76rem; }
/* guias */
.vl-gd { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; }
.vl-gd-list { position: sticky; top: 90px; display: grid; gap: 2px; padding: 12px; border-radius: 16px; background: var(--vl-sf); border: 1px solid var(--vl-bd); }
.vl-gd-list .vl-label { margin: 10px 8px 4px; }
.vl-gd-list a { padding: 8px 10px; border-radius: 10px; color: var(--vl-tx2); text-decoration: none; font-size: .9rem; }
.vl-gd-list a:hover { background: rgba(139,92,246,.1); color: var(--vl-tx); }
.vl-gd-list a.on { background: var(--vl-grad); color: #fff; }
.vl-gd-art { padding: 22px 26px; min-width: 0; }
.vl-gd-cover { width: 100%; max-height: 260px; object-fit: cover; border-radius: 14px; margin-bottom: 14px; }
.vl-gd-body { color: var(--vl-tx2); line-height: 1.7; }
.vl-gd-body h2, .vl-gd-body h3 { color: var(--vl-tx); margin: 1.2em 0 .4em; }
.vl-gd-body img { max-width: 100%; border-radius: 12px; }
@media (max-width: 860px) { .vl-gd { grid-template-columns: 1fr; } .vl-gd-list { position: static; } }
/* vídeos e streamers */
.vl-vd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.vl-vd { padding: 0 0 14px; overflow: hidden; display: grid; gap: 8px; }
.vl-vd h3, .vl-vd p { margin: 0 16px; }
.vl-vd h3 { font-size: 1rem; }
.vl-vd p { color: var(--vl-tx2); font-size: .86rem; }
.vl-vd-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: #000; cursor: pointer; }
.vl-vd-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: .2s; }
.vl-vd-thumb:hover img { opacity: 1; }
.vl-vd-play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 1.4rem; background: var(--vl-grad); box-shadow: 0 10px 30px rgba(139,92,246,.55); }
.vl-vd-frame { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.vl-st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.vl-st { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; padding: 22px 16px; text-decoration: none; color: inherit; transition: .2s; }
.vl-st:hover { transform: translateY(-3px); border-color: rgba(139,92,246,.5); }
.vl-st.live { border-color: rgba(239,68,68,.55); box-shadow: 0 0 0 1px rgba(239,68,68,.25), 0 14px 36px rgba(239,68,68,.15); }
.vl-st-av { width: 76px; height: 76px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-size: 1.7rem; color: #fff; background: var(--vl-grad); border: 3px solid var(--vl-bd2); }
.vl-st.live .vl-st-av { border-color: #ef4444; }
.vl-st-av img { width: 100%; height: 100%; object-fit: cover; }
.vl-st-live { position: absolute; top: 12px; right: 12px; padding: 2px 9px; border-radius: 100px; background: #ef4444; color: #fff; font-size: .66rem; font-weight: 800; letter-spacing: .08em; animation: vlpulsa 1.6s infinite; }
@keyframes vlpulsa { 50% { opacity: .55; } }
.vl-st small { color: var(--vl-tx3); }
.vl-st p { margin: 0; color: var(--vl-tx2); font-size: .84rem; }
/* votos, conquistas */
.vl-vt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.vl-vt { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 20px 16px; }
.vl-vt-ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 1.3rem; color: #1a1205; background: linear-gradient(135deg,#f2b33d,#e0892a); box-shadow: 0 10px 26px rgba(242,179,61,.3); }
.vl-vt small { color: var(--vl-tx3); }
.vl-cq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.vl-cq { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px; }
.vl-cq .vl-btn { grid-column: 1 / -1; }
.vl-cq-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.2rem; color: var(--vl-pur-l); background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.3); }
.vl-cq.pronta { border-color: rgba(242,179,61,.55); }
.vl-cq.pronta .vl-cq-ico { color: #1a1205; background: linear-gradient(135deg,#f2b33d,#e0892a); border-color: transparent; }
.vl-cq.ok .vl-cq-ico { color: #fff; background: linear-gradient(135deg,#22c55e,#16a34a); border-color: transparent; }
.vl-cq-t { display: grid; gap: 4px; min-width: 0; }
.vl-cq-t small { color: var(--vl-tx3); font-size: .8rem; }
.vl-cq-t em { font-style: normal; color: var(--vl-tx3); font-size: .74rem; }
.vl-mp-bonus.feito { opacity: .5; text-decoration: line-through; }
/* rifas */
.vl-rf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.vl-rf { padding: 0; overflow: hidden; }
.vl-rf.fim { opacity: .8; }
.vl-rf-img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.vl-rf-body { padding: 16px 18px; display: grid; gap: 10px; }
.vl-rf-body h3 { margin: 0; font-size: 1.1rem; }
.vl-rf-body p { margin: 0; color: var(--vl-tx2); font-size: .88rem; }
.vl-rf-premio { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: linear-gradient(135deg, rgba(242,179,61,.16), transparent); border: 1px solid rgba(242,179,61,.4); font-weight: 700; color: #fde68a; }
.vl-rf-buy { display: flex; gap: 8px; }
.vl-rf-buy input { width: 90px; flex: none; }
.vl-rf-buy .vl-btn { flex: 1; }
.vl-rf-win { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.4); color: #bbf7d0; font-weight: 600; }
.vl-rf-meus { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.vl-rf-meus small { color: var(--vl-tx3); margin-right: 4px; }
.vl-rf-meus span { padding: 1px 7px; border-radius: 6px; background: var(--vl-bg3); border: 1px solid var(--vl-bd2); font-size: .74rem; font-variant-numeric: tabular-nums; }
.vl-rf-meus span.win { background: linear-gradient(135deg,#f2b33d,#e0892a); color: #1a1205; border-color: transparent; font-weight: 800; }
/* mensagens */
.vl-msg-list { display: grid; gap: 8px; }
.vl-msg { border-radius: 14px; background: var(--vl-sf); border: 1px solid var(--vl-bd); }
.vl-msg.nova { border-color: rgba(139,92,246,.5); }
.vl-msg summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; }
.vl-msg summary::-webkit-details-marker { display: none; }
.vl-msg summary > div { flex: 1; min-width: 0; }
.vl-msg summary b { display: block; color: var(--vl-tx); }
.vl-msg summary small { color: var(--vl-tx3); font-size: .78rem; }
.vl-msg p { margin: 0; padding: 0 16px 16px 66px; color: var(--vl-tx2); white-space: pre-line; }
/* caixas */
.vl-cx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.vl-cx { display: grid; gap: 10px; padding: 18px; }
.vl-cx h3 { margin: 0; text-align: center; }
.vl-cx-art { height: 130px; display: grid; place-items: center; font-size: 3.4rem; color: #fcd34d; border-radius: 16px; background: radial-gradient(circle at 50% 40%, rgba(242,179,61,.28), var(--vl-bg3) 70%); border: 1px solid var(--vl-bd); overflow: hidden; }
.vl-cx-art img { max-width: 100%; max-height: 100%; object-fit: contain; }
.vl-cx-art.abrindo { animation: vlbalanca .25s infinite; }
@keyframes vlbalanca { 25% { transform: rotate(-4deg) scale(1.04); } 75% { transform: rotate(4deg) scale(1.04); } }
.vl-cx-pr { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 210px; overflow-y: auto; }
.vl-cx-pr li { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: var(--vl-bg3); font-size: .84rem; color: var(--vl-tx2); }
.vl-cx-pr li span { flex: 1; min-width: 0; }
.vl-cx-pr li b { color: var(--vl-tx); font-variant-numeric: tabular-nums; }
.vl-cx-pr li.raro { color: #fde68a; border: 1px solid rgba(242,179,61,.35); }
.vl-cx-pr li.raro i { color: #fcd34d; }
.vl-cx-win { text-align: center; justify-items: center; }
.vl-cx-win.raro { border-color: rgba(242,179,61,.6); box-shadow: 0 0 60px rgba(242,179,61,.25); }
.vl-cx-win.raro .vl-plug-hero-ico { background: linear-gradient(135deg,#f2b33d,#e0892a); color: #1a1205; }
.vl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vl-list li { display: flex; align-items: center; gap: 6px; color: var(--vl-tx2); font-size: .88rem; }
.vl-list li i { color: #fcd34d; }
.vl-list li small { margin-left: auto; color: var(--vl-tx3); }
/* oficina */
.vl-of { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.vl-of-op { display: grid; gap: 8px; position: sticky; top: 90px; }
.vl-of-bt { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--vl-bd2); background: var(--vl-bg3); color: var(--vl-tx); font-weight: 600; cursor: pointer; transition: .2s; }
.vl-of-bt span { flex: 1; text-align: left; }
.vl-of-bt b { color: #fcd34d; }
.vl-of-bt i { color: var(--vl-pur-l); width: 18px; }
.vl-of-bt:hover:not(:disabled) { border-color: rgba(139,92,246,.6); background: rgba(139,92,246,.12); }
.vl-of-bt:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 860px) { .vl-of { grid-template-columns: 1fr; } .vl-of-op { position: static; } }
/* mercado de contas */
.vl-ct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.vl-ct { display: grid; gap: 10px; padding: 18px; }
.vl-ct-chars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vl-ct-chars li { padding: 8px 12px; border-radius: 12px; background: var(--vl-bg3); border: 1px solid var(--vl-bd); }
.vl-ct-chars b { display: block; color: var(--vl-tx); }
.vl-ct-chars small { color: var(--vl-tx3); font-size: .78rem; }
.vl-ct p { margin: 0; color: var(--vl-tx2); font-size: .88rem; }
.vl-ct-buy summary { list-style: none; cursor: pointer; }
.vl-ct-buy summary::-webkit-details-marker { display: none; }
.vl-ct-buy form { margin-top: 10px; }
/* slides da home */
.vl-slides { position: relative; overflow: hidden; height: clamp(220px, 34vw, 420px); background: #05050b; }
.vl-sl-track, .vl-sl { position: absolute; inset: 0; }
.vl-sl { opacity: 0; transition: opacity .8s ease; }
.vl-sl.on { opacity: 1; z-index: 1; }
.vl-sl img { width: 100%; height: 100%; object-fit: cover; }
.vl-sl::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,5,11,.85), rgba(5,5,11,.15) 65%); }
.vl-sl-txt { position: absolute; inset: auto 0 14%; z-index: 2; display: grid; gap: 8px; justify-items: start; }
.vl-sl-txt h2 { margin: 0; font-size: clamp(1.4rem, 3.2vw, 2.4rem); max-width: 640px; }
.vl-sl-txt p { margin: 0; color: var(--vl-tx2); max-width: 560px; }
.vl-sl-dots { position: absolute; z-index: 3; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 6px; }
.vl-sl-dots button { width: 10px; height: 10px; padding: 0; border-radius: 100px; border: 0; background: rgba(255,255,255,.35); transition: .3s; }
.vl-sl-dots button.on { width: 28px; background: var(--vl-grad); }
/* conta: atalhos, avatar, social, patente */
.vl-plug-extra { display: grid; gap: 14px; margin-top: 18px; }
.vl-av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px; padding: 0 16px 16px; }
.vl-av { padding: 0; aspect-ratio: 1; border-radius: 16px; overflow: hidden; border: 2px solid var(--vl-bd2); background: var(--vl-bg3); cursor: pointer; transition: .2s; }
.vl-av img { width: 100%; height: 100%; object-fit: cover; }
.vl-av:hover { border-color: rgba(139,92,246,.6); }
.vl-av.on { border-color: var(--vl-pur); box-shadow: 0 0 0 3px rgba(139,92,246,.35); }
.vl-social { display: grid; gap: 8px; padding: 0 16px 16px; }
.vl-social-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--vl-bg3); border: 1px solid var(--vl-bd); }
.vl-social-row > i { font-size: 1.2rem; color: var(--vl-pur-l); width: 22px; }
.vl-social-row b { flex: 1; }
.vl-social-login { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.vl-social-login small { flex-basis: 100%; color: var(--vl-tx3); text-align: center; }
.vl-social-login .vl-btn { flex: 1; }
.vl-captcha { margin: 6px 0 10px; min-height: 65px; }
.vl-patente { display: inline-flex; align-items: center; gap: 5px; width: fit-content; margin-top: 4px; padding: 1px 9px; border-radius: 100px; font-size: .7rem; font-weight: 700; color: var(--pat, #a78bfa); border: 1px solid var(--pat, #a78bfa); background: rgba(255,255,255,.04); }
@media (max-width: 640px) { .vl-plug-hero { flex-wrap: wrap; } .vl-cq { grid-template-columns: auto minmax(0, 1fr); } .vl-cq > .vl-mp-bonus { grid-column: 2; justify-self: start; } .vl-msg p { padding-left: 16px; } }

/* [VLPLUG] slides: cartão dentro do conteúdo (entre os números e os atalhos) */
.vl-slides { height: clamp(210px, 26vw, 320px); margin-top: 18px; border-radius: 18px; border: 1px solid var(--vl-bd); box-shadow: 0 18px 44px rgba(0,0,0,.35); }
.vl-sl img { object-position: center 30%; }
.vl-sl::after { background: linear-gradient(90deg, rgba(5,5,11,.92) 0%, rgba(5,5,11,.6) 45%, rgba(5,5,11,.1) 80%); }
.vl-sl-txt { inset: 0 auto 0 0; width: min(560px, 85%); padding: 28px 32px 40px; align-content: center; }
.vl-sl-txt h2 { font-size: clamp(1.3rem, 2.6vw, 2rem); }
.vl-sl-dots { bottom: 12px; }
@media (max-width: 640px) { .vl-sl-txt { width: 100%; padding: 20px 20px 36px; } .vl-sl-txt p { font-size: .88rem; } }

/* [VLPLUG] contagem dos próximos eventos (segundo a segundo) */
.vl-events .vl-cd { font-style: normal; font-weight: 800; letter-spacing: .02em; display: inline-block; min-width: 4.6em; text-align: right; }
.vl-events li.soon .vl-cd { animation: vlpulsa 1s infinite; }

/* [VLPLUG] agenda: contagem segundo a segundo */
.vl-ag-cd .vl-cd { font-size: 1.15rem; font-weight: 800; letter-spacing: .02em; color: var(--vl-pur-l); }
.vl-ag-hora { color: var(--vl-tx2); font-weight: 600; font-variant-numeric: tabular-nums; }
.vl-ag.soon { border-color: rgba(34,197,94,.45); box-shadow: 0 0 0 1px rgba(34,197,94,.2); }
.vl-ag.soon .vl-cd, .vl-ag.soon .vl-ag-cd i { color: var(--vl-ok); }
.vl-ag.soon .vl-cd { animation: vlpulsa 1s infinite; }
.vl-ag.agora { border-color: rgba(34,197,94,.6); }
.vl-ag.agora .vl-cd { color: var(--vl-ok); font-size: 1rem; }

/* ---- [VLFRONT] roadmap detalhado ---- */
.vl-rm-kpis { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 12px; margin-bottom: 16px; }
.vl-rm-kpis > div { padding: 12px 16px; border-radius: 14px; background: var(--vl-bg3); border: 1px solid var(--vl-bd); display: grid; gap: 2px; }
.vl-rm-kpis small { color: var(--vl-tx3); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.vl-rm-kpis b { font-size: 1.4rem; color: var(--vl-tx); }
.vl-rm-kpi-bar { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
.vl-rm-kpi-bar small { grid-column: 1 / -1; }
.vl-rm-kpi-bar progress { width: 100%; height: 10px; border: 0; border-radius: 100px; overflow: hidden; background: rgba(255,255,255,.07); appearance: none; }
.vl-rm-kpi-bar progress::-webkit-progress-bar { background: rgba(255,255,255,.07); border-radius: 100px; }
.vl-rm-kpi-bar progress::-webkit-progress-value { background: linear-gradient(90deg, #22c55e, #8b5cf6); border-radius: 100px; }
.vl-rm-kpi-bar progress::-moz-progress-bar { background: linear-gradient(90deg, #22c55e, #8b5cf6); border-radius: 100px; }
.vl-rm-kpi-bar em { font-style: normal; font-weight: 800; color: var(--vl-pur-l); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .vl-rm-kpis { grid-template-columns: 1fr 1fr; } .vl-rm-kpi-bar { grid-column: 1 / -1; } }
.vl-rm-resumo { margin: 4px 0 10px; color: var(--vl-tx2); font-size: .9rem; }
.vl-rm-extra { display: grid; gap: 6px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(139,92,246,.07); border: 1px dashed rgba(139,92,246,.35); }
.vl-rm-extra p { margin: 0; font-size: .84rem; color: var(--vl-tx2); }
.vl-rm-extra i { color: var(--vl-pur-l); width: 16px; }
.vl-rm-extra p:last-child i { color: #fcd34d; }
.vl-rm-extra b { color: var(--vl-tx); }
.vl-rm-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-top: 12px; }
.vl-rm-tier { padding: 14px 16px; border-radius: 14px; background: var(--vl-bg3); border: 1px solid var(--vl-bd); display: grid; gap: 4px; align-content: start; }
.vl-rm-tier b { font-size: 1.15rem; color: #fcd34d; letter-spacing: .08em; }
.vl-rm-tier small { color: var(--vl-pur-l); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.vl-rm-tier p { margin: 0; color: var(--vl-tx2); font-size: .84rem; }
.vl-rm-tier.agora { border-color: rgba(34,197,94,.45); }
.vl-rm-tier.agora small { color: var(--vl-ok); }
.vl-rm-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 12px; }
.vl-rm-rule { padding: 14px 16px; border-radius: 14px; background: var(--vl-bg3); border: 1px solid var(--vl-bd); }
.vl-rm-rule h3 { margin: 0 0 10px; font-size: .95rem; color: var(--vl-tx); display: flex; gap: 8px; align-items: center; }
.vl-rm-rule h3 i { color: var(--vl-pur-l); }
.vl-rm-rule ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vl-rm-rule li { display: flex; justify-content: space-between; gap: 10px; font-size: .85rem; color: var(--vl-tx2); padding-bottom: 6px; border-bottom: 1px solid var(--vl-bd); }
.vl-rm-rule li:last-child { border-bottom: 0; padding-bottom: 0; }
.vl-rm-rule li b { color: var(--vl-tx); text-align: right; }
.vl-rm-rule p { margin: 0 0 6px; font-size: .85rem; color: var(--vl-tx2); }
.vl-rm-soul { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 12px; }
.vl-rm-soul > div { padding: 14px 16px; border-radius: 14px; background: var(--vl-bg3); border: 1px solid var(--vl-bd); }
.vl-rm-soul h3 { margin: 0 0 8px; font-size: .95rem; display: flex; gap: 8px; align-items: center; color: var(--vl-tx); }
.vl-rm-soul h3 i { color: var(--vl-pur-l); }
.vl-rm-soul ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: var(--vl-tx2); font-size: .82rem; }
.vl-rm-policy { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.vl-rm-policy li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--vl-bg3); border: 1px solid var(--vl-bd); }
.vl-rm-policy li > i { width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #22c55e, #16a34a); }
.vl-rm-policy li.no > i { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.vl-rm-policy b { display: block; color: var(--vl-tx); }
.vl-rm-policy small { color: var(--vl-tx2); font-size: .84rem; }
.vl-ico-soon { background: rgba(139,92,246,.14) !important; color: var(--vl-pur-l) !important; box-shadow: none !important; }
.vl-side .vl-btn + .vl-btn { margin-top: 8px; }

/* [VLFRONT] legenda da contagem da home */
.vl-countdown-when { margin: 10px 0 0; color: var(--vl-tx2); font-size: .92rem; text-align: center; }
.vl-countdown-when i { color: var(--vl-pur-l); margin-right: 4px; }
.vl-countdown-when b { color: var(--vl-tx); }

/* [VLFRONT] título da home com digitação */
.vl-type { min-height: 2.2em; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.vl-type-txt { white-space: pre-wrap; }
.vl-type-cur { display: inline-block; width: .08em; height: .95em; margin-left: .06em; border-radius: 2px; background: var(--vl-grad); vertical-align: -.08em; animation: vlcursor 1s steps(1) infinite; }
@keyframes vlcursor { 50% { opacity: 0; } }
@media (max-width: 640px) { .vl-type { min-height: 2.3em; } }

/* [VLI18N] seletor de idioma e espera da tradução */
html.vl-i18n-wait body { opacity: 0; animation: vlrevela 0s 1.5s forwards; }
@keyframes vlrevela { to { opacity: 1; } }
.vl-lang-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--vl-bd2); background: rgba(255,255,255,.03); color: var(--vl-tx2); font-weight: 700; font-size: .82rem; letter-spacing: .04em; cursor: pointer; transition: .2s; }
.vl-lang-btn:hover, .vl-lang .show > .vl-lang-btn { color: var(--vl-tx); border-color: rgba(139,92,246,.55); }
.vl-lang-btn i { color: var(--vl-pur-l); }
.vl-lang .dropdown-item { display: flex; align-items: center; gap: 10px; }
.vl-lang-sigla { width: 30px; height: 22px; border-radius: 6px; display: inline-grid; place-items: center; font-size: .7rem; background: var(--vl-bg3); border: 1px solid var(--vl-bd2); color: var(--vl-tx2); }
.vl-lang .dropdown-item.active .vl-lang-sigla { background: var(--vl-grad); color: #fff; border-color: transparent; }

/* [VLFRONT] proteção contra cópia: sem seleção de texto e sem arrastar imagens (campos de formulário continuam livres) */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, select, [contenteditable], [data-copy-ok], [data-copy-ok] * { -webkit-user-select: text; user-select: text; }
img { -webkit-user-drag: none; user-drag: none; }