:root{
  --bg:#141414;
  --panel:#1e1e1e;
  --accent:#11c08a;
  --muted:#9aa0a6;
  --gold1:#f6e1c0;
  --gold2:#ead0a7;
  --card-radius:12px;
  font-family: 'Montserrat', sans-serif;
}

/* Reset / base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:#fff;
  -webkit-font-smoothing:antialiased;
  padding-bottom:72px; /* espaço para menu inferior */
  font-family:inherit;
}

/* Topbar */
.topbar{padding:18px 16px 6px 16px}
.topbar-inner{display:flex;justify-content:center;align-items:center;position:relative}
.topbar h1{color:var(--accent);margin:0;font-weight:800;letter-spacing:2px}
.info-btn{position:absolute;right:0;background:none;border:0;color:#b9b9b9;font-size:18px}

/* Page wrap */
.wrap{padding:12px 14px}

/* VIP list container */
.vip-list{display:grid;gap:12px;align-content:start}

/* VIP card */
.vip-card{
  position:relative;
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px;
  border-radius:12px;
  background: linear-gradient(90deg, var(--gold1), var(--gold2));
  box-shadow: 0 6px 12px rgba(0,0,0,0.5);
  color:#3b2a18;
  overflow:hidden;
  cursor:pointer; /* indica interatividade */
  transition:transform .12s ease, box-shadow .12s ease;
  -webkit-tap-highlight-color: transparent;
}

/* hover / active */
.vip-card:hover{ transform: translateY(-3px); box-shadow: 0 10px 18px rgba(0,0,0,0.55);}

/* subtle watermark (pseudo) */
.vip-card::after{
  content:"";
  position:absolute;
  right:-10%;
  bottom:-10%;
  width:60%;
  height:120%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.03), rgba(0,0,0,0.02));
  transform:rotate(-20deg);
  pointer-events:none;
  opacity:0.9;
}

/* left icon */
.vip-card-left{width:48px;height:48px;border-radius:10px;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;color:#b78c52;font-size:20px}
.vip-card-left i{font-size:20px}

/* body */
.vip-card-body{flex:1}
.vip-title{font-weight:700;margin-bottom:8px}
.vip-specs{margin:0;padding-left:16px;color:#5a4c3a;font-size:13px}
.vip-specs li{margin:4px 0;line-height:1.3}

/* locked visual */
.vip-card.locked{opacity:0.95;filter:grayscale(5%);pointer-events:auto}
/* lock overlay (círculo com ícone) */
.lock-overlay{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  background:rgba(0,0,0,0.18);
  width:72px;height:72px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#4b2e1a;font-size:28px;
  box-shadow:0 6px 12px rgba(0,0,0,0.4);
  pointer-events:none; /* não intercepta cliques */
}

/* foco acessível (teclado) */
.vip-card:focus{
  outline: 3px solid rgba(17,192,138,0.18);
  outline-offset: 4px;
}

/* Modal */
.modal{position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,0.6);display:none;align-items:center;justify-content:center;padding:20px;z-index:2000}
.modal[aria-hidden="false"]{display:flex}
.modal-content{background:#1e1e1e;padding:18px;border-radius:12px;width:100%;max-width:420px;color:#ddd;position:relative}
.modal-close{position:absolute;right:12px;top:12px;background:none;border:0;color:#bbb;font-size:18px}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.btn{padding:10px 14px;border-radius:10px;border:0;font-weight:700;cursor:pointer}
.btn.primary{background:#735021;color:white}
.btn.ghost{background:rgba(0,0,0,0.15);color:#4a3f36}

/* Bottombar (garantia de estilos caso styles.css não carregue) */
.bottombar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:62px;
  background:#17252b;
  display:flex;
  border-top:1px solid rgba(255,255,255,0.03);
  z-index:1000; /* garantir sobreposição */
}
.bottombar .tab{
  flex:1;
  text-align:center;
  color:#bbb;
  text-decoration:none;
  padding-top:8px;
  font-size:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.bottombar .tab i{font-size:18px;margin-bottom:4px}
.bottombar .tab.active{color:var(--accent)}

/* Responsivo: centralizar em larguras maiores */
@media(min-width:720px){
  .vip-list{max-width:600px;margin:0 auto}
}