:root{
  --bg:       #0D0D0D;
  --surface:  #1A1A1A;
  --surface2: #222222;
  --surface3: #2A2A2A;
  --border:   #2E2E2E;

  /* FALLBACK */
  --primary:  #f7f5f6;
  --primary2: #C13584;

  /* 🔥 GRADIENT INSTAGRAM */
  --primary-gradient: linear-gradient(135deg,
    #833AB4,
    #C13584,
    #E1306C,
    #FD1D1D,
    #F56040,
    #FCAF45,
    #FFDC80
  );

  /* OUTROS */
  --accent:   #3B82F6;
  --warn:     #F59E0B;
  --error:    #EF4444;
  --coin:     #F59E0B;
  --text:     #ECECEC;
  --text2:    #9B9B9B;
  --text3:    #6B6B6B;

  --radius:   14px;
  --radius-sm:9px;
  --shadow:   0 8px 32px rgba(0,0,0,.5);


/* ── Cashback Animation ─────────────────────────────────── */
#cashbackAnim {
  position:fixed; top:80px; left:50%; transform:translateX(-50%) translateY(-20px);
  z-index:9999; pointer-events:none; opacity:0; transition:opacity .3s, transform .4s;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
#cashbackAnim.show { opacity:1; transform:translateX(-50%) translateY(0); }
.cashback-bubble {
  background: linear-gradient(135deg,#F59E0B,#F97316);
  border-radius:50px; padding:10px 22px;
  display:flex; align-items:center; gap:10px;
  box-shadow:0 4px 24px rgba(249,115,22,.5);
  animation: cashbackPop .4s cubic-bezier(.175,.885,.32,1.275);
}
@keyframes cashbackPop {
  0%  { transform:scale(.6); }
  100%{ transform:scale(1); }
}
.cashback-bubble svg { width:22px; height:22px; fill:#fff; flex-shrink:0; }
.cashback-coins { font-size:1.3rem; font-weight:800; color:#fff; letter-spacing:-0.5px; }
.cashback-label { font-size:.72rem; color:rgba(255,255,255,.85); font-weight:600; margin-top:-2px; }
.cashback-pct   { font-size:.7rem; color:rgba(255,255,255,.7); text-align:center; }
.cashback-particles {
  position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none;
}
/* Partículas de moeda voando */
.cashback-bubble::before {
  content:'🪙'; position:absolute; top:-12px; left:10%; font-size:1rem;
  animation: coinFly1 .8s ease-out .2s forwards; opacity:0;
}
.cashback-bubble::after {
  content:'🪙'; position:absolute; top:-12px; right:10%; font-size:.8rem;
  animation: coinFly2 .8s ease-out .35s forwards; opacity:0;
}
@keyframes coinFly1 {
  0%  { opacity:1; transform:translateY(0) rotate(0deg); }
  100%{ opacity:0; transform:translateY(-40px) rotate(180deg); }
}
@keyframes coinFly2 {
  0%  { opacity:1; transform:translateY(0) rotate(0deg); }
  100%{ opacity:0; transform:translateY(-30px) rotate(-180deg); }
}
/* Badge de nível de cashback no card de pedido */
.cashback-badge {
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(249,115,22,.15); border:1px solid rgba(249,115,22,.3);
  border-radius:20px; padding:3px 10px; font-size:.72rem; color:#F97316; font-weight:600;
  margin-top:6px;
}
  --shadow-sm:0 2px 12px rgba(0,0,0,.3);
  --nav-h:    64px;
  --header-h: 56px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}
html,body{height:100%;overflow:hidden;background:var(--bg)}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;color:var(--text)}

/* ====== PRO CHAT EFFECT ====== */
.app.pro-mode .chat-messages {
  background: linear-gradient(180deg, rgba(88,28,135,.08) 0%, transparent 40%);
}
.app.pro-mode .chat-input-bar {
  background: linear-gradient(90deg,rgba(88,28,135,.18),rgba(79,70,229,.12));
  border-top: 1.5px solid rgba(124,58,237,.35);
  box-shadow: 0 -4px 32px rgba(124,58,237,.15);
}
.app.pro-mode .chat-ta {
  border: 1.5px solid rgba(124,58,237,.3);
  background: rgba(88,28,135,.12);
}
.app.pro-mode .chat-ta:focus {
  border-color: rgba(167,139,250,.6);
  box-shadow: 0 0 0 3px rgba(124,58,237,.12);
}
.app.pro-mode .send-btn {
  background: linear-gradient(135deg,#7C3AED,#4F46E5);
  box-shadow: 0 4px 16px rgba(124,58,237,.4);
}
.app.pro-mode .msg.bot .msg-bubble {
  border-left: 2px solid rgba(167,139,250,.4);
}
.app.pro-mode #chatFab {
  background: linear-gradient(135deg,#7C3AED,#4F46E5);
  box-shadow: 0 4px 24px rgba(124,58,237,.5);
}
/* Partículas roxas PRO no chat */
.app.pro-mode .chat-messages::before {
  content:'';
  position:absolute;top:0;left:0;right:0;height:60px;
  background:linear-gradient(180deg,rgba(124,58,237,.1),transparent);
  pointer-events:none;z-index:0;
}

/* ====== BOTÃO + DO CHAT ====== */
.chat-plus-btn {
  width:42px;height:42px;border-radius:50%;
  background:var(--surface2);border:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;transition:.2s;position:relative;
  color:var(--text2);
}
.chat-plus-btn:active{transform:scale(.9)}
.chat-plus-btn svg{width:20px;height:20px;fill:currentColor}
.chat-plus-menu {
  position:absolute;bottom:58px;left:0;
  display:flex;flex-direction:column;gap:8px;
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .2s,transform .2s;z-index:100;
}
.chat-plus-menu.open {
  opacity:1;pointer-events:all;transform:translateY(0);
}
.chat-plus-item {
  display:flex;align-items:center;gap:8px;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:12px;padding:10px 14px;cursor:pointer;
  white-space:nowrap;font-size:13px;font-weight:600;color:var(--text);
  transition:.15s;box-shadow:0 4px 16px rgba(0,0,0,.4);
}
.chat-plus-item:active{transform:scale(.97)}
.chat-plus-item svg{width:18px;height:18px;fill:currentColor;flex-shrink:0}
.chat-plus-item.gemini-item {
  background:linear-gradient(135deg,rgba(124,58,237,.2),rgba(79,70,229,.15));
  border-color:rgba(124,58,237,.4);color:#A78BFA;
}

/* ====== MODO GEMINI ====== */
.gemini-badge {
  display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(135deg,#7C3AED,#4F46E5);
  border-radius:20px;padding:4px 12px;font-size:11px;font-weight:700;color:white;
  margin-bottom:12px;
}
.gemini-services-list {
  display:flex;flex-direction:column;gap:10px;margin-top:8px;
}
.gemini-svc-card {
  background:var(--surface2);border:1px solid var(--border);
  border-radius:14px;padding:14px;cursor:pointer;transition:.2s;
  position:relative;overflow:hidden;
}
.gemini-svc-card:active{transform:scale(.98)}
.gemini-svc-card.best {
  border-color:rgba(16,163,127,.4);
  background:linear-gradient(135deg,rgba(16,163,127,.08),var(--surface2));
}
.gemini-svc-card .svc-rank {
  position:absolute;top:10px;right:10px;
  font-size:10px;font-weight:700;
  background:rgba(255,255,255,.08);border-radius:8px;padding:2px 8px;color:var(--text2);
}
.gemini-svc-card.best .svc-rank {
  background:rgba(16,163,127,.2);color:var(--primary-gradient);
}
.gemini-svc-name {font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px;padding-right:60px;line-height:1.3}
.gemini-svc-row {display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.gemini-svc-price {font-size:16px;font-weight:800;color:var(--primary)}
.gemini-svc-cashback {
  font-size:11px;font-weight:700;
  background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.3);
  border-radius:8px;padding:2px 8px;color:#F59E0B;
}
.gemini-svc-cashback.pro {
  background:rgba(124,58,237,.15);border-color:rgba(124,58,237,.3);color:#A78BFA;
}
.gemini-svc-why {
  font-size:11.5px;color:var(--text2);margin-top:6px;line-height:1.5;
  border-top:1px solid var(--border);padding-top:6px;
}
.gemini-select-btn {
  display:block;width:100%;margin-top:10px;padding:10px;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  border:none;border-radius:10px;color:white;font-size:13px;font-weight:700;
  cursor:pointer;font-family:inherit;
}

/* ====== ORDERBUMP PÓS-COMPRA ====== */
.orderbump-overlay {
  position:fixed;inset:0;z-index:3000;
  background:rgba(0,0,0,.7);backdrop-filter:blur(6px);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.orderbump-overlay.open{opacity:1;pointer-events:all}
.orderbump-sheet {
  width:100%;max-width:480px;
  background:var(--surface);border-radius:24px 24px 0 0;
  padding:20px;
  transform:translateY(100%);transition:transform .35s cubic-bezier(.25,.46,.45,.94);
}
.orderbump-overlay.open .orderbump-sheet{transform:translateY(0)}
.ob-handle {width:36px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 16px}
.ob-badge {
  display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(135deg,#F97316,#EF4444);
  border-radius:20px;padding:4px 12px;font-size:11px;font-weight:700;color:white;
  margin-bottom:12px;animation:obPulse 1.5s ease-in-out infinite;
}
@keyframes obPulse{0%,100%{box-shadow:0 0 0 0 rgba(249,115,22,.4)}50%{box-shadow:0 0 0 8px rgba(249,115,22,0)}}
.ob-title {font-size:17px;font-weight:800;color:var(--text);margin-bottom:4px}
.ob-sub {font-size:13px;color:var(--text2);margin-bottom:16px;line-height:1.5}
.ob-card {
  background:var(--surface2);border:1px solid rgba(16,163,127,.3);
  border-radius:16px;padding:16px;margin-bottom:16px;
}
.ob-svc-name {font-size:14px;font-weight:700;color:var(--text);margin-bottom:8px}
.ob-price-row {display:flex;align-items:center;justify-content:space-between}
.ob-price {font-size:20px;font-weight:800;color:var(--primary)}
.ob-cashback-tag {
  font-size:11px;font-weight:700;
  background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.3);
  border-radius:8px;padding:3px 10px;color:#F59E0B;
}
.ob-why {font-size:12px;color:var(--text2);margin-top:8px;line-height:1.6;
  background:rgba(255,255,255,.03);border-radius:8px;padding:8px;}
.ob-btn-yes {
  width:100%;padding:15px;background:linear-gradient(135deg,var(--primary),var(--accent));
  border:none;border-radius:var(--radius);color:white;font-size:15px;font-weight:800;
  cursor:pointer;font-family:inherit;margin-bottom:8px;
  box-shadow:0 4px 16px rgba(16,163,127,.3);
}
.ob-btn-no {
  width:100%;padding:12px;background:transparent;
  border:1px solid var(--border);border-radius:var(--radius);
  color:var(--text2);font-size:13px;cursor:pointer;font-family:inherit;
}

/* ====== PROMPTS OVERLAY ====== */
.prompts-overlay {
  position:fixed;inset:0;z-index:2500;
  background:rgba(0,0,0,.6);backdrop-filter:blur(4px);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.prompts-overlay.open{opacity:1;pointer-events:all}
.prompts-sheet {
  width:100%;max-width:480px;
  background:var(--surface);border-radius:24px 24px 0 0;
  padding:20px;max-height:75vh;overflow-y:auto;
  transform:translateY(100%);transition:transform .3s cubic-bezier(.25,.46,.45,.94);
}
.prompts-overlay.open .prompts-sheet{transform:translateY(0)}
.prompt-chip {
  display:block;width:100%;text-align:left;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:12px;padding:12px 14px;cursor:pointer;
  font-size:13px;color:var(--text);font-family:inherit;font-weight:500;
  margin-bottom:8px;transition:.15s;
}
.prompt-chip:active{transform:scale(.98);background:var(--surface3)}
.prompt-chip strong{color:var(--primary)}
.quick-hist-item {
  background:var(--surface2);border:1px solid var(--border);
  border-radius:12px;padding:12px 14px;margin-bottom:8px;
  cursor:pointer;transition:.15s;
}
.quick-hist-item:active{transform:scale(.98)}
.qhi-name{font-size:13px;font-weight:600;color:var(--text);margin-bottom:3px}
.qhi-details{font-size:11px;color:var(--text2)}
.qhi-repeat-btn {
  display:block;width:100%;margin-top:8px;padding:8px;
  background:rgba(16,163,127,.1);border:1px solid rgba(16,163,127,.3);
  border-radius:8px;color:var(--primary);font-size:12px;font-weight:700;
  cursor:pointer;font-family:inherit;
}

/* ====== APP SHELL ====== */
.app{
  max-width:480px;margin:0 auto;
  height:100vh;height:100dvh;
  display:flex;flex-direction:column;
  background:var(--bg);position:relative;overflow:hidden;
}

/* ====== HEADER ====== */
.header{
  height:var(--header-h);min-height:var(--header-h);
  background:rgba(13,13,13,.95);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;position:relative;z-index:50;
  flex-shrink:0;
}
.h-left{display:flex;align-items:center;gap:10px}
/*.logo-mark{
  width:34px;height:34px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,#10A37F,#3B82F6);
  display:flex;align-items:center;justify-content:center;
}
.logo-mark svg{width:18px;height:18px;fill:white}*/
.brand-name{font-size:15px;font-weight:700;letter-spacing:-.2px;color:var(--text)}
.brand-live{
  display:flex;align-items:center;gap:4px;
  font-size:10px;color:var(--primary);font-weight:500;
}
.live-dot{width:6px;height:6px;background:var(--primary-gradient);border-radius:50%;animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

.h-right{display:flex;align-items:center;gap:8px}
.rate-chip{
  background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.2);
  color:#60A5FA;font-size:10px;font-weight:600;
  padding:4px 8px;border-radius:20px;white-space:nowrap;
  display:flex;align-items:center;gap:4px;
}
.bal-btn{
  background:rgba(25 25 25 / 48%);border:1px solid rgba(53 255 106 / 77%);
  color:var(--primary);font-size:12px;font-weight:700;
  padding:6px 11px;border-radius:20px;cursor:pointer;
  display:flex;align-items:center;gap:5px;transition:.2s;
  font-family:inherit;
}
.bal-btn:active{transform:scale(.97)}
.bal-btn svg{width:13px;height:13px;fill:currentColor}
.avatar-btn{
  width:32px;height:32px;border-radius:50%;
  background:var(--surface2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--border);transition:.2s;
}
.avatar-btn.loggedin{border-color:var(--primary)}
.avatar-btn svg{width:16px;height:16px;fill:var(--text2)}
.avatar-btn.loggedin svg{fill:var(--primary)}

/* ====== MAIN CONTENT ====== */
.main{
  flex:1;overflow:hidden;display:flex;flex-direction:column;
  position:relative;min-height:0;
}

/* ====== SCREENS ====== */
.screen{
  display:none;flex-direction:column;flex:1;
  overflow:hidden;animation:fadeUp .25s ease;
}
.screen.active{display:flex}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ====== HOME SCREEN ====== */
.home-scroll{flex:1;overflow-y:auto;padding:14px 14px 80px;scroll-behavior:smooth}
.home-scroll::-webkit-scrollbar{width:3px}
.home-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

/* Saldo card */
.balance-hero{
  background:linear-gradient(135deg, rgba(26 26 26), rgba(26 26 26 / 0%));
  border:1px solid rgb(231 168 102 / 27%);border-radius:18px;
  padding:18px;margin-bottom:16px;position:relative;overflow:hidden;
}
.balance-hero::before{
  content:'';position:absolute;top:-30px;right:-30px;
  width:100px;height:100px;border-radius:50%;
  background:radial-gradient(circle, rgb(196 52 129 / 13%), #f65e3f00 70%);
}
.bh-label{font-size:11px;color:var(--text2);font-weight:500;margin-bottom:4px;display:flex;align-items:center;gap:5px}
.bh-label svg{width:12px;height:12px;fill:var(--text2)}
.bh-value{font-size:28px;font-weight:800;color:var(--text);letter-spacing:-1px;margin-bottom:2px}
.bh-coins{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.25);
  padding:4px 10px;border-radius:20px;margin-top:6px;
}
.bh-coins-ico{font-size:13px}
.bh-coins-val{font-size:12px;font-weight:700;color:var(--coin)}
.bh-coins-sub{font-size:10px;color:var(--text3)}
.bh-actions{display:flex;gap:8px;margin-top:12px}
.bh-btn{
  flex:1;padding:10px;border:none;border-radius:var(--radius-sm);
  font-size:12px;font-weight:700;font-family:inherit;cursor:pointer;transition:.2s;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.bh-btn-primary{background:var(--primary-gradient);color:white}
.bh-btn-primary:active{background:var(--primary2)}
.bh-btn-ghost{background:var(--surface2);color:var(--text2)}
.bh-btn-ghost:active{background:var(--surface3)}
.bh-btn svg{width:14px;height:14px;fill:currentColor}

/* Section header */
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;margin-top:16px}
.sec-title{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.8px}
.sec-see{font-size:11px;color:var(--primary);font-weight:600;cursor:pointer;padding:2px 0}

/* Platforms grid */
.plats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:4px}
.plat-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:12px 4px 10px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  cursor:pointer;transition:.22s;position:relative;overflow:hidden;
}
.plat-card:active{transform:scale(.93);border-color:var(--primary)}
.plat-icon-wrap{
  width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;padding:5px;
}
.plat-name{font-size:9.5px;font-weight:600;color:var(--text2);text-align:center;line-height:1.2}

/* Top selling */
.top-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:11px 13px;
  display:flex;align-items:center;gap:11px;cursor:pointer;transition:.2s;
  margin-bottom:7px;
}
.top-card:active{transform:scale(.98);border-color:rgba(16,163,127,.4)}
.top-rank{
  width:22px;font-size:11px;font-weight:800;color:var(--text3);
  text-align:center;flex-shrink:0;
}
.top-rank.gold{color:#F59E0B}
.top-rank.silver{color:#9B9B9B}
.top-rank.bronze{color:#CD7F32}
.top-icon{
  width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.top-info{flex:1;min-width:0}
.top-name{font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-sub{font-size:11px;color:var(--text2);margin-top:1px}
.top-arrow{color:var(--text3)}
.top-arrow svg{width:15px;height:15px;fill:currentColor}

/* ====== AD SCREEN ====== */
.ad-scroll{flex:1;overflow-y:auto;padding:14px 14px 80px}

.coins-header{
  background:linear-gradient(135deg,rgba(245,158,11,.15),rgba(245,158,11,.05));
  border:1px solid rgba(245,158,11,.25);border-radius:18px;
  padding:18px;margin-bottom:16px;text-align:center;
}
.coins-big{font-size:42px;font-weight:800;color:var(--coin);line-height:1}
.coins-label{font-size:12px;color:var(--text2);margin-top:4px;margin-bottom:12px}
.coins-progress-bar{
  height:6px;background:var(--surface3);border-radius:3px;margin-bottom:6px;overflow:hidden;
}
.coins-progress-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,#F59E0B,#FBBF24);transition:.5s}
.coins-progress-txt{font-size:10px;color:var(--text3);text-align:center}

.ad-box{
  background:var(--surface);border:1px solid var(--border);
  border-radius:18px;padding:18px;margin-bottom:12px;
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.ad-box-icon{
  width:64px;height:64px;border-radius:18px;
  background:linear-gradient(135deg,rgba(245,158,11,.2),rgba(245,158,11,.05));
  border:2px solid rgba(245,158,11,.3);
  display:flex;align-items:center;justify-content:center;font-size:28px;
}
.ad-box-title{font-size:15px;font-weight:700;color:var(--text);text-align:center}
.ad-box-sub{font-size:12px;color:var(--text2);text-align:center;line-height:1.5}
.ad-earn{
  display:flex;align-items:center;gap:6px;
  background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.2);
  padding:8px 16px;border-radius:20px;
}
.ad-earn span{font-size:13px;font-weight:700;color:var(--coin)}
.watch-btn{
  width:100%;padding:14px;border:none;border-radius:var(--radius-sm);
  font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;transition:.2s;
  background:linear-gradient(135deg,#F59E0B,#D97706);color:white;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.watch-btn:active{opacity:.85;transform:scale(.98)}
.watch-btn:disabled{opacity:.4;cursor:not-allowed}
.watch-btn svg{width:18px;height:18px;fill:white}

/* Ad stats */
.ad-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px;
}
.ad-stat-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:12px 8px;text-align:center;
}
.ad-stat-val{font-size:16px;font-weight:800;color:var(--text)}
.ad-stat-lbl{font-size:10px;color:var(--text3);margin-top:2px}

/* Convert box */
.convert-box{
  background:var(--surface);border:1px solid rgba(16,163,127,.2);
  border-radius:var(--radius);padding:14px;margin-bottom:12px;
}
.convert-box-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.convert-box-title svg{width:15px;height:15px;fill:var(--primary)}
.convert-rate{font-size:11px;color:var(--text2);margin-bottom:12px;line-height:1.5}
.convert-btn{
  width:100%;padding:12px;border:none;border-radius:var(--radius-sm);
  font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;transition:.2s;
  background:rgba(16,163,127,.15);color:var(--primary-gradient);border:1px solid rgba(16,163,127,.3);
}
.convert-btn:active{background:rgba(16,163,127,.25)}
.convert-btn:disabled{opacity:.4;cursor:not-allowed}

/* AdMob slot placeholder */
.admob-slot{
  background:var(--surface2);border:1px dashed var(--border);
  border-radius:var(--radius-sm);padding:12px;
  text-align:center;font-size:11px;color:var(--text3);
  min-height:60px;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:4px;margin-bottom:12px;
}

/* Ad countdown overlay */
.ad-countdown{
  position:fixed;inset:0;background:rgba(0,0,0,.92);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  z-index:1000;opacity:0;visibility:hidden;transition:.3s;
}
.ad-countdown.show{opacity:1;visibility:visible}
.adc-box{
  background:var(--surface);border:1px solid var(--border);
  border-radius:20px;padding:32px;text-align:center;max-width:300px;width:90%;
}
.adc-timer{font-size:56px;font-weight:800;color:var(--coin);line-height:1}
.adc-txt{font-size:14px;color:var(--text2);margin-top:8px;margin-bottom:16px}
.adc-bar{height:4px;background:var(--surface3);border-radius:2px;overflow:hidden;margin-bottom:16px}
.adc-bar-fill{height:100%;background:var(--coin);border-radius:2px;transition:.1s linear;width:100%}
.adc-reward{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.3);
  padding:8px 16px;border-radius:20px;font-size:14px;font-weight:700;color:var(--coin);
}

/* ====== CHAT SCREEN ====== */
.chat-messages{
  flex:1;overflow-y:auto;padding:14px 14px 6px;
  display:flex;flex-direction:column;gap:12px;
  scroll-behavior:smooth;overscroll-behavior:contain;
}
.chat-messages::-webkit-scrollbar{width:3px}
.chat-messages::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

.msg{display:flex;gap:8px;max-width:86%;animation:msgIn .28s ease}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.msg.bot{align-self:flex-start}
.msg.user{align-self:flex-end;flex-direction:row-reverse}
.msg-av{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:13px;
  background:linear-gradient(135deg,#10A37F22,#3B82F622);
  border:1px solid rgba(16,163,127,.3);
}
.msg.user .msg-av{background:var(--surface2);border-color:var(--border);font-size:12px}
.msg-body{display:flex;flex-direction:column;gap:2px}
.msg-bubble{
  padding:10px 14px;border-radius:16px;font-size:13.5px;line-height:1.55;word-wrap:break-word;
}
.msg.bot .msg-bubble{background:var(--surface2);border-radius:4px 16px 16px 16px;color:var(--text)}
.msg.user .msg-bubble{
  background:linear-gradient(135deg,#1a1a1a,#434141);
  color:white;border-radius:16px 16px 4px 16px;
}
.msg-time{font-size:9px;color:var(--text3);padding:0 3px}
.msg.user .msg-time{text-align:right}

.typing-dots{display:flex;gap:4px;padding:4px 2px}
.typing-dots span{
  width:6px;height:6px;background:var(--text3);border-radius:50%;
  animation:tdot 1.4s infinite;
}
.typing-dots span:nth-child(2){animation-delay:.22s}
.typing-dots span:nth-child(3){animation-delay:.44s}
@keyframes tdot{0%,60%,100%{transform:translateY(0);opacity:.3}30%{transform:translateY(-6px);opacity:1}}

.quick-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.chip{
  padding:6px 12px;background:var(--surface2);border:1px solid var(--border);
  border-radius:20px;font-size:12px;color:var(--text2);cursor:pointer;
  transition:.2s;font-family:inherit;white-space:nowrap;
}
.chip:active{background:var(--surface3);color:var(--text);transform:scale(.97)}

.chat-input-bar{
  padding:10px 12px 10px;
  background:rgba(13,13,13,.95);
  border-top:1px solid var(--border);
  display:flex;align-items:flex-end;gap:8px;flex-shrink:0;
}
.input-wrap{
  flex:1;background:var(--surface2);border:1.5px solid var(--border);
  border-radius:22px;display:flex;align-items:flex-end;
  padding:10px 14px;gap:8px;transition:.2s;
}
.input-wrap:focus-within{border-color:rgba(16,163,127,.5)}
.chat-ta{
  flex:1;background:transparent;border:none;outline:none;
  font-size:14px;color:var(--text);font-family:inherit;
  resize:none;max-height:100px;min-height:20px;line-height:1.4;
}
.chat-ta::placeholder{color:var(--text3)}
.send-btn{
  width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;
  background:var(--primary-gradient);display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:.2s;
}
.send-btn:active{transform:scale(.93);background:var(--primary2)}
.send-btn svg{width:16px;height:16px;fill:white}
.send-btn:disabled{opacity:.4;cursor:not-allowed}

/* Order card in chat */
.order-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px;margin:4px 0;
  animation:msgIn .3s ease;width:100%;
}
.oc-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.oc-icon{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,rgba(16,163,127,.2),rgba(59,130,246,.2));
  border:1px solid rgba(16,163,127,.3);
  display:flex;align-items:center;justify-content:center;font-size:17px;
}
.oc-title{font-size:13px;font-weight:600;line-height:1.3}
.oc-sub{font-size:11px;color:var(--text2);margin-top:2px}
.oc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.oc-item label{display:block;font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px}
.oc-item value{font-size:13px;font-weight:500;color:var(--text)}
.oc-price{display:flex;justify-content:space-between;align-items:center;padding-top:10px;border-top:1px solid var(--border)}
.oc-price-label{font-size:11px;color:var(--text2)}
.oc-price-val{font-size:20px;font-weight:800;color:var(--primary)}
.oc-price-usd{font-size:10px;color:var(--text3);margin-top:2px;text-align:right}

/* ====== ORDERS SCREEN ====== */
.orders-scroll{flex:1;overflow-y:auto;padding:16px;padding-bottom:80px}
.orders-scroll::-webkit-scrollbar{width:3px}

/* ====== ACCOUNT SCREEN ====== */
.acct-scroll{flex:1;overflow-y:auto;padding:16px;padding-bottom:80px}
.acct-scroll::-webkit-scrollbar{width:3px}
.acct-hero{
  background:var(--surface);border:1px solid var(--border);border-radius:18px;
  padding:20px;margin-bottom:14px;text-align:center;
}
.acct-avatar{
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,rgba(16,163,127,.3),rgba(59,130,246,.2));
  border:2px solid var(--primary);margin:0 auto 12px;
  display:flex;align-items:center;justify-content:center;font-size:26px;
}
.acct-email{font-size:14px;font-weight:600;color:var(--text);margin-bottom:4px}
.acct-tag{font-size:11px;color:var(--text2)}
.acct-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.acct-stat{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:12px 8px;text-align:center;
}
.acct-stat-val{font-size:16px;font-weight:800;color:var(--text)}
.acct-stat-lbl{font-size:10px;color:var(--text3);margin-top:2px}
.acct-menu-item{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:13px 14px;
  display:flex;align-items:center;gap:12px;cursor:pointer;transition:.2s;margin-bottom:8px;
}
.acct-menu-item:active{background:var(--surface2)}
.acct-menu-ico{
  width:34px;height:34px;border-radius:8px;background:var(--surface2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.acct-menu-ico svg{width:16px;height:16px;fill:var(--text2)}
.acct-menu-txt{flex:1;font-size:13px;font-weight:500;color:var(--text)}
.acct-menu-arr svg{width:15px;height:15px;fill:var(--text3)}

/* Hist tabs */
.hist-tabs{display:flex;gap:4px;background:var(--surface);padding:4px;border-radius:var(--radius-sm);margin-bottom:14px}
.hist-tab{
  flex:1;padding:8px 12px;border:none;border-radius:var(--radius-sm);
  font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;transition:.2s;
  color:var(--text2);background:transparent;
}
.hist-tab.active{background:var(--surface3);color:var(--text)}
.hist-item{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:13px 14px;
  display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;
}
.hi-info h4{font-size:13px;font-weight:500;color:var(--text)}
.hi-info span{font-size:11px;color:var(--text3);display:block;margin-top:2px}
.hi-right{text-align:right}
.hi-amount{font-size:15px;font-weight:700}
.hi-amount.pos{color:var(--primary)}
.hi-amount.neg{color:var(--error)}
.hi-badge{
  display:inline-block;font-size:10px;font-weight:600;
  padding:2px 7px;border-radius:10px;margin-top:4px;
}
.hi-badge.ok{background:rgba(16,163,127,.12);color:var(--primary)}
.hi-badge.wait{background:rgba(245,158,11,.12);color:var(--warn)}
.hi-badge.fail{background:rgba(239,68,68,.12);color:var(--error)}

/* ====== SHARED ====== */
.empty-box{text-align:center;padding:48px 20px;color:var(--text2)}
.empty-box svg{width:48px;height:48px;fill:var(--text3);margin-bottom:12px}
.empty-box h3{font-size:15px;font-weight:600;color:var(--text);margin-bottom:6px}
.empty-box p{font-size:13px;color:var(--text2)}
.spin{
  width:32px;height:32px;border:2.5px solid var(--surface3);
  border-top-color:var(--primary);border-radius:50%;
  animation:spin .9s linear infinite;margin:24px auto;
}
@keyframes spin{to{transform:rotate(360deg)}}
.status-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:12px;font-size:11px;font-weight:600;margin-top:8px;
}
.status-badge.pending{background:rgba(245,158,11,.12);color:var(--warn)}
.status-badge.processing{background:rgba(59,130,246,.12);color:var(--accent)}
.status-badge.completed{background:rgba(16,163,127,.12);color:var(--primary)}
.status-badge.cancelled{background:rgba(239,68,68,.12);color:var(--error)}

/* ====== BOTTOM NAV ====== */
.bottom-nav{
  height:var(--nav-h);min-height:var(--nav-h);flex-shrink:0;
  background:rgba(13,13,13,.97);
  border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 4px;position:relative;z-index:50;
  padding-bottom:env(safe-area-inset-bottom);
}
.nav-icon-btn{
  flex:1;height:54px;border-radius:var(--radius-sm);
  background:transparent;border:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;transition:.2s;color:var(--text3);position:relative;
}
.nav-icon-btn:active{background:var(--surface);transform:scale(.95)}
.nav-icon-btn.active{color:var(--primary)}
.nav-icon-btn svg{width:20px;height:20px;fill:currentColor;transition:.2s}
.nav-icon-btn span{font-size:9px;font-weight:600;letter-spacing:.1px}
.nav-icon-btn.active svg{filter:drop-shadow(0 0 4px rgba(16,163,127,.5))}





/* FAB central */
.nav-fab-wrap{
  flex: 0 0 auto; /* evita esticar */
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

/* BOTÃO */
.nav-fab{
  width:54px;
  height:54px;

  /* 🔥 GARANTE FORMATO PERFEITO */
  aspect-ratio: 1 / 1;
  min-width:54px;
  min-height:54px;
  max-width:54px;
  max-height:54px;

  border-radius:50%;
  border:none;
  cursor:pointer;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:10px;
  overflow:hidden;

  /* 🔥 impede deformação em flex/grid */
  flex-shrink: 0;
}

/* GRADIENTE */
.nav-fab::before{
  content:"";
  position:absolute;
  width:200%;
  height:200%;
  top:-50%;
  left:-50%;
  border-radius:50%;

  background:conic-gradient(
    from 0deg,
    #833AB4,
    #C13584,
    #E1306C,
    #FD1D1D,
    #F56040,
    #FCAF45,
    #FFDC80,
    #833AB4
  );

  animation:spinSmooth 4s linear infinite;
  z-index:0;

  filter:blur(12px);
  opacity:0.9;
}

/* FUNDO INTERNO */
.nav-fab::after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #1a1a1a, #000);
  z-index:1;
}

/* LOGO */
.nav-fab img{
  position:relative;
  z-index:2;
  width:70px;
  height:70px;
  object-fit:contain;
}

/* ANIMAÇÃO */
@keyframes spinSmooth{
  0%{ transform:rotate(0deg) scale(1); }
  50%{ transform:rotate(180deg) scale(1.05); }
  100%{ transform:rotate(360deg) scale(1); }
}

/* GLOW */
.nav-fab{
  box-shadow:
    0 0 20px rgba(225,48,108,0.4),
    0 0 40px rgba(252,175,69,0.2);
}

/* HOVER */
@media (hover:hover){
  .nav-fab:hover::before{
    filter:blur(16px) brightness(1.2);
  }
}

/* MOBILE */
@media (hover:none){
  .nav-fab::before{
    animation-duration:5s;
    opacity:1;
  }
}




.nav-fab:active{transform:scale(.93);box-shadow:0 2px 10px rgba(16,163,127,.3)}
.nav-fab svg{width:22px;height:22px;fill:white}
.fab-notif{
  position:absolute;top:-2px;right:-2px;width:16px;height:16px;
  background:var(--error);border-radius:50%;border:2px solid var(--bg);
  font-size:9px;color:white;font-weight:700;display:none;
  align-items:center;justify-content:center;
}

/* Coins badge na nav */
.nav-coins-badge{
  position:absolute;top:6px;right:8px;
  background:rgba(245,158,11,.9);border-radius:8px;
  font-size:8px;font-weight:700;color:#000;
  padding:1px 5px;display:none;
}

/* ====== MODALS / SHEETS ====== */
.overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.7);
  display:flex;align-items:flex-end;justify-content:center;
  z-index:200;opacity:0;visibility:hidden;transition:.25s;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.overlay.open{opacity:1;visibility:visible}
.sheet{
  background:var(--surface);border-radius:20px 20px 0 0;
  width:100%;max-width:480px;max-height:92vh;
  overflow-y:auto;transform:translateY(100%);transition:.3s cubic-bezier(.32,0,.67,0);
}
.overlay.open .sheet{transform:translateY(0)}
.sheet-handle{width:36px;height:4px;background:var(--border);border-radius:2px;margin:10px auto 0}
.sheet-head{
  padding:16px 18px 14px;border-bottom:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;
  position:sticky;top:0;background:var(--surface);z-index:1;
}
.sheet-title{font-size:16px;font-weight:700}
.sheet-close{
  width:28px;height:28px;border-radius:50%;background:var(--surface2);
  border:none;cursor:pointer;color:var(--text2);font-size:14px;
  display:flex;align-items:center;justify-content:center;transition:.2s;
}
.sheet-close:hover{background:var(--surface3);color:var(--text)}
.sheet-body{padding:18px}

.fg{margin-bottom:14px}
.fl{display:block;font-size:11px;font-weight:600;color:var(--text2);margin-bottom:7px;text-transform:uppercase;letter-spacing:.4px}
.fi{
  width:100%;background:var(--surface2);border:1.5px solid var(--border);
  border-radius:var(--radius-sm);padding:12px 14px;
  font-size:14px;color:var(--text);font-family:inherit;transition:.2s;
}
.fi:focus{outline:none;border-color:rgba(16,163,127,.6)}
.fi::placeholder{color:var(--text3)}
.btn{width:100%;padding:14px;border:none;border-radius:var(--radius-sm);font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;transition:.2s}
.btn-primary{background:linear-gradient(135deg,#a31079,#8f8a0d);color:white}
.btn-primary:active{transform:scale(.98);opacity:.9}
.btn-ghost{background:var(--surface2);color:var(--text2);margin-top:8px}
.btn-ghost:active{background:var(--surface3)}
.form-alt{text-align:center;margin-top:14px;font-size:13px;color:var(--text2)}
.form-alt a{color:var(--primary);text-decoration:none;font-weight:600}

.amt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:14px}
.amt-opt{
  background:var(--surface2);border:1.5px solid var(--border);
  border-radius:var(--radius-sm);padding:10px 6px;
  text-align:center;cursor:pointer;transition:.2s;
}
.amt-opt:active{transform:scale(.96)}
.amt-opt.sel{border-color:var(--primary);background:rgba(16,163,127,.08)}
.amt-brl{font-size:14px;font-weight:700;color:var(--primary)}
.amt-usd{font-size:10px;color:var(--text3);margin-top:2px}
.amt-tag{font-size:9px;color:var(--text3)}

.rate-box{
  background:rgba(59,130,246,.06);border:1px solid rgba(59,130,246,.15);
  border-radius:var(--radius-sm);padding:9px 12px;margin-bottom:14px;
  font-size:12px;color:#60A5FA;display:flex;align-items:center;gap:7px;
}
.rate-box svg{width:14px;height:14px;fill:currentColor;flex-shrink:0}

.pix-wrap{text-align:center;padding:8px 0}
.pix-qr{width:180px;height:180px;border-radius:12px;background:white;padding:8px;margin:0 auto 12px;display:none}
.pix-exp{font-size:12px;color:var(--warn);margin-bottom:10px}
.pix-code{
  background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:10px;font-size:11px;
  color:var(--text2);word-break:break-all;text-align:left;margin-bottom:10px;
}
.copy-btn{
  width:100%;padding:11px;background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--radius-sm);font-size:13px;font-weight:600;font-family:inherit;
  color:var(--text);cursor:pointer;transition:.2s;margin-bottom:8px;
}
.copy-btn:active{background:var(--primary);color:white;border-color:var(--primary)}

/* ====== TOAST ====== */
.toast{
  position:fixed;top:70px;left:50%;transform:translateX(-50%) scale(.9);
  background:var(--surface2);border:1px solid var(--border);
  padding:10px 18px;border-radius:22px;font-size:13px;font-weight:500;
  box-shadow:var(--shadow);z-index:500;opacity:0;visibility:hidden;
  transition:.25s;max-width:calc(100% - 32px);text-align:center;white-space:nowrap;
}
.toast.show{opacity:1;visibility:visible;transform:translateX(-50%) scale(1)}
.toast.ok{border-color:rgba(16,163,127,.5);color:var(--primary)}
.toast.err{border-color:rgba(239,68,68,.4);color:var(--error)}
.toast.info{border-color:rgba(59,130,246,.4);color:#60A5FA}
.toast.coin{border-color:rgba(245,158,11,.5);color:var(--coin)}

/* ====== VIDEO TINDER PLAYER ====== */
.video-swipe-area{
  position:relative;width:100%;flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;touch-action:pan-y;
  min-height:0;
}

/* Stack de cards — tamanho Reels 9:16 */
.video-swipe-area{
  position:relative;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  overflow:hidden;
  flex-shrink:0;
  /* altura = largura * 16/9, limitada a 70vh */
  padding:12px 12px 0;
}
.vcard-stack{
  position:relative;
  width:100%;
  max-width:320px;
  /* aspect-ratio 9:16 via padding-bottom */
  aspect-ratio:9/16;
  max-height:min(72vh, 560px);
  margin:0 auto;
}
.vcard{
  position:absolute;inset:0;
  background:#000;
  border-radius:16px;
  overflow:hidden;
  cursor:grab;
  user-select:none;
  box-shadow:0 12px 40px rgba(0,0,0,.7);
  transition:transform .08s ease, box-shadow .08s ease;
  will-change:transform;
  touch-action:none;
}
.vcard:active{cursor:grabbing}
.vcard.behind1{
  transform:scale(.94) translateY(14px);
  z-index:1;
  filter:brightness(.6);
  pointer-events:none;
}
.vcard.behind2{
  transform:scale(.88) translateY(28px);
  z-index:0;
  filter:brightness(.35);
  pointer-events:none;
}
.vcard.front{z-index:2}
.vcard.swiping-right{border:3px solid #10A37F; box-shadow:0 0 30px rgba(16,163,127,.5)}
.vcard.swiping-left{ border:3px solid #EF4444; box-shadow:0 0 30px rgba(239,68,68,.4)}
.vcard.fly-right{
  transform:translateX(120%) rotate(20deg)!important;
  transition:transform .4s cubic-bezier(.25,.46,.45,.94)!important;
  opacity:0;
}
.vcard.fly-left{
  transform:translateX(-120%) rotate(-20deg)!important;
  transition:transform .4s cubic-bezier(.25,.46,.45,.94)!important;
  opacity:0;
}

/* Vídeo dentro do card */
.vcard video, .vcard iframe{
  width:100%;height:100%;
  object-fit:cover;
  border-radius:20px;
  display:block;pointer-events:none;
}
.vcard iframe{pointer-events:none}

/* Overlay de info no bottom do card */
.vcard-info{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(transparent,rgba(0,0,0,.85) 60%);
  padding:40px 16px 16px;
  border-radius:0 0 20px 20px;
  pointer-events:none;
}
.vcard-title{font-size:14px;font-weight:700;color:white;margin-bottom:4px;line-height:1.3}
.vcard-badge{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(255,255,255,.15);backdrop-filter:blur(8px);
  padding:3px 10px;border-radius:12px;font-size:11px;color:rgba(255,255,255,.85);
}

/* Swipe hint badges */
.swipe-hint-right,.swipe-hint-left{
  position:absolute;top:20px;
  padding:8px 18px;border-radius:12px;font-size:16px;font-weight:800;
  opacity:0;transition:opacity .15s;z-index:10;pointer-events:none;
  letter-spacing:1px;
}
.swipe-hint-right{
  right:16px;
  background:rgba(16,163,127,.9);color:white;
  border:2px solid #10A37F;
  transform:rotate(12deg);
}
.swipe-hint-left{
  left:16px;
  background:rgba(239,68,68,.9);color:white;
  border:2px solid #ef4444;
  transform:rotate(-12deg);
}

/* Botões de ação swipe */
.swipe-actions{
  display:flex;align-items:center;justify-content:center;gap:20px;
  padding:14px 0 6px;flex-shrink:0;
}
.swipe-btn{
  width:52px;height:52px;border-radius:50%;border:2px solid var(--border);
  background:var(--surface);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:.2s;font-size:20px;
}
.swipe-btn:active{transform:scale(.9)}
.swipe-btn.skip{border-color:rgba(239,68,68,.4)}
.swipe-btn.skip:active{background:rgba(239,68,68,.15)}
.swipe-btn.like{border-color:rgba(16,163,127,.4);width:64px;height:64px;font-size:24px}
.swipe-btn.like:active{background:rgba(16,163,127,.15)}
.swipe-btn.info{border-color:rgba(59,130,246,.3)}
.swipe-btn.info:active{background:rgba(59,130,246,.1)}

/* Barra de progresso dos 15s */
.vid-timer-bar{
  position:absolute;top:0;left:0;right:0;height:4px;z-index:20;
  background:rgba(255,255,255,.15);border-radius:0;overflow:hidden;
  border-radius:20px 20px 0 0;
}
.vid-timer-fill{
  height:100%;
  background:linear-gradient(90deg,#10A37F,#3B82F6);
  width:0%;
  border-radius:20px 20px 0 0;
  transition:none;
}

/* Anel de countdown no card */
.vid-countdown-ring{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:72px;height:72px;
  z-index:15;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
}
.vid-countdown-ring svg{
  position:absolute;inset:0;width:72px;height:72px;
  transform:rotate(-90deg);
}
.vid-countdown-ring circle{
  fill:none;stroke:rgba(255,255,255,.2);stroke-width:3;
}
.vid-countdown-ring circle.prog{
  stroke:#10A37F;stroke-width:3;
  stroke-dasharray:201.06;
  stroke-dashoffset:201.06;
  stroke-linecap:round;
  transition:stroke-dashoffset .1s linear;
}
.vid-countdown-num{
  font-size:22px;font-weight:800;color:white;
  text-shadow:0 2px 8px rgba(0,0,0,.8);
  position:relative;z-index:1;
}
.vid-countdown-ring.done circle.prog{stroke:#F59E0B}
.vid-countdown-ring.done .vid-countdown-num{color:#F59E0B}

/* Overlay "Moedas Ganhas" */
.vid-coin-pop{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(0,0,0,.75);
  border-radius:20px;
  z-index:30;
  opacity:0;pointer-events:none;
  transition:.3s;
}
.vid-coin-pop.show{opacity:1;pointer-events:auto}
.vcp-emoji{font-size:52px;animation:popBounce .4s ease}
.vcp-txt{font-size:20px;font-weight:800;color:#F59E0B;margin-top:8px}
.vcp-sub{font-size:13px;color:rgba(255,255,255,.7);margin-top:4px}
.vcp-actions{display:flex;gap:10px;margin-top:16px}
.vcp-btn{
  padding:10px 20px;border:none;border-radius:20px;
  font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;
}
.vcp-btn.next{background:#10A37F;color:white}
.vcp-btn.stay{background:rgba(255,255,255,.1);color:white;border:1px solid rgba(255,255,255,.2)}
@keyframes popBounce{0%{transform:scale(0)}60%{transform:scale(1.2)}100%{transform:scale(1)}}

/* Empty state dos vídeos */
.vid-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:300px;gap:12px;color:var(--text2);text-align:center;padding:20px;
}
.vid-empty-icon{font-size:52px;opacity:.4}
.vid-empty h3{font-size:15px;font-weight:600;color:var(--text)}
.vid-empty p{font-size:12px;line-height:1.6}

/* Separador entre video player e stats na tela Ganhar */
.ganhar-divider{
  height:1px;background:var(--border);margin:0;flex-shrink:0;
}

/* ====== PRO PLAN ====== */
.pro-banner {
  background: linear-gradient(135deg, #7C3AED, #4F46E5, #2563EB);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  border: 1px solid rgba(124,58,237,.4);
}
.pro-banner:active { transform: scale(.98); }
.pro-banner::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 50%, rgba(255,255,255,.08), transparent 60%);
}
.pro-banner-top {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.pro-crown {
  font-size: 26px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
}
.pro-banner-title {
  font-size: 16px; font-weight: 800; color: white; letter-spacing: -.3px;
}
.pro-banner-sub {
  font-size: 11px; color: rgba(255,255,255,.7); margin-top: 1px;
}
.pro-perks {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.pro-perk-tag {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 20px; padding: 4px 10px;
  font-size: 11px; color: rgba(255,255,255,.9); font-weight: 600;
}
.pro-cta {
  margin-top: 12px;
  display: flex; align-items: center; justify-content: space-between;
}
.pro-cta-price {
  font-size: 12px; color: rgba(255,255,255,.7);
}
.pro-cta-btn {
  background: white; color: #4F46E5;
  border: none; border-radius: 20px;
  padding: 8px 18px; font-size: 13px; font-weight: 800;
  cursor: pointer; font-family: inherit;
  transition: .2s;
}
.pro-cta-btn:active { transform: scale(.96); }

/* Badge PRO no avatar/header */
.pro-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(135deg, #7C3AED, #4F46E5);
  border-radius: 12px; padding: 2px 8px;
  font-size: 10px; font-weight: 800; color: white;
  letter-spacing: .5px; margin-left: 6px;
  box-shadow: 0 2px 8px rgba(124,58,237,.4);
}

/* PRO overlay — mesmo estilo do depósito */
.pro-plans-grid {
  display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px;
}
.pro-plan-card {
  background: var(--surface2);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  cursor: pointer;
  transition: .2s;
  position: relative;
  overflow: hidden;
}
.pro-plan-card:active { transform: scale(.98); }
.pro-plan-card.selected {
  border-color: #7C3AED;
  background: rgba(124,58,237,.08);
}
.pro-plan-card.popular {
  border-color: rgba(124,58,237,.5);
}
.pro-plan-badge {
  position: absolute; top: 12px; right: 12px;
  background: linear-gradient(135deg,#7C3AED,#4F46E5);
  color: white; font-size: 10px; font-weight: 800;
  padding: 3px 10px; border-radius: 20px; letter-spacing: .5px;
}
.pro-plan-days {
  font-size: 22px; font-weight: 800; color: white; letter-spacing: -.5px;
}
.pro-plan-price {
  font-size: 28px; font-weight: 800;
  background: linear-gradient(135deg,#A78BFA,#60A5FA);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  margin: 4px 0;
}
.pro-plan-day-price {
  font-size: 11px; color: var(--text2);
}
.pro-plan-perks {
  margin-top: 10px; display: flex; flex-direction: column; gap: 4px;
}
.pro-plan-perk {
  font-size: 12px; color: var(--text2); display: flex; align-items: center; gap: 6px;
}
.pro-plan-perk::before { content: '✓'; color: #7C3AED; font-weight: 800; }

.pro-confirm-btn {
  width: 100%; padding: 15px;
  background: linear-gradient(135deg, #7C3AED, #4F46E5, #2563EB);
  color: white; border: none; border-radius: var(--radius);
  font-size: 15px; font-weight: 800; cursor: pointer; font-family: inherit;
  letter-spacing: .3px; transition: .2s;
  box-shadow: 0 4px 20px rgba(124,58,237,.4);
}
.pro-confirm-btn:disabled { opacity: .5; cursor: not-allowed; }
.pro-confirm-btn:active:not(:disabled) { transform: scale(.98); }

/* PRO QR step */
.pro-qr-wrap {
  text-align: center;
}
.pro-qr-wrap img {
  width: 180px; height: 180px; border-radius: 12px;
  border: 3px solid rgba(124,58,237,.4); margin: 0 auto 12px;
  display: block;
}
.pro-active-card {
  background: linear-gradient(135deg,rgba(124,58,237,.15),rgba(79,70,229,.1));
  border: 1px solid rgba(124,58,237,.3);
  border-radius: var(--radius); padding: 20px; text-align: center;
}

/* ====== MINI-JOGOS ====== */
/* FAB container flutuante */
.games-fab-wrap {
  position:absolute; bottom:80px; right:16px; z-index:50;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}
.games-fab-main {
  width:54px; height:54px; border-radius:50%;
  background:linear-gradient(135deg,#F59E0B,#F97316);
  border:none; color:#fff; font-size:24px; cursor:pointer;
  box-shadow:0 4px 20px rgba(249,115,22,.5);
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s, box-shadow .2s;
  position:relative; z-index:2;
}
.games-fab-main:active { transform:scale(.92); }
.games-fab-main.open { transform:rotate(45deg); }
.games-fab-items {
  display:flex; flex-direction:column; align-items:flex-end; gap:8px;
  overflow:hidden; max-height:0; transition:max-height .35s cubic-bezier(.4,0,.2,1), opacity .3s;
  opacity:0; pointer-events:none;
}
.games-fab-items.open { max-height:300px; opacity:1; pointer-events:auto; }
.games-fab-item {
  display:flex; align-items:center; gap:10px; cursor:pointer;
  animation:fabItemIn .25s ease forwards;
}
.games-fab-item-label {
  background:rgba(30,30,30,.95); border:1px solid var(--border);
  border-radius:20px; padding:7px 14px; font-size:13px; font-weight:600;
  color:var(--text); white-space:nowrap; backdrop-filter:blur(10px);
  box-shadow:0 2px 12px rgba(0,0,0,.4);
}
.games-fab-item-btn {
  width:46px; height:46px; border-radius:50%; border:none; cursor:pointer;
  font-size:20px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 12px rgba(0,0,0,.4); transition:transform .15s;
  flex-shrink:0;
}
.games-fab-item-btn:active { transform:scale(.88); }
.fab-roulette { background:linear-gradient(135deg,#8B5CF6,#6D28D9); }
.fab-scratch   { background:linear-gradient(135deg,#10B981,#059669); }
.fab-quiz      { background:linear-gradient(135deg,#3B82F6,#2563EB); }
@keyframes fabItemIn {
  from { opacity:0; transform:translateX(20px); }
  to   { opacity:1; transform:translateX(0); }
}

/* ────── MODAL GENÉRICO DE JOGO ────── */
.game-modal-overlay {
  position:fixed; inset:0; z-index:900;
  background:rgba(0,0,0,.85); backdrop-filter:blur(8px);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.game-modal-overlay.open { opacity:1; pointer-events:auto; }
.game-modal {
  background:var(--surface); border-radius:24px 24px 0 0;
  width:100%; max-width:480px; padding:24px 20px 36px;
  transform:translateY(100%); transition:transform .35s cubic-bezier(.4,0,.2,1);
  max-height:92vh; overflow-y:auto;
}
.game-modal-overlay.open .game-modal { transform:translateY(0); }
.gm-handle { width:40px; height:4px; background:var(--border); border-radius:2px; margin:0 auto 20px; }
.gm-title  { font-size:18px; font-weight:800; text-align:center; margin-bottom:4px; }
.gm-sub    { font-size:13px; color:var(--text2); text-align:center; margin-bottom:20px; }
.gm-coins-badge {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.3);
  border-radius:20px; padding:6px 14px; font-size:13px; font-weight:700; color:#F59E0B;
  margin:0 auto 20px; display:flex; justify-content:center; width:fit-content; margin:0 auto 20px;
}
.gm-limit-bar {
  background:var(--surface2); border-radius:8px; padding:10px 14px;
  display:flex; align-items:center; justify-content:space-between;
  font-size:12px; color:var(--text2); margin-bottom:16px;
}
.gm-limit-bar strong { color:var(--text); }
.gm-play-btn {
  width:100%; padding:15px; border:none; border-radius:14px;
  font-size:16px; font-weight:800; font-family:inherit; cursor:pointer;
  transition:all .2s; margin-top:16px;
}
.gm-play-btn:disabled { opacity:.4; cursor:not-allowed; }
.gm-result {
  text-align:center; padding:20px; border-radius:14px;
  background:var(--surface2); margin-top:16px; display:none;
}
.gm-result.show { display:block; animation:fadeIn .3s; }
.gm-result-emoji { font-size:52px; margin-bottom:8px; }
.gm-result-title { font-size:20px; font-weight:800; margin-bottom:4px; }
.gm-result-sub   { font-size:13px; color:var(--text2); }

/* ────── ROLETA ────── */
.roulette-wrap {
  display:flex; align-items:center; justify-content:center;
  position:relative; margin:20px auto; width:260px; height:260px;
}
.roulette-canvas { border-radius:50%; box-shadow:0 8px 32px rgba(0,0,0,.6); }
.roulette-pointer {
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  width:0; height:0;
  border-left:12px solid transparent;
  border-right:12px solid transparent;
  border-top:24px solid #F59E0B;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));
  z-index:5;
}
.roulette-center {
  position:absolute; width:36px; height:36px; border-radius:50%;
  background:var(--surface); border:3px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; z-index:6;
}
.roulette-spinning { animation:spin 3s cubic-bezier(.17,.67,.12,1) forwards; }
@keyframes spin {
  from { transform:rotate(0deg); }
  to   { transform:rotate(var(--spin-deg, 1800deg)); }
}

/* ────── RASPAR CARTÃO ────── */
.scratch-wrap { position:relative; margin:20px auto; width:280px; height:160px; }
.scratch-canvas {
  position:absolute; top:0; left:0; width:100%; height:100%;
  border-radius:14px; cursor:crosshair; touch-action:none; z-index:2;
}
.scratch-base {
  position:absolute; top:0; left:0; width:100%; height:100%;
  background:var(--surface2); border-radius:14px; border:1px solid var(--border);
  display:grid; grid-template-columns:repeat(3,1fr);
  align-items:center; justify-items:center; z-index:1;
}
.scratch-cell {
  font-size:22px; font-weight:800; color:var(--text);
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.scratch-cell span { font-size:10px; color:var(--text2); }
.scratch-pct-bar {
  margin-top:10px; height:4px; background:var(--border); border-radius:2px; overflow:hidden;
}
.scratch-pct-fill { height:100%; background:var(--primary); width:0%; transition:width .1s; border-radius:2px; }
.scratch-hint { font-size:12px; color:var(--text2); text-align:center; margin-top:8px; }

/* ────── QUIZ ────── */
.quiz-question-txt {
  font-size:16px; font-weight:700; line-height:1.5; text-align:center;
  padding:16px; background:var(--surface2); border-radius:12px; margin-bottom:16px;
}
.quiz-options { display:flex; flex-direction:column; gap:10px; }
.quiz-opt {
  width:100%; padding:14px 16px; border:1.5px solid var(--border);
  background:var(--surface2); border-radius:12px; color:var(--text);
  font-size:14px; font-weight:600; font-family:inherit; cursor:pointer;
  text-align:left; transition:all .2s; display:flex; align-items:center; gap:12px;
}
.quiz-opt:hover { border-color:var(--accent); background:rgba(59,130,246,.08); }
.quiz-opt.correct { border-color:#10B981; background:rgba(16,185,129,.1); color:#10B981; }
.quiz-opt.wrong   { border-color:#EF4444; background:rgba(239,68,68,.1); color:#EF4444; }
.quiz-opt:disabled { cursor:not-allowed; }
.quiz-opt-key {
  width:28px; height:28px; border-radius:50%; background:var(--surface3);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; flex-shrink:0; text-transform:uppercase;
}
.quiz-timer-bar { height:4px; background:var(--border); border-radius:2px; margin-bottom:16px; overflow:hidden; }
.quiz-timer-fill { height:100%; background:var(--accent); border-radius:2px; transition:width .1s linear; }

/* ====== PIX ACTIVE BANNER ====== */
#pixActiveBanner {
  display:none;
  animation: slideDown .3s ease;
}
#pixActiveBanner.show {
  display:flex !important;
}
@keyframes slideDown {
  from{transform:translateY(-100%);opacity:0}
  to{transform:translateY(0);opacity:1}
}

/* ====== RESPONSIVE ====== */
@media(max-width:380px){
  .rate-chip{display:none}
  .plats-grid{grid-template-columns:repeat(4,1fr)}
  .vcard-stack{height:360px}
}


.brand-live {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #4ade80;
  margin-bottom: 4px;
  font-weight: 500;
}

.live-dot {
  width: 6px;
  height: 6px;
  background: #4ade80;
  border-radius: 50%;
  box-shadow: 0 0 8px #4ade80;
}

/* 🔥 EFEITO RAIO / BLUR */
.live-text {
  transition: all 0.2s ease;
}

.live-blur {
  filter: blur(4px);
  opacity: 0.2;
  transform: scale(1.1);
}



/* =========================================================
   HEADER RESPONSIVO TOTAL
========================================================= */

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  gap: 10px;
  flex-wrap: nowrap;
  width: 100%;
  box-sizing: border-box;
}

/* LEFT */
.h-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Logo */
.logo-mark {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.logo-mark svg {
  width: 100%;
  height: 100%;
}

/* Brand */
.brand-name {
  font-size: clamp(12px, 3.5vw, 16px);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.brand-live {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: clamp(9px, 2.5vw, 11px);
  color: #4ade80;
  white-space: nowrap;
}

.live-dot {
  width: 6px;
  height: 6px;
  background: #4ade80;
  border-radius: 50%;
  box-shadow: 0 0 6px #4ade80;
}

/* RIGHT */
.h-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Rate chip */
.rate-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 8px;
  font-size: clamp(9px, 2.5vw, 11px);
  background: rgba(255,255,255,0.05);
  white-space: nowrap;
}

/* Balance button */
.bal-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 8px;
  font-size: clamp(10px, 3vw, 12px);
  white-space: nowrap;
}

/* Avatar */
.avatar-btn {
  width: clamp(28px, 8vw, 36px);
  height: clamp(28px, 8vw, 36px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* PRO badge */
#headerProBadge {
  font-size: clamp(8px, 2.5vw, 10px);
  padding: 3px 8px;
  white-space: nowrap;
}

/* SVGs dentro */
.header svg {
  width: clamp(14px, 4vw, 18px);
  height: clamp(14px, 4vw, 18px);
}

/* =========================================================
   MOBILE EXTRA PEQUENO (<= 360px)
========================================================= */
@media (max-width: 360px) {

  .brand-name {
    display: none; /* some nome pra caber */
  }

  .rate-chip span {
    display: none; /* mostra só ícone */
  }

  #balDisplay {
    display: none; /* esconde valor */
  }

  #headerProBadge {
    display: none !important;
  }
}

/* =========================================================
   MOBILE MÉDIO (<= 480px)
========================================================= */
@media (max-width: 480px) {

  .header {
    padding: 8px;
    gap: 6px;
  }

  .h-right {
    gap: 4px;
  }

  .rate-chip {
    padding: 3px 5px;
  }

  .bal-btn {
    padding: 3px 5px;
  }
}

.logo-mark {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
}

.logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* DESKTOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOP */
/* ============================= */
/* ===== CHATGPT DESKTOP UI ==== */
/* ============================= */

@media (min-width: 1024px){

  /* Fundo mais clean estilo ChatGPT */
  body{
    background: #0D0D0D;
  }

  /* APP vira layout horizontal */
  .app{
    max-width: 100%;
    margin: 0;
    height: 100vh;
    display: grid;
    grid-template-columns: 260px 1fr;
    grid-template-rows: var(--header-h) 1fr;
  }

  /* HEADER no topo ocupando tudo */
  .header{
    grid-column: 1 / -1;
    grid-row: 1;
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 0 20px;
  }

  /* SIDEBAR ESQUERDA */
  .bottom-nav{
    grid-column: 1;
    grid-row: 2;

    height: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;

    padding: 14px;
    gap: 6px;

    border-right: 1px solid var(--border);
    border-top: none;
    background: #0A0A0A;
  }

  /* BOTÕES DO MENU */
  .nav-icon-btn{
    flex: none;
    height: 44px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 0 12px;
    border-radius: 10px;
  }

  .nav-icon-btn span{
    font-size: 13px;
  }

  .nav-icon-btn.active{
    background: rgba(255,255,255,0.05);
  }

  /* FAB vira botão normal (tipo "New Chat") */
  .nav-fab-wrap{
    order: -1;
    margin-bottom: 10px;
  }

  .nav-fab{
    width: 100%;
    height: 44px;
    border-radius: 10px;
    margin: 0;
    box-shadow: none;
  }

  /* CONTEÚDO PRINCIPAL */
  .main{
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* SCREENS CENTRALIZADAS */
  .screen{
    align-items: center;
  }

  /* CONTEÚDO INTERNO MAIS LARGO */
  .home-scroll,
  .orders-scroll,
  .acct-scroll,
  .ad-scroll{
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 32px 60px;
  }

  /* CHAT ESTILO CHATGPT */
  .chat-messages{
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
  }

  .chat-input-bar{
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
  }

  /* INPUT MAIS BONITO */
  .input-wrap{
    border-radius: 14px;
  }

  /* CARDS MAIS RESPIRADOS */
  .balance-hero{
    padding: 26px;
  }

  /* GRID MAIS ABERTO */
  .plats-grid{
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
  }

  /* MODAIS CENTRALIZADOS */
  .overlay{
    align-items: center;
  }

  .sheet{
    border-radius: 20px;
    max-width: 520px;
  }

}
@media (min-width: 1024px){

  body{
    background: #0D0D0D;
  }

  .app{
    max-width: 100%;
    margin: 0;
    height: 100vh;
    display: grid;
    grid-template-columns: 280px 1fr; /* levemente maior */
    grid-template-rows: var(--header-h) 1fr;
  }

  .header{
    grid-column: 1 / -1;
    grid-row: 1;
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 0 28px; /* mais presença */
  }

  .bottom-nav{
    grid-column: 1;
    grid-row: 2;

    height: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;

    padding: 16px;
    gap: 8px;

    border-right: 1px solid var(--border);
    border-top: none;
    background: #0A0A0A;
  }

  /* BOTÕES MAIORES */
  .nav-icon-btn{
    flex: none;
    height: 52px; /* maior */
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    padding: 0 16px;
    border-radius: 12px;
  }

  .nav-icon-btn span{
    font-size: 14px; /* maior */
  }

  .nav-icon-btn.active{
    background: rgba(255,255,255,0.06);
  }

  .nav-fab-wrap{
    order: -1;
    margin-bottom: 12px;
  }

  .nav-fab{
    width: 100%;
    height: 52px; /* maior */
    border-radius: 12px;
    margin: 0;
    box-shadow: none;
    font-size: 14px;
  }

  .main{
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .screen{
    align-items: center;
  }

  /* MAIS LARGO (SEM EXAGERAR PRA NÃO QUEBRAR) */
  .home-scroll,
  .orders-scroll,
  .acct-scroll,
  .ad-scroll{
    width: 100%;
    max-width: 1250px; /* antes 1100 */
    margin: 0 auto;
    padding: 28px 36px 70px; /* mais cheio */
  }

  /* CHAT MAIS LARGO */
  .chat-messages{
    width: 100%;
    max-width: 1050px; /* antes 900 */
    margin: 0 auto;
  }

  .chat-input-bar{
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
  }

  .input-wrap{
    border-radius: 16px;
  }

  /* CARDS MAIORES */
  .balance-hero{
    padding: 30px;
  }

  /* GRID MAIS PREENCHIDO */
  .plats-grid{
    grid-template-columns: repeat(7, 1fr); /* antes 6 */
    gap: 14px;
  }

  .overlay{
    align-items: center;
  }

  .sheet{
    border-radius: 22px;
    max-width: 560px;
  }

}
/* DESKTOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOP */
.retry-box {
  margin-top: 10px;
}

.retry-btn {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #2a2a2a;
  cursor: pointer;

  background: #2f2f2f;
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;

  transition: all 0.2s ease;
}

/* hover igual ChatGPT */
.retry-btn:hover {
  background: #3a3a3a;
  border-color: #3a3a3a;
}

/* clique */
.retry-btn:active {
  transform: scale(0.98);
}




.crown-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.4));
}

.crown-big {
  width: 52px;
  height: 52px;
  object-fit: contain;
}
/* ícone normal */
.crown-md {
  width: 42px;
  height: 42px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.4));
}

/* coroa gigante de fundo */
.crown-bg {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  opacity: 0.06;
  pointer-events: none;
}



















/* USER normal */
.user-avatar{
  width:26px;
  height:26px;
  border-radius:50%;
  object-fit:cover;
}

/* WRAPPER DO BOT (ESSENCIAL) */
.bot-avatar-wrap{
  width:34px;
  height:34px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  flex-shrink:0;
}

/* 🔥 ANEL GIRANDO */
.bot-avatar-wrap::before{
  content:"";
  position:absolute;

  /* faz o anel ficar em volta */
  width:130%;
  height:130%;
  top:-15%;
  left:-15%;

  border-radius:50%;

  background:conic-gradient(
    #833AB4,
    #C13584,
    #E1306C,
    #FD1D1D,
    #F56040,
    #FCAF45,
    #FFDC80,
    #833AB4
  );

  animation:spinAvatar 3s linear infinite;

  z-index:0;
  filter:blur(6px);
  opacity:0.9;
  
}



/* IMAGEM DO BOT */
.bot-avatar-img{
  width:60px;
  height:60px;
  border-radius:50%;
  object-fit:cover;
  position:relative;
  z-index:2;
}

/* ANIMAÇÃO */
@keyframes spinAvatar{
  0%{ transform:rotate(0deg); }
  100%{ transform:rotate(360deg); }
}

.msg-av{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:34px; /* garante espaço fixo */
}


.progress-wrapper {
  margin-top: 8px;
}

/* texto pessoas */
.people-buying {
  font-size: 10px;
  opacity: 0.8;
  margin-bottom: 3px;
}

/* barra */
.progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 10px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: #E1306C;
  transition: width 0.5s linear;
}

/* tempo */
.time-left {
  font-size: 11px;
  margin-top: 3px;
}

/* animações */
.service-card {
  transition: all 0.3s ease;
}

.fade-out {
  opacity: 0;
  transform: translateY(-10px);
}

.fade-in {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInAnim 0.3s forwards;
}

@keyframes fadeInAnim {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}