:root {
  --bg: #020913;
  --bg-2: #061523;
  --panel: rgba(5, 22, 35, .88);
  --panel-2: rgba(7, 31, 48, .86);
  --cyan: #00d9ff;
  --cyan-2: #39f2ff;
  --green: #61ff4b;
  --green-2: #1be77c;
  --red: #ff4d59;
  --text: #f5fbff;
  --muted: #9fb4c3;
  --line: rgba(38, 214, 255, .28);
  --shadow-cyan: 0 0 26px rgba(0, 217, 255, .18);
  --shadow-green: 0 0 30px rgba(97, 255, 75, .16);
  --radius: 24px;
}

* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 50% 8%, rgba(0, 180, 255, .10), transparent 30%),
    linear-gradient(180deg, #010710 0%, #03101a 55%, #020813 100%);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

.app-shell {
  width: min(100%, 520px);
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
  padding-bottom: calc(94px + env(safe-area-inset-bottom));
  overflow-x: hidden;
  background:
    linear-gradient(rgba(0, 217, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 217, 255, .02) 1px, transparent 1px),
    transparent;
  background-size: 40px 40px;
}

.topbar {
  min-height: 112px;
  padding: calc(18px + env(safe-area-inset-top)) 18px 14px;
  display: grid;
  grid-template-columns: 52px 1fr 92px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(91, 225, 255, .12);
  position: relative;
  z-index: 30;
  background: linear-gradient(180deg, rgba(2, 9, 19, .96), rgba(2, 9, 19, .78));
  backdrop-filter: blur(14px);
}
.brand-mark {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(0, 217, 255, .65);
  clip-path: polygon(25% 5%, 75% 5%, 96% 25%, 96% 75%, 75% 95%, 25% 95%, 4% 75%, 4% 25%);
  display: grid;
  place-items: center;
  color: var(--cyan);
  box-shadow: inset 0 0 18px rgba(0, 217, 255, .18), 0 0 18px rgba(0, 217, 255, .12);
}
.brand-mark span { font-weight: 900; font-size: 23px; text-shadow: 0 0 12px var(--cyan); }
.brand-center { text-align: center; line-height: 1; }
.brand {
  display: inline-block;
  color: var(--cyan-2);
  font-size: clamp(34px, 10vw, 50px);
  font-weight: 800;
  letter-spacing: .04em;
  text-shadow: 0 0 24px rgba(0, 217, 255, .32);
}
.online { margin-top: 7px; font-size: 13px; color: var(--green); letter-spacing: .08em; }
.online i, .live-pill i, .detail-live i, .time-ago i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; box-shadow: 0 0 12px rgba(97, 255, 75, .8); margin-right: 6px; }
.top-actions { display: flex; justify-content: flex-end; gap: 8px; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(151, 231, 255, .4); background: rgba(2, 12, 22, .6); color: var(--cyan); display: grid; place-items: center; position: relative; font-size: 23px;
}
.notify-btn i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--green); top: 2px; right: 4px; box-shadow: 0 0 8px var(--green); }
.bell { transform: rotate(180deg); opacity: .9; }

.home-page, .alerts-page, .detail-page { padding: 0 16px 30px; }
.radar-status {
  width: fit-content;
  margin: 16px auto 0;
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; color: #dcecf6;
}
.mini-radar { width: 21px; height: 21px; border: 2px solid var(--green); border-radius: 50%; position: relative; box-shadow: 0 0 12px rgba(97,255,75,.35); }
.mini-radar::before { content:""; position:absolute; width: 9px; height: 2px; background: var(--green); left: 8px; top: 8px; transform: rotate(-35deg); transform-origin:left center; }
.mini-radar::after { content:""; position:absolute; width:4px; height:4px; border-radius:50%; background:var(--green); left:7px; top:7px; }

