/* =========================================================
   🧱 CARD
========================================================= */

.card{
  background:
    radial-gradient(circle at 10% 0%, rgba(99,102,241,.10), transparent 60%),
    rgba(255,255,255,.82);

  margin:20px;
  padding:25px;
  border-radius:22px;

  border:1px solid rgba(226,232,240,.85);

  box-shadow:
    0 20px 60px rgba(15,23,42,.10),
    0 4px 18px rgba(99,102,241,.08);

  backdrop-filter:blur(16px);
}

/* =========================================================
   📊 XP BAR
========================================================= */

.xp-bar{
  width:100%;
  height:14px;
  background:linear-gradient(180deg,#dfe5ef 0%,#cfd6e2 100%);
  border-radius:999px;
  overflow:hidden;
  box-shadow:
    inset 0 2px 6px rgba(15,23,42,.18),
    inset 0 -1px 0 rgba(255,255,255,.6);
}

.xp-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#4f46e5 0%,#7c3aed 100%);
  box-shadow:
    0 0 10px rgba(99,102,241,.45),
    inset 0 -2px 6px rgba(0,0,0,.25);
  position:relative;
}

.xp-fill::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(to bottom,rgba(255,255,255,.28),transparent 45%);
  pointer-events:none;
}

/* =========================================================
   ⚔️ BOTÃO PVP
========================================================= */

.pvp-btn{
  position:relative;
  z-index:1;
  width:100%;
  padding:13px 20px;
  border:none;
  border-radius:14px;

  font-family:'Inter',system-ui;
  font-weight:700;
  font-size:15px;

  color:white;
  background:linear-gradient(90deg,#4f46e5,#7c3aed);

  cursor:pointer;
  box-shadow:0 12px 30px rgba(79,70,229,.35);
  transition:.15s;
  overflow:hidden;
  letter-spacing:.2px;
}

.pvp-btn:hover{
  transform:translateY(-1px) scale(1.01);
  box-shadow:0 18px 38px rgba(79,70,229,.45);
}

/* shine */

.pvp-btn::after{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:60%;
  height:100%;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.35) 50%,transparent 100%);
  transform:skewX(-20deg);
  pointer-events:none;
  opacity:0;
}

.pvp-btn.shine::after{
  animation:shineSweep 2.8s ease;
}

@keyframes shineSweep{
  0%{left:-120%;opacity:0;}
  10%{opacity:1;}
  60%{left:140%;opacity:0;}
  100%{left:140%;opacity:0;}
}

/* ghost */

.btn-ghost{
  background:#f1f5f9;
  color:#475569;
  border:1px solid #e2e8f0;
  border-radius:14px;
  font-weight:800;
}

/* locked state */

.pvp-btn.locked{
  opacity:.85;
  filter:saturate(.7);
  position:relative;
}

.pvp-btn.locked:hover{
  transform:translateY(-1px);
  filter:saturate(.9);
}

.lock-icon{
  margin-left:6px;
  font-size:12px;
  opacity:.9;
}

/* =========================================================
   🔔 BADGE BASE
========================================================= */

.badge{
  position:absolute;
  top:-6px;
  right:-6px;

  min-width:18px;
  height:18px;
  padding:0 6px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:10px;
  font-weight:800;
  color:white;

  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  border-radius:999px;

  box-shadow:
    0 6px 14px rgba(99,102,241,.45),
    0 0 0 2px rgba(255,255,255,.35) inset;

  letter-spacing:.2px;
  backdrop-filter:blur(4px);
}

/* =========================================================
   👥 FRIENDS BADGE
========================================================= */

