:root{
  --neon-cyan:#00e5ff;
  --neon-magenta:#ff4dff;
  --neon-green:#10ffb4;
  --neon-yellow:#ffe066;
}
html,body{height:100%;background:#050508;color:#e9edff}

/* Banner instalar (Android/Chrome/Edge) */
#install-banner{display:none; position:sticky; top:0; z-index:1000;}
#install-banner .wrap{
  background: linear-gradient(135deg, #000 0%, #1a0044 45%, #002e86 100%);
  color:#fff; padding:10px 12px; display:flex; align-items:center; gap:10px;
  border-bottom: 1px solid rgba(155,212,255,.25);
  box-shadow: 0 6px 20px rgba(0,229,255,.15);
}
#install-banner .btn-install{
  border:1px solid rgba(0,229,255,.5); color:#bfefff; background:transparent; border-radius:999px; padding:6px 10px;
}
#install-banner .btn-dismiss{
  color:#bfefff; background:transparent; border:0; padding:6px 8px;
}

/* Aviso iOS */
#ios-install-hint{display:none; position:sticky; top:52px; z-index:999;}
#ios-install-hint .wrap{
  background: linear-gradient(135deg, #0b0b0f 0%, #151538 45%, #122a66 100%);
  color:#fff; padding:10px 12px; display:flex; align-items:center; gap:10px;
  border-bottom: 1px solid rgba(155,212,255,.25);
  border-top: 1px solid rgba(155,212,255,.15);
  box-shadow: 0 6px 18px rgba(0,229,255,.12);
  font-size: .92rem;
}
#ios-install-hint .btn-dismiss{
  color:#bfefff; background:transparent; border:0; padding:6px 8px;
}

.app-frame{min-height:100dvh;display:grid;place-items:center;padding:12px;background:#050508}
.receipt{
  width:100%;max-width:420px;background:rgba(10,12,24,.85);backdrop-filter:blur(6px);
  border-radius:20px;border:1px solid rgba(255,255,255,.06);
  box-shadow:0 12px 40px rgba(0,255,255,.15),0 0 60px rgba(255,77,255,.08) inset;
  overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100dvh;max-height:calc(100dvh - 24px);
}
.receipt-header{
  background: linear-gradient(135deg, #000 0%, #1a0044 45%, #002e86 100%);
  color:#fff;padding:18px 18px 14px;position:relative;
  box-shadow:0 0 30px rgba(0,229,255,.25) inset, 0 10px 40px rgba(255,77,255,.15);
}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:20px;filter:drop-shadow(0 0 6px rgba(255,255,255,.35))}
.badge-code{
  background: rgba(0,229,255,.14);border:1px solid rgba(0,229,255,.5);color:#fff;backdrop-filter:blur(6px);
  box-shadow:0 0 12px rgba(0,229,255,.45)
}

.receipt-body{padding:16px;overflow:auto;min-height:0;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;display:flex;flex-direction:column;gap:14px}

.status-card{
  background:rgba(12,16,36,.85);border:1px solid rgba(155,212,255,.18);border-radius:16px;padding:16px;
  box-shadow:0 4px 18px rgba(0,0,0,.5), 0 0 24px rgba(0,229,255,.08) inset;color:#fff
}
.status-icon{
  width:64px;height:64px;border-radius:16px;display:grid;place-items:center;margin-bottom:12px;
  background:linear-gradient(135deg, rgba(0,229,255,.2), rgba(16,255,180,.12));
  color:#9bd4ff;box-shadow: inset 0 0 0 1px rgba(0,229,255,.35)
}
.muted{color:#a9b9e6}
.panel-list{background:rgba(12,16,36,.85);border:1px dashed rgba(155,212,255,.25);border-radius:14px;padding:12px}
.panel-list li{margin-bottom:8px} .panel-list li:last-child{margin-bottom:0}

.receipt-footer{
  position:sticky;bottom:0;background:rgba(8,10,24,.9);border-top:1px dashed rgba(155,212,255,.25);
  padding:14px 16px;box-shadow:0 -6px 30px rgba(0,229,255,.15);z-index:1;color:#cfe6ff
}
.btn-primary{background:linear-gradient(135deg,#004cff,#00e5ff);border:0;box-shadow:0 10px 30px rgba(0,229,255,.3)}
.btn-outline-primary{border-color:#00e5ff;color:#00e5ff}
.btn-outline-primary:hover{background:#00e5ff;color:#061022}