.hero-radar {
  position: relative;
  height: 500px;
  margin-top: 6px;
}
.voox-bot {
  position: absolute;
  width: 126px;
  height: 136px;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  filter: drop-shadow(0 0 20px rgba(0, 217, 255, .18));
}
.bot-head {
  width: 100px; height: 76px; margin: 0 auto; border-radius: 42% 42% 35% 35%;
  background: linear-gradient(145deg, #eef4f6, #657d88 55%, #243a47 85%);
  padding: 11px 9px; box-shadow: inset 0 -8px 16px rgba(0,0,0,.28), 0 0 0 2px rgba(102, 230, 255, .35);
}
.bot-face { height: 50px; border-radius: 24px; background: linear-gradient(180deg, #03141f, #061b28); position: relative; box-shadow: inset 0 0 18px rgba(0,217,255,.14); }
.eye { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: var(--cyan-2); top: 19px; box-shadow: 0 0 14px 5px rgba(0,217,255,.52); }
.eye.left { left: 21px; } .eye.right { right: 21px; }
.bot-body { width: 76px; height: 60px; margin: -4px auto 0; border-radius: 30% 30% 22% 22%; background: linear-gradient(160deg,#aebbc1,#334a56 65%,#132631); border:1px solid rgba(0,217,255,.35); display:grid; place-items:center; }
.bot-body span { color:var(--cyan); font-size:34px; font-weight:900; text-shadow:0 0 16px var(--cyan); }
.eye-beam { position:absolute; width: 5px; height: 110px; top: 47px; background: linear-gradient(180deg, var(--cyan-2), rgba(0,217,255,.08)); box-shadow:0 0 14px var(--cyan); transform-origin: top center; opacity:.85; }
.beam-left { left: 48px; transform: rotate(-12deg); } .beam-right { right: 48px; transform: rotate(12deg); }

.radar-disc {
  position: absolute;
  width: min(72vw, 320px);
  aspect-ratio: 1;
  left: 50%; top: 135px; transform: translateX(-50%);
  border-radius: 50%;
  border: 2px solid rgba(0, 217, 255, .7);
  box-shadow: 0 0 0 8px rgba(0,217,255,.05), 0 0 32px rgba(0,217,255,.25), inset 0 0 32px rgba(0,217,255,.16);
  background:
    radial-gradient(circle at center, transparent 0 10%, rgba(0,217,255,.18) 10.4% 10.8%, transparent 11.2% 24%, rgba(0,217,255,.15) 24.4% 24.8%, transparent 25.2% 39%, rgba(0,217,255,.12) 39.4% 39.8%, transparent 40.2% 49%, rgba(0,217,255,.12) 49.4% 49.8%, transparent 50.2%),
    linear-gradient(90deg, transparent 49.7%, rgba(0,217,255,.35) 50%, transparent 50.3%),
    linear-gradient(transparent 49.7%, rgba(0,217,255,.35) 50%, transparent 50.3%),
    radial-gradient(circle at 50% 48%, rgba(0, 113, 159, .21), rgba(2, 14, 24, .92) 64%);
  overflow: hidden;
}
.sweep {
  position:absolute; inset: 4%; border-radius:50%;
  background: conic-gradient(from -16deg, rgba(0,217,255,.55) 0deg, rgba(0,217,255,.08) 42deg, transparent 70deg 360deg);
  animation: radarSweep 4.5s linear infinite;
}
.radar-core { position:absolute; width:8px;height:8px;border-radius:50%;background:var(--cyan-2);left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 16px 5px rgba(0,217,255,.7); }
.blip { position:absolute;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 12px 3px rgba(97,255,75,.55);animation:blip 1.9s ease-in-out infinite; }
.b1 { left:31%;top:38%; }.b2 { right:25%;top:31%;animation-delay:.4s}.b3 { left:39%;bottom:24%;animation-delay:.7s}.b4{right:33%;bottom:33%;animation-delay:1s}
@keyframes radarSweep { to { transform: rotate(360deg);} }
@keyframes blip { 0%,100%{opacity:.38;transform:scale(.75)} 45%{opacity:1;transform:scale(1.35)} }

.match-node {
  position:absolute;
  width: 138px;
  min-height: 96px;
  padding: 13px 10px;
  border:1px solid rgba(0,217,255,.32);
  background:linear-gradient(180deg,rgba(4,18,29,.94),rgba(2,11,19,.9));
  border-radius:18px;
  box-shadow:var(--shadow-cyan);
  z-index:9;
  text-align:center;
  display:flex; flex-direction:column; justify-content:center; gap:6px;
}
.match-node b { font-size: 12px; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.match-node span { font-size:14px; color:#e9f6fb; }
.match-node em { font-style:normal; color:var(--cyan); font-size:11px; letter-spacing:.04em; }
.match-node em.red{color:var(--red)} .match-node em.green{color:var(--green)}
.node-a { left:0; top:26px; }.node-b{right:0;top:26px}.node-c{left:0;top:300px}.node-d{right:0;top:300px}

.telemetry-panel {
  margin-top: 4px;
  display:grid;
  grid-template-columns: repeat(5,1fr);
  border:1px solid rgba(0,217,255,.45);
  border-radius:20px;
  background:linear-gradient(180deg,rgba(4,23,35,.92),rgba(3,13,22,.95));
  box-shadow:var(--shadow-cyan);
  overflow:hidden;
}
.telemetry-panel > div { min-width:0; text-align:center; padding:12px 5px 11px; position:relative; }
.telemetry-panel > div + div::before{content:"";position:absolute;left:0;top:17%;bottom:17%;width:1px;background:rgba(129,222,245,.2)}
.tele-icon{display:block;color:var(--cyan);font-size:21px;line-height:1.1;margin-bottom:4px}.telemetry-panel strong{display:block;color:var(--green);font-size:22px;line-height:1.05}.telemetry-panel strong.status-word{font-size:13px;padding-top:6px;min-height:24px}.telemetry-panel small{display:block;color:#ecf7fa;font-size:10px;line-height:1.25;margin-top:6px}
.telemetry-headline{margin:8px 4px 0;text-align:center;color:#8edbea;font-size:12px;letter-spacing:.03em}

.latest-section { margin-top: 18px; }
.section-title { color:var(--green); font-size:16px; margin:0 4px 9px; display:flex;align-items:center;gap:7px; }
.alert-card {
  border:1px solid rgba(0,217,255,.45);
  border-radius:22px;
  padding:15px;
  background:linear-gradient(150deg,rgba(4,20,31,.96),rgba(2,10,18,.97));
  box-shadow:var(--shadow-cyan);
}
.alert-card.featured { border-color:rgba(97,255,75,.65); box-shadow:var(--shadow-green), inset 0 0 25px rgba(97,255,75,.035); }
.alert-card-head { display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px; }
.market-badge { color:var(--green); border:1px solid rgba(97,255,75,.4); background:rgba(97,255,75,.08); padding:5px 10px; border-radius:9px; font-size:11px; letter-spacing:.05em; }
.time-ago { color:#c5d4dc; font-size:11px; white-space:nowrap; }.time-ago i{width:6px;height:6px;}
.alert-main { display:grid; grid-template-columns: 54px minmax(0,1fr); gap:12px; }
.alert-glyph { display:flex;justify-content:center;align-items:flex-start;padding-top:4px; }
.alert-glyph span { width:44px;height:44px;border-radius:50%;border:1px solid rgba(0,217,255,.6);box-shadow:0 0 18px rgba(0,217,255,.18),inset 0 0 12px rgba(0,217,255,.16);position:relative; }
.alert-glyph span::before,.alert-glyph span::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(0,217,255,.45);inset:7px}.alert-glyph span::after{inset:16px;background:var(--cyan);box-shadow:0 0 12px var(--cyan);border:0}
.alert-content h3 { margin:0; font-size:18px; line-height:1.25; font-weight:700; }
.competition { color:var(--cyan); font-size:13px; margin:4px 0 0; }
.chips { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.chips span { border:1px solid rgba(156, 219, 239, .26); border-radius:8px; padding:6px 9px; color:#e8f5f8; background:rgba(255,255,255,.02); font-size:12px; }
.odds { margin:10px 0 0; color:#bdcbd3; font-size:12px; }
.strategy { margin:10px 0 0; color:var(--green); font-size:13px; }
.entry-box { margin-top:9px; border:1px solid rgba(97,255,75,.42); border-radius:10px; padding:10px 12px; color:var(--green); font-size:15px; background:rgba(97,255,75,.04); }
.entry-box span { color:#a9c6cf; font-size:12px; margin-right:5px; text-transform:uppercase; letter-spacing:.05em; }
.details { margin:9px 0 0; color:#c9d6dc; font-size:12px; }.details strong{color:var(--cyan);font-weight:600}
.alert-actions { display:grid;grid-template-columns:1fr;gap:8px;margin-top:12px; }
.btn { min-height:44px; border-radius:12px; display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:14px; }
.btn-bet { color:#071306; background:linear-gradient(180deg,#6dff54,#2fe062); border:1px solid #79ff68; box-shadow:0 0 22px rgba(97,255,75,.18); }
.btn-analysis { color:var(--cyan); border:1px solid rgba(0,217,255,.55); background:rgba(0,217,255,.035); }
.btn-large { min-height:56px; font-size:17px; margin-top:18px; }
.central-alerts { margin-top:16px;min-height:58px;border:1px solid rgba(97,255,75,.8);border-radius:17px;background:linear-gradient(90deg,rgba(45,196,63,.22),rgba(0,217,255,.08),rgba(45,196,63,.16));display:grid;grid-template-columns:42px 1fr 34px;align-items:center;padding:0 14px;color:#60ff8a;font-weight:700;box-shadow:0 0 28px rgba(97,255,75,.14); }
.central-alerts span{font-size:25px;text-align:center}.central-alerts b{text-align:right;font-size:22px}

.alerts-page { padding-top: 18px; }
.alerts-heading { display:grid;grid-template-columns:50px 1fr auto;gap:12px;align-items:center;margin-bottom:18px; }
.alerts-icon{width:46px;height:46px;border-radius:50%;border:1px solid rgba(0,217,255,.55);display:grid;place-items:center;color:var(--cyan);box-shadow:var(--shadow-cyan)}
.alerts-heading h1{margin:0;font-size:25px}.alerts-heading p{margin:4px 0 0;color:#aabec9;font-size:12px}.live-pill{padding:8px 10px;border-radius:9px;border:1px solid rgba(97,255,75,.35);background:rgba(97,255,75,.08);font-size:11px;white-space:nowrap}.live-pill i{width:6px;height:6px;margin-right:4px}
.alerts-stream { display:grid; gap:12px; }
.alerts-stream .alert-card:not(.featured) { padding:13px; }
.alerts-stream .alert-card:not(.featured) .alert-glyph { display:none; }
.alerts-stream .alert-card:not(.featured) .alert-main { grid-template-columns:1fr; }
.alerts-stream .alert-card:not(.featured) .odds,.alerts-stream .alert-card:not(.featured) .strategy{display:none}
.alerts-stream .alert-card:not(.featured) .alert-actions { grid-template-columns:1fr 1fr; }

.detail-page { padding-top: 18px; }
.back-link{display:inline-flex;color:#88c9d7;font-size:13px;margin-bottom:18px}
.detail-hero{border:1px solid rgba(0,217,255,.35);border-radius:22px;padding:18px;background:linear-gradient(150deg,rgba(4,22,34,.95),rgba(3,12,20,.96));box-shadow:var(--shadow-cyan)}
.detail-hero{position:relative}.detail-live{position:absolute;right:15px;top:15px;color:#bceec3;font-size:11px}.detail-live i{width:6px;height:6px}.detail-hero h1{font-size:24px;line-height:1.2;margin:22px 0 5px}.detail-hero p{margin:0;color:var(--cyan);font-size:14px}
.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px}.detail-grid div{border:1px solid rgba(154,226,247,.22);background:rgba(255,255,255,.025);border-radius:13px;padding:11px;min-width:0}.detail-grid .wide{grid-column:1/-1}.detail-grid small{display:block;color:#8ba7b5;font-size:10px;text-transform:uppercase;letter-spacing:.06em}.detail-grid strong{display:block;margin-top:4px;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.analysis-panel{margin-top:12px;border:1px solid rgba(97,255,75,.35);border-radius:22px;padding:18px;background:linear-gradient(150deg,rgba(9,28,30,.9),rgba(3,12,20,.96));box-shadow:var(--shadow-green)}.analysis-label{margin:0;color:#9cb8c1;font-size:11px;text-transform:uppercase;letter-spacing:.08em}.analysis-panel h2{margin:5px 0 0;color:var(--green);font-size:18px}.main-entry{margin-top:16px;border:1px solid rgba(97,255,75,.55);border-radius:14px;padding:14px;background:rgba(97,255,75,.055)}.main-entry small{display:block;color:#91a8af;font-size:10px;letter-spacing:.08em}.main-entry strong{display:block;margin-top:5px;color:var(--green);font-size:25px}.analysis-details{margin:16px 0 0;color:#d7e5e9;line-height:1.45}.analysis-details span{display:block;color:var(--cyan);font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px}.external-note{text-align:center;color:#8ca0aa;font-size:10px;margin:9px 0 0}.missing-link{margin-top:18px;border:1px dashed rgba(255,255,255,.2);border-radius:12px;padding:12px;text-align:center;color:#98aab4;font-size:12px}
.empty-state{border:1px dashed rgba(0,217,255,.25);border-radius:18px;padding:24px;text-align:center;color:#8ea8b5;background:rgba(255,255,255,.018)}

.bottom-nav {
  position: fixed;
  z-index: 100;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(100%, 520px);
  min-height: calc(76px + env(safe-area-inset-bottom));
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:linear-gradient(180deg,rgba(3,16,27,.97),rgba(2,9,16,.99));
  border-top:1px solid rgba(85,202,232,.22);
  backdrop-filter:blur(16px);
}
.nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#92a5b0;font-size:11px;border-radius:14px;min-height:56px}.nav-icon{font-size:24px;line-height:1}.nav-item.active{color:var(--cyan);background:linear-gradient(180deg,rgba(0,217,255,.12),rgba(0,217,255,.03));text-shadow:0 0 12px rgba(0,217,255,.35)}

@media (max-width: 430px) {
  .topbar{grid-template-columns:44px 1fr 84px;padding-left:12px;padding-right:12px}.brand-mark{width:40px;height:40px}.icon-btn{width:36px;height:36px}.brand{font-size:36px}
  .home-page,.alerts-page,.detail-page{padding-left:11px;padding-right:11px}
  .hero-radar{height:450px}.voox-bot{top:13px;transform:translateX(-50%) scale(.88)}.radar-disc{top:132px;width:248px}
  .match-node{width:118px;min-height:84px;padding:10px 7px}.match-node b{font-size:10px}.match-node span{font-size:12px}.match-node em{font-size:9px}.node-a,.node-b{top:22px}.node-c,.node-d{top:292px}
  .telemetry-panel strong{font-size:19px}.telemetry-panel small{font-size:9px}.tele-icon{font-size:18px}.telemetry-panel strong.status-word{font-size:11px}
  .alert-card{padding:13px}.alert-main{grid-template-columns:44px minmax(0,1fr);gap:10px}.alert-glyph span{width:38px;height:38px}.alert-content h3{font-size:16px}
  .alerts-heading{grid-template-columns:42px 1fr auto;gap:9px}.alerts-icon{width:40px;height:40px}.alerts-heading h1{font-size:22px}.alerts-heading p{font-size:10px}.live-pill{font-size:10px;padding:7px}
}

@media (max-width: 360px) {
  .hero-radar{height:425px}.radar-disc{width:222px}.match-node{width:104px}.node-c,.node-d{top:280px}.telemetry-panel{grid-template-columns:repeat(5,minmax(0,1fr))}.telemetry-panel > div{padding-left:2px;padding-right:2px}.telemetry-panel strong{font-size:17px}.telemetry-panel small{font-size:8px}.alerts-stream .alert-card:not(.featured) .alert-actions{grid-template-columns:1fr}
}

@media (min-width: 700px) {
  body::before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 50% 10%,rgba(0,217,255,.08),transparent 35%);pointer-events:none}.app-shell{border-left:1px solid rgba(0,217,255,.12);border-right:1px solid rgba(0,217,255,.12);box-shadow:0 0 80px rgba(0,0,0,.55)}
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important}
}

/* =========================================================
   VOOX MOBILE PREMIUM V2 — 2026-08-12
   Hero redesenhado para aproximar o site do mockup aprovado.
   ========================================================= */
body{
  background:
    radial-gradient(circle at 50% 24%, rgba(0,217,255,.11), transparent 30%),
    radial-gradient(circle at 50% 62%, rgba(0,108,172,.06), transparent 38%),
    linear-gradient(180deg,#010710 0%,#020c15 48%,#020811 100%);
}
.app-shell{
  background:
    radial-gradient(circle at 50% 24%, rgba(0,217,255,.045), transparent 32%),
    linear-gradient(rgba(0,217,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,217,255,.014) 1px,transparent 1px);
  background-size:auto,48px 48px,48px 48px;
}
.topbar{
  min-height:118px;
  padding-top:calc(20px + env(safe-area-inset-top));
  background:
    radial-gradient(circle at 50% 60%,rgba(0,217,255,.08),transparent 48%),
    linear-gradient(180deg,rgba(1,8,16,.985),rgba(2,10,18,.90));
  border-bottom:1px solid rgba(47,218,255,.18);
  box-shadow:0 18px 46px rgba(0,0,0,.18);
}
.brand-mark{
  background:radial-gradient(circle at 50% 40%,rgba(0,217,255,.24),rgba(2,16,26,.92) 58%);
  border-color:rgba(0,226,255,.7);
  box-shadow:inset 0 0 24px rgba(0,217,255,.23),0 0 20px rgba(0,217,255,.15);
}
.brand{
  background:linear-gradient(180deg,#67f7ff 0%,#00d6ff 48%,#0096dc 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 28px rgba(0,217,255,.24);
}
.icon-btn{background:linear-gradient(180deg,rgba(7,25,38,.72),rgba(2,10,18,.74));box-shadow:inset 0 0 16px rgba(0,217,255,.035)}
.radar-status{margin-top:20px;font-size:16px;letter-spacing:.01em;text-shadow:0 0 15px rgba(255,255,255,.08)}
.mini-radar{box-shadow:0 0 18px rgba(97,255,75,.48),inset 0 0 12px rgba(97,255,75,.08)}

/* O primeiro viewport vira o "show" do VOOX. Os números e alertas começam após a dobra. */
.hero-radar{
  height:calc(100svh - 118px - 78px - 58px);
  min-height:570px;
  max-height:760px;
  margin-top:8px;
  isolation:isolate;
}
.hero-radar::before{
  content:"";position:absolute;inset:3% -25% 0;border-radius:50%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(circle at 50% 32%,rgba(0,217,255,.12),transparent 28%),
    radial-gradient(circle at 50% 58%,rgba(0,112,180,.08),transparent 50%);
  filter:blur(2px);
}
.hero-radar::after{
  content:"";position:absolute;left:50%;top:62px;width:1px;height:82%;transform:translateX(-50%);z-index:-1;
  background:linear-gradient(transparent,rgba(0,217,255,.16) 22%,rgba(0,217,255,.05) 72%,transparent);
  box-shadow:-145px 90px 0 rgba(0,217,255,.025),145px 90px 0 rgba(0,217,255,.025);
}
.voox-bot{
  width:168px;height:194px;top:13px;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.4)) drop-shadow(0 0 28px rgba(0,217,255,.28));
}
.voox-bot::before,.voox-bot::after{
  content:"";position:absolute;top:48px;width:35px;height:47px;border-radius:50%;
  background:linear-gradient(145deg,#a8bcc5,#243d4a 68%,#0b1f2b);
  border:1px solid rgba(76,229,255,.5);box-shadow:inset 0 0 14px rgba(0,217,255,.12),0 0 16px rgba(0,217,255,.18);z-index:-1;
}
.voox-bot::before{left:4px}.voox-bot::after{right:4px}
.bot-head{
  width:132px;height:96px;border-radius:45% 45% 39% 39%;padding:13px 11px;
  background:linear-gradient(150deg,#f9fcfd 0%,#b8c6cc 30%,#5e7682 66%,#1f3542 100%);
  box-shadow:inset 0 -12px 20px rgba(0,0,0,.3),inset 0 5px 12px rgba(255,255,255,.5),0 0 0 2px rgba(100,232,255,.38),0 0 28px rgba(0,217,255,.16);
}
.bot-face{height:66px;border-radius:32px;background:radial-gradient(circle at 50% 20%,#103047,#020a11 68%);box-shadow:inset 0 0 26px rgba(0,217,255,.20)}
.eye{width:17px;height:17px;top:25px;box-shadow:0 0 17px 6px rgba(0,217,255,.72)}
.eye.left{left:29px}.eye.right{right:29px}
.bot-body{
  width:105px;height:82px;margin:-5px auto 0;border-radius:34% 34% 25% 25%;
  background:linear-gradient(150deg,#d2dce0,#718792 48%,#2b4654 75%,#102632);
  border:1px solid rgba(87,229,255,.45);box-shadow:inset 0 7px 15px rgba(255,255,255,.12),inset 0 -10px 18px rgba(0,0,0,.3),0 0 22px rgba(0,217,255,.13);
}
.bot-body span{font-size:46px;color:#48eeff;text-shadow:0 0 22px rgba(0,217,255,.9)}
.eye-beam{width:4px;height:180px;top:65px;opacity:.98;background:linear-gradient(180deg,#8ff9ff 0%,#00d9ff 40%,rgba(0,217,255,.05) 100%);box-shadow:0 0 8px #8ff9ff,0 0 20px #00cfff}
.beam-left{left:65px;transform:rotate(-13deg)}.beam-right{right:65px;transform:rotate(13deg)}

.radar-disc{
  width:min(78vw,380px);top:178px;
  border:2px solid rgba(48,225,255,.92);
  box-shadow:0 0 0 7px rgba(0,217,255,.025),0 0 0 15px rgba(0,217,255,.018),0 0 45px rgba(0,217,255,.28),inset 0 0 55px rgba(0,217,255,.14);
  background:
    repeating-radial-gradient(circle at center,transparent 0 13.8%,rgba(0,217,255,.17) 14.1% 14.45%,transparent 14.8% 27.5%),
    linear-gradient(90deg,transparent 49.78%,rgba(0,217,255,.42) 50%,transparent 50.22%),
    linear-gradient(transparent 49.78%,rgba(0,217,255,.42) 50%,transparent 50.22%),
    radial-gradient(circle at center,rgba(0,111,167,.20),rgba(2,11,19,.96) 67%);
}
.radar-disc::before{content:"";position:absolute;inset:8px;border-radius:50%;border:1px dashed rgba(75,229,255,.34);box-shadow:inset 0 0 18px rgba(0,217,255,.05)}
.radar-disc::after{content:"";position:absolute;left:50%;top:50%;width:83%;height:83%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(0,217,255,.11);box-shadow:0 0 0 28px rgba(0,217,255,.018),0 0 0 58px rgba(0,217,255,.012)}
.sweep{inset:3%;background:conic-gradient(from -20deg,rgba(61,238,255,.78) 0deg,rgba(0,217,255,.24) 22deg,rgba(0,217,255,.055) 55deg,transparent 76deg 360deg);filter:drop-shadow(0 0 9px rgba(0,217,255,.55))}
.radar-core{width:9px;height:9px;box-shadow:0 0 20px 6px rgba(0,217,255,.85)}
.blip{width:10px;height:10px;box-shadow:0 0 16px 5px rgba(97,255,75,.65)}

.match-node{
  width:145px;min-height:112px;padding:15px 10px;border-color:rgba(87,220,255,.42);border-radius:20px;
  background:linear-gradient(160deg,rgba(4,20,31,.91),rgba(1,9,16,.94));
  box-shadow:0 18px 35px rgba(0,0,0,.30),inset 0 0 24px rgba(0,217,255,.025),0 0 22px rgba(0,217,255,.08);
  backdrop-filter:blur(10px);
}
.match-node::after{content:"";position:absolute;left:50%;width:1px;height:30px;background:linear-gradient(rgba(0,217,255,.6),transparent);box-shadow:0 0 8px rgba(0,217,255,.7)}
.node-a::after,.node-b::after{top:100%}.node-c::after,.node-d::after{bottom:100%;transform:rotate(180deg)}
.match-node b{font-size:13px}.match-node span{font-size:15px}.match-node em{font-size:11px}
.node-a{left:0;top:60px}.node-b{right:0;top:60px}.node-c{left:0;top:390px}.node-d{right:0;top:390px}

.telemetry-panel{margin-top:20px;border-color:rgba(80,219,255,.48);background:linear-gradient(180deg,rgba(3,20,31,.94),rgba(1,10,18,.97));box-shadow:0 18px 44px rgba(0,0,0,.28),0 0 28px rgba(0,217,255,.08)}
.latest-section{margin-top:24px}.section-title{font-size:18px;text-shadow:0 0 18px rgba(97,255,75,.16)}
.alert-card{box-shadow:0 20px 46px rgba(0,0,0,.3),var(--shadow-cyan)}
.alert-card.featured{box-shadow:0 20px 50px rgba(0,0,0,.32),0 0 34px rgba(97,255,75,.11),inset 0 0 40px rgba(97,255,75,.025)}
.btn-bet{min-height:50px;font-size:15px;background:linear-gradient(180deg,#78ff59 0%,#34e65d 100%);box-shadow:0 0 25px rgba(97,255,75,.22)}
.central-alerts{min-height:64px;font-size:15px;background:linear-gradient(90deg,rgba(36,196,75,.24),rgba(0,217,255,.08),rgba(36,196,75,.18));box-shadow:0 0 32px rgba(97,255,75,.12),inset 0 0 22px rgba(97,255,75,.025)}
.bottom-nav{background:linear-gradient(180deg,rgba(3,17,29,.96),rgba(1,7,13,.995));box-shadow:0 -15px 45px rgba(0,0,0,.35)}
.nav-item.active{background:radial-gradient(circle at 50% 20%,rgba(0,217,255,.16),rgba(0,217,255,.035) 65%);box-shadow:inset 0 0 22px rgba(0,217,255,.035)}

@media (max-width:430px){
  .topbar{min-height:112px}.radar-status{margin-top:18px}
  .hero-radar{height:calc(100svh - 112px - 78px - 56px);min-height:525px;max-height:670px}
  .voox-bot{top:12px;transform:translateX(-50%) scale(.80)}
  .radar-disc{top:158px;width:min(74vw,315px)}
  .match-node{width:122px;min-height:96px;padding:11px 7px}.match-node b{font-size:10px}.match-node span{font-size:13px}.match-node em{font-size:9px}
  .node-a,.node-b{top:50px}.node-c,.node-d{top:335px}
}
@media (max-width:380px){
  .hero-radar{min-height:500px}.radar-disc{top:155px;width:270px}.match-node{width:108px;min-height:88px}.node-c,.node-d{top:322px}
}


/* VOOX V3 - home hero locked to approved reference */
.home-reference-page{padding-top:0;}
.home-reference-page .hero-reference-screen{margin:0 -16px 18px;line-height:0;border-bottom:1px solid rgba(47,218,255,.16);background:#020813;box-shadow:0 20px 40px rgba(0,0,0,.22);}
.home-reference-page .hero-reference-screen img{display:block;width:100%;height:auto;}
@media (max-width: 430px){.home-reference-page .hero-reference-screen{margin-left:-11px;margin-right:-11px;}}


/* VOOX V4 — approved visual asset for the full first-stage hero */
.home-reference-page{padding-top:0;}
.home-reference-page .hero-reference-screen{
  margin:0 -16px 16px;
  padding:0;
  line-height:0;
  background:#020913;
  border:0;
  box-shadow:none;
  overflow:hidden;
}
.home-reference-page .hero-reference-screen img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:top center;
}
@media (max-width:430px){
  .home-reference-page .hero-reference-screen{margin-left:-11px;margin-right:-11px;}
}


/* =========================================================
   VOOX V5 — LIVE RADAR OVERLAY
   Mantém a arte V4 intacta e adiciona somente movimento.
   ========================================================= */
.hero-reference-screen{position:relative;isolation:isolate;}
.radar-live-overlay{
  position:absolute;
  z-index:3;
  left:24.0%;
  top:50.6%;
  width:52.0%;
  aspect-ratio:1/1;
  border-radius:50%;
  overflow:hidden;
  pointer-events:none;
  transform:translateZ(0);
  filter:drop-shadow(0 0 5px rgba(0,217,255,.18));
}
.radar-live-overlay::before{
  content:"";
  position:absolute;
  inset:3.5%;
  border-radius:50%;
  border:1px solid rgba(39,240,255,.12);
  animation:vooxRadarBreath 3.8s ease-in-out infinite;
}
.radar-live-sweep{
  position:absolute;
  inset:0;
  border-radius:50%;
  animation:vooxRadarSpin 4.8s linear infinite;
  transform-origin:50% 50%;
  will-change:transform;
}
.radar-live-sweep::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:50%;
  width:2px;
  height:47%;
  transform:translateX(-50%);
  transform-origin:50% 100%;
  background:linear-gradient(to top,rgba(255,255,255,.95),rgba(0,229,255,.92) 38%,rgba(0,217,255,.12));
  box-shadow:0 0 5px rgba(120,249,255,.95),0 0 13px rgba(0,217,255,.78),0 0 25px rgba(0,217,255,.42);
}
.radar-live-sweep i{
  position:absolute;
  left:50%;
  top:50%;
  width:48%;
  height:48%;
  transform-origin:0 0;
  transform:rotate(-90deg);
  clip-path:polygon(0 0,100% 0,0 100%);
  background:linear-gradient(135deg,rgba(49,240,255,.17),rgba(0,217,255,.045) 54%,transparent 72%);
  filter:blur(.2px);
}
.radar-live-core{
  position:absolute;
  z-index:5;
  left:50%;top:50%;
  width:6px;height:6px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:#bafcff;
  box-shadow:0 0 7px 3px rgba(0,229,255,.95),0 0 18px 7px rgba(0,217,255,.30);
  animation:vooxCorePulse 1.35s ease-in-out infinite;
}
.live-blip{
  position:absolute;
  z-index:4;
  width:7px;height:7px;
  margin:-3.5px 0 0 -3.5px;
  border-radius:50%;
  background:#73ff55;
  box-shadow:0 0 6px 2px rgba(97,255,75,.9),0 0 14px 5px rgba(97,255,75,.28);
  opacity:.55;
  will-change:transform,opacity;
}
.live-blip::after{
  content:"";
  position:absolute;
  inset:-5px;
  border:1px solid rgba(97,255,75,.42);
  border-radius:50%;
  animation:vooxPing 2.2s ease-out infinite;
}
.lb1{left:26%;top:30%;animation:vooxBlipA 3.1s ease-in-out infinite;}
.lb2{left:74%;top:22%;animation:vooxBlipB 2.25s ease-in-out .35s infinite;}
.lb3{left:78%;top:53%;animation:vooxBlipC 2.8s ease-in-out .8s infinite;}
.lb4{left:31%;top:73%;animation:vooxBlipD 3.6s ease-in-out .15s infinite;}
.lb5{left:55%;top:38%;animation:vooxBlipB 2.65s ease-in-out 1.05s infinite;}
.lb6{left:44%;top:61%;animation:vooxBlipA 3.35s ease-in-out .55s infinite;}
.live-target{
  position:absolute;
  z-index:4;
  width:15px;height:15px;
  margin:-7.5px 0 0 -7.5px;
  border:2px solid rgba(126,255,92,.82);
  border-radius:50%;
  box-shadow:0 0 9px rgba(97,255,75,.45);
  animation:vooxTargetPulse 2.6s ease-in-out infinite;
}
.live-target::before,.live-target::after{
  content:"";position:absolute;left:50%;top:50%;background:rgba(126,255,92,.7);transform:translate(-50%,-50%);
}
.live-target::before{width:3px;height:3px;border-radius:50%;box-shadow:0 0 6px rgba(126,255,92,.9);}
.live-target::after{width:25px;height:1px;opacity:.26;}
.lt1{left:24%;top:26%;animation-delay:.2s;}
.lt2{left:72%;top:70%;animation-delay:1.1s;}

@keyframes vooxRadarSpin{to{transform:rotate(360deg)}}
@keyframes vooxRadarBreath{0%,100%{opacity:.35;box-shadow:inset 0 0 8px rgba(0,217,255,.03)}50%{opacity:.9;box-shadow:inset 0 0 18px rgba(0,217,255,.10)}}
@keyframes vooxCorePulse{0%,100%{transform:translate(-50%,-50%) scale(.82);opacity:.7}50%{transform:translate(-50%,-50%) scale(1.35);opacity:1}}
@keyframes vooxPing{0%{transform:scale(.25);opacity:.8}75%,100%{transform:scale(1.6);opacity:0}}
@keyframes vooxTargetPulse{0%,100%{transform:scale(.88);opacity:.55}50%{transform:scale(1.18);opacity:1}}
@keyframes vooxBlipA{0%,100%{transform:translate(0,0) scale(.72);opacity:.28}38%{transform:translate(3px,-2px) scale(1.15);opacity:1}70%{transform:translate(-2px,2px) scale(.82);opacity:.52}}
@keyframes vooxBlipB{0%,100%{transform:translate(0,0) scale(.8);opacity:.35}48%{transform:translate(-3px,1px) scale(1.35);opacity:1}78%{transform:translate(1px,-3px) scale(.72);opacity:.4}}
@keyframes vooxBlipC{0%,100%{transform:translate(0,0) scale(.65);opacity:.22}30%{transform:translate(2px,3px) scale(1.05);opacity:.78}57%{transform:translate(-2px,-1px) scale(1.45);opacity:1}}
@keyframes vooxBlipD{0%,100%{transform:translate(0,0) scale(.85);opacity:.32}42%{transform:translate(-2px,-3px) scale(1.25);opacity:1}75%{transform:translate(3px,1px) scale(.72);opacity:.45}}

@media (prefers-reduced-motion: reduce){
  .radar-live-sweep{animation-duration:12s !important;animation-iteration-count:infinite !important;}
  .live-blip,.live-blip::after,.live-target,.radar-live-core,.radar-live-overlay::before{animation-duration:6s !important;animation-iteration-count:infinite !important;}
}


/* =========================================================
   VOOX V6 — REALISTIC VISUAL ACTIVITY
   Mantém o layout V5; adiciona cards vivos e telemetria gradual.
   ========================================================= */
.hero-reference-screen .live-card{
  position:absolute;z-index:6;width:30.8%;height:16.9%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:8px 9px;border-radius:13px;line-height:1.08;text-align:center;
  color:#f5fbff;background:linear-gradient(165deg,rgba(3,14,24,.95),rgba(1,8,14,.96));
  border:1px solid rgba(79,222,255,.34);box-shadow:inset 0 0 22px rgba(0,217,255,.045),0 0 14px rgba(0,0,0,.44);
  transition:opacity .26s ease,transform .26s ease,box-shadow .45s ease,border-color .45s ease;
  overflow:hidden;backdrop-filter:blur(5px);
}
.hero-reference-screen .live-card::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(74,235,255,.08) 50%,transparent 70%);transform:translateX(-120%);animation:vooxCardScan 7.5s linear infinite;pointer-events:none}
.hero-reference-screen .live-card b{font-size:clamp(9px,2.65vw,15px);font-weight:850;letter-spacing:.015em;white-space:nowrap;text-shadow:0 0 12px rgba(255,255,255,.05)}
.hero-reference-screen .live-card span{font-size:clamp(10px,2.8vw,16px);font-weight:760;color:#f3fbff;white-space:nowrap}
.hero-reference-screen .live-card em{font-size:clamp(7px,1.9vw,11px);font-style:normal;font-weight:800;letter-spacing:.02em;white-space:nowrap}
.hero-reference-screen .card-tl{left:5.8%;top:20.0%}.hero-reference-screen .card-tr{right:5.8%;top:20.0%}.hero-reference-screen .card-bl{left:5.8%;top:65.1%}.hero-reference-screen .card-br{right:5.8%;top:65.1%}
.hero-reference-screen .state-live{color:#ff5b64!important;text-shadow:0 0 10px rgba(255,77,89,.35)}
.hero-reference-screen .state-analysis,.hero-reference-screen .state-map{color:#36dbff!important;text-shadow:0 0 10px rgba(0,217,255,.3)}
.hero-reference-screen .state-radar{color:#73ff55!important;text-shadow:0 0 10px rgba(97,255,75,.3)}
.hero-reference-screen .state-hot{color:#ffe367!important;text-shadow:0 0 12px rgba(255,210,60,.38)}
.hero-reference-screen .card-refreshing{opacity:.22;transform:scale(.97)}
.hero-reference-screen .card-fresh{border-color:rgba(83,239,255,.72);box-shadow:inset 0 0 24px rgba(0,217,255,.08),0 0 18px rgba(0,217,255,.18)}
.metric-updating{display:inline-block;animation:vooxMetricPulse .9s ease both;text-shadow:0 0 18px currentColor}
.telemetry-headline{transition:opacity .3s ease;color:#9fefff}
@keyframes vooxCardScan{0%,67%{transform:translateX(-135%)}100%{transform:translateX(135%)}}
@keyframes vooxMetricPulse{0%{transform:translateY(0) scale(1);opacity:.82}45%{transform:translateY(-2px) scale(1.12);opacity:1}100%{transform:translateY(0) scale(1);opacity:1}}
@media(max-width:430px){.hero-reference-screen .live-card{padding:6px 5px;border-radius:11px}.hero-reference-screen .live-card b{font-size:9.4px}.hero-reference-screen .live-card span{font-size:11px}.hero-reference-screen .live-card em{font-size:7.4px}}


/* VOOX V7 — cards sem placar e funil de telemetria dinâmica */
.hero-reference-screen .live-card{gap:8px;background:linear-gradient(165deg,rgba(3,14,24,.985),rgba(1,8,14,.99));}
.hero-reference-screen .live-card b{line-height:1.18;}
.hero-reference-screen .live-card em{line-height:1.18;}


/* =========================================================
   VOOX V24 — Alertas compactos padronizados
   ========================================================= */
.alert-card.alert-card-compact{
  border-color:rgba(0,217,255,.48);
  box-shadow:0 14px 34px rgba(0,0,0,.28),0 0 20px rgba(0,217,255,.07);
  padding:15px;
}
.latest-section .alert-card.alert-card-compact,
.alerts-stream .alert-card.alert-card-compact{
  border-color:rgba(0,217,255,.48);
  box-shadow:0 14px 34px rgba(0,0,0,.28),0 0 20px rgba(0,217,255,.07);
}
.alert-card-compact .alert-card-head{margin-bottom:14px;}
.alert-card-compact .alert-received{
  color:#c5d4dc;font-size:11px;white-space:nowrap;display:flex;align-items:center;gap:6px;
}
.alert-card-compact .alert-received i{
  width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;
  box-shadow:0 0 12px rgba(97,255,75,.8);
}
.alert-card-compact .alert-content h3{font-size:18px;line-height:1.25;}
.alert-card-compact .competition{font-size:13px;margin-top:4px;}
.alert-card-compact .chips{margin-top:12px;}
.alert-card-compact .entry-box{
  margin-top:14px;border-radius:12px;padding:12px 14px;font-size:16px;
}
.alert-card-compact .details{margin-top:12px;font-size:13px;line-height:1.35;}
.alert-card-compact .alert-actions-single{display:block;margin-top:14px;}
.alert-card-compact .alert-actions-single .btn{width:100%;min-height:50px;}
.alert-card-compact .btn-bet.is-disabled{opacity:.55;filter:saturate(.5);cursor:not-allowed;}
.alerts-stream .alert-card.alert-card-compact{padding:15px;}
.alerts-stream .alert-card.alert-card-compact .odds,
.alerts-stream .alert-card.alert-card-compact .strategy{display:none;}
@media (max-width:430px){
  .alert-card-compact .alert-content h3{font-size:16px;}
  .alert-card-compact .alert-received{font-size:10px;}
  .alert-card-compact .entry-box{font-size:15px;padding:11px 12px;}
}


/* =========================================================
   VOOX V28 — ALERTA RADAR IDENTIFICADO
   ========================================================= */
.alert-card-radar{border-color:rgba(0,217,255,.58)!important;background:linear-gradient(180deg,rgba(2,17,28,.98),rgba(2,12,21,.99));}
.radar-alert-head{align-items:flex-start!important;}
.radar-identified{display:flex;align-items:center;gap:7px;color:var(--green);font-size:11px;font-weight:850;letter-spacing:.045em;text-transform:uppercase;}
.radar-identified i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 14px rgba(97,255,75,.9);flex:0 0 auto;}
.radar-match-title{margin-top:2px!important;color:#f7fbff!important;}
.radar-match-title span{color:#ff6169;font-size:.72em;font-weight:850;white-space:nowrap;}
.radar-chips{gap:9px!important;}
.radar-chips span{min-width:72px;text-align:center;font-weight:760;}
.radar-details strong{color:var(--cyan)!important;}
.radar-details span{text-transform:uppercase;color:#eef8fb;font-weight:760;}
.alert-card-radar .entry-box{border-color:rgba(97,255,75,.5);}
.alert-card-radar .btn-bet{font-size:16px;font-weight:900;}
@media(max-width:430px){
  .radar-identified{font-size:9.5px;letter-spacing:.025em;}
  .radar-alert-head .alert-received{font-size:9px;}
  .radar-match-title{font-size:16px!important;}
}

/* =========================================================
   VOOX V29 — Área VIP funcional
   ========================================================= */
.vip-page{padding:16px 14px 116px}
.vip-hero{display:grid;grid-template-columns:72px 1fr;gap:14px;align-items:center;padding:14px;border:1px solid rgba(0,217,255,.28);border-radius:20px;background:linear-gradient(150deg,rgba(4,22,34,.94),rgba(2,11,19,.97));box-shadow:0 0 24px rgba(0,217,255,.05)}
.vip-crown{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;font-size:38px;color:#78ff65;border:1px solid rgba(0,217,255,.52);background:radial-gradient(circle,rgba(97,255,75,.15),rgba(0,217,255,.06) 52%,rgba(2,10,18,.95) 70%);box-shadow:inset 0 0 18px rgba(0,217,255,.18),0 0 22px rgba(0,217,255,.10)}
.vip-eyebrow{font-size:10px;letter-spacing:.16em;color:#6bff70}
.vip-hero h1{margin:2px 0 4px;font-size:28px}
.vip-hero p{margin:0;color:#a8bac3;font-size:12px;line-height:1.45}
.vip-status-card,.vip-community-card{border:1px solid rgba(0,217,255,.27);border-radius:20px;background:linear-gradient(150deg,rgba(4,22,34,.95),rgba(2,11,19,.98))}
.vip-status-card{padding:13px 15px;margin-top:10px}
.vip-status-card>div{display:flex;align-items:center;gap:8px;color:#72ff80}
.vip-status-card p{margin:6px 0 0;color:#95aab5;font-size:11px;line-height:1.45}
.vip-dot{width:8px;height:8px;border-radius:50%;background:#63ff58;box-shadow:0 0 12px #63ff58}
.vip-section{margin-top:16px}
.vip-section-title{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:8px}
.vip-section-title span{font-size:9px;letter-spacing:.13em;color:#53f27a}
.vip-section-title h2{margin:2px 0 0;font-size:22px}
.vip-badge,.vip-counter{padding:6px 10px;border:1px solid rgba(97,255,75,.4);border-radius:10px;color:#6cff69!important;background:rgba(97,255,75,.06);letter-spacing:0!important}
.vip-community-card{padding:11px}
.vip-pinned{display:grid;grid-template-columns:30px 1fr;gap:9px;align-items:start;margin-bottom:10px;padding:11px 12px;border-radius:14px;border:1px solid rgba(97,255,75,.25);background:linear-gradient(135deg,rgba(97,255,75,.09),rgba(0,217,255,.05))}
.vip-pinned[hidden]{display:none}
.vip-pinned-icon{font-size:19px}
.vip-pinned strong{display:block;color:#dfffe0;font-size:12px;margin-bottom:3px}
.vip-pinned p{margin:0;color:#c2d3da;font-size:12px;line-height:1.45;white-space:pre-wrap}
.vip-chat-list{height:430px;overflow-y:auto;padding:10px 5px 10px 2px;border:1px solid rgba(0,217,255,.15);border-radius:15px;background:rgba(0,8,14,.42);scrollbar-width:thin;overscroll-behavior:contain}
.vip-chat-loading,.vip-chat-empty{padding:18px;color:#78939f;font-size:12px;text-align:center}
.vip-message{display:grid;grid-template-columns:34px 1fr;gap:8px;align-items:end;margin:8px 0;border:0;padding:0;background:transparent}
.vip-avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(0,217,255,.32);background:linear-gradient(145deg,rgba(0,217,255,.16),rgba(97,255,75,.08));color:#70f4ff;font-size:12px;font-weight:800}
.vip-message-bubble{min-width:0;padding:9px 11px;border:1px solid rgba(0,217,255,.14);border-radius:6px 14px 14px 14px;background:linear-gradient(145deg,rgba(11,38,54,.92),rgba(6,24,36,.95))}
.vip-message-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.vip-message-meta b{color:#73ff74;font-size:11px}
.vip-message-meta small{color:#718893;font-size:9px}
.vip-message-bubble>span{display:block;color:#e2edf1;font-size:12px;line-height:1.45;word-break:break-word;white-space:pre-wrap}
.vip-chat-form{margin-top:10px}
.vip-chat-input-row{display:grid;grid-template-columns:1fr 50px;gap:8px;align-items:stretch}
.vip-chat-input-wrap{position:relative}
.vip-chat-input-wrap textarea{width:100%;height:52px;min-height:52px;max-height:86px;box-sizing:border-box;resize:none;padding:10px 48px 10px 12px;border-radius:15px;border:1px solid rgba(0,217,255,.24);background:rgba(4,20,31,.92);color:#effbff;font:inherit;font-size:12px;line-height:1.4;outline:none}
.vip-chat-input-wrap textarea:focus{border-color:rgba(74,239,255,.6)}
.vip-chat-input-wrap textarea::placeholder{color:#69808b}
.vip-char-count{position:absolute;right:9px;bottom:7px;color:#607983;font-size:8px}
.vip-chat-send-icon{width:50px;border:1px solid rgba(97,255,75,.55);border-radius:15px;background:linear-gradient(180deg,#68ff54,#25e54d);color:#031308;font-size:22px;font-weight:900;box-shadow:0 0 17px rgba(97,255,75,.15)}
.vip-chat-send-icon:disabled{opacity:.5}
.vip-chat-feedback{margin-top:7px;padding:8px 10px;border-radius:10px;font-size:10px;line-height:1.35}
.vip-chat-feedback.error{display:block;background:rgba(255,66,81,.09);border:1px solid rgba(255,66,81,.35);color:#ff8b95}
.vip-chat-feedback.success{display:block;background:rgba(97,255,75,.08);border:1px solid rgba(97,255,75,.3);color:#7dff74}
.vip-chat-rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.055)}
.vip-chat-rules span{min-height:38px;display:flex;align-items:center;gap:5px;padding:7px;border-radius:11px;background:rgba(0,217,255,.025);color:#9cb2bc;font-size:9px;line-height:1.2}
.vip-lessons{display:grid;gap:0;border:1px solid rgba(0,217,255,.22);border-radius:18px;overflow:hidden;background:rgba(2,13,21,.86)}
.vip-lesson{border:0;border-bottom:1px solid rgba(0,217,255,.12);border-radius:0;background:transparent;overflow:hidden}
.vip-lesson:last-child{border-bottom:0}
.vip-lesson[open]{background:rgba(97,255,75,.025)}
.vip-lesson summary{list-style:none;display:grid;grid-template-columns:42px 1fr 24px;gap:10px;align-items:center;padding:11px 12px;cursor:pointer}
.vip-lesson summary::-webkit-details-marker{display:none}
.lesson-number{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:#6cff64;background:rgba(97,255,75,.05);border:1px solid rgba(97,255,75,.22);font-size:11px}
.vip-lesson summary b{display:block;font-size:13px}
.vip-lesson summary small{display:block;color:#8097a2;font-size:9px;margin-top:2px}
.vip-lesson summary i{color:#b5c7ce;font-style:normal;text-align:center}
.lesson-body{padding:0 13px 12px 64px;border-top:1px solid rgba(255,255,255,.035)}
.lesson-body p{margin:10px 0 0;color:#afc1c9;font-size:11px;line-height:1.5}
.lesson-body strong{color:#65ff76}
@media(max-width:430px){.vip-page{padding-left:10px;padding-right:10px}.vip-hero{grid-template-columns:62px 1fr}.vip-crown{width:60px;height:60px;font-size:32px}.vip-chat-list{height:450px}.lesson-body{padding-left:63px}}

.nav-icon-img{width:22px;height:22px;display:block;object-fit:contain}