.friends-badge{
  position:absolute;
  top:-8px;
  right:-8px;

  min-width:20px;
  height:20px;
  padding:0 6px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  font-size:11px;
  font-weight:900;
  line-height:1;

  color:#ffffff;
  background:linear-gradient(135deg,#ef4444,#f97316);

  border-radius:999px;
  border:2px solid rgba(2,6,23,.9);

  box-shadow:
    0 0 0 2px rgba(239,68,68,.15),
    0 4px 10px rgba(0,0,0,.35),
    0 0 12px rgba(239,68,68,.45);

  z-index:50;

  transform:scale(.9);
  opacity:0;

  transition:
    transform .18s ease,
    opacity .18s ease,
    box-shadow .18s ease;
}

.friends-badge.show{
  transform:scale(1);
  opacity:1;
}

/* pulse */

@keyframes badgePulse{
  0%{box-shadow:0 0 0 0 rgba(239,68,68,.6);}
  70%{box-shadow:0 0 0 6px rgba(239,68,68,0);}
  100%{box-shadow:0 0 0 0 rgba(239,68,68,0);}
}

.friends-badge.pulse{
  animation:badgePulse 1.6s infinite;
}

/* =========================================================
   📊 PROGRESS BAR
========================================================= */

.progress-bar{
  width:100%;
  height:12px;
  background:#e2e8f0;
  border-radius:999px;
  overflow:hidden;
  position:relative;
}

.progress-fill{
  height:100%;
  background:linear-gradient(90deg,#6366f1,#8b5cf6);
  border-radius:inherit;
  transition:width .35s ease;
}

/* =========================================================
   🏷️ ACCOUNT BADGE
========================================================= */

.account-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.4px;
  margin-left:8px;
  width:fit-content;
  white-space:nowrap;
  transition:all .25s ease;
}

.account-badge.free{
  background:#334155;
  color:#cbd5e1;
  border:1px solid rgba(148,163,184,.25);
}

.account-badge.premium{
  background:linear-gradient(90deg,#f59e0b,#fbbf24);
  color:#1f2937;
  border:1px solid rgba(251,191,36,.55);
  box-shadow:0 0 12px rgba(251,191,36,.35);
  position:relative;
}

.account-badge.premium::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:999px;
  background:linear-gradient(90deg,#f59e0b,#fbbf24);
  opacity:.25;
  filter:blur(6px);
  z-index:-1;
}

.daily-counter{
  margin-top:6px;
  font-size:12px;
  font-weight:700;
  color:#94a3b8;
}

/* =========================================================
   🧭 DASHBOARD ACTION BUTTONS
========================================================= */

.dash-actions{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-bottom:18px;
}

.dash-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  padding:12px 14px;
  border-radius:14px;

  background:linear-gradient(180deg,#ffffff,#f8fafc);
  border:1px solid #e2e8f0;

  font-weight:800;
  font-size:14px;
  color:#0f172a;

  cursor:pointer;
  /* Mobile: menos atraso de toque; sem zoom duplo-toque no botão */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:all .15s ease;

  box-shadow:
    0 6px 18px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.7);
}

.dash-btn:hover{
  transform:translateY(-1px);
  border-color:#6366f1;
  box-shadow:0 12px 26px rgba(99,102,241,.18);
}

.referral-cta-btn{
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  gap: 3px;
  border-color: rgba(245, 158, 11, 0.38);
  background: linear-gradient(135deg, #fff7ed, #fffbeb);
  box-shadow:
    0 10px 24px rgba(245, 158, 11, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.referral-cta-btn::after{
  content: "HOT";
  position: absolute;
  top: -8px;
  right: -6px;
  font-size: 10px;
  font-weight: 900;
  color: #ffffff;
  background: linear-gradient(135deg, #ef4444, #f97316);
  border-radius: 999px;
  padding: 3px 7px;
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.28);
}

.referral-cta-main{
  font-size: 15px;
  font-weight: 900;
  color: #9a3412;
}

.referral-cta-sub{
  font-size: 11px;
  font-weight: 700;
  color: #7c2d12;
  opacity: .86;
}

@keyframes referralPulseGlow {
  0% {
    transform: translateY(0) scale(1);
    box-shadow:
      0 10px 24px rgba(245, 158, 11, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.78);
  }
  50% {
    transform: translateY(-1px) scale(1.02);
    box-shadow:
      0 16px 34px rgba(245, 158, 11, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.88);
  }
  100% {
    transform: translateY(0) scale(1);
    box-shadow:
      0 10px 24px rgba(245, 158, 11, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.78);
  }
}

.referral-cta-btn.pulse-once{
  animation: referralPulseGlow 900ms ease-in-out 3;
}

.install-banner{
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  background:#6366f1;
  color:white;
  padding:10px 12px 10px 16px;
  border-radius:10px;
  font-weight:600;
  box-shadow:0 6px 20px rgba(0,0,0,0.25);
  cursor:pointer;
  z-index:9999;
  display:none;
  align-items:center;
  gap:10px;
  max-width:min(100vw - 24px, 420px);
}

.install-banner-text{
  flex:1;
  text-align:left;
  font-size:14px;
  line-height:1.35;
}

.install-banner-close{
  flex-shrink:0;
  width:32px;
  height:32px;
  border:none;
  border-radius:8px;
  background:rgba(255,255,255,.2);
  color:#fff;
  font-size:16px;
  line-height:1;
  cursor:pointer;
}

.install-banner-close:hover{
  background:rgba(255,255,255,.3);
}

.install-banner-dash{
  position:flex;
  top:14px;
  right:14px;
  background:#6366f1;
  color:white;
  padding:10px 16px;
  border-radius:8px;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,0.3);
  z-index:9999;
  
}

/* ========================================
   🔄 UPDATE BANNER — DISCRETO PREMIUM
======================================== */

.update-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background: linear-gradient(90deg,#6366f1,#4f46e5);
  color: white;

  padding: 10px 16px;

  font-size: 14px;
  font-weight: 600;

  box-shadow: 0 4px 18px rgba(0,0,0,0.25);

  z-index: 999999;

  transform: translateY(-100%);
  animation: slideBanner 0.35s ease forwards;
}

.update-banner button {

  background: white;
  color: #4f46e5;

  border: none;
  border-radius: 8px;

  padding: 6px 12px;

  font-weight: 600;
  cursor: pointer;
}

@keyframes slideBanner {
  to {
    transform: translateY(0);
  }
}

/* ACTION BAR */

.question-actions{
  display:flex;
  gap:8px;
  margin:16px 0;
  flex-wrap:wrap;
  justify-content:center;
}

/* BOTÃO */

.action-btn.action-note{
  position:relative;
}

/* Indica que a questão atual já tem anotação salva */
.note-has-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:20px;
  height:20px;
  padding:0 4px;
  border-radius:999px;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  color:#fff;
  font-size:11px;
  font-weight:800;
  line-height:20px;
  text-align:center;
  box-shadow:0 2px 8px rgba(99,102,241,.45);
  border:2px solid #fff;
  pointer-events:none;
}

.action-btn.action-comments{
  position:relative;
}

.qcomment-count-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:20px;
  height:20px;
  padding:0 5px;
  border-radius:999px;
  background:linear-gradient(135deg,#0ea5e9,#6366f1);
  color:#fff;
  font-size:11px;
  font-weight:800;
  line-height:20px;
  text-align:center;
  box-shadow:0 2px 8px rgba(14,165,233,.4);
  border:2px solid #fff;
  pointer-events:none;
}

.qcomment-card{
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:10px 12px;
  margin-bottom:10px;
  text-align:left;
  background:#fff;
}

.qcomment-card--featured{
  border-color:#a5b4fc;
  background:linear-gradient(180deg,#f5f3ff,#fafafa);
  box-shadow:0 4px 14px rgba(99,102,241,.12);
}

.qcomment-card--objection{
  border-left:4px solid #f97316;
  background:linear-gradient(90deg,#fff7ed,#ffffff);
}

.qcomment-featured-pill{
  display:block;
  font-size:11px;
  font-weight:800;
  color:#4f46e5;
  margin-bottom:6px;
}

.qcomment-pending-pill{
  display:block;
  font-size:11px;
  font-weight:700;
  color:#b45309;
  background:#fffbeb;
  border:1px solid #fde68a;
  border-radius:8px;
  padding:6px 8px;
  margin-bottom:8px;
}

.qcomment-kind-pill{
  display:inline-block;
  font-size:11px;
  font-weight:800;
  margin-left:6px;
  padding:2px 8px;
  border-radius:999px;
}

.qcomment-kind-pill--objection{
  background:#ffedd5;
  color:#c2410c;
}

.qcomment-kind-pill--discussion{
  background:#e0e7ff;
  color:#4338ca;
}

.action-btn{

  display:flex;
  align-items:center;
  gap:6px;

  padding:8px 14px;

  font-size:14px;
  font-weight:600;

  border-radius:10px;

  border:1px solid rgba(0,0,0,0.06);

  background:white;

  box-shadow:
    0 4px 12px rgba(0,0,0,0.05);

  cursor:pointer;

  transition:all .15s ease;
}

/* HOVER */

.action-btn:hover{

  transform:translateY(-1px);

  box-shadow:
    0 6px 16px rgba(0,0,0,0.08);
}

/* PRESS */

.action-btn:active{

  transform:translateY(0);

  box-shadow:
    0 2px 6px rgba(0,0,0,0.08);
}

/* REPORT */

.action-report{

  color:#d97706;
}

/* NOTE */

.action-note{

  color:#6366f1;
}

.smart-notebook {

  margin-top:20px;
  padding:18px;

  background:#ffffff;

  border-radius:18px;
  border:1px solid #e6e8f0;

  box-shadow:0 8px 18px rgba(0,0,0,0.04);

}

.smart-notebook h3 {

  font-size:18px;
  font-weight:600;
  margin-bottom:14px;

}

.notebook-grid{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(120px,1fr));
gap:10px;
margin-top:10px;
}

.smart-notebook button{
white-space:normal;
text-align:center;
padding:10px;
cursor:pointer;
}

.notebook-grid button {

  border-radius:12px;
  border:1px solid #e6e8f0;

  padding:10px;

  background:#f8fafc;

  font-size:14px;

  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;

}

.notebook-grid button:hover {

  background:#eef2ff;

}

.notebook-grid span {

  background:#4f46e5;
  color:white;

  padding:2px 8px;

  border-radius:6px;

  font-size:12px;
}

.notebook-ai-hint{
font-size:12px;
opacity:.7;
margin-top:8px;
line-height:1.3;
max-width:280px;
}

/* INVENTORY GRID FIX */

.inventory-items{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px,1fr));
  gap:16px;
}

.inventory-item{
  width:100%;
}

.global-toast{
 background:#111827;
 color:white;
 padding:12px 16px;
 border-radius:10px;
 font-weight:600;
 box-shadow:0 10px 30px rgba(0,0,0,.35);
 opacity:0;
 transform:translateY(-10px);
 transition:.25s ease;
}

.global-toast.show{
 opacity:1;
 transform:translateY(0);
}

/* tipos */

.global-toast.success{
 background:linear-gradient(135deg,#22c55e,#16a34a);
}

.global-toast.error{
 background:linear-gradient(135deg,#ef4444,#dc2626);
}

.global-toast.info{
 background:linear-gradient(135deg,#6366f1,#4f46e5);
}

/* Avatar picker em modais (cupom / inventário) — mesmo padrão do dashboard */
.avatar-opt-btn{
  border:2px solid #e2e8f0;
  background:#fff;
  border-radius:14px;
  padding:8px 10px;
  font-size:26px;
  line-height:1;
  cursor:pointer;
  transition:.15s ease;
}
.avatar-opt-btn:hover{
  border-color:#6366f1;
  box-shadow:0 4px 14px rgba(99,102,241,.2);
}
.avatar-opt-active{
  border-color:#6366f1;
  background:#eef2ff;
  box-shadow:0 4px 14px rgba(99,102,241,.25);
}
.avatar-opt-emoji{
  display:block;